/* Twenty source-specific light treatments. The source alpha remains on .fx;
 * only the old photo-hole mask is removed so an overlapping ornament can glow.
 * All geometry and the photo remain static. The shared lifecycle resumes paint. */
.profile-medallion__frame[data-frame-extra-effect="true"] .profile-medallion__fit-light {
  mask-image: none; -webkit-mask-image: none;
}
.profile-medallion__frame[data-frame-extra-effect="true"] .profile-medallion__fx-paint {
  inset: 0; opacity: 0; pointer-events: none; animation-play-state: paused;
}

/* Headset: left/right ear-cup cadence, then a satin band sweep and halo glint. */
.profile-medallion__frame[data-frame-effect="angel-cadence"] .profile-medallion__fx-paint {
  background: repeating-linear-gradient(0deg, transparent 0 7%, rgb(255 243 251 / 88%) 8% 10%, transparent 11% 18%);
  background-size: 100% 180%; animation: pp-extra-ear-cadence 5.4s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="angel-cadence"] [data-frame-part="a"] { clip-path: inset(48% 65% 18% 0); }
.profile-medallion__frame[data-frame-effect="angel-cadence"] [data-frame-part="b"] { clip-path: inset(48% 0 18% 65%); animation-delay: -2.7s; }
.profile-medallion__frame[data-frame-effect="angel-cadence"] [data-frame-part="c"] { clip-path: inset(15% 12% 48%); background: linear-gradient(110deg, transparent 42%, #fffbea 49%, transparent 55%); background-size: 240% 100%; animation: pp-extra-headband 9s ease-in-out infinite; animation-play-state: paused; }
.profile-medallion__frame[data-frame-effect="angel-cadence"] [data-frame-part="d"] { clip-path: inset(3% 30% 84%); background: radial-gradient(ellipse at 49% 9%, white, transparent 20%); animation: pp-extra-halo 7.3s ease-in-out infinite; animation-play-state: paused; }

/* Snacks: a six-glyph shop-sign chase; drawn tubing, not a flickering image. */
.profile-medallion__frame[data-frame-effect="snack-marquee"] .profile-medallion__fx-paint {
  background: rgb(255 255 233 / 85%); animation: pp-extra-snack-on 9s steps(1, end) infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="snack-marquee"] [data-frame-part="a"] { clip-path: inset(0 54% 63% 10%); }
.profile-medallion__frame[data-frame-effect="snack-marquee"] [data-frame-part="b"] { clip-path: inset(0 9% 63% 59%); animation-delay: -1.5s; }
.profile-medallion__frame[data-frame-effect="snack-marquee"] [data-frame-part="c"] { clip-path: inset(38% 0 32% 66%); animation-delay: -3s; }
.profile-medallion__frame[data-frame-effect="snack-marquee"] [data-frame-part="d"] { clip-path: inset(66% 12% 0 56%); animation-delay: -4.5s; }
.profile-medallion__frame[data-frame-effect="snack-marquee"] [data-frame-part="e"] { clip-path: inset(65% 54% 0 12%); animation-delay: -6s; }
.profile-medallion__frame[data-frame-effect="snack-marquee"] [data-frame-part="f"] { clip-path: inset(38% 67% 33% 0); animation-delay: -7.5s; }

/* Bat: violet membrane reflections answer each other; warm moon stays separate. */
.profile-medallion__frame[data-frame-effect="bat-moon-answer"] .profile-medallion__fx-paint {
  background: linear-gradient(25deg, transparent 35%, rgb(225 189 255 / 72%) 49%, transparent 61%); background-size: 100% 240%;
  animation: pp-extra-bat-answer 9.6s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="bat-moon-answer"] [data-frame-part="a"] { clip-path: inset(13% 57% 3% 0); }
.profile-medallion__frame[data-frame-effect="bat-moon-answer"] [data-frame-part="b"] { clip-path: inset(13% 0 3% 57%); animation-delay: -4.8s; animation-direction: reverse; }
.profile-medallion__frame[data-frame-effect="bat-moon-answer"] [data-frame-part="c"] { clip-path: inset(0 40% 83% 38%); background: radial-gradient(ellipse at 50% 8%, #fff9d3, transparent 18%); animation: pp-extra-moon-warmth 11s ease-in-out infinite; animation-play-state: paused; }

/* Crown: five distinct drawn stars, each with a brief four-point sparkle. */
.profile-medallion__frame[data-frame-effect="crown-star-chase"] .profile-medallion__fx-paint {
  background: radial-gradient(ellipse 2% 11% at var(--extra-star-x) var(--extra-star-y), #fff 0 12%, transparent 80%), radial-gradient(ellipse 10% 2% at var(--extra-star-x) var(--extra-star-y), #fff 0 12%, transparent 80%);
  animation: pp-extra-crown-chase 8.5s ease-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="crown-star-chase"] [data-frame-part="a"] { --extra-star-x: 50%; --extra-star-y: 13%; }
.profile-medallion__frame[data-frame-effect="crown-star-chase"] [data-frame-part="b"] { --extra-star-x: 31%; --extra-star-y: 18%; animation-delay: -1.7s; }
.profile-medallion__frame[data-frame-effect="crown-star-chase"] [data-frame-part="c"] { --extra-star-x: 68%; --extra-star-y: 19%; animation-delay: -3.4s; }
.profile-medallion__frame[data-frame-effect="crown-star-chase"] [data-frame-part="d"] { --extra-star-x: 19%; --extra-star-y: 26%; animation-delay: -5.1s; }
.profile-medallion__frame[data-frame-effect="crown-star-chase"] [data-frame-part="e"] { --extra-star-x: 81%; --extra-star-y: 26%; animation-delay: -6.8s; }

/* Charcoal: a rough traveling chalk stroke and three hot-pink handwritten hits. */
.profile-medallion__frame[data-frame-effect="ink-spark-scribble"] .profile-medallion__fx-paint {
  background: repeating-linear-gradient(16deg, rgb(255 137 197 / 82%) 0 1px, transparent 1px 3px);
  animation: pp-extra-ink-hit 7.8s steps(2, end) infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="ink-spark-scribble"] [data-frame-part="a"] { clip-path: inset(7% 69% 70% 9%); }
.profile-medallion__frame[data-frame-effect="ink-spark-scribble"] [data-frame-part="b"] { clip-path: inset(68% 61% 7% 13%); animation-delay: -2.6s; }
.profile-medallion__frame[data-frame-effect="ink-spark-scribble"] [data-frame-part="c"] { clip-path: inset(78% 15% 4% 60%); animation-delay: -5.2s; }
.profile-medallion__frame[data-frame-effect="ink-spark-scribble"] [data-frame-part="d"] { background: linear-gradient(0deg, transparent 44%, rgb(218 218 222 / 52%) 48%, transparent 53%); background-size: 100% 250%; clip-path: inset(4% 73% 10% 0); animation: pp-extra-chalk-trace 12s linear infinite; animation-play-state: paused; }

/* Paws: two pads pick up different satin reflections; tail receives the echo. */
.profile-medallion__frame[data-frame-effect="paw-soft-gleam"] .profile-medallion__fx-paint {
  background: linear-gradient(120deg, transparent 42%, rgb(255 248 236 / 88%) 49%, transparent 56%); background-size: 250% 100%;
  animation: pp-extra-paw-polish 9.4s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="paw-soft-gleam"] [data-frame-part="a"] { clip-path: inset(58% 73% 16% 1%); }
.profile-medallion__frame[data-frame-effect="paw-soft-gleam"] [data-frame-part="b"] { clip-path: inset(60% 1% 14% 73%); animation-delay: -4.7s; }
.profile-medallion__frame[data-frame-effect="paw-soft-gleam"] [data-frame-part="c"] { clip-path: inset(83% 21% 0 21%); animation-delay: -2.2s; animation-duration: 12.6s; }

/* Fox: a sleepy three-star lullaby; only the white tail gets a slow sheen. */
.profile-medallion__frame[data-frame-effect="fox-dream-stars"] .profile-medallion__fx-paint {
  background: radial-gradient(ellipse 12% 11% at var(--extra-star-x) var(--extra-star-y), #fffde3 0 8%, rgb(255 224 122 / 65%) 32%, transparent 72%);
  animation: pp-extra-fox-lullaby 10.8s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="fox-dream-stars"] [data-frame-part="a"] { --extra-star-x: 80%; --extra-star-y: 13%; }
.profile-medallion__frame[data-frame-effect="fox-dream-stars"] [data-frame-part="b"] { --extra-star-x: 94%; --extra-star-y: 35%; animation-delay: -3.6s; }
.profile-medallion__frame[data-frame-effect="fox-dream-stars"] [data-frame-part="c"] { --extra-star-x: 93%; --extra-star-y: 61%; animation-delay: -7.2s; }
.profile-medallion__frame[data-frame-effect="fox-dream-stars"] [data-frame-part="d"] { clip-path: inset(77% 25% 0 37%); background: linear-gradient(115deg, transparent 41%, #fff4dd 49%, transparent 56%); background-size: 240% 100%; animation: pp-extra-fox-tail 15s ease-in-out infinite; animation-play-state: paused; }

/* Lily: an expanding oval ripple, a local blossom and a rising stream highlight. */
.profile-medallion__frame[data-frame-effect="lily-ripple"] .profile-medallion__fx-paint {
  animation: pp-extra-lily-wave 8.2s ease-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="lily-ripple"] [data-frame-part="a"] { clip-path: inset(79% 1% 2% 51%); background: radial-gradient(ellipse at 77% 86%, transparent 0 8%, #bffff3 9% 10%, transparent 12%); background-repeat: no-repeat; }
.profile-medallion__frame[data-frame-effect="lily-ripple"] [data-frame-part="b"] { clip-path: inset(0 59% 74% 8%); background: radial-gradient(ellipse at 24% 14%, #fffbe9, rgb(255 151 217 / 70%) 8%, transparent 18%); animation-delay: -4.1s; }
.profile-medallion__frame[data-frame-effect="lily-ripple"] [data-frame-part="c"] { clip-path: inset(20% 72% 46% 2%); background: linear-gradient(0deg, transparent 42%, #cffffa 49%, transparent 56%); background-size: 100% 240%; animation: pp-extra-lily-stream 10s linear infinite; animation-play-state: paused; }

/* Arcade: four button inputs followed by a D-pad acknowledgement and rail scan. */
.profile-medallion__frame[data-frame-effect="arcade-input-sequence"] .profile-medallion__fx-paint {
  background: radial-gradient(ellipse 6% 6% at var(--extra-button-x) var(--extra-button-y), white, transparent 80%);
  animation: pp-extra-arcade-input 9.6s steps(1, end) infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="arcade-input-sequence"] [data-frame-part="a"] { --extra-button-x: 82%; --extra-button-y: 12%; }
.profile-medallion__frame[data-frame-effect="arcade-input-sequence"] [data-frame-part="b"] { --extra-button-x: 87%; --extra-button-y: 17%; animation-delay: -1.6s; }
.profile-medallion__frame[data-frame-effect="arcade-input-sequence"] [data-frame-part="c"] { --extra-button-x: 82%; --extra-button-y: 21%; animation-delay: -3.2s; }
.profile-medallion__frame[data-frame-effect="arcade-input-sequence"] [data-frame-part="d"] { --extra-button-x: 78%; --extra-button-y: 17%; animation-delay: -4.8s; }
.profile-medallion__frame[data-frame-effect="arcade-input-sequence"] [data-frame-part="e"] { --extra-button-x: 18%; --extra-button-y: 81%; animation-delay: -6.4s; }
.profile-medallion__frame[data-frame-effect="arcade-input-sequence"] [data-frame-part="f"] { background: conic-gradient(from 15deg, transparent 0 78%, #dbffff 82%, transparent 88%); animation: pp-extra-arcade-rail 12s linear infinite; animation-play-state: paused; }

/* Comet: tail travels first, star head answers, then a short lower afterglow. */
.profile-medallion__frame[data-frame-effect="comet-tail-trace"] .profile-medallion__fx-paint {
  background: linear-gradient(135deg, transparent 41%, #e7ffff 48%, transparent 54%); background-size: 280% 240%;
  animation: pp-extra-comet-travel 7.8s cubic-bezier(.2,.6,.3,1) infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="comet-tail-trace"] [data-frame-part="a"] { clip-path: polygon(0 30%, 27% 48%, 72% 80%, 70% 100%, 0 100%); }
.profile-medallion__frame[data-frame-effect="comet-tail-trace"] [data-frame-part="b"] { clip-path: inset(3% 4% 69% 65%); background: radial-gradient(ellipse at 82% 17%, #fff 0 3%, #bdffff 6%, transparent 15%); animation: pp-extra-comet-head 7.8s ease-out infinite; animation-play-state: paused; }
.profile-medallion__frame[data-frame-effect="comet-tail-trace"] [data-frame-part="c"] { clip-path: inset(31% 0 4% 73%); animation-delay: -3.1s; }

/* Heart: silk reflections visit three bends; bow gleam has its own slower beat. */
.profile-medallion__frame[data-frame-effect="heart-ribbon-sweep"] .profile-medallion__fx-paint {
  background: linear-gradient(115deg, transparent 43%, #fff5ee 48%, rgb(255 210 222 / 70%) 53%, transparent 60%); background-size: 300% 160%;
  animation: pp-extra-heart-silk 13.5s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="heart-ribbon-sweep"] [data-frame-part="a"] { clip-path: inset(4% 55% 20% 0); }
.profile-medallion__frame[data-frame-effect="heart-ribbon-sweep"] [data-frame-part="b"] { clip-path: inset(41% 0 0 47%); animation-delay: -4.5s; }
.profile-medallion__frame[data-frame-effect="heart-ribbon-sweep"] [data-frame-part="c"] { clip-path: inset(69% 39% 0 11%); animation-delay: -9s; }
.profile-medallion__frame[data-frame-effect="heart-ribbon-sweep"] [data-frame-part="d"] { clip-path: inset(3% 0 54% 68%); animation-duration: 17s; animation-delay: -6s; }

/* Bubble: slowly sliding spectral films, not a rotating bitmap or whole hue filter. */
.profile-medallion__frame[data-frame-effect="bubble-spectral-film"] .profile-medallion__fx-paint {
  background: linear-gradient(135deg, transparent 22%, rgb(122 249 255 / 72%) 37%, rgb(255 206 246 / 82%) 48%, rgb(255 250 186 / 62%) 58%, transparent 72%); background-size: 330% 210%;
  animation: pp-extra-bubble-film 17s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="bubble-spectral-film"] [data-frame-part="a"] { clip-path: inset(0 48% 0 0); }
.profile-medallion__frame[data-frame-effect="bubble-spectral-film"] [data-frame-part="b"] { clip-path: inset(0 0 0 52%); animation-direction: reverse; animation-delay: -8.5s; }
.profile-medallion__frame[data-frame-effect="bubble-spectral-film"] [data-frame-part="c"] { background: linear-gradient(110deg, transparent 46%, white 49%, transparent 52%); background-size: 380% 100%; animation: pp-extra-bubble-gloss 21s ease-in-out infinite; animation-play-state: paused; }

/* Water/fire: opposing directional currents, kept within their drawn halves. */
.profile-medallion__frame[data-frame-effect="dual-element-orbit"] .profile-medallion__fx-paint {
  background-size: 100% 260%; animation: pp-extra-element-current 6.4s linear infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="dual-element-orbit"] [data-frame-part="a"] { clip-path: inset(0 49% 0 0); background-image: repeating-linear-gradient(155deg, transparent 0 18%, rgb(168 252 255 / 78%) 22%, transparent 27% 40%); }
.profile-medallion__frame[data-frame-effect="dual-element-orbit"] [data-frame-part="b"] { clip-path: inset(0 0 0 51%); background-image: repeating-linear-gradient(25deg, transparent 0 20%, rgb(255 247 131 / 84%) 24%, transparent 29% 43%); animation-direction: reverse; animation-duration: 5.1s; }
.profile-medallion__frame[data-frame-effect="dual-element-orbit"] [data-frame-part="c"] { clip-path: inset(83% 25% 0 25%); background: linear-gradient(90deg, transparent, #e4ffff 42%, #fff8c3 58%, transparent); animation: pp-extra-element-meet 11s ease-in-out infinite; animation-play-state: paused; }

/* Jellyfish: bell light expands internally; tentacle sheen follows downwards. */
.profile-medallion__frame[data-frame-effect="jelly-bell-bloom"] .profile-medallion__fx-paint {
  background: radial-gradient(ellipse at var(--extra-bell-x) var(--extra-bell-y), #f5fcff 0 2%, rgb(175 197 255 / 72%) 7%, transparent 16%);
  animation: pp-extra-jelly-bell 8.8s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="jelly-bell-bloom"] [data-frame-part="a"] { --extra-bell-x: 82%; --extra-bell-y: 13%; clip-path: inset(0 5% 75% 67%); }
.profile-medallion__frame[data-frame-effect="jelly-bell-bloom"] [data-frame-part="b"] { --extra-bell-x: 8%; --extra-bell-y: 41%; clip-path: inset(35% 84% 49% 0); animation-delay: -4.4s; }
.profile-medallion__frame[data-frame-effect="jelly-bell-bloom"] [data-frame-part="c"] { clip-path: inset(22% 0 2% 74%); background: linear-gradient(0deg, transparent 39%, rgb(236 228 255 / 65%) 48%, transparent 57%); background-size: 100% 260%; animation: pp-extra-jelly-tentacle 12s ease-in-out infinite; animation-play-state: paused; }

/* Constellation: sequential light links trace the three existing blue arcs. */
.profile-medallion__frame[data-frame-effect="constellation-link"] .profile-medallion__fx-paint {
  background: linear-gradient(125deg, transparent 38%, #e9ffff 46%, rgb(101 185 255 / 80%) 51%, transparent 57%); background-size: 260% 220%;
  animation: pp-extra-star-link 12s linear infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="constellation-link"] [data-frame-part="a"] { clip-path: inset(0 51% 57% 0); }
.profile-medallion__frame[data-frame-effect="constellation-link"] [data-frame-part="b"] { clip-path: inset(14% 0 22% 76%); animation-delay: -4s; }
.profile-medallion__frame[data-frame-effect="constellation-link"] [data-frame-part="c"] { clip-path: inset(65% 32% 0 4%); animation-delay: -8s; }

/* Comic mood: inked accents answer in short two-beat pops, then a bottom puff. */
.profile-medallion__frame[data-frame-effect="comic-emphasis-pop"] .profile-medallion__fx-paint {
  background: repeating-linear-gradient(135deg, rgb(255 240 189 / 85%) 0 2px, transparent 2px 5px);
  animation: pp-extra-comic-pop 8.6s steps(2, end) infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="comic-emphasis-pop"] [data-frame-part="a"] { clip-path: inset(6% 67% 59% 3%); }
.profile-medallion__frame[data-frame-effect="comic-emphasis-pop"] [data-frame-part="b"] { clip-path: inset(6% 4% 59% 66%); animation-delay: -2.6s; }
.profile-medallion__frame[data-frame-effect="comic-emphasis-pop"] [data-frame-part="c"] { clip-path: inset(81% 31% 3%); animation-delay: -5.6s; }
.profile-medallion__frame[data-frame-effect="comic-emphasis-pop"] [data-frame-part="d"] { clip-path: inset(51% 65% 16% 3%); animation-delay: -1.3s; }
.profile-medallion__frame[data-frame-effect="comic-emphasis-pop"] [data-frame-part="e"] { clip-path: inset(51% 3% 16% 65%); animation-delay: -3.9s; }

/* Angular hologram: crisp stepped spectral bars cross four separate facets. */
.profile-medallion__frame[data-frame-effect="angular-spectrum-scan"] .profile-medallion__fx-paint {
  background: repeating-linear-gradient(115deg, transparent 0 20%, rgb(160 255 255 / 80%) 21% 23%, rgb(255 164 245 / 72%) 24% 26%, transparent 27% 46%); background-size: 290% 200%;
  animation: pp-extra-angular-scan 10.4s steps(10, end) infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="angular-spectrum-scan"] [data-frame-part="a"] { clip-path: polygon(0 0, 100% 0, 50% 50%); }
.profile-medallion__frame[data-frame-effect="angular-spectrum-scan"] [data-frame-part="b"] { clip-path: polygon(100% 0, 100% 100%, 50% 50%); animation-delay: -2.6s; }
.profile-medallion__frame[data-frame-effect="angular-spectrum-scan"] [data-frame-part="c"] { clip-path: polygon(100% 100%, 0 100%, 50% 50%); animation-delay: -5.2s; }
.profile-medallion__frame[data-frame-effect="angular-spectrum-scan"] [data-frame-part="d"] { clip-path: polygon(0 100%, 0 0, 50% 50%); animation-delay: -7.8s; }

/* Dumpling: warmth stays on the pastry; little existing steam hearts light up. */
.profile-medallion__frame[data-frame-effect="dumpling-steam"] .profile-medallion__fx-paint {
  animation: pp-extra-dumpling-warmth 11.4s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="dumpling-steam"] [data-frame-part="a"] { clip-path: inset(82% 37% 0); background: radial-gradient(ellipse at 50% 93%, #fffbe2, transparent 16%); }
.profile-medallion__frame[data-frame-effect="dumpling-steam"] [data-frame-part="b"] { clip-path: inset(73% 19% 7%); background: linear-gradient(0deg, transparent 43%, #fff0dc 49%, transparent 56%); background-size: 100% 240%; animation: pp-extra-steam-trace 8s ease-out infinite; animation-play-state: paused; }

/* Penguin: cool light falls through three fixed snow-stars; scarf stays anchored. */
.profile-medallion__frame[data-frame-effect="snowstar-fall"] .profile-medallion__fx-paint {
  background: linear-gradient(0deg, transparent 40%, white 49%, rgb(165 236 255 / 78%) 54%, transparent 61%); background-size: 100% 280%;
  animation: pp-extra-snowfall-light 10.2s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="snowstar-fall"] [data-frame-part="a"] { clip-path: inset(0 29% 85% 54%); }
.profile-medallion__frame[data-frame-effect="snowstar-fall"] [data-frame-part="b"] { clip-path: inset(11% 4% 69% 77%); animation-delay: -3.4s; }
.profile-medallion__frame[data-frame-effect="snowstar-fall"] [data-frame-part="c"] { clip-path: inset(38% 0 47% 89%); animation-delay: -6.8s; }
.profile-medallion__frame[data-frame-effect="snowstar-fall"] [data-frame-part="d"] { clip-path: inset(76% 3% 0 24%); background: linear-gradient(115deg, transparent 43%, rgb(215 252 255 / 70%) 49%, transparent 56%); background-size: 260% 100%; animation: pp-extra-scarf-gloss 16s ease-in-out infinite; animation-play-state: paused; }

/* Butterfly: light fans out across the two wing-vein sets, then along the trail. */
.profile-medallion__frame[data-frame-effect="butterfly-wing-flash"] .profile-medallion__fx-paint {
  background: repeating-conic-gradient(from 15deg at 77% 29%, transparent 0 17deg, rgb(218 252 255 / 88%) 19deg 23deg, transparent 26deg 51deg);
  animation: pp-extra-wing-veins 7.2s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="butterfly-wing-flash"] [data-frame-part="a"] { clip-path: polygon(58% 0, 75% 0, 79% 29%, 60% 32%); }
.profile-medallion__frame[data-frame-effect="butterfly-wing-flash"] [data-frame-part="b"] { clip-path: polygon(78% 13%, 100% 25%, 89% 47%, 63% 48%, 62% 33%); animation-delay: -3.6s; }
.profile-medallion__frame[data-frame-effect="butterfly-wing-flash"] [data-frame-part="c"] { clip-path: inset(12% 38% 59% 8%); background: linear-gradient(110deg, transparent 43%, #e6ffff 49%, transparent 54%); background-size: 250% 100%; animation: pp-extra-butterfly-trail 11.5s ease-in-out infinite; animation-play-state: paused; }

/* Deliberate, tiny photo-crossing particles. Existing photo-fx wrapper is fixed. */
.profile-medallion__frame[data-frame-effect="jelly-bell-bloom"] .profile-medallion__photo-fx-paint {
  width: 3px; height: 3px; border: 1px solid rgb(189 236 255 / 75%); border-radius: 50%; background: rgb(219 225 255 / 22%);
  box-shadow: 0 0 3px rgb(161 196 255 / 55%); opacity: 0;
  animation: pp-extra-jelly-mote 9s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="jelly-bell-bloom"] [data-photo-part="a"] { left: 86%; top: 34%; }
.profile-medallion__frame[data-frame-effect="jelly-bell-bloom"] [data-photo-part="b"] { left: 8%; top: 65%; animation-delay: -4.5s; }
.profile-medallion__frame[data-frame-effect="constellation-link"] .profile-medallion__photo-fx-paint {
  width: 2px; height: 2px; border-radius: 50%; background: #eaffff; box-shadow: 0 0 3px 1px rgb(59 157 255 / 70%); opacity: 0;
  animation: pp-extra-constellation-mote 10.6s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="constellation-link"] [data-photo-part="a"] { left: 22%; top: 17%; }
.profile-medallion__frame[data-frame-effect="constellation-link"] [data-photo-part="b"] { left: 87%; top: 52%; animation-delay: -3.5s; }
.profile-medallion__frame[data-frame-effect="constellation-link"] [data-photo-part="c"] { left: 36%; top: 84%; animation-delay: -7s; }
.profile-medallion__frame[data-frame-effect="dumpling-steam"] .profile-medallion__photo-fx-paint {
  width: 7%; height: 13%; border: 1px solid transparent; border-left-color: rgb(246 197 160 / 78%); border-radius: 50%; opacity: 0;
  animation: pp-extra-dumpling-curl 8.6s ease-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="dumpling-steam"] [data-photo-part="a"] { left: 43%; top: 79%; }
.profile-medallion__frame[data-frame-effect="dumpling-steam"] [data-photo-part="b"] { left: 52%; top: 80%; animation-delay: -2.9s; }
.profile-medallion__frame[data-frame-effect="dumpling-steam"] [data-photo-part="c"] { left: 48%; top: 77%; animation-delay: -5.8s; }

@keyframes pp-extra-ear-cadence { 0%, 45%, 100% { opacity: 0; background-position: 0 100%; } 14%, 24% { opacity: .36; } 38% { opacity: 0; background-position: 0 0; } }
@keyframes pp-extra-headband { 0%, 24% { opacity: 0; background-position: 130% 0; } 40% { opacity: .56; } 70%, 100% { opacity: 0; background-position: -30% 0; } }
@keyframes pp-extra-halo { 0%, 52%, 100% { opacity: .05; } 27% { opacity: .57; } 37% { opacity: .16; } }
@keyframes pp-extra-snack-on { 0%, 18%, 100% { opacity: 0; } 3% { opacity: .52; } 11% { opacity: .2; } }
@keyframes pp-extra-bat-answer { 0%, 52%, 100% { opacity: 0; background-position: 0 100%; } 17% { opacity: .27; } 40% { opacity: .12; background-position: 0 0; } }
@keyframes pp-extra-moon-warmth { 0%, 100% { opacity: .04; } 42% { opacity: .46; } 64% { opacity: .16; } }
@keyframes pp-extra-crown-chase { 0%, 27%, 100% { opacity: 0; } 12% { opacity: .86; } 18% { opacity: .24; } }
@keyframes pp-extra-ink-hit { 0%, 20%, 100% { opacity: 0; } 6% { opacity: .48; } 11% { opacity: .16; } 15% { opacity: .4; } }
@keyframes pp-extra-chalk-trace { 0%, 80%, 100% { opacity: 0; background-position: 0 100%; } 20% { opacity: .22; } 60% { opacity: .12; background-position: 0 0; } }
@keyframes pp-extra-paw-polish { 0%, 25% { opacity: 0; background-position: 120% 0; } 44% { opacity: .44; } 66%, 100% { opacity: 0; background-position: -20% 0; } }
@keyframes pp-extra-fox-lullaby { 0%, 100% { opacity: .06; } 25% { opacity: .53; } 45% { opacity: .18; } 67% { opacity: .3; } 82% { opacity: .06; } }
@keyframes pp-extra-fox-tail { 0%, 49% { opacity: 0; background-position: 130% 0; } 63% { opacity: .3; } 89%, 100% { opacity: 0; background-position: -30% 0; } }
@keyframes pp-extra-lily-wave { 0%, 100% { opacity: 0; transform: scale(.85); } 24% { opacity: .52; transform: scale(.94); } 66% { opacity: 0; transform: scale(1.08); } }
@keyframes pp-extra-lily-stream { 0%, 85%, 100% { opacity: 0; background-position: 0 100%; } 28%, 48% { opacity: .48; } 72% { opacity: 0; background-position: 0 0; } }
@keyframes pp-extra-arcade-input { 0%, 21%, 100% { opacity: 0; } 3%, 10% { opacity: .73; } 14% { opacity: .28; } }
@keyframes pp-extra-arcade-rail { 0% { opacity: .12; transform: rotate(0); } 50% { opacity: .3; } 100% { opacity: .12; transform: rotate(1turn); } }
@keyframes pp-extra-comet-travel { 0%, 18% { opacity: 0; background-position: 100% 0; } 30% { opacity: .76; } 53%, 100% { opacity: 0; background-position: 0 100%; } }
@keyframes pp-extra-comet-head { 0%, 40%, 72%, 100% { opacity: 0; } 49% { opacity: .82; } 60% { opacity: .23; } }
@keyframes pp-extra-heart-silk { 0%, 18% { opacity: 0; background-position: 130% 0; } 40% { opacity: .46; } 77%, 100% { opacity: 0; background-position: -30% 100%; } }
@keyframes pp-extra-bubble-film { 0%, 100% { opacity: .21; background-position: 0 20%; } 35% { opacity: .52; } 50% { opacity: .35; background-position: 100% 80%; } 78% { opacity: .22; } }
@keyframes pp-extra-bubble-gloss { 0%, 33% { opacity: 0; background-position: 140% 0; } 52% { opacity: .67; } 75%, 100% { opacity: 0; background-position: -40% 0; } }
@keyframes pp-extra-element-current { 0% { opacity: .17; background-position: 0 100%; } 48% { opacity: .5; } 100% { opacity: .17; background-position: 0 0; } }
@keyframes pp-extra-element-meet { 0%, 32%, 100% { opacity: 0; } 13% { opacity: .61; } 25% { opacity: .2; } }
@keyframes pp-extra-jelly-bell { 0%, 100% { opacity: .05; transform: scale(.96); } 37% { opacity: .56; transform: scale(1.02); } 69% { opacity: .16; transform: scale(.98); } }
@keyframes pp-extra-jelly-tentacle { 0%, 100% { opacity: 0; background-position: 0 0; } 33% { opacity: .43; } 72% { opacity: 0; background-position: 0 100%; } }
@keyframes pp-extra-star-link { 0%, 55%, 100% { opacity: 0; background-position: 110% 0; } 16% { opacity: .72; } 43% { opacity: .16; background-position: -10% 100%; } }
@keyframes pp-extra-comic-pop { 0%, 25%, 100% { opacity: 0; transform: scale(.98); } 6% { opacity: .65; transform: scale(1.01); } 11% { opacity: .15; } 16% { opacity: .46; } 21% { opacity: 0; transform: scale(1.025); } }
@keyframes pp-extra-angular-scan { 0% { opacity: .1; background-position: 100% 0; } 28% { opacity: .51; } 53% { opacity: .2; background-position: 0 100%; } 79% { opacity: .42; } 100% { opacity: .1; background-position: -100% 0; } }
@keyframes pp-extra-dumpling-warmth { 0%, 100% { opacity: .03; } 48% { opacity: .38; } 74% { opacity: .1; } }
@keyframes pp-extra-steam-trace { 0%, 75%, 100% { opacity: 0; background-position: 0 100%; } 27% { opacity: .56; } 61% { opacity: 0; background-position: 0 0; } }
@keyframes pp-extra-snowfall-light { 0%, 64%, 100% { opacity: 0; background-position: 0 0; } 25% { opacity: .75; } 52% { opacity: .16; background-position: 0 100%; } }
@keyframes pp-extra-scarf-gloss { 0%, 40% { opacity: 0; background-position: 125% 0; } 64% { opacity: .35; } 87%, 100% { opacity: 0; background-position: -25% 0; } }
@keyframes pp-extra-wing-veins { 0%, 100% { opacity: .04; transform: rotate(-3deg); } 30% { opacity: .7; transform: rotate(2deg); } 58% { opacity: .1; transform: rotate(5deg); } }
@keyframes pp-extra-butterfly-trail { 0%, 22% { opacity: 0; background-position: 130% 0; } 41% { opacity: .56; } 67%, 100% { opacity: 0; background-position: -30% 0; } }
@keyframes pp-extra-jelly-mote { 0%, 100% { opacity: 0; transform: translate(0, 3px) scale(.7); } 35% { opacity: .64; } 74% { opacity: 0; transform: translate(-2px, -4px) scale(1); } }
@keyframes pp-extra-constellation-mote { 0%, 100% { opacity: 0; transform: translate(0, 2px); } 29% { opacity: .78; transform: translate(2px, -1px); } 71% { opacity: .12; transform: translate(-1px, -3px); } }
@keyframes pp-extra-dumpling-curl { 0%, 100% { opacity: 0; transform: translateY(2px) rotate(-8deg) scale(.75); } 28% { opacity: .6; } 79% { opacity: 0; transform: translateY(-7px) rotate(10deg) scale(1.1); } }

/* Small placements keep at most three painted details. Particle-bearing art
 * uses two source accents plus one particle, instead of adding to that budget. */
:is(.profile-medallion--header, .profile-medallion--author) .profile-medallion__frame[data-frame-extra-effect="true"] :is([data-frame-part="d"], [data-frame-part="e"], [data-frame-part="f"], [data-frame-part="g"], [data-frame-part="h"], [data-photo-part="b"], [data-photo-part="c"]) { display: none; }
:is(.profile-medallion--header, .profile-medallion--author) .profile-medallion__frame:is([data-frame-effect="jelly-bell-bloom"], [data-frame-effect="constellation-link"]) [data-frame-part="c"] { display: none; }
/* Matches the shared in-view selector specificity, including import-before-main
 * CSS. Default remains paused; only the existing controller sets this state. */
.profile-medallion[data-frame-in-view="true"] .profile-medallion__frame[data-frame-extra-effect="true"] :is(.profile-medallion__fx-paint, .profile-medallion__photo-fx-paint) { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .profile-medallion__frame[data-frame-extra-effect="true"] :is(.profile-medallion__fx-paint, .profile-medallion__photo-fx-paint) { animation: none !important; display: none !important; }
}

/* Thirty-one exact-source paid-frame light recipes. These layers never move,
 * recolor or copy the profile photo or the frame bitmap. The source alpha and
 * measured photo aperture remain the two masks; only local paint is animated. */
.profile-medallion__frame[data-frame-paid-effect="true"] .profile-medallion__fx-paint {
  inset: 0; opacity: 0; pointer-events: none; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-paid-effect="true"] [data-frame-part="b"] { animation-delay: -2.1s; }
.profile-medallion__frame[data-frame-paid-effect="true"] [data-frame-part="c"] { animation-delay: -4.2s; }
.profile-medallion__frame[data-frame-paid-effect="true"] [data-frame-part="d"] { animation-delay: -6.3s; }

/* Sugar, ice, pearl and jewel points blink independently. */
.profile-medallion__frame[data-frame-effect-family="spark"] .profile-medallion__fx-paint {
  --pf-paid-x: 18%; --pf-paid-y: 23%;
  background: radial-gradient(ellipse 2% 9% at var(--pf-paid-x) var(--pf-paid-y), white 0 16%, transparent 76%), radial-gradient(ellipse 9% 2% at var(--pf-paid-x) var(--pf-paid-y), white 0 16%, transparent 76%), radial-gradient(circle at var(--pf-paid-x) var(--pf-paid-y), var(--pf-paid-a) 0 2%, transparent 10%);
  animation: profile-paid-spark 8.4s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect-family="spark"] [data-frame-part="b"] { --pf-paid-x: 76%; --pf-paid-y: 18%; }
.profile-medallion__frame[data-frame-effect-family="spark"] [data-frame-part="c"] { --pf-paid-x: 83%; --pf-paid-y: 73%; }
.profile-medallion__frame[data-frame-effect-family="spark"] [data-frame-part="d"] { --pf-paid-x: 28%; --pf-paid-y: 84%; }

/* Soft ornaments answer one another without deforming their source drawing. */
.profile-medallion__frame[data-frame-effect-family="pulse"] .profile-medallion__fx-paint {
  background: radial-gradient(circle at 50% 50%, transparent 42%, var(--pf-paid-a) 52%, var(--pf-paid-b) 61%, transparent 72%);
  animation: profile-paid-pulse 9.2s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect-family="pulse"] [data-frame-part="b"] { transform-origin: 72% 24%; }
.profile-medallion__frame[data-frame-effect-family="pulse"] [data-frame-part="c"] { transform-origin: 76% 76%; }
.profile-medallion__frame[data-frame-effect-family="pulse"] [data-frame-part="d"] { transform-origin: 24% 76%; }

/* Mechanical spokes receive a narrow turning light; the bitmap stays still. */
.profile-medallion__frame[data-frame-effect-family="rotor"] .profile-medallion__fx-paint {
  inset: -12%; background: conic-gradient(from 0deg, transparent 0 40deg, var(--pf-paid-a) 53deg, white 58deg, var(--pf-paid-b) 65deg, transparent 79deg 360deg);
  animation: profile-paid-rotor 7.6s linear infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect-family="rotor"] [data-frame-part="b"] { animation-direction: reverse; animation-duration: 9.1s; }

/* Pollen, petals, stars and clouds float at staggered local positions. */
.profile-medallion__frame[data-frame-effect-family="drift"] .profile-medallion__fx-paint {
  background: radial-gradient(circle at 18% 32%, var(--pf-paid-a) 0 1.6%, transparent 4%), radial-gradient(circle at 72% 19%, white 0 1.2%, transparent 3.7%), radial-gradient(circle at 82% 69%, var(--pf-paid-b) 0 1.4%, transparent 4%), radial-gradient(circle at 34% 82%, var(--pf-paid-a) 0 1%, transparent 3.2%);
  animation: profile-paid-drift 10.8s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect-family="drift"] [data-frame-part="b"] { animation-direction: reverse; animation-duration: 12.6s; }

/* Brushed and enamelled surfaces receive one restrained directional sheen. */
.profile-medallion__frame[data-frame-effect-family="sweep"] .profile-medallion__fx-paint {
  background: linear-gradient(118deg, transparent 34%, var(--pf-paid-b) 43%, white 49%, var(--pf-paid-a) 54%, transparent 64%); background-size: 310% 180%;
  animation: profile-paid-sweep 11.4s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect-family="sweep"] [data-frame-part="b"] { animation-direction: reverse; animation-duration: 13.2s; }

/* Circuit, engraving and core lines travel in short, separated packets. */
.profile-medallion__frame[data-frame-effect-family="signal"] .profile-medallion__fx-paint {
  background: repeating-linear-gradient(132deg, transparent 0 16%, var(--pf-paid-a) 19% 21%, white 22% 23%, var(--pf-paid-b) 24% 26%, transparent 29% 45%); background-size: 270% 240%;
  animation: profile-paid-signal 8.9s steps(12, end) infinite; animation-play-state: paused;
}

/* Wood and stone follow their quiet painted grain instead of flashing. */
.profile-medallion__frame[data-frame-effect-family="grain"] .profile-medallion__fx-paint {
  background: repeating-linear-gradient(18deg, transparent 0 8%, var(--pf-paid-a) 10% 11%, transparent 13% 20%, var(--pf-paid-b) 22% 23%, transparent 25% 35%); background-size: 180% 260%;
  animation: profile-paid-grain 15.5s ease-in-out infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect-family="grain"] [data-frame-part="b"] { animation-direction: reverse; }

/* Hard cuts and scales catch different angular reflections. */
.profile-medallion__frame[data-frame-effect-family="facet"] .profile-medallion__fx-paint {
  background: conic-gradient(from 28deg at 50% 50%, transparent 0 20deg, var(--pf-paid-a) 33deg, white 41deg, transparent 54deg 132deg, var(--pf-paid-b) 151deg, transparent 168deg 360deg);
  animation: profile-paid-facet 12.2s steps(16, end) infinite; animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect-family="facet"] [data-frame-part="b"] { animation-direction: reverse; animation-duration: 14.1s; }

/* Per-source palettes keep neighboring products visibly distinct. */
.profile-medallion__frame[data-frame-effect="biscuit-crumb-glint"] { --pf-paid-a: rgb(255 230 154 / 88%); --pf-paid-b: rgb(255 247 215 / 62%); }
.profile-medallion__frame[data-frame-effect="rabbit-paw-pulse"] { --pf-paid-a: rgb(255 198 224 / 78%); --pf-paid-b: rgb(255 242 248 / 48%); }
.profile-medallion__frame[data-frame-effect="turbine-light-blades"] { --pf-paid-a: rgb(100 225 255 / 82%); --pf-paid-b: rgb(118 137 255 / 58%); }
.profile-medallion__frame[data-frame-effect="lily-pollen-drift"] { --pf-paid-a: rgb(242 255 193 / 92%); --pf-paid-b: rgb(173 239 255 / 64%); }
.profile-medallion__frame[data-frame-effect="graphite-edge-trace"] { --pf-paid-a: rgb(183 198 216 / 52%); --pf-paid-b: rgb(240 246 255 / 70%); }
.profile-medallion__frame[data-frame-effect="ribbon-bow-glint"] { --pf-paid-a: rgb(180 224 255 / 80%); --pf-paid-b: rgb(245 251 255 / 58%); }
.profile-medallion__frame[data-frame-effect="cobalt-signal-trace"] { --pf-paid-a: rgb(78 232 255 / 90%); --pf-paid-b: rgb(91 125 255 / 68%); }
.profile-medallion__frame[data-frame-effect="lavender-petal-drift"] { --pf-paid-a: rgb(231 199 255 / 84%); --pf-paid-b: rgb(255 226 248 / 62%); }
.profile-medallion__frame[data-frame-effect="silver-brush-glint"] { --pf-paid-a: rgb(219 235 249 / 72%); --pf-paid-b: rgb(255 255 255 / 62%); }
.profile-medallion__frame[data-frame-effect="brass-engraved-trace"] { --pf-paid-a: rgb(255 206 111 / 82%); --pf-paid-b: rgb(255 242 188 / 58%); }
.profile-medallion__frame[data-frame-effect="enamel-rim-sweep"] { --pf-paid-a: rgb(115 222 255 / 84%); --pf-paid-b: rgb(205 242 255 / 62%); }
.profile-medallion__frame[data-frame-effect="woodgrain-light-wash"] { --pf-paid-a: rgb(242 190 127 / 42%); --pf-paid-b: rgb(255 226 178 / 30%); }
.profile-medallion__frame[data-frame-effect="jelly-paw-squish"] { --pf-paid-a: rgb(255 161 216 / 82%); --pf-paid-b: rgb(255 232 247 / 54%); }
.profile-medallion__frame[data-frame-effect="pearl-dew-glints"] { --pf-paid-a: rgb(198 242 255 / 90%); --pf-paid-b: rgb(255 220 250 / 66%); }
.profile-medallion__frame[data-frame-effect="berry-jelly-glisten"] { --pf-paid-a: rgb(255 116 178 / 86%); --pf-paid-b: rgb(255 223 239 / 54%); }
.profile-medallion__frame[data-frame-effect="marble-vein-trace"] { --pf-paid-a: rgb(237 238 255 / 58%); --pf-paid-b: rgb(206 191 255 / 38%); }
.profile-medallion__frame[data-frame-effect="obsidian-cut-reflect"] { --pf-paid-a: rgb(163 181 255 / 68%); --pf-paid-b: rgb(213 141 255 / 48%); }
.profile-medallion__frame[data-frame-effect="guilloche-line-chase"] { --pf-paid-a: rgb(255 219 147 / 78%); --pf-paid-b: rgb(255 245 214 / 56%); }
.profile-medallion__frame[data-frame-effect="platinum-facet-glints"] { --pf-paid-a: rgb(185 233 255 / 86%); --pf-paid-b: rgb(231 205 255 / 64%); }
.profile-medallion__frame[data-frame-effect="eclipse-edge-crossfade"] { --pf-paid-a: rgb(245 248 255 / 70%); --pf-paid-b: rgb(126 140 178 / 48%); }
.profile-medallion__frame[data-frame-effect="sketch-silver-stroke"] { --pf-paid-a: rgb(199 221 244 / 72%); --pf-paid-b: rgb(255 255 255 / 54%); }
.profile-medallion__frame[data-frame-effect="painted-grain-breathe"] { --pf-paid-a: rgb(255 186 120 / 45%); --pf-paid-b: rgb(255 226 180 / 30%); }
.profile-medallion__frame[data-frame-effect="berry-heart-pulse"] { --pf-paid-a: rgb(255 99 171 / 90%); --pf-paid-b: rgb(255 210 235 / 58%); }
.profile-medallion__frame[data-frame-effect="cat-yarn-wiggle"] { --pf-paid-a: rgb(255 207 127 / 80%); --pf-paid-b: rgb(255 244 203 / 52%); }
.profile-medallion__frame[data-frame-effect="penguin-ice-twinkle"] { --pf-paid-a: rgb(122 237 255 / 92%); --pf-paid-b: rgb(210 247 255 / 68%); }
.profile-medallion__frame[data-frame-effect="dragon-scale-ember"] { --pf-paid-a: rgb(255 103 66 / 78%); --pf-paid-b: rgb(255 192 71 / 58%); }
.profile-medallion__frame[data-frame-effect="copper-tooth-tick"] { --pf-paid-a: rgb(255 145 74 / 84%); --pf-paid-b: rgb(255 218 157 / 58%); }
.profile-medallion__frame[data-frame-effect="planet-star-bounce"] { --pf-paid-a: rgb(147 235 255 / 90%); --pf-paid-b: rgb(255 225 111 / 68%); }
.profile-medallion__frame[data-frame-effect="castle-cloud-drift"] { --pf-paid-a: rgb(224 238 255 / 88%); --pf-paid-b: rgb(255 204 245 / 60%); }
.profile-medallion__frame[data-frame-effect="nebula-core-trace"] { --pf-paid-a: rgb(126 126 255 / 88%); --pf-paid-b: rgb(245 116 255 / 64%); }
.profile-medallion__frame[data-frame-effect="galaxy-jewel-cascade"] { --pf-paid-a: rgb(129 220 255 / 92%); --pf-paid-b: rgb(227 139 255 / 68%); }

@keyframes profile-paid-spark { 0%, 24%, 100% { opacity: 0; transform: scale(.72); } 9% { opacity: .9; transform: scale(1); } 16% { opacity: .22; transform: scale(.88); } }
@keyframes profile-paid-pulse { 0%, 100% { opacity: .04; transform: scale(.98); } 38% { opacity: .54; transform: scale(1.015); } 62% { opacity: .14; transform: scale(1); } }
@keyframes profile-paid-rotor { 0% { opacity: .12; transform: rotate(0); } 32% { opacity: .62; } 70% { opacity: .22; } 100% { opacity: .12; transform: rotate(1turn); } }
@keyframes profile-paid-drift { 0%, 100% { opacity: .08; transform: translate(-1%, 2%); } 42% { opacity: .72; transform: translate(1.5%, -2%); } 73% { opacity: .24; transform: translate(2%, 0); } }
@keyframes profile-paid-sweep { 0%, 25% { opacity: 0; background-position: 125% 10%; } 44% { opacity: .62; } 72%, 100% { opacity: 0; background-position: -25% 90%; } }
@keyframes profile-paid-signal { 0%, 100% { opacity: .06; background-position: 100% 0; } 22% { opacity: .72; } 51% { opacity: .18; background-position: 0 100%; } 76% { opacity: .48; } }
@keyframes profile-paid-grain { 0%, 100% { opacity: .05; background-position: 0 100%; } 46% { opacity: .38; background-position: 100% 0; } 72% { opacity: .14; } }
@keyframes profile-paid-facet { 0%, 100% { opacity: .07; transform: rotate(-2deg); } 28% { opacity: .64; } 55% { opacity: .2; transform: rotate(3deg); } 78% { opacity: .5; } }

/* Name-adjacent avatars retain motion but reduce simultaneous light details. */
:is(.profile-medallion--header, .profile-medallion--author) .profile-medallion__frame[data-frame-paid-effect="true"] :is([data-frame-part="c"], [data-frame-part="d"]) { display: none; }
.profile-medallion[data-frame-in-view="true"] .profile-medallion__frame[data-frame-paid-effect="true"] .profile-medallion__fx-paint { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .profile-medallion__frame[data-frame-paid-effect="true"] .profile-medallion__fx-paint { animation: none !important; display: none !important; }
}

/* =========================================================
   PacPik design tokens

   방향: 게임 팬사이트도 관리 도구도 아닌, 매일 여는 소비자 플랫폼.
   과감함은 한 곳에만 쓴다 — 목록 전체를 관통하는 시간축과 마감 경과 헤어라인.
   나머지는 조용하게. 테두리보다 여백과 타이포로 영역을 나눈다.
   외부 UI 프레임워크와 외부 폰트는 쓰지 않는다.
   ========================================================= */
:root {
  color-scheme: light dark;

  /* 표면: 중립. 강조색은 하나. */
  --paper: #fcfcfd;
  --surface: #ffffff;
  --veil: #f1f3f7;
  --edge: #e4e7ee;
  --edge-strong: #cfd4de;
  --ink: #14161c;
  --mute: #565d6e;
  --faint: #666d7e;

  --accent: #0b6b5b;
  --accent-hover: #095548;
  --accent-wash: #e6f2ef;
  --on-accent: #ffffff;

  /* 마감 임박. 브랜드 강조색과 분리한다. 색은 보조이고 문구와 표식이 본체다. */
  --alert: #8a4b00;
  --alert-wash: #fbf0e0;
  --danger: #9c1f1f;
  --danger-wash: #fbeaea;

  --focus: #0b6b5b;

  /*
    전역 헤더는 반전된다. 위는 브랜드 영역, 아래는 콘텐츠 영역 —
    머리부터 발끝까지 흰 화면은 와이어프레임처럼 보인다.
    짙은 teal-green 하나이고 그라디언트도 발광도 없다.
  */
  --brandbar: #0c3b33;
  --brandbar-ink: #eaf4f1;
  --brandbar-mute: #9cbcb4;
  --brandbar-active: #6fe0c4;
  --brandbar-hover: rgb(255 255 255 / 0.10);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px;

  --sans: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.1875rem;
  --t-xl: 1.5rem;
  --t-hero: clamp(1.625rem, 3vw, 2.5rem);

  /* 모서리는 거의 각지다. 알약 모양은 검색창 하나에만 쓴다 — docs/VISUAL_LANGUAGE.md */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-pill: 999px;

  --tap: 44px;
  --shell: 1320px;
  --tabbar: 58px;
}

/* ========================================================================
   Advertising rates v2 — current PacPik shell, compact table + real screens
   ======================================================================== */
.ads-rate-v2.ads-rate-experience {
  margin: 0; padding: 0 0 64px; background: transparent; color: var(--ui-ink);
  box-shadow: none; clip-path: none; color-scheme: light;
}
.ads-rate-head {
  min-height: 228px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 36px; padding: clamp(30px, 4vw, 52px);
  border: 1px solid var(--ui-line-strong); border-radius: 14px; background: var(--ui-paper);
}
.ads-rate-head > div { max-width: 840px; }
.ads-rate-head > div > span, .rate-panel-head > span, .rate-info-panel > header > span {
  color: var(--ui-signal); font-size: .66rem; font-weight: 900; letter-spacing: .12em;
}
.ads-rate-head h1 { margin: 8px 0 10px; color: var(--ui-ink); font-size: clamp(2.35rem, 4.4vw, 4.6rem); line-height: 1; letter-spacing: -.06em; }
.ads-rate-head p { max-width: 700px; margin: 0; color: var(--ui-dim); font-size: .86rem; line-height: 1.75; word-break: keep-all; }
.ads-rate-head .solid-button { min-width: 150px; min-height: 48px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; border-color: #1b1c23; border-radius: 7px; background: #1b1c23; color: #fff; }
.ads-rate-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0; border: 1px solid var(--ui-line-strong); border-radius: 10px; overflow: hidden; background: var(--ui-paper); }
.ads-rate-status > div { min-height: 94px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 15px 20px; }
.ads-rate-status > div + div { border-left: 1px solid var(--ui-line); }
.ads-rate-status span { color: var(--ui-signal); font-size: .61rem; font-weight: 900; letter-spacing: .08em; }
.ads-rate-status strong { font-size: 1rem; letter-spacing: -.02em; }
.ads-rate-status small { color: var(--ui-dim); font-size: .63rem; }
.ads-rate-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; align-items: start; }
.ads-rate-panels { min-width: 0; }
.ads-rate-panels > section { border: 1px solid var(--ui-line-strong); border-radius: 10px; overflow: hidden; background: var(--ui-paper); }
.rate-panel-head, .rate-info-panel > header { padding: 28px 30px 24px; border-bottom: 1px solid var(--ui-line); }
.rate-panel-head h2, .rate-info-panel > header h2 { margin: 5px 0 7px; font-size: clamp(1.65rem, 2.5vw, 2.55rem); line-height: 1.12; letter-spacing: -.045em; }
.rate-panel-head p, .rate-info-panel > header p { margin: 0; color: var(--ui-dim); font-size: .76rem; line-height: 1.65; word-break: keep-all; }
.rate-placement-table__head { min-height: 44px; display: grid; grid-template-columns: minmax(260px, 1.05fr) minmax(220px, .8fr) minmax(245px, .95fr); align-items: center; gap: 20px; padding: 0 26px; border-bottom: 1px solid var(--ui-line-strong); background: var(--ui-paper-2); color: var(--ui-dim); font-size: .61rem; font-weight: 850; letter-spacing: .06em; }
.rate-placement-row { position: relative; display: grid; grid-template-columns: minmax(260px, 1.05fr) minmax(220px, .8fr) minmax(245px, .95fr); gap: 20px; padding: 22px 26px; border-bottom: 1px solid var(--ui-line); }
.rate-placement-row:last-child { border-bottom: 0; }
.rate-placement-row__where > span, .rate-placement-row__size > span { color: var(--ui-signal); font-size: .59rem; font-weight: 850; }
.rate-placement-row__where h3 { margin: 4px 0 5px; font-size: 1.02rem; letter-spacing: -.025em; }
.rate-placement-row__where p { max-width: 46ch; margin: 0; color: var(--ui-dim); font-size: .68rem; line-height: 1.55; word-break: keep-all; }
.rate-placement-row__where button { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 11px; border: 1px solid var(--ui-line-strong); border-radius: 6px; background: var(--ui-paper); color: var(--ui-ink); cursor: pointer; font-size: .65rem; font-weight: 850; }
.rate-placement-row__where button:hover { border-color: #1b1c23; background: #1b1c23; color: #fff; }
.rate-placement-row__size { padding-top: 2px; }
.rate-placement-row__size strong { display: block; margin-top: 7px; font-size: .72rem; line-height: 1.6; }
.rate-placement-row__size small { display: block; margin-top: 7px; color: var(--ui-dim); font-size: .62rem; line-height: 1.5; }
.rate-placement-row__prices { display: grid; align-content: start; gap: 0; margin: 0; padding: 0; list-style: none; }
.rate-placement-row__prices li { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--ui-line); font-size: .67rem; }
.rate-placement-row__prices li:last-child { border-bottom: 0; }
.rate-placement-row__prices strong { white-space: nowrap; font-size: .73rem; }
.rate-placement-row__prices small { color: var(--ui-dim); font-size: .58rem; font-weight: 600; }
.ads-rate-menu { position: sticky; top: calc(var(--ui-header) + 14px); overflow: hidden; border: 1px solid var(--ui-line-strong); border-radius: 10px; background: var(--ui-paper); }
.ads-rate-menu > span { min-height: 43px; display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .59rem; font-weight: 900; letter-spacing: .08em; }
.ads-rate-menu nav { display: grid; }
.ads-rate-menu button { min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 15px; border: 0; border-bottom: 1px solid var(--ui-line); background: transparent; color: var(--ui-dim); cursor: pointer; text-align: left; font-size: .7rem; font-weight: 800; }
.ads-rate-menu button:hover { color: var(--ui-ink); }
.ads-rate-menu button[aria-pressed="true"] { background: #1b1c23; color: #fff; }
.ads-rate-menu button small { color: inherit; opacity: .66; }
.ads-rate-menu p { margin: 0; padding: 15px; color: var(--ui-dim); font-size: .59rem; line-height: 1.55; word-break: keep-all; }
.ads-rate-mobile-menu { display: none; }
.rate-fine-print { margin-top: 14px; border: 1px solid var(--ui-line-strong); border-radius: 9px; background: var(--ui-paper); }
.rate-fine-print summary { min-height: 48px; display: flex; align-items: center; padding: 0 17px; cursor: pointer; font-size: .69rem; font-weight: 850; }
.rate-fine-print > div { padding: 0 17px 16px; border-top: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .68rem; line-height: 1.65; }
.rate-location-dialog { width: min(1180px, calc(100vw - 36px)); max-height: calc(100vh - 36px); margin: auto; padding: 0; border: 1px solid var(--ui-line-strong); border-radius: 12px; background: var(--ui-paper); color: var(--ui-ink); box-shadow: 0 30px 100px rgb(15 17 25 / 28%); }
.rate-location-dialog::backdrop { background: rgb(18 20 29 / 68%); backdrop-filter: blur(3px); }
.rate-location-dialog > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--ui-line); }
.rate-location-dialog > header span { color: var(--ui-signal); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.rate-location-dialog > header h2 { margin: 3px 0; font-size: 1.35rem; }
.rate-location-dialog > header p { margin: 0; color: var(--ui-dim); font-size: .69rem; }
.rate-location-dialog > header button { width: 38px; height: 38px; border: 1px solid var(--ui-line-strong); border-radius: 50%; background: transparent; color: var(--ui-ink); cursor: pointer; font-size: 1.3rem; }
.rate-location-dialog__viewer { padding: 18px 22px 8px; }
.rate-location-dialog figure { margin: 0; }
.rate-shot-frame { position: relative; overflow: hidden; border: 1px solid var(--ui-line-strong); border-radius: 7px; background: var(--ui-canvas); }
.rate-shot-frame--desktop { aspect-ratio: 1909 / 844; }
.rate-shot-frame--desktop img { width: 100%; height: 100%; object-fit: cover; }
.rate-shot-frame--mobile { width: min(390px, 100%); aspect-ratio: 390 / 844; margin-inline: auto; }
.rate-shot-frame--mobile img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.rate-shot-marker { position: absolute; left: var(--marker-x); top: var(--marker-y); width: var(--marker-w); height: var(--marker-h); border: 3px solid #5965d8; background: rgb(89 101 216 / 15%); box-shadow: 0 0 0 2px rgb(255 255 255 / 84%); pointer-events: none; }
.rate-shot-marker b { position: absolute; left: -3px; top: -25px; min-height: 23px; display: flex; align-items: center; padding: 0 8px; background: #5965d8; color: #fff; font-size: .58rem; letter-spacing: .03em; }
.rate-location-dialog figcaption { display: flex; justify-content: space-between; gap: 14px; padding: 8px 2px 0; color: var(--ui-dim); font-size: .61rem; }
.rate-location-dialog figcaption b { color: var(--ui-ink); }
.rate-shot-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 22px 14px; }
.rate-shot-tabs button { min-height: 34px; padding: 0 10px; border: 1px solid var(--ui-line-strong); border-radius: 5px; background: var(--ui-paper); color: var(--ui-dim); cursor: pointer; font-size: .61rem; }
.rate-shot-tabs button[aria-pressed="true"] { border-color: #1b1c23; background: #1b1c23; color: #fff; }
.rate-location-dialog > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 22px; border: 1px solid var(--ui-line); }
.rate-location-dialog > dl > div { padding: 12px 14px; }
.rate-location-dialog > dl > div + div { border-left: 1px solid var(--ui-line); }
.rate-location-dialog dt { color: var(--ui-dim); font-size: .59rem; }
.rate-location-dialog dd { margin: 4px 0 0; font-size: .68rem; font-weight: 750; }
.rate-surface-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 14px 22px 22px; padding: 0; list-style: none; }
.rate-surface-list li { min-width: 0; display: flex; align-items: center; gap: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--ui-line); font-size: .6rem; }
.rate-surface-list b { flex: 0 0 auto; color: var(--ui-signal); font-size: .58rem; }
.rate-surface-list span { overflow: hidden; color: var(--ui-dim); text-overflow: ellipsis; white-space: nowrap; }
.rate-master-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 24px 30px; }
.rate-master-grid article { min-height: 205px; display: flex; flex-direction: column; padding: 19px; border: 1px solid var(--ui-line-strong); border-radius: 8px; }
.rate-master-grid article > span { color: var(--ui-signal); font-size: .62rem; font-weight: 900; }
.rate-master-grid h3 { margin: 12px 0 4px; font-size: 1.05rem; }
.rate-master-grid strong { font-size: .72rem; }
.rate-master-grid p { margin: auto 0 5px; color: var(--ui-dim); font-size: .67rem; }
.rate-master-grid small { color: var(--ui-dim); font-size: .6rem; line-height: 1.5; }
.rate-material-list { margin: 0; padding: 0 30px 26px; list-style: none; }
.rate-material-list li { min-height: 46px; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; border-top: 1px solid var(--ui-line); font-size: .68rem; }
.rate-material-list span { color: var(--ui-dim); }
.rate-tier-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 24px 30px 12px; }
.rate-tier-steps article { min-height: 112px; display: flex; flex-direction: column; gap: 5px; padding: 15px; border: 1px solid var(--ui-line-strong); border-radius: 8px; }
.rate-tier-steps article[aria-current="step"] { border-color: #1b1c23; background: #1b1c23; color: #fff; }
.rate-tier-steps span { color: var(--ui-signal); font-size: .59rem; font-weight: 900; }
.rate-tier-steps article[aria-current="step"] span { color: #aeb8ff; }
.rate-tier-steps strong { margin-top: auto; font-size: .79rem; }
.rate-tier-steps small { color: var(--ui-dim); font-size: .57rem; }
.rate-tier-steps article[aria-current="step"] small { color: #d8dbe7; }
.rate-tier-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 30px 20px; }
.rate-tier-rules p { min-height: 73px; display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 13px 15px; border: 1px solid var(--ui-line); border-radius: 7px; }
.rate-tier-rules b { color: var(--ui-signal); font-size: .61rem; }
.rate-tier-rules span { color: var(--ui-dim); font-size: .63rem; line-height: 1.5; word-break: keep-all; }
.rate-tier-table-wrap { margin: 0 30px; overflow-x: auto; border: 1px solid var(--ui-line-strong); border-radius: 8px; }
.rate-tier-table { width: 100%; min-width: 790px; border-collapse: collapse; font-size: .63rem; }
.rate-tier-table th, .rate-tier-table td { min-height: 42px; padding: 11px 12px; border-bottom: 1px solid var(--ui-line); text-align: right; white-space: nowrap; }
.rate-tier-table thead th { background: var(--ui-paper-2); color: var(--ui-dim); font-size: .58rem; }
.rate-tier-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 160px; background: var(--ui-paper); text-align: left; }
.rate-tier-table thead th:first-child { z-index: 2; background: var(--ui-paper-2); }
.rate-tier-table tbody tr:last-child th, .rate-tier-table tbody tr:last-child td { border-bottom: 0; }
.rate-tier-table th strong, .rate-tier-table th small { display: block; }
.rate-tier-table th small { margin-top: 3px; color: var(--ui-dim); font-size: .55rem; font-weight: 600; }
.rate-tier-note { margin: 0; padding: 14px 30px 25px; color: var(--ui-dim); font-size: .6rem; line-height: 1.55; }
.rate-booking-panel ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 24px 30px; list-style: none; }
.rate-booking-panel li { min-height: 135px; display: flex; flex-direction: column; gap: 5px; padding: 17px; border: 1px solid var(--ui-line); }
.rate-booking-panel li + li { border-left: 0; }
.rate-booking-panel li b { color: var(--ui-signal); font-size: .64rem; }
.rate-booking-panel li strong { font-size: .76rem; }
.rate-booking-panel li span { margin-top: auto; color: var(--ui-dim); font-size: .64rem; }
.rate-contact-row { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 30px 28px; }
.rate-contact-row a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--ui-line-strong); border-radius: 6px; color: var(--ui-ink); font-size: .66rem; text-decoration: none; }
.rate-contact-row .solid-button { border-color: #1b1c23; background: #1b1c23; color: #fff; }

@media (max-width: 1040px) {
  .ads-rate-workspace { grid-template-columns: minmax(0, 1fr) 180px; }
  .rate-placement-table__head, .rate-placement-row { grid-template-columns: minmax(230px, 1fr) minmax(210px, .8fr); }
  .rate-placement-table__head span:last-child { display: none; }
  .rate-placement-row__prices { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding-top: 10px; border-top: 1px solid var(--ui-line); }
}

@media (max-width: 760px) {
  .ads-rate-v2.ads-rate-experience { margin-inline: -12px; padding-bottom: 44px; }
  .ads-rate-head { min-height: 250px; display: flex; flex-direction: column; align-items: stretch; padding: 25px 18px 20px; border-inline: 0; border-radius: 0; }
  .ads-rate-head h1 { font-size: clamp(2.35rem, 12vw, 3.55rem); }
  .ads-rate-head .solid-button { width: 100%; margin-top: auto; }
  .ads-rate-status { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 12px; }
  .ads-rate-status > div { min-height: 82px; padding: 12px 13px; }
  .ads-rate-status > div:nth-child(3) { border-top: 1px solid var(--ui-line); border-left: 0; }
  .ads-rate-status > div:nth-child(4) { border-top: 1px solid var(--ui-line); }
  .ads-rate-workspace { display: block; margin: 0 12px; }
  .ads-rate-menu { display: none; }
  .ads-rate-mobile-menu { position: sticky; z-index: 8; top: calc(var(--ui-header) + 8px); width: fit-content; display: block; margin: 0 0 8px auto; }
  .ads-rate-mobile-menu summary { min-height: 42px; display: flex; align-items: center; padding: 0 13px; border: 1px solid #1b1c23; border-radius: 7px; background: #1b1c23; color: #fff; cursor: pointer; font-size: .68rem; font-weight: 850; list-style: none; box-shadow: var(--ui-card-shadow); }
  .ads-rate-mobile-menu summary::-webkit-details-marker { display: none; }
  .ads-rate-mobile-menu nav { position: absolute; right: 0; top: calc(100% + 6px); width: 220px; display: grid; padding: 6px; border: 1px solid var(--ui-line-strong); border-radius: 8px; background: var(--ui-paper); box-shadow: var(--ui-shadow); }
  .ads-rate-mobile-menu button { min-height: 43px; padding: 0 11px; border: 0; border-bottom: 1px solid var(--ui-line); background: transparent; color: var(--ui-ink); text-align: left; font-size: .68rem; font-weight: 800; }
  .ads-rate-mobile-menu button[aria-pressed="true"] { background: var(--ui-paper-2); color: var(--ui-signal); }
  .rate-panel-head, .rate-info-panel > header { padding: 23px 17px 19px; }
  .rate-placement-table__head { display: none; }
  .rate-placement-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 17px; padding: 20px 16px; }
  .rate-placement-row__size { padding: 13px; border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-paper-2); }
  .rate-placement-row__prices { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; border-top: 0; }
  .rate-location-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .rate-location-dialog > header { padding: 15px; }
  .rate-location-dialog__viewer { padding: 12px 12px 6px; }
  .rate-shot-tabs { padding: 7px 12px 12px; overflow-x: auto; flex-wrap: nowrap; }
  .rate-shot-tabs button { flex: 0 0 auto; }
  .rate-location-dialog > dl { grid-template-columns: minmax(0, 1fr); margin: 0 12px; }
  .rate-location-dialog > dl > div + div { border-top: 1px solid var(--ui-line); border-left: 0; }
  .rate-surface-list { grid-template-columns: minmax(0, 1fr); margin: 12px; }
  .rate-location-dialog figcaption { display: grid; }
  .rate-master-grid, .rate-booking-panel ol { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .rate-master-grid article { min-height: 175px; }
  .rate-material-list { padding: 0 16px 20px; }
  .rate-material-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 0; }
  .rate-tier-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 16px 9px; }
  .rate-tier-steps article { min-height: 98px; }
  .rate-tier-rules { grid-template-columns: minmax(0, 1fr); padding: 0 16px 16px; }
  .rate-tier-rules p { min-height: 0; }
  .rate-tier-table-wrap { margin: 0 16px; }
  .rate-tier-note { padding: 12px 16px 20px; }
  .rate-booking-panel li + li { border-top: 0; border-left: 1px solid var(--ui-line); }
  .rate-contact-row { display: grid; padding: 0 16px 22px; }
  .rate-contact-row a { justify-content: center; }
}

/* ==========================================================================
   PacPik signal portal — 2026 Codex overhaul
   The legacy static HTML remains readable without JavaScript; the client UI
   below owns the interactive experience and uses its own ui-* namespace.
   ========================================================================== */

:root {
  --ui-canvas: #eef1f4;
  --ui-paper: #ffffff;
  --ui-paper-2: #f5f7f9;
  --ui-ink: #111820;
  --ui-dim: #62707d;
  --ui-line: #d6dde3;
  --ui-line-strong: #aeb9c3;
  --ui-signal: #006f86;
  --ui-signal-soft: #e2f1f4;
  --ui-rank: #b64c2b;
  --ui-danger: #a9362b;
  --ui-shadow: 0 16px 42px rgb(27 42 54 / 9%);
  --ui-header-paper: #ffffff;
  --ui-footer-paper: #ffffff;
  --ui-header: 112px;
  --ui-radius: 3px;
  --ui-header: 66px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-canvas: #08111a;
  --ui-paper: #101b26;
  --ui-paper-2: #172635;
  --ui-ink: #f2f6f9;
  --ui-dim: #95a8b8;
  --ui-line: #263a4b;
  --ui-line-strong: #40576a;
  --ui-signal: #31bad4;
  --ui-signal-soft: #123543;
  --ui-rank: #ffae63;
  --ui-danger: #ff918b;
  --ui-shadow: 0 20px 60px rgb(0 5 10 / 34%);
  --ui-header-paper: #141c19;
  --ui-footer-paper: #141c19;
}

html:has(.ui-app) {
  background: var(--ui-canvas);
  color: var(--ui-ink);
  scroll-padding-top: calc(var(--ui-header) + 20px);
}

body:has(.ui-app) {
  margin: 0;
  background: var(--ui-canvas);
  color: var(--ui-ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Public UI labels use the same readable sans stack. Monospace remains only for code and recovery tokens. */
.global-brand, .source-mark, .channel-link span, .hub-index,
.read-only-banner, .id-list span, .policy-row em, .ops-row dt, .ops-row dd,
.global-footer p, .about-scene__copy > span { font-family: var(--sans); }

body.drawer-open { overflow: hidden; }

.ui-app *, .ui-app *::before, .ui-app *::after { box-sizing: border-box; }
.ui-app a { color: inherit; text-decoration: none; }
.ui-app button, .ui-app input, .ui-app select, .ui-app textarea { color: inherit; font: inherit; }
.ui-app button, .ui-app a { -webkit-tap-highlight-color: transparent; }
.ui-app button { border: 0; }

.skip-link {
  position: fixed;
  display: flex;
  min-height: 44px;
  align-items: center;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  background: var(--ui-ink);
  color: var(--ui-paper);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.shell-width {
  width: min(var(--shell), calc(100% - 48px));
  margin-inline: auto;
}

/*
 * 머리말은 불투명하다.
 *
 * `backdrop-filter` 를 붙이면 뒤에 있는 것을 흐리게 비출 수 있지만, **`position: sticky`
 * 와 함께 쓰면** Chrome 이 스크롤 중에 그 흐림 레이어를 잘못 무효화해서 본문 위에
 * 네모난 빈 자국을 남긴다. Pack 목록을 오르내릴 때 카드 몇 장이 흰 사각형에 덮여
 * 사라지는 것이 그것이었다.
 *
 * 흐림은 있으면 좋은 것이고 목록은 읽혀야 하는 것이다. 흐림을 버린다.
 */
.global-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-header-paper);
}

.header-row {
  min-height: var(--ui-header);
  display: grid;
  grid-template-columns: auto minmax(420px, auto) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 24px;
}

.global-brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.05em;
}

.brandmark {
  width: 29px;
  height: 29px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px 2px 7px 2px;
  background: transparent;
  color: var(--ui-ink);
}
.brandmark svg { width: 22px; height: 22px; }
.brandmark__plate { fill: currentColor; }

.desktop-nav { display: flex; align-items: stretch; height: var(--ui-header); }
.nav-link {
  position: relative;
  min-width: 58px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-dim);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  background: var(--ui-signal);
  transform: scaleX(0);
  transform-origin: left;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ui-ink); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.header-search, .mobile-search, .browse-tools form {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-canvas);
  padding: 0 13px;
}
.header-search:focus-within, .mobile-search:focus-within, .browse-tools form:focus-within {
  border-color: var(--ui-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-signal) 18%, transparent);
}
.header-search input, .mobile-search input, .browse-tools form input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
}
.search-submit { width: 44px; min-width: 44px; height: 44px; display: grid; place-items: center; margin-left: -13px; border-radius: var(--ui-radius); background: transparent; cursor: pointer; }
.search-submit:hover { color: var(--ui-signal); background: var(--ui-paper-2); }
.icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.header-actions { display: flex; gap: 2px; }
.profile-menu { position: relative; display: flex; align-items: center; }
.identity-button {
  min-width: 44px;
  max-width: 164px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: var(--ui-radius);
  background: transparent;
  color: var(--ui-ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}
.identity-button > span:not(.profile-medallion) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-button > .icon:last-child { width: 14px; transition: transform .16s ease; }
.identity-button:hover { background: var(--ui-paper-2); color: var(--ui-signal); }
.identity-button--account { max-width: 186px; padding: 0 8px 0 3px; }
.profile-menu__flyout {
  position: absolute;
  z-index: 80;
  top: calc(100% + 7px);
  right: 0;
  width: 286px;
  padding: 9px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: var(--ui-paper);
  box-shadow: 0 20px 54px rgb(23 34 44 / 18%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.profile-menu__flyout::before { content: ""; position: absolute; right: 0; bottom: 100%; width: 100%; height: 9px; }
.profile-menu:hover .profile-menu__flyout { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.profile-menu:hover .identity-button > .icon:last-child { transform: rotate(180deg); }
.profile-menu__home { position: relative; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; min-height: 66px !important; padding: 10px !important; border-radius: 12px !important; color: var(--ui-ink) !important; }
.profile-menu__home::after { content: ""; position: absolute; right: 10px; bottom: 0; left: 10px; height: 1px; background: var(--ui-line); }
.profile-menu__home > span:not(.profile-medallion) { min-width: 0; }
.profile-menu__home > .icon { width: 15px !important; color: var(--ui-dim) !important; transition: transform .15s ease, color .15s ease; }
.profile-menu__home:hover > .icon, .profile-menu__home:focus-visible > .icon { color: var(--ui-signal) !important; transform: translateX(2px); }
.profile-menu__flyout strong, .profile-menu__flyout small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__flyout strong { font-size: 13px; }
.profile-menu__flyout small { margin-top: 2px; color: var(--ui-dim); font-size: 10px; font-weight: 600; }
.profile-menu__flyout nav { display: grid; gap: 2px; padding: 5px 0; border-top: 1px solid var(--ui-line); }
.profile-menu__flyout a, .profile-menu__flyout button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 9px; background: transparent; color: var(--ui-dim); cursor: pointer; font-size: 12px; font-weight: 700; text-align: left; }
.profile-menu__flyout a:hover, .profile-menu__flyout a:focus-visible, .profile-menu__flyout button:hover, .profile-menu__flyout button:focus-visible { background: var(--ui-paper-2); color: var(--ui-ink); outline: 0; }
.profile-menu__flyout a .icon, .profile-menu__flyout button .icon { width: 17px; color: var(--ui-signal); }
.profile-menu__secondary button { color: var(--ui-danger); }
.profile-menu__secondary button .icon { color: currentColor; transform: rotate(180deg); }
.profile-menu__showcase { display: flex; align-items: center; gap: 3px; }
.profile-menu__showcase > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 9px; background: var(--ui-paper-2); color: var(--ui-signal); }
.profile-menu__showcase > span[data-tone="violet"] { color: var(--ui-pick); }
.profile-menu__showcase > span[data-tone="rose"] { color: #b83f63; }
.profile-menu__showcase > span[data-tone="gold"] { color: #9a6717; }
.profile-menu__showcase .collection-mark { width: 14px; height: 14px; }
.profile-menu__showcase > span:has(.collection-mark--art) { background: transparent; border-radius: 0; }
.profile-menu__showcase .collection-mark--art { width: 24px; height: 24px; }
.icon-button {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--ui-radius);
  background: transparent;
  cursor: pointer;
}
.icon-button:hover { background: var(--ui-paper-2); }
.menu-button, .mobile-search { display: none; }

.global-drawer {
  position: fixed;
  z-index: 100;
  inset: 0 auto 0 0;
  width: min(340px, 90vw);
  padding: 18px;
  background: var(--ui-paper);
  border-right: 1px solid var(--ui-line);
  box-shadow: var(--ui-shadow);
  overflow-y: auto;
}
.global-drawer header { height: 52px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ui-line); }
.global-drawer header > span { display: flex; align-items: center; gap: 10px; }
.global-drawer nav { padding: 14px 0; }
.drawer-link, .locale-button { width: 100%; min-height: 48px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--ui-radius); background: transparent; color: var(--ui-dim); font-weight: 700; }
.drawer-link:hover, .drawer-link[aria-current="page"] { background: var(--ui-paper-2); color: var(--ui-ink); }
.drawer-personal { border-top: 1px solid var(--ui-line); }
.drawer-identity { height: auto; min-height: 58px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; border: 0; text-align: left; }
.drawer-identity small { color: var(--ui-dim); font-size: 10px; font-weight: 500; }
.drawer-account-links { display: grid; }
.drawer-account-links > .drawer-link:not(.drawer-identity) { min-height: 44px; padding-left: 18px; font-size: 12px; }
.drawer-scrim { position: fixed; z-index: 90; inset: 0; background: rgb(8 16 13 / 48%); }

.inline-identity {
  display: grid; grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.25fr); gap: 24px;
  margin: 14px 0; padding: 20px; border: 1px solid var(--ui-line-strong); border-left: 4px solid var(--ui-signal);
  background: color-mix(in srgb, var(--ui-signal-soft) 40%, var(--ui-paper)); box-shadow: var(--ui-shadow);
}
.inline-identity__copy { display: grid; align-content: start; gap: 7px; }
.inline-identity__copy strong { font-size: 16px; line-height: 1.45; }
.inline-identity__copy p { margin: 0; color: var(--ui-dim); font-size: 13px; line-height: 1.65; }
.inline-identity__copy a { width: fit-content; color: var(--ui-signal); font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.inline-identity__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.inline-identity__form label { display: grid; align-content: start; gap: 6px; color: var(--ui-dim); font-size: 12px; font-weight: 750; }
.inline-identity__form input { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-line-strong); background: var(--ui-canvas); color: var(--ui-ink); }
.inline-identity__form input:focus { border-color: var(--ui-signal); outline: 3px solid color-mix(in srgb, var(--ui-signal) 18%, transparent); }
.inline-identity__form .password-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.inline-identity__form .password-line input { border-right: 0; }
.inline-identity__form .password-line .text-button { border: 1px solid var(--ui-line-strong); border-left: 0; }
.inline-identity__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.auth-error { grid-column: 1 / -1; min-height: 20px; margin: 0; color: var(--ui-danger); font-size: 12px; }

.content { min-height: calc(100vh - 220px); padding-block: 42px 80px; outline: 0; }
.route-loading { min-height: 50vh; display: grid; place-items: center; align-content: center; gap: 15px; color: var(--ui-dim); }
.loading-signal { width: 34px; height: 34px; border: 2px solid var(--ui-line); border-top-color: var(--ui-signal); border-radius: 50%; animation: signal-spin .9s linear infinite; }
@keyframes signal-spin { to { transform: rotate(360deg); } }

.page-head {
  min-height: 112px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--ui-line-strong);
}
.page-head h1, .pack-identity h1, .post-detail h1 {
  margin: 4px 0 8px;
  font-family: var(--sans);
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -.055em;
}
.page-head p { max-width: 680px; margin: 0; color: var(--ui-dim); }
.eyebrow { color: var(--ui-signal); font-family: var(--sans); font-size: 11px; font-weight: 800; line-height: 1.45; letter-spacing: .06em; }
.page-actions { display: flex; align-items: center; min-height: 44px; }

.solid-button, .quiet-button, .text-button, .danger-button, .filter-button, .my-tabs button, .inline-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: var(--ui-radius);
  cursor: pointer;
  font-weight: 700;
}
.solid-button { background: var(--ui-signal); color: var(--ui-paper); }
.quiet-button, .text-button, .filter-button, .my-tabs button, .inline-actions button { background: transparent; color: var(--ui-dim); }
.quiet-button { border: 1px solid var(--ui-line); }
.quiet-button[aria-pressed="true"] { border-color: var(--ui-signal); background: var(--ui-signal-soft); color: var(--ui-signal); }
.danger-button { background: transparent; border: 1px solid var(--ui-danger); color: var(--ui-danger); }
.text-button:hover, .filter-button:hover, .my-tabs button:hover, .inline-actions button:hover { color: var(--ui-signal); background: var(--ui-signal-soft); }

.signal-section { min-width: 0; padding-top: 24px; }
.section-head { min-height: 43px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ui-line); }
.section-head > div { display: flex; align-items: center; min-width: 0; gap: 8px; }
.section-head h2 { margin: 0; font-size: 15px; line-height: 1.4; letter-spacing: -.02em; }
.section-head > a { min-height: 44px; display: flex; align-items: center; gap: 4px; color: var(--ui-dim); font-size: 12px; }
.section-head > a .icon { width: 14px; }
.signal-dot { position: relative; width: 12px; height: 12px; border: 2px solid var(--ui-signal); border-radius: 50%; }
.signal-dot::before { content: ""; position: absolute; right: 8px; top: 4px; width: 22px; height: 1px; background: var(--ui-signal); transform: translateX(-100%); opacity: .35; }
.section-meta { color: var(--ui-dim); font-family: Consolas, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.compact-list > :last-child { border-bottom: 0; }
.pack-row { min-height: 72px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--ui-line); background: transparent; }
.pack-row__main { min-width: 0; min-height: 68px; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; }
.pack-row__main:has(.rank) { grid-template-columns: 38px minmax(0, 1fr) auto; }
.pack-row__main > span:not(.rank) { min-width: 0; }
.pack-row strong, .post-row strong, .pick-row strong, .official-row strong, .hub-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.pack-row small, .post-row small, .pick-row small, .official-row small, .hub-row small { display: block; margin-top: 3px; overflow: hidden; color: var(--ui-dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pack-row em, .source-state em { padding: 3px 6px; border: 1px solid var(--ui-line); border-radius: 2px; color: var(--ui-dim); font-size: 10px; font-style: normal; white-space: nowrap; }
.pack-glyph, .hub-glyph { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ui-line-strong); border-radius: 2px; background: var(--ui-paper); color: var(--ui-signal); font-family: Consolas, monospace; font-weight: 800; }
.rank { width: 34px; color: var(--ui-rank); font-family: var(--sans); font-size: 18px; font-weight: 850; }
.rank::before { content: "#"; font-size: 9px; vertical-align: top; }

.post-row { min-height: 68px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--ui-line); }
.post-row > a { min-width: 0; padding: 10px 0; }
.post-pulse { width: 8px; height: 8px; margin-left: 12px; border-radius: 50%; background: var(--ui-signal); box-shadow: -11px 0 0 -3px var(--ui-signal-soft); }
.pik-score { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-rank); font-family: var(--sans); font-size: 12px; font-weight: 800; }
.pik-score .icon { width: 14px; }

.home-dock { margin-bottom: 18px; padding: 17px 18px; border: 1px solid var(--ui-line); background: var(--ui-paper); box-shadow: var(--ui-shadow); }
.home-discovery--boot .home-command-deck,
.home-discovery--boot .home-portal-grid,
.home-discovery--boot .home-discovery-grid { display: none; }
.home-dock > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.home-dock h1 { margin: 0; font-size: 14px; letter-spacing: -.02em; }
.home-dock > header a { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; color: var(--ui-dim); font-size: 11px; }
.home-dock > header .icon { width: 13px; }
.home-pack-pills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.home-dock__empty { min-height: 58px; margin: 0; display: flex; align-items: center; padding: 9px 12px; border-left: 2px solid var(--ui-line); color: var(--ui-dim); font-size: 11px; }
.home-pack-pill { min-width: 0; min-height: 58px; display: flex; flex-direction: column; justify-content: center; padding: 9px 12px; border-left: 2px solid var(--ui-line-strong); background: var(--ui-paper-2); }
.home-pack-pill:hover { border-left-color: var(--ui-signal); }
.home-pack-pill strong, .home-pack-pill small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-pack-pill strong { font-size: 12px; }
.home-pack-pill small { margin-top: 2px; color: var(--ui-dim); font-size: 10px; }
.home-pack-pill--add { flex-direction: row; align-items: center; gap: 7px; border: 1px dashed var(--ui-line-strong); color: var(--ui-signal); }
.home-pack-pill--add .icon { width: 16px; }
.home-portal-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(340px, .72fr); gap: 16px; align-items: start; }
.home-main-feed, .home-source-rail { min-width: 0; padding: 0 22px 16px; border: 1px solid var(--ui-line); background: var(--ui-paper); }
.home-main-feed .signal-section + .signal-section { border-top: 1px solid var(--ui-line-strong); }
.home-source-rail { position: sticky; top: calc(var(--ui-header) + 16px); }
.home-discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.home-discovery-grid > .signal-section { padding: 20px 18px 8px; border: 1px solid var(--ui-line); background: var(--ui-paper); }
.top-pik-block .signal-dot { border-color: var(--ui-rank); }
.top-pik-block .signal-dot::before { background: var(--ui-rank); }
.top-pik-block .section-head { border-bottom: 2px solid var(--ui-rank); }
.community-pick-block .section-head { border-bottom: 2px solid var(--ui-signal); }

.pick-row { min-height: 68px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 11px; border-bottom: 1px solid var(--ui-line); }
.pick-row > a { min-width: 0; padding: 9px 0; }
.pick-row > .icon { width: 14px; color: var(--ui-dim); }
.pick-row.is-stale { opacity: .72; }
.source-mark { width: 32px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ui-signal); border-radius: 2px; color: var(--ui-signal); font-family: Consolas, monospace; font-size: 10px; font-weight: 800; }

.hub-row { min-height: 62px; border-bottom: 1px solid var(--ui-line); }
.hub-row a { min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 12px; }
.hub-row .icon { width: 15px; color: var(--ui-dim); }

.official-row { min-height: 68px; display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 12px; border-bottom: 1px solid var(--ui-line); }
.official-row a { min-width: 0; padding: 8px 0; }
.signal-time { color: var(--ui-signal); font-family: var(--sans); font-size: 11px; font-weight: 750; }

.ad-slot { min-height: 72px; margin-top: 32px; padding: 14px 18px; display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 18px; border: 1px dashed var(--ui-line-strong); background: color-mix(in srgb, var(--ui-paper) 62%, transparent); }
.ad-slot > span { color: var(--ui-dim); font-family: var(--sans); font-size: 10px; font-weight: 750; }
.ad-slot a { min-width: 0; }
.ad-slot strong, .ad-slot small { display: block; }
.ad-slot small { color: var(--ui-dim); font-size: 11px; }
.ad-slot--inline { margin: 0; border-width: 1px 0; background: var(--ui-paper-2); }
.ad-slot--post-meta { min-height: 64px; margin: 14px 0 0; }
.ad-slot--secondary { grid-template-columns: 1fr; gap: 5px; }

/* 구조화 광고: 이미지는 보조하고 광고주·제목·CTA는 실제 텍스트로 유지한다. */
.ad-mount:empty { display: none; }
.ad-slot--creative { min-width: 0; border-style: solid; border-color: var(--ui-line); background: var(--ui-paper); }
.ad-slot--creative > .ad-slot__label { align-self: start; display: grid; gap: 2px; }
.ad-slot__label b { color: var(--ui-ink); font-size: 10px; }
.ad-slot__label small { color: var(--ui-dim); font-size: 9px; }
.ad-slot--creative > a { min-width: 0; display: grid; grid-template-columns: minmax(132px, 190px) minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.ad-slot__media { width: 100%; aspect-ratio: 16 / 9; display: block; overflow: hidden; border-radius: 6px; background: var(--ui-paper-2); }
.ad-slot__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--ad-focus-x, 50%) var(--ad-focus-y, 50%); }
.ad-slot__copy { min-width: 0; }
.ad-slot__copy strong { overflow: hidden; color: var(--ui-ink); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.ad-slot__copy small { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-slot--creative > a > em { color: var(--ui-ink); font-size: .65rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.ad-slot--home-feature, .ad-slot--official, .ad-slot--launch, .ad-slot--coupon, .ad-slot--games, .ad-slot--game-detail, .ad-slot--live { margin-block: 24px; }

/* PC 전용 날개 배너. 본문 폭을 줄이지 않고, 좌우 여백이 확보될 때만 나타난다. */
.ad-site-rails { display: none; }
@media (min-width: 1700px) {
  .ad-site-rails { display: block; }
  .ad-slot--site-rail {
    position: fixed; top: 104px; z-index: 12;
    width: clamp(104px, calc((100vw - 1440px) / 2 - 24px), 180px);
    min-height: 420px; margin: 0; padding: 9px;
    display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px;
    box-shadow: 0 8px 28px rgb(14 18 24 / 8%);
  }
  .ad-slot--site-rail-left { left: 16px; }
  .ad-slot--site-rail-right { right: 16px; }
  .ad-slot--site-rail > .ad-slot__label { display: flex; justify-content: space-between; }
  .ad-slot--site-rail > a { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .ad-slot--site-rail .ad-slot__media { aspect-ratio: 4 / 5; }
  .ad-slot--site-rail .ad-slot__copy strong, .ad-slot--site-rail .ad-slot__copy small { white-space: normal; }
  .ad-slot--site-rail > a > em { align-self: flex-start; }
}

.game-play-ad-space .ad-slot { height: 100%; margin: 0; }
.ad-slot--gameplay-top > a { grid-template-columns: minmax(132px, 220px) minmax(0, 1fr) auto; }
.ad-slot--gameplay-rail { min-height: 420px; padding: 9px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.ad-slot--gameplay-rail > .ad-slot__label { display: flex; justify-content: space-between; }
.ad-slot--gameplay-rail > a { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.ad-slot--gameplay-rail .ad-slot__media { aspect-ratio: 4 / 5; }
.ad-slot--gameplay-rail .ad-slot__copy strong, .ad-slot--gameplay-rail .ad-slot__copy small { white-space: normal; }

@media (max-width: 760px) {
  .ad-slot--creative { min-height: 0; padding: 10px; grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .ad-slot--creative > .ad-slot__label { display: flex; justify-content: space-between; }
  .ad-slot--creative > a { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .ad-slot--creative > a > em { justify-self: start; }
  .ad-slot__copy strong, .ad-slot__copy small { white-space: normal; }
}

.state-panel { min-height: 152px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; border-bottom: 1px solid var(--ui-line); color: var(--ui-dim); text-align: center; }
.state-panel p { margin: 0; }
.empty-signal { width: 32px; height: 32px; border: 1px solid var(--ui-line-strong); border-radius: 50%; position: relative; }
.empty-signal::after { content: ""; position: absolute; top: 15px; left: -13px; width: 58px; height: 1px; background: var(--ui-line); }

.browse-tools { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--ui-line); }
.browse-tools form { width: min(430px, 100%); }
.filter-group { display: flex; flex-wrap: wrap; gap: 3px; padding: 16px 0; }
.filter-button { min-height: 38px; }
.filter-button[aria-pressed="true"], .my-tabs button[aria-pressed="true"] { background: var(--ui-signal-soft); color: var(--ui-signal); }

.pack-browser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.pack-browser .pack-row { min-width: 0; }
/* 밑판을 깔지 않는다. 자산 162개 중 124개는 배경이 투명해서, 판을 깔면
   있지도 않은 사각형이 생긴다. 배경이 그림 안에 구워진 나머지는 그 색이 그대로 보이고,
   그것은 CSS 가 아니라 파일을 다시 내보내 고칠 일이다. */
.entity-icon { width: 36px; height: 36px; display: inline-grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 10px; }
/* `cover` 로 채운다. 정사각 그림은 결과가 `contain` 과 같고, 혹시 정사각이 아닌 것이
   섞이면 칸을 채워 모서리에 빈 띠가 생기지 않는다 — 그 띠가 검은 테두리로 보였다. */
.entity-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.entity-icon[data-icon-type="auto-generic"] {
  position: relative;
  color: var(--ui-ink);
  transition: color .32s cubic-bezier(.22, 1, .36, 1);
}
.entity-icon[data-icon-type="auto-generic"]::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: 2;
  background: currentColor;
  -webkit-mask: url("/favicon.svg") center / contain no-repeat;
  mask: url("/favicon.svg") center / contain no-repeat;
  transition: background-color .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1);
}
.entity-icon[data-icon-type="auto-generic"] img { position: relative; z-index: 1; opacity: 0; }
.entity-icon[data-icon-type="auto-generic"].is-loaded::before { display: block; }
.entity-icon[data-icon-type="auto-generic"].is-loaded img { opacity: 0; }
html.theme-switching .entity-icon[data-icon-type="auto-generic"]::before { animation: pacpik-theme-switch .42s cubic-bezier(.22, 1, .36, 1); }
.entity-icon--compact { width: 32px; height: 32px; border-radius: 8px; }
.entity-icon--header { width: 64px; height: 64px; border-radius: 16px; }
/* 아이콘 칸은 `auto` 다. 고정 px 로 두면 아이콘이 그보다 커질 때 칸을 넘쳐
   gap 을 먹어 버리고, 글자가 그림에 그대로 붙는다 — 실제로 그렇게 붙어 있었다. */
.pack-row__main:has(.entity-icon) { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
.pack-row__main:has(.rank):has(.entity-icon) { grid-template-columns: 38px auto minmax(0, 1fr) auto; }
.hub-row a:has(.entity-icon) { grid-template-columns: auto minmax(0, 1fr) 20px; gap: 14px; }
.hub-row--ranked a:has(.entity-icon) { grid-template-columns: 34px auto minmax(0, 1fr) 20px; }
.pack-browser .entity-icon { width: 52px; height: 52px; border-radius: 13px; }
.pack-browser .pack-row__main:has(.entity-icon) { grid-template-columns: auto minmax(0, 1fr) auto; }
.home-pack-pill:has(.entity-icon) { flex-direction: row; align-items: center; gap: 8px; }
.home-pack-pill > span:not(.entity-icon) { min-width: 0; }
.external-live-card__meta { display: flex; align-items: center; gap: 8px; }
.hub-card > a:has(.entity-icon) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 16px; }
.hub-card > a:has(.entity-icon) > .entity-icon { width: 52px; height: 52px; border-radius: 13px; }

.pack-identity { min-height: 120px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 22px 24px; border: 1px solid var(--ui-line); background: var(--ui-paper); box-shadow: var(--ui-shadow); }
.pack-identity h1 { margin-bottom: 4px; }
.pack-identity p { margin: 0; color: var(--ui-dim); }
.pack-identity__actions { display: flex; align-items: center; gap: 8px; }
.pack-glyph--large { width: 62px; height: 62px; font-size: 22px; }
.pack-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-top: 16px; }
.pack-primary, .pack-channels, .pack-aside { min-width: 0; }
.pack-primary, .pack-channels, .pack-aside { padding: 0 18px 14px; border: 1px solid var(--ui-line); background: var(--ui-paper); }
.pack-channels, .pack-aside { position: sticky; top: calc(var(--ui-header) + 16px); }
.channel-link { min-height: 54px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 7px; padding: 8px 4px; border-bottom: 1px solid var(--ui-line); }
.channel-link span { color: var(--ui-signal); font-family: Consolas, monospace; }
.channel-link small { grid-column: 2; margin-top: -7px; overflow: hidden; color: var(--ui-dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.channel-link.is-current { color: var(--ui-signal); font-weight: 700; }
.fact-list { margin: 0; }
.fact-list > div { padding: 13px 0; border-bottom: 1px solid var(--ui-line); }
.fact-list dt { color: var(--ui-dim); font-size: 10px; }
.fact-list dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.fact-list a { display: inline-flex; align-items: center; gap: 5px; }
.fact-list .icon { width: 13px; }

.hub-filters { border-bottom: 1px solid var(--ui-line); }
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hub-card { min-height: 164px; border: 1px solid var(--ui-line); background: var(--ui-paper); box-shadow: var(--ui-shadow); }
.hub-card > a { height: 100%; min-height: 190px; position: relative; display: block; padding: 24px; }
.hub-card h2 { margin: 4px 0 8px; font-size: 21px; letter-spacing: -.04em; }
.hub-card p { margin: 0; color: var(--ui-dim); }
.hub-card small { position: absolute; bottom: 22px; left: 24px; color: var(--ui-signal); font-size: 10px; font-weight: 700; }
.hub-index { color: var(--ui-signal); font-family: Consolas, monospace; font-size: 10px; }
.hub-card > a > .icon { position: absolute; right: 20px; bottom: 20px; color: var(--ui-dim); }
.hub-member-dots { position: absolute; bottom: 22px; left: 24px; display: flex; }
.hub-member-dots span { width: 12px; height: 12px; margin-left: -2px; border: 2px solid var(--ui-paper); border-radius: 50%; background: var(--ui-signal); }
.hub-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 56px; }
.hub-portal-layout { grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 16px; }
.hub-portal-layout--two { grid-template-columns: 220px minmax(0, 1fr); }

.community-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; }
.status-line { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ui-line); }
.status-line .icon { width: 15px; }
.succession-card { padding: 14px 0; }
.succession-card p { margin: 0; }
.succession-card small { display: block; margin-top: 5px; color: var(--ui-dim); }
.succession-card .text-button { margin-top: 9px; border: 1px solid var(--ui-line); }
.manager-recruitment {
  padding: 16px;
  border-radius: 18px;
  background: var(--ui-signal-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-signal) 20%, transparent);
}

/* PacPik Business — Games 신청 스튜디오와 같은 계열의 공개 rate sheet. */
.ads-rate-experience { padding-bottom: 54px; background: #071b19; color: #eef7f4; box-shadow: 0 0 0 100vmax #071b19; clip-path: inset(0 -100vmax); }
.ads-rate-hero { position: relative; min-height: 280px; display: grid; grid-template-columns: minmax(460px, 1.12fr) minmax(280px, .72fr); align-items: center; gap: 40px; padding: 48px clamp(32px, 5vw, 74px); overflow: hidden; border-bottom: 1px solid #38635a; background: radial-gradient(circle at 78% 22%, rgb(80 207 176 / 16%) 0 2px, transparent 3px), linear-gradient(112deg, #092720 0 54%, #0c3930 54% 100%); }
.ads-rate-hero::after { content: "RATE"; position: absolute; right: clamp(30px, 5vw, 76px); bottom: -24px; color: rgb(133 226 203 / 9%); font: 900 clamp(5rem, 10vw, 10rem)/1 var(--sans); letter-spacing: -.09em; pointer-events: none; }
.ads-rate-hero > div { position: relative; z-index: 1; }
.ads-rate-hero .eyebrow { color: #8ae0cb; }
.ads-rate-hero h1 { max-width: 760px; margin: 8px 0 12px; color: #f3faf8; font-size: clamp(48px, 6vw, 82px); line-height: .96; letter-spacing: -.07em; }
.ads-rate-hero p { max-width: 680px; margin: 0; color: #c2d7d1; font-size: 16px; line-height: 1.7; }
.ads-rate-hero .rate-context-note { max-width: 740px; margin-top: 9px; color: #aac6be; font-size: 12px; line-height: 1.6; }
.ads-rate-hero .rate-publication-note { max-width: 720px; margin-top: 10px; color: #8facaa; font-size: 12px; line-height: 1.55; }
.ads-rate-hero__action { min-width: 210px; display: grid; gap: 12px; text-align: right; }
.ads-rate-hero__action .solid-button { border-radius: 5px; background: #eef7f4; color: #0a352d; }
.ads-rate-hero__action a:not(.solid-button) { color: #a8c2bb; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.ads-rate-layout { width: min(1280px, calc(100% - 48px)); margin-inline: auto; padding-top: 26px; display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 18px; align-items: start; }
.ads-rate-rail { position: sticky; top: calc(var(--ui-header) + 18px); padding: 20px; border: 1px solid #31564e; background: #0d2924; color: #ecf6f3; }
.ads-rate-rail > span { color: #76d4be; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.ads-rate-rail ol { display: grid; margin: 18px 0 0; padding: 0; list-style: none; }
.ads-rate-rail li { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #284b43; color: #c7d9d4; font-size: 11px; }
.ads-rate-rail li b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #173c34; color: #8ae0cb; font-size: 10px; }
.ads-rate-rail p { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #31564e; color: #9db9b2; font-size: 10px; line-height: 1.6; }
.ads-rate-sheet { overflow: hidden; border: 1px solid #bfd0ca; border-radius: 6px; background: #fff; color: #10231f; box-shadow: 0 28px 70px rgb(0 8 6 / 26%); color-scheme: light; }
.rate-current { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 44px; padding: 28px 36px; border-bottom: 3px solid #177a67; background: #e8f3ef; }
.rate-current > div > span, .rate-section > header > span { color: var(--ui-signal); font-family: var(--sans); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.rate-current h2 { margin: 6px 0 3px; font-size: 30px; letter-spacing: -.04em; }
.rate-current p { margin: 0; color: var(--ui-dim); font-size: 12px; }
.rate-current small { display: block; margin-top: 10px; color: #56736c; font-size: 10px; line-height: 1.5; }
.rate-current dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.rate-current dl > div { padding: 5px 18px; border-left: 1px solid var(--ui-line); }
.rate-current dt { color: var(--ui-dim); font-size: 10px; }
.rate-current dd { margin: 8px 0 0; font-family: var(--sans); font-size: 13px; font-weight: 750; }
.rate-section { padding: 36px; border-bottom: 1px solid #cbd8d4; background: #fff; }
.rate-section:nth-of-type(odd) { background: #f3f7f5; }
.rate-section > header { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; max-width: 860px; margin-bottom: 28px; }
.rate-section > header > span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #a9c9bf; border-radius: 50%; background: #e7f3ef; color: #177a67; }
.rate-section > header h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.04em; }
.rate-section > header p { margin: 0; color: var(--ui-dim); line-height: 1.75; }
.rate-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 22px; border: 1px solid #c3d4cf; background: #eaf3f0; }
.rate-terms p { margin: 0; padding: 14px 16px; color: #49645d; font-size: 11px; line-height: 1.55; }
.rate-terms p + p { border-left: 1px solid #c3d4cf; }
.rate-terms strong { display: block; margin-bottom: 3px; color: #0f4f42; font-size: 12px; }
.rate-table-wrap { overflow-x: auto; border-top: 1px solid var(--ui-line-strong); }
.rate-table { width: 100%; border-collapse: collapse; text-align: left; }
.rate-table th { height: 42px; border-bottom: 1px solid var(--ui-line-strong); color: var(--ui-dim); font-size: 10px; letter-spacing: .08em; }
.rate-table td { min-height: 62px; padding: 15px 12px 15px 0; border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
.rate-table td:first-child { width: 34%; }
.rate-table td:nth-child(2) { width: 12%; color: var(--ui-dim); }
.rate-table td:nth-child(3) { width: 18%; font-family: var(--sans); }
.rate-table td small, .rate-table td strong { display: block; }
.rate-table td small { margin-bottom: 3px; color: var(--ui-dim); font-size: 10px; }
.rate-note { display: inline-block; margin-left: 8px; color: var(--ui-signal); font-size: 10px; font-weight: 750; }
.rate-placement-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 24px; border-block: 1px solid #c7d5d1; }
.rate-placement-grid p { margin: 0; padding: 16px 14px; color: #526a64; font-size: 10px; line-height: 1.55; }
.rate-placement-grid p + p { border-left: 1px solid #d2ddd9; }
.rate-placement-grid strong { display: block; margin-bottom: 5px; color: #153f36; font-size: 11px; }
.rate-independence { margin-top: 22px; padding: 18px 20px; border-left: 3px solid #177a67; background: #e4f1ed; color: #294a42; }
.rate-independence > strong { color: #0d5d4e; font-size: 11px; letter-spacing: .08em; }
.rate-independence p { margin: 7px 0 0; font-size: 11px; line-height: 1.7; }
.tier-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--ui-line-strong); border-bottom: 1px solid var(--ui-line-strong); list-style: none; }
.tier-ladder li { min-height: 92px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 14px; border-right: 1px solid var(--ui-line); }
.tier-ladder li:last-child { border-right: 0; }
.tier-ladder li[aria-current="true"] { box-shadow: inset 0 3px 0 var(--ui-signal); background: color-mix(in srgb, var(--ui-signal) 6%, transparent); }
.tier-ladder strong { font-family: var(--sans); font-size: 13px; }
.tier-ladder span { color: var(--ui-dim); font-size: 10px; }
.rate-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ui-line); }
.rate-facts p { margin: 0; padding: 18px 18px 18px 0; color: var(--ui-dim); line-height: 1.6; }
.rate-facts p + p { padding-left: 18px; border-left: 1px solid var(--ui-line); }
.rate-facts strong { display: block; margin-bottom: 5px; color: var(--ui-ink); font-size: 11px; }
.rate-definition > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; border-top: 1px solid var(--ui-line); list-style: none; }
.rate-definition li { padding: 17px 0; border-bottom: 1px solid var(--ui-line); line-height: 1.65; }
.rate-buy { border-bottom: 0; background: #0b3029 !important; color: #eef7f4; }
.rate-buy > header > span { border-color: #4f796f; background: #173c34; color: #8ae0cb; }
.rate-buy > header p, .rate-buy p { color: #aac2bb; }
.rate-buy > div { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr) auto; align-items: start; gap: 34px; padding-top: 22px; border-top: 1px solid #4f796f; }
.rate-buy ol { margin: 0; padding-left: 22px; line-height: 2; }
.rate-buy p { margin: 0; line-height: 1.75; }
.rate-buy .solid-button { border-radius: 5px; background: #eef7f4; color: #0a352d; }
.rate-cta-links { display: grid; gap: 8px; min-width: 220px; }
.rate-cta-links a:not(.solid-button) { min-height: 30px; display: flex; align-items: center; border-bottom: 1px solid #3e625a; color: #b9d0ca; font-size: 10px; }
.rate-cta-links > strong { color: #76d4be; font-size: 11px; }

@media (max-width: 1040px) {
  .ads-rate-layout { grid-template-columns: 1fr; }
  .ads-rate-rail { position: static; display: grid; grid-template-columns: 140px minmax(0, 1fr); }
  .ads-rate-rail ol { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ads-rate-rail li { padding-inline: 8px; border-top: 0; border-left: 1px solid #284b43; }
  .ads-rate-rail p { display: none; }
}

@media (max-width: 760px) {
  .proposal-layout { grid-template-columns: 1fr; gap: 18px; }
  .proposal-form { padding: 16px; border-radius: 18px; }
  .proposal-kind { width: 100%; }
  .proposal-taxonomy__selectors, .proposal-pack-filters, .proposal-pack-grid { grid-template-columns: 1fr; }
  .proposal-image-details { grid-template-columns: 84px minmax(0, 1fr); }
  .proposal-image-preview { width: 84px; }
  .proposal-submit-row, .proposal-result { grid-template-columns: 1fr; }
  .proposal-result a, .proposal-result small { grid-column: 1; grid-row: auto; }
  .proposal-history { position: static; }
  .proposal-match-card { grid-template-columns: auto minmax(0, 1fr); }
  .proposal-match-card__actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .request-status-row { grid-template-columns: 1fr; }
  .request-status-row__actions { justify-content: flex-start; flex-wrap: wrap; }
  .ads-rate-experience { margin-inline: -12px; }
  .ads-rate-hero { min-height: 300px; display: block; padding: 30px 20px; }
  .ads-rate-hero h1 { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .ads-rate-hero__action { margin-top: 22px; text-align: left; }
  .ads-rate-layout { width: calc(100% - 24px); padding-top: 12px; }
  .ads-rate-rail { display: block; }
  .ads-rate-rail ol { margin-top: 12px; }
  .ads-rate-rail li { min-height: 44px; border-left: 0; }
  .ads-rate-sheet { box-shadow: 0 18px 42px rgb(0 8 6 / 24%); }
  .rate-current { grid-template-columns: 1fr; gap: 22px; }
  .rate-current dl { grid-template-columns: 1fr; }
  .rate-current dl > div { padding: 12px 0; border-top: 1px solid var(--ui-line); border-left: 0; }
  .rate-current, .rate-section { padding: 24px 18px; }
  .rate-section > header { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  .rate-table { min-width: 720px; }
  .rate-terms, .rate-placement-grid { grid-template-columns: 1fr; }
  .rate-terms p + p, .rate-placement-grid p + p { border-top: 1px solid #c3d4cf; border-left: 0; }
  .tier-ladder { grid-template-columns: 1fr; }
  .tier-ladder li { min-height: 64px; border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .tier-ladder li:last-child { border-bottom: 0; }
  .rate-facts, .rate-definition > ul, .rate-buy > div { grid-template-columns: 1fr; }
  .rate-facts p + p { padding-left: 0; border-top: 1px solid var(--ui-line); border-left: 0; }
  .rate-buy > div { gap: 22px; }
}
.manager-recruitment .solid-button { margin-top: 12px; width: 100%; }
.channel-board { border-top: 1px solid var(--ui-line-strong); }
.board-row { min-height: 56px; border-bottom: 1px solid var(--ui-line); }
.board-row > a { min-height: 56px; display: grid; align-content: center; gap: 3px; padding: 8px 12px; border-left: 3px solid transparent; }
.board-row strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.board-meta { overflow: hidden; color: var(--ui-dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.board-meta--mobile { display: none; }
/* 공지 표시. 줄 높이를 건드리지 않게 제목과 같은 줄에 눕힌다. */
.board-notice {
  margin-right: 6px; padding: 1px 5px; border-radius: 4px; vertical-align: 1px;
  background: var(--ui-signal-soft); color: var(--ui-signal); font-size: 10px; font-weight: 600;
}
/* 말머리와 PackPik. 공지와 같은 자리·같은 크기라 줄 높이가 늘지 않는다. */
.board-tab {
  margin-right: 6px; padding: 1px 5px; border: 1px solid var(--ui-line); border-radius: 4px;
  vertical-align: 1px; color: var(--ui-dim); font-size: 10px; font-weight: 600;
}
.board-packpik {
  margin-right: 6px; padding: 1px 5px; border-radius: 4px; vertical-align: 1px;
  background: var(--ui-signal); color: var(--ui-paper); font-size: 10px; font-weight: 700;
}
/* 그림이 붙은 글. 제목 뒤에 작게 — 제목을 밀어내지 않는다. */
.board-image { margin-left: 5px; color: var(--ui-dim); vertical-align: -2px; }
.board-image svg { width: 13px; height: 13px; }
/* 제목 옆 댓글 수. 제목과 같은 줄이라 줄 높이가 늘지 않는다. */
.board-replies { margin-left: 5px; color: var(--ui-signal); font-size: 11px; font-weight: 700; }
/* 유동닉 표지. 접속 주소를 쓰지 않고 종류만 알린다. */
.board-guest {
  margin-right: 4px; padding: 0 4px; border: 1px solid var(--ui-line); border-radius: 3px;
  color: var(--ui-dim); font-size: 9px; font-weight: 700;
}
.board-meta time { color: inherit; font-variant-numeric: tabular-nums; }
.board-row.is-notice > a { border-left-color: var(--ui-line-strong); }
.board-row.is-active { background: var(--ui-signal-soft); }
.board-row.is-active > a { border-left-color: var(--ui-signal); }
.board-row.is-active strong { color: var(--ui-signal); }
/* 목록 아래 줄 — 쪽 이동과 글쓰기. 여섯 곳 전부가 이 자리에 둔다. */
.list-foot {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  margin-top: 14px;
}
.list-foot:empty { display: none; }
.pager { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.pager__step, .pager__page {
  min-width: 34px; min-height: 34px; display: inline-grid; place-items: center;
  padding: 0 8px; border-radius: 8px; color: var(--ui-dim); font-size: 12px; font-weight: 700;
}
.pager__step:hover, .pager__page:hover { background: var(--ui-paper-2); color: var(--ui-ink); }
.pager__pages { display: flex; gap: 2px; }
.pager__page.is-current { background: var(--ui-signal-soft); color: var(--ui-signal); }
.pager__step.is-off { color: var(--ui-line-strong); }
.pager__step.is-off:hover { background: transparent; color: var(--ui-line-strong); }
/* 정렬. 탭 줄과 같은 결로 두되 한 단 작다 — 보기(탭)가 먼저이고 정렬은 그 안의 일이다. */
.feed-sort { display: flex; gap: 2px; margin-bottom: 8px; }
.feed-sort__item {
  min-height: 30px; display: inline-grid; place-items: center; padding: 0 9px;
  border-radius: 8px; color: var(--ui-dim); font-size: 11px; font-weight: 700;
}
.feed-sort__item[aria-current="true"] { background: var(--ui-paper-2); color: var(--ui-ink); }

/* 목록 검색. 여섯 곳 전부가 목록 아래에 둔다. 한 줄이고 새 덩어리를 세우지 않는다. */
.feed-search { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; }
.feed-search select, .feed-search input[type="search"] {
  min-height: 36px; padding: 0 9px; border: 1px solid var(--ui-line); border-radius: 9px;
  background: var(--ui-paper); color: var(--ui-ink); font-size: 12px;
}
.feed-search input[type="search"] { flex: 1 1 160px; min-width: 0; }

/* 본문 아래 이동. 위에 있는 것과 같은 두 개다 — 스무 줄을 내려온 사람이 다시 올라가지 않게. */
.post-foot-nav {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ui-line);
}
/* 다른 관심사로 가는 줄. 사이트 전체 카테고리 표가 아니라 Pack 으로 옮긴 것이다. */
/* 접어 둔 댓글을 펴는 단추. 댓글 줄과 같은 폭으로 둔다. */
.comments-more { width: 100%; min-height: 44px; margin-top: 8px; justify-content: center; }

/* 같은 HubPack. Pack 화면 곁줄의 다른 구획과 같은 결로 둔다. */
.pack-siblings .compact-list { display: grid; gap: 4px; }

.pack-trail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pack-trail a {
  min-height: 34px; display: inline-grid; place-items: center; padding: 0 11px;
  border: 1px solid var(--ui-line); border-radius: 999px;
  color: var(--ui-dim); font-size: 12px; font-weight: 700;
}
.pack-trail a:hover { border-color: var(--ui-line-strong); color: var(--ui-ink); }

.compose-page { width: min(900px, 100%); margin-inline: auto; }
.compose-form { display: grid; gap: 18px; padding: 22px 0 8px; }
.compose-form textarea { min-height: 280px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }

.composer-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--ui-paper-2); }
.composer-identity span, .composer-identity small { color: var(--ui-dim); font-size: 11px; }
.composer-identity small { flex-basis: 100%; }
.guest-credentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; border: 0; border-radius: 18px; background: var(--ui-paper-2); }
.guest-credentials legend { padding: 0 5px; color: var(--ui-signal); font-size: 11px; font-weight: 800; }
.guest-credentials > small { grid-column: 1 / -1; color: var(--ui-dim); }
/*
 * 비밀번호 칸과 그 옆 단추들. 단추가 둘이 되면서 자동 열이 접혀 아래로 내려가고,
 * 그 바람에 옆 닉네임 칸과 높이가 어긋났다. 단추 자리를 명시해 한 줄로 둔다.
 */
.password-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.password-line .text-button { border: 1px solid var(--ui-line); border-left: 0; border-radius: 0; white-space: nowrap; }
.password-line .text-button:last-child { border-radius: 0 var(--ui-radius) var(--ui-radius) 0; }
/*
 * 편집면.
 *
 * 원래 `<textarea>` 는 그 자리에 남아 값을 들고 있고, 사람은 이 면을 본다. 그래서 두 칸이
 * 겹쳐 보이지 않게 원래 칸은 화면에서 뺀다 — `display:none` 이 아니라 크기를 없애는 쪽이다.
 * 완전히 없애면 form 이 값을 보내지 않는 브라우저가 있다.
 */
.rich-source {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.rich-editor {
  position: relative;
  min-height: 132px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 12px;
  background: var(--ui-paper); color: var(--ui-ink); font: inherit; line-height: 1.65;
  overflow-wrap: anywhere;
}
.rich-editor:focus-visible { outline: 2px solid var(--ui-signal); outline-offset: -1px; }
.rich-editor > p { margin: 0 0 .5em; }
.rich-editor > p:last-child { margin-bottom: 0; }
.rich-editor blockquote { margin: .4em 0; padding-left: 12px; border-left: 3px solid var(--ui-line-strong); color: var(--ui-dim); }
.rich-editor pre { margin: .4em 0; padding: 10px 12px; border-radius: 10px; background: var(--ui-paper-2); }
.rich-editor code { padding: 1px 5px; border-radius: 5px; background: var(--ui-paper-2); font-family: Consolas, monospace; }
/* 스포일러는 쓰는 사람에게는 보여야 한다. 무엇을 가렸는지 모르면 고칠 수 없다. */
.rich-editor .spoiler { background: var(--ui-paper-2); color: var(--ui-dim); box-shadow: inset 0 0 0 1px var(--ui-line-strong); cursor: text; }
.rich-editor .post-image { max-width: 260px; height: auto; border-radius: 10px; vertical-align: middle; }
.rich-editor .post-video { display: block; width: min(100%, 360px); max-height: 300px; border-radius: 10px; background: #101417; }
/*
 * 빈 편집면에도 무엇을 쓰는 자리인지 남는다. 비었는지는 JS 가 표시해 준다.
 *
 * **글의 흐름에서 빼낸다.** 흐름 안에 두면 그것이 첫 줄을 차지해 버려서, 원래 있던
 * `<p><br></p>` 가 아래로 밀린다. 음수 여백으로 끌어올려 봤더니 이번에는 상자 밖으로
 * 나가 테두리 위에 `댓글` 이 걸렸다. 자리를 안쪽 여백에 맞춰 못 박는 것이 맞다.
 */
.rich-editor[data-empty="true"]::before {
  content: attr(data-placeholder);
  position: absolute; top: 12px; inset-inline-start: 14px;
  color: var(--ui-dim); pointer-events: none;
}
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 12px; background: var(--ui-paper-2); }
.editor-toolbar button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ui-dim); font-weight: 750; cursor: pointer; }
.editor-toolbar button:hover, .editor-toolbar button:focus-visible { background: var(--ui-signal-soft); color: var(--ui-signal); }

/* 붙인 그림. 도구모음 바로 아래 좁은 띠 하나로, 새 카드나 새 영역을 세우지 않는다. */
.image-strip { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0; }
.image-card {
  position: relative; flex: 0 0 auto; width: 88px; margin: 0; display: grid; gap: 4px;
  border-radius: 10px; background: var(--ui-paper-2); cursor: grab;
}
.image-card img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; }
.image-card__remove {
  position: absolute; inset: 5px 5px auto auto; width: 28px; height: 28px; padding: 0;
  border: 1px solid rgb(255 255 255 / .46); border-radius: 999px;
  background: rgb(13 21 25 / .78); color: #fff; font: 700 18px/1 system-ui; cursor: pointer;
  box-shadow: 0 4px 12px rgb(0 0 0 / .22);
}
.image-card__remove:hover, .image-card__remove:focus-visible { background: rgb(13 21 25 / .96); }
.image-card.is-pending, .image-card.is-error {
  min-height: 88px; place-items: center; padding: 8px; color: var(--ui-dim); font-size: 10px;
  text-align: center; word-break: break-all;
}
.image-card.is-error { background: var(--ui-signal-soft); color: var(--ui-signal); }

/* Video remains compact in the composer and never autoplays. Progress is part-level, not fake time. */
.video-strip { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; }
.video-card { position: relative; flex: 0 0 180px; margin: 0; overflow: hidden; border-radius: 12px; background: var(--ui-paper-2); }
.video-card video { display: block; width: 180px; aspect-ratio: 16 / 9; object-fit: cover; background: #11181c; }
.video-card figcaption { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; color: var(--ui-dim); font-size: 11px; }
.video-card.is-pending, .video-card.is-error { min-height: 104px; display: grid; align-content: center; gap: 8px; padding: 12px; color: var(--ui-dim); font-size: 11px; }
.video-card.is-pending progress { width: 100%; accent-color: var(--ui-signal); }
.video-card.is-error { color: var(--ui-signal); background: var(--ui-signal-soft); }

/* 세트의 얼굴로 고른 그림. 테를 하나 두르는 것으로 족하다 — 새 표시를 만들지 않는다. */
.emote-cover-pick { cursor: pointer; }
.emote-cover-pick.is-cover { outline: 2px solid var(--ui-signal); outline-offset: -2px; }

/* 고른 이모티콘이 이름을 기다리는 자리. 글 이미지 띠와 같은 모양을 쓰되
   이름 칸이 하나 더 붙는다. 새 컴포넌트를 만들지 않는다. */
.emote-draft-strip { margin: 6px 0 0; }
.emote-draft { width: 104px; }
.emote-draft__thumb {
  width: 104px; height: 88px; display: grid; place-items: center;
  overflow: hidden; border-radius: 10px; background: var(--ui-paper);
}
.emote-draft__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.emote-draft figcaption { display: grid; gap: 2px; padding: 0 4px 4px; }
.emote-draft input {
  min-height: 30px; padding: 0 6px; border: 1px solid var(--ui-line); border-radius: 7px;
  background: var(--ui-paper); font-size: 11px;
}
.emote-draft small { color: var(--ui-signal); font-size: 10px; word-break: keep-all; }
.emote-draft[data-state="busy"] { opacity: 0.6; }
.emote-draft[data-state="error"] { background: var(--ui-signal-soft); }

/* Pack 홈의 좁은 미리보기. 곁줄에 들어가므로 카드 크기를 키우지 않는다. */
.emote-preview { display: grid; gap: 2px; }

/* 본문 안의 그림. 글 폭을 넘지 않게만 잡는다. */
.post-image { max-width: 100%; height: auto; border-radius: 12px; }
.post-video { display: block; width: min(100%, 720px); max-height: min(72vh, 720px); margin: 18px auto; border-radius: 14px; background: #101417; box-shadow: 0 14px 36px rgb(12 20 24 / .16); }
@media (max-width: 640px) {
  .post-video { width: 100%; max-height: 78vh; border-radius: 10px; object-fit: contain; }
}
.composer-channel-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 14px; background: var(--ui-paper-2); }
.composer-channel-picker > span { padding-inline: 6px; color: var(--ui-muted); font-size: 12px; font-weight: 800; }
.composer-channel-picker a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 11px; color: var(--ui-muted); font-weight: 800; }
.composer-channel-picker a[aria-current="page"] { background: var(--ui-signal-soft); color: var(--ui-signal); }

.ui-app label { display: grid; gap: 7px; color: var(--ui-dim); font-size: 12px; font-weight: 700; }
.ui-app input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .ui-app textarea, .ui-app select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-paper); outline: 0; }
.ui-app textarea { min-height: 130px; resize: vertical; }
.ui-app input:focus, .ui-app textarea:focus, .ui-app select:focus { border-color: var(--ui-signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-signal) 18%, transparent); }

.top-ranking { max-width: 880px; }
.stale-notice, .read-only-banner, .moderation-state { margin: 18px 0 0; padding: 10px 13px; border-left: 3px solid var(--ui-rank); background: color-mix(in srgb, var(--ui-rank) 9%, transparent); color: var(--ui-dim); font-size: 12px; }
.read-only-banner { border-left-color: var(--ui-signal); font-family: Consolas, monospace; }
.picks-page-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: 56px; }
.source-state { min-height: 62px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--ui-line); }
.source-state strong, .source-state small { display: block; }
.source-state small { color: var(--ui-dim); font-size: 10px; }

.back-line { min-height: 46px; display: flex; align-items: center; border-bottom: 1px solid var(--ui-line); }
.back-line a { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; color: var(--ui-dim); }
.post-layout { display: grid; grid-template-columns: minmax(0, 860px) 280px; justify-content: center; gap: 28px; align-items: start; }
.post-column { min-width: 0; }
.post-ad-rail { position: sticky; top: calc(var(--ui-header) + 18px); }
.post-detail { max-width: 860px; margin-inline: auto; padding: 42px 0 28px; border-bottom: 1px solid var(--ui-line-strong); }
.post-detail header { padding-bottom: 26px; border-bottom: 1px solid var(--ui-line); }
.post-byline { display: flex; align-items: center; gap: 12px; color: var(--ui-dim); font-size: 12px; }
.post-byline a { color: var(--ui-ink); font-weight: 700; }
.post-body { min-height: 190px; padding: 32px 0; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.post-body p, .comment-body p { margin: 0 0 1em; }
.post-body blockquote, .comment-body blockquote { margin: 1em 0; padding: 12px 16px; border-left: 3px solid var(--ui-signal); border-radius: 0 12px 12px 0; background: var(--ui-paper-2); color: var(--ui-dim); }
.post-body pre, .comment-body pre { overflow-x: auto; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--ui-ink) 92%, transparent); color: var(--ui-paper); }
.post-body code, .comment-body code { padding: 2px 5px; border-radius: 5px; background: var(--ui-paper-2); font-family: Consolas, monospace; }
.post-body pre code, .comment-body pre code { padding: 0; background: transparent; }
.spoiler { border-radius: 4px; background: var(--ui-ink); color: transparent; cursor: help; }
.spoiler:hover, .spoiler:focus { color: var(--ui-paper); }
.post-detail footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pik-button { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; border: 1px solid var(--ui-rank); border-radius: var(--ui-radius); background: transparent; color: var(--ui-rank); cursor: pointer; }
.pik-button[aria-pressed="true"] { background: color-mix(in srgb, var(--ui-rank) 14%, transparent); }
.comment { max-width: 860px; margin-inline: auto; padding: 20px 0; border-bottom: 1px solid var(--ui-line); }
.comment header { display: flex; justify-content: space-between; color: var(--ui-dim); font-size: 11px; }
.comment header a, .comment header strong { color: var(--ui-ink); }
.comment header time, .post-byline time { font-variant-numeric: tabular-nums; }
.post-views { color: var(--ui-dim); font-variant-numeric: tabular-nums; }
/* 수정 표시. 시각과 붙어 있어야 무엇이 수정됐는지 읽힌다. */
.edited-mark { margin-left: 6px; color: var(--ui-dim); font-size: .92em; }
.comment p { margin: 9px 0; }
.comment-body { margin: 9px 0; line-height: 1.7; overflow-wrap: anywhere; }
.comment--reply { margin: 14px 0 0 48px; padding: 14px 16px; border-left: 2px solid var(--ui-signal); background: var(--ui-paper-2); }
.inline-actions { display: flex; gap: 2px; }
.inline-actions button { min-height: 44px; padding: 0 9px; font-size: 11px; }
.comment-form { max-width: 860px; margin: 24px auto 0; display: grid; justify-items: end; gap: 8px; }
.comment-form > * { width: 100%; }
.comment-form > .solid-button { width: auto; }
.inline-edit-form { display: grid; gap: 10px; margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--ui-paper-2); }
.inline-edit-form[hidden] { display: none; }

.my-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 16px 0; border-bottom: 1px solid var(--ui-line); scrollbar-width: thin; }
.my-tabs button { flex: none; min-height: 44px; }
.benefit-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 20px; }
.benefit-panel > article {
  min-height: 260px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 26px;
  background: var(--ui-paper);
  box-shadow: var(--ui-shadow);
}
.benefit-panel > article.is-unlocked { background: var(--ui-signal-soft); }
.benefit-panel h3 { margin: 10px 0; font-size: clamp(22px, 3vw, 32px); }
.benefit-panel p { color: var(--ui-dim); line-height: 1.65; }
@media (max-width: 720px) { .benefit-panel { grid-template-columns: 1fr; } }
.collection-showcase { margin-top: 28px; padding: clamp(22px, 4vw, 38px); border-radius: 28px; background: var(--ui-panel); box-shadow: var(--ui-shadow); }
.collection-showcase > header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; }
.collection-showcase h3 { margin: 7px 0; font-size: clamp(24px, 3vw, 36px); }
.collection-showcase p { max-width: 680px; margin: 0; color: var(--ui-dim); line-height: 1.6; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.collection-card { position: relative; min-height: 126px; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 18px; border-radius: 20px; background: color-mix(in srgb, var(--ui-signal-soft) 30%, var(--ui-paper-2)); cursor: pointer; transition: transform .16s ease, background .16s ease; }
.collection-card:hover { transform: translateY(-2px); }
.collection-card:has(input:checked) { background: var(--ui-signal-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-signal) 55%, transparent); }
.collection-card:has(input:disabled) { opacity: .48; cursor: not-allowed; }
.ui-app .collection-card input[type="checkbox"] { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.collection-card::after { content: ""; position: absolute; inset: 14px 14px auto auto; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--ui-line-strong); border-radius: 8px; background: var(--ui-paper); color: var(--ui-paper); font-size: 13px; font-weight: 900; }
.collection-card:has(input:checked)::after { content: "✓"; border-color: var(--ui-signal); background: var(--ui-signal); }
.collection-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--ui-signal) 72%, white); outline-offset: 3px; }
.collection-glyph { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--ui-ink); color: var(--ui-paper); font-size: 18px; }
.collection-card strong, .collection-card small, .collection-card em { display: block; padding-right: 20px; }
.collection-card small { margin-top: 5px; color: var(--ui-dim); line-height: 1.45; }
.collection-card em { margin-top: 12px; color: var(--ui-signal); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) { .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .collection-showcase > header { align-items: stretch; flex-direction: column; } .collection-grid { grid-template-columns: 1fr; } }
.text-row { min-height: 68px; padding: 12px 0; border-bottom: 1px solid var(--ui-line); }
.text-row strong, .text-row p, .text-row small { display: block; margin: 0; }
.text-row p, .text-row small { margin-top: 4px; color: var(--ui-dim); }
.id-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 0; }
.id-list span { min-height: 36px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--ui-line); border-radius: 2px; font-family: Consolas, monospace; font-size: 11px; }
.big-measure { display: flex; align-items: baseline; gap: 12px; padding: 25px 0; border-bottom: 1px solid var(--ui-line); }
.big-measure strong { color: var(--ui-rank); font-size: 42px; line-height: 1; }
.settings-form, .request-form { max-width: 620px; display: grid; gap: 17px; padding-top: 22px; }
.notification-row { min-height: 78px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--ui-line); }
.notice-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-line-strong); }
.notification-row.is-unread .notice-pulse { background: var(--ui-rank); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ui-rank) 12%, transparent); }
.notification-row p { margin: 3px 0; color: var(--ui-dim); }
.notification-row small { color: var(--ui-dim); }
.profile-summary { display: grid; grid-template-columns: 96px 1fr; gap: 22px; padding: 25px 0; }
.profile-summary dl { margin: 0; }
.profile-summary dl > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ui-line); }
.profile-summary dt { color: var(--ui-dim); }
.profile-summary dd { margin: 0; }
.form-layout { display: grid; grid-template-columns: minmax(0, 650px) minmax(280px, 1fr); gap: 56px; }

/* Pack / HubPack canonical proposal --------------------------------------- */
.proposal-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.proposal-form { max-width: none; padding: 24px; border: 1px solid var(--ui-line); border-radius: 24px; background: var(--ui-surface); box-shadow: 0 18px 48px color-mix(in srgb, var(--ui-ink) 8%, transparent); }
.proposal-form > label, .proposal-form fieldset label, .proposal-correction label { display: grid; gap: 7px; }
.proposal-form label > span, .proposal-form legend, .proposal-correction label > span { font-weight: 700; }
.proposal-kind { width: fit-content; display: grid; grid-template-columns: repeat(2, minmax(112px, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-soft); }
.proposal-kind label { position: relative; cursor: pointer; }
.proposal-kind input { position: absolute; opacity: 0; pointer-events: none; }
.proposal-kind span { min-height: 42px; display: grid; place-items: center; padding: 0 18px; border-radius: 10px; color: var(--ui-dim); }
.proposal-kind input:checked + span { color: var(--ui-ink); background: var(--ui-surface); box-shadow: 0 6px 18px color-mix(in srgb, var(--ui-ink) 9%, transparent); }
.proposal-name small, .proposal-asset > p, .proposal-hub-fields > small, .proposal-submit-row small { color: var(--ui-dim); line-height: 1.55; }
.proposal-discovery:empty { display: none; }
.proposal-discovery__loading, .proposal-discovery__clear, .proposal-discovery__error { margin: 0; padding: 12px 14px; border-radius: 12px; color: var(--ui-dim); background: var(--ui-soft); }
.proposal-discovery__alert, .proposal-discovery__near { display: grid; gap: 10px; padding: 14px; border: 1px solid color-mix(in srgb, var(--ui-rank) 28%, var(--ui-line)); border-radius: 16px; background: color-mix(in srgb, var(--ui-rank) 5%, var(--ui-surface)); }
.proposal-discovery__near > p { margin: -4px 0 2px; color: var(--ui-dim); }
.proposal-match-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 13px; background: var(--ui-surface); }
.proposal-match-card small, .proposal-match-card strong { display: block; }
.proposal-match-card small { margin-top: 3px; color: var(--ui-dim); }
.proposal-match-card__actions { display: flex; gap: 8px; align-items: center; }
.proposal-correction { position: relative; }
.proposal-correction > summary { cursor: pointer; color: var(--ui-dim); font-size: 13px; }
.proposal-correction > [data-proposal-correction-form] { min-width: min(420px, 78vw); display: grid; gap: 12px; padding: 16px; margin-top: 8px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); box-shadow: 0 18px 42px color-mix(in srgb, var(--ui-ink) 12%, transparent); }
.proposal-taxonomy, .proposal-asset { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--ui-line); border-radius: 16px; background: color-mix(in srgb, var(--ui-soft) 58%, var(--ui-surface)); }
.proposal-taxonomy__selectors { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(190px, 1.2fr); gap: 12px; }
.proposal-taxonomy__search-results { display: flex; flex-wrap: wrap; gap: 8px; }
.proposal-taxonomy__search-results button { min-height: 34px; padding: 0 11px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); color: var(--ui-ink); cursor: pointer; }
.proposal-new-category { padding-top: 4px; }
.proposal-file { min-height: 92px; place-items: center; padding: 16px; border: 1px dashed var(--ui-line-strong); border-radius: 14px; text-align: center; cursor: pointer; background: var(--ui-surface); }
.proposal-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.proposal-file span { color: var(--ui-rank); }
.proposal-image-details { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.proposal-image-details > label, .proposal-rights { grid-column: 2; }
.proposal-image-preview { grid-row: 1 / span 4; width: 116px; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: var(--ui-soft); }
.proposal-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.proposal-rights { display: grid !important; grid-template-columns: auto 1fr; align-items: start; }
.proposal-rights input { margin-top: 3px; }
.proposal-hub-fields { display: grid; gap: 16px; }
.proposal-recommend-toggle { display: grid !important; grid-template-columns: auto 1fr; align-items: center; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--ui-rank) 7%, var(--ui-surface)); }
.proposal-recommendations, .proposal-pack-picker { padding: 16px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); }
.proposal-recommendations > header { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.proposal-recommendations > header small { color: var(--ui-dim); }
.proposal-pack-picker > summary { cursor: pointer; font-weight: 750; }
.proposal-pack-filters { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 10px; margin: 14px 0 10px; }
.proposal-pack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.proposal-pack-choice { min-width: 0; display: grid !important; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; min-height: 64px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-surface); cursor: pointer; }
.proposal-pack-choice:has(input:checked) { border-color: color-mix(in srgb, var(--ui-rank) 55%, var(--ui-line)); background: color-mix(in srgb, var(--ui-rank) 7%, var(--ui-surface)); }
.proposal-pack-choice strong, .proposal-pack-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proposal-pack-choice small { margin-top: 3px; color: var(--ui-dim); }
.proposal-submit-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.proposal-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 16px; border-radius: 15px; border: 1px solid color-mix(in srgb, var(--ui-rank) 32%, var(--ui-line)); background: color-mix(in srgb, var(--ui-rank) 7%, var(--ui-surface)); }
.proposal-result small { grid-column: 1; color: var(--ui-dim); }
.proposal-result a { grid-column: 2; grid-row: 1 / span 2; }
.proposal-history { position: sticky; top: 130px; }
.proposal-history__empty { padding: 22px; border-left: 2px solid var(--ui-line-strong); }
.proposal-history__empty p { color: var(--ui-dim); line-height: 1.6; }

@media (max-width: 760px) {
  .proposal-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .proposal-form { min-width: 0; padding: 16px; border-radius: 18px; }
  .proposal-kind { width: 100%; }
  .proposal-taxonomy__selectors,
  .proposal-pack-filters,
  .proposal-pack-grid { grid-template-columns: minmax(0, 1fr); }
  .proposal-image-details { grid-template-columns: 84px minmax(0, 1fr); }
  .proposal-image-preview { width: 84px; }
  .proposal-submit-row,
  .proposal-result { grid-template-columns: minmax(0, 1fr); }
  .proposal-result a,
  .proposal-result small { grid-column: 1; grid-row: auto; }
  .proposal-history { position: static; grid-row: auto; min-width: 0; }
  .proposal-match-card { grid-template-columns: auto minmax(0, 1fr); }
  .proposal-match-card__actions { grid-column: 1 / -1; flex-wrap: wrap; }
}
.request-status-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--ui-line); }
.request-status-row small { display: block; margin-top: 4px; color: var(--ui-dim); }
.request-status-row__actions { display: flex; gap: 8px; align-items: center; }

.management-grid, .ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.governance-status { display: grid; gap: 18px; padding: 4px; }
.governance-status > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.governance-status > div:first-child span { color: var(--muted); font-size: .8rem; }
.governance-status > div:first-child strong { font-size: 1.05rem; }
.governance-status dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.governance-status dl div { border-radius: 14px; background: var(--veil); padding: 12px; }
.governance-status dt { color: var(--muted); font-size: .72rem; }
.governance-status dd { margin: 5px 0 0; font-weight: 800; }
.manager-console-form { display: grid; gap: 13px; }
.manager-console-form label, .manager-console-safety label { display: grid; gap: 6px; font-size: .78rem; font-weight: 700; }
.manager-console-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.manager-console-form--inline { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; margin-top: 16px; }
.manager-staff-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.manager-staff-row + .manager-staff-row { border-top: 1px solid var(--edge); }
.manager-staff-row span { display: grid; gap: 4px; }
.manager-staff-row small, .manager-staff-row code { color: var(--muted); font-size: .72rem; }
.manager-staff-row code { max-width: 58%; overflow-wrap: anywhere; text-align: right; white-space: normal; }
.manager-console-safety { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.manager-console-safety form { display: grid; gap: 10px; padding: 15px; border-radius: 16px; background: var(--veil); }
.permission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px; border: 0; border-radius: 16px; background: var(--veil); }
.permission-grid legend { padding: 0 4px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.permission-grid label { display: flex; align-items: center; gap: 7px; min-height: 32px; font-size: .78rem; }
.tab-policy-form { display: grid; grid-template-columns: minmax(130px, 1fr) repeat(3, auto) auto; align-items: end; gap: 9px; width: 100%; margin-top: 10px; padding: 10px; border-radius: 14px; background: var(--veil); }
.tab-policy-form label { display: flex; align-items: center; gap: 6px; font-size: .74rem; }
.tab-policy-form label:first-child { display: grid; gap: 4px; }
.manager-exit-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.manager-exit-controls form, .restriction-appeal { display: grid; gap: 9px; padding: 14px; border-radius: 16px; background: var(--veil); }
.manager-exit-controls label, .restriction-appeal label { display: grid; gap: 6px; font-size: .78rem; font-weight: 700; }
.restriction-row { align-items: flex-start; }
.operator-grid { display: grid; gap: 18px; }
.operator-boundary { display: grid; gap: 6px; margin-bottom: 22px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--ui-signal) 38%, var(--ui-line)); border-radius: 18px; background: color-mix(in srgb, var(--ui-signal-soft) 38%, var(--ui-paper)); }
.operator-boundary strong, .operator-boundary p { margin: 0; }
.operator-boundary p { max-width: 900px; color: var(--ui-dim); line-height: 1.65; }
.operator-card { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper-2); }
.operator-card + .operator-card { margin-top: 10px; }
.operator-card > summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 16px; cursor: pointer; }
.operator-card > summary span, .operator-card--flat > header { min-width: 0; display: grid; gap: 4px; }
.operator-card > summary small, .operator-card > summary em, .operator-card--flat > header span { color: var(--ui-dim); font-size: 11px; font-style: normal; }
.operator-card__body { display: grid; gap: 14px; padding: 0 16px 18px; border-top: 1px solid var(--ui-line); }
.operator-card--flat { padding: 16px; }
.operator-card--flat > header { margin-bottom: 12px; }
.operator-action { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; border-radius: 14px; background: var(--ui-paper); }
.operator-action label { display: grid; gap: 6px; color: var(--ui-dim); font-size: 11px; }
.operator-action input, .operator-action select, .operator-action textarea { width: 100%; }
.operator-action .operator-reason, .operator-action .inline-actions, .operator-action .auth-form-error { grid-column: 1 / -1; }
.operator-action .auth-form-error { margin: 0; }
.operator-source, .operator-source-links a, .operator-queue-link { color: var(--ui-signal); }
.operator-source-links { display: flex; flex-wrap: wrap; gap: 12px; }
.operator-queue-link { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ui-line); }
.operator-queue-link span { display: grid; gap: 4px; }
.operator-queue-link small, .operator-queue-link em, .operator-note { color: var(--ui-dim); font-size: 11px; font-style: normal; }
.policy-row, .ops-row, .ops-queue { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--ui-line); }
.policy-row em, .ops-queue b { color: var(--ui-signal); font-family: Consolas, monospace; font-size: 10px; font-style: normal; }
.ops-kv { margin: 0; }
.ops-row { display: grid; grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr); }
.ops-row dt { color: var(--ui-dim); font-family: Consolas, monospace; font-size: 10px; }
.ops-row dd { margin: 0; overflow-wrap: anywhere; font-family: Consolas, monospace; font-size: 10px; text-align: right; }
.ops-foot { color: var(--ui-dim); font-size: 10px; }
.audit-row { padding: 14px 0; display: grid; grid-template-columns: 70px minmax(130px, .6fr) minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--ui-line); font-size: 11px; }
.audit-row time, .audit-row span { color: var(--ui-dim); }
.audit-row p { grid-column: 2 / -1; margin: 0; }

/* 운영 현황은 공개 대시보드가 아니라 운영자의 읽기 전용 관제 화면이다. */
.ops-console { display: grid; gap: 14px; padding: 18px 0 48px; }
.ops-console-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
  padding: clamp(24px, 3.4vw, 42px);
  border: 1px solid var(--ui-line-strong);
  border-top: 4px solid var(--ui-ink);
  border-radius: 6px;
  background: var(--ui-paper);
}
.ops-console-head__eyebrow { color: var(--ui-signal); font-size: .68rem; font-weight: 900; letter-spacing: .13em; }
.ops-console-head h1 { margin: 9px 0 8px; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.08; letter-spacing: -.05em; }
.ops-console-head p { max-width: 66ch; margin: 0; color: var(--ui-dim); font-size: .86rem; line-height: 1.7; }
.ops-console-head__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ops-console-head__meta span { min-height: 29px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--ui-line); border-radius: 3px; color: var(--ui-dim); font-size: .68rem; font-weight: 760; }
.ops-console-head__meta span:first-child { border-color: var(--ui-ink); color: var(--ui-ink); }
.ops-workspace-link { min-width: 190px; min-height: 50px; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 16px; border: 1px solid var(--ui-ink); border-radius: 4px; background: var(--ui-ink); color: var(--ui-paper) !important; font-size: .78rem; font-weight: 850; }
.ops-workspace-link:hover { opacity: .88; }
.ops-workspace-link .icon { width: 16px; }
.ops-snapshot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ops-snapshot-card { min-width: 0; display: grid; gap: 5px; padding: 18px 20px; border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-line-strong); border-radius: 4px; background: var(--ui-paper); }
.ops-snapshot-card[data-tone="ok"] { border-left-color: #23745f; }
.ops-snapshot-card[data-tone="attention"] { border-left-color: #a86b16; }
.ops-snapshot-card[data-tone="danger"] { border-left-color: var(--ui-danger); }
.ops-snapshot-card span { color: var(--ui-dim); font-size: .7rem; font-weight: 800; }
.ops-snapshot-card strong { overflow: hidden; text-overflow: ellipsis; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.1; white-space: nowrap; }
.ops-snapshot-card small { color: var(--ui-dim); font-size: .66rem; }
.ops-dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.ops-panel { min-width: 0; grid-column: span 4; padding: 20px; border: 1px solid var(--ui-line); border-radius: 5px; background: var(--ui-paper); }
.ops-panel--wide { grid-column: span 8; }
.ops-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); }
.ops-panel > header > div { min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.ops-panel > header > div > span { color: var(--ui-signal); font: 800 .62rem/1 var(--mono); }
.ops-panel h2 { margin: 0; font-size: 1rem; letter-spacing: -.02em; }
.ops-panel > header > small { flex: none; color: var(--ui-dim); font-size: .68rem; font-weight: 750; }
.ops-panel > header > small[data-tone="ok"] { color: #23745f; }
.ops-panel > header > small[data-tone="attention"] { color: #8a5b19; }
.ops-panel > header > small[data-tone="danger"] { color: var(--ui-danger); }
.ops-attention-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ops-attention-group { min-width: 0; padding: 14px; border: 1px solid var(--ui-line); border-radius: 4px; background: var(--ui-paper-2); }
.ops-attention-group h3 { margin: 0 0 8px; color: var(--ui-dim); font-size: .7rem; font-weight: 850; }
.ops-case-row { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ui-line); }
.ops-case-row:first-of-type { border-top: 0; }
.ops-case-row > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.ops-case-row > span:first-child { display: grid; gap: 2px; }
.ops-case-row strong { overflow: hidden; text-overflow: ellipsis; font-size: .78rem; white-space: nowrap; }
.ops-case-row small { color: var(--ui-dim); font-size: .64rem; }
.ops-case-row em, .ops-case-row b { flex: none; color: var(--ui-dim); font-size: .63rem; font-style: normal; font-weight: 750; }
.ops-case-row b { color: var(--ui-danger); }
.ops-case-row .icon { flex: none; width: 13px; }
.ops-work-row { min-height: 45px; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 2px 9px; border-top: 1px solid var(--ui-line); }
.ops-work-row:first-of-type { border-top: 0; }
.ops-work-row__kind { grid-row: 1 / span 2; color: var(--ui-signal); font-size: .62rem; font-weight: 850; }
.ops-work-row strong { overflow: hidden; text-overflow: ellipsis; font-size: .74rem; white-space: nowrap; }
.ops-work-row small { color: var(--ui-dim); font-size: .62rem; }
.ops-fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
.ops-fact-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ops-fact { min-width: 0; min-height: 72px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 11px; border: 1px solid var(--ui-line); border-radius: 3px; background: var(--ui-paper-2); }
.ops-fact dt { overflow: hidden; color: var(--ui-dim); font-size: .65rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ops-fact dd { margin: 0; overflow-wrap: anywhere; font-size: 1rem; font-weight: 820; line-height: 1.1; }
.ops-inline-empty { margin: 0; padding: 13px 0 2px; color: var(--ui-dim); font-size: .74rem; line-height: 1.55; }
.ops-source-row { min-height: 52px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-top: 1px solid var(--ui-line); }
.ops-source-row:first-of-type { border-top: 0; }
.ops-source-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.ops-source-row strong, .ops-source-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-source-row strong { font-size: .74rem; }
.ops-source-row small, .ops-source-row em { color: var(--ui-dim); font-size: .62rem; font-style: normal; }
.ops-audit-row { min-height: 57px; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--ui-line); }
.ops-audit-row:first-of-type { border-top: 0; }
.ops-audit-row time { color: var(--ui-dim); font-size: .62rem; }
.ops-audit-row > div { min-width: 0; display: grid; gap: 2px; }
.ops-audit-row strong { overflow: hidden; text-overflow: ellipsis; font-size: .74rem; white-space: nowrap; }
.ops-audit-row small, .ops-audit-row p { margin: 0; color: var(--ui-dim); font-size: .62rem; line-height: 1.45; }
@media (max-width: 980px) {
  .ops-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-panel, .ops-panel--wide { grid-column: span 6; }
  .ops-attention-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .ops-console { padding-top: 8px; }
  .ops-console-head { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 18px; }
  .ops-workspace-link { width: 100%; min-width: 0; }
  .ops-snapshot { grid-template-columns: minmax(0, 1fr); }
  .ops-snapshot-card { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; padding: 14px 15px; }
  .ops-snapshot-card strong { grid-column: 2; grid-row: 1 / span 2; }
  .ops-snapshot-card small { grid-column: 1; }
  .ops-dashboard { grid-template-columns: minmax(0, 1fr); }
  .ops-panel, .ops-panel--wide { grid-column: 1; padding: 16px; }
  .ops-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-panel > header { align-items: flex-start; }
}
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.legal-copy { max-width: 720px; padding: 18px 0; margin: 0; color: var(--ui-dim); line-height: 1.8; }
.legal-facts { margin: 0; padding: 16px 0 8px 20px; }
.legal-facts li { padding: 5px 0; color: var(--ui-dim); line-height: 1.65; }

.global-footer { border-top: 1px solid var(--ui-line); background: var(--ui-footer-paper); }
.global-footer > div { min-height: 130px; display: grid; grid-template-columns: 1fr auto; align-content: center; align-items: center; gap: 8px 24px; }
.global-footer > div > span { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.global-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 14px; }
.global-footer nav a, .footer-language, .footer-app-install { min-height: 44px; display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--ui-dim); font-size: 11px; cursor: pointer; }
.global-footer nav a:hover, .footer-language:hover, .footer-app-install:hover { color: var(--ui-signal); }
.app-install-control[disabled] { cursor: default; opacity: .62; }
.global-footer p { grid-column: 1 / -1; margin: 0; color: var(--ui-dim); font-family: Consolas, monospace; font-size: 10px; }
.deletion-state { display: grid; gap: 6px; padding: 14px; border: 1px solid color-mix(in srgb, var(--ui-danger) 44%, var(--ui-line)); background: color-mix(in srgb, var(--ui-danger) 7%, var(--ui-paper)); }
.deletion-state small { color: var(--ui-dim); }
.deletion-state .quiet-button { justify-self: start; }
.mobile-nav { display: none; }

.toast-region { position: fixed; z-index: 200; right: max(22px, env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); width: min(360px, calc(100% - 44px)); pointer-events: none; }
.toast { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 32px; align-items: center; gap: 12px; min-height: 68px; padding: 11px 9px 11px 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ui-line-strong) 72%, transparent); border-radius: 17px; background: color-mix(in srgb, var(--ui-paper) 94%, transparent); color: var(--ui-ink); box-shadow: 0 18px 48px rgb(12 15 30 / .18), 0 3px 10px rgb(12 15 30 / .07); backdrop-filter: blur(18px) saturate(1.12); pointer-events: auto; animation: toast-arrive 240ms cubic-bezier(.16,1,.3,1) both; }
.toast::before { content: ""; position: absolute; inset: 10px auto 10px 0; width: 2px; border-radius: 0 2px 2px 0; background: var(--ui-signal); opacity: .82; }
.toast__symbol { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--ui-signal) 24%, var(--ui-line)); border-radius: 13px; background: color-mix(in srgb, var(--ui-signal) 10%, var(--ui-paper-2)); color: var(--ui-signal); font: 800 12px/1 var(--sans); letter-spacing: -.03em; }
.toast__copy { display: grid; min-width: 0; gap: 2px; }
.toast__eyebrow { color: var(--ui-signal); font-size: .58rem; font-weight: 800; line-height: 1.2; letter-spacing: .1em; }
.toast__message { min-width: 0; font-size: 13px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.toast__close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 10px; background: none; color: var(--ui-dim); box-shadow: none; font: 400 19px/1 var(--sans); cursor: pointer; }
.toast__close:hover { background: var(--ui-paper-2); color: var(--ui-ink); }
.toast__close:focus-visible { outline: 2px solid var(--ui-signal); outline-offset: -3px; }
.toast[data-toast-kind="dm"] .toast__symbol { border-color: color-mix(in srgb, var(--ui-accent) 32%, var(--ui-line)); background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-paper-2)); color: var(--ui-accent); font-size: 14px; }
.toast[data-toast-kind="dm"]::before { background: var(--ui-accent); }
@keyframes toast-arrive { from { opacity: 0; transform: translate3d(18px, 8px, 0) scale(.98); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.ui-app :focus-visible, .skip-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-signal) 72%, white); outline-offset: 2px; }
.ui-app .content:focus-visible { outline: 0; }

@media (max-width: 1120px) {
  .header-row { grid-template-columns: auto auto minmax(180px, 1fr) auto; gap: 14px; }
  .desktop-nav { display: none; }
  .menu-button { display: inline-grid; }
  .pack-browser, .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .pack-aside { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 760px) {
  :root { --ui-header: 58px; }
  body:has(.ui-app) { background: var(--ui-canvas); }
  .shell-width { width: min(100% - 28px, var(--shell)); }
  .header-row { min-height: 58px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px; }
  .global-brand { justify-self: start; }
  .global-brand span:last-child { font-size: 19px; }
  .header-search, .header-actions [data-theme] { display: none; }
  .header-actions { grid-column: 3; }
  .identity-button { width: 44px; min-width: 44px; padding: 0; }
  .identity-button > span:not(.profile-medallion) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-search { display: flex; width: calc(100% - 28px); margin-bottom: 10px; background: var(--ui-canvas); }
  .content { padding-block: 26px 104px; }
  .page-head { min-height: 100px; display: block; padding-bottom: 20px; }
  .page-head h1, .pack-identity h1, .post-detail h1 { font-size: 29px; }
  .page-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
  .page-actions > * { min-width: 0; justify-content: center; text-align: center; }
  .page-actions .solid-button { width: 100%; grid-column: 1 / -1; }
  .home-portal-grid, .home-discovery-grid, .hub-detail-grid, .picks-page-grid, .community-layout, .form-layout, .legal-grid { grid-template-columns: 1fr; gap: 12px; }
  .home-dock { margin-inline: -2px; padding: 14px; }
  .home-pack-pills { display: flex; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .home-pack-pill { min-width: 150px; }
  .home-main-feed, .home-source-rail { padding-inline: 14px; }
  .home-source-rail { position: static; }
  .home-discovery-grid { margin-top: 12px; }
  .home-signal-grid { grid-template-columns: 1fr; margin-inline: -14px; border-right: 0; border-left: 0; }
  .home-signal-grid .signal-section { padding: 22px 14px 14px; }
  .home-signal-grid .signal-section + .signal-section { border-top: 1px solid var(--ui-line-strong); border-left: 0; }
  .home-lower-grid { gap: 10px; }
  .ranking-rail { border-top: 1px solid var(--ui-line-strong); }
  .section-meta { display: none; }
  .ad-slot { grid-template-columns: 1fr; gap: 5px; }
  .browse-tools { display: block; padding: 14px 0; }
  .browse-tools form { width: 100%; }
  .filter-group { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .filter-button { flex: none; min-height: 44px; }
  .pack-browser, .hub-grid { grid-template-columns: 1fr; }
  .pack-browser { gap: 0; }
  .pack-identity { grid-template-columns: 1fr; gap: 13px; padding: 18px; }
  .pack-identity__actions { grid-column: 1 / -1; width: 100%; }
  .pack-identity__actions > * { flex: 1; justify-content: center; }
  .pack-glyph--large { width: 50px; height: 50px; }
  .pack-layout { display: flex; flex-direction: column; gap: 12px; }
  .pack-primary { order: -1; width: 100%; }
  .pack-channels, .pack-aside { width: 100%; display: block; position: static; }
  .hub-grid { border-left: 0; }
  .hub-card { min-height: 154px; border-left: 1px solid var(--ui-line); }
  .hub-card > a { min-height: 154px; }
  .community-layout > aside { order: 2; }
  .board-meta--full { display: none; }
  .board-meta--mobile { display: block; }
  .compose-form textarea { min-height: 220px; }
  .form-actions { flex-direction: column; }
  .form-actions > * { width: 100%; }
  .post-detail { padding-top: 28px; }
  .post-layout { grid-template-columns: 1fr; }
  .post-ad-rail, .ad-slot--secondary { display: none; }
  .post-body { min-height: 150px; }
  .comment--reply { margin-left: 22px; }
  .management-grid, .ops-grid { grid-template-columns: 1fr; gap: 0; }
  .governance-status dl, .manager-console-fields, .manager-console-form--inline, .manager-console-safety, .permission-grid, .tab-policy-form, .manager-exit-controls { grid-template-columns: 1fr; }
  .manager-staff-row { align-items: flex-start; }
  .manager-staff-row code { max-width: 50%; }
  .operator-action { grid-template-columns: 1fr; }
  .audit-row { grid-template-columns: 70px minmax(0, 1fr); }
  .audit-row span, .audit-row p { grid-column: 2; }
  .global-footer { display: block; margin-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .global-footer > div { min-height: 0; padding-block: 34px; grid-template-columns: 1fr; }
  .global-footer nav { justify-content: flex-start; gap: 0 12px; }
  .footer-app-install { display: none; }
  .global-footer p { grid-column: 1; }
  .mobile-nav { position: fixed; z-index: 60; right: 0; bottom: 0; left: 0; min-height: calc(64px + env(safe-area-inset-bottom)); padding: 4px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ui-line-strong); background: var(--ui-paper); }
  .mobile-nav__item { position: relative; min-width: 0; min-height: 56px; display: grid; place-items: center; color: var(--ui-dim); font-size: 10px; font-weight: 700; text-align: center; }
  .mobile-nav__item[aria-current="page"] { color: var(--ui-signal); }
  .mobile-nav__item[aria-current="page"]::before { content: ""; position: absolute; top: 3px; width: 18px; height: 2px; background: var(--ui-signal); }
  .toast-region { right: max(14px, env(safe-area-inset-right)); bottom: calc(82px + env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); width: auto; max-width: none; }
  .toast { grid-template-columns: 38px minmax(0, 1fr) 40px; min-height: 70px; padding-right: 5px; }
  .toast__close { width: 40px; height: 40px; }
  .inline-identity { grid-template-columns: 1fr; }
  .profile-menu__flyout { position: fixed; top: 54px; right: 14px; width: min(320px, calc(100vw - 28px)); }
  .profile-settings-preview { grid-template-columns: 78px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .profile-medallion--profile { width: 72px; height: 72px; }
  .profile-medallion--profile .profile-medallion__core { width: 58px; height: 58px; font-size: 22px; }
}

@media (max-width: 390px) {
  .shell-width { width: calc(100% - 24px); }
  .global-brand { gap: 7px; }
  .brandmark { width: 27px; height: 27px; }
  .header-actions .icon-button { width: 44px; min-width: 44px; }
  .page-head h1, .pack-identity h1, .post-detail h1 { font-size: 26px; }
  .pack-row { align-items: stretch; }
  .pack-row__main { grid-template-columns: minmax(0, 1fr); }
  .pack-row__main:has(.rank) { grid-template-columns: 34px minmax(0, 1fr); }
  .pack-row__main em { grid-column: 1; justify-self: start; }
  .pack-row__main:has(.rank) em { grid-column: 2; }
  .pack-row .quiet-button { align-self: center; padding-inline: 9px; }
  .post-row { grid-template-columns: 28px minmax(0, 1fr); }
  .post-row .pik-score { grid-column: 2; justify-self: start; margin-bottom: 8px; }
  .pick-row { grid-template-columns: minmax(0, 1fr); }
  .pick-row > .icon { display: none; }
  .official-row { grid-template-columns: 58px minmax(0, 1fr); }
  .profile-summary { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-app *, .ui-app *::before, .ui-app *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.moderation-image video {
  display: block;
  width: 100%;
  max-height: 68vh;
  background: #090d10;
  object-fit: contain;
}
.moderation-image figcaption {
  padding: 10px 14px;
  color: var(--ui-dim);
  font-size: .82rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1013;
    --surface: #15181d;
    --veil: #1b1f26;
    --edge: #262b33;
    --edge-strong: #39404b;
    --ink: #f1f2f5;
    --mute: #a7aebc;
    --faint: #949cab;

    --accent: #63d6be;
    --accent-hover: #7ee2cc;
    --accent-wash: #12201d;
    --on-accent: #06201b;

    --alert: #f1c177;
    --alert-wash: #2a2318;
    --danger: #f0a5a5;
    --danger-wash: #2c1b1b;

    --focus: #63d6be;

    /* 어두운 화면에서도 헤더는 본문보다 더 짙다. 경계가 사라지면 반전의 뜻이 없어진다. */
    --brandbar: #08241f;
    --brandbar-ink: #dceee9;
    --brandbar-mute: #8aa9a2;
    --brandbar-active: #63d6be;
    --brandbar-hover: rgb(255 255 255 / 0.08);
  }
}

/* PacPik Games uses the same light product shell as login and Pack pages. */
.games-experience {
  --games-ink: #1b1e24;
  --games-ink-2: #272b33;
  --games-paper: var(--ui-canvas);
  --games-panel: var(--ui-paper);
  --games-accent: #ef684b;
  --games-accent-strong: #b8432e;
  --games-mute: var(--ui-dim);
  --games-line: var(--ui-line-strong);
  color: var(--ui-ink);
}
.games-experience .games-local-header,
.games-discovery .games-local-header,
.games-registration .games-local-header {
  min-height: 58px;
  margin-top: 14px;
  padding: 0 16px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 11px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: 0 6px 20px rgb(24 30 39 / 4%);
  animation: none;
}
.games-experience .games-wordmark span,
.games-discovery .games-wordmark span,
.games-registration .games-wordmark span { color: var(--ui-dim); }
.games-experience .games-wordmark strong,
.games-discovery .games-wordmark strong,
.games-registration .games-wordmark strong { color: var(--ui-ink); }
.games-experience .games-local-header nav a,
.games-discovery .games-local-header nav a,
.games-registration .games-local-header nav a { color: var(--ui-dim); }
.games-experience .games-local-header nav a:hover,
.games-experience .games-local-header nav a[aria-current="page"],
.games-discovery .games-local-header nav a:hover,
.games-discovery .games-local-header nav a[aria-current="page"],
.games-registration .games-local-header nav a:hover,
.games-registration .games-local-header nav a[aria-current="page"] {
  border-bottom-color: var(--games-accent);
  color: var(--ui-ink);
}
.games-experience .games-local-apply,
.games-discovery .games-local-apply,
.games-registration .games-local-apply {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-paper);
  color: var(--ui-ink);
}
.games-experience .games-local-apply span,
.games-discovery .games-local-apply span,
.games-registration .games-local-apply span { color: var(--games-accent-strong); }
.games-experience .games-local-apply:hover,
.games-discovery .games-local-apply:hover,
.games-registration .games-local-apply:hover {
  border-color: var(--ui-ink);
  background: var(--ui-paper-2);
}

.games-pack-experience .game-pack { gap: 18px; padding-top: 16px; }
.games-pack-experience .game-pack-hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  gap: 14px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: 14px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: 0 12px 34px rgb(24 30 39 / 6%);
}
.games-pack-experience .game-pack-hero__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: #0e1015;
}
.games-pack-experience .game-pack-hero__copy {
  display: grid;
  align-content: center;
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-paper-2);
  color: var(--ui-ink);
}
.games-pack-experience .game-pack-hero__copy .eyebrow { color: var(--games-accent-strong); }
.games-pack-experience .game-pack-hero h1 {
  margin: 7px 0 10px;
  overflow: visible;
  color: var(--ui-ink);
  font-size: clamp(1.85rem, 2.7vw, 3.15rem);
  line-height: 1.06;
  text-overflow: clip;
  white-space: normal;
}
.games-pack-experience .game-pack-hero__desc { color: var(--ui-dim); font-size: .82rem; line-height: 1.65; }
.games-pack-experience .game-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 20px 0;
  padding: 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 0;
}
.games-pack-experience .game-facts div,
.games-pack-experience .game-facts div:nth-child(odd) {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
}
.games-pack-experience .game-facts dt { color: var(--ui-dim); font-size: .64rem; letter-spacing: .02em; }
.games-pack-experience .game-facts dd { color: var(--ui-ink); font-size: .78rem; }
.games-pack-experience .game-pack-actions { gap: 6px; }
.games-pack-experience .game-pack-actions .button,
.games-pack-experience .game-pack-actions .games-button,
.games-pack-experience .game-pack-actions .button-secondary,
.games-pack-experience .game-pack-actions .button-quiet {
  width: max-content;
  min-width: 0;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: none;
}
.games-pack-experience .game-pack-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.games-pack-experience .game-pack-actions .game-pack-actions__primary {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  border-color: var(--ui-ink);
  background: var(--ui-ink);
  color: var(--ui-paper);
  font-size: .76rem;
  font-weight: 900;
}
.games-pack-experience .game-pack-actions__secondary {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, .72fr));
  gap: 7px;
}
.games-pack-experience .game-pack-actions__secondary .button,
.games-pack-experience .game-pack-actions__secondary .button-secondary,
.games-pack-experience .game-pack-actions__secondary .button-quiet {
  width: 100%;
  justify-content: center;
}
.games-pack-experience .game-pack-actions__secondary .button-quiet { color: var(--ui-dim); }
.games-pack-experience .game-pack-actions .games-button { border-color: var(--ui-ink); }
.games-pack-experience .game-pack-actions [data-game-pik][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--games-accent) 58%, var(--ui-line));
  background: color-mix(in srgb, var(--games-accent) 9%, var(--ui-paper));
  color: var(--games-accent-strong);
}
.games-pack-experience .game-pack-actions .button:hover,
.games-pack-experience .game-pack-actions .games-button:hover,
.games-pack-experience .game-pack-actions .button-secondary:hover,
.games-pack-experience .game-pack-actions .button-quiet:hover {
  border-color: var(--ui-ink);
  background: var(--ui-paper-2);
  color: var(--ui-ink);
}

@media (max-width: 900px) {
  .games-pack-experience .game-pack-hero { grid-template-columns: minmax(0, 1fr); }
  .games-pack-experience .game-pack-hero__copy { border: 1px solid var(--ui-line); }
}
@media (max-width: 760px) {
  .games-experience .games-local-header,
  .games-discovery .games-local-header,
  .games-registration .games-local-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
  }
  .games-experience .games-local-header nav,
  .games-discovery .games-local-header nav,
  .games-registration .games-local-header nav {
    grid-column: 1 / -1;
    order: 3;
    overflow-x: auto;
    border-top: 1px solid var(--ui-line);
  }
  .games-experience .games-local-header nav a,
  .games-discovery .games-local-header nav a,
  .games-registration .games-local-header nav a { flex: 1 0 auto; padding-inline: 10px; color: var(--ui-dim); }
  .games-pack-experience .game-pack-hero { margin-inline: 0; padding: 8px; border-radius: 11px; }
  .games-pack-experience .game-pack-hero__copy { padding: 18px; }
  .games-pack-experience .game-pack-hero h1 { font-size: clamp(1.9rem, 9vw, 2.55rem); }
  .games-pack-experience .game-facts { grid-template-columns: minmax(0, 1fr); }
  .games-pack-experience .game-pack-actions__secondary { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(58px, .72fr)); }
}

/* Final composer precedence: this block must stay after legacy community rules. */
.post-reading-main .comment-composer,
.comment-reply-slot .comment-composer {
  display: grid;
  grid-template-columns: minmax(270px, 360px) minmax(0, 1fr);
  align-items: end;
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 18%, var(--ui-line));
  border-radius: 12px;
  background: var(--ui-paper);
}
.comment-composer__head { grid-column: 1 / -1; }
.comment-compose-stack { min-width: 0; display: grid; gap: 7px; }
.comment-compose-bar {
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px 40px;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 13px;
  background: var(--ui-paper-2);
}
.comment-compose-field { min-width: 0; }
.comment-compose-field .rich-source { display: none; }
.comment-compose-field .rich-editor,
.comment-compose-field textarea {
  width: 100%;
  min-height: 38px;
  max-height: 150px;
  margin: 0;
  padding: 8px 4px;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.45;
  outline: 0;
  resize: none;
}
.comment-compose-field .rich-editor[data-empty="true"]::before { top: 8px; inset-inline-start: 4px; }
.comment-compose-more,
.comment-compose-emote,
.comment-compose-send {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 10px;
}
.comment-compose-tools[hidden],
.comment-composer .emote-picker-slot[hidden] { display: none; }
.comment-compose-tools {
  padding: 5px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-paper-2);
}
.comment-compose-tools .editor-toolbar--compact { padding: 0; }
.comment-composer .guest-credentials--compact {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(92px, .7fr) minmax(168px, 1.3fr);
  align-items: end;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}
.comment-composer .guest-credentials--compact legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.comment-composer .guest-credentials--compact label { min-width: 0; display: grid; gap: 3px; }
.comment-composer .guest-credentials--compact .guest-credentials__label { color: var(--ui-dim); font-size: .62rem; font-weight: 750; }
.comment-composer .guest-credentials--compact input {
  min-width: 0;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-paper-2);
}
.comment-composer .guest-credentials--compact .password-line {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 3px;
}
.comment-composer .guest-credentials--compact .password-line .text-button {
  min-width: 0;
  min-height: 38px;
  padding: 0 7px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-paper);
  font-size: .62rem;
}

@media (max-width: 700px) {
  .post-reading-main .comment-composer,
  .comment-reply-slot .comment-composer {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
  }
  .comment-composer .guest-credentials--compact {
    grid-template-columns: minmax(88px, .72fr) minmax(170px, 1.28fr);
    gap: 5px;
  }
  .comment-composer .guest-credentials--compact .guest-credentials__label { display: none; }
  .comment-composer .guest-credentials--compact input,
  .comment-composer .guest-credentials--compact .password-line .text-button { min-height: 34px; }
  .comment-compose-bar {
    min-height: 48px;
    grid-template-columns: 34px minmax(0, 1fr) 34px 38px;
    gap: 4px;
    padding: 5px;
    border-radius: 12px;
  }
  .comment-compose-more,
  .comment-compose-emote,
  .comment-compose-send { border-radius: 9px; }
}
.post-thread-foot {
  margin-top: -4px;
  padding: 0 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-paper);
}
.post-thread-foot .post-foot-nav { border-top: 0; }

/* The ad precedes the whole post; title and article copy stay uninterrupted. */
.post-reading-main > .ad-slot--post-meta {
  margin: 0;
  border-radius: 10px;
}

/* Compact post heading: hierarchy without a second hero-sized billboard. */
.post-reading-main .post-detail__head {
  padding: clamp(18px, 2.2vw, 26px);
}
.post-reading-main .post-detail__head .entity-eyebrow {
  min-height: 28px;
  margin-bottom: 8px;
}
.post-reading-main .post-detail__head h1 {
  max-width: 36ch;
  margin-bottom: 11px;
  font-size: clamp(1.55rem, 2.15vw, 2.05rem);
  font-weight: 680;
  line-height: 1.24;
  letter-spacing: -.035em;
}
@media (max-width: 700px) {
  .post-reading-main .post-detail__head { padding: 17px 15px; }
  .post-reading-main .post-detail__head h1 { font-size: 1.38rem; }
}

/* Compact community composer: identity / + / message / emote / send. */
.post-reading-main .comment-composer,
.comment-reply-slot .comment-composer {
  display: grid;
  grid-template-columns: minmax(270px, 360px) minmax(0, 1fr);
  align-items: end;
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 18%, var(--ui-line));
  border-radius: 12px;
  background: var(--ui-paper);
}
.comment-composer__head { grid-column: 1 / -1; }
.comment-compose-stack { min-width: 0; display: grid; gap: 7px; }
.comment-compose-bar {
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px 40px;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 13px;
  background: var(--ui-paper-2);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.comment-compose-bar:focus-within {
  border-color: color-mix(in srgb, var(--ui-info) 52%, var(--ui-line));
  background: var(--ui-paper);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-info) 10%, transparent);
}
.comment-compose-field { min-width: 0; }
.comment-compose-field .rich-source { display: none; }
.comment-compose-field .rich-editor,
.comment-compose-field textarea {
  width: 100%;
  min-height: 38px;
  max-height: 150px;
  margin: 0;
  padding: 8px 4px;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-ink);
  line-height: 1.45;
  outline: 0;
  resize: none;
}
.comment-compose-field .rich-editor[data-empty="true"]::before { top: 8px; inset-inline-start: 4px; color: var(--ui-dim); }
.comment-compose-more,
.comment-compose-emote,
.comment-compose-send {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 20%, var(--ui-line));
  border-radius: 10px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  cursor: pointer;
  transition: transform 180ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.comment-compose-more:hover,
.comment-compose-emote:hover { border-color: var(--ui-ink); background: var(--ui-paper-2); }
.comment-compose-more .icon { width: 18px; transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.comment-compose-more[aria-expanded="true"] .icon { transform: rotate(45deg); }
.comment-compose-emote { font-size: 1.35rem; line-height: 1; }
.comment-compose-emote[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--ui-info) 55%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-info) 8%, var(--ui-paper));
  color: var(--ui-info);
  transform: translateY(-1px);
}
.comment-compose-send {
  border-color: color-mix(in srgb, var(--ui-info) 70%, var(--ui-line));
  background: var(--ui-info);
  color: #fff;
}
.comment-compose-send:hover { transform: translateX(1px); filter: brightness(1.04); }
.comment-compose-send .icon { width: 18px; }
.comment-compose-tools,
.comment-composer .emote-picker-slot:not([hidden]) {
  min-width: 0;
  animation: comment-panel-in 180ms cubic-bezier(.2,.8,.2,1) both;
  transform-origin: top right;
}
.comment-compose-tools[hidden],
.comment-composer .emote-picker-slot[hidden] { display: none; }
.comment-compose-tools {
  padding: 5px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-paper-2);
}
.comment-compose-tools .editor-toolbar--compact { padding: 0; }
.comment-compose-tools .editor-toolbar--compact button {
  min-height: 32px;
  border: 1px solid var(--ui-line);
  background: var(--ui-paper);
}
.comment-composer .guest-credentials--compact {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(92px, .7fr) minmax(168px, 1.3fr);
  align-items: end;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}
.comment-composer .guest-credentials--compact legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.comment-composer .guest-credentials--compact label { min-width: 0; display: grid; gap: 3px; }
.comment-composer .guest-credentials--compact .guest-credentials__label { color: var(--ui-dim); font-size: .62rem; font-weight: 750; }
.comment-composer .guest-credentials--compact input {
  min-width: 0;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-paper-2);
}
.comment-composer .guest-credentials--compact .password-line {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 3px;
}
.comment-composer .guest-credentials--compact .password-line .text-button {
  min-width: 0;
  min-height: 38px;
  padding: 0 7px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-paper);
  font-size: .62rem;
}
.comment-composer > .composer-identity { align-self: center; }
@keyframes comment-panel-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px) {
  .post-reading-main .comment-composer,
  .comment-reply-slot .comment-composer {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
  }
  .comment-composer .guest-credentials--compact {
    grid-template-columns: minmax(88px, .72fr) minmax(170px, 1.28fr);
    gap: 5px;
  }
  .comment-composer .guest-credentials--compact .guest-credentials__label { display: none; }
  .comment-composer .guest-credentials--compact input,
  .comment-composer .guest-credentials--compact .password-line .text-button { min-height: 34px; }
  .comment-compose-bar {
    min-height: 48px;
    grid-template-columns: 34px minmax(0, 1fr) 34px 38px;
    gap: 4px;
    padding: 5px;
    border-radius: 12px;
  }
  .comment-compose-more,
  .comment-compose-emote,
  .comment-compose-send { border-radius: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .comment-compose-more,
  .comment-compose-more .icon,
  .comment-compose-emote,
  .comment-compose-send,
  .comment-compose-tools,
  .comment-composer .emote-picker-slot:not([hidden]) {
    animation: none;
    transition: none;
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --paper: #fcfcfd; --surface: #ffffff; --veil: #f1f3f7; --edge: #e4e7ee; --edge-strong: #cfd4de;
  --ink: #14161c; --mute: #565d6e; --faint: #666d7e;
  --accent: #0b6b5b; --accent-hover: #095548; --accent-wash: #e6f2ef; --on-accent: #ffffff;
  --alert: #8a4b00; --alert-wash: #fbf0e0; --danger: #9c1f1f; --danger-wash: #fbeaea;
  --focus: #0b6b5b;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e1013; --surface: #15181d; --veil: #1b1f26; --edge: #262b33; --edge-strong: #39404b;
  --ink: #f1f2f5; --mute: #a7aebc; --faint: #949cab;
  --accent: #63d6be; --accent-hover: #7ee2cc; --accent-wash: #12201d; --on-accent: #06201b;
  --alert: #f1c177; --alert-wash: #2a2318; --danger: #f0a5a5; --danger-wash: #2c1b1b;
  --focus: #63d6be;
}

/* ========================= base ========================= */
*, *::before, *::after { box-sizing: border-box; }

/* 작성자 CSS 의 display 선언은 브라우저 기본 [hidden] 규칙을 덮어쓴다.
   이 가드가 없으면 hidden 을 걸어도 계속 그려진다. 전역으로 한 번만 고정한다. */
[hidden] { display: none !important; }
html { background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, p, dl, dd, ul { margin: 0; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: 3px; }

/* 그리지 않은 브라우저 표면도 팔레트를 따르게 한다. */
::selection { background: var(--accent-wash); color: var(--ink); }
input, select, textarea { caret-color: var(--accent); }
html { scrollbar-color: var(--edge-strong) transparent; scrollbar-width: thin; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }

.skiplink {
  position: absolute; left: var(--s3); top: -100px; z-index: 60;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 4px 16px rgb(0 0 0 / 0.14); text-decoration: none;
}
.skiplink:focus { top: var(--s3); }

/* 눈에는 안 보이지만 스크린리더는 읽는다. display:none 은 읽지도 않으므로 쓰지 않는다. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.app { display: flex; flex-direction: column; min-height: 100vh; }

/* ========================= top bar ========================= */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--brandbar); color: var(--brandbar-ink);
}
.topbar__inner {
  display: flex; align-items: center; gap: var(--s2);
  width: min(var(--shell), 100%);
  margin-inline: auto;
  min-height: 56px;
  padding: var(--s2) var(--s4);
  padding-top: calc(var(--s2) + env(safe-area-inset-top));
}
@media (min-width: 900px) { .topbar__inner { gap: var(--s3); padding-inline: var(--s5); } }

/* 아이콘 버튼. 헤더의 좌우 끝을 맡는다. */
.iconbtn {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 0; border-radius: var(--r-md); background: none; color: inherit;
  cursor: pointer;
}
.iconbtn:hover { background: var(--brandbar-hover); }
.topbar :focus-visible { outline-color: var(--brandbar-active); }
.iconbtn__dot {
  position: absolute; margin: -14px 0 0 14px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* 모바일에서 브랜드는 가운데 선다. 좌우 아이콘이 같은 폭이라 광학적으로도 가운데다. */
.topbar__end { display: flex; align-items: center; gap: var(--s1); margin-inline-start: auto; }

/* 전역 검색은 헤더 바로 아래 전체 폭이다. 데스크톱에서는 헤더 안으로 들어간다. */
/* 검색줄도 브랜드 영역이다. 안의 입력만 밝은 표면으로 둔다. */
.topsearchbar { background: var(--brandbar); }
.topsearchbar__inner {
  width: min(var(--shell), 100%); margin-inline: auto; padding: var(--s2) var(--s4) var(--s3);
}
@media (min-width: 900px) { .topsearchbar { display: none; } }

/* ---- 서랍과 메뉴 ---- */
.scrim { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 0.32); }
.drawer {
  position: fixed; z-index: 50; inset: 0 auto 0 0; width: min(320px, 86vw);
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4) var(--s3) var(--s8);
  background: var(--paper); border-inline-end: 1px solid var(--edge);
  overflow-y: auto;
}
.drawer--end { inset: 0 0 0 auto; border-inline: 1px solid var(--edge) none; }
.drawer__head { display: flex; align-items: center; gap: var(--s2); padding-inline: var(--s2); min-height: 40px; }
.drawer__title { font-size: var(--t-sm); font-weight: 700; color: var(--mute); }
.drawer__close { margin-inline-start: auto; }
.drawer__sep { margin: var(--s2) var(--s2); border: 0; border-top: 1px solid var(--edge); }

.menu { display: grid; margin: 0; padding: 0; list-style: none; }
.menu__item {
  display: flex; align-items: center; gap: var(--s2);
  line-height: 1;
  width: 100%; min-height: 44px; padding: 0 var(--s2);
  border: 0; background: none; color: var(--ink); text-decoration: none;
  font: inherit; font-size: var(--t-md); font-weight: 600; text-align: start; cursor: pointer;
}
.menu__item:hover { background: var(--veil); }
.menu__item[aria-current="page"] { color: var(--accent); }
/* 아직 만들지 않은 목적지. 누를 수 없다는 것이 보여야 한다. */
.menu__item[aria-disabled="true"] { color: var(--faint); cursor: default; font-weight: 500; }
.menu__item[aria-disabled="true"]:hover { background: none; }
.menu__soon { margin-inline-start: auto; font-size: var(--t-xs); font-weight: 600; color: var(--faint); }

/* 데스크톱 주요 내비. 법적 고지는 여기 없다 — 푸터로 간다. */
.topnav { display: none; align-items: center; gap: 2px; margin-inline-start: var(--s3); }
@media (min-width: 900px) { .topnav { display: flex; } }
/*
  내비 항목은 button · a · span 세 가지 요소로 온다(준비 중 항목이 span 이다).
  요소마다 기본 박스가 달라서, 높이만 주면 button 만 글자가 가운데로 가고
  span 은 위로 붙는다. 세 가지가 같은 상자가 되도록 여기서 못박는다.
*/
.topnav__item {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 var(--s3); margin: 0;
  border: 0; background: none; color: var(--brandbar-mute); text-decoration: none;
  font: inherit; font-size: var(--t-sm); font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
}
.topnav__item:hover { color: var(--brandbar-ink); }
.topnav__item[aria-current="page"] { color: var(--brandbar-active); }
.topnav__item[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 3px;
  height: 2px; background: var(--brandbar-active);
}
.topnav__item[aria-disabled="true"] { color: rgb(255 255 255 / 0.32); cursor: default; }
.topnav__item[aria-disabled="true"]:hover { color: rgb(255 255 255 / 0.32); }

/* staging 표시는 보조다. 주요 내비에 끼지 않는다. */
.chip--demo { background: rgb(255 255 255 / 0.14); color: var(--brandbar-ink); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); color: inherit; text-decoration: none; }
/*
  브랜드: 심볼 + 워드마크.

  심볼은 assets/brand/mark.svg 와 같은 기하이고 currentColor 를 따라간다.
  favicon·앱 아이콘·공유 이미지가 전부 같은 형태를 재사용한다.

  Pac 과 Pik 을 두 색으로 쪼개지 않는다. 심볼이 강조색을 갖고 워드마크는 본문색이라
  둘이 합쳐 하나의 표식으로 읽힌다. 네온·글로우·그라디언트를 쓰지 않는다.
*/
.brand__mark {
  display: block; flex: none;
  width: 20px; height: 20px;
  color: var(--ink);
}
.brand__mark svg { display: block; width: 100%; height: 100%; }
.brand__name {
  font-size: var(--t-md); font-weight: 700;
  letter-spacing: -0.025em;
  /* 워드마크는 줄바꿈되지 않는다. 좁은 화면에서 두 줄로 접히면 표식이 아니라 문장이 된다. */
  white-space: nowrap;
}

@media (min-width: 768px) {
  .brand__mark { width: 22px; height: 22px; }
}

.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s2);
  border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}

/* ========================= shell ========================= */
.main {
  flex: 1;
  width: min(var(--shell), 100%);
  margin-inline: auto;
  padding: var(--s3) var(--s5) var(--s10);
}
.main:focus { outline: none; }
.view { display: block; }
.view[hidden] { display: none; }
.static-document { display: grid; gap: var(--s6); }

/* ========================= lead ========================= */
.headline {
  font-size: var(--t-hero); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em;
  text-wrap: balance;
}
.headline--sm { font-size: clamp(1.375rem, 2.2vw, 1.875rem); }
/* 0건일 때는 헤드라인이 화면을 차지하지 않게 한 단계 내린다. */
.lead[data-due="none"] .headline { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.headline__count { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--accent); }
.lede { margin-top: var(--s3); max-width: 68ch; color: var(--mute); font-size: var(--t-sm); }
.leadmeta { margin-top: var(--s2); color: var(--faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.lead { padding-block: var(--s5) var(--s5); }
.nextup { margin-bottom: var(--s6); }
.nextup__title { margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--edge); }

/* ========================= split ========================= */
.split { display: grid; gap: var(--s8); }
.split__main { min-width: 0; }
.split__aside { min-width: 0; }

@media (min-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s16); align-items: start; }
  .split__aside { position: sticky; top: 84px; }
}

/* ========================= section head ========================= */
.sectionhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--edge);
}
.sectiontitle { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em; }
.tally { color: var(--faint); font-family: var(--mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

/* ========================= entries =========================
   카드가 아니라 행이다. 왼쪽 고정폭 시간축이 목록 전체를 관통한다. */
.stream { display: block; }
.entry {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--edge);
}
.entry:hover { background: var(--veil); }

/* 시간축. 목록 전체가 한 열로 정렬돼 세로 스캔이 된다. */
.entry__axis {
  position: relative;
  padding-left: var(--s3);
  font-family: var(--mono); font-variant-numeric: tabular-nums; line-height: 1.2;
}
/* 절제된 상태 모티프: 채움=오늘, 링=임박, 작은 점=이후. 자산 없이 그린다. */
.entry__dot {
  position: absolute; left: 0; top: 5px;
  width: 7px; height: 7px; border-radius: var(--r-pill);
  border: 1.5px solid var(--edge-strong);
}
.entry__dot[data-level="now"] { border-color: var(--alert); background: var(--alert); }
.entry__dot[data-level="soon"] { border-color: var(--accent); }
.entry__dot[data-level="later"] { width: 5px; height: 5px; top: 6px; left: 1px; background: var(--edge-strong); }
.entry__dot[data-level="past"] { border-style: dotted; }

.entry__date { display: block; font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.02em; }
.entry__time { display: block; color: var(--faint); font-size: var(--t-xs); }
.entry__body { min-width: 0; }
.entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.entry__pack { color: var(--mute); font-size: var(--t-xs); font-weight: 600; }
.entry__title { margin-top: 1px; font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
.entry__when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s1); }
.entry__action { margin-top: var(--s1); color: var(--mute); font-size: var(--t-sm); }
.entry__verified { color: var(--faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

/* 컴팩트 배지. 카드가 아니라 한 줄 안의 작은 표식이다. */
.tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  height: 20px; padding: 0 var(--s2);
  border: 1px solid var(--edge); border-radius: var(--r-sm);
  color: var(--mute); font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.tag--now { border-color: transparent; background: var(--alert-wash); color: var(--alert); }
.tag--soon { border-color: var(--accent); color: var(--accent); }
.tag--later, .tag--past { color: var(--faint); }
.entry__deadline { color: var(--mute); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

/* 남은 시간은 색만으로 판단하지 않도록 표식과 문구를 함께 둔다. */
.remain__mark { display: inline-flex; }

/* 시그니처: 이벤트 창이 얼마나 지났는지 보여주는 헤어라인. 시작·종료가 모두 있을 때만 나온다. */
/* 이벤트 창의 경과. 구분선으로 오해되지 않게 짧은 미터로 둔다. */
.entry__bar { display: block; width: 88px; height: 3px; margin-top: var(--s2); border-radius: 2px; background: var(--edge); }
.entry__bar > span { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .3s ease; }
.entry--now .entry__bar > span { background: var(--alert); }
.entry--past { opacity: .62; }

.entry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: var(--s1); margin-inline-start: calc(var(--s3) * -1); }

.group { margin-bottom: var(--s5); }
.group__head {
  display: flex; align-items: baseline; gap: var(--s2);
  margin-bottom: var(--s1); padding-top: var(--s3);
  font-size: var(--t-xs); font-weight: 700; color: var(--mute);
}
.group__tally { color: var(--faint); font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; }

/* ========================= status ========================= */
/* 세 상태는 배타적이다. data-state 가 하나만 켠다. */
#todaySkeleton, #todayError { display: none; }
.app[data-state="loading"] #todaySkeleton { display: grid; }
.app[data-state="loading"] #todayGroups,
.app[data-state="loading"] #todayEmpty,
.app[data-state="loading"] #nextBlock { display: none; }
.app[data-state="error"] #todayError { display: flex; }
.app[data-state="error"] #todayGroups,
.app[data-state="error"] #todayEmpty,
.app[data-state="error"] #nextBlock { display: none; }

.skeleton { gap: var(--s3); padding-block: var(--s3); }
.skeleton span { display: block; height: 56px; border-radius: var(--r-md); background: var(--veil); animation: breathe 1.6s ease-in-out infinite; }
.skeleton span:nth-child(2) { animation-delay: .15s; }
.skeleton span:nth-child(3) { animation-delay: .3s; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* 실패는 커다란 경고 카드가 아니라 해당 영역 안의 한 줄이다. */
.inlinefail {
  align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) 0;
  color: var(--danger); font-size: var(--t-sm);
}
.quietnote { padding-block: var(--s5); color: var(--mute); font-size: var(--t-sm); }
.emptyaction { display: grid; justify-items: start; gap: var(--s4); padding-block: var(--s5); }
.emptyaction p { max-width: 52ch; color: var(--mute); font-size: var(--t-sm); }
.quietnote--tight { padding-block: var(--s2); }

/* ========================= buttons ========================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s4);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--accent-hover); }
.btn--sm { padding: 0 var(--s3); font-size: var(--t-xs); }
.btn--ghost { border-color: var(--edge-strong); background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--veil); }
.btn--ghost[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.btn--text { padding: 0 var(--s3); background: none; color: var(--mute); font-weight: 600; }
.btn--text:hover { background: var(--veil); color: var(--ink); }
/* 각 행의 지배적 액션. 나머지는 조용한 보조 액션으로 둔다. */
.btn--lead { border-color: var(--edge-strong); background: transparent; color: var(--accent); }
.btn--lead:hover { border-color: var(--accent); background: var(--accent-wash); }
.btn--on { border-color: var(--accent); background: var(--accent-wash); }
.btn--danger { color: var(--danger); }
.btn--danger:hover { background: var(--danger-wash); }
.btn:disabled, .btn[aria-disabled="true"] {
  border-color: var(--edge); background: transparent; color: var(--faint);
  cursor: not-allowed; text-decoration: line-through;
}

/* ========================= chips / controls ========================= */
.chiprow { display: flex; flex-wrap: wrap; gap: var(--s2); }
.packchip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s4);
  border: 1px solid var(--edge-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
 text-decoration: none; }
.packchip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); font-weight: 700; }
.packchip svg { flex: none; }
.packchip__tally { color: var(--faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; font-weight: 500; }

.controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s4); margin-bottom: var(--s8); }
.field { display: grid; gap: var(--s1); min-width: 180px; }
.field--grow { flex: 1 1 320px; }
.field__label { color: var(--faint); font-size: var(--t-xs); font-weight: 600; }
.field input, .field select {
  width: 100%; min-height: var(--tap); padding: 0 var(--s3);
  border: 1px solid var(--edge-strong); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--t-md);
}
.switch { display: inline-flex; align-items: center; gap: var(--s3); min-height: var(--tap); cursor: pointer; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch__track {
  position: relative; flex: none; width: 42px; height: 24px;
  border: 1px solid var(--edge-strong); border-radius: var(--r-pill); background: var(--veil);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .2);
  transition: transform .15s ease;
}
.switch input:checked + .switch__track { border-color: var(--accent); background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch__label { font-size: var(--t-sm); font-weight: 600; }

.segmented { display: inline-flex; gap: var(--s1); padding: var(--s1); border: 1px solid var(--edge); border-radius: var(--r-md); }
.segmented button {
  min-height: var(--tap); padding: 0 var(--s4);
  border: 0; border-radius: var(--r-sm); background: none;
  font-size: var(--t-sm); font-weight: 600; cursor: pointer;
}
.segmented button[aria-checked="true"] { background: var(--accent-wash); color: var(--accent); }

/* ========================= 탐색과 지면 =========================

   기준은 docs/VISUAL_LANGUAGE.md 다. 요약하면:

     구분은 대상이 만든다 — 셀의 장식이 아니라 팩의 표지가 팩을 구분한다.
     상자 대신 결 — 테두리와 그림자 대신 헤어라인과 여백으로 나눈다.
     상태는 조용하다 — dataStatus 는 배지로 키우지 않는다.

   색깔 이니셜 아바타, 알약 남발, 게임 런처풍 표면은 쓰지 않는다.
   ============================================================= */

/* ---- 검색 ---- */

/* 헤더 안의 검색은 데스크톱 전용이다. 좁은 화면에서는 헤더 아래 줄이 그 일을 한다. */
.topsearch { display: none; }
@media (min-width: 900px) {
  .topsearch { display: block; flex: 1 1 auto; max-width: 360px; margin-inline-start: var(--s3); }
}
.searchfield { position: relative; display: block; }
.searchfield__icon {
  position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%);
  color: var(--faint); pointer-events: none;
}
.searchfield input {
  width: 100%; min-height: 38px;
  padding: 0 var(--s10) 0 calc(var(--s4) + 26px);
  border: 1px solid var(--edge); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-sm);
}
/* 브랜드 영역 안에서는 테두리 대신 밝은 표면 자체가 입력을 알린다. */
.topbar .searchfield input,
.topsearchbar .searchfield input { border-color: transparent; }
.topbar .searchfield__icon,
.topsearchbar .searchfield__icon { color: var(--mute); }
.searchfield input::placeholder { color: var(--faint); }
.searchfield input:hover { border-color: var(--edge-strong); }
.searchfield input:focus-visible { outline: none; border-color: var(--ink); }
.searchfield input[type="search"]::-webkit-search-decoration,
.searchfield input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.searchfield__clear {
  position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--mute);
  font-size: var(--t-xs); cursor: pointer;
}
.searchfield__clear:hover { color: var(--ink); }
.searchfield__suggest {
  position: absolute; z-index: 40; inset: calc(100% + var(--s2)) 0 auto 0;
  padding: var(--s2); border: 1px solid var(--edge); border-radius: var(--r-lg);
  background: var(--surface);
}

.browse { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0 var(--s6); }

.filterbtn {
  flex: none; display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 46px; padding: 0 var(--s2);
  border: 0; background: none; color: var(--mute);
  font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  text-underline-offset: 4px;
}
.filterbtn:hover { color: var(--ink); text-decoration: underline; }
.filterbtn[aria-expanded="true"] { color: var(--ink); text-decoration: underline; }
.filterbtn__tally { color: var(--accent); font-variant-numeric: tabular-nums; }

/*
  좁히기는 콘텐츠보다 커지면 안 된다. 큰 사각 버튼이 줄줄이 서면 화면을 먹는다.
  한 줄짜리 세그먼트로 두고, 좁으면 옆으로 굴린다.
*/
.filterpop {
  display: flex; align-items: center; gap: var(--s1);
  padding: var(--s2) 0; margin: calc(var(--s5) * -1) 0 var(--s5);
  border-block: 1px solid var(--edge);
  overflow-x: auto; scrollbar-width: none;
}
.filterpop::-webkit-scrollbar { display: none; }
.filterchip {
  flex: none; min-height: 26px; padding: 0 var(--s2);
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--mute);
  font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.filterchip:hover { background: var(--veil); color: var(--ink); }
.filterchip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* 팔로우 중은 종류와 다른 축이라 얇은 칸막이로 떼어 둔다. */
.filterchip--sep { margin-inline-start: var(--s2); padding-inline-start: var(--s3); border-inline-start: 1px solid var(--edge); border-radius: 0; }
.filterchip--sep[aria-pressed="true"] { border-radius: var(--r-sm); }

/* ---- 빠른 진입 ----

   검색 바로 아래. 지금 무엇이 도는지 한 눈에 주고, 자리를 많이 먹지 않는다.
   순위와 대표 공간은 다른 개념이라 블록을 나눈다.
*/
.quick { display: grid; gap: var(--s5); margin-bottom: var(--s6); }
@media (min-width: 860px) { .quick { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: var(--s8); } }

/*
  좁은 화면에서 빠른 진입이 목록을 밀어내면 안 된다.
  순위는 접어 세 줄까지만 두고, 대표 HubPack 은 한 줄로 굴린다 —
  첫 화면에서 실제 Pack 이 몇 개 보이는지가 이 화면의 값이다.
*/
@media (max-width: 560px) {
  .quick { gap: var(--s3); margin-bottom: var(--s4); }
  .ranklist { padding: var(--s1) var(--s3); }
  .rank { min-height: 26px; }
  .rank:nth-child(n+4) { display: none; }
  .quick__note { display: none; }
  .quick .hubstrip li { min-height: 32px; }
}

.quick__block { display: grid; gap: var(--s2); align-content: start; }
.quick__title { font-size: var(--t-xs); font-weight: 700; color: var(--mute); letter-spacing: 0.02em; }
.quick__note { margin: 0; color: var(--faint); font-size: var(--t-xs); }

.ranklist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6);
  margin: 0; padding: 0; list-style: none;
  background: var(--veil); border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
}
@media (max-width: 560px) { .ranklist { grid-template-columns: minmax(0, 1fr); } }
.rank { display: flex; align-items: center; gap: var(--s2); min-height: 28px; font-size: var(--t-sm); }
.rank__no { flex: none; width: 14px; color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.rank__name { color: var(--ink); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.rank__meta { margin-inline-start: auto; flex: none; color: var(--faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

/*
  대표 HubPack. Pack 목록과 섞지 않는다 — 하나는 Pack 하나하나, 하나는 그 Pack 들을 묶는 공간이다.

  한 줄에 이어 붙이면 "라이엇 게임즈 묶인 팩 2개 넥슨 묶인 팩 3개…" 라는 글자 덩어리가 된다.
  각 묶음이 자기 줄을 갖고, 옅은 면으로 서로 떨어져 있어야 묶음 하나로 읽힌다.
*/
.hubstrip { display: grid; margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.hubstrip li {
  position: relative;
  display: flex; align-items: center; gap: var(--s3); min-height: 44px;
  padding-inline: var(--s4);
}
.hubstrip li + li { border-top: 1px solid var(--edge); }
.hubstrip li:hover { background: var(--veil); }
.hubstrip a {
  color: var(--ink); text-decoration: none; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hubstrip a::after { content: ""; position: absolute; inset: 0; }
.hubstrip span { margin-inline-start: auto; flex: none; color: var(--faint); font-size: var(--t-xs); }

/* ---- 지면 격자 ----

   셀을 상자로 두르지 않는다. 세로 헤어라인과 여백이 나눈다.
*/
.packgrid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--s10); padding: 0; list-style: none;
}
@media (max-width: 1159px) { .packgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .packgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .packgrid { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/*
  팩 하나 = 작은 면 하나.

  목록은 읽는 곳이 아니라 고르는 곳이다. 그래서 셀에 남는 것은
  이름 / 종류·상태 / 팔로우 셋뿐이다 — 소개문·출처·지원 범위는 그 팩 안에서 읽는다.
  밑줄만 이어 붙이면 문서가 되므로 옅은 면으로 단위를 만들되,
  높이는 낮게 유지해 한 화면에 여럿을 견줄 수 있게 한다.

  표지는 **있을 때만** 쓴다. 없는 팩에 회색 상자를 세우지 않는다.
*/
.packcard {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  min-width: 0; min-height: 62px; padding: var(--s2) var(--s4);
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-lg);
}
.packcard:hover { border-color: var(--edge-strong); background: var(--veil); }
.packcard__body { min-width: 0; display: grid; gap: 1px; }
.packthumb {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-sm);
  object-fit: contain; background: var(--surface); padding: 3px;
}
.packcard__link::after { content: ""; position: absolute; inset: 0; }
.packcard__link { color: inherit; text-decoration: none; }
.packcard__link:focus-visible { outline: none; }
.packcard:has(.packcard__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.packcard:hover .packcard__name { color: var(--accent); }

/* 묶음의 소속 팩 목록. 그림 없이 이름만 잇는다. */
.hubcard__members {
  margin: 0; color: var(--mute); font-size: var(--t-xs); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.packcard__name {
  font-size: var(--t-sm); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 종류와 상태는 한 줄 보조 텍스트다. 배지로 키우지 않는다. */
.packcard__meta {
  margin: 0; display: flex; align-items: center; gap: 5px;
  color: var(--faint); font-size: var(--t-xs); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.packcard__meta::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.packcard__meta[data-status="automated"] { color: var(--accent); }
.packcard__follow {
  position: relative; z-index: 1; flex: none; margin-inline-start: auto;
  min-height: 24px; padding: 0 var(--s2);
  border: 1px solid var(--edge-strong); border-radius: var(--r-sm);
  background: none; color: var(--mute);
  font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
}
.packcard__follow:hover { border-color: var(--ink); color: var(--ink); }
.packcard__follow:hover { border-color: var(--ink); }
/*
  담긴 상태(Packing)는 담는 행동(Pack)보다 조용해야 한다.
  완료 표시가 팩 이름보다 튀면 목록에서 눈이 그쪽으로 끌린다.
*/
.packcard__follow[aria-pressed="true"] {
  background: none; border-color: transparent; color: var(--faint); font-weight: 600;
}
.packcard__follow[aria-pressed="true"]:hover { border-color: var(--edge-strong); color: var(--ink); }

/* ---- 홈 지면 ----

   홈은 큰 카드를 늘어놓는 앱 화면이 아니다. 한 화면에 쓸모 있는 것이 많이 보여야 한다.
   큰 이미지와 카드는 실제 콘텐츠(일정)에 쓰고, 팩은 줄로 선다.
   팩의 개성은 홈이 아니라 그 팩 안에서 드러난다 — docs/VISUAL_LANGUAGE.md
*/
/*
  홈 상단의 얇은 줄.

  내용이 한 줄이면 상자를 주지 않는다. 기능마다 큰 회색 면을 하나씩 주면
  정보가 거의 없는 박스가 화면을 차지한다 — 문서형 UI 의 다른 모습일 뿐이다.
*/
.strip { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.strip__row {
  display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap;
  padding-bottom: var(--s3); border-bottom: 1px solid var(--edge);
}
.strip__row--kinds { padding-bottom: 0; border-bottom: 0; }
.strip__label { flex: none; color: var(--mute); font-size: var(--t-xs); font-weight: 700; }
.strip__empty { color: var(--faint); font-size: var(--t-xs); }
.strip__cta { margin-inline-start: auto; display: flex; align-items: baseline; gap: var(--s2); color: var(--faint); font-size: var(--t-xs); }
.strip__cta button {
  border: 0; background: none; padding: 0; color: var(--accent);
  font: inherit; font-size: var(--t-xs); font-weight: 700; cursor: pointer;
}

/*
  홈은 모듈 격자다.

  1400px 폭을 가로지르는 밑줄 아래 한 줄짜리 내용을 세로로 쌓으면
  공간이 비고 관리자 페이지처럼 보인다. 모듈을 옆으로 세워 붙인다.
  데이터가 없는 모듈은 아예 렌더링하지 않는다 — 홈은 빈 기능의 목차가 아니다.
*/
.board { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 1000px) {
  .board { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s4); }
  /* 왼쪽에 둘 것이 생기기 전까지는 한 단이다. 빈 칸을 벌려 두지 않는다. */
  .board--single { grid-template-columns: minmax(0, 520px); }
}

.board__main { display: grid; gap: var(--s4); min-width: 0; align-content: start; }
.board__side { display: grid; gap: var(--s4); min-width: 0; align-content: start; }

/* 모듈 하나. 테두리 있는 면으로 묶어 "하나의 기능"으로 읽히게 한다. */
/* align-self 는 쓰지 않는다. 세로로 쌓는 flex 안에서 그것은 가로축을 뜻해서,
   모듈이 칸을 채우지 못하고 글자 폭까지 쪼그라든다. 위쪽 정렬은 담는 쪽이 맡는다. */
.rail {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-lg);
  overflow: hidden;
}
.rail__head {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding-inline: var(--s4);
  border-bottom: 1px solid var(--edge);
  background: var(--veil);
}
/* 대문자 변환은 쓰지 않는다. 한글에는 아무 일도 하지 않으면서 HubPack 만 HUBPACK 으로
   바꿔 놓는다 — 제품 이름을 스타일이 다시 쓰게 두지 않는다. */
.rail__title {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.03em;
  color: var(--mute);
}
/* 모듈 안의 팩 줄은 흰 면 위에 선다. 모듈 배경과 한 겹 갈린다. */
.rail .slats { background: var(--surface); border-radius: var(--r-sm); padding: 0 var(--s3); }
.rail .packgrid { gap: 6px; }
.rail__more {
  margin-inline-start: auto; color: var(--accent); text-decoration: none;
  font-size: var(--t-xs); font-weight: 700;
}
.rail__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.rail__note { margin: 0; display: flex; align-items: baseline; gap: var(--s2); color: var(--faint); font-size: var(--t-xs); }
.rail__note a, .rail__note button {
  border: 0; background: none; padding: 0; color: var(--accent);
  font: inherit; font-size: var(--t-xs); font-weight: 700; cursor: pointer;
}

/* 홈의 팩 한 줄. 표지도 카드도 쓰지 않는다 — 이름과 메타가 전부다. */
.slats { display: grid; margin: 0; padding: 0; list-style: none; }
.slat {
  position: relative;
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding-inline: var(--s4);
  font-size: var(--t-sm);
}
.slat + .slat { border-top: 1px solid var(--edge); }
.slat:hover { background: var(--veil); }
.slat a {
  color: var(--ink); text-decoration: none; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 줄 전체가 과녁이다. 이름 몇 글자를 겨누게 하지 않는다. */
.slat a::after { content: ""; position: absolute; inset: 0; }
.slat__meta {
  margin-inline-start: auto; flex: none;
  color: var(--faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums;
}
/* 모듈 안에서는 줄이 면의 폭을 그대로 쓴다. 안쪽에 또 여백을 주지 않는다. */
.rail .slats { background: none; border-radius: 0; padding: 0; }
.slat__meta[data-status="automated"] { color: var(--accent); }

/* 결과가 없을 때. 상자를 세우지 않고 지면 위에 그대로 쓴다. */
.browseempty { display: grid; gap: var(--s2); justify-items: start; padding: var(--s8) 0; margin-bottom: var(--s8); }
.browseempty__title { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; }
.browseempty__body { margin: 0; color: var(--mute); font-size: var(--t-sm); }
.browseempty__note { margin: 0; color: var(--faint); font-size: var(--t-xs); max-width: 52ch; }

@media (max-width: 560px) {
  .browse { margin: var(--s3) 0 var(--s5); }
  /* 한 화면에 더 많이 담는다. 여백을 데스크톱 그대로 쓰면 스크롤만 길어진다. */
  .main { padding: var(--s2) var(--s3) var(--s10); }
  .board { gap: var(--s6); }
  .board__main, .board__side { gap: var(--s5); }
  .packgrid { gap: var(--s6) 0; padding-top: var(--s4); }
  .slat { min-height: 30px; }
}

/* ========================= panels ========================= */
.panel { padding-block: var(--s6); border-top: 1px solid var(--edge); }
.panel:first-of-type { border-top: 0; padding-top: 0; }
.panel .sectiontitle { margin-bottom: var(--s3); }
.keyvalues { display: grid; gap: var(--s2); max-width: 520px; }
.keyvalues > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); font-size: var(--t-sm); }
.keyvalues dt { color: var(--mute); }
.keyvalues dd { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.rowactions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* ========================= footer ========================= */
.sitefoot { border-top: 1px solid var(--edge); }
.sitefoot__inner {
  width: min(var(--shell), 100%); margin-inline: auto;
  padding: var(--s6) var(--s5) calc(var(--tabbar) + var(--s8) + env(safe-area-inset-bottom));
  color: var(--faint); font-size: var(--t-xs);
}
.sitefoot nav { display: flex; flex-wrap: wrap; gap: var(--s5); margin-bottom: var(--s2); }
.sitefoot a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }

/* ========================= bottom tabs (mobile only) ========================= */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--edge);
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom);
}
/* 링크와 버튼이 섞여 있다. 버튼만 글자를 스스로 가운데 두므로, 둘 다 여기서 맞춘다. */
.tabbar__item {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tabbar);
  border: 0; background: none; color: var(--mute);
  font: inherit; font-size: var(--t-xs); font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
}
.tabbar__item[aria-current="page"] { color: var(--accent); }
.tabbar__item[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent);
}

/* ========================= responsive ========================= */
@media (min-width: 900px) {
  .topnav { display: flex; }
  .tabbar { display: none; }
  .sitefoot__inner { padding-bottom: var(--s10); }
  .main { padding-inline: var(--s8); }
  .topbar__inner { padding-inline: var(--s8); }
}

@media (max-width: 420px) {
  .entry { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s2); padding: var(--s3) 0; }
  .main { padding-inline: var(--s4); }
  .topbar__inner { padding-inline: var(--s4); }
  .sitefoot__inner { padding-inline: var(--s4); }
}

/* PacPik Games storefront: discovery first, dense directory second. */
.games-discovery { --games-store-accent: #ff6945; --games-store-ink: #191b22; color: var(--games-store-ink); background: #f5f6f9; }
.games-discovery .games-local-header { margin-bottom: 0; border: 0; border-bottom: 1px solid #e0e2e8; border-radius: 0; background: #fff; box-shadow: none; }
.games-discovery .games-local-header nav a { color: #6e7280; }
.games-discovery .games-local-header nav a:hover,
.games-discovery .games-local-header nav a[aria-current="page"] { border-bottom-color: var(--games-store-ink); color: var(--games-store-ink); }
.games-discovery .games-local-apply { border-color: #d8dae1; background: #fff; color: var(--games-store-ink); }
.games-storefront-hero { min-height: 360px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: clamp(28px, 5vw, 74px); padding: clamp(36px, 5vw, 66px); overflow: hidden; background: linear-gradient(118deg, #e7e8ed 0%, #f2f3f6 54%, #e1e3e9 100%); }
.games-storefront-hero__copy { min-width: 0; }
.games-storefront-hero__copy .eyebrow { color: #5f6473; font-size: .61rem; letter-spacing: .13em; }
.games-storefront-hero h1 { max-width: 12ch; margin: 12px 0 12px; color: var(--games-store-ink); font-size: clamp(2.7rem, 5.2vw, 5.6rem); line-height: .92; letter-spacing: -.07em; word-break: keep-all; }
.games-storefront-hero__copy > p { max-width: 52ch; margin: 0; color: #626775; font-size: .88rem; line-height: 1.65; word-break: keep-all; }
.games-storefront-hero__copy > small { display: block; margin-top: 11px; color: #777c89; font-size: .68rem; font-weight: 750; }
.games-storefront-hero__copy > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.games-storefront-hero__copy .button { min-height: 44px; padding-inline: 17px; border-radius: 7px; }
.games-storefront-hero__copy .games-button { border-color: #20232a; background: #20232a; color: #fff; }
.games-storefront-hero__copy .button-secondary { border-color: #bfc2ca; background: rgb(255 255 255 / 50%); color: #252831; }
.games-storefront-hero__visual { position: relative; min-width: 0; aspect-ratio: 1.32; display: block; overflow: hidden; border: 1px solid rgb(25 28 36 / 12%); border-radius: 18px; background: #fff; box-shadow: 0 28px 66px rgb(34 38 52 / 15%); text-decoration: none; transform: rotate(1.2deg); }
.games-storefront-hero__visual > .games-card__placeholder { position: absolute; inset: 0; }
.games-storefront-hero__visual > span:last-child { position: absolute; right: 16px; bottom: 16px; min-width: 84px; display: grid; justify-items: end; gap: 2px; padding: 10px 12px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 11px; background: rgb(25 27 34 / 84%); color: #fff; backdrop-filter: blur(8px); }
.games-storefront-hero__visual > span:last-child small { font-size: .54rem; letter-spacing: .08em; }
.games-storefront-hero__visual > span:last-child strong { font-size: 1.25rem; }
.games-card__placeholder { position: relative; align-content: center; justify-items: center; gap: 11px; padding: 18px; color: #242834; letter-spacing: 0; text-align: center; }
.games-card__placeholder i { color: rgb(255 255 255 / 72%); font-size: 1.2rem; font-style: normal; }
.games-card__placeholder b { color: #222631; font-size: clamp(2rem, 5vw, 4.7rem); font-weight: 950; line-height: .85; letter-spacing: -.08em; }
.games-card__placeholder small { color: rgb(29 33 43 / 58%); font-size: .66rem; font-weight: 850; letter-spacing: .06em; }
.games-card__placeholder--0 { background: linear-gradient(135deg, #ffe28c, #ffb89f 54%, #cbbcff); }
.games-card__placeholder--1 { background: linear-gradient(135deg, #a7dcff, #a8b9ff 54%, #ffb3d2); }
.games-card__placeholder--2 { background: linear-gradient(135deg, #f0d29b, #d7d59d 50%, #9fd8c9); }
.games-card__placeholder--3 { background: linear-gradient(135deg, #d8c5ff, #a8c1ff 52%, #8ee0da); }
.games-storefront-search { width: min(880px, calc(100% - 48px)); margin: 26px auto 0; }
.games-storefront-search label { min-height: 58px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 42px; align-items: center; gap: 8px; padding: 5px 7px 5px 9px; border: 1px solid #c7cad2; border-radius: 999px; background: #fff; box-shadow: 0 10px 28px rgb(36 40 53 / 6%); }
.games-storefront-search__mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #20232a; color: #fff; font-size: .72rem; font-weight: 950; }
.games-storefront-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #20232a; font: 700 .78rem/1 var(--sans); }
.games-storefront-search button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid #d2d4da; border-radius: 50%; background: #fff; color: #20232a; font-size: 1.15rem; cursor: pointer; }
.games-storefront-shortcuts { display: flex; align-items: flex-start; justify-content: center; gap: clamp(25px, 6vw, 74px); padding: 27px 18px 40px; }
.games-storefront-shortcuts a { min-width: 74px; display: grid; justify-items: center; gap: 9px; color: #262a34; font-size: .67rem; text-decoration: none; }
.games-storefront-shortcuts span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #e1e3e8; font-size: 1.05rem; transition: transform .16s ease, background-color .16s ease; }
.games-storefront-shortcuts a:hover span { background: #eceef3; transform: translateY(-2px); }
.games-storefront-shortcuts b { font-weight: 850; }
.games-discovery .games-portal { width: min(1180px, calc(100% - 48px)); margin-inline: auto; gap: 70px; padding: 18px 0 70px; }
.games-discovery .games-home-shelves { gap: 70px; }
.games-discovery .games-shelf { padding: 0; border: 0; border-radius: 0; background: transparent; }
.games-discovery .games-module__head { min-height: 60px; margin-bottom: 16px; border-bottom-color: #d9dbe1; }
.games-discovery .games-module__head > div > span { color: #777b88; }
.games-discovery .games-module__head h2 { color: #20232b; font-size: 1.45rem; }
.games-discovery .games-module__head p { color: #777b88; }
.games-discovery .games-shelf__grid { grid-auto-columns: minmax(240px, calc((100% - 36px) / 4)); gap: 12px; }
.games-discovery .games-card { overflow: hidden; border: 1px solid #d9dbe1; border-radius: 14px; background: #fff; box-shadow: 0 9px 24px rgb(33 37 49 / 5%); }
.games-discovery .games-card__media { border-bottom-color: #d9dbe1; background: #eceef3; }
.games-discovery .games-card__body { padding: 14px; }
.games-discovery .games-card__signals { color: #777b88; }
.games-discovery .games-card h3 { color: #20232a; font-size: 1rem; }
.games-discovery .games-card__developer { color: #c45135; }
.games-discovery .games-card__desc { color: #6e7380; }
.games-discovery .games-card__meta { border-top-color: #e3e5e9; color: #777b88; }
.games-discovery .games-card__actions button,
.games-discovery .games-card__actions a { border-color: #d7d9df; border-radius: 8px; background: #fff; color: #2b2e37; }
.games-discovery .games-card__actions .games-card__detail { border-color: #252831; background: #252831; color: #fff; }
.games-discovery .games-library { overflow: hidden; border: 1px solid #d5d7dd; border-radius: 16px; background: #fff; color: #20232a; }
.games-discovery .games-library__head { border-bottom-color: #e1e3e8; }
.games-discovery .games-library__head > div > span { color: #777b88; }
.games-discovery .games-library__head p,
.games-discovery .games-library__head > strong small { color: #777b88; }
.games-discovery .games-library__lanes { border-bottom-color: #e1e3e8; }
.games-discovery .games-library__lanes button { border-left-color: #e1e3e8; color: #666b77; }
.games-discovery .games-library__lanes button[aria-pressed="true"] { background: #252831; color: #fff; }
.games-discovery .games-library__controls { border-bottom-color: #e1e3e8; background: #f3f4f7; }
.games-discovery .games-library__controls input,
.games-discovery .games-library__controls select { border-color: #d3d6dc; border-radius: 8px; background: #fff; color: #252831; }
.games-discovery .games-library__grid { gap: 0; }
.games-discovery .games-library__grid .games-card { border-radius: 0; box-shadow: none; }

@media (max-width: 760px) {
  .games-storefront-hero { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 18px 24px; }
  .games-storefront-hero h1 { font-size: clamp(2.4rem, 13vw, 3.8rem); }
  .games-storefront-hero__visual { width: 100%; transform: none; }
  .games-storefront-search { width: calc(100% - 28px); margin-top: 18px; }
  .games-storefront-shortcuts { justify-content: flex-start; gap: 17px; padding: 22px 18px 30px; overflow-x: auto; scrollbar-width: none; }
  .games-storefront-shortcuts::-webkit-scrollbar { display: none; }
  .games-storefront-shortcuts a { flex: 0 0 68px; }
  .games-discovery .games-portal { width: calc(100% - 28px); gap: 50px; padding-top: 10px; }
  .games-discovery .games-home-shelves { gap: 50px; }
  .games-discovery .games-shelf { margin-inline: 0; padding-inline: 0; }
  .games-discovery .games-shelf__grid { grid-auto-columns: min(82vw, 290px); }
  .games-discovery .games-library { margin-inline: 0; border-inline: 1px solid #d5d7dd; border-radius: 14px; }
}

/* ========================= 정적 페이지 (build-site.mjs 생성) ========================= */
.topnav a.topnav__item { display: inline-flex; align-items: center; text-decoration: none; }
.linklist { display: grid; gap: var(--s2); padding-left: 1.05em; color: var(--mute); font-size: var(--t-sm); }
.linklist li a { font-weight: 600; }
.view > .panel:first-of-type,
.static-document > .panel:first-of-type { border-top: 1px solid var(--edge); padding-top: var(--s6); }
.sitefoot__inner p { max-width: 78ch; margin-top: var(--s2); line-height: 1.5; }

/* ========================= Pack Home =========================

   Pack 상세는 문서가 아니라 공간이다.

   예전에는 소개 · 공식 정보 · 일정 · 채널 · 공식 URL 이 저마다 큰 섹션을 하나씩 갖고
   세로로 쌓였다. 읽을 것은 있었지만 머물 곳은 없었다.

   이제 위 172px 안에서 Pack 을 소개하고(머리띠 + 고정 탭), 나머지 전부를 콘텐츠에 준다.
   좌는 이 Pack 안에서의 탐색, 가운데는 본체, 우는 보조 — 탭이 바뀌어도 그 역할은 그대로다.
   ============================================================= */

.packhome { display: flex; flex-direction: column; }

/* ---- 머리띠. 입구이지 본문이 아니다 — 화면 높이를 먹지 않는다. ---- */
.packband {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 72px; padding-block: var(--s3);
  border-bottom: 1px solid var(--edge);
}
.packband__id { min-width: 0; display: grid; gap: 2px; }
.packband__name { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.025em; }
.packband__meta { color: var(--mute); font-size: var(--t-xs); }
/* 수집 상태는 상태이지 콘텐츠가 아니다. 메타 줄 끝에 작게 붙는다. */
.packband__stat { color: var(--faint); }
.packband__stat::before { content: " · "; }
.packband__stat[data-status="automated"] { color: var(--accent); }
.packband__follow {
  margin-inline-start: auto; flex: none;
  min-height: 34px; padding: 0 var(--s4);
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: none; color: var(--accent);
  font-size: var(--t-sm); font-weight: 700; cursor: pointer;
}
.packband__follow[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ---- 고정 탭. Pack 마다 같은 자리에 같은 개수. ---- */
.packtabs {
  display: flex; gap: 0; overflow-x: auto;
  border-bottom: 1px solid var(--edge);
  scrollbar-width: none;
}
.packtabs::-webkit-scrollbar { display: none; }
.packtabs__item {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--s4);
  border-bottom: 2px solid transparent;
  color: var(--mute); text-decoration: none;
  font-size: var(--t-sm); font-weight: 700; line-height: 1;
  white-space: nowrap;
}
.packtabs__item:first-child { padding-inline-start: 0; }
.packtabs__item:hover { color: var(--ink); }
.packtabs__item[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---- 3단. 좁아지면 좌우가 본문 아래로 내려간다. ---- */
.packbody {
  display: grid; gap: var(--s5);
  padding-block: var(--s5) var(--s10);
  align-items: start;
}
@media (min-width: 1000px) {
  .packbody { grid-template-columns: 220px minmax(0, 1fr) 280px; gap: var(--s4); }
}
.packcol { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
/* 좁은 화면에서는 본문이 먼저다. 탐색과 보조는 그 아래로.
   넓은 화면에서는 순서를 건드리지 않는다 — 건드리면 본문이 220px 칸으로 들어간다. */
@media (max-width: 999px) {
  .packcol--main { order: -1; }
}
.packpanel { display: flex; flex-direction: column; gap: var(--s3); }

/* 첫 모듈은 이 탭의 주인공이다. 왼쪽 두께로 그렇게 말한다. */
.rail--lead { border-inline-start: 2px solid var(--accent); }

.railtext { color: var(--mute); font-size: var(--t-sm); padding: var(--s3) var(--s4); }
.railtext + .railtext { padding-top: 0; }
.railsub { padding: var(--s4); border-top: 1px solid var(--edge); }
.railsub__title { font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s2); }
.slat__name { font-weight: 600; color: var(--mute); }

/* ---- 공식 정보 한 줄. 제목 · 시각 · 종류 · 출처. ---- */
.orows { display: grid; margin: 0; padding: 0; list-style: none; }
.orow {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm);
}
.orow + .orow { border-top: 1px solid var(--edge); }
.orow:hover { background: var(--veil); }
.orow__link { color: var(--ink); text-decoration: none; font-weight: 700; }
.orow__link::after { content: ""; position: absolute; inset: 0; }
/* 제목은 한 줄을 다 쓰고, 부속 정보가 그 아래 한 줄에 모인다.
   날짜를 제목과 같은 줄에서 겨루게 하면 좁은 칸에서 제목이 글자 단위로 쪼개진다. */
.orow__foot {
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
  color: var(--faint); font-size: var(--t-xs);
}
.orow__when {
  margin-inline-start: auto; flex: none;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* 아직 열지 않은 동작. 눌리지 않는다는 것이 보여야 한다. */
.btnquiet {
  border: 1px solid var(--edge-strong); border-radius: var(--r-sm);
  background: none; color: var(--faint);
  padding: 4px var(--s3); font-size: var(--t-xs); font-weight: 700;
  cursor: not-allowed;
}
.railtext--dim { color: var(--faint); font-size: var(--t-xs); }
.railtext--dim[data-status="automated"] { color: var(--mute); }
.rail__more--plain { color: var(--faint); font-weight: 600; }

/* 보조 칸은 좁다. 이름과 시각을 한 줄에서 겨루게 하지 않는다. */
.packcol--right .slat { flex-direction: column; align-items: stretch; gap: 2px; padding-block: var(--s2); }
.packcol--right .slat__meta { margin-inline-start: 0; }
.packcol--right .slat a { white-space: normal; }

/* ========================= PacPik LIVE ========================= */
.nav-live { color: #c43b46 !important; background: none !important; box-shadow: none !important; text-shadow: none !important; }
.nav-live::before { display: none !important; }
.nav-live[aria-current="page"] { color: #e14c56 !important; }

.live-kicker {
  color: #cf3544;
  font: 800 .75rem/1.45 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.live-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: end;
  min-height: 176px;
  margin: 18px 0 20px;
  padding: clamp(22px, 2.6vw, 34px);
  overflow: hidden;
  border-radius: 28px;
  color: #f9fbfc;
  background: #17232d;
  box-shadow: 0 26px 80px rgb(7 15 22 / 18%);
}
.live-hero::after { display: none; }
.live-hero h1 { max-width: 760px; margin: 14px 0 16px; font-size: clamp(1.75rem, 3.2vw, 3.1rem); line-height: 1.28; letter-spacing: -.025em; text-wrap: balance; }
.live-hero p { max-width: 650px; margin: 0; color: #b9c6ce; font-size: 1rem; line-height: 1.7; }
.live-hero__actions { display: flex; align-self: center; align-items: center; gap: 10px; flex-direction: column; }
.live-hero .solid-button { background: #f8fafb; color: #121920; border-radius: 12px; }
.live-share-panel { position: relative; width: min(360px, 80vw); }
.live-share-panel > summary { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; cursor: pointer; color: #e9eef1; font-weight: 700; }
.live-share-panel[open] { padding: 18px; border-radius: 18px; background: #202a32; box-shadow: 0 20px 50px rgb(0 0 0 / 35%); }
.live-share-panel p { color: #c8d2d8; font-size: .86rem; }
.live-share-form { display: grid; gap: 10px; }
.live-share-form label { display: grid; gap: 5px; color: #b9c6ce; font-size: .76rem; }
.live-share-form input, .live-share-form select { width: 100%; min-height: 44px; border: 1px solid #44515a; border-radius: 9px; padding: 8px 10px; background: #131c23; color: #f7f9fa; }

.live-topic-field {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 30px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--ui-paper) 90%, #dbeff0);
  box-shadow: var(--ui-shadow);
}
.live-topic-field > header span, .live-section-title > span { color: var(--ui-line-strong); font: 750 .74rem/1.4 var(--sans); letter-spacing: .06em; }
.live-topic-field > header h2, .live-section-title h2 { margin: 10px 0 8px; font-size: 1.1rem; line-height: 1.4; letter-spacing: -.02em; }
.live-topic-field > header p, .live-section-title p { margin: 0; color: var(--ui-dim); font-size: .78rem; }
.live-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.live-topic-card {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-height: 132px;
  padding: 20px;
  border-radius: 18px;
  background: var(--ui-paper);
  box-shadow: 0 10px 30px rgb(30 55 69 / 8%);
  transition: transform .18s ease, box-shadow .18s ease;
}
.live-topic-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgb(30 55 69 / 13%); }
.live-topic-card small { color: #c13a46; font: 750 .72rem/1.55 var(--sans); }
.live-topic-card h3 { margin: 7px 0 3px; font-size: 1.15rem; }
.live-topic-card p { margin: 0; color: var(--ui-dim); font-size: .77rem; }
.live-pulse { width: 8px; height: 8px; border-radius: 50%; background: #d63d49; box-shadow: 0 0 0 5px rgb(214 61 73 / 13%); }

.live-flow-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); gap: 18px; margin-top: 18px; }
.live-flow-main, .live-flow-rail, .live-signal-panels > section, .live-external-section {
  padding: 26px;
  border-radius: 22px;
  background: var(--ui-paper);
  box-shadow: 0 12px 38px rgb(27 42 54 / 7%);
}
.live-section-title { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 21px; }
.live-section-title > div { min-width: 0; }
.live-rank-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.live-rank-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 72px; padding: 9px 12px; border-radius: 13px; background: var(--ui-paper-2); }
.live-rank-row > span { color: #cf3544; font: 800 1rem/1 var(--mono, monospace); }
.live-rank-row a { min-width: 0; }
.live-rank-row strong, .live-pick-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-rank-row small, .live-pick-row small, .live-official-row small { display: block; margin-top: 4px; color: var(--ui-dim); font-size: .73rem; }
.live-trend-grid { display: grid; gap: 8px; }
.live-trend-card { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 54px; padding: 7px 12px; border-radius: 12px; background: var(--ui-paper-2); }
.live-trend-card small { color: #c13a46; font: 750 .69rem/1.4 var(--sans); }
.live-trend-card span { color: var(--ui-dim); font-size: .7rem; }
.live-signal-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.live-pick-row, .live-official-row { min-height: 68px; padding: 12px 2px; }
.live-pick-row > a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 7px; border-radius: 10px; transition: background-color .16s ease, transform .16s ease; }
.live-pick-row > a:hover { background: color-mix(in srgb, var(--ui-pick) 8%, transparent); transform: translateX(3px); }
.live-pick-row > a > span:last-child { min-width: 0; }
.live-pick-row + .live-pick-row, .live-official-row + .live-official-row { border-top: 1px solid color-mix(in srgb, var(--ui-line) 55%, transparent); }
.live-official-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; }
.live-external-section { margin-top: 18px; }
.external-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.external-live-card { overflow: hidden; border-radius: 17px; background: var(--ui-paper-2); }
.external-live__player { aspect-ratio: 16 / 9; background: #05080b; }
.external-live__player iframe { display: block; width: 100%; height: 100%; border: 0; }
.external-live-card__body { min-width: 0; overflow: hidden; padding: 16px; }
.external-live-card h3 { margin: 9px 0 7px; font-size: 1rem; line-height: 1.45; }
.external-live-card p { margin: 0; color: var(--ui-dim); font-size: .76rem; line-height: 1.55; }
.live-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 13px; }
.live-card-actions > * { min-height: 44px; display: inline-flex; align-items: center; }
.live-card-cta { justify-content: center; gap: 7px; min-width: 132px; padding: 0 14px; border: 1px solid var(--ui-line-strong); border-radius: 6px; color: var(--ui-ink); font-size: .73rem; font-weight: 850; text-decoration: none; }
.live-card-cta.is-primary { border-color: #c63847; background: #c63847; color: #fff; }
.live-card-cta.is-secondary { background: var(--ui-paper); }
.live-card-cta:hover { border-color: #d64a58; }
.live-card-pack-link { justify-content: center; gap: 5px; padding: 0 11px; border: 1px solid var(--ui-line-strong); border-radius: 6px; background: var(--ui-paper); color: var(--ui-ink); font-size: .72rem; font-weight: 800; text-decoration: none; }
.live-card-pack-link .icon { width: 12px; }
.live-card-pack-link:hover, .live-card-pack-link:focus-visible { border-color: var(--ui-signal); color: var(--ui-signal); outline: 0; }
.external-live-card--compact { display: grid; grid-template-columns: minmax(132px, 34%) minmax(0, 1fr); align-items: center; background: color-mix(in srgb, var(--ui-paper-2) 88%, #f5d9dc); }
.external-live__thumb { position: relative; display: grid; width: 100%; min-width: 0; min-height: 0; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; background: #1d2b35; color: #d9e2e7; font: 800 .72rem/1 var(--mono, monospace); text-decoration: none; }
.external-live__thumb img { width: 100%; height: 100%; object-fit: cover; }
.external-live__thumb > b { position: absolute; left: 8px; bottom: 8px; padding: 4px 6px; border-radius: 5px; background: #cf3544; color: #fff; font: 800 .62rem/1 var(--mono, monospace); }
.external-live-card--compact .external-live-card__body { padding: 13px 15px; }
.external-live-card--compact .live-card-actions { margin-top: 6px; }
.external-live-card--compact h3, .external-live-card--compact p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-live-feed .external-live-grid, .hub-live-feed .external-live-grid { grid-template-columns: 1fr; }
.live-detail-head { display: grid; gap: 8px; max-width: 850px; padding: 34px 0 24px; }
.live-detail-head > a { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; color: var(--ui-dim); }
.live-detail-head h1 { margin: 0; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.065em; }
.live-detail-head p { margin: 0; color: var(--ui-dim); }
.live-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; padding-bottom: 18px; }
.live-detail-layout > div, .live-detail-layout > aside { padding: 18px; border-radius: 22px; background: var(--ui-paper); box-shadow: var(--ui-shadow); }
.live-detail-layout .external-live-card { background: transparent; }
.live-detail-layout .external-live-card__body { padding: 18px 0 0; }
.live-detail-layout aside h2 { margin: 0 0 12px; font-size: 1rem; }
.live-detail-layout aside p { color: var(--ui-dim); font-size: .75rem; line-height: 1.65; }
.live-detail-relations { display: flex; flex-wrap: wrap; gap: 7px; }
.live-detail-relations a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 10px; background: var(--ui-paper-2); font-size: .76rem; font-weight: 700; }
.live-provider-link { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 34%, transparent); text-underline-offset: 3px; }
.live-provider-link:hover, .live-provider-link:focus-visible { color: var(--ui-signal); text-decoration-color: currentColor; }
.live-detail-more { display: grid; gap: 22px; margin-bottom: 18px; padding: 20px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); }
.live-detail-more__row + .live-detail-more__row { padding-top: 20px; border-top: 1px solid var(--ui-line); }
.live-detail-more .live-section-title { align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.live-detail-more .live-section-title > a { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; color: var(--ui-ink); font-size: .74rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.live-detail-more .external-live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.live-detail-more .external-live-card--compact { display: block; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper-2); }
.live-detail-more .external-live-card__body { padding: 11px 12px 12px; }
.live-detail-more .external-live-card h3 { margin: 6px 0 5px; font-size: .82rem; }
.live-detail-more .external-live-card__meta, .live-detail-more .live-relation-chips { display: none; }
.live-detail-more .live-card-actions { margin-top: 8px; gap: 6px; }
.live-detail-more .live-card-actions > * { min-height: 34px; padding-inline: 9px; font-size: .67rem; }
.live-detail-more .live-card-actions > :not(.live-card-cta):not(.live-card-pack-link) { display: none; }
.live-detail-pack-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.live-detail-pack-strip > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 66px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper-2); color: var(--ui-ink); text-decoration: none; }
.live-detail-pack-strip > a:hover, .live-detail-pack-strip > a:focus-visible { border-color: var(--ui-line-strong); background: var(--ui-paper); outline: 0; }
.live-detail-pack-strip strong, .live-detail-pack-strip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-detail-pack-strip strong { font-size: .78rem; }
.live-detail-pack-strip small { margin-top: 3px; color: var(--ui-dim); font-size: .65rem; }
.live-detail-pack-strip .icon { width: 13px; }
.external-support, .profile-support { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.external-support small, .profile-support small { color: var(--ui-dim); font-size: .68rem; line-height: 1.45; }
.support-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, #d63d6f 42%, var(--ui-line));
  border-radius: 10px;
  color: color-mix(in srgb, #d63d6f 78%, var(--ui-text));
  background: transparent;
  font-size: .75rem;
  font-weight: 750;
  text-decoration: none;
}
.support-link:hover { background: color-mix(in srgb, #d63d6f 8%, var(--ui-paper)); }
.support-settings { display: grid; gap: 14px; }
.support-settings > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.support-settings h3 { margin: 4px 0; }
.support-settings p { max-width: 70ch; margin: 0; color: var(--ui-dim); font-size: .78rem; line-height: 1.65; }
.support-settings > label:not(.check-row) { display: grid; gap: 7px; font-size: .78rem; font-weight: 700; }
.support-settings input[type="url"] { width: 100%; min-height: 46px; border: 1px solid var(--ui-line); border-radius: 12px; padding: 0 13px; background: var(--ui-paper-2); color: var(--ui-text); }
.sign-in-settings, .account-password-form { display: grid; gap: 14px; max-width: 720px; }
.sign-in-settings > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sign-in-settings h3 { margin: 4px 0; }
.sign-in-settings header p { max-width: 68ch; margin: 0; color: var(--ui-dim); font-size: .78rem; line-height: 1.65; }
.sign-in-settings > label, .account-password-form > label { display: grid; gap: 7px; font-size: .78rem; font-weight: 750; }
.sign-in-settings input, .account-password-form input { width: 100%; min-height: 52px; border: 1px solid var(--ui-line); border-radius: 12px; padding: 0 14px; background: var(--ui-paper-2); color: var(--ui-text); font: inherit; }
.account-password-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.sign-in-settings [data-account-recovery-output]:not(:empty) { margin-top: 12px; padding: 20px; border-radius: 16px; background: var(--ui-paper-2); }
.sign-in-settings .recovery-codes header h2 { font-size: 1.35rem; }
.check-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; color: var(--ui-dim); font-size: .76rem; line-height: 1.55; }
.check-row input { width: 18px; height: 18px; margin: 2px 0 0; }
.form-notice { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #d63d49 10%, var(--ui-paper)); color: #b62d3a !important; }
.native-live-roadmap { margin: 18px 6px 36px; color: var(--ui-dim); font-size: .76rem; text-align: right; }
.live-empty { margin: 0; padding: 20px; border-radius: 13px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: .78rem; }

/* Streamer View: deliberately no global shell, account or search UI. */
html:has(.streamer-shell), body:has(.streamer-shell) { min-height: 100%; margin: 0; background: #080c10; color: #f5f8fa; font-family: "Malgun Gothic", "Segoe UI", sans-serif; }
.streamer-shell { min-height: 100vh; }
.streamer-view { min-height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 18px; background: #080c10; }
.streamer-bar, .streamer-controls { display: flex; align-items: center; gap: 10px; min-height: 58px; }
.streamer-brand { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; color: #fff; text-decoration: none; letter-spacing: -.02em; }
.streamer-scope { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.streamer-scope label { display: flex; align-items: center; gap: 6px; color: #9daab3; font-size: .72rem; }
.streamer-scope select, .streamer-scope button, .streamer-controls button { min-height: 44px; border: 1px solid #303b43; border-radius: 9px; padding: 0 12px; background: #141b21; color: #edf2f5; }
.streamer-fresh { margin-left: 12px; color: #ff6974; font: 700 .75rem/1 var(--mono, monospace); }
.streamer-canvas { width: min(1040px, 90vw, calc((100vh - 176px) * 16 / 9)); aspect-ratio: 16 / 9; align-self: center; justify-self: center; overflow: hidden; border-radius: 18px; background: #11181f; box-shadow: 0 24px 70px rgb(0 0 0 / 62%); }
.streamer-slide, .streamer-empty { position: relative; isolation: isolate; height: 100%; display: grid; align-items: center; padding: clamp(34px, 5vw, 72px); overflow: hidden; background: #121920; }
.streamer-slide::after { display: none; }
.streamer-slide__count { position: absolute; top: 34px; right: 38px; color: #71808a; font: 700 .75rem/1 var(--mono, monospace); }
.streamer-slide > div { width: min(100%, 780px); margin-inline: auto; text-align: center; }
.streamer-slide h1, .streamer-empty h1 { max-width: 22ch; margin: 16px auto; font-size: clamp(1.9rem, 4.2vw, 4.2rem); font-weight: 730; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.streamer-slide p { color: #a9b7c0; font-size: clamp(.85rem, 1.25vw, 1.08rem); line-height: 1.55; }
.streamer-slide a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-top: 22px; color: #fff; text-decoration: none; font-weight: 700; }
.streamer-slide__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.streamer-slide__actions .external-support { margin-top: 22px; }
.streamer-slide__actions .support-link { margin-top: 0; border-color: rgb(255 112 142 / 48%); color: #ff9cb0; }
.streamer-orbit { display: none; }
.streamer-controls { justify-content: center; }
.streamer-controls button:first-child .icon { transform: rotate(180deg); }
.streamer-controls button[aria-pressed="true"] { border-color: #b63a45; color: #ff727e; }
.streamer-view:fullscreen { padding: 20px; }
.streamer-view:fullscreen .streamer-canvas { width: min(100%, calc((100vh - 140px) * 16 / 9)); }

@media (max-width: 900px) {
  .live-hero { grid-template-columns: 1fr; min-height: 0; border-radius: 22px; }
  .live-hero__actions { align-items: stretch; }
  .live-share-panel { width: 100%; }
  .live-topic-field { grid-template-columns: 1fr; }
  .live-flow-grid, .live-signal-panels { grid-template-columns: 1fr; }
  .streamer-scope label:first-child { display: none; }
  .live-detail-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .live-hero { min-height: 0; margin-top: 12px; padding: 20px 18px; }
  .live-hero h1 { font-size: 1.6rem; line-height: 1.42; letter-spacing: -.015em; }
  .live-hero p { font-size: .92rem; line-height: 1.55; }
  .live-topic-field, .live-flow-main, .live-flow-rail, .live-signal-panels > section, .live-external-section { padding: 19px; border-radius: 17px; }
  .live-topic-grid, .live-rank-list, .external-live-grid { grid-template-columns: 1fr; }
  .external-live-card--compact { grid-template-columns: 112px minmax(0, 1fr); }
  .external-live-card--compact .live-card-actions { display: none; }
  .live-official-row { grid-template-columns: 1fr; gap: 4px; }
  .streamer-view { padding: 9px; }
  .streamer-bar { flex-wrap: wrap; }
  .streamer-scope { order: 2; width: 100%; }
  .streamer-scope label { flex: 1; }
  .streamer-scope select { width: 100%; }
  .streamer-canvas { width: 100%; border-radius: 13px; }
  .streamer-slide { padding: 30px; }
  .streamer-slide h1, .streamer-empty h1 { font-size: clamp(1.65rem, 8vw, 2.7rem); }
  .streamer-controls { overflow-x: auto; justify-content: flex-start; }
  .streamer-controls button { flex: none; }
  .support-settings > header { display: grid; }
}

/* Signup campaign: a compact banner, never a mobile takeover. */
.home-campaign-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: #eef3ff;
  box-shadow: var(--ui-card-shadow);
}
.home-campaign-card picture,
.home-campaign-card img { display: block; width: 100%; }
.home-campaign-card--desktop {
  width: clamp(220px, 20vw, 300px);
  justify-self: end;
  border-radius: 10px;
  box-shadow: none;
}
.home-campaign-card--desktop img { height: auto; object-fit: contain; }
.home-campaign-card--mobile { display: none; width: 100%; }
.home-campaign-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-signal) 58%, transparent); outline-offset: 3px; }

@media (max-width: 620px) {
  .home-campaign-card--desktop { display: none; }
  .home-campaign-card--mobile { display: block; border-radius: 13px; box-shadow: none; }
  .home-campaign-card--mobile img {
    height: clamp(88px, 25vw, 104px);
    object-fit: cover;
    object-position: center 50%;
  }

  /* Each LIVE card is one viewport-wide slide; the rail may never widen the page. */
  .live-external-section--priority,
  .live-detail-more,
  .live-detail-more__row { min-width: 0; max-width: 100%; overflow: hidden; }
  .live-external-section--priority .external-live-grid--paged,
  .live-detail-more .external-live-grid {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template: none;
    grid-auto-flow: initial;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .live-external-section--priority .external-live-grid--paged::-webkit-scrollbar,
  .live-detail-more .external-live-grid::-webkit-scrollbar { display: none; }
  .live-external-section--priority .external-live-grid--paged > .external-live-card--compact,
  .live-detail-more .external-live-grid > .external-live-card--compact {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-topic-card { transition: none; }
}

/*
 * LIVE portal refresh.
 *
 * 긴 계약 설명과 번호가 붙은 대시보드 칸보다 실제 방송과 반응을 먼저 보여 준다.
 * 기존 LIVE API, 외부 재생, 채널 관리 계약은 그대로 두고 `/live/`의 정보 순서와
 * presentation만 바꾼다.
 */
.live-portal {
  display: grid;
  gap: 16px;
  padding: 22px 0 42px;
}
.live-portal .live-hero {
  min-height: 0;
  margin: 0;
  padding: clamp(28px, 3.4vw, 46px);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 12%, rgb(209 54 71 / 13%), transparent 30%),
    linear-gradient(125deg, #151b23 0%, #19242c 100%);
  box-shadow: 0 20px 52px rgb(7 15 22 / 14%);
  animation: live-surface-in .42s cubic-bezier(.2,.75,.22,1) both;
}
.live-hero__copy { min-width: 0; }
.live-portal .live-kicker { display: inline-flex; align-items: center; gap: 10px; }
.live-portal .live-hero h1 {
  max-width: none;
  margin: 10px 0 9px;
  font-size: clamp(2rem, 4vw, 3.65rem);
  line-height: 1.08;
  letter-spacing: -.055em;
}
.live-portal .live-hero p { max-width: 680px; font-size: .94rem; line-height: 1.65; }
.live-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.live-hero__meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 9px;
  background: rgb(255 255 255 / 5%);
  color: #aebbc3;
  font-size: .72rem;
}
.live-hero__meta b { color: #fff; font-size: .92rem; }
.live-portal .live-hero__actions {
  position: relative;
  align-self: center;
  align-items: stretch;
  width: min(100%, 210px);
  gap: 8px;
}
.live-streamer-button,
.live-portal .live-share-panel > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 10px;
  background: rgb(255 255 255 / 6%);
  color: #eef3f5;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 780;
  text-decoration: none;
}
.live-streamer-button:hover,
.live-streamer-button:focus-visible,
.live-portal .live-share-panel > summary:hover,
.live-portal .live-share-panel > summary:focus-visible { border-color: rgb(255 255 255 / 30%); background: rgb(255 255 255 / 10%); }
.live-streamer-button .icon,
.live-portal .live-share-panel > summary .icon { width: 15px; }
.live-portal .live-share-panel { width: auto; }
.live-portal .live-share-panel[open] { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.live-portal .live-share-panel[open] > summary .icon { transform: rotate(180deg); }
.live-share-panel__body {
  position: absolute;
  z-index: 8;
  top: calc(100% + 8px);
  right: 0;
  width: min(390px, calc(100vw - 42px));
  padding: 17px;
  border: 1px solid #38434b;
  border-radius: 14px;
  background: #172028;
  box-shadow: 0 24px 60px rgb(0 0 0 / 38%);
}
.live-share-panel__body > p { margin-top: 0; }

.live-portal .live-external-section,
.live-portal .live-topic-field,
.live-portal .live-flow-main,
.live-portal .live-flow-rail,
.live-portal .live-signal-panels > section {
  margin: 0;
  padding: clamp(20px, 2.7vw, 32px);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-paper);
  box-shadow: 0 10px 30px rgb(27 42 54 / 6%);
}
.live-portal .live-section-title {
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.live-portal .live-section-title span,
.live-portal .live-topic-field > header > span {
  color: #c23a48;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .11em;
}
.live-portal .live-section-title h2,
.live-portal .live-topic-field > header h2 {
  margin: 5px 0 0;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -.035em;
}
.live-portal .live-section-title p { margin-top: 5px; line-height: 1.5; }
.live-portal .live-section-title > strong {
  color: var(--ui-dim);
  font: 800 1.4rem/1 var(--mono, monospace);
}
.live-external-section--priority .external-live-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.live-external-section--priority .external-live-card--compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  background: var(--ui-paper-2);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.live-external-section--priority .external-live-card--compact:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, #cf3544 34%, var(--ui-line));
  box-shadow: 0 15px 30px rgb(28 36 46 / 12%);
}
.live-external-section--priority .external-live__thumb { aspect-ratio: 16 / 7.4; }
.live-external-section--priority .external-live-card__body { padding: 15px 17px 17px; }
.live-external-section--priority .external-live-card h3 { margin: 7px 0 8px; font-size: 1.05rem; }
.live-external-section--priority .external-live-card__meta { min-width: 0; }
.live-external-section--priority .live-card-actions { display: flex; margin-top: 10px; }
.live-external-section--priority .live-card-actions > * { min-height: 36px; font-size: .72rem; }

.live-portal .live-topic-field {
  grid-template-columns: minmax(160px, .32fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.live-portal .live-topic-field > header { align-self: center; }
.live-portal .live-topic-grid { gap: 9px; }
.live-portal .live-topic-card {
  min-height: 88px;
  padding: 15px 16px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-paper-2);
  box-shadow: none;
}
.live-portal .live-topic-card h3 { margin: 0 0 3px; font-size: .95rem; }
.live-portal .live-flow-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr);
  gap: 16px;
  align-items: start;
  margin: 0;
}
.live-portal .live-rank-list { gap: 7px; }
.live-portal .live-rank-row {
  min-height: 62px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--ui-line) 76%, transparent);
  border-radius: 10px;
  background: var(--ui-paper-2);
}
.live-portal .live-trend-grid { gap: 6px; }
.live-portal .live-trend-card {
  min-height: 47px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--ui-line) 72%, transparent);
  border-radius: 9px;
  background: var(--ui-paper-2);
}
.live-portal .live-signal-panels { gap: 16px; margin: 0; }
.live-portal .live-signal-panels--single { grid-template-columns: minmax(0, 1fr); }
.live-portal .live-signal-panels--single > section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}
.live-portal .live-signal-panels--single .live-section-title { grid-column: 1 / -1; }
.live-portal .live-pick-row,
.live-portal .live-official-row { min-height: 57px; padding: 9px 1px; }
.live-portal .live-contract {
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-paper);
  color: var(--ui-text);
}
.live-portal .live-contract > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  cursor: pointer;
  color: var(--ui-dim);
  font-size: .76rem;
  font-weight: 750;
  list-style: none;
}
.live-portal .live-contract > summary::-webkit-details-marker { display: none; }
.live-portal .live-contract > summary .icon { width: 14px; transition: transform .18s ease; }
.live-portal .live-contract[open] > summary .icon { transform: rotate(180deg); }
.live-portal .live-contract > div { display: grid; gap: 5px; padding: 0 16px 16px; }
.live-portal .live-contract p,
.live-portal .live-contract small { grid-column: auto; color: var(--ui-dim); font-size: .73rem; }

@keyframes live-surface-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .live-portal .live-hero { grid-template-columns: minmax(0, 1fr) 190px; }
  .live-portal .live-flow-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .live-portal { gap: 12px; padding: 14px 0 28px; }
  .live-portal .live-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; overflow: visible; padding: 24px 19px 20px; border-radius: 14px; }
  .live-portal .live-hero h1 { margin-top: 8px; font-size: clamp(1.9rem, 9vw, 2.35rem); line-height: 1.12; }
  .live-portal .live-hero p { font-size: .86rem; line-height: 1.58; }
  .live-hero__meta { margin-top: 17px; }
  .live-portal .live-hero__actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex-direction: initial; }
  .live-portal .live-share-panel { position: static; }
  .live-streamer-button, .live-portal .live-share-panel > summary { min-height: 42px; }
  .live-share-panel__body { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; bottom: auto; left: 0; width: auto; max-height: min(560px, calc(100vh - 116px)); overflow-y: auto; }
  .live-portal .live-external-section, .live-portal .live-topic-field, .live-portal .live-flow-main, .live-portal .live-flow-rail, .live-portal .live-signal-panels > section { padding: 18px 15px; border-radius: 13px; }
  .live-external-section--priority .external-live-grid { grid-template-columns: minmax(0, 1fr); }
  .live-external-section--priority .external-live__thumb { aspect-ratio: 16 / 8.4; }
  .live-portal .live-topic-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; overflow: hidden; }
  .live-portal .live-topic-grid { display: flex; width: 100%; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .live-portal .live-topic-card { min-width: min(78vw, 260px); scroll-snap-align: start; }
  .live-portal .live-rank-list { grid-template-columns: minmax(0, 1fr); }
  .live-portal .live-signal-panels { grid-template-columns: minmax(0, 1fr); }
  .live-portal .live-signal-panels--single > section { grid-template-columns: minmax(0, 1fr); }
  .live-portal .live-section-title { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .live-portal .live-hero { animation: none; }
  .live-external-section--priority .external-live-card--compact,
  .live-portal .live-contract > summary .icon { transition: none; }
}

/* Account routes follow the same quiet paper, ink and hairline system as PacPik. */
.auth-route { min-height: min(680px, calc(100vh - 190px)); display: grid; place-items: center; padding: clamp(24px, 4vw, 56px) 0; }
.auth-workspace { width: min(100%, 980px); display: grid; grid-template-columns: minmax(280px, .78fr) minmax(440px, 1.22fr); overflow: hidden; border: 1px solid var(--ui-line-strong); border-radius: 4px; background: var(--ui-paper); box-shadow: none; }
.auth-story { min-height: 560px; display: flex; flex-direction: column; justify-content: space-between; gap: 38px; padding: clamp(30px, 4vw, 46px); border-right: 1px solid var(--ui-line); background: var(--ui-paper-2); color: var(--ui-ink); }
.auth-story__brand { display: inline-flex; width: max-content; align-items: baseline; gap: 10px; color: inherit; text-decoration: none; }
.auth-story__brand b { font-size: 22px; letter-spacing: -.05em; }
.auth-story__brand span { color: var(--ui-dim); font-size: 12px; font-weight: 750; }
.auth-story__label { margin: 0 0 12px; color: var(--ui-signal); font: 800 10px/1.35 var(--sans); letter-spacing: .08em; }
.auth-story h1 { max-width: none; margin: 0; font-size: clamp(1.75rem, 2.1vw, 2rem); line-height: 1.22; letter-spacing: -.04em; word-break: keep-all; text-wrap: balance; }
.auth-story ul { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--ui-line); list-style: none; }
.auth-story li { min-height: 64px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ui-line); }
.auth-story li .icon { width: 18px; color: var(--ui-signal); }
.auth-story li span { display: grid; gap: 3px; }
.auth-story li b { font-size: 13px; }
.auth-story li small { color: var(--ui-dim); font-size: 11px; line-height: 1.45; }
.auth-panel { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5vw, 58px); background: var(--ui-paper); }
.auth-panel > header { margin: 28px 0 24px; }
.auth-panel > header h2 { margin: 0 0 8px; font-size: clamp(1.75rem, 2.7vw, 2.25rem); line-height: 1.08; letter-spacing: -.045em; }
.auth-panel > header p { max-width: 48ch; margin: 0; color: var(--ui-dim); line-height: 1.55; }
.auth-mode-nav { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(112px, 1fr)); border-bottom: 1px solid var(--ui-line); }
.auth-mode-nav a { min-height: 43px; display: grid; place-items: center; border-bottom: 2px solid transparent; color: var(--ui-dim); text-decoration: none; font-size: 13px; font-weight: 800; }
.auth-mode-nav a:hover { color: var(--ui-ink); }
.auth-mode-nav a[aria-current="page"] { border-bottom-color: var(--ui-ink); color: var(--ui-ink); }
.auth-mode-status { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px; border-bottom: 1px solid var(--ui-line); color: var(--ui-signal); font-size: 11px; font-weight: 850; letter-spacing: .05em; }
.auth-mode-status small { color: var(--ui-dim); font-weight: 700; letter-spacing: 0; }
.auth-form { display: grid; gap: 17px; }
.auth-form label { display: grid; gap: 8px; color: var(--ui-ink); font-size: 12px; font-weight: 800; }
.auth-form label > small, .auth-terms { color: var(--ui-dim); font-size: 10px; font-weight: 600; line-height: 1.45; }
.auth-form input, .auth-form select { width: 100%; min-height: 52px; border: 1px solid var(--ui-line-strong); border-radius: 4px; padding: 0 15px; outline: 0; background: var(--ui-paper); color: var(--ui-ink); font: 650 14px/1 inherit; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.auth-form textarea { width: 100%; min-height: 132px; border: 1px solid var(--ui-line-strong); border-radius: 4px; padding: 12px 15px; outline: 0; background: var(--ui-paper); color: var(--ui-ink); font: 600 14px/1.5 inherit; resize: vertical; }
.intake-form { margin-top: 18px; }
.intake-purpose { display: grid; gap: 5px; margin: 0; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--ui-signal) 30%, var(--ui-line)); border-radius: 13px; background: color-mix(in srgb, var(--ui-signal) 8%, var(--ui-paper)); }
.intake-purpose span { color: var(--ui-signal); font-size: 10px; font-weight: 850; letter-spacing: .05em; }
.intake-purpose strong { color: var(--ui-ink); font-size: 15px; }
.intake-purpose small { color: var(--ui-dim); font-size: 11px; line-height: 1.55; }
.intake-result:empty { display: none; }
.intake-result { margin: 0; color: var(--ui-dim); font-size: 12px; font-weight: 700; }
.intake-result[data-state="done"] { color: var(--ui-signal); }
.intake-result[data-state="error"] { color: #b4483f; }
.auth-form .intake-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; padding: 13px 14px; border: 1px solid var(--ui-line-strong); border-radius: 4px; background: var(--ui-paper); color: var(--ui-dim); font-size: 11px; font-weight: 650; line-height: 1.55; }
.auth-form .intake-consent input { width: 18px; min-height: 18px; height: 18px; margin: 1px 0 0; padding: 0; accent-color: var(--ui-signal); }
.auth-form input:focus-visible, .auth-form select:focus-visible, .auth-form textarea:focus-visible { border-color: var(--ui-signal); background: var(--ui-paper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-signal) 15%, transparent); }
.auth-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.auth-password { position: relative; display: block; }
.auth-password input { padding-right: 54px; }
.auth-password button { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 3px; background: transparent; color: var(--ui-dim); cursor: pointer; }
.auth-password button:hover, .auth-password button:focus-visible { background: var(--ui-paper-2); color: var(--ui-ink); }
.auth-password .icon { width: 18px; }
.ui-app .auth-submit { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--ui-ink); border-radius: 4px; padding: 0 18px; background: var(--ui-ink); color: var(--ui-paper); text-decoration: none; font: 800 14px/1 inherit; box-shadow: none; cursor: pointer; }
.auth-submit:hover { border-color: var(--ui-signal); background: var(--ui-signal); }
.auth-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.auth-submit .icon { width: 17px; }
.auth-recover-link { width: max-content; color: var(--ui-dim); font-size: 11px; font-weight: 750; }
.auth-recover-link:hover { color: var(--ui-signal); }
.auth-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 22px 0; color: var(--ui-dim); font-size: 10px; font-weight: 750; }
.auth-or::before, .auth-or::after { content: ""; height: 1px; background: var(--ui-line); }
.ui-app .google-auth-button { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--ui-line-strong); border-radius: 4px; padding: 0 15px; background: #fff; color: #1f1f1f; text-decoration: none; font: 650 14px/1 Arial, sans-serif; }
.google-auth-button:hover { background: #f8fafd; box-shadow: 0 1px 3px rgb(60 64 67 / 22%); }
.google-auth-button--compact { min-height: 46px; }
.brand-icon { width: 20px; height: 20px; flex: none; }
.auth-form-error { min-height: 18px; margin: -3px 0; color: #b62b38; font-size: 11px; font-weight: 750; line-height: 1.4; }
.auth-route-error, .auth-route-success { margin: -10px 0 18px; padding: 12px 14px; border-radius: 4px; font-size: 12px; font-weight: 750; }
.auth-route-error { background: color-mix(in srgb, #d63d49 11%, var(--ui-paper)); color: color-mix(in srgb, #d63d49 82%, var(--ui-ink)); }
.auth-route-success { background: color-mix(in srgb, #18886f 12%, var(--ui-paper)); color: color-mix(in srgb, #08705c 86%, var(--ui-ink)); }
.auth-preview-note { margin: 13px 0 0; color: var(--ui-dim); font-size: 11px; line-height: 1.5; }
.connected-provider { min-height: 62px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid var(--ui-line); border-radius: 4px; background: var(--ui-paper-2); }
.connected-provider > span:nth-child(2) { display: grid; gap: 3px; }
.connected-provider small { color: var(--ui-dim); font-size: 9px; }
.connected-provider strong { font-size: 13px; }
.connected-provider > b { color: var(--ui-signal); font-size: 10px; }
.recovery-codes { display: grid; gap: 20px; }
.recovery-codes__icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--ui-signal-soft); color: var(--ui-signal); }
.recovery-codes__icon .icon { width: 24px; }
.recovery-codes header h2 { margin: 5px 0 9px; font-size: 2rem; letter-spacing: -.05em; }
.recovery-codes header p:last-child { margin: 0; color: var(--ui-dim); font-size: 12px; line-height: 1.55; }
.recovery-codes ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; counter-reset: none; list-style: none; }
.recovery-codes li { padding: 11px; border-radius: 10px; background: var(--ui-paper-2); font: 700 12px/1 Consolas, monospace; text-align: center; letter-spacing: .04em; user-select: all; }
.recovery-codes__actions, .auth-entry-actions { display: flex; align-items: center; gap: 9px; }
.auth-provider-list { display: grid; gap: 10px; }

@media (max-width: 820px) {
  .auth-route { min-height: 0; padding: 16px 0 42px; }
  .auth-workspace { grid-template-columns: 1fr; border-radius: 4px; }
  .auth-story { min-height: 0; gap: 22px; padding: 25px 24px; border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .auth-story h1 { max-width: 21ch; font-size: 1.8rem; line-height: 1.18; }
  .auth-story ul { display: none; }
  .auth-panel { padding: 30px 24px 36px; }
}
@media (max-width: 520px) {
  .auth-workspace { margin-inline: -4px; border-radius: 3px; }
  .auth-story { gap: 17px; padding: 20px 18px; }
  .auth-story__label { margin-bottom: 8px; }
  .auth-story h1 { max-width: 23ch; font-size: 1.48rem; }
  .auth-panel { padding: 26px 19px 30px; }
  .auth-panel > header { margin-block: 22px 20px; }
  .auth-mode-nav { width: 100%; }
  .auth-field-grid, .recovery-codes ol { grid-template-columns: 1fr; }
}

/* ========================================================================
   PacPik kinetic atlas
   Body surfaces group live signals by depth and rhythm instead of table lines.
   Header/footer keep their established treatment; this layer owns content only.
   ======================================================================== */
:root {
  --ui-canvas: #f0efeb;
  --ui-paper: #fffefa;
  --ui-paper-2: #f3f2ed;
  --ui-ink: #171a19;
  --ui-dim: #69716d;
  --ui-line: #dcded8;
  --ui-line-strong: #c3c8c1;
  --ui-signal: #087b6b;
  --ui-signal-soft: #dff1ec;
  --ui-rank: #c45d36;
  --ui-pick: #5b5bd6;
  --ui-info: #2f6cb3;
  --ui-warm-soft: #f7e9df;
  --ui-pick-soft: #ecebfb;
  --ui-blue-soft: #e7f0f8;
  --ui-mint-soft: #e1f1eb;
  --ui-danger: #a83e38;
  --ui-on-air: #0baa83;
  --ui-shadow: 0 18px 50px rgb(31 37 34 / 8%);
  --ui-card-shadow: 0 8px 24px rgb(31 37 34 / 6%);
  --ui-header-paper: #ffffff;
  --ui-footer-paper: #ffffff;
}

:root[data-theme="dark"] {
  --ui-canvas: #17191d;
  --ui-paper: #22252b;
  --ui-paper-2: #2b2f36;
  --ui-ink: #f2f0e9;
  --ui-dim: #a5aaa5;
  --ui-line: #303536;
  --ui-line-strong: #444b4a;
  --ui-signal: #59cdb8;
  --ui-signal-soft: #183a35;
  --ui-rank: #f0a06e;
  --ui-pick: #9d9bf7;
  --ui-info: #76a7e8;
  --ui-warm-soft: #3b2c26;
  --ui-pick-soft: #2e2d49;
  --ui-blue-soft: #233345;
  --ui-mint-soft: #203a35;
  --ui-danger: #ff928b;
  --ui-on-air: #42dcae;
  --ui-shadow: 0 24px 64px rgb(0 0 0 / 32%);
  --ui-card-shadow: 0 10px 30px rgb(0 0 0 / 24%);
  --ui-header-paper: #141c19;
  --ui-footer-paper: #141c19;
}

.content { padding-block: 24px 86px; }
.header-row { min-height: 66px; grid-template-columns: auto minmax(360px, 720px) auto; gap: 28px; }
.header-search { width: 100%; border: 0; border-radius: 14px; background: var(--ui-canvas); }
.header-actions { justify-self: end; }
.header-nav-row { position: relative; height: 46px; display: flex; align-items: stretch; }
.desktop-nav { position: relative; height: 46px; display: flex; align-items: stretch; }
.desktop-nav > .nav-link, .nav-mega > .nav-link { min-height: 46px; }
.nav-mega { position: static; display: flex; align-items: stretch; }
.nav-mega__toggle { width: 28px; min-width: 28px; padding: 0; background: transparent; color: var(--ui-dim); cursor: pointer; }
.nav-mega__toggle .icon { width: 14px; transition: transform .15s ease; }
.nav-mega[data-open="true"] .nav-mega__toggle .icon { transform: rotate(180deg); }
.nav-mega:hover .nav-mega__toggle, .nav-mega:focus-within .nav-mega__toggle, .nav-mega[data-open="true"] .nav-mega__toggle { color: var(--ui-signal); }
.mega-panel { position: absolute; top: calc(100% - 1px); left: 0; width: min(920px, calc(100vw - 48px)); display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 22px; padding: 24px; border-radius: 0 0 24px 24px; background: color-mix(in srgb, var(--ui-header-paper) 96%, transparent); box-shadow: 0 28px 70px rgb(8 17 14 / 20%); backdrop-filter: blur(22px); opacity: 0; visibility: hidden; transform: translateY(-7px); pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s ease; }
.nav-mega:hover .mega-panel, .nav-mega:focus-within .mega-panel, .nav-mega[data-open="true"] .mega-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mega-panel > div { min-width: 0; }
.mega-kicker { display: block; margin-bottom: 9px; color: var(--ui-signal); font: 800 11px/1.2 var(--sans); letter-spacing: .06em; }
.mega-feature { display: block; margin-bottom: 9px; font-size: 17px; font-weight: 850; letter-spacing: -.035em; }
.mega-panel nav, .mega-live-list, .mega-recent, .mega-actions { display: grid; gap: 3px; }
.mega-panel nav a, .mega-live-list a, .mega-recent a, .mega-actions a { min-height: 36px; display: flex; align-items: center; padding: 0 10px; border-radius: 9px; color: var(--ui-dim); font-size: 12px; font-weight: 700; }
.mega-panel nav a:hover, .mega-live-list a:hover, .mega-recent a:hover, .mega-actions a:hover { background: var(--ui-paper-2); color: var(--ui-ink); }
.mega-panel small { color: var(--ui-dim); font-size: 11px; }
.mega-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, max-content)); padding-top: 12px; border-top: 1px solid var(--ui-line); }
.mega-actions a { color: var(--ui-signal); }
.page-head { min-height: 126px; border: 0; }
.page-head h1, .pack-identity h1, .post-detail h1 { letter-spacing: -.052em; }
.page-actions { gap: 8px; }
.solid-button, .quiet-button, .text-button, .danger-button, .filter-button, .my-tabs button, .inline-actions button { border-radius: 12px; }
.quiet-button { border-color: transparent; background: var(--ui-paper-2); }
.solid-button { box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-signal) 22%, transparent); }

.signal-section { position: relative; min-width: 0; overflow: hidden; padding: 18px; border: 0; border-radius: 22px; background: var(--ui-paper); box-shadow: var(--ui-card-shadow); }
.section-head { min-height: 42px; border: 0; }
.section-head h2 { font-size: 16px; }
.section-meta { font-family: var(--sans); font-size: 11px; font-weight: 750; line-height: 1.35; letter-spacing: .025em; text-transform: none; }
.signal-dot { display: none; width: 9px; height: 9px; border: 0; background: var(--ui-on-air); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ui-on-air) 16%, transparent), 0 0 15px color-mix(in srgb, var(--ui-on-air) 62%, transparent); animation: on-air-pulse 1.8s ease-in-out infinite; }
.is-on-air .signal-dot { display: block; }
.signal-dot::before { display: none; }
@keyframes on-air-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-on-air) 14%, transparent), 0 0 11px color-mix(in srgb, var(--ui-on-air) 48%, transparent); }
  50% { opacity: .76; box-shadow: 0 0 0 7px color-mix(in srgb, var(--ui-on-air) 8%, transparent), 0 0 19px color-mix(in srgb, var(--ui-on-air) 72%, transparent); }
}
.compact-list { display: grid; gap: 6px; }
.compact-list > :last-child { border-bottom: 0; }
.pack-row, .post-row, .pick-row, .hub-row, .official-row, .board-row { border: 0; border-radius: 13px; background: transparent; transition: background-color .16s ease, transform .16s ease; }
.pack-row:hover, .post-row:hover, .pick-row:hover, .hub-row:hover, .official-row:hover, .board-row:hover { background: var(--ui-paper-2); }
.pack-row:has(a:focus-visible), .post-row:has(a:focus-visible), .pick-row:has(a:focus-visible), .hub-row:has(a:focus-visible), .official-row:has(a:focus-visible) { background: var(--ui-signal-soft); }
.pack-row__main, .post-row > a, .pick-row > a, .hub-row a, .official-row a { padding-inline: 10px; }
.pick-row > a { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 9px; }
.pick-row > a strong, .pick-row > a small { grid-column: 2; }
.source-badge { position: relative; width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ui-line) 82%, transparent); border-radius: 10px; background: #fff; color: var(--ui-ink); box-shadow: 0 3px 10px rgb(18 24 33 / 8%); }
.source-badge b { min-width: 100%; height: 100%; display: grid; place-items: center; padding: 0 4px; background: var(--ui-ink); color: var(--ui-paper); font-size: 9px; line-height: 1; letter-spacing: -.02em; }
.source-badge img { width: 100%; height: 100%; object-fit: contain; }
.pick-source-icon { width: 24px; height: 24px; border-radius: 7px; }
.pick-source-icon b { font-size: 7px; }
.source-state { grid-template-columns: 28px minmax(0, 1fr); border: 0; }
.pack-row em, .source-state em { border: 0; border-radius: 999px; background: var(--ui-paper-2); }
.source-mark { border: 0; border-radius: 8px; background: var(--ui-signal-soft); }
.hub-row--ranked a { grid-template-columns: 34px minmax(0, 1fr) 20px; }
.post-row { grid-template-columns: minmax(0, 1fr) auto; }
.post-row:has(.rank), .post-row:has(.post-row__mark) { grid-template-columns: 42px minmax(0, 1fr) auto; }
.post-pulse { display: none; }
.post-row__mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--ui-signal) 9%, var(--ui-paper)); color: var(--ui-signal); transition: background-color .16s ease, color .16s ease, transform .16s ease; }
.post-row__mark .icon { width: 16px; }
.post-row:hover .post-row__mark { background: var(--ui-signal); color: var(--ui-paper); transform: translateY(-1px); }
.rank { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; border-radius: 10px; background: color-mix(in srgb, var(--ui-rank) 10%, var(--ui-paper)); color: var(--ui-rank); font-size: 14px; font-variant-numeric: tabular-nums; }
.rank::before { font-size: 8px; line-height: 1; vertical-align: 0; }

.home-dock { min-height: 50px; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 6px 9px 6px 15px; border: 0; border-radius: 16px; background: var(--ui-paper); box-shadow: var(--ui-card-shadow); }
.home-dock > header { flex: none; margin: 0; }
.home-dock h1 { font-size: 12px; color: var(--ui-dim); }
.home-pack-pills { min-width: 0; flex: 1; display: flex; align-items: center; gap: 6px; overflow-x: auto; }
.home-dock__empty { min-height: 38px; padding: 0 8px; border: 0; white-space: nowrap; }
.home-live-now { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 14px; padding: 12px 14px; border-radius: 18px; background: #18242b; color: #f7fafb; box-shadow: var(--ui-card-shadow); }
.home-live-now > header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 9px; }
.home-live-now > header h2 { margin: 0; font-size: 1rem; line-height: 1.35; }
.home-live-now > header a { grid-column: 2; color: #b7c8cf; font-size: .72rem; }
.home-live-now > header .icon { width: 13px; }
.home-live-now .external-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.home-live-now .external-live-card--compact { grid-template-columns: 98px minmax(0, 1fr); background: #22333c; }
.home-live-now .external-live-card__body { min-width: 0; color: #f7fafb; }
.home-live-now .external-live-card p { color: #b7c8cf; }
.home-live-now .external-live-card h3 { margin-top: 6px; }
.home-live-now .live-card-actions { display: none; }
.home-pack-pill { min-width: 0; min-height: 44px; flex: 1 1 140px; padding: 6px 11px; border: 0; border-radius: 11px; background: var(--ui-paper-2); }
.home-pack-pill:hover { border: 0; background: var(--ui-signal-soft); }
.home-pack-pill small { display: none; }
.home-pack-pill--browse, .home-pack-pill--add { min-width: max-content; flex: 0 0 auto; color: var(--ui-signal); }
.home-pack-pill--browse, .home-pack-pill--add {
  border: 1px solid color-mix(in srgb, var(--ui-ink) 20%, var(--ui-line));
  background: var(--ui-paper);
}
.home-pack-pill--browse:hover, .home-pack-pill--add:hover {
  border-color: var(--ui-ink);
  background: var(--ui-paper-2);
}
.home-portal-grid { grid-template-columns: minmax(0, 1.6fr) minmax(340px, .78fr); gap: 14px; }
.home-main-feed, .home-source-rail { display: grid; min-width: 0; gap: 14px; padding: 0; border: 0; background: transparent; }
.home-main-feed .signal-section + .signal-section { border: 0; }
.home-source-rail { position: static; }
.home-main-feed .latest-posts { min-height: 330px; }
.home-main-feed .top-pik-block { min-height: 300px; background: var(--ui-paper); }
.home-source-rail .community-pick-block { min-height: 330px; background: var(--ui-paper); }
.home-source-rail .home-live-ranking { min-height: 400px; background: var(--ui-paper); }
.top-pik-block .section-head, .community-pick-block .section-head { border: 0; }
.top-pik-block .section-head h2 { color: var(--ui-rank); }
.community-pick-block .section-head h2 { color: var(--ui-pick); }
.top-pik-block .section-meta { color: color-mix(in srgb, var(--ui-rank) 82%, var(--ui-dim)); }
.community-pick-block .section-meta { color: color-mix(in srgb, var(--ui-pick) 82%, var(--ui-dim)); }
.home-rank-stack { display: grid; gap: 12px; }
.home-rank-stack > div { padding: 7px 4px; }
.home-rank-stack h3 { margin: 0 0 5px; color: var(--ui-dim); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.home-rank-stack .pack-row, .home-rank-stack .hub-row { min-height: 52px; }
.home-rank-stack .pack-row__main, .home-rank-stack .hub-row a { min-height: 50px; }
.home-rank-stack .pack-row em, .home-rank-stack small { display: none; }
.home-rank-stack .rank { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: color-mix(in srgb, var(--ui-rank) 12%, var(--ui-paper)); color: var(--ui-rank); font-size: 13px; font-variant-numeric: tabular-nums; }
.home-rank-stack .rank::before { font-size: 8px; }
.home-rank-stack .compact-list > :nth-child(1) .rank { background: #2d3337; color: #fff; box-shadow: 0 6px 14px rgb(23 27 29 / 18%); }
.home-rank-stack .compact-list > :nth-child(2) .rank { background: #e4e7e5; color: #38403d; }
.home-rank-stack .compact-list > :nth-child(3) .rank { background: #efe1d5; color: #9c563b; }
:root[data-theme="dark"] .home-rank-stack .compact-list > :nth-child(1) .rank { background: #f4f2ea; color: #16191d; }
:root[data-theme="dark"] .home-rank-stack .compact-list > :nth-child(2) .rank { background: #41474e; color: #f1f3ef; }
:root[data-theme="dark"] .home-rank-stack .compact-list > :nth-child(3) .rank { background: #503a31; color: #ffc09e; }
.home-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-discovery-grid > .signal-section { padding: 18px; border: 0; border-radius: 22px; background: var(--ui-paper); box-shadow: var(--ui-card-shadow); }
.home-discovery-grid > .signal-section:nth-child(2), .home-discovery-grid > .signal-section:nth-child(3) { background: var(--ui-paper); }
.home-explore-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 74px; padding: 13px 18px !important; background: #20292d !important; color: #f7faf9; box-shadow: 0 15px 36px rgb(18 27 30 / 18%) !important; }
:root[data-theme="dark"] .home-explore-actions { background: #252a31 !important; box-shadow: var(--ui-card-shadow) !important; }
.home-explore-actions .section-head { min-height: 0; margin: 0; }
.home-explore-actions .section-head h2 { color: #f7faf9; }
.home-explore-actions .text-button { color: #c8d2d0; }
.home-explore-actions .text-button:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.home-actions { min-height: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0; border-radius: 0; background: transparent; }
.home-actions > * { justify-content: center; }

.browse-tools { margin-bottom: 16px; padding: 12px 15px; border: 0; border-radius: 18px; background: var(--ui-paper); box-shadow: var(--ui-card-shadow); }
.browse-tools form, .ui-app input:not([type="hidden"]), .ui-app textarea, .ui-app select { border-radius: 12px; }
.browse-filter-stack { min-width: 0; display: grid; gap: 8px; }
.pack-category-filters { flex-wrap: wrap; }
@media (max-width: 760px) {
  /* 종류를 세 줄로 접으면 Pack 이 한 개도 보이기 전에 첫 화면이 끝난다. */
  .pack-category-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
  .pack-category-filters::-webkit-scrollbar { display: none; }
  .pack-category-filters .filter-button { flex: none; padding: 0 10px; font-size: .78rem; }
  .pack-status-filters { padding: 8px 0 10px; }
}
.pack-status-filters { padding-top: 8px; border-top: 1px solid var(--ui-line); }
.pack-browser { gap: 10px; }
.pack-browser .pack-row { min-height: 78px; padding: 0 10px; background: var(--ui-paper); box-shadow: var(--ui-card-shadow); }
.pack-browser .pack-row:hover { transform: translateY(-2px); background: var(--ui-paper); box-shadow: var(--ui-shadow); }

.pack-identity { position: relative; isolation: isolate; overflow: hidden; min-height: 152px; padding: 28px 30px; border: 0; border-radius: 26px; background: var(--ui-signal-soft); box-shadow: var(--ui-shadow); }
.pack-identity:has(.entity-icon--header) { grid-template-columns: 72px minmax(0, 1fr) auto; }
/*
 * Pack·HubPack 이 주인인 화면의 제목줄.
 *
 * 아이콘과 이름은 한 묶음이다. 그리고 이 줄은 목록으로 가는 길목일 뿐이라, 42px 제목과
 * 112px 높이를 그대로 쓰면 첫 화면의 절반이 이름을 다시 말하는 데 쓰인다.
 */
.entity-page-head { align-items: center; min-height: 0; gap: 16px; padding-bottom: 14px; }
/* 이름은 아이콘 바로 옆에서 시작한다. 늘어나지 않으면 `space-between` 이 가운데로 민다. */
.entity-page-head > div { flex: 1 1 auto; min-width: 0; }
.entity-page-head > .entity-icon { align-self: center; }
.entity-page-head h1 { margin: 0 0 3px; font-size: clamp(22px, 2vw, 28px); }
.entity-page-head p { font-size: 13px; }
.pack-identity::after { display: none; }
.pack-layout, .hub-portal-layout { gap: 14px; }
.pack-primary, .pack-channels, .pack-aside { padding: 0; border: 0; background: transparent; }
.pack-primary, .pack-channels, .pack-aside { display: grid; gap: 14px; }
.pack-channels, .pack-aside { top: calc(var(--ui-header) + 18px); }
.pack-live-feed, .hub-live-feed { padding: 14px; }
.pack-live-feed .section-head, .hub-live-feed .section-head { min-height: 34px; }
.pack-live-feed .external-live-card--compact, .hub-live-feed .external-live-card--compact { grid-template-columns: 88px minmax(0, 1fr); min-height: 68px; background: var(--ui-paper-2); }
.pack-live-feed .external-live-card__body, .hub-live-feed .external-live-card__body { padding: 8px 10px; }
.pack-live-feed .external-live-card h3, .hub-live-feed .external-live-card h3 { margin: 4px 0; font-size: 12px; }
.pack-live-feed .external-live-card p, .hub-live-feed .external-live-card p { font-size: 10px; }
.pack-live-feed .live-card-actions, .hub-live-feed .live-card-actions { display: none; }
.compact-empty { margin: 0; padding: 10px; border-radius: 11px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: 12px; line-height: 1.55; }
.channel-link { margin-bottom: 5px; padding: 9px 10px; border: 0; border-radius: 12px; background: var(--ui-paper-2); }
.channel-link.is-current { background: var(--ui-signal-soft); }
.fact-list > div { margin-bottom: 5px; padding: 10px 11px; border: 0; border-radius: 11px; background: var(--ui-paper-2); }

.hub-grid { gap: 14px; }
.hub-card { overflow: hidden; min-height: 180px; border: 0; border-radius: 22px; background: var(--ui-paper); box-shadow: var(--ui-card-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--ui-shadow); }
.hub-card:nth-child(3n + 1), .hub-card:nth-child(3n + 2) { background: var(--ui-paper); }

/*
 * 채널이 하나뿐인 커뮤니티에서 `채널` 카드와 운영자 모집 카드가 본문과 맞먹었다.
 * 게시판보다 운영자 모집이 먼저 눈에 들어오면 그 화면은 게시판이 아니다.
 * 기능은 그대로 두고 자리만 줄인다.
 */
.community-layout { gap: 14px; }
/*
 * 좁은 화면에서는 한 칸이다. **폭 지정을 조건 없이 두면 안 된다** — 이 블록은 위쪽
 * `@media (max-width: 760px)` 보다 뒤에 있어서, 조건 없이 적으면 그 규칙을 덮어쓰고
 * 390px 에서도 목록 옆에 사이드바가 선다. 실제로 그렇게 되어 제목이 전부 잘렸다.
 */
@media (min-width: 761px) {
  .community-layout { grid-template-columns: 206px minmax(0, 1fr); }
}
.community-layout > aside, .community-layout > div { display: grid; align-content: start; gap: 10px; }
.community-layout > aside .signal-section { padding: 12px 13px; border-radius: 16px; }
.community-layout > aside .section-head { min-height: 0; margin-bottom: 6px; }
.community-layout > aside .section-head h2 { font-size: 12px; color: var(--ui-dim); letter-spacing: .02em; }
.community-layout > aside .channel-link { min-height: 38px; font-size: 13px; }
.community-layout > aside .manager-recruitment { padding: 12px 13px; }
.community-layout > aside .manager-recruitment p strong { font-size: 13px; }
.community-layout > aside .manager-recruitment .solid-button { min-height: 38px; margin-top: 8px; font-size: 12px; }
.community-feed-tabs { display: flex; gap: 6px; margin: 0 0 10px; padding: 5px; border-radius: 15px; background: var(--ui-paper); box-shadow: var(--ui-card-shadow); }
.community-feed-tabs a { display: inline-grid; place-items: center; }
.community-feed-tabs button, .community-feed-tabs a { min-height: 42px; padding: 0 15px; border: 0; border-radius: 11px; background: transparent; color: var(--ui-dim); font: 750 12px/1.3 var(--sans); cursor: pointer; }
.community-feed-tabs button:hover, .community-feed-tabs a:hover { background: var(--ui-paper-2); color: var(--ui-ink); }
/* 운영자가 잠시 내린 말머리. 운영자에게만 오고, 내려 둔 것임을 옅은 색으로만 알린다. */
.community-feed-tabs button[data-hidden="true"], .community-feed-tabs a[data-hidden="true"] { opacity: 0.55; }
.community-feed-tabs button[aria-pressed="true"], .community-feed-tabs a[aria-current="page"] { background: #20292d; color: #fff; box-shadow: 0 6px 15px rgb(22 29 31 / 16%); }
:root[data-theme="dark"] .community-feed-tabs button[aria-pressed="true"], :root[data-theme="dark"] .community-feed-tabs a[aria-current="page"] { background: #f1efe8; color: #181b20; }
/*
 * 목록은 카드 더미가 아니라 게시판이다.
 *
 * 줄마다 배경과 둥근 모서리를 주고 사이를 6px 씩 벌리면, 스무 줄을 훑는 동안 눈이 스무 번
 * 경계를 넘는다. 훑어보기가 목적인 화면에서 그것은 비용만 있고 얻는 것이 없다.
 * 줄은 붙이고, 가르는 것은 실선 하나로 한다.
 */
.channel-board { display: grid; gap: 0; border-top: 1px solid var(--ui-line-strong); }
.board-row { background: transparent; border-radius: 0; border-bottom: 1px solid var(--ui-line); }
.board-row.has-moderation { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.board-row:last-child { border-bottom: 0; }
.board-row > a { min-height: 46px; padding: 7px 10px; border: 0; }
.board-row__moderation { display: flex; align-items: center; gap: 4px; padding: 5px 8px 5px 4px; }
.board-row__moderation button { min-width: 42px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper); color: var(--ui-dim); font-size: 11px; font-weight: 760; cursor: pointer; }
.board-row__moderation button:hover { border-color: var(--ui-line-strong); background: var(--ui-paper-2); color: var(--ui-text); }
.board-row__moderation button.is-danger:hover { border-color: #d8a4a4; background: #fff2f2; color: #a92929; }
.board-row__moderation .icon { width: 14px; height: 14px; }
.board-row:hover { background: var(--ui-paper-2); }
.board-row.is-active { background: var(--ui-signal-soft); box-shadow: inset 3px 0 0 var(--ui-signal); }
.board-row.is-active > a { border: 0; }
/* 제목이 먼저 읽혀야 한다. 메타보다 확실히 크고 진하게. */
.board-row strong { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.board-meta { font-size: 11px; }
/* 메타 안에서도 무게를 나눈다 — 이름은 읽고, 시각·조회수는 훑는다. */
.board-author { color: var(--ui-text); font-weight: 600; }
.manager-recruitment { border-radius: 18px; background: var(--ui-signal-soft); box-shadow: none; }
.compose-page { display: grid; gap: 14px; }
.post-context-nav { justify-content: space-between; gap: 12px; border-bottom: 0; margin-bottom: 10px; }
.post-context-nav > a { min-height: 44px; }
.post-context-nav > .text-button { color: var(--ui-text); }
.post-context-nav__links { display: flex; align-items: center; gap: 18px; }
.post-context-nav__links a { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; color: var(--ui-dim); }
.community-context-nav { justify-content: space-between; margin: 4px 0 10px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--ui-paper-2); }
.community-context-nav span { overflow: hidden; color: var(--ui-dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.compose-form { padding: 5px 0 0; }
.guest-credentials, .composer-identity, .editor-toolbar { background: var(--ui-paper-2); }

.post-detail { max-width: none; padding: clamp(26px, 5vw, 52px); border: 0; border-radius: 28px; background: var(--ui-paper); box-shadow: var(--ui-shadow); }
.post-detail header { border: 0; }
.post-byline { margin-top: 13px; }
.post-detail h1 .board-tab { font-size: 13px; vertical-align: 4px; }
/* 글 상세의 소속 줄. Pack 아이콘과 이름은 여기서도 한 묶음이다. */
.entity-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.entity-eyebrow .entity-icon { width: 24px; height: 24px; border-radius: 7px; }
.post-body { margin-top: 18px; padding: 28px 2px 30px; border-radius: 0; background: transparent; }
.post-body > :first-child, .comment-body > :first-child { margin-top: 0; }
.post-body > :last-child, .comment-body > :last-child { margin-bottom: 0; }
.comment { margin-block: 8px; padding: 18px 20px; border: 0; border-radius: 16px; background: var(--ui-paper-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-line-strong) 52%, transparent); }
.comment > header { align-items: center; gap: 14px; }
.comment-author { min-width: 0; display: flex; align-items: center; gap: 8px; }
.comment-kind { min-width: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; border-radius: 7px; background: var(--ui-paper); color: var(--ui-dim); font-size: 9px; font-weight: 850; letter-spacing: .04em; }
.comment-body { margin: 12px 0 13px; color: var(--ui-ink); font-size: 14px; line-height: 1.78; }
.comment--reply { position: relative; margin: 16px 0 2px 34px; padding: 15px 17px; border-left: 3px solid var(--ui-info); border-radius: 12px; background: var(--ui-paper); box-shadow: 0 7px 18px rgb(25 34 38 / 6%); }
.comment--reply .comment-kind { background: color-mix(in srgb, var(--ui-info) 10%, var(--ui-paper-2)); color: var(--ui-info); }
.comment .inline-actions { margin-top: 2px; }
.comment-actions { flex-wrap: wrap; gap: 5px; }
.comment-actions button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; background: var(--ui-paper); }
.comment-actions .icon { width: 13px; }
.post-actions { display: flex !important; justify-content: space-between; gap: 14px !important; margin-top: 5px; padding-top: 18px; border-top: 1px solid var(--ui-line) !important; }
.post-actions__primary, .post-actions__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.post-action { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 11px; background: var(--ui-paper-2); color: var(--ui-dim); font: 720 12px/1 var(--sans); cursor: pointer; }
.post-action:hover { background: var(--ui-signal-soft); color: var(--ui-signal); }
.post-action .icon { width: 15px; }
.post-action--danger:hover { background: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-paper)); color: var(--ui-danger); }
.pik-button { min-width: 104px; justify-content: center; border: 0; border-radius: 13px; background: color-mix(in srgb, var(--ui-rank) 10%, var(--ui-paper-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-rank) 28%, transparent); font-family: var(--sans); font-weight: 820; }
.pik-button:hover, .pik-button[aria-pressed="true"] { background: var(--ui-rank); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-rank) 28%, transparent); }
.pik-button__mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, currentColor 9%, transparent); }
.pik-button__mark .icon { width: 15px; }
.pik-button b { min-width: 24px; padding-left: 7px; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); text-align: center; font-variant-numeric: tabular-nums; }
.state-panel { border: 0; border-radius: 16px; background: var(--ui-paper-2); }
.empty-signal { display: none; }
.state-panel:not(.auth-required) { min-height: 108px; }
.profile-summary { align-items: center; padding: 24px; border-radius: 22px; background: var(--ui-paper-2); }
.collection-card[data-tone="violet"] { background: color-mix(in srgb, var(--ui-pick) 11%, var(--ui-paper-2)); }
.collection-card[data-tone="rose"] { background: color-mix(in srgb, #c64d70 11%, var(--ui-paper-2)); }
.collection-card[data-tone="gold"] { background: color-mix(in srgb, var(--ui-rank) 11%, var(--ui-paper-2)); }
.collection-card[data-tone="violet"]:has(input:checked) { background: var(--ui-pick-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-pick) 55%, transparent); }
.collection-card[data-tone="rose"]:has(input:checked) { background: color-mix(in srgb, #c64d70 16%, var(--ui-paper)); box-shadow: inset 0 0 0 2px color-mix(in srgb, #c64d70 52%, transparent); }
.collection-card[data-tone="gold"]:has(input:checked) { background: var(--ui-warm-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-rank) 50%, transparent); }

/* Profile decorations and Collection are earned identity, not generic content cards. */
.collection-card { grid-template-columns: 56px minmax(0, 1fr); }
.collection-emblem { position: relative; width: 54px; height: 61px; display: grid; place-items: start center; filter: drop-shadow(0 8px 10px rgb(28 35 38 / 13%)); }
.collection-emblem::after { content: ""; position: absolute; z-index: -1; left: 13px; right: 13px; bottom: 0; height: 22px; background: var(--ui-signal); clip-path: polygon(0 0, 100% 0, 82% 100%, 50% 72%, 18% 100%); opacity: .78; }
.collection-emblem .collection-glyph { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid var(--ui-paper); border-radius: 50%; background: var(--ui-ink); color: var(--ui-paper); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-ink) 48%, transparent), inset 0 0 0 1px rgb(255 255 255 / 24%); font-size: 18px; }
.collection-mark { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* A drawn badge supplies its own silhouette: do not wrap it in the legacy
   medal ring, ribbon tail or painted background. Unknown glyphs keep theirs. */
.collection-mark--art { display: block; object-fit: contain; flex-shrink: 0; }
/* Only system verification marks sit beside names. This is not a badge picker. */
.verified-name { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; vertical-align: middle; }
.verified-name__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A verified entity heading remains a block below its eyebrow label. The
   inline name treatment is only for rows/cards. */
.entity-showcase__copy > h1.verified-name { display: flex; width: fit-content; }
.verification-trigger { display: inline-grid; place-items: center start; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; margin: calc((1em - 44px) / 2) 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.verification-trigger .verification-icon { width: 1em; height: 1em; }
.verification-mark--static { display: inline-grid; place-items: center; flex: 0 0 1em; width: 1em; height: 1em; line-height: 1; }
.verification-mark--static .verification-icon { width: 1em; height: 1em; }
.verification-trigger:focus-visible, .verification-dialog__close:focus-visible { outline: 2px solid var(--ui-pick); outline-offset: 2px; }
.verification-icon { display: block; width: 24px; height: 24px; flex-shrink: 0; overflow: visible; }
.verification-icon[data-verification-color="black"] { filter: drop-shadow(0 0 .6px #ddd); }
.verification-dialog { width: min(420px, calc(100vw - 32px)); max-height: min(640px, calc(100dvh - 48px)); padding: 20px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); color: var(--ui-ink); box-shadow: 0 20px 64px rgb(0 0 0 / 24%); }
.verification-dialog::backdrop { background: rgb(0 0 0 / 38%); }
.verification-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.verification-dialog__head h2 { margin: 0; font-size: 1.05rem; }
.verification-dialog__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 24px; cursor: pointer; }
.verification-dialog > p, .verification-record > p { color: var(--ui-dim); font-size: .8rem; line-height: 1.65; }
.verification-record { border-top: 1px solid var(--ui-line); padding: 6px 0; }
.verification-record summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 0; cursor: pointer; font-size: .88rem; font-weight: 700; }
.verification-record .verification-icon { width: 1.1em; height: 1.1em; }
.verification-record summary::after { content: "+"; margin-left: auto; color: var(--ui-dim); }
.verification-record[open] summary::after { content: "−"; }
.verification-record > p { margin: 2px 0 10px 34px; overflow-wrap: anywhere; }
.verification-record__scope { display: block; margin-top: 6px; font-size: .75rem; }
.collection-emblem:has(.collection-mark--art) { height: 54px; place-items: center; filter: none; }
.collection-emblem:has(.collection-mark--art)::after { display: none; }
.collection-emblem .collection-glyph:has(.collection-mark--art) { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.collection-emblem .collection-mark--art { width: 48px; height: 48px; }
[data-tone="violet"] > .collection-emblem::after { background: var(--ui-pick); }
[data-tone="rose"] > .collection-emblem::after { background: #c64d70; }
[data-tone="gold"] > .collection-emblem::after { background: var(--ui-rank); }
.profile-medallion { --profile-core-size: 62px; position: relative; width: 72px; height: 72px; display: inline-grid; flex: none; place-items: center; overflow: visible; color: var(--ui-ink); }
/* Reserve equipped artwork only; legacy no-frame footprints and photo sizes
 * remain unchanged, including smaller comment and mobile identity variants. */
.profile-medallion[data-profile-frame="asset"] {
  min-width: calc(var(--profile-core-size) / var(--profile-frame-aperture, .82));
  min-height: calc(var(--profile-core-size) / var(--profile-frame-aperture, .82));
}
.profile-medallion[data-profile-frame="asset"]:has(.profile-medallion__frame[data-frame-layout="crown-wrap"]) {
  min-height: calc(var(--profile-core-size) / var(--profile-frame-aperture) * 1.4);
}
.profile-medallion[data-profile-frame="asset"]:has(.profile-medallion__frame[data-frame-layout="moon-kitten-wrap"]) {
  min-height: calc(var(--profile-core-size) / var(--profile-frame-aperture) * 1.14);
}
.identity-button:has(> .profile-medallion[data-profile-frame="asset"]) { width: auto; min-width: 44px; height: auto; min-height: 44px; }
.profile-menu__home:has(> .profile-medallion[data-profile-frame="asset"]) { grid-template-columns: max-content minmax(0, 1fr) auto auto; }
.profile-settings-preview:has(> .profile-medallion[data-profile-frame="asset"]) { grid-template-columns: max-content minmax(0, 1fr); }
/* An equipped asset is independent from badges; no asset means no decorative ring.
 * The photo stays circular. Wings/ears/flowers can extend outside the circle and
 * must not be clipped, rounded, recolored, or participate in pointer hit testing.
 */
.profile-medallion__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--profile-core-size) / var(--profile-frame-aperture, .82));
  height: calc(var(--profile-core-size) / var(--profile-frame-aperture, .82));
  transform: translate(-50%, -50%);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  mask: none;
  -webkit-mask: none;
  pointer-events: none;
  user-select: none;
}
.profile-medallion__frame-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: none;
  filter: none;
  opacity: 1;
  pointer-events: none;
}
.profile-medallion::before,
.profile-medallion__frame::before,
.profile-medallion__frame::after { content: none; }
.profile-medallion__frame[data-frame-effect="glow"] .profile-medallion__frame-art { filter: drop-shadow(0 0 3px rgb(255 255 255 / 45%)); }
.profile-medallion__frame[data-frame-effect="shimmer"] .profile-medallion__frame-art { animation: profile-frame-shimmer 2.8s ease-in-out infinite; animation-play-state: paused; }
.profile-medallion__fx {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  mask-image: var(--profile-frame-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  -webkit-mask-image: var(--profile-frame-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  pointer-events: none;
}
.profile-medallion__fx-paint { position: absolute; inset: 0; pointer-events: none; }
/* Deliberately photo-interacting collectibles. The avatar itself is neither
 * copied, transformed nor recolored; these named effects have their own layer. */
.profile-medallion__photo-fx {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--profile-frame-aperture) * 100%); height: calc(var(--profile-frame-aperture) * 100%);
  transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
}
.profile-medallion__frame:has(> .profile-medallion__photo-fx) > .profile-medallion__frame-art { position: relative; z-index: 1; }
.profile-medallion__photo-fx-paint { position: absolute; pointer-events: none; animation-play-state: paused; }
.profile-medallion__photo-fx[data-photo-effect="hologram-echo"] { overflow: hidden; border-radius: 50%; }
[data-photo-effect="hologram-echo"] .profile-medallion__photo-fx-paint {
  left: 3%; width: 94%; height: 10%; opacity: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgb(255 58 105 / 62%) 2px 3px), linear-gradient(90deg, rgb(255 36 84 / 80%), transparent 36% 65%, rgb(136 237 255 / 72%));
  clip-path: polygon(0 10%, 62% 10%, 62% 0, 100% 0, 100% 70%, 78% 70%, 78% 100%, 0 100%);
  animation: profile-photo-echo 7.6s ease-in-out infinite; animation-play-state: paused;
}
[data-photo-effect="hologram-echo"] [data-photo-part="a"] { top: 18%; }
[data-photo-effect="hologram-echo"] [data-photo-part="b"] { top: 48%; height: 6%; animation-delay: -2.7s; }
[data-photo-effect="hologram-echo"] [data-photo-part="c"] { top: 77%; height: 8%; animation-delay: -5.1s; }
[data-photo-effect="stellar-drift"] .profile-medallion__photo-fx-paint {
  width: 3px; height: 3px; border-radius: 50%; background: #e5fbff;
  box-shadow: 0 0 3px 1px #4b9cff, 0 0 7px rgb(38 111 255 / 75%);
  animation: profile-stellar-drift 6.5s ease-in-out infinite; animation-play-state: paused; opacity: .4;
}
[data-photo-effect="stellar-drift"] [data-photo-part="a"] { left: 16%; top: 17%; }
[data-photo-effect="stellar-drift"] [data-photo-part="b"] { left: 69%; top: 7%; animation-delay: -1.2s; animation-duration: 7.8s; }
[data-photo-effect="stellar-drift"] [data-photo-part="c"] { left: 93%; top: 40%; animation-delay: -3.4s; }
[data-photo-effect="stellar-drift"] [data-photo-part="d"] { left: 74%; top: 84%; animation-delay: -4.8s; animation-duration: 8.6s; }
[data-photo-effect="stellar-drift"] [data-photo-part="e"] { left: 28%; top: 94%; animation-delay: -2.3s; }
[data-photo-effect="stellar-drift"] [data-photo-part="f"] { left: 4%; top: 65%; animation-delay: -5.7s; animation-duration: 7.2s; }
.profile-medallion__frame[data-frame-effect="star-glint"] .profile-medallion__fx-paint {
  inset: auto; width: 13%; height: 13%;
  background: radial-gradient(ellipse, white 0 7%, rgb(177 244 255 / 85%) 14%, rgb(172 150 255 / 30%) 30%, transparent 69%);
  animation: profile-star-glint 5.8s ease-in-out infinite; animation-play-state: paused; opacity: .2;
}
.profile-medallion__frame[data-frame-effect="star-glint"] [data-frame-part="a"] { left: 8%; top: 40%; }
.profile-medallion__frame[data-frame-effect="star-glint"] [data-frame-part="b"] { left: 40%; top: 5%; animation-delay: -1.1s; }
.profile-medallion__frame[data-frame-effect="star-glint"] [data-frame-part="c"] { left: 73%; top: 23%; animation-delay: -3.5s; }
.profile-medallion__frame[data-frame-effect="star-glint"] [data-frame-part="d"] { left: 78%; top: 61%; animation-delay: -4.6s; }
.profile-medallion__frame[data-frame-effect="star-glint"] [data-frame-part="e"] { left: 45%; top: 83%; animation-delay: -2.4s; }
.profile-medallion__frame[data-frame-effect="star-glint"] [data-frame-part="f"] { left: 12%; top: 67%; animation-delay: -5s; }
@keyframes profile-photo-echo {
  0%, 35%, 100% { opacity: 0; transform: translateX(-3%); }
  12% { opacity: .32; transform: translateX(2%); }
  25% { opacity: .12; transform: translateX(4%); }
}
@keyframes profile-stellar-drift {
  0%, 100% { opacity: .15; transform: translate(-2px, 2px) scale(.55); }
  43% { opacity: .95; transform: translate(2px, -2px) scale(1); }
  76% { opacity: .35; transform: translate(3px, 1px) scale(.7); }
}
@keyframes profile-star-glint { 0%, 55%, 100% { opacity: .08; } 22% { opacity: .86; } 35% { opacity: .35; } }
/* Per-drawing fit: move existing transparent artwork, never resize the photo.
 * Keep the original until every translated source image has loaded. Static
 * contact remains intact when motion is paused or reduced. */
.profile-medallion__fit-art,
.profile-medallion__fit-light { display: none; position: absolute; inset: 0; pointer-events: none; }
.profile-medallion__fit-part { position: absolute; inset: 0; transform: translate(var(--frame-fit-x, 0%), var(--frame-fit-y, 0%)); pointer-events: none; }
.profile-medallion__fit-art img { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; background: none; }
@supports (clip-path: inset(0)) {
  .profile-medallion[data-frame-fit-ready="true"] .profile-medallion__fit-art,
  .profile-medallion[data-frame-fit-ready="true"] .profile-medallion__fit-light { display: block; }
  .profile-medallion[data-frame-fit-ready="true"] .profile-medallion__frame[data-frame-layout] > .profile-medallion__frame-art { visibility: hidden; }
}
.profile-medallion__fit-light {
  mask-image: radial-gradient(circle closest-side, transparent 0 calc(var(--profile-frame-aperture) * 100%), #000 calc(var(--profile-frame-aperture) * 100% + .5%));
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 calc(var(--profile-frame-aperture) * 100%), #000 calc(var(--profile-frame-aperture) * 100% + .5%));
  mask-mode: alpha;
}
.profile-medallion__frame[data-frame-effect="glow"] .profile-medallion__fit-art img { filter: drop-shadow(0 0 3px rgb(255 255 255 / 45%)); }
.profile-medallion__frame[data-frame-effect="shimmer"] .profile-medallion__fit-art img { animation: profile-frame-shimmer 2.8s ease-in-out infinite; animation-play-state: paused; }
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .profile-medallion__fx { display: block; }
}
/* Different light families, never a rotating or recolored profile photo. */
.profile-medallion__frame[data-frame-effect="cel-sweep"] .profile-medallion__fx-paint {
  background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / 90%) 48%, transparent 54%);
  background-size: 300% 100%;
  opacity: .55;
  animation: profile-frame-cel-sweep 4.8s ease-in-out infinite;
  animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="neon-flow"] .profile-medallion__fx-paint {
  inset: -25%;
  background: conic-gradient(from 20deg, transparent 0deg 215deg, rgb(114 248 255 / 85%) 252deg, rgb(210 147 255 / 80%) 277deg, transparent 303deg);
  opacity: .64;
  animation: profile-frame-neon-flow 6.4s linear infinite;
  animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="hologram-flow"] .profile-medallion__fx-paint {
  background: linear-gradient(125deg, rgb(136 246 255 / 60%), rgb(221 158 255 / 65%) 32%, rgb(255 191 220 / 60%) 58%, rgb(138 245 236 / 65%) 82%, rgb(136 246 255 / 60%));
  background-size: 240% 180%;
  opacity: .38;
  animation: profile-frame-hologram-flow 9s ease-in-out infinite;
  animation-play-state: paused;
}
/* Local light choreography: two leaf sprigs, three plate seams, lower water.
 * Only light planes move. Their parent still uses the source artwork's alpha;
 * these regions do not deform the original PNG or the circular profile photo.
 */
.profile-medallion__frame[data-frame-effect="dew-trace"] .profile-medallion__fx-paint {
  inset: auto;
  width: 12%;
  height: 12%;
  border-radius: 0;
  background: radial-gradient(ellipse, rgb(231 255 213 / 92%) 0 8%, rgb(177 255 225 / 55%) 22%, transparent 65%);
  opacity: 0;
}
.profile-medallion__frame[data-frame-effect="dew-trace"] [data-frame-part="a"] {
  left: 9%; top: 71%;
  animation: profile-frame-dew-trace-a 7.2s ease-in-out infinite;
  animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="dew-trace"] [data-frame-part="b"] {
  left: 82%; top: 10%;
  animation: profile-frame-dew-trace-b 7.2s ease-in-out infinite;
  animation-delay: -3.6s;
  animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="plate-trace"] .profile-medallion__fx-paint {
  inset: auto;
  width: 18%; height: 56%; top: 15%;
  background: linear-gradient(165deg, transparent 35%, rgb(255 169 155 / 88%) 46%, rgb(255 241 226 / 85%) 49%, transparent 54%);
  background-size: 100% 260%;
  opacity: 0;
  animation: profile-frame-plate-trace 6.8s ease-in-out infinite;
  animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="plate-trace"] [data-frame-part="a"] { left: 1%; }
.profile-medallion__frame[data-frame-effect="plate-trace"] [data-frame-part="b"] { right: 1%; animation-delay: -2.1s; }
.profile-medallion__frame[data-frame-effect="plate-trace"] [data-frame-part="c"] { left: 36%; top: 77%; width: 28%; height: 11%; animation-delay: -4.2s; }
.profile-medallion__frame[data-frame-effect="pond-ripple"] .profile-medallion__fx-paint {
  inset: auto;
  left: 17%; top: 88%; width: 66%; height: 8%;
  background: radial-gradient(ellipse, transparent 42%, rgb(220 255 253 / 85%) 47%, rgb(113 237 244 / 65%) 50%, transparent 56%);
  opacity: 0;
  transform-origin: 50% 50%;
  animation: profile-frame-pond-ripple 6.2s ease-out infinite;
  animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="pond-ripple"] [data-frame-part="b"] { animation-delay: -3.1s; }
/* Artwork-specific light planes. The original alpha is the outside mask; this
 * second, stationary mask removes the photo circle even when a source has
 * almost-transparent residue. It never clips the outer artwork into a ring. */
.profile-medallion__frame[data-frame-effect="bolt-tick"] .profile-medallion__fx-paint,
.profile-medallion__frame[data-frame-effect="pane-glow"] .profile-medallion__fx-paint,
.profile-medallion__frame[data-frame-effect="prism-refraction"] .profile-medallion__fx-paint {
  inset: 0;
  opacity: 0;
  mask-image: radial-gradient(circle closest-side, transparent 0 calc(var(--profile-frame-aperture) * 100%), #000 calc(var(--profile-frame-aperture) * 100% + .5%));
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 calc(var(--profile-frame-aperture) * 100%), #000 calc(var(--profile-frame-aperture) * 100% + .5%));
  mask-mode: alpha;
}
.profile-medallion__frame[data-frame-effect="bolt-tick"] .profile-medallion__fx-paint {
  background: linear-gradient(120deg, transparent 38%, rgb(140 246 255 / 85%) 46%, rgb(238 255 255 / 92%) 49%, transparent 54%);
  background-size: 220% 180%;
  animation: profile-frame-bolt-tick 5.6s ease-out infinite;
  animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="bolt-tick"] [data-frame-part="a"] { clip-path: inset(2% 35% 88%); }
.profile-medallion__frame[data-frame-effect="bolt-tick"] [data-frame-part="b"] { clip-path: inset(35% 2% 35% 88%); animation-delay: -1.4s; }
.profile-medallion__frame[data-frame-effect="bolt-tick"] [data-frame-part="c"] { clip-path: inset(88% 35% 2%); animation-delay: -2.8s; }
.profile-medallion__frame[data-frame-effect="bolt-tick"] [data-frame-part="d"] { clip-path: inset(35% 88% 35% 2%); animation-delay: -4.2s; }
/* Eight individual glass cells, traced inside the drawn lead boundaries.
 * Their irregular polygons are not eight large sectors of the whole ring. */
.profile-medallion__frame[data-frame-effect="pane-glow"] .profile-medallion__fx-paint {
  background: linear-gradient(120deg, rgb(235 255 252 / 78%), rgb(255 245 224 / 85%) 52%, rgb(233 225 255 / 75%));
  animation: profile-frame-pane-glow 12s ease-in-out infinite;
  animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="pane-glow"] [data-frame-part="a"] { clip-path: polygon(45.30% 5.90%, 46.25% 7.02%, 47.53% 8.69%, 48.64% 10.53%, 49.20% 11.72%, 49.12% 12.20%, 43.86% 8.77%, 44.02% 7.66%, 44.66% 6.38%); }
.profile-medallion__frame[data-frame-effect="pane-glow"] [data-frame-part="b"] { clip-path: polygon(80.22% 25.04%, 82.78% 25.04%, 84.37% 25.36%, 85.25% 25.84%, 85.01% 26.63%, 84.37% 27.35%, 83.49% 27.67%, 82.70% 27.59%); animation-delay: -1.5s; }
.profile-medallion__frame[data-frame-effect="pane-glow"] [data-frame-part="c"] { clip-path: polygon(91.23% 43.70%, 92.26% 44.98%, 93.06% 46.25%, 92.98% 46.73%, 92.03% 47.77%, 90.83% 48.80%, 89.71% 49.28%, 88.68% 49.36%); animation-delay: -3s; }
.profile-medallion__frame[data-frame-effect="pane-glow"] [data-frame-part="d"] { clip-path: polygon(78.61% 75.02%, 78.77% 74.87%, 81.14% 75.66%, 82.25% 76.29%, 83.35% 77.79%, 83.59% 78.58%, 83.59% 78.73%, 82.40% 79.52%, 81.69% 79.60%, 81.14% 79.44%, 80.11% 78.66%, 79.48% 77.71%); animation-delay: -4.5s; }
.profile-medallion__frame[data-frame-effect="pane-glow"] [data-frame-part="e"] { clip-path: polygon(49.60% 88.44%, 49.60% 92.11%, 49.20% 93.14%, 48.56% 93.78%, 47.85% 94.10%, 47.05% 94.10%, 46.01% 93.46%); animation-delay: -6s; }
.profile-medallion__frame[data-frame-effect="pane-glow"] [data-frame-part="f"] { clip-path: polygon(13.84% 73.64%, 14.79% 72.53%, 15.27% 72.21%, 16.15% 71.89%, 19.66% 72.61%, 21.09% 73.25%, 21.01% 74.12%, 20.37% 74.44%, 17.03% 75.16%, 15.35% 74.76%, 13.84% 73.80%); animation-delay: -7.5s; }
.profile-medallion__frame[data-frame-effect="pane-glow"] [data-frame-part="g"] { clip-path: polygon(9.53% 56.66%, 9.85% 55.70%, 12.56% 51.48%, 12.72% 51.32%, 13.04% 51.40%, 13.28% 52.43%, 12.88% 54.11%, 11.92% 55.62%, 10.33% 56.74%, 9.53% 56.90%); animation-delay: -9s; }
.profile-medallion__frame[data-frame-effect="pane-glow"] [data-frame-part="h"] { clip-path: polygon(21.78% 19.89%, 22.25% 18.34%, 23.72% 15.69%, 23.80% 15.69%, 23.96% 15.85%, 25.44% 18.10%, 25.75% 19.35%, 25.44% 21.21%, 24.66% 22.54%, 23.88% 23.24%, 23.80% 23.24%, 22.64% 23.00%, 22.48% 22.85%, 22.17% 22.30%); animation-delay: -10.5s; }
/* Crystal colors travel inside five separate clusters, then three existing
 * drawn sparkle sites answer at different times. No whole-image hue filter. */
.profile-medallion__frame[data-frame-effect="prism-refraction"] .profile-medallion__fx-paint {
  background: linear-gradient(125deg, transparent 12%, rgb(134 244 255 / 70%) 35%, rgb(219 168 255 / 65%) 49%, rgb(255 205 231 / 72%) 62%, transparent 86%);
  background-size: 230% 170%;
  animation: profile-frame-prism-color 11.2s ease-in-out infinite;
  animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="prism-refraction"] [data-frame-part="a"] { clip-path: inset(2% 43% 87% 42%); }
.profile-medallion__frame[data-frame-effect="prism-refraction"] [data-frame-part="b"] { clip-path: inset(28% 86% 43% 0); animation-delay: -2.1s; }
.profile-medallion__frame[data-frame-effect="prism-refraction"] [data-frame-part="c"] { clip-path: inset(28% 2% 39% 87%); animation-delay: -6.3s; }
.profile-medallion__frame[data-frame-effect="prism-refraction"] [data-frame-part="d"] { clip-path: inset(59% 57% 7% 4%); animation-delay: -4.2s; }
.profile-medallion__frame[data-frame-effect="prism-refraction"] [data-frame-part="e"] { clip-path: inset(71% 10% 7% 64%); animation-delay: -8.4s; }
.profile-medallion__frame[data-frame-effect="prism-refraction"] :is([data-frame-part="f"], [data-frame-part="g"], [data-frame-part="h"]) {
  background: radial-gradient(ellipse 3.5% 4.5% at var(--prism-star-x) var(--prism-star-y), rgb(255 255 255 / 95%) 0 8%, rgb(218 244 255 / 60%) 30%, transparent 72%);
  background-size: 100% 100%;
  animation: profile-frame-prism-spark 8.8s ease-in-out infinite;
  animation-play-state: paused;
}
.profile-medallion__frame[data-frame-effect="prism-refraction"] [data-frame-part="f"] { --prism-star-x: 20%; --prism-star-y: 72%; animation-delay: -1.8s; }
.profile-medallion__frame[data-frame-effect="prism-refraction"] [data-frame-part="g"] { --prism-star-x: 74.5%; --prism-star-y: 80.5%; animation-delay: -4.7s; }
.profile-medallion__frame[data-frame-effect="prism-refraction"] [data-frame-part="h"] { --prism-star-x: 46.5%; --prism-star-y: 5%; animation-delay: -7.2s; }
/* These two rigs belong to the exact source PNGs allowed by the renderer.
 * Their partition lines cross transparent gaps: central ribbon bow and lower
 * rabbit paws stay fixed. The original files and circular photo are unchanged.
 * Full artwork remains the fallback when clipping or motion is unavailable. */
.profile-medallion__rig { display: none; position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.profile-medallion__rig-part { position: absolute; inset: 0; pointer-events: none; animation-play-state: paused; }
.profile-medallion__rig-part > img { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; pointer-events: none; }
.profile-medallion__frame[data-frame-effect="ribbon-sway"] { --ribbon-sway-a: -.55deg; --ribbon-sway-b: .75deg; }
.profile-medallion__frame[data-frame-effect="ear-flick"] { --ear-flick-a: -2.5deg; --ear-flick-b: 2.5deg; }
/* The photo exclusion belongs to the stationary wrapper; applying it again
 * inside a translated source piece would move the hole onto the photograph. */
.profile-medallion__frame .profile-medallion__fit-light .profile-medallion__fx-paint { mask-image: none; -webkit-mask-image: none; }
@supports (clip-path: inset(0)) {
  .profile-medallion[data-frame-rig-ready="true"] .profile-medallion__rig { display: block; }
  .profile-medallion[data-frame-rig-ready="true"] .profile-medallion__frame[data-frame-effect="ribbon-sway"] > .profile-medallion__frame-art { clip-path: inset(0 35%); }
  .profile-medallion__frame[data-frame-effect="ribbon-sway"] [data-rig-part="a"] {
    clip-path: inset(0 65% 0 0); transform-origin: 24% 12%;
    animation: profile-frame-ribbon-a 6.8s ease-in-out infinite; animation-play-state: paused;
  }
  .profile-medallion__frame[data-frame-effect="ribbon-sway"] [data-rig-part="b"] {
    clip-path: inset(0 0 0 65%); transform-origin: 76% 12%;
    animation: profile-frame-ribbon-b 8.2s ease-in-out infinite; animation-play-state: paused;
  }
  .profile-medallion[data-frame-rig-ready="true"] .profile-medallion__frame[data-frame-effect="ear-flick"] > .profile-medallion__frame-art { clip-path: inset(40% 0 0); }
  .profile-medallion__frame[data-frame-effect="ear-flick"] [data-rig-part="a"] {
    clip-path: inset(0 50% 60% 0); transform-origin: 24.5% 24.5%;
    animation: profile-frame-ear-a 7.8s ease-in-out infinite; animation-play-state: paused;
  }
  .profile-medallion__frame[data-frame-effect="ear-flick"] [data-rig-part="b"] {
    clip-path: inset(0 0 60% 50%); transform-origin: 75.5% 24.5%;
    animation: profile-frame-ear-b 7.8s ease-in-out infinite; animation-play-state: paused;
  }
}
/* A viewport controller may resume this; unmounted/offscreen art stays static. */
.profile-medallion[data-frame-in-view="true"] .profile-medallion__frame-art,
.profile-medallion[data-frame-in-view="true"] .profile-medallion__fit-art img,
.profile-medallion[data-frame-in-view="true"] .profile-medallion__photo-fx-paint,
.profile-medallion[data-frame-in-view="true"] .profile-medallion__fx-paint,
.profile-medallion[data-frame-in-view="true"] .profile-medallion__rig-part { animation-play-state: running; }
.profile-medallion--header .profile-medallion__fx,
.profile-medallion--author .profile-medallion__fx { opacity: .6; }
/* Small avatars keep a single quiet local accent, not two simultaneous waves. */
.profile-medallion--header .profile-medallion__frame[data-frame-effect="pond-ripple"] [data-frame-part="b"],
.profile-medallion--author .profile-medallion__frame[data-frame-effect="pond-ripple"] [data-frame-part="b"] { display: none; }
.profile-medallion--header .profile-medallion__frame[data-frame-effect="ribbon-sway"],
.profile-medallion--author .profile-medallion__frame[data-frame-effect="ribbon-sway"] { --ribbon-sway-a: -.3deg; --ribbon-sway-b: .4deg; }
.profile-medallion--header .profile-medallion__frame[data-frame-effect="ear-flick"],
.profile-medallion--author .profile-medallion__frame[data-frame-effect="ear-flick"] { --ear-flick-a: -1.25deg; --ear-flick-b: 1.25deg; }
/* Four quiet glass cells and three crystal clusters plus one sparkle suffice
 * beside small names. Detail is retained in menu/profile previews. */
.profile-medallion--header .profile-medallion__frame[data-frame-effect="pane-glow"] :is([data-frame-part="b"], [data-frame-part="d"], [data-frame-part="f"], [data-frame-part="h"]),
.profile-medallion--author .profile-medallion__frame[data-frame-effect="pane-glow"] :is([data-frame-part="b"], [data-frame-part="d"], [data-frame-part="f"], [data-frame-part="h"]),
.profile-medallion--header .profile-medallion__frame[data-frame-effect="prism-refraction"] :is([data-frame-part="b"], [data-frame-part="c"], [data-frame-part="g"], [data-frame-part="h"]),
.profile-medallion--author .profile-medallion__frame[data-frame-effect="prism-refraction"] :is([data-frame-part="b"], [data-frame-part="c"], [data-frame-part="g"], [data-frame-part="h"]) { display: none; }
@keyframes profile-frame-bolt-tick {
  0% { opacity: 0; background-position: 100% 50%; }
  6% { opacity: .72; }
  13% { opacity: .3; }
  20%, 100% { opacity: 0; background-position: 0% 50%; }
}
@keyframes profile-frame-prism-color {
  0%, 100% { opacity: 0; background-position: 0% 15%; }
  20% { opacity: .28; }
  45% { opacity: .42; background-position: 100% 85%; }
  68%, 88% { opacity: 0; background-position: 100% 85%; }
}
@keyframes profile-frame-pane-glow {
  0%, 25%, 100% { opacity: 0; }
  10% { opacity: .68; }
  18% { opacity: .3; }
}
@keyframes profile-frame-prism-spark {
  0%, 12%, 32%, 100% { opacity: 0; }
  21% { opacity: .8; }
  26% { opacity: .26; }
}
@keyframes profile-frame-ribbon-a {
  0%, 100% { transform: rotate(0deg); }
  48% { transform: rotate(var(--ribbon-sway-a)); }
}
@keyframes profile-frame-ribbon-b {
  0%, 100% { transform: rotate(0deg); }
  62% { transform: rotate(var(--ribbon-sway-b)); }
}
@keyframes profile-frame-ear-a {
  0%, 12%, 31%, 100% { transform: rotate(0deg); }
  19%, 23% { transform: rotate(var(--ear-flick-a)); }
}
@keyframes profile-frame-ear-b {
  0%, 55%, 76%, 100% { transform: rotate(0deg); }
  62%, 66% { transform: rotate(var(--ear-flick-b)); }
}
@keyframes profile-frame-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: .82; }
}
@keyframes profile-frame-cel-sweep {
  0%, 30% { background-position: 150% 50%; }
  76%, 100% { background-position: -50% 50%; }
}
@keyframes profile-frame-neon-flow { to { transform: rotate(1turn); } }
@keyframes profile-frame-hologram-flow {
  0%, 100% { background-position: 0% 25%; }
  50% { background-position: 100% 75%; }
}
@keyframes profile-frame-dew-trace-a {
  0%, 18%, 75%, 100% { opacity: 0; transform: translate(0, 80%); }
  30% { opacity: .7; transform: translate(6%, 32%); }
  52% { opacity: .56; transform: translate(-2%, -62%); }
  68% { opacity: 0; transform: translate(0, -120%); }
}
@keyframes profile-frame-dew-trace-b {
  0%, 18%, 75%, 100% { opacity: 0; transform: translate(0, 10%); }
  30% { opacity: .68; transform: translate(8%, 40%); }
  52% { opacity: .5; transform: translate(40%, 100%); }
  68% { opacity: 0; transform: translate(50%, 150%); }
}
@keyframes profile-frame-plate-trace {
  0%, 12% { opacity: 0; background-position: 50% 100%; }
  20% { opacity: .6; }
  38% { opacity: .46; }
  48%, 100% { opacity: 0; background-position: 50% 0%; }
}
@keyframes profile-frame-pond-ripple {
  0%, 8% { opacity: 0; transform: scale(.44, .55); }
  23% { opacity: .55; }
  64% { opacity: .24; transform: scale(1, 1.05); }
  83%, 100% { opacity: 0; transform: scale(1.28, 1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .profile-medallion__photo-fx { display: none; }
  .profile-medallion__photo-fx-paint,
  .profile-medallion__fit-art img { animation: none !important; }
  .profile-medallion__frame[data-frame-effect] .profile-medallion__frame-art { animation: none; opacity: 1; clip-path: none; }
  .profile-medallion[data-frame-rig-ready="true"] .profile-medallion__frame[data-frame-effect] > .profile-medallion__frame-art { clip-path: none; }
  .profile-medallion__frame[data-frame-effect] .profile-medallion__fx-paint { animation: none; }
  .profile-medallion__rig { display: none; }
  .profile-medallion[data-frame-rig-ready="true"] .profile-medallion__rig { display: none; }
  .profile-medallion__rig-part { animation: none; transform: none; }
  .profile-medallion__fx { display: none; }
}
.profile-medallion__core { width: 62px; height: 62px; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 50%; background: var(--ui-paper-2); color: var(--ui-ink); box-shadow: none; font-size: 22px; font-weight: 900; }
.profile-medallion__default-symbol, .avatar-settings__default-symbol {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--ui-ink); color: var(--ui-paper);
}
.profile-medallion__default-symbol::before, .avatar-settings__default-symbol::before {
  content: ""; width: 68%; height: 68%; background: currentColor;
  -webkit-mask: url("/assets/brand/glyph.svg") center / contain no-repeat;
  mask: url("/assets/brand/glyph.svg") center / contain no-repeat;
}
/* 사진은 원을 채운다. `cover` 가 아니면 정사각이 아닌 것이 들어왔을 때 찌그러진다. */
.profile-medallion__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-medallion__seal { display: none; }
/* 프로필 사진 고르기. 원 안에서 자르는 것을 그대로 보여 준다 — 미리보기와 저장 결과가 같아야 한다. */
.avatar-settings { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
.avatar-settings__stage { position: relative; width: 132px; height: 132px; }
.avatar-settings__canvas, .avatar-settings__current {
  position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center;
  overflow: hidden; border-radius: 50%; background: var(--ui-ink); color: var(--ui-paper);
  font-size: 44px; font-weight: 900; touch-action: none; cursor: grab;
}
.avatar-settings__current img { width: 100%; height: 100%; object-fit: cover; }
.avatar-settings__current[data-empty] { cursor: default; }
/* 사진 위에 겹치는 층. 저장되는 것은 아래 사진뿐이다 — 이 고리는 굽지 않는다. */
.avatar-settings__ring { position: absolute; inset: 0; border: 2px solid currentColor; border-radius: 50%; opacity: .5; pointer-events: none; }
.avatar-settings__controls { display: grid; gap: 9px; }
.avatar-settings__controls p { margin: 0; color: var(--ui-muted); font-size: 13px; }
.avatar-settings__pick { justify-self: start; }
.avatar-settings__zoom { display: grid; gap: 5px; font-size: 13px; color: var(--ui-muted); }
.avatar-settings__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 560px) {
  .avatar-settings { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .avatar-settings__controls { justify-items: center; }
  .avatar-settings__pick { justify-self: center; }
}

.profile-medallion__seal .collection-mark { width: 13px; height: 13px; color: var(--ui-paper); stroke-width: 2; }
/* These are minimum no-frame footprints; equipped art may reserve more room. */
.profile-medallion--header { --profile-core-size: 28px; width: 34px; height: 34px; }
.profile-medallion--header .profile-medallion__core { width: 28px; height: 28px; border-width: 2px; font-size: 11px; }
.profile-medallion--header .profile-medallion__frame::after { width: 26%; height: 26%; box-shadow: 0 0 0 1.5px var(--ui-paper); }
.profile-medallion--header::before { inset: -4px; opacity: .1; }
.profile-medallion--header .profile-medallion__seal { right: -2px; bottom: -1px; width: 14px; height: 14px; border-width: 2px; border-radius: 5px; }
.profile-medallion--header .profile-medallion__seal .collection-mark { width: 8px; height: 8px; }
.profile-medallion--menu { --profile-core-size: 36px; width: 42px; height: 42px; }
.profile-medallion--menu .profile-medallion__core { width: 36px; height: 36px; border-width: 2px; font-size: 12px; }
.profile-medallion--menu .profile-medallion__seal { width: 16px; height: 16px; border-width: 2px; border-radius: 5px; }
.profile-medallion--menu .profile-medallion__seal .collection-mark { width: 9px; height: 9px; }
.profile-medallion--author { --profile-core-size: 26px; width: 31px; height: 31px; }
.profile-medallion--author .profile-medallion__core { width: 26px; height: 26px; border-width: 2px; font-size: 10px; }
.profile-medallion--author .profile-medallion__frame::after { width: 26%; height: 26%; box-shadow: 0 0 0 1.5px var(--ui-paper); }
.profile-medallion--author::before { inset: -4px; opacity: .1; }
.profile-medallion--author .profile-medallion__seal { right: -3px; bottom: -2px; width: 13px; height: 13px; border-width: 2px; border-radius: 4px; }
.profile-medallion--author .profile-medallion__seal .collection-mark { width: 7px; height: 7px; }
.profile-medallion--profile { --profile-core-size: 58px; width: 68px; height: 68px; }
.profile-medallion--profile .profile-medallion__core { width: 58px; height: 58px; font-size: 24px; }
.profile-medallion--profile .profile-medallion__seal { right: -2px; bottom: -1px; width: 25px; height: 25px; }
/* A separately chosen ordinary badge touches the photo's lower-right edge.
   Verification roles and the four-item showcase never choose this badge. */
.profile-medallion__badge { position: absolute; left: calc(50% + var(--profile-core-size, 62px) * .35355); top: calc(50% + var(--profile-core-size, 62px) * .35355); transform: translate(-50%, -50%); width: var(--profile-badge-size, 24px); height: var(--profile-badge-size, 24px); z-index: 3; display: block; object-fit: contain; border: 0; border-radius: 0; background: none; box-shadow: none; pointer-events: none; user-select: none; }
.profile-medallion--header { --profile-badge-size: 14px; }
.profile-medallion--menu { --profile-badge-size: 16px; }
.profile-medallion--author { --profile-badge-size: 13px; }
.profile-medallion--profile { --profile-badge-size: 25px; }
.profile-settings-preview { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 20px; padding: 22px; border-radius: 18px; background: var(--ui-paper-2); }
.profile-settings-preview h3 { margin: 5px 0 7px; font-size: 1.25rem; }
.profile-settings-preview p { max-width: 58ch; margin: 0; color: var(--ui-dim); line-height: 1.55; }
.profile-settings-preview .text-button { margin-top: 10px; }
.author-identity { display: inline-flex; align-items: center; gap: 8px; }

/* Empty ad responses must not reserve a rail or leave short posts floating in a large card. */
.post-layout--solo { grid-template-columns: minmax(0, 960px); }
.post-layout--solo .post-column { width: 100%; }
.post-detail { padding: clamp(24px, 3.6vw, 40px); }
.post-body { min-height: 92px; margin-top: 12px; padding: 22px 2px 24px; }
.post-byline { min-height: 32px; }

.global-footer p { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--ui-ink); font-family: var(--sans); font-size: 12px; font-weight: 800; }
.global-footer p strong { color: var(--ui-ink); font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.global-footer p span { color: var(--ui-dim); font-size: 11px; }

.about-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(26px, 5vw, 70px); align-items: center; min-height: 390px; padding: clamp(32px, 6vw, 72px); border-radius: 30px; background: var(--ui-paper); box-shadow: var(--ui-shadow); }
.about-intro h1 { max-width: 12ch; margin: 12px 0 18px; font-size: clamp(2.5rem, 5.2vw, 5.6rem); line-height: .98; letter-spacing: -.065em; }
.about-intro p { max-width: 540px; color: var(--ui-dim); font-size: clamp(1rem, 1.6vw, 1.24rem); line-height: 1.75; }
.about-brand-poster { position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin: 0; border-radius: 24px; background: var(--ui-mint-soft); box-shadow: var(--ui-card-shadow); }
.about-brand-poster img { width: 100%; height: 100%; display: block; object-fit: cover; }
.about-brand-poster figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ui-header-paper) 88%, transparent); color: var(--ui-ink); font-size: .82rem; font-weight: 800; box-shadow: var(--ui-card-shadow); }
.about-scenes { display: grid; gap: 16px; margin-top: 16px; }
.about-scene { min-height: 280px; display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); gap: clamp(24px, 5vw, 76px); align-items: center; padding: clamp(24px, 5vw, 58px); border-radius: 26px; background: var(--ui-blue-soft); box-shadow: var(--ui-card-shadow); }
.about-scene:nth-child(2) { background: var(--ui-warm-soft); }
.about-scene:nth-child(3) { background: var(--ui-pick-soft); }
.about-scene:nth-child(4) { background: var(--ui-mint-soft); }
.about-scene__copy > span { color: var(--ui-dim); font: 800 .7rem/1 Consolas, monospace; letter-spacing: .14em; }
.about-scene__copy h2 { margin: 12px 0 10px; font-size: clamp(1.55rem, 3vw, 2.8rem); letter-spacing: -.055em; }
.about-scene__copy p { max-width: 34ch; color: var(--ui-dim); line-height: 1.7; }
.about-scene__copy a { min-height: 44px; display: inline-flex; align-items: center; margin-top: 18px; color: var(--ui-ink); font-weight: 850; text-decoration: none; }
.about-scene__preview { min-width: 0; display: grid; gap: 10px; padding: clamp(16px, 3vw, 28px); border-radius: 20px; background: color-mix(in srgb, var(--ui-paper) 86%, transparent); box-shadow: var(--ui-card-shadow); }
.about-pack-preview, .about-post-preview { min-height: 74px; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 5px 12px; padding: 12px 15px; border-radius: 14px; background: var(--ui-paper); }
.about-pack-preview i { grid-row: 1 / 3; width: 10px; height: 36px; border-radius: 8px; background: var(--ui-signal); }
.about-pack-preview--alt i { background: var(--ui-pick); }
.about-pack-preview strong, .about-pack-preview small { grid-column: 2 / -1; }
.about-pack-preview small, .about-post-preview small, .about-official-preview small, .about-live-preview small { color: var(--ui-dim); }
.about-official-preview, .about-live-preview { min-height: 150px; display: grid; align-content: center; gap: 10px; padding: 22px; border-radius: 18px; background: var(--ui-paper); }
.about-official-preview > span, .about-live-preview > span { width: max-content; color: var(--ui-signal); font-size: .7rem; font-weight: 900; letter-spacing: .12em; }
.about-official-preview strong, .about-live-preview strong { font-size: clamp(1.25rem, 2.6vw, 2rem); letter-spacing: -.045em; }
.about-post-preview { grid-template-columns: minmax(0, 1fr) auto; }
.about-post-preview strong, .about-post-preview small { grid-column: 1; }
.about-post-preview b { grid-column: 2; grid-row: 1 / 3; color: var(--ui-pick); }
.about-live-preview > span { color: #d63d49; }

@media (max-width: 760px) {
  .content { padding-top: 16px; }
  .home-dock { display: block; padding: 10px; }
  .home-dock > header { padding: 0 5px 6px; }
  .home-pack-pills { display: flex; }
  .home-pack-pill { min-width: 135px; }
  .home-live-now { grid-template-columns: 1fr; padding: 14px; }
  .home-live-now > header { grid-template-columns: auto 1fr auto; }
  .home-live-now > header a { grid-column: auto; }
  .home-live-now .external-live-grid { grid-template-columns: 1fr; }
  .home-live-now .external-live-card--compact { grid-template-columns: 94px minmax(0, 1fr); min-height: 82px; }
  .home-portal-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home-main-feed, .home-source-rail { grid-template-columns: minmax(0, 1fr); }
  .home-main-feed .latest-posts, .home-main-feed .top-pik-block, .home-source-rail .community-pick-block, .home-source-rail .home-live-ranking { min-height: 0; }
  .home-discovery-grid { grid-template-columns: 1fr; }
  .home-explore-actions { grid-column: auto; grid-template-columns: 1fr; gap: 10px; }
  .home-actions { justify-content: flex-start; }
  .community-feed-tabs { overflow-x: auto; scrollbar-width: none; }
  .community-feed-tabs button, .community-feed-tabs a { flex: none; }
  .board-row__moderation { gap: 3px; padding-right: 5px; }
  .board-row__moderation button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .board-row__moderation button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .post-actions { align-items: stretch !important; }
  .post-actions__primary, .post-actions__tools { width: 100%; }
  .post-actions__primary > *, .post-actions__tools > * { flex: 1 1 auto; }
  .signal-section { border-radius: 18px; }
  .pack-browser .pack-row { min-height: 72px; }
  .pack-identity { border-radius: 20px; padding: 22px; }
  .pack-identity:has(.entity-icon--header) { grid-template-columns: 52px minmax(0, 1fr); }
  .entity-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .entity-page-head > .entity-icon { width: 44px; height: 44px; border-radius: 12px; }
  .entity-page-head h1 { font-size: 22px; }
  .entity-page-head .page-actions { width: 100%; margin-top: 6px; }
  .entity-icon--header { width: 48px; height: 48px; border-radius: 12px; }
  .pack-row__main:has(.entity-icon), .pack-browser .pack-row__main:has(.entity-icon) { grid-template-columns: auto minmax(0, 1fr); }
  .pack-row__main:has(.rank):has(.entity-icon) { grid-template-columns: 34px auto minmax(0, 1fr); }
  /* 좁은 화면에서는 아이콘을 줄여 글자가 들어갈 폭을 남긴다. */
  .pack-browser .entity-icon { width: 44px; height: 44px; border-radius: 11px; }
  .pack-primary, .pack-channels, .pack-aside { gap: 12px; }
  .post-detail { padding: 24px 18px; border-radius: 20px; }
  .post-context-nav__links { gap: 10px; }
  .post-context-nav__links a { font-size: 11px; }
  .community-context-nav span { display: none; }
  .comment { padding: 16px; }
  .comment--reply { margin-left: 18px; padding: 14px; }
  .global-footer p { align-items: flex-start; flex-direction: column; gap: 5px; }
  .about-intro { grid-template-columns: 1fr; min-height: 0; padding: 28px 22px; border-radius: 22px; }
  .about-intro h1 { font-size: 2.7rem; }
  .about-scene { grid-template-columns: 1fr; min-height: 0; gap: 20px; padding: 26px 20px; border-radius: 20px; }
  .about-scene__preview { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-dot { animation: none; }
}

@media (max-width: 1120px) {
  :root { --ui-header: 66px; }
  .header-row { grid-template-columns: 44px auto minmax(180px, 1fr) auto; gap: 14px; }
  .header-nav-row { display: none; }
}

@media (max-width: 760px) {
  :root { --ui-header: 58px; }
  .header-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px; }
  /*
   * 유동닉 칸은 좁은 화면에서 한 줄에 하나다. 두 칸으로 두면 비밀번호 칸이 `보기`·`복사`
   * 두 단추에 밀려 점 두 개만 보이는 폭이 된다 — 적어 두라고 하면서 보여 주지 않는 셈이다.
   */
  .guest-credentials { grid-template-columns: minmax(0, 1fr); }
}

/* ========================= 이모티콘 ========================= */

/* 세트 한 장. 표지와 이름, 그리고 서버가 센 숫자만. */
.emote-set-card__main {
  min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 14px; width: 100%; padding: 10px 0; border: 0; background: transparent; color: inherit; text-align: left;
}
.emote-set-card__main:hover .emote-set-card__text strong,
.emote-set-card__main:focus-visible .emote-set-card__text strong { color: var(--ui-signal); }
.emote-set-card__cover {
  width: 44px; height: 44px; display: inline-grid; place-items: center;
  overflow: hidden; border-radius: 11px; background: var(--ui-paper-2);
}
.emote-set-card__cover img { width: 100%; height: 100%; object-fit: contain; }
.emote-set-card__text { min-width: 0; display: grid; gap: 2px; }
.emote-set-card__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emote-set-card__counts { color: var(--ui-dim); font-size: 11px; }
.emote-set-card__footer { display: flex; align-items: center; justify-content: flex-end; min-height: 45px; padding: 8px 12px; border-top: 1px solid var(--ui-line); }
.emote-set-card__library { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--ui-line-strong); background: var(--ui-paper); color: var(--ui-ink); font-size: 12px; font-weight: 850; }
.emote-set-card__library:hover, .emote-set-card__library:focus-visible { border-color: var(--ui-signal); background: var(--ui-signal); color: #fff; outline: 0; }
.emote-set-card__library[aria-pressed="true"] { border-color: transparent; background: var(--ui-signal-soft); color: var(--ui-signal); }
.emote-set-card__status { color: var(--ui-dim); font-size: 11px; font-weight: 750; }

/*
 * 낱개. 고를 수 있는 자리에서는 누를 수 있는 크기여야 한다.
 *
 * 44px 은 손가락이 닿는 최소치였지 표정이 보이는 크기가 아니다. 원본이 256px 인데
 * 36px 로 그리면 웃는 얼굴과 뿌듯한 얼굴을 눈으로 가를 수 없고, 그러면 52개가 있어도
 * 사람은 맨 앞 몇 개만 쓴다.
 */
.emote-chip {
  width: 58px; height: 58px; display: inline-grid; place-items: center;
  padding: 5px; border: 0; border-radius: 12px; background: transparent;
}
.emote-chip img { width: 100%; height: 100%; object-fit: contain; }
button.emote-chip:hover, button.emote-chip:focus-visible { background: var(--ui-paper-2); outline: 0; }
.emote-grid { display: flex; flex-wrap: wrap; gap: 6px; }

/* 본문 안에 섞이는 그림. 글줄 높이를 밀어 올리지 않게 글자에 맞춘다. */
.emote-inline { height: 2em; width: auto; vertical-align: -.55em; }
/*
 * 이모티콘만 보낸 줄. 그 줄에서는 이모티콘이 본문이라 글자 크기에 맞출 이유가 없다.
 * 여러 개를 이어 붙여도 줄바꿈으로 흘러가게 둔다.
 */
.emote-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; line-height: 1; }
.emote-line .emote-inline { height: clamp(72px, 9vw, 104px); vertical-align: middle; }

/* 고르개. editor 아래에 붙는다. */
.emote-picker { margin-top: 10px; padding: 12px; border: 1px solid var(--ui-line); border-radius: 14px; }
.emote-picker__tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.emote-picker__tabs::-webkit-scrollbar { display: none; }
.emote-picker__tabs button { flex: none; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ui-dim); font-size: .8rem; font-weight: 700; }
.emote-picker__tabs button[aria-pressed="true"] { background: var(--ui-signal-soft); color: var(--ui-signal); }
.emote-picker__search input { width: 100%; min-height: 40px; margin: 8px 0; padding: 0 10px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); color: var(--ui-ink); }
.emote-picker__panel { max-height: 320px; overflow-y: auto; }
/* 검색으로 걸러 낸 것. `.emote-chip` 이 display 를 직접 정하므로 hidden 만으로는 남는다. */
.emote-picker [data-emote-find][hidden] { display: none; }
/* 유동닉 되찾기. 로그인이 아니라서 접어 둔다 — 필요한 사람만 찾으면 되는 길이다. */
.guest-reclaim { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ui-line); }
.guest-reclaim > summary { min-height: 44px; display: flex; align-items: center; color: var(--ui-dim); font-size: .88rem; cursor: pointer; }
.guest-reclaim form { display: grid; gap: 10px; margin-top: 8px; }
.guest-reclaim p { margin: 0; color: var(--ui-dim); font-size: .82rem; line-height: 1.6; }
.guest-reclaim label { display: grid; gap: 4px; font-size: .82rem; }
.guest-reclaim input { min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); color: var(--ui-ink); }

/*
 * 계정이 있어야 되는 동작. 지우지 않는다 — 무엇이 있는지 보여야 로그인할 이유가 생긴다.
 * 대신 지금 눌러도 되지 않는다는 것이 **누르기 전에** 보이게 한다.
 */
[data-needs-account] { opacity: .62; }
[data-needs-account]::after {
  content: ""; width: 11px; height: 11px; margin-left: 5px; display: inline-block;
  background: currentColor; vertical-align: -1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.emote-picker__notice { margin: 8px 0 0; color: var(--ui-dim); font-size: .82rem; }
.emote-picker__hint { margin: 8px 0 0; color: var(--ui-dim); font-size: .82rem; text-align: center; }
.emote-picker__hint .text-button, .emote-picker__panel > .state-panel + .emote-picker__hint .text-button { min-height: 40px; }
/*
 * 고르개 안에서 펼친 세트. 새 화면이 아니라 같은 자리다 — 닫으면 보던 탭으로 돌아온다.
 */
.emote-picker__detail-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--ui-line);
}
.emote-picker__detail-head strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emote-picker__detail-head .solid-button, .emote-picker__detail-head .text-button { min-height: 40px; }
/* 낱개 즐겨찾기. 버튼 안의 버튼이 되지 않게 바깥에서 겹친다. */
.emote-chip-wrap { position: relative; display: inline-grid; }
.emote-chip__star {
  position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; display: grid;
  place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--ui-paper);
  box-shadow: 0 0 0 1px var(--ui-line); color: var(--ui-line-strong); font-size: 12px;
  line-height: 1; cursor: pointer; opacity: 0;
}
.emote-chip-wrap:hover .emote-chip__star,
.emote-chip-wrap:focus-within .emote-chip__star,
.emote-chip__star[aria-pressed="true"] { opacity: 1; }
.emote-chip__star[aria-pressed="true"] { color: var(--ui-pick); }
/* 손가락으로 쓰는 화면에서는 hover 가 없다. 별이 언제나 보여야 누를 수 있다. */
@media (hover: none) {
  .emote-chip__star { opacity: 1; }
}
.emote-picker__grid { display: grid; gap: 4px; }
/* `전체` 안에서 기본 낱개와 사용자 세트를 갈라 두는 작은 머리글. 새 구획이 아니다. */
.emote-picker__default { margin-bottom: 10px; }
.emote-picker__default h3 { margin: 0 0 4px; color: var(--ui-dim); font-size: .74rem; font-weight: 700; }

/* 만들기. */
.emote-create, .emote-upload, .emote-publish { display: grid; gap: 12px; margin: 16px 0; }
.emote-create label, .emote-upload label { display: grid; gap: 5px; font-size: .8rem; }
.emote-create input, .emote-upload input[type="text"], .emote-upload input:not([type]) {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: 10px;
  background: var(--ui-paper); color: var(--ui-ink);
}
.emote-upload__file small { color: var(--ui-dim); font-size: 11px; line-height: 1.5; }
.emote-rights { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; line-height: 1.5; }
.emote-guide { margin: 4px 0 16px; color: var(--ui-dim); font-size: .85rem; }

/*
 * 전역 이모티팩 탐색.
 *
 * 고르개와 세트 상세는 기존 계약을 그대로 쓰고, `/emotes/` 첫 화면만 실제 그림이 먼저
 * 보이는 discovery surface 로 만든다. 데이터가 없는 사용자 세트 구획은 아예 그리지 않는다.
 */
.emote-discovery {
  --emote-accent: #8b7bff;
  --emote-accent-soft: #dcd7ff;
  --emote-night: #17162b;
  display: grid;
  gap: 18px;
  padding: 30px 0 8px;
}
.emote-discovery__hero {
  position: relative;
  min-height: 384px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(460px, 1.05fr);
  gap: clamp(34px, 6vw, 90px);
  align-items: center;
  overflow: hidden;
  padding: clamp(38px, 5vw, 72px);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 24px;
  background: var(--emote-night);
  color: #f8f7ff;
  box-shadow: 0 24px 58px rgb(27 25 55 / 14%);
  isolation: isolate;
  animation: emote-rise .48s cubic-bezier(.2,.75,.22,1) both;
}
.emote-discovery__hero::before,
.emote-discovery__hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.emote-discovery__hero::before {
  width: 520px;
  height: 520px;
  right: -150px;
  top: -250px;
  border: 1px solid rgb(139 123 255 / 30%);
  box-shadow: 0 0 0 78px rgb(139 123 255 / 4%), 0 0 0 158px rgb(139 123 255 / 3%);
}
.emote-discovery__hero::after {
  width: 190px;
  height: 190px;
  left: 47%;
  bottom: -145px;
  background: #443e84;
  opacity: .32;
}
.emote-hero__copy { position: relative; z-index: 1; min-width: 0; }
.emote-hero__copy .eyebrow { color: #b8acff; }
.emote-hero__copy h1 {
  width: max-content;
  max-width: 100%;
  margin: 10px 0 14px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.045em;
  word-break: keep-all;
  white-space: nowrap;
}
.emote-hero__copy p {
  max-width: 52ch;
  margin: 0;
  color: #c9c6dc;
  font-size: clamp(.94rem, 1.2vw, 1.05rem);
  line-height: 1.72;
  word-break: keep-all;
}
.emote-hero__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.emote-hero__actions a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 12px;
  color: #f8f7ff;
  font-size: 13px;
  font-weight: 850;
}
.emote-hero__actions .solid-button { border-color: var(--emote-accent); background: var(--emote-accent); color: #17162b; }
.emote-hero__primary { background: rgb(255 255 255 / 8%); }
.emote-hero__primary:hover,
.emote-hero__primary:focus-visible { border-color: rgb(184 172 255 / 72%); background: rgb(139 123 255 / 16%); }
.emote-hero__primary .icon { width: 16px; }
.emote-hero__visual {
  position: relative;
  z-index: 1;
  min-height: 266px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
  transform: rotate(-2deg);
}
.emote-hero__tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.4vw, 17px);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  background: rgb(255 255 255 / 7%);
  backdrop-filter: blur(14px);
  animation: emote-tile-in .42s cubic-bezier(.2,.75,.22,1) calc(var(--emote-order) * 45ms + 120ms) both;
}
.emote-hero__tile:nth-child(2), .emote-hero__tile:nth-child(5) { transform: translateY(-12px); }
.emote-hero__tile img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 13px 16px rgb(5 4 20 / 24%)); }

.emote-discovery > .emote-guide {
  margin: 0;
  padding: 14px 17px;
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  background: var(--ui-paper);
}
.emote-discovery__official,
.emote-discovery__mine,
.emote-discovery__community,
.emote-maker-callout {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  background: var(--ui-paper);
  box-shadow: 0 14px 38px rgb(32 35 54 / 7%);
  animation: emote-rise .48s cubic-bezier(.2,.75,.22,1) .12s both;
}
.emote-discovery__official > header,
.emote-discovery__mine > header,
.emote-discovery__community > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.emote-discovery__official h2,
.emote-discovery__mine h2,
.emote-discovery__community h2,
.emote-maker-callout h2 {
  margin: 6px 0 0;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.045em;
}
.emote-discovery__official header p,
.emote-maker-callout p { margin: 8px 0 0; color: var(--ui-dim); line-height: 1.6; }
.emote-showcase {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
.emote-showcase__item {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px 9px 10px;
  border: 1px solid color-mix(in srgb, var(--ui-line) 78%, transparent);
  border-radius: 14px;
  background: var(--ui-paper-2);
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.emote-showcase__item:hover,
.emote-showcase__item:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--emote-accent) 48%, var(--ui-line));
  background: color-mix(in srgb, var(--emote-accent-soft) 28%, var(--ui-paper));
}
.emote-showcase__item img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.emote-showcase__item span { overflow: hidden; color: var(--ui-dim); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.emote-set-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.emote-set-gallery .emote-set-card { border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper-2); }
.emote-set-gallery .emote-set-card__main { padding: 12px 14px; }
.emote-maker-callout { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: color-mix(in srgb, var(--emote-accent-soft) 30%, var(--ui-paper)); }
.emote-maker-callout p { max-width: 62ch; }
.emote-maker-callout .solid-button { flex: none; }

@keyframes emote-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes emote-tile-in { from { opacity: 0; translate: 0 13px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 980px) {
  .emote-discovery__hero { grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr); gap: 28px; }
  .emote-showcase { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .emote-showcase__item:nth-child(n + 13) { display: none; }
}

@media (max-width: 760px) {
  .inline-identity { gap: 18px; padding: 17px; }
  .inline-identity__form { grid-template-columns: 1fr; }
  .inline-identity__form label, .inline-identity__actions { grid-column: 1; }
  .emote-discovery { padding-top: 16px; }
  .emote-discovery__hero { min-height: 0; grid-template-columns: 1fr; gap: 31px; padding: 30px 22px 26px; border-radius: 19px; }
  .emote-hero__copy h1 { font-size: clamp(1.85rem, 7.6vw, 2.2rem); line-height: 1.08; white-space: normal; }
  .emote-hero__copy p { font-size: .9rem; }
  .emote-hero__visual { min-height: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; transform: none; }
  .emote-hero__tile { padding: 7px; border-radius: 12px; }
  .emote-hero__tile:nth-child(2), .emote-hero__tile:nth-child(5) { transform: none; }
  .emote-discovery__official, .emote-discovery__mine, .emote-discovery__community, .emote-maker-callout { padding: 22px 17px; border-radius: 16px; }
  .emote-discovery__official > header, .emote-discovery__mine > header, .emote-discovery__community > header { align-items: flex-start; }
  .emote-showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .emote-showcase__item { padding: 8px 6px; border-radius: 12px; }
  .emote-showcase__item:nth-child(n + 13) { display: grid; }
  .emote-set-gallery { grid-template-columns: 1fr; }
  .emote-maker-callout { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 390px) {
  .emote-hero__actions { flex-direction: column; }
  .emote-hero__actions a { width: 100%; }
  .emote-discovery__official > header { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .emote-discovery__hero, .emote-discovery__official, .emote-discovery__mine, .emote-discovery__community, .emote-maker-callout, .emote-hero__tile { animation: none; }
  .emote-spotlight__viewport { transition: none; }
  .emote-showcase__item { transition: none; }
}

@media (max-width: 620px) {
  .emote-picker__panel { max-height: 200px; }
  .emote-set-card__cover { width: 40px; height: 40px; }
}

/* ============================================================
   공개 프로필 · 공개 범위
   ============================================================ */

/*
 * 사람이 먼저, 배지는 그 옆에.
 *
 * 예전에는 가입·역할을 `dl` 표로 크게 펼치고 그 아래 Collection 을 120px 짜리 상자
 * 넷으로 늘어놓았다. 그래서 화면 첫 장이 **표 하나와 큰 상자들**이었고, 정작 이 사람이
 * 무엇을 쓰는 사람인지는 스크롤 아래에 있었다. 순서를 뒤집는다.
 */
.profile-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center;
  margin: 18px 0 0; padding: 20px 22px;
  border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper);
}
.profile-hero h2 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.profile-hero__meta { margin: 5px 0 0; color: var(--ui-dim); font-size: .8rem; line-height: 1.5; }

/* 배지는 글자 높이의 알약이다. 상자가 아니라 이름표다. */
.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.profile-chip {
  display: inline-flex; gap: 5px; align-items: center;
  padding: 4px 10px 4px 7px; border-radius: 999px;
  background: var(--ui-paper-2); color: var(--ui-ink);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.profile-chip .collection-glyph { display: grid; place-items: center; width: 15px; height: 15px; }
.profile-chip .collection-glyph svg { width: 100%; height: 100%; }
.profile-chip .collection-glyph:has(.collection-mark--art) { width: 20px; height: 20px; border-radius: 0; background: transparent; }
.profile-chip .collection-mark--art { width: 100%; height: 100%; }
.profile-chip[data-tone="violet"] { background: var(--ui-pick-soft); color: var(--ui-pick); }
.profile-chip[data-tone="rose"] { background: color-mix(in srgb, #c64d70 13%, var(--ui-paper)); color: #9c3452; }
.profile-chip[data-tone="gold"], .profile-chip[data-tone="amber"] { background: var(--ui-warm-soft); color: #8a5a12; }
.profile-chip[data-tone="cyan"], .profile-chip[data-tone="mint"] { background: var(--ui-signal-soft); color: var(--ui-signal); }
.profile-chip[data-tone="blue"] { background: color-mix(in srgb, #2a5cb8 12%, var(--ui-paper)); color: #24509f; }
.profile-chip[data-tone="clay"] { background: color-mix(in srgb, #a5553a 13%, var(--ui-paper)); color: #8c452e; }
.profile-chip[data-tone="plum"] { background: color-mix(in srgb, #8b3d7a 12%, var(--ui-paper)); color: #7a3369; }
.profile-chip[data-tone="forest"] { background: color-mix(in srgb, #2f6b34 12%, var(--ui-paper)); color: #2a5f2f; }

.profile-activity { padding-top: 4px; }
.my-tabs button b { margin-left: 4px; font-weight: 700; opacity: .65; }

/* 댓글 한 줄. 어느 글에 무슨 말을 했는지까지만. */
.profile-comment {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 13px 2px; border-bottom: 1px solid var(--ui-line);
}
.profile-comment a { display: grid; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
.profile-comment small { color: var(--ui-dim); font-size: .74rem; }
.profile-comment p {
  margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: .87rem; line-height: 1.5;
}
.profile-comment a:hover p { color: var(--ui-signal); }
.profile-comment time { flex: none; color: var(--ui-dim); font-size: .73rem; }

@media (max-width: 620px) {
  .profile-hero { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; }
  .profile-comment { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

/*
 * 켜고 끄는 줄.
 *
 * 여기에는 아무 규칙도 없어서 브라우저 기본 네모가 그대로 나왔다 — 화면에서 혼자 크고
 * 파랗고, 나머지와 아무 관계가 없어 보였다. 실제 스위치를 만들되 **네모를 감추고
 * 그 자리에 그리지 않는다**: `input` 은 그대로 두고 눈에 보이는 것만 바꾼다. 그래야
 * 키보드와 화면낭독기가 지금처럼 계속 쓸 수 있다.
 */
.switch-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 14px; align-items: center;
  padding: 13px 2px; border-bottom: 1px solid var(--ui-line);
  font-size: .87rem; cursor: pointer;
}
.switch-row:last-of-type { border-bottom: 0; }
.switch-row input {
  order: 2; width: 40px; height: 23px; margin: 0; flex: none;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 1px solid var(--ui-line-strong); border-radius: 999px; background: var(--ui-paper-2);
  transition: background .15s ease, border-color .15s ease;
}
.switch-row input::after {
  content: ""; display: block; width: 17px; height: 17px; margin: 2px;
  border-radius: 50%; background: var(--ui-paper);
  box-shadow: 0 1px 3px rgb(17 24 32 / 22%);
  transition: transform .15s ease;
}
.switch-row input:checked { border-color: var(--ui-signal); background: var(--ui-signal); }
.switch-row input:checked::after { transform: translateX(17px); }
.switch-row input:focus-visible { outline: 2px solid var(--ui-signal); outline-offset: 2px; }
.switch-row > span { order: 1; font-weight: 600; }

.profile-visibility fieldset { margin: 0; padding: 0; border: 0; }
.profile-visibility legend {
  padding: 0; margin-bottom: 4px; color: var(--ui-dim);
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.profile-visibility small { display: block; margin-top: 10px; color: var(--ui-dim); font-size: .76rem; line-height: 1.55; }

/* Product discovery: compact, content-backed, and absent when the API returns nothing. */
.home-official-discovery {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin: 12px 0 18px;
}
.home-official-discovery .signal-section,
.official-discovery-page .signal-section { margin: 0; }
.home-official-discovery .section-head { min-height: 38px; padding: 0 14px; }
.home-official-discovery .official-row { min-height: 58px; padding: 10px 14px; }
.official-discovery-page { display: grid; gap: 18px; max-width: 980px; }
.official-store-discovery .section-intro { margin: 0 0 10px; color: var(--ui-dim); font-size: 12px; line-height: 1.65; }
.official-row--store > div { min-width: 0; padding: 9px 10px; }
.official-row--store > div > a { display: inline-flex; margin-top: 5px; padding: 0; color: var(--ui-accent-strong); font-size: 11px; font-weight: 750; }
.official-row--store small a { display: inline; margin: 0; padding: 0; color: inherit; font: inherit; }
.event-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.event-actions .text-button, .event-actions .solid-button { min-height: 44px; }

@media (max-width: 860px) {
  .home-official-discovery { grid-template-columns: 1fr; }
}
.auth-check {
  display: flex !important;
  align-items: flex-start;
  gap: .65rem;
  font-size: .88rem;
  line-height: 1.5;
}
.auth-check input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .12rem; }

.live-contract {
  display: grid;
  grid-template-columns: minmax(8rem, .28fr) minmax(0, 1fr);
  gap: .35rem 1.25rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 94%, var(--brand) 6%);
  box-shadow: 0 .65rem 1.8rem rgba(18, 31, 38, .07);
}
.live-contract p, .live-contract small { margin: 0; line-height: 1.62; }
.live-contract small { grid-column: 2; color: var(--muted); }
.live-channel-list { display: grid; gap: .45rem; margin-bottom: .8rem; }
.live-channel-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .8rem; border-radius: .8rem; background: var(--surface-soft); }
.live-channel-row div { display: grid; gap: .18rem; min-width: 0; }
.live-channel-row small { color: var(--muted); }
.profile-live { margin-block: 1.25rem; }
@media (max-width: 720px) {
  .live-contract { grid-template-columns: 1fr; }
  .live-contract small { grid-column: 1; }
  .live-channel-row { align-items: flex-start; flex-direction: column; }
}
/* ============================================================
   PacPik Games — discovery route and canonical Game Pack
   ============================================================ */

.nav-games { gap: 5px; color: var(--ui-signal); }
.nav-games .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-games small {
  padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--ui-signal) 45%, var(--ui-line));
  border-radius: 2px; font-size: 8px; font-weight: 900; line-height: 1.3; letter-spacing: .04em;
}
.desktop-nav > .nav-games { min-width: 130px; }
.drawer-link.nav-games { justify-content: flex-start; }

.ui-app .button {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; border: 1px solid var(--ui-signal); border-radius: var(--ui-radius);
  background: var(--ui-signal); color: #fff; font-weight: 800; line-height: 1.2; cursor: pointer;
}
.ui-app .button:hover { filter: brightness(.94); }
.ui-app .button-secondary { border-color: var(--ui-line-strong); background: var(--ui-paper); color: var(--ui-ink); }
.ui-app .button-quiet { border-color: transparent; background: transparent; color: var(--ui-dim); }
.ui-app .button.is-disabled { border-color: var(--ui-line); background: var(--ui-paper-2); color: var(--ui-dim); cursor: not-allowed; }

.games-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr); gap: 28px;
  min-height: 420px; align-items: stretch; margin: 8px 0 48px; border-bottom: 1px solid var(--ui-line-strong);
}
.games-hero__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 46px 0 54px; }
.games-hero h1 { max-width: 760px; margin: 10px 0 20px; font-size: clamp(2.25rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -.055em; }
.games-hero__lead { max-width: 700px; margin: 0; font-size: clamp(1.02rem, 1.6vw, 1.35rem); font-weight: 720; line-height: 1.55; }
.games-hero__developer { margin: 13px 0 0; color: var(--ui-dim); font-size: .96rem; }
.games-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.games-route {
  align-self: center; display: grid; background: #0c3b33; color: #eaf4f1;
  border: 1px solid #1f574d; box-shadow: var(--ui-shadow);
}
.games-route > div { min-height: 156px; padding: 28px; display: flex; flex-wrap: wrap; gap: 9px 12px; align-content: center; align-items: center; }
.games-route > div + div { border-top: 1px solid rgb(255 255 255 / 18%); }
.games-route small { flex: 0 0 100%; color: #82cdbc; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.games-route strong { font-size: clamp(.85rem, 1.15vw, 1rem); }
.games-route span { color: #82cdbc; }

.games-section { margin: 0 0 54px; scroll-margin-top: calc(var(--ui-header) + 18px); }
.games-section__head { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin: 0 0 16px; }
.games-section__head h2 { margin: 5px 0 2px; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.2; letter-spacing: -.025em; }
.games-section__head p { max-width: 720px; margin: 0; color: var(--ui-dim); font-size: .84rem; }
.games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.games-card { min-width: 0; border: 1px solid var(--ui-line); background: var(--ui-paper); }
.games-card__media { position: relative; aspect-ratio: 16 / 9; display: block; overflow: hidden; border-bottom: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.games-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.games-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ui-dim); font-size: .72rem; font-weight: 900; letter-spacing: .18em; }
.games-card__rank { position: absolute; top: 10px; left: 10px; min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 55%); background: #0c3b33; color: #fff; font-size: .9rem; font-weight: 900; }
.games-card__body { padding: 15px 16px 14px; }
.games-card__signals { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.games-card__signals span { padding: 3px 6px; border: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .68rem; font-weight: 800; }
.games-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.games-card h3 a:hover { color: var(--ui-signal); }
.games-card__developer { margin: 4px 0 0; color: var(--ui-signal); font-size: .76rem; font-weight: 750; }
.games-card__desc { min-height: 3em; margin: 9px 0 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ui-dim); font-size: .82rem; line-height: 1.5; }
.games-card__meta { display: flex; flex-wrap: wrap; gap: 5px 12px; padding-top: 10px; border-top: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .72rem; }
.games-card__meta span:first-child { margin-right: auto; }
.games-card__meta b { color: var(--ui-ink); }
.games-empty { min-height: 48px; margin: 0; padding: 12px 0; display: flex; gap: 9px; align-items: center; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .84rem; }
.games-empty span { color: var(--ui-signal); font-size: 1.1rem; }
.games-news { border-top: 1px solid var(--ui-line-strong); }
.games-news a { min-height: 66px; padding: 11px 4px; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--ui-line); }
.games-news a:hover strong { color: var(--ui-signal); }
.games-news span, .games-news small { color: var(--ui-dim); font-size: .74rem; }
.games-news strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }

.game-pack { display: grid; gap: 34px; }
.game-pack-hero { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); gap: 30px; padding: 28px; border: 1px solid var(--ui-line); background: var(--ui-paper); }
.game-pack-hero__media { aspect-ratio: 16 / 10; min-width: 0; display: grid; place-items: center; overflow: hidden; background: var(--ui-paper-2); color: var(--ui-dim); font-size: .75rem; font-weight: 900; letter-spacing: .2em; }
.game-pack-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.game-pack-hero__copy { min-width: 0; align-self: center; }
.game-pack-hero h1 { margin: 7px 0 12px; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1; letter-spacing: -.05em; }
.game-pack-hero__desc { max-width: 780px; margin: 0; font-size: 1rem; line-height: 1.65; }
.game-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 18px 0; border-top: 1px solid var(--ui-line); }
.game-facts div { min-width: 0; padding: 10px 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; border-bottom: 1px solid var(--ui-line); }
.game-facts div:nth-child(odd) { padding-right: 14px; }
.game-facts dt { color: var(--ui-dim); font-size: .72rem; font-weight: 750; }
.game-facts dd { min-width: 0; margin: 0; font-size: .82rem; font-weight: 720; }
.official-developer { display: inline-flex; margin-left: 5px; padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--ui-signal) 45%, var(--ui-line)); color: var(--ui-signal); font-size: .62rem; font-weight: 900; line-height: 1.2; vertical-align: middle; white-space: nowrap; }
.game-pack-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.game-pack-actions [data-game-pik][aria-pressed="true"] { border-color: var(--ui-signal); background: var(--ui-signal-soft); color: var(--ui-signal); }
.game-play-note { margin: 13px 0 0; color: var(--ui-dim); font-size: .75rem; }
.game-action-status { min-height: 1.4em; margin: 5px 0 0; color: var(--ui-signal); font-size: .75rem; }
.game-action-status[data-bad="true"] { color: var(--ui-danger); }

.game-pack-community { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; }
.game-pack-community > aside { align-self: start; position: sticky; top: calc(var(--ui-header) + 18px); }
.game-pack-community h2 { margin: 5px 0 16px; font-size: 1.25rem; line-height: 1.25; }
.game-channels { display: grid; margin: 0 0 12px; border-top: 1px solid var(--ui-line); }
.game-channels a { min-height: 47px; padding: 0 4px; display: flex; gap: 9px; align-items: center; border-bottom: 1px solid var(--ui-line); font-weight: 750; }
.game-channels a:hover { color: var(--ui-signal); }
.game-channels span { color: var(--ui-signal); }
.game-posts { border-top: 1px solid var(--ui-line-strong); }
.game-post { padding: 15px 2px; border-bottom: 1px solid var(--ui-line); }
.game-post > div, .game-post footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--ui-dim); font-size: .7rem; }
.game-post h3 { margin: 7px 0 5px; font-size: 1rem; }
.game-post h3 a:hover { color: var(--ui-signal); }
.game-post p { margin: 0 0 10px; color: var(--ui-dim); font-size: .82rem; }
.game-live-seam { padding: 22px; border-left: 3px solid var(--ui-signal); background: var(--ui-paper); }
.game-live-seam h2 { margin: 4px 0 12px; }
.game-live-seam > a { min-height: 44px; display: flex; justify-content: space-between; gap: 12px; align-items: center; border-top: 1px solid var(--ui-line); }
.game-live-seam > a span { color: var(--ui-dim); font-size: .75rem; }
.game-pack-footer { padding: 18px 0; display: flex; justify-content: space-between; gap: 18px; align-items: center; border-top: 1px solid var(--ui-line-strong); }
.game-pack-footer > div { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.game-pack-footer a { color: var(--ui-dim); font-size: .76rem; }
.game-pack-footer a:hover { color: var(--ui-signal); }

@media (max-width: 1040px) {
  .games-hero { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .games-hero__copy { padding-bottom: 34px; }
  .games-route { margin-bottom: 36px; }
  .games-route > div { min-height: 112px; }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-pack-hero { grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr); }
}

@media (max-width: 760px) {
  .mobile-nav { grid-template-columns: repeat(6, 1fr); }
  .mobile-nav .nav-games { display: grid; grid-template-columns: auto auto; align-content: center; gap: 0 3px; font-size: 8.5px; line-height: 1.1; }
  .mobile-nav .nav-games .icon { grid-row: 1 / span 2; width: 18px; height: 18px; }
  .mobile-nav .nav-games small { padding: 0; border: 0; font-size: 6.5px; }
  .games-hero { margin-top: 0; margin-bottom: 38px; }
  .games-hero__copy { padding: 28px 0; }
  .games-hero h1 { font-size: clamp(2.25rem, 12vw, 3.5rem); }
  .games-hero__actions { width: 100%; }
  .games-hero__actions > * { flex: 1; }
  .games-route { margin-inline: -14px; }
  .games-route > div { padding: 22px 14px; }
  .games-section { margin-bottom: 42px; }
  .games-grid { grid-template-columns: 1fr; gap: 9px; }
  .games-card { display: grid; grid-template-columns: 122px minmax(0, 1fr); }
  .games-card__media { height: 100%; aspect-ratio: auto; border-right: 1px solid var(--ui-line); border-bottom: 0; }
  .games-card__body { padding: 12px; }
  .games-card__desc { display: none; }
  .games-card__meta { margin-top: 9px; }
  .games-card__meta span:first-child { flex: 0 0 100%; }
  .games-news a { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .games-news a span { grid-column: 1 / -1; }
  .game-pack { gap: 28px; }
  .game-pack-hero { grid-template-columns: 1fr; gap: 20px; margin-inline: -14px; padding: 14px; }
  .game-pack-hero__media { aspect-ratio: 16 / 9; }
  .game-pack-hero h1 { font-size: 2.5rem; }
  .game-facts { grid-template-columns: 1fr; }
  .game-facts div:nth-child(odd) { padding-right: 0; }
  .game-pack-actions > * { flex: 1 1 calc(50% - 7px); min-width: 0; padding-inline: 8px; }
  .game-pack-community { grid-template-columns: 1fr; gap: 24px; }
  .game-pack-community > aside { position: static; }
  .game-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--ui-line); }
  .game-channels a { padding-inline: 10px; border-right: 1px solid var(--ui-line); }
  .game-pack-footer { align-items: stretch; flex-direction: column; }
}

@media (max-width: 390px) {
  .games-hero h1 { font-size: 2.25rem; }
  /* 전역 shell gutter가 14px에서 12px로 줄어드므로 full-bleed 흐름도 같은 값만 뺀다. */
  .games-route, .game-pack-hero { margin-inline: -12px; }
  .games-card { grid-template-columns: 104px minmax(0, 1fr); }
  .games-card__signals span:nth-child(2) { display: none; }
  .games-card__meta { gap: 4px 8px; }
  .game-pack-hero h1 { font-size: 2.15rem; }
  .game-channels { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PacPik Games discovery portal v2
   Backend contracts stay shared; Games owns this presentation and local IA.
   ========================================================================== */

.desktop-nav { width: 100%; }
.desktop-nav > .nav-games {
  min-width: 188px;
  min-height: 40px;
  align-self: center;
  justify-content: flex-start;
  margin-left: auto;
  padding: 0 16px;
  border: 1px solid #174f46;
  border-radius: 4px;
  background: #0c3b33;
  color: #f5fffc;
  font-size: 14px;
}
.desktop-nav > .nav-games::after { display: none; }
.desktop-nav > .nav-games:hover, .desktop-nav > .nav-games[aria-current="page"] { background: #145247; color: #fff; }
.desktop-nav > .nav-games .icon { width: 20px; height: 20px; margin-right: 3px; }
.desktop-nav > .nav-games small { margin-left: auto; border-color: rgb(255 255 255 / 38%); color: #a8ead9; }

main.content:has(> .games-experience) {
  width: min(1560px, calc(100% - 48px));
  padding-top: 0;
}

.games-experience {
  --games-ink: #0a2925;
  --games-ink-2: #103b35;
  --games-paper: #f4f7f6;
  --games-panel: #ffffff;
  --games-accent: #36b99a;
  --games-accent-strong: #08745f;
  --games-mute: #667a76;
  --games-line: #cddad6;
  min-width: 0;
  color: #10231f;
}

.games-local-header {
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 0 20px;
  border-bottom: 1px solid #245047;
  background: var(--games-ink);
  color: #eaf7f3;
}
.games-wordmark { min-height: 44px; display: inline-flex; align-items: baseline; gap: 7px; }
.games-wordmark span { color: #8fb1a9; font-size: 12px; font-weight: 750; }
.games-wordmark strong { font-family: "Arial Black", var(--sans); font-size: 18px; letter-spacing: -.035em; }
.games-local-header nav { min-width: 0; display: flex; align-items: stretch; gap: 2px; }
.games-local-header nav a { min-height: 44px; padding: 0 13px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; color: #a8c3bd; font-size: 12px; font-weight: 750; white-space: nowrap; }
.games-local-header nav a:hover, .games-local-header nav a[aria-current="page"] { border-bottom-color: var(--games-accent); color: #fff; }
.games-local-apply { min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid #51857a; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 850; }
.games-local-apply span { color: #8fcfc0; font-size: 9px; letter-spacing: .08em; }
.games-local-apply:hover, .games-local-apply[aria-current="page"] { border-color: var(--games-accent); background: #164b42; }

.games-intro {
  min-height: 164px;
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(300px, .85fr) minmax(390px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 19px 28px;
  border-bottom: 1px solid #255248;
  background: var(--games-ink-2);
  color: #f5fbf9;
}
.games-kicker { color: #7dd7c1; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.games-intro h1 { margin: 7px 0 0; font-size: clamp(2rem, 2.75vw, 2.8rem); line-height: 1.02; letter-spacing: -.055em; }
.games-intro__copy p { max-width: 520px; margin: 0; color: #bed1cc; font-size: 13px; line-height: 1.65; }
.games-intro__copy > small { display: block; margin-top: 4px; color: #8fb1a9; font-size: 10px; }
.games-intro__copy > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.games-intro .button-secondary { border-color: #6a8b84; background: transparent; color: #fff; }
.games-loop { min-width: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; border-top: 1px solid #4b6c65; border-bottom: 1px solid #4b6c65; }
.games-loop li { min-width: 0; min-height: 62px; padding: 10px 8px; display: grid; align-content: center; gap: 3px; border-left: 1px solid #4b6c65; }
.games-loop li:first-child { border-left: 0; }
.games-loop b { color: #72b7a7; font: 700 9px/1 var(--mono); }
.games-loop span { font-size: 12px; font-weight: 850; white-space: nowrap; }

.games-portal { padding: 24px 0 0; }
.games-discovery-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(360px, .75fr); gap: 18px; align-items: start; }
.games-featured, .games-tab-module, .games-updates { min-width: 0; }
.games-module__head { min-height: 56px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: end; gap: 24px; border-bottom: 1px solid var(--games-line); }
.games-module__head > div > span, .games-tab-module__head > span { color: var(--games-accent-strong); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.games-module__head h2 { margin: 3px 0 9px; font-size: 19px; line-height: 1.2; letter-spacing: -.035em; }
.games-module__head p { max-width: 460px; margin: 0 0 10px; color: var(--games-mute); font-size: 11px; }
.games-featured-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.games-featured-rail:has(> .games-card:only-child) { grid-template-columns: 1fr; }
.games-featured-rail > .games-card:only-child { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(220px, .72fr); }
.games-featured-rail > .games-card:only-child .games-card__media { min-height: 100%; border-right: 1px solid var(--games-line); border-bottom: 0; }
.games-featured-rail > .games-card:only-child .games-card__body { display: flex; flex-direction: column; justify-content: center; padding: 18px; }
.games-featured-rail > .games-card:only-child .games-card__meta { margin-top: auto; }

.games-card { min-width: 0; overflow: hidden; border: 1px solid var(--games-line); border-radius: 4px; background: var(--games-panel); }
.games-card__media { position: relative; aspect-ratio: 16 / 9; display: block; overflow: hidden; border-bottom: 1px solid var(--games-line); background: #dce7e3; }
.games-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .24s ease; }
.games-card:hover .games-card__media img { transform: scale(1.025); }
.games-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: var(--games-ink-2); color: #9bbeb5; font: 900 12px/1 var(--mono); letter-spacing: .22em; }
.games-card__play-state { position: absolute; right: 8px; bottom: 8px; padding: 4px 7px; border: 1px solid rgb(255 255 255 / 36%); border-radius: 3px; background: rgb(4 27 23 / 84%); color: #fff; font-size: 9px; font-weight: 850; }
.games-card__rank { position: absolute; z-index: 1; top: 8px; left: 8px; min-width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 45%); border-radius: 3px; background: var(--games-accent-strong); color: #fff; font-size: 12px; font-weight: 900; }
.games-card__body { padding: 12px 13px 11px; }
.games-card__signals { display: flex; gap: 8px; margin: 0 0 7px; color: var(--games-mute); font-size: 9px; font-weight: 800; }
.games-card__signals span + span::before { content: "·"; margin-right: 8px; color: #9aa9a5; }
.games-card h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 1.28; letter-spacing: -.025em; }
.games-card h3 a:hover { color: var(--games-accent-strong); }
.games-card__developer { margin: 3px 0 0; color: var(--games-accent-strong); font-size: 10px; font-weight: 800; }
.games-card__desc { min-height: 2.9em; margin: 8px 0 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--games-mute); font-size: 11px; line-height: 1.45; }
.games-card__meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid #e0e8e5; color: var(--games-mute); font-size: 9px; }
.games-card__meta b { color: #173b33; font-size: 11px; }

.games-tab-module__head { min-height: 56px; display: flex; justify-content: space-between; align-items: end; gap: 10px; border-bottom: 1px solid var(--games-line); }
.games-tab-module__head > span { margin-bottom: 12px; }
.games-tab-module__head [role="tablist"] { display: flex; align-items: end; }
.games-tab-module__head button { min-height: 40px; padding: 0 9px; border-bottom: 2px solid transparent; background: transparent; color: var(--games-mute); cursor: pointer; font-size: 11px; font-weight: 800; }
.games-tab-module__head button b { margin-left: 2px; font-size: 9px; }
.games-tab-module__head button[aria-selected="true"] { border-bottom-color: var(--games-accent-strong); color: #102e28; }
.games-tab-panel { padding-top: 10px; }
.games-compact-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.games-card--compact .games-card__body { padding: 8px 9px; }
.games-card--compact .games-card__signals { margin-bottom: 4px; }
.games-card--compact .games-card__signals span:nth-child(2), .games-card--compact .games-card__desc { display: none; }
.games-card--compact h3 { font-size: 13px; }
.games-card--compact .games-card__developer { font-size: 9px; }
.games-card--compact .games-card__meta { margin-top: 7px; }
.games-card--compact .games-card__play-state { right: 5px; bottom: 5px; font-size: 8px; }

.games-ranking { margin-top: 26px; padding: 0 16px 16px; border: 1px solid var(--games-line); background: #edf3f1; }
.games-ranking .games-tab-module__head { min-height: 64px; }
.games-ranking .games-compact-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.games-updates { margin-top: 28px; }
.games-news { border-top: 1px solid #6d817c; }
.games-news a { min-height: 58px; padding: 8px 2px; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--games-line); }
.games-news a:hover strong { color: var(--games-accent-strong); }
.games-news span, .games-news small { color: var(--games-mute); font-size: 10px; }
.games-news strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
/* Canonical Game Pack: image-first storefront header, shared Community contracts below. */
.games-pack-experience .game-pack { gap: 28px; padding-top: 20px; }
.games-pack-experience .game-pack-hero { grid-template-columns: minmax(0, 1.48fr) minmax(380px, .82fr); gap: 0; padding: 0; overflow: hidden; border: 1px solid #285249; border-radius: 4px; background: var(--games-ink); color: #f5fbf9; }
.games-pack-experience .game-pack-hero__media { aspect-ratio: 16 / 9; background: #193f38; }
.games-pack-experience .game-pack-hero__copy { padding: 26px; }
.games-pack-experience .game-pack-hero h1 { margin: 7px 0 12px; overflow: hidden; font-size: clamp(1.8rem, 2.6vw, 3.1rem); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.games-pack-experience .game-pack-hero__desc { color: #c5d8d3; font-size: 13px; }
.games-pack-experience .game-facts { border-top-color: #41655d; }
.games-pack-experience .game-facts div { border-bottom-color: #41655d; }
.games-pack-experience .game-facts dt, .games-pack-experience .game-play-note { color: #9bb8b1; }
.games-pack-experience .game-facts dd { color: #f5fbf9; }
.games-pack-experience .game-pack-actions .button-secondary { border-color: #597a73; background: transparent; color: #fff; }
.games-pack-experience .game-pack-community { grid-template-columns: 280px minmax(0, 1fr); padding: 22px; border: 1px solid var(--games-line); background: var(--games-panel); }
.games-pack-experience .game-channels a { min-height: 43px; }

/* Private developer onboarding: editorial flow, not a legacy stacked admin form. */
.games-onboarding-hero { min-height: 164px; padding: 26px 30px; display: grid; grid-template-columns: minmax(460px, 1.15fr) minmax(0, .85fr); align-items: end; gap: 56px; border-bottom: 1px solid #285249; background: linear-gradient(112deg, #0a4036 0%, var(--games-ink-2) 62%, #12382f 100%); color: #f5fbf9; }
.games-onboarding-hero > div:first-child > span { color: #7dd7c1; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.games-onboarding-hero h1 { margin: 11px 0 0; font-size: clamp(2.25rem, 3.6vw, 3.9rem); line-height: 1.04; letter-spacing: -.05em; word-break: keep-all; }
.games-onboarding-hero h1 > span, .games-onboarding-hero h1 > em { display: block; }
.games-onboarding-hero h1 em { color: #9ce3d1; font-style: normal; }
.games-onboarding-hero h1 b { font: inherit; white-space: nowrap; }
.games-onboarding-hero__brief { align-self: end; }
.games-onboarding-hero__brief p { margin: 0; max-width: 590px; color: #bfd3ce; font-size: 12px; line-height: 1.65; }
.games-onboarding-hero__brief ul { margin: 13px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.games-onboarding-hero__brief li { padding: 5px 8px; border: 1px solid #39685e; color: #d8e9e5; font-size: 9px; font-weight: 800; }
.games-onboarding-layout { padding-top: 18px; }
.games-onboarding-steps { min-height: 82px; padding: 15px 18px; display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(210px, .52fr); align-items: center; gap: 18px; border: 1px solid var(--games-line); border-bottom: 0; background: #e8f0ed; }
.games-onboarding-steps > span { color: var(--games-accent-strong); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.games-onboarding-steps ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.games-onboarding-steps li { min-height: 34px; padding: 0 13px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; border-left: 1px solid var(--games-line); font-size: 10px; font-weight: 850; }
.games-onboarding-steps li b { width: 24px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #d2e6e0; color: var(--games-accent-strong); font: 800 8px/1 var(--mono); }
.games-onboarding-steps p { margin: 0; padding-left: 18px; border-left: 1px solid var(--games-line); color: var(--games-mute); font-size: 9px; line-height: 1.5; }
.games-application-form { display: grid; gap: 0; border: 1px solid var(--games-line); background: var(--games-panel); }
.games-form-section { padding: 28px 30px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 32px; border: 0; border-bottom: 1px solid var(--games-line); background: var(--games-panel); }
.games-form-section:nth-of-type(even) { background: #f6f8f7; }
.games-review-step { padding: 22px; border: 1px solid var(--games-line); background: var(--games-panel); }
.games-form-section > header { margin: 0; padding: 0 20px 0 0; display: block; border: 0; }
.games-form-section > header > span { display: block; margin-bottom: 25px; color: var(--games-accent-strong); font: 800 10px/1 var(--mono); }
.games-review-step > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--games-line); }
.games-review-step > header > b { color: var(--games-accent-strong); font: 800 11px/1.4 var(--mono); }
.games-form-section h2, .games-review-step h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.games-form-section header p, .games-review-step header p { margin: 7px 0 0; color: var(--games-mute); font-size: 10px; line-height: 1.55; }
.games-form-section > :not(header) { grid-column: 2; }
.games-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 13px; }
.games-field--wide { grid-column: 1 / -1; }
.games-field { display: grid; gap: 7px; color: #25413a; font-size: 10px; font-weight: 850; }
.games-field small { color: var(--games-mute); font-size: 9px; font-weight: 600; }
.games-field input, .games-field select, .games-field textarea, .games-proof-grid input, .games-asset-form input { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid #afc0bb; border-radius: 3px; outline: 0; background: #fbfcfb; color: #10231f; }
.games-field textarea { min-height: 112px; padding-block: 10px; resize: vertical; }
.games-field input:focus, .games-field select:focus, .games-field textarea:focus, .games-proof-grid input:focus, .games-asset-form input:focus { border-color: var(--games-accent-strong); box-shadow: 0 0 0 3px rgb(8 116 95 / 12%); }
.games-check-group { margin: 20px 0 0; padding: 15px; border: 1px solid var(--games-line); background: #eef4f2; }
.games-check-group legend { padding: 0 6px; font-size: 11px; font-weight: 850; }
.games-check-group > p { margin: 0 0 10px; color: var(--games-mute); font-size: 9px; }
.games-check-group > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--games-line); }
.games-check-group label, .games-check { min-height: 42px; padding: 9px 10px; display: flex; align-items: center; gap: 8px; background: #f7f9f8; font-size: 10px; font-weight: 700; }
.games-check-group--stack > div { grid-template-columns: 1fr; }
.games-check--feature { margin-top: 13px; border: 1px solid var(--games-line); }
.games-check--feature span { display: grid; gap: 2px; color: var(--games-mute); font-size: 9px; }
.games-check--feature b { color: #10231f; font-size: 11px; }
.games-form-submit { min-height: 88px; padding: 16px 22px 16px 270px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 0; background: var(--games-ink); color: #fff; }
.games-form-submit p { margin: 0; color: #a9c1bb; font-size: 10px; }
.games-form-submit button, .games-proof-grid button, .games-proof-challenge button, .games-asset-form button, .games-review-submit button { min-height: 44px; padding: 0 16px; border: 1px solid #58a08f; border-radius: 3px; background: var(--games-accent-strong); color: #fff; cursor: pointer; font-weight: 850; }
.games-onboarding-status { min-height: 22px; color: var(--games-accent-strong); }

.games-application-detail { display: grid; gap: 16px; padding-top: 24px; }
.games-application-status { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; border: 1px solid #285249; background: var(--games-ink-2); color: #fff; }
.games-application-status > div > span, .games-review-submit span { color: #79c9b6; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.games-application-status h1 { margin: 4px 0 0; font-size: 32px; }
.games-application-status dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); border-left: 1px solid #41655d; }
.games-application-status dl div { padding: 4px 16px; border-right: 1px solid #41655d; }
.games-application-status dt { color: #9dbab3; font-size: 9px; }
.games-application-status dd { margin: 4px 0 0; font-size: 11px; font-weight: 850; }
.games-proof-status { margin: 0 0 14px; padding: 10px 12px 10px 28px; background: #edf3f1; color: var(--games-mute); font-size: 10px; }
.games-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.games-proof-grid form { min-width: 0; padding: 14px; border: 1px solid var(--games-line); background: #f7f9f8; }
.games-proof-grid form > span { color: var(--games-accent-strong); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.games-proof-grid h3 { margin: 4px 0 8px; font-size: 13px; }
.games-proof-grid p { min-height: 42px; margin: 0 0 10px; color: var(--games-mute); font-size: 9px; overflow-wrap: anywhere; }
.games-proof-grid input { margin-bottom: 8px; }
.games-proof-challenge { min-height: 48px; margin-top: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--games-line); background: #edf3f1; }
.games-proof-challenge > span { color: var(--games-mute); font-size: 9px; }
.games-proof-challenge code { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.games-proof-challenge button { margin-left: auto; }
.games-asset-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.games-asset-form ul { grid-column: 1 / -1; margin: 4px 0 0; color: var(--games-mute); font-size: 10px; }
.games-review-submit { min-height: 100px; padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 1px solid #285249; background: var(--games-ink); color: #fff; }
.games-review-submit h2 { margin: 3px 0; }
.games-review-submit p { margin: 0; color: #a9c1bb; font-size: 10px; }
.games-review-submit > div:last-child { display: flex; gap: 7px; }
.games-review-submit [data-action="withdraw"] { border-color: #6f8781; background: transparent; }

@media (max-width: 1180px) {
  .games-intro { grid-template-columns: minmax(340px, 1fr) minmax(300px, 1fr); }
  .games-loop { grid-column: 1 / -1; }
  .games-discovery-grid { grid-template-columns: 1fr; }
  .games-tab-module:not(.games-ranking) .games-compact-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .games-ranking .games-compact-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .games-pack-experience .game-pack-hero { grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); }
  .games-onboarding-steps { grid-template-columns: 130px minmax(0, 1fr); }
  .games-onboarding-steps p { display: none; }
}

@media (max-width: 760px) {
  main.content:has(> .games-experience) { width: calc(100% - 24px); }
  .desktop-nav > .nav-games { min-width: 0; }
  .mobile-nav .nav-games { background: var(--games-ink, #0c3b33); color: #fff; }
  .games-local-header { grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px 0; }
  .games-local-header nav { grid-column: 1 / -1; order: 3; overflow: hidden; border-top: 1px solid #285249; }
  .games-local-header nav a { min-width: 0; flex: 1 1 25%; justify-content: center; padding-inline: 4px; font-size: 10px; }
  .games-local-apply { padding-inline: 10px; }
  .games-local-apply span { display: none; }
  .games-intro { min-height: 0; grid-template-columns: 1fr; gap: 9px; padding: 14px 14px 12px; }
  .games-intro h1 { margin-top: 5px; font-size: clamp(1.75rem, 8vw, 2.1rem); line-height: 1; }
  .games-intro__copy p { font-size: 11px; line-height: 1.45; }
  .games-intro__copy > small { margin-top: 2px; font-size: 9px; }
  .games-intro__copy > div { margin-top: 9px; }
  .games-intro__copy .button { min-height: 41px; padding-inline: 13px; font-size: 12px; }
  .games-loop { grid-column: auto; }
  .games-loop li { min-height: 41px; padding: 6px; }
  .games-loop span { font-size: 9px; }
  .games-portal { padding-top: 13px; }
  .games-module__head { align-items: start; }
  .games-module__head p { display: none; }
  .games-featured-rail, .games-compact-rail, .games-tab-module:not(.games-ranking) .games-compact-rail, .games-ranking .games-compact-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 310px);
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .games-featured-rail > .games-card:only-child { display: block; }
  .games-featured-rail > .games-card:only-child .games-card__media { min-height: 0; border-right: 0; border-bottom: 1px solid var(--games-line); }
  .games-featured-rail > .games-card:only-child .games-card__body { display: block; padding: 12px 13px 11px; }
  .games-featured-rail > .games-card:only-child .games-card__meta { margin-top: 0; }
  .games-featured-rail .games-card, .games-compact-rail .games-card { scroll-snap-align: start; }
  .games-tab-module__head { align-items: center; }
  .games-tab-module__head > span { display: none; }
  .games-ranking { margin-inline: -12px; padding-inline: 12px; }
  .games-news a { grid-template-columns: 1fr auto; gap: 3px 10px; }
  .games-news a span { grid-column: 1 / -1; }
  .games-pack-experience .game-pack-hero { grid-template-columns: 1fr; margin-inline: 0; }
  .games-pack-experience .game-pack-hero__copy { padding: 18px; }
  .games-pack-experience .game-pack-hero h1 { display: -webkit-box; overflow: hidden; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.02; text-overflow: clip; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .games-pack-experience .game-pack-community { grid-template-columns: 1fr; padding: 14px; }
  .games-onboarding-hero { min-height: 0; grid-template-columns: 1fr; gap: 13px; padding: 18px 16px 17px; }
  .games-onboarding-hero h1 { margin-top: 8px; font-size: clamp(2rem, 9.3vw, 2.45rem); line-height: .95; }
  .games-onboarding-hero__brief p { font-size: 10px; line-height: 1.5; }
  .games-onboarding-hero__brief ul { margin-top: 9px; }
  .games-onboarding-hero__brief li { padding: 4px 6px; font-size: 8px; }
  .games-onboarding-layout { padding-top: 12px; }
  .games-onboarding-steps { min-height: 68px; padding: 9px; display: block; }
  .games-onboarding-steps > span { display: none; }
  .games-onboarding-steps ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .games-onboarding-steps li { min-height: 48px; padding: 4px 2px; display: flex; justify-content: center; flex-direction: column; gap: 5px; border-left: 0; border-right: 1px solid var(--games-line); font-size: 8px; text-align: center; }
  .games-onboarding-steps li:last-child { border-right: 0; }
  .games-onboarding-steps li b { width: 22px; }
  .games-onboarding-steps p { display: none; }
  .games-form-section { padding: 19px 15px; grid-template-columns: 1fr; gap: 17px; }
  .games-form-section > header { padding: 0 0 13px; border-bottom: 1px solid var(--games-line); }
  .games-form-section > header > span { margin-bottom: 9px; }
  .games-form-section > :not(header) { grid-column: 1; }
  .games-review-step { padding: 15px; }
  .games-form-grid, .games-proof-grid { grid-template-columns: 1fr; }
  .games-check-group > div { grid-template-columns: 1fr; }
  .games-form-submit, .games-review-submit { padding: 16px; align-items: stretch; flex-direction: column; }
  .games-application-status { grid-template-columns: 1fr; }
  .games-application-status dl { border-top: 1px solid #41655d; border-left: 0; }
  .games-asset-form { grid-template-columns: 1fr; }
  .games-asset-form ul { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .games-card__media img { transition: none; }
}

/* ==========================================================================
   PacPik Games launch surface
   Image-led discovery and a purpose-built developer intake surface.
   ========================================================================== */

.desktop-nav__primary { min-width: 0; display: flex; align-items: stretch; }
.desktop-nav > .nav-games { flex: none; margin-left: auto; }
.profile-menu[data-open="true"] .profile-menu__flyout { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.profile-menu[data-open="true"] .identity-button > .icon:last-child { transform: rotate(180deg); }

.games-discovery {
  --games-home-bg: #090a13;
  --games-home-panel: #111320;
  --games-home-panel-2: #171a2a;
  --games-home-line: rgb(166 174 221 / 22%);
  --games-home-muted: #a0a6c0;
  --games-home-accent: #8c7cff;
  --games-home-accent-2: #4e8dff;
  background: var(--games-home-bg);
  box-shadow: 0 0 0 100vmax var(--games-home-bg);
  clip-path: inset(0 -100vmax);
}

.games-discovery .games-local-header {
  border-bottom-color: var(--games-home-line);
  background: #0d0f1b;
  color: #f7f7ff;
}
.games-discovery .games-wordmark span { color: #8e95b0; }
.games-discovery .games-wordmark strong { color: #f5f3ff; }
.games-discovery .games-local-header nav a { color: #9097b2; }
.games-discovery .games-local-header nav a:hover,
.games-discovery .games-local-header nav a[aria-current="page"] { border-bottom-color: var(--games-home-accent); color: #fff; }
.games-discovery .games-local-apply { border-color: #535974; color: #fff; }
.games-discovery .games-local-apply span { color: #a9a0ff; }
.games-discovery .games-local-apply:hover,
.games-discovery .games-local-apply[aria-current="page"] { border-color: var(--games-home-accent); background: #1c1c33; }
.games-discovery .games-kicker { color: #9f96ff; }
.games-discovery .games-button { border-color: #8c7cff; background: #8c7cff; color: #0b0b14; }
.games-discovery .games-button:hover { border-color: #a79cff; background: #a79cff; }

.games-showcase {
  position: relative;
  min-height: clamp(510px, 59vh, 660px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--games-home-line);
  background: var(--games-home-bg);
  color: #f6fbf9;
}
.games-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(7 8 18 / 97%) 0%, rgb(7 8 18 / 82%) 36%, rgb(7 8 18 / 18%) 68%, rgb(7 8 18 / 48%) 100%),
    linear-gradient(0deg, var(--games-home-bg) 0%, transparent 34%);
}
.games-showcase__art { position: absolute; z-index: -2; inset: 0 0 0 29%; overflow: hidden; background: #181b2c; }
.games-showcase__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(7 8 18 / 4%), rgb(7 8 18 / 48%)); }
.games-showcase__art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.025); }
.games-showcase__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #676d91; font: 900 clamp(2rem, 6vw, 7rem)/1 var(--sans); letter-spacing: -.07em; }
.games-showcase__identity {
  position: absolute;
  z-index: 2;
  top: 52px;
  left: clamp(28px, 4vw, 66px);
  width: min(440px, 33vw);
}
.games-showcase__identity > p { max-width: 390px; margin-top: 10px; color: #c6c9db; font-size: 13px; line-height: 1.65; }
.games-showcase__identity > small { display: block; margin-top: 4px; color: #8e94ad; font-size: 10px; }
.games-showcase__identity > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.games-showcase .button-secondary { border-color: #5d627e; background: rgb(8 9 20 / 52%); color: #fff; }
.games-showcase__game {
  position: absolute;
  z-index: 2;
  left: clamp(28px, 4vw, 66px);
  bottom: 84px;
  width: min(570px, 43vw);
}
.games-showcase__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.games-showcase__tags span { padding: 5px 8px; border: 1px solid rgb(180 173 255 / 38%); background: rgb(17 17 38 / 66%); color: #d0cbff; font-size: 9px; font-weight: 850; letter-spacing: .05em; }
.games-showcase__game h1 { margin: 13px 0 0; font-size: clamp(3.4rem, 6.2vw, 6.6rem); line-height: .88; letter-spacing: -.075em; text-wrap: balance; }
.games-showcase__developer { margin-top: 12px; color: #a49aff; font-size: 12px; font-weight: 850; }
.games-showcase__description { max-width: 520px; margin-top: 9px; color: #d1d3df; font-size: 13px; line-height: 1.6; }
.games-showcase__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.games-showcase__actions > span { color: #a2a7bd; font-size: 10px; }
.games-showcase__actions > span b { margin-left: 3px; color: #fff; font-size: 12px; }
.games-showcase .games-loop {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 3vw, 48px);
  bottom: 30px;
  width: min(560px, 42vw);
  border-color: rgb(182 176 239 / 34%);
  background: rgb(8 9 20 / 66%);
}
.games-showcase .games-loop li { border-color: rgb(182 176 239 / 24%); }
.games-showcase .games-loop b { color: #9f96ff; }
.games-showcase .games-loop span { color: #f4faf8; }

.games-discovery .games-portal { padding: 28px 0 52px; background: #f2f2f6; color: #161726; box-shadow: 0 0 0 100vmax #f2f2f6; clip-path: inset(0 -100vmax); }
.games-discovery-grid:empty { display: none; }
.games-discovery-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.games-discovery-grid:has(> .games-tab-module:only-child) .games-compact-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.games-card { box-shadow: 0 12px 28px rgb(10 41 35 / 7%); }
.games-card__media { background: #1a1d2e; }
.games-card__play-state { background: rgb(9 10 22 / 90%); }

/* Zero games is a deliberate launch state, not an empty dashboard row. */
.games-zero-stage {
  position: relative;
  min-height: clamp(650px, calc(100vh - 168px), 780px);
  padding: clamp(56px, 7vh, 88px) clamp(34px, 5.2vw, 82px) 34px;
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(460px, 1.08fr);
  grid-template-rows: 1fr auto;
  gap: 48px 7vw;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--games-home-line);
  background:
    radial-gradient(circle at 78% 16%, rgb(92 73 255 / 20%) 0, transparent 27%),
    radial-gradient(circle at 56% 76%, rgb(47 120 255 / 13%) 0, transparent 34%),
    linear-gradient(125deg, #090a13 0 56%, #0d1020 100%);
  color: #f7f7ff;
}
.games-zero-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .28;
  background-image:
    linear-gradient(rgb(165 172 221 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(165 172 221 / 8%) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent 5%, #000 46%, #000 100%);
}
.games-zero-stage__copy { position: relative; z-index: 2; align-self: center; }
.games-zero-stage__status { margin: 30px 0 0; display: flex; align-items: center; gap: 8px; color: #c2c5da; font: 750 10px/1 var(--mono); letter-spacing: .13em; }
.games-zero-stage__status i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #ff6f91; box-shadow: 0 0 0 5px rgb(255 111 145 / 12%); }
.games-zero-stage h1 { margin: 18px 0 0; font-size: clamp(3rem, 3vw, 3.9rem); line-height: 1.03; letter-spacing: -.055em; word-break: keep-all; }
.games-zero-stage h1 > span, .games-zero-stage h1 > em { display: block; }
.games-zero-stage h1 em { color: #a79cff; font-style: normal; }
.games-zero-stage__copy > p:not(.games-zero-stage__status) { max-width: 560px; margin: 24px 0 0; color: #c1c5d8; font-size: 14px; line-height: 1.7; }
.games-zero-stage__copy > small { display: block; margin-top: 6px; color: #848ba7; font-size: 11px; }
.games-zero-stage__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.games-zero-stage__actions .button { min-height: 48px; padding-inline: 19px; }
.games-zero-stage__actions .button-secondary { border-color: #555b77; background: rgb(17 19 32 / 72%); color: #f7f7ff; }

.games-zero-stage__visual { position: relative; min-width: 0; align-self: center; perspective: 1100px; }
.games-zero-stage__visual::before { content: ""; position: absolute; inset: -14% 7% -14% 18%; border-radius: 50%; background: #6758ff; opacity: .13; filter: blur(52px); }
.games-zero-stage__screen { position: relative; z-index: 1; width: min(100%, 690px); margin-left: auto; overflow: hidden; border: 1px solid rgb(189 184 255 / 34%); border-radius: 10px; background: rgb(17 19 34 / 88%); box-shadow: 0 42px 90px rgb(0 0 0 / 44%); transform: rotateY(-5deg) rotateX(1deg); }
.games-zero-stage__screenbar { height: 42px; padding: 0 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--games-home-line); background: #151726; }
.games-zero-stage__screenbar > span { display: flex; gap: 5px; }
.games-zero-stage__screenbar i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #555a72; }
.games-zero-stage__screenbar i:first-child { background: #ff6f91; }
.games-zero-stage__screenbar i:nth-child(2) { background: #f7b955; }
.games-zero-stage__screenbar i:nth-child(3) { background: #7768ff; }
.games-zero-stage__screenbar b { color: #757c9a; font: 700 8px/1 var(--mono); letter-spacing: .13em; }
.games-zero-stage__canvas { aspect-ratio: 16 / 9; min-height: 280px; padding: 34px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-items: end; overflow: hidden; background:
  linear-gradient(145deg, transparent 0 49.6%, rgb(178 172 255 / 18%) 49.8% 50.2%, transparent 50.4%),
  radial-gradient(circle at 72% 36%, rgb(116 99 255 / 32%) 0 3px, transparent 4px),
  linear-gradient(135deg, #121426, #1d2040 52%, #141628);
}
.games-zero-stage__canvas::before { content: ""; grid-column: 1 / -1; grid-row: 1 / -1; width: 48%; aspect-ratio: 1; justify-self: end; align-self: center; border: 1px solid rgb(181 174 255 / 31%); border-radius: 50%; box-shadow: 0 0 0 30px rgb(146 133 255 / 5%), 0 0 0 70px rgb(146 133 255 / 4%); }
.games-zero-stage__canvas span { grid-column: 1; grid-row: 1; align-self: start; color: #9d94ff; font: 800 9px/1 var(--mono); letter-spacing: .18em; }
.games-zero-stage__canvas strong { grid-column: 1; grid-row: 2; align-self: center; color: #f5f4ff; font: 900 clamp(6rem, 10vw, 10rem)/.78 var(--sans); letter-spacing: -.11em; }
.games-zero-stage__canvas small { grid-column: 1 / -1; grid-row: 3; padding-top: 16px; border-top: 1px solid rgb(173 179 221 / 20%); color: #8f96b2; font: 700 8px/1 var(--mono); letter-spacing: .15em; }
.games-zero-stage__index { position: absolute; z-index: 2; right: -14px; bottom: -22px; min-width: 150px; height: 48px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #5d5a82; background: #0d0f1c; color: #858ca8; font: 700 9px/1 var(--mono); box-shadow: 0 18px 32px rgb(0 0 0 / 32%); }
.games-zero-stage__index b { color: #8c7cff; }

.games-zero-stage__loop { grid-column: 1; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: end; list-style: none; border-top: 1px solid var(--games-home-line); border-bottom: 1px solid var(--games-home-line); }
.games-zero-stage__loop li { min-width: 0; min-height: 66px; padding: 11px 9px; display: grid; align-content: center; gap: 4px; border-left: 1px solid var(--games-home-line); }
.games-zero-stage__loop li:first-child { border-left: 0; }
.games-zero-stage__loop b { color: #8c7cff; font: 700 9px/1 var(--mono); }
.games-zero-stage__loop span { overflow: hidden; text-overflow: ellipsis; color: #d8daea; font-size: 10px; font-weight: 800; white-space: nowrap; }

.games-zero-stage__recruit { grid-column: 2; min-width: 0; min-height: 126px; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 22px; border: 1px solid var(--games-home-line); border-left: 3px solid #8c7cff; border-radius: 6px; background: rgb(20 22 38 / 84%); }
.games-zero-stage__recruit > div > span { color: #9e96ff; font: 800 8px/1 var(--mono); letter-spacing: .15em; }
.games-zero-stage__recruit h2 { margin: 7px 0 4px; font-size: 18px; letter-spacing: -.025em; }
.games-zero-stage__recruit p { margin: 0; color: #9096af; font-size: 10px; line-height: 1.5; }
.games-zero-stage__recruit ul { grid-column: 1; margin: 0; padding: 0; display: flex; list-style: none; }
.games-zero-stage__recruit li { position: relative; padding: 0 13px; color: #bec2d4; font-size: 9px; font-weight: 750; white-space: nowrap; }
.games-zero-stage__recruit li + li::before { content: "→"; position: absolute; left: -4px; color: #686f8b; }
.games-zero-stage__recruit .button { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; white-space: nowrap; }

@keyframes games-home-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes games-home-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes games-home-art-settle {
  from { opacity: .5; transform: scale(1.065); }
  to { opacity: 1; transform: scale(1.025); }
}
.games-discovery .games-local-header { animation: games-home-fade .4s ease-out both; }
.games-zero-stage__copy { animation: games-home-rise .62s cubic-bezier(.2, .8, .2, 1) .06s both; }
.games-zero-stage__visual { animation: games-home-rise .72s cubic-bezier(.2, .8, .2, 1) .15s both; }
.games-zero-stage__loop { animation: games-home-rise .55s cubic-bezier(.2, .8, .2, 1) .24s both; }
.games-zero-stage__recruit { animation: games-home-rise .55s cubic-bezier(.2, .8, .2, 1) .32s both; }
.games-showcase__identity { animation: games-home-rise .6s cubic-bezier(.2, .8, .2, 1) .05s both; }
.games-showcase__game { animation: games-home-rise .65s cubic-bezier(.2, .8, .2, 1) .14s both; }
.games-showcase .games-loop { animation: games-home-rise .55s cubic-bezier(.2, .8, .2, 1) .25s both; }
.games-showcase__art img { animation: games-home-art-settle 1.1s cubic-bezier(.2, .8, .2, 1) both; }

@supports (animation-timeline: view()) {
  .games-discovery .games-featured,
  .games-discovery .games-tab-module,
  .games-discovery .games-updates {
    animation: games-home-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 32%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .games-discovery .games-local-header,
  .games-zero-stage__copy,
  .games-zero-stage__visual,
  .games-zero-stage__loop,
  .games-zero-stage__recruit,
  .games-showcase__identity,
  .games-showcase__game,
  .games-showcase .games-loop,
  .games-showcase__art img,
  .games-discovery .games-featured,
  .games-discovery .games-tab-module,
  .games-discovery .games-updates { animation: none; }
}

/* Developer application: an intentional submission studio, not a document form. */
.games-onboarding {
  padding-bottom: 54px;
  background: #071b19;
  color: #eef7f4;
  box-shadow: 0 0 0 100vmax #071b19;
  clip-path: inset(0 -100vmax);
}
.games-onboarding-hero {
  position: relative;
  min-height: 260px;
  padding: 48px clamp(32px, 5vw, 74px);
  grid-template-columns: minmax(460px, 1.12fr) minmax(340px, .72fr);
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid #38635a;
  background:
    radial-gradient(circle at 78% 22%, rgb(80 207 176 / 16%) 0 2px, transparent 3px),
    linear-gradient(112deg, #092720 0 54%, #0c3930 54% 100%);
}
.games-onboarding-hero::after {
  content: "01—04";
  position: absolute;
  right: clamp(30px, 5vw, 76px);
  bottom: -24px;
  color: rgb(133 226 203 / 9%);
  font: 900 clamp(5rem, 10vw, 10rem)/1 var(--sans);
  letter-spacing: -.09em;
  pointer-events: none;
}
.games-onboarding-hero h1 { position: relative; z-index: 1; max-width: 780px; font-size: clamp(2.8rem, 4.15vw, 4.45rem); line-height: 1.04; }
.games-onboarding-hero__brief { position: relative; z-index: 1; }
.games-onboarding-hero__brief p { font-size: 13px; }
.games-onboarding-hero__brief li { min-height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border-color: #4f796f; background: rgb(3 23 19 / 34%); font-size: 10px; }
.games-onboarding-layout {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
  padding-top: 26px;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.games-onboarding-steps {
  position: sticky;
  top: calc(var(--ui-header) + 18px);
  min-height: 0;
  padding: 20px;
  display: block;
  border: 1px solid #31564e;
  background: #0d2924;
  color: #ecf6f3;
}
.games-onboarding-steps > span { color: #76d4be; }
.games-onboarding-steps ol { margin-top: 18px; display: grid; grid-template-columns: 1fr; }
.games-onboarding-steps li { min-height: 54px; padding: 8px 0; border: 0; border-top: 1px solid #284b43; font-size: 11px; }
.games-onboarding-steps li b { width: 27px; background: #173c34; color: #8ae0cb; }
.games-onboarding-steps p { margin-top: 18px; padding: 16px 0 0; border: 0; border-top: 1px solid #31564e; color: #9db9b2; font-size: 10px; }
.games-application-form { overflow: hidden; border-color: #bfd0ca; border-radius: 6px; box-shadow: 0 28px 70px rgb(0 8 6 / 26%); color: #10231f; color-scheme: light; }
.games-form-section { padding: 34px 36px; grid-template-columns: 190px minmax(0, 1fr); gap: 0 34px; background: #fff; }
.games-form-section:nth-of-type(even) { background: #f3f7f5; }
.games-form-section > header { padding-right: 24px; }
.games-form-section > header > span { width: 31px; height: 31px; margin-bottom: 20px; display: grid; place-items: center; border: 1px solid #a9c9bf; border-radius: 50%; background: #e7f3ef; }
.games-form-section h2 { font-size: 21px; }
.games-form-section header p { font-size: 11px; }
.games-form-grid { gap: 18px 14px; }
.games-field { gap: 8px; font-size: 11px; }
.ui-app .games-application-form .games-field input:not([type="checkbox"]), .ui-app .games-application-form .games-field select, .ui-app .games-application-form .games-field textarea, .ui-app .games-proof-grid input:not([type="checkbox"]), .ui-app .games-asset-form input:not([type="checkbox"]) {
  min-height: 50px;
  border-color: #b9c9c4;
  border-radius: 6px;
  background: #fff;
}
.games-field textarea { min-height: 132px; }

.games-check-group { margin-top: 22px; padding: 16px; border-color: #bed0ca; border-radius: 6px; background: #e8f1ee; }
.games-check-group legend { padding-inline: 8px; font-size: 12px; }
.games-check-group > p { margin-bottom: 12px; font-size: 10px; }
.games-check-group > div { gap: 8px; background: transparent; }
.games-check-group label, .games-check {
  position: relative;
  min-height: 52px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #c4d3ce;
  border-radius: 6px;
  background: #fff;
  color: #29423c;
  cursor: pointer;
  font-size: 10px;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.games-check-group label:hover, .games-check:hover { border-color: #6c9d91; }
.games-check-group label:has(input:checked), .games-check:has(input:checked) { border-color: #177a67; background: #dff3ed; color: #0a4e41; }
.games-check-group input[type="checkbox"], .games-check--feature input[type="checkbox"] {
  appearance: none;
  width: 36px;
  min-width: 36px;
  height: 20px;
  margin: 0;
  padding: 2px;
  border: 1px solid #8ba69f;
  border-radius: 999px;
  background: #dce5e2;
  cursor: pointer;
}
.games-check-group input[type="checkbox"]::before, .games-check--feature input[type="checkbox"]::before {
  content: "";
  width: 14px;
  height: 14px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(5 33 27 / 28%);
  transition: transform .14s ease;
}
.games-check-group input[type="checkbox"]:checked, .games-check--feature input[type="checkbox"]:checked { border-color: #08745f; background: #08745f; }
.games-check-group input[type="checkbox"]:checked::before, .games-check--feature input[type="checkbox"]:checked::before { transform: translateX(16px); }
.games-check-group input[type="checkbox"]:focus-visible, .games-check--feature input[type="checkbox"]:focus-visible { outline: 2px solid #08745f; outline-offset: 3px; }
.games-check-group--stack > div { gap: 6px; }
.games-check-group--stack label { min-height: 46px; grid-template-columns: 18px minmax(0, 1fr); padding: 9px 11px; }
.games-check-group--stack input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  background: #fff;
}
.games-check-group--stack input[type="checkbox"]::before {
  width: 9px;
  height: 5px;
  margin: 4px 0 0 4px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: rotate(-45deg);
}
.games-check-group--stack input[type="checkbox"]:checked::before { opacity: 1; transform: rotate(-45deg); }
.games-check--feature { min-height: 62px; margin-top: 16px; padding: 11px 14px; }
.games-check--feature span { font-size: 10px; }
.games-check--feature b { font-size: 12px; }
.games-form-submit { min-height: 96px; padding: 18px 28px; background: #0b3029; }
.games-form-submit button { min-width: 180px; border-radius: 5px; }

@media (max-width: 1040px) {
  .games-showcase { min-height: 600px; }
  .games-showcase__art { left: 20%; }
  .games-showcase__identity { width: min(470px, 46vw); }
  .games-showcase__game { width: min(590px, 56vw); }
  .games-showcase .games-loop { width: min(440px, 38vw); }
  .games-zero-stage { grid-template-columns: minmax(360px, .85fr) minmax(390px, 1.15fr); gap-inline: 4vw; }
  .games-zero-stage__recruit { grid-template-columns: minmax(0, 1fr) auto; }
  .games-onboarding-layout { grid-template-columns: 1fr; }
  .games-onboarding-steps { position: static; display: grid; grid-template-columns: 140px minmax(0, 1fr); }
  .games-onboarding-steps ol { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .games-onboarding-steps li { padding-inline: 8px; border-top: 0; border-left: 1px solid #284b43; }
  .games-onboarding-steps p { display: none; }
}

@media (max-width: 760px) {
  .desktop-nav__primary { display: contents; }
  .mobile-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mobile-nav .nav-games { align-content: center; gap: 0; padding-inline: 2px; }
  .mobile-nav .nav-games .icon { display: none; }
  .mobile-nav .nav-games span { font-size: 0; }
  .mobile-nav .nav-games span::after { content: "Games"; font-size: 8px; }
  .mobile-nav .nav-games small { margin: 0; border: 0; font-size: 6px; line-height: 1; }
  .games-showcase { min-height: 610px; margin-inline: -12px; }
  .games-showcase::after { background: linear-gradient(0deg, #090a13 7%, rgb(7 8 18 / 72%) 48%, rgb(7 8 18 / 20%) 100%); }
  .games-showcase__art { inset: 0 0 44% 0; }
  .games-showcase__art img { object-position: center; }
  .games-showcase__identity { top: 20px; right: 16px; left: 16px; width: auto; }
  .games-showcase__identity > p { max-width: 330px; font-size: 11px; }
  .games-showcase__identity > div { margin-top: 12px; }
  .games-showcase__game { right: 16px; bottom: 82px; left: 16px; width: auto; }
  .games-showcase__game h1 { margin-top: 9px; font-size: clamp(3rem, 17vw, 4.8rem); }
  .games-showcase__description { max-width: none; font-size: 11px; }
  .games-showcase__actions { margin-top: 12px; }
  .games-showcase .games-loop { right: 16px; bottom: 18px; left: 16px; width: auto; }
  .games-showcase .games-loop li { min-height: 45px; }
  .games-showcase .games-loop span { font-size: 8px; }
  .games-discovery .games-portal { margin-inline: -12px; padding-inline: 12px; }
  .games-zero-stage { min-height: 0; margin-inline: -12px; padding: 38px 18px 20px; grid-template-columns: 1fr; grid-template-rows: auto; gap: 30px; }
  .games-zero-stage::before { background-size: 42px 42px; mask-image: linear-gradient(180deg, transparent, #000 24%, #000 100%); }
  .games-zero-stage__copy { grid-column: 1; }
  .games-zero-stage__status { margin-top: 20px; }
  .games-zero-stage h1 { font-size: clamp(2.6rem, 11vw, 3.4rem); line-height: 1.04; }
  .games-zero-stage__copy > p:not(.games-zero-stage__status) { margin-top: 18px; font-size: 12px; }
  .games-zero-stage__actions { margin-top: 22px; }
  .games-zero-stage__actions .button { flex: 1 1 calc(50% - 5px); justify-content: center; padding-inline: 10px; }
  .games-zero-stage__visual { grid-column: 1; }
  .games-zero-stage__screen { transform: none; }
  .games-zero-stage__canvas { min-height: 0; padding: 22px; }
  .games-zero-stage__canvas strong { font-size: clamp(5rem, 30vw, 7.5rem); }
  .games-zero-stage__index { right: -5px; bottom: -18px; }
  .games-zero-stage__loop { grid-column: 1; order: 3; }
  .games-zero-stage__loop li { min-height: 56px; padding-inline: 6px; }
  .games-zero-stage__loop span { font-size: 8px; }
  .games-zero-stage__recruit { grid-column: 1; order: 4; padding: 18px; grid-template-columns: 1fr; gap: 15px; }
  .games-zero-stage__recruit ul, .games-zero-stage__recruit .button { grid-column: 1; grid-row: auto; }
  .games-zero-stage__recruit .button { justify-content: center; }
  .games-discovery-grid:has(> .games-tab-module:only-child) .games-compact-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 310px); grid-template-columns: none; }
  .games-onboarding { margin-inline: -12px; }
  .games-onboarding-hero { min-height: 270px; padding: 24px 20px; grid-template-columns: 1fr; align-content: center; }
  .games-onboarding-hero h1 { font-size: clamp(2.15rem, 9.2vw, 2.75rem); word-break: keep-all; }
  .games-onboarding-layout { width: calc(100% - 24px); padding-top: 12px; }
  .games-onboarding-steps { display: block; }
  .games-onboarding-steps ol { margin-top: 12px; }
  .games-onboarding-steps li { border-left: 0; }
  .games-form-section { padding: 24px 18px; grid-template-columns: 1fr; gap: 18px; }
  .games-form-section > header { padding: 0 0 16px; }
  .games-check-group { padding: 12px; }
  .games-check-group label { font-size: 11px; }
}

.rate-card-current,
.rate-card-unpublished,
.rate-card-terms {
  max-width: 920px;
  margin-inline: auto;
}

.rate-card-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.rate-card-summary h2 {
  margin: 6px 0 4px;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
}

.rate-card-summary p,
.rate-card-unpublished p,
.rate-card-terms p {
  color: var(--ui-dim, var(--mute));
  line-height: 1.7;
}

.rate-card-summary dl {
  display: flex;
  gap: 22px;
  margin: 0;
}

.rate-card-summary dl div {
  display: grid;
  gap: 4px;
}

.rate-card-summary dt,
.rate-card-list small {
  color: var(--ui-dim, var(--mute));
  font-size: .78rem;
}

.rate-card-summary dd {
  margin: 0;
  font-weight: 700;
}

.rate-card-list {
  display: grid;
  gap: 10px;
}

.rate-card-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border-radius: var(--ui-radius, 4px);
  background: var(--ui-paper-2, rgba(127, 127, 127, .08));
}

.rate-card-list article div {
  display: grid;
  gap: 4px;
}

.rate-card-list article b {
  white-space: nowrap;
  font-size: 1.05rem;
}

@media (max-width: 640px) {
  .rate-card-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .rate-card-summary dl {
    width: 100%;
    justify-content: space-between;
  }
}

/* ========================================================================
   My — personal workspace
   Account data and actions keep their existing contracts. This layer only
   gives the route a clear personal identity, dense navigation, and readable
   settings surfaces instead of the generic document-page stack.
   ======================================================================== */
.my-experience {
  --my-accent: #a993ff;
  --my-accent-strong: #8067ef;
  --my-ink: #f7f5ff;
  --my-muted: #b8b7c9;
  display: grid;
  gap: 18px;
  margin-top: -4px;
}

.my-identity {
  position: relative;
  isolation: isolate;
  min-height: 154px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: space-between;
  gap: 16px 24px;
  overflow: hidden;
  padding: clamp(19px, 2.4vw, 26px);
  border: 1px solid color-mix(in srgb, var(--my-accent) 20%, var(--ui-line));
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 2%, rgb(169 147 255 / 20%), transparent 30%),
    linear-gradient(135deg, var(--ui-paper) 0%, color-mix(in srgb, var(--my-accent) 8%, var(--ui-paper)) 100%);
  color: var(--ui-ink);
  box-shadow: 0 18px 48px rgb(40 36 70 / 9%);
  animation: my-enter .62s cubic-bezier(.22, .8, .24, 1) both;
}
.my-identity::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -92px;
  right: 18%;
  width: 270px;
  height: 270px;
  border: 1px solid color-mix(in srgb, var(--my-accent) 15%, transparent);
  border-radius: 50%;
  opacity: .65;
}
.my-identity::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8px;
  bottom: -56px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--my-accent) 18%, transparent) 0 2px, transparent 3px) 0 0 / 14px 14px;
  pointer-events: none;
}
.my-identity__person { min-width: 0; display: flex; align-items: center; gap: 15px; }
.my-identity__person .profile-medallion--profile { width: 68px; height: 68px; }
.my-identity__kicker { display: block; margin-bottom: 7px; color: var(--my-accent); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.my-identity h1 { margin: 0; font-size: clamp(1.6rem, 2.5vw, 2.1rem); line-height: 1.08; letter-spacing: -.045em; overflow-wrap: anywhere; }
.my-identity__person p { margin: 7px 0 0; color: var(--ui-dim); font-size: 12px; line-height: 1.55; }
.my-identity__actions { display: flex; align-items: flex-start; gap: 8px; }
.my-identity__actions a { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper); color: var(--ui-ink); font-size: 12px; font-weight: 800; box-shadow: 0 5px 14px rgb(35 38 45 / 7%); transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.my-identity__actions a:hover, .my-identity__actions a:focus-visible { border-color: color-mix(in srgb, var(--my-accent) 60%, var(--ui-line)); background: color-mix(in srgb, var(--my-accent) 8%, var(--ui-paper)); transform: translateY(-1px); }
.my-identity__actions .icon { width: 16px; color: var(--my-accent); }
.my-identity__notice b { min-width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 7px; background: var(--my-accent); color: #1b1930; font-size: 10px; }
.my-identity__stats { grid-column: 1 / -1; width: min(680px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-line); overflow: hidden; }
.my-identity__stats > div { min-height: 50px; display: grid; align-content: center; gap: 2px; padding: 7px 14px; background: color-mix(in srgb, var(--ui-paper) 92%, transparent); }
.my-identity__stats dt { color: var(--ui-dim); font-size: 10px; font-weight: 750; }
.my-identity__stats dd { margin: 0; color: var(--ui-ink); font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }

.my-workspace {
  min-height: 620px;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-line-strong) 74%, transparent);
  border-radius: 22px;
  background: var(--ui-paper);
  box-shadow: var(--ui-card-shadow);
  animation: my-enter .62s .09s cubic-bezier(.22, .8, .24, 1) both;
}
.my-workspace__rail { padding: 27px 16px; border-right: 1px solid var(--ui-line); background: color-mix(in srgb, var(--ui-paper-2) 72%, var(--ui-paper)); }
.my-workspace__label { display: block; padding: 0 11px 12px; color: var(--ui-dim); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.my-tabs { display: grid; gap: 4px; overflow: visible; padding: 0; border: 0; }
.my-tabs button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  justify-content: initial;
  gap: 9px;
  padding: 0 10px;
  border-radius: 11px;
  color: var(--ui-dim);
  text-align: left;
  font-size: 12px;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.my-tabs button:hover { color: var(--ui-ink); transform: translateX(2px); }
.my-tabs button[aria-pressed="true"] { background: var(--ui-paper); color: var(--ui-ink); box-shadow: 0 5px 16px rgb(35 38 45 / 8%); }
.my-tab-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--ui-line) 50%, transparent); color: var(--ui-dim); }
.my-tab-icon .icon { width: 16px; }
.my-tabs button[aria-pressed="true"] .my-tab-icon { background: color-mix(in srgb, var(--my-accent) 17%, var(--ui-paper)); color: var(--my-accent-strong); }
.my-tabs button b { min-width: 21px; height: 21px; display: grid; place-items: center; margin: 0; border-radius: 7px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: 9px; font-weight: 850; opacity: 1; }
.my-tabs button[aria-pressed="true"] b { background: color-mix(in srgb, var(--my-accent) 15%, var(--ui-paper)); color: var(--my-accent-strong); }

.my-workspace__main { min-width: 0; padding: clamp(24px, 3.4vw, 42px); }
.my-workspace__heading { min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-line); }
.my-workspace__heading span { display: block; margin-bottom: 7px; color: var(--my-accent-strong); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.my-workspace__heading h2 { max-width: 36ch; margin: 0; color: var(--ui-ink); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; letter-spacing: -.025em; word-break: keep-all; }
.my-workspace__content { min-width: 0; display: grid; gap: 16px; padding-top: 18px; }
.my-experience[data-my-tab="activity"] .my-workspace__content { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; }
.my-workspace__content > .signal-section, .my-workspace__content .signal-section { padding: 20px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); box-shadow: none; }
.my-workspace__content .section-head { min-height: 38px; padding-bottom: 7px; }
.my-workspace__content .section-head h2 { font-size: 14px; }
.my-workspace__content .state-panel { min-height: 132px; margin-top: 4px; border-radius: 12px; background: var(--ui-paper-2); }
.my-workspace__content .text-row { min-height: 62px; padding: 12px 10px; border-color: var(--ui-line); }
.my-workspace__content .text-row p { line-height: 1.55; }
.my-workspace__content .my-activity-panel { overflow: hidden; padding: 0; border-color: color-mix(in srgb, var(--ui-ink) 22%, var(--ui-line)); border-radius: 11px; }
.my-workspace__content .my-activity-panel .section-head { min-height: 46px; align-items: center; margin: 0; padding: 0 14px; border-bottom: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.my-workspace__content .my-activity-panel .section-head > div { width: 100%; justify-content: space-between; }
.my-workspace__content .my-activity-panel .section-head h2 { font-size: 13px; }
.my-workspace__content .my-activity-panel .section-meta { min-width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-paper); color: var(--ui-dim); font-size: 10px; font-weight: 850; }
.my-workspace__content .my-activity-panel .compact-list { gap: 0; padding: 4px 12px; }
.my-workspace__content .my-activity-panel .text-row { border-bottom: 1px solid var(--ui-line); }
.my-workspace__content .my-activity-panel .state-panel { min-height: 90px; margin: 10px; }
.my-comment-activity { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.my-comment-activity .text-button { min-height: 44px; padding-inline: 10px; }
.my-workspace__content .big-measure { padding: 24px; border: 1px solid color-mix(in srgb, var(--ui-rank) 22%, var(--ui-line)); border-radius: 16px; background: color-mix(in srgb, var(--ui-rank) 8%, var(--ui-paper)); }
.my-workspace__content .big-measure strong { font-size: clamp(2.6rem, 6vw, 4.5rem); }
.my-pik-dashboard { display: grid; gap: 16px; }
.my-pik-summary { min-height: 122px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 25px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--my-accent) 26%, var(--ui-line)); border-radius: 17px; background: linear-gradient(135deg, color-mix(in srgb, var(--my-accent) 9%, var(--ui-paper)), var(--ui-paper) 68%); }
.my-pik-summary__intro { min-width: 0; display: flex; align-items: center; gap: 15px; }
.my-pik-summary__icon { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--my-accent) 35%, var(--ui-line)); border-radius: 16px; background: var(--ui-paper); color: var(--my-accent-strong); box-shadow: 0 9px 22px rgb(75 59 135 / 10%); }
.my-pik-summary__icon .icon { width: 23px; height: 23px; }
.my-pik-summary h3, .my-pik-breakdown h3 { margin: 4px 0 0; color: var(--ui-ink); font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.25; letter-spacing: -.03em; }
.my-pik-summary p { margin: 5px 0 0; color: var(--ui-dim); font-size: .74rem; line-height: 1.5; }
.my-pik-summary__total { min-width: 116px; display: grid; justify-items: end; color: var(--ui-ink); font-size: clamp(2.2rem, 5vw, 3.5rem); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.05em; }
.my-pik-summary__total small { margin-bottom: 7px; color: var(--ui-dim); font-size: .64rem; font-weight: 800; letter-spacing: 0; }
.my-pik-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.my-pik-category { min-width: 0; min-height: 82px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-paper); }
.my-pik-category__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--ui-paper-2); color: var(--ui-dim); }
.my-pik-category__icon .icon { width: 16px; height: 16px; }
.my-pik-category div { min-width: 0; display: grid; gap: 3px; }
.my-pik-category strong, .my-pik-category small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-pik-category strong { color: var(--ui-ink); font-size: .74rem; }
.my-pik-category small { color: var(--ui-dim); font-size: .58rem; }
.my-pik-category em { color: var(--my-accent-strong); font-size: 1.15rem; font-style: normal; font-weight: 900; font-variant-numeric: tabular-nums; }
.my-pik-breakdown { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.my-pik-breakdown > header { min-height: 72px; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.my-pik-breakdown > header small { color: var(--ui-dim); font-size: .63rem; }
.my-pik-breakdown > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.my-pik-kind { min-width: 0; padding: 17px 18px; border-bottom: 1px solid var(--ui-line); }
.my-pik-kind:nth-child(odd) { border-right: 1px solid var(--ui-line); }
.my-pik-kind:nth-last-child(-n + 2) { border-bottom: 0; }
.my-pik-kind > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.my-pik-kind > header > span { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--my-accent) 10%, var(--ui-paper)); color: var(--my-accent-strong); }
.my-pik-kind > header .icon { width: 16px; }
.my-pik-kind h4 { margin: 0; color: var(--ui-ink); font-size: .82rem; }
.my-pik-kind header small { color: var(--ui-dim); font-size: .6rem; }
.my-pik-kind ol { margin: 0; padding: 0; list-style: none; }
.my-pik-kind li { min-height: 54px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 2px; border-top: 1px solid var(--ui-line); }
.my-pik-kind li > span { color: var(--ui-dim); font-size: .62rem; font-weight: 850; }
.my-pik-kind li > div { min-width: 0; display: grid; gap: 3px; }
.my-pik-kind li strong, .my-pik-kind li > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-pik-kind li strong { color: var(--ui-ink); font-size: .72rem; }
.my-pik-kind li > div small { color: var(--ui-dim); font-size: .59rem; }
.my-pik-kind li em { display: grid; grid-auto-flow: column; align-items: baseline; gap: 4px; color: var(--my-accent-strong); font-size: .9rem; font-style: normal; font-weight: 900; }
.my-pik-kind li em small { color: var(--ui-dim); font-size: .53rem; }
.my-pik-kind__empty { min-height: 58px; display: grid; align-content: center; padding: 12px; border-radius: 10px; background: var(--ui-paper-2); }
.my-pik-kind__empty strong { color: var(--ui-ink); font-size: .7rem; }
.my-pik-kind__empty p { margin: 4px 0 0; color: var(--ui-dim); font-size: .61rem; line-height: 1.45; }
.my-workspace__content .settings-form, .my-workspace__content .sign-in-settings, .my-workspace__content .support-settings { max-width: none; }
.my-workspace__content .signal-section > .settings-form + .settings-form,
.my-workspace__content .signal-section > .sign-in-settings + .settings-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ui-line); }
.my-workspace__content input:not([type="checkbox"]):not([type="range"]):not([type="file"]),
.my-workspace__content select,
.my-workspace__content textarea { background: var(--ui-paper-2); }
.my-workspace__content .collection-showcase { margin-top: 0; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--ui-line); border-radius: 17px; background: color-mix(in srgb, var(--ui-pick-soft) 42%, var(--ui-paper)); box-shadow: none; }
.my-workspace__content .collection-showcase h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); }
.my-workspace__content .collection-card { border: 1px solid color-mix(in srgb, var(--ui-line) 74%, transparent); border-radius: 14px; }
.my-workspace__content .benefit-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 0; }
.my-workspace__content .benefit-panel > article { min-height: 280px; padding: 22px; border: 1px solid var(--ui-line); border-radius: 16px; box-shadow: none; }
.my-workspace__content .benefit-panel h3 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.2; }
.my-workspace__content .profile-settings-preview { padding: 22px; border: 1px solid var(--ui-line); border-radius: 15px; background: color-mix(in srgb, var(--ui-blue-soft) 55%, var(--ui-paper)); }
.my-workspace__content .avatar-settings { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--ui-line); }
.my-workspace__content .check-row input { width: 18px; height: 18px; min-height: 18px; }

@keyframes my-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .my-workspace { grid-template-columns: 190px minmax(0, 1fr); }
  .my-workspace__rail { padding-inline: 11px; }
  .my-workspace__content .benefit-panel { grid-template-columns: 1fr; }
  .my-workspace__content .benefit-panel > article { min-height: 0; }
  .my-pik-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .my-experience { margin-top: -8px; gap: 12px; }
  .my-identity { min-height: 0; grid-template-columns: 1fr; gap: 24px; padding: 25px 21px; border-radius: 19px; }
  .my-identity::after { right: -3px; bottom: -20px; font-size: 9rem; }
  .my-identity__person { gap: 15px; }
  .my-identity__person .profile-medallion--profile { width: 70px; height: 70px; }
  .my-identity h1 { font-size: 2rem; }
  .my-identity__actions { grid-row: 3; width: 100%; }
  .my-identity__actions a { flex: 1; justify-content: center; }
  .my-identity__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .my-identity__stats > div { min-height: 60px; padding-inline: 10px; }
  .my-identity__stats dd { font-size: 17px; }
  .my-workspace { grid-template-columns: 1fr; min-height: 0; overflow: visible; border-radius: 18px; }
  .my-workspace__rail { position: sticky; z-index: 8; top: var(--ui-header); overflow: hidden; padding: 9px; border-right: 0; border-bottom: 1px solid var(--ui-line); border-radius: 18px 18px 0 0; background: color-mix(in srgb, var(--ui-paper) 92%, transparent); backdrop-filter: blur(16px); }
  .my-workspace__label { display: none; }
  .my-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 0 0 2px; scrollbar-width: none; }
  .my-tabs::-webkit-scrollbar { display: none; }
  .my-tabs button { width: auto; min-width: 108px; flex: none; grid-template-columns: 28px minmax(0, 1fr) auto; padding: 0 9px; }
  .my-tab-icon { width: 28px; height: 28px; }
  .my-workspace__main { padding: 24px 18px 28px; }
  .my-workspace__heading { min-height: 0; padding-bottom: 18px; }
  .my-workspace__heading h2 { font-size: 1.2rem; }
  .my-experience[data-my-tab="activity"] .my-workspace__content { grid-template-columns: 1fr; }
  .my-workspace__content > .signal-section, .my-workspace__content .signal-section { padding: 17px; }
  .my-pik-summary { min-height: 0; align-items: flex-start; padding: 19px; }
  .my-pik-summary__total { min-width: 74px; }
  .my-pik-breakdown > div { grid-template-columns: 1fr; }
  .my-pik-kind, .my-pik-kind:nth-child(odd), .my-pik-kind:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .my-pik-kind:last-child { border-bottom: 0; }
}

@media (max-width: 390px) {
  .my-identity { margin-inline: -2px; padding: 23px 18px; }
  .my-identity__person p { font-size: 11px; }
  .my-identity__actions { flex-direction: column; }
  .my-identity__actions a { width: 100%; }
  .my-identity__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-workspace { margin-inline: -2px; }
  .my-workspace__main { padding-inline: 15px; }
  .my-workspace__content .collection-grid { grid-template-columns: 1fr; }
  .my-workspace__content .profile-settings-preview { grid-template-columns: 68px minmax(0, 1fr); padding: 16px; }
  .my-pik-summary { display: grid; gap: 15px; }
  .my-pik-summary__total { justify-items: start; }
  .my-pik-categories { grid-template-columns: 1fr; }
  .my-pik-breakdown > header { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .my-identity, .my-workspace { animation: none; }
  .my-identity__actions a, .my-tabs button, .profile-menu__home > .icon { transition: none; }
}

/* Games ownership review: user language first, implementation terms second. */
.games-application-detail { gap: 18px; }
.games-review-step { padding: clamp(24px, 3vw, 38px); border-radius: 8px; color: #10231f; }
.games-review-step > header { grid-template-columns: 42px minmax(0, 1fr); gap: 16px; margin-bottom: 22px; padding-bottom: 20px; }
.games-review-step > header > b { font-size: 12px; }
.games-review-step h2 { color: #10231f; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.25; word-break: keep-all; }
.games-review-step header p { max-width: 780px; margin-top: 9px; color: #4e625d; font-size: 13px; line-height: 1.7; word-break: keep-all; }
.games-application-status dt { font-size: 11px; }
.games-application-status dd { font-size: 13px; }

.games-proof-status { margin: 0 0 10px; padding: 0; background: transparent; list-style: none; }
.games-proof-status li { min-height: 62px; display: grid; grid-template-columns: 10px minmax(110px, .32fr) minmax(0, 1fr); align-items: center; gap: 13px; padding: 12px 15px; border: 1px solid #cbd7d3; border-radius: 7px; background: #f7f9f8; }
.games-proof-status li > i { width: 8px; height: 8px; border-radius: 50%; background: #889a95; }
.games-proof-status li[data-state="pending"] > i { background: #b27924; }
.games-proof-status li[data-state="verified"] > i { background: #08745f; }
.games-proof-status li[data-state="expired"] > i { background: #a4483d; }
.games-proof-status li > div { display: grid; gap: 2px; }
.games-proof-status li small { color: #71807c; font-size: 10px; }
.games-proof-status li b { color: #183f36; font-size: 14px; }
.games-proof-status li p { margin: 0; color: #52635f; font-size: 12px; line-height: 1.55; word-break: keep-all; }

.games-proof-help { min-height: 0; margin: 0 0 16px; padding: 10px 1px; border: 0; background: transparent; color: #536862; font-size: 12px; line-height: 1.6; word-break: keep-all; }
.games-proof-help[data-bad="true"] { padding: 11px 13px; border-left: 3px solid #be5548; background: #fbefec; color: #82352d; }
.games-proof-primary { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); border: 1px solid #b8cdc7; border-radius: 8px; overflow: hidden; background: #fff; }
.games-proof-primary__intro { padding: 24px 26px; background: #f2f7f5; }
.games-proof-primary__intro > span { color: #08745f; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.games-proof-primary h3 { margin: 7px 0 18px; color: #102c25; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.3; letter-spacing: -.025em; word-break: keep-all; }
.games-proof-primary ol { margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: proof-step; list-style: none; }
.games-proof-primary ol li { min-height: 30px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 9px; color: #425952; font-size: 13px; line-height: 1.5; word-break: keep-all; counter-increment: proof-step; }
.games-proof-primary ol li::before { content: counter(proof-step); width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #a8beb8; border-radius: 50%; color: #285249; font: 800 10px/1 var(--mono); }
.games-proof-primary > form { padding: 25px; display: flex; flex-direction: column; justify-content: center; gap: 16px; border-left: 1px solid #cbd7d3; }
.games-proof-primary label,
.games-proof-method label { display: grid; gap: 7px; color: #294c44; font-size: 12px; font-weight: 850; }
.games-proof-primary label small,
.games-proof-method label small { color: #6a7b76; font-size: 11px; font-weight: 600; line-height: 1.55; }
.games-proof-primary input,
.games-proof-method input { width: 100%; min-height: 48px; margin: 0; padding: 0 12px; border: 1px solid #aebfba; border-radius: 4px; outline: 0; background: #fff; color: #10231f; font-size: 14px; }
.games-proof-primary input:focus,
.games-proof-method input:focus { border-color: #08745f; box-shadow: 0 0 0 3px rgb(8 116 95 / 12%); }
.games-proof-primary button,
.games-proof-method button,
.games-proof-result button { min-height: 44px; padding: 0 16px; border: 1px solid #08745f; border-radius: 4px; background: #08745f; color: #fff; cursor: pointer; font-weight: 850; }

.games-proof-result { margin-top: 12px; padding: 20px; display: grid; grid-template-columns: minmax(220px, .75fr) minmax(300px, 1.25fr) auto; align-items: center; gap: 16px; border: 1px solid #8bb3a9; border-radius: 8px; background: #eef6f3; }
.games-proof-result[hidden] { display: none; }
.games-proof-result > div:first-child > span { color: #08745f; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.games-proof-result h3 { margin: 4px 0; color: #123b31; font-size: 16px; word-break: keep-all; overflow-wrap: break-word; }
.games-proof-result p { margin: 0; color: #526b65; font-size: 12px; line-height: 1.6; word-break: keep-all; }
.games-proof-result__value { min-width: 0; }
.games-proof-result__value code { display: block; padding: 13px; border: 1px solid #b4c9c3; border-radius: 5px; background: #fff; color: #163c33; font-size: 12px; overflow-wrap: anywhere; white-space: normal; }
.games-proof-result__value label { display: grid; gap: 6px; color: #294c44; font-size: 11px; font-weight: 800; }
.games-proof-result__value input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #9fbab2; border-radius: 5px; background: #fff; color: #10231f; font-size: 18px; font-weight: 850; letter-spacing: .18em; }
.games-proof-result__actions { display: flex; flex-direction: column; gap: 7px; }
.games-proof-result__actions button { min-width: 150px; }
.games-proof-result__actions [data-proof-copy] { background: #fff; color: #08745f; }

.games-proof-alternatives { margin-top: 18px; border-top: 1px solid #d2dcd9; }
.games-proof-alternatives > summary,
.games-proof-method > summary { list-style: none; cursor: pointer; }
.games-proof-alternatives > summary::-webkit-details-marker,
.games-proof-method > summary::-webkit-details-marker { display: none; }
.games-proof-alternatives > summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #25413a; font-size: 13px; font-weight: 850; }
.games-proof-alternatives > summary::after,
.games-proof-method > summary::after { content: '+'; color: #61736e; font-size: 18px; font-weight: 500; }
.games-proof-alternatives[open] > summary::after,
.games-proof-method[open] > summary::after { content: '−'; }
.games-proof-alternatives__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 0 4px; }
.games-proof-method { min-width: 0; border: 1px solid #cbd7d3; border-radius: 7px; background: #fff; }
.games-proof-method > summary { min-height: 68px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.games-proof-method > summary span { display: grid; gap: 3px; }
.games-proof-method > summary b { color: #183f36; font-size: 13px; }
.games-proof-method > summary small { color: #71807c; font-size: 11px; font-weight: 600; }
.games-proof-method form { padding: 0 15px 16px; display: grid; gap: 12px; border-top: 1px solid #e0e7e4; }
.games-proof-method form > p { margin: 12px 0 0; color: #52635f; font-size: 12px; line-height: 1.6; word-break: keep-all; }
.games-proof-method form > code { padding: 10px; border: 1px solid #d2dcd9; border-radius: 4px; background: #f3f6f5; color: #25413a; font-size: 11px; overflow-wrap: anywhere; }
.games-proof-email-example { padding: 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; border: 1px solid #d2dcd9; border-radius: 5px; background: #f6f8f7; }
.games-proof-email-example span { grid-column: 1 / -1; color: #667873; font-size: 10px; }
.games-proof-email-example strong { min-width: 0; color: #183f36; font-size: 12px; overflow-wrap: anywhere; }
.games-proof-email-example small { align-self: center; color: #08745f; font-size: 10px; font-weight: 850; }
.games-asset-form label { display: grid; gap: 7px; color: #304b44; font-size: 12px; font-weight: 800; }
.games-asset-form ul { font-size: 12px; }

@media (max-width: 980px) {
  .games-proof-primary { grid-template-columns: 1fr; }
  .games-proof-primary > form { border-top: 1px solid #cbd7d3; border-left: 0; }
  .games-proof-result { grid-template-columns: 1fr; }
  .games-proof-result__actions { flex-direction: row; }
}

@media (max-width: 620px) {
  .games-review-step { padding: 20px 16px; }
  .games-review-step > header { grid-template-columns: 32px minmax(0, 1fr); }
  .games-review-step header p { font-size: 12px; }
  .games-application-status { min-width: 0; overflow: hidden; }
  .games-application-status dl { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .games-application-status dl div { min-width: 0; padding-inline: 9px; }
  .games-application-status dd { overflow-wrap: anywhere; }
  .games-proof-status li { grid-template-columns: 10px minmax(0, 1fr); }
  .games-proof-status li p { grid-column: 2; }
  .games-proof-primary__intro,
  .games-proof-primary > form { padding: 18px 16px; }
  .games-proof-primary h3 { font-size: 1.2rem; }
  .games-proof-alternatives__list { grid-template-columns: 1fr; }
  .games-proof-result { padding: 17px; }
  .games-proof-result__actions { flex-direction: column; }
  .games-proof-result__actions button { width: 100%; }
}

/* ========================================================================
   PacPik consumer portal — unified shell, home, account and profile

   This layer intentionally changes presentation only. Route, auth, account,
   Community and moderation contracts stay owned by their existing modules.
   Games keeps its own discovery surface below this shared global shell.
   ======================================================================== */
:root {
  --shell: 1440px;
  --ui-header: 74px;
  --ui-canvas: #f4f5f8;
  --ui-paper: #ffffff;
  --ui-paper-2: #f1f2f6;
  --ui-ink: #181923;
  --ui-dim: #666b7a;
  --ui-line: #e1e3ea;
  --ui-line-strong: #c9cdd8;
  --ui-signal: #5965d8;
  --ui-signal-soft: #eceeff;
  --ui-rank: #d55a42;
  --ui-pick: #745bd8;
  --ui-info: #416eaf;
  --ui-warm-soft: #f7ece5;
  --ui-pick-soft: #f0edff;
  --ui-blue-soft: #eaf1fb;
  --ui-mint-soft: #e9f3f1;
  --ui-shadow: 0 24px 70px rgb(28 31 45 / 10%);
  --ui-card-shadow: 0 10px 30px rgb(35 38 55 / 6%);
  --ui-header-paper: rgb(255 255 255 / 96%);
  --ui-footer-paper: #fff;
}

:root[data-theme="dark"] {
  --ui-canvas: #101116;
  --ui-paper: #191b22;
  --ui-paper-2: #22252e;
  --ui-ink: #f4f3f8;
  --ui-dim: #a3a5b2;
  --ui-line: #30323d;
  --ui-line-strong: #464957;
  --ui-signal: #9ca5ff;
  --ui-signal-soft: #272b4b;
  --ui-rank: #ff9b7f;
  --ui-pick: #b4a3ff;
  --ui-info: #90b7ef;
  --ui-warm-soft: #392a26;
  --ui-pick-soft: #302b4b;
  --ui-blue-soft: #202d40;
  --ui-mint-soft: #1e302e;
  --ui-shadow: 0 28px 80px rgb(0 0 0 / 36%);
  --ui-card-shadow: 0 12px 36px rgb(0 0 0 / 24%);
  --ui-header-paper: rgb(17 18 23 / 96%);
  --ui-footer-paper: #13151a;
}

html:has(.ui-app) { scroll-padding-top: calc(var(--ui-header) + 18px); }
body:has(.ui-app) { font-size: 14px; line-height: 1.62; }
.shell-width { width: min(var(--shell), calc(100% - 48px)); }
.content { min-height: calc(100vh - 204px); padding-block: 34px 92px; }

.global-header {
  border-bottom-color: color-mix(in srgb, var(--ui-line) 82%, transparent);
  background: var(--ui-header-paper);
  box-shadow: 0 8px 28px rgb(28 31 45 / 5%);
}
.header-row {
  min-height: var(--ui-header);
  grid-template-columns: auto auto minmax(230px, 1fr) auto auto;
  gap: clamp(12px, 1.45vw, 24px);
}
.global-brand { gap: 10px; font-size: 22px; letter-spacing: -.055em; }
.global-brand .brandmark { width: 32px; height: 32px; border-radius: 9px; }
.desktop-nav { width: auto; height: var(--ui-header); align-items: center; }
.desktop-nav__primary { height: 100%; align-items: center; gap: 2px; }
.desktop-nav .nav-link,
.desktop-nav .nav-mega > .nav-link {
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  border-radius: 11px;
  color: var(--ui-dim);
  font-size: 12px;
  font-weight: 800;
  transition: color .16s ease, background-color .16s ease;
}
.desktop-nav .nav-link::after { display: none; }
.desktop-nav .nav-link:hover,
.desktop-nav .nav-link[aria-current="page"] { background: var(--ui-paper-2); color: var(--ui-ink); }
.desktop-nav .nav-live { color: #c83e53; }
.desktop-nav .nav-mega__toggle { height: 42px; border-radius: 10px; }
.desktop-nav .mega-panel { top: calc(50% + 20px); border: 1px solid var(--ui-line); border-radius: 18px; }

.header-search {
  width: 100%; max-width: 560px; justify-self: center;
  height: 46px; border: 1px solid transparent; border-radius: 14px;
  background: var(--ui-paper-2);
}
.header-search:hover { border-color: var(--ui-line); }
.header-search:focus-within { border-color: color-mix(in srgb, var(--ui-signal) 52%, var(--ui-line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-signal) 11%, transparent); }
.header-actions { justify-self: end; align-items: center; gap: 3px; }
.header-actions .icon-button,
.identity-button { border-radius: 12px; }

.desktop-games-entry {
  min-width: 0; display: flex; align-items: center; padding-left: 18px;
  border-left: 1px solid var(--ui-line);
}
.desktop-games-entry .nav-games {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 15px; border: 1px solid #282a37; border-radius: 12px;
  background: #1c1e27; color: #fff; font-size: 12px; font-weight: 850; white-space: nowrap;
  box-shadow: 0 8px 20px rgb(25 28 41 / 13%);
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.desktop-games-entry .nav-games:hover,
.desktop-games-entry .nav-games[aria-current="page"] { border-color: #5965d8; background: #30344c; transform: translateY(-1px); }
.desktop-games-entry .nav-games .icon { width: 18px; height: 18px; color: #b8beff; }
.desktop-games-entry .nav-games small { border-color: rgb(184 190 255 / 48%); color: #cdd1ff; }

.profile-menu__flyout {
  top: calc(100% + 12px); width: 310px; overflow: hidden;
  border: 1px solid var(--ui-line); border-radius: 18px;
  background: color-mix(in srgb, var(--ui-paper) 96%, transparent);
  box-shadow: 0 24px 64px rgb(24 26 39 / 18%);
}
.profile-menu__home { min-height: 86px; padding: 14px; border-radius: 13px; background: var(--ui-paper-2); }
.profile-menu__home:hover { background: var(--ui-signal-soft); }
.profile-menu__flyout nav a,
.profile-menu__flyout nav button { min-height: 43px; border-radius: 10px; }
.profile-menu__flyout nav a:hover,
.profile-menu__flyout nav button:hover { background: var(--ui-paper-2); }

.page-head { min-height: 112px; padding: 8px 0 24px; border-bottom: 1px solid var(--ui-line); }
.page-head h1,
.pack-identity h1,
.post-detail h1 { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.05; letter-spacing: -.052em; }
.page-head p { max-width: 62ch; margin-top: 10px; font-size: 14px; line-height: 1.65; }
.solid-button,
.quiet-button,
.text-button,
.danger-button,
.filter-button { min-height: 44px; border-radius: 11px; }
.solid-button { box-shadow: none; }

.signal-section {
  padding: 20px; border: 1px solid var(--ui-line); border-radius: 17px;
  background: var(--ui-paper); box-shadow: var(--ui-card-shadow);
}
.section-head { min-height: 44px; padding-bottom: 10px; }
.section-head h2 { font-size: 15px; letter-spacing: -.025em; }
.compact-list { gap: 4px; }
.pack-row, .post-row, .pick-row, .hub-row, .official-row, .board-row { border-radius: 11px; }
.pack-row:hover, .post-row:hover, .pick-row:hover, .hub-row:hover, .official-row:hover, .board-row:hover { transform: translateX(2px); }
.state-panel { min-height: 132px; border: 0; border-radius: 14px; background: var(--ui-paper-2); }

.home-experience { display: grid; gap: 12px; }
.home-masthead {
  min-height: 190px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px;
  padding: clamp(28px, 4vw, 52px); overflow: hidden; border: 1px solid #292c3b; border-radius: 20px;
  background: radial-gradient(circle at 84% 18%, rgb(127 139 255 / 24%) 0, transparent 31%), #181a24;
  color: #f7f7fb; box-shadow: var(--ui-shadow);
}
.home-masthead .eyebrow { color: #afb6ff; }
.home-masthead h1 { max-width: 720px; margin: 7px 0 8px; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.04; letter-spacing: -.055em; word-break: keep-all; }
.home-masthead p { max-width: 650px; margin: 0; color: #b8bbc9; font-size: 14px; line-height: 1.68; word-break: keep-all; }
.home-masthead nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.home-masthead nav a { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 11px; color: #f6f5ff; font-size: 12px; font-weight: 800; }
.home-masthead nav a:hover { border-color: #8e99ff; background: rgb(142 153 255 / 12%); }
.home-masthead nav .icon { width: 15px; color: #aeb5ff; }
.home-dock { margin: 0; padding: 9px 11px 9px 16px; border: 1px solid var(--ui-line); border-radius: 16px; box-shadow: none; }
.home-dock > header h2 { margin: 0; color: var(--ui-dim); font-size: 11px; font-weight: 850; white-space: nowrap; }
.home-pack-pill { border-radius: 11px; }
.home-official-discovery { gap: 12px; }
.home-official-discovery > .signal-section { min-height: 280px; }
.home-portal-grid { gap: 16px; }
.home-main-feed, .home-source-rail { gap: 16px; }
.home-discovery-grid { gap: 16px; }
.home-discovery-grid > .signal-section { border: 1px solid var(--ui-line); border-radius: 17px; }
.home-explore-actions { background: #202331 !important; color: #fff; }
.home-explore-actions .section-head h2 { color: #fff; }
.home-explore-actions .text-button { color: #c3c7d8; }

.notification-center { width: min(1080px, 100%); margin-inline: auto; }
.profile-experience { width: min(1240px, 100%); margin-inline: auto; }
.notification-center { display: grid; gap: 18px; }
.notification-center__hero {
  min-height: 208px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: clamp(26px, 4vw, 42px); overflow: hidden; border: 1px solid #2d3042; border-radius: 20px;
  background: radial-gradient(circle at 84% 18%, rgb(118 108 234 / 30%) 0, transparent 35%), #191b27;
  color: #f7f7fb; box-shadow: var(--ui-shadow);
}
.notification-center__identity { min-width: 0; display: flex; align-items: center; gap: 20px; }
.notification-center__mark {
  width: 54px; height: 54px; display: grid; flex: 0 0 auto; place-items: center;
  border: 1px solid rgb(255 255 255 / 14%); border-radius: 15px; background: rgb(255 255 255 / 8%); color: #b7b9ff;
}
.notification-center__mark .icon { width: 24px; height: 24px; }
.notification-center__identity .eyebrow { color: #aeb5ff; }
.notification-center__identity h1 { margin: 7px 0 8px; color: #fff; font-size: clamp(1.8rem, 4vw, 3.15rem); line-height: 1.05; letter-spacing: -.05em; word-break: keep-all; }
.notification-center__identity p { max-width: 610px; margin: 0; color: #b8bbc9; font-size: 13px; line-height: 1.7; word-break: keep-all; }
.notification-center__summary { min-width: 190px; display: grid; justify-items: end; gap: 14px; }
.notification-center__summary dl { display: flex; gap: 8px; margin: 0; }
.notification-center__summary dl > div { min-width: 78px; padding: 11px 13px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 12px; background: rgb(255 255 255 / 6%); }
.notification-center__summary dt { color: #aaaebe; font-size: 10px; font-weight: 750; }
.notification-center__summary dd { margin: 3px 0 0; color: #fff; font-size: 19px; font-weight: 850; }
.notification-center__summary .text-button { min-height: 44px; border-color: rgb(255 255 255 / 16%); color: #f4f4fa; }
.notification-center__hero > small { grid-column: 1 / -1; color: #9ea2b2; font-size: 11px; line-height: 1.5; }
.notification-center__groups { display: grid; gap: 20px; }
.notification-center__group { display: grid; gap: 9px; }
.notification-center__group > header { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-inline: 4px; }
.notification-center__group > header h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.notification-center__group > header span { min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: 11px; font-weight: 800; }
.notification-center__list { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 18px; background: var(--ui-paper); box-shadow: var(--ui-card-shadow); }
.notification-center__list > .compact-list { gap: 0; }
.notification-row {
  min-height: 0; display: block; padding: 0 18px; border-bottom: 1px solid var(--ui-line); transition: background-color .16s ease;
}
.notification-row:last-child { border-bottom: 0; }
.notification-row:hover { background: var(--ui-paper-2); }
.notification-row.is-unread { background: color-mix(in srgb, var(--ui-signal-soft) 46%, var(--ui-paper)); }
.notification-row > a, .notification-row > div { min-height: 94px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 0; }
.notification-row > a { color: inherit; }
.notification-row__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--ui-paper-2); color: var(--ui-dim); }
.notification-row__icon .icon { width: 18px; height: 18px; }
.notification-row__icon[data-tone="conversation"] { background: color-mix(in srgb, #7774ea 12%, var(--ui-paper)); color: #716ee1; }
.notification-row__icon[data-tone="management"] { background: color-mix(in srgb, #cf8a35 12%, var(--ui-paper)); color: #b87322; }
.notification-row__icon[data-tone="safety"] { background: color-mix(in srgb, #d75c65 11%, var(--ui-paper)); color: #c94c56; }
.notification-row__content { min-width: 0; display: grid; align-content: center; }
.notification-row strong { font-size: 14px; letter-spacing: -.01em; }
.notification-row p { margin: 4px 0 0; color: var(--ui-dim); line-height: 1.5; overflow-wrap: anywhere; }
.notification-row__meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.notification-row__meta small { margin: 0; color: var(--ui-dim); font-size: 11px; }
.notification-row__state { padding: 3px 7px; border-radius: 999px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: 10px; font-weight: 750; }
.notification-row.is-unread .notification-row__state { background: color-mix(in srgb, var(--ui-signal) 12%, var(--ui-paper)); color: var(--ui-signal); }
.notification-row__arrow { color: var(--ui-dim); transition: transform .16s ease, color .16s ease; }
.notification-row__arrow .icon { width: 17px; height: 17px; }
.notification-row > a:hover .notification-row__arrow { color: var(--ui-ink); transform: translateX(2px); }

.profile-experience { display: grid; gap: 16px; }
.profile-experience__head { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.profile-experience__head .eyebrow { color: var(--ui-signal); }
.profile-experience__head p { margin: 6px 0 0; color: var(--ui-dim); font-size: 12px; }
.profile-experience__actions { display: flex; align-items: center; justify-content: end; gap: 10px; }
.profile-visibility-action { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); color: var(--ui-ink); font-size: 11px; font-weight: 800; }
.profile-visibility-action:hover, .profile-visibility-action:focus-visible { border-color: var(--ui-line-strong); background: var(--ui-paper-2); }
.profile-visibility-action .icon { width: 14px; }
.profile-support { display: flex; align-items: center; gap: 10px; }
.profile-support small { max-width: 390px; color: var(--ui-dim); font-size: 10px; line-height: 1.4; }
.profile-shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: 18px; }
.profile-identity-panel { position: sticky; top: calc(var(--ui-header) + 18px); display: grid; gap: 12px; }
.profile-hero {
  min-height: 0; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px;
  margin: 0; padding: 28px; overflow: visible;
  border: 1px solid var(--ui-line); border-radius: 12px;
  background: var(--ui-paper); color: var(--ui-ink); box-shadow: none;
}
.profile-hero h1 { margin: 0; color: var(--ui-ink); font-size: clamp(1.65rem, 2.4vw, 2.4rem); line-height: 1.08; letter-spacing: -.045em; overflow-wrap: anywhere; }
.profile-hero__meta { margin-top: 9px; color: var(--ui-dim); font-size: 12px; }
.profile-hero .profile-chip { background: var(--ui-paper-2); color: var(--ui-ink); }
.profile-pik-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-line); }
.profile-pik-stats > div { min-height: 55px; display: grid; align-content: center; gap: 3px; padding: 9px 12px; background: var(--ui-paper); }
.profile-pik-stats__total { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: color-mix(in srgb, var(--my-accent) 8%, var(--ui-paper)) !important; }
.profile-pik-stats dt { color: var(--ui-dim); font-size: 9px; font-weight: 800; }
.profile-pik-stats dd { margin: 0; color: var(--ui-ink); font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.profile-pik-stats__total dd { color: var(--my-accent-strong); font-size: 25px; }
.profile-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); }
.profile-tabs button { width: auto; min-width: 0; min-height: 48px; grid-template-columns: minmax(0, 1fr) auto; padding: 0 15px; border-radius: 0; text-align: left; }
.profile-tabs button + button { border-left: 1px solid var(--ui-line); }
.profile-stream { min-width: 0; display: grid; gap: 14px; }
.profile-activity { min-height: 360px; overflow: hidden; padding: 6px 22px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper); box-shadow: none; }
.profile-activity .state-panel { margin: 14px 0; }
.profile-comment { padding: 16px 4px; }

.global-footer { border-top-color: var(--ui-line); }
.global-footer > div { min-height: 150px; }

@media (max-width: 1180px) {
  .header-row { grid-template-columns: 44px auto minmax(180px, 1fr) auto; gap: 12px; }
  .desktop-nav, .desktop-games-entry { display: none; }
  .menu-button { display: inline-grid; }
  .header-search { max-width: none; }
}

@media (max-width: 760px) {
  :root { --ui-header: 60px; }
  .shell-width { width: min(100% - 28px, var(--shell)); }
  .content { padding-block: 20px 104px; }
  .header-row { min-height: var(--ui-header); grid-template-columns: 44px minmax(0, 1fr) auto; gap: 5px; }
  .home-experience {
    width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 12px;
  }
  .home-experience > *,
  .home-masthead > *,
  .home-dock,
  .home-pack-pills,
  .home-live-now,
  .home-live-now > *,
  .home-official-discovery,
  .home-portal-grid,
  .home-main-feed,
  .home-source-rail,
  .home-discovery-grid,
  .external-live-grid,
  .signal-section { min-width: 0; max-width: 100%; }
  .home-masthead {
    width: 100%; min-height: 236px; grid-template-columns: minmax(0, 1fr); align-items: end;
    gap: 22px; padding: 28px 22px; border-radius: 17px;
  }
  .home-masthead h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .home-masthead nav { justify-content: flex-start; }
  .home-masthead nav a { flex: 1; justify-content: center; }
  .home-dock { margin-inline: 0; padding: 12px; }
  .home-dock > header { width: 100%; }
  .home-pack-pills { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  .home-live-now,
  .home-official-discovery,
  .home-portal-grid,
  .home-main-feed,
  .home-source-rail,
  .home-discovery-grid { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .home-live-now > header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .home-live-now .external-live-card--compact { grid-template-columns: 84px minmax(0, 1fr); min-width: 0; }
  .home-official-discovery > .signal-section { min-height: 0; }
  .home-main-feed, .home-source-rail { padding-inline: 0; }
  .signal-section { padding: 17px; border-radius: 15px; }
  .notification-center { gap: 14px; }
  .notification-center__hero { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 25px 21px; border-radius: 17px; }
  .notification-center__identity { align-items: flex-start; }
  .notification-center__identity h1 { font-size: clamp(1.8rem, 9vw, 2.45rem); }
  .notification-center__summary { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: stretch; }
  .notification-center__summary dl { min-width: 0; }
  .notification-center__summary dl > div { flex: 1; min-width: 0; }
  .notification-center__summary .text-button { justify-self: end; }
  .notification-center__hero > small { grid-column: auto; }
  .notification-center__groups { gap: 16px; }
  .notification-center__list { border-radius: 15px; }
  .notification-row { padding-inline: 14px; }
  .notification-row > a, .notification-row > div { min-height: 88px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; }
  .notification-row__icon { width: 38px; height: 38px; border-radius: 11px; }
  .profile-experience__head { align-items: flex-start; flex-direction: column; }
  .profile-experience__actions { width: 100%; align-items: flex-start; justify-content: start; flex-direction: column; }
  .profile-support { align-items: flex-start; flex-direction: column; }
  .profile-shell { grid-template-columns: minmax(0, 1fr); }
  .profile-identity-panel { position: static; }
  .profile-hero { min-height: 0; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 22px 20px; border-radius: 11px; }
  .profile-hero h1 { font-size: 2rem; }
  .profile-activity { min-height: 200px; padding-inline: 14px; border-radius: 11px; }
}

@media (max-width: 420px) {
  .home-masthead nav { display: grid; grid-template-columns: 1fr; width: 100%; }
  .notification-center__identity { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .notification-center__mark { width: 44px; height: 44px; border-radius: 13px; }
  .notification-center__summary { grid-template-columns: minmax(0, 1fr); }
  .notification-center__summary .text-button { width: 100%; justify-self: stretch; justify-content: center; }
  .notification-row > a, .notification-row > div { grid-template-columns: 38px minmax(0, 1fr); }
  .notification-row__arrow { display: none; }
  .profile-hero { grid-template-columns: 1fr; }
  .profile-hero .profile-medallion--profile { width: 78px; height: 78px; }
  .profile-comment { grid-template-columns: 1fr; }
.profile-comment time { color: var(--ui-dim); font-size: 11px; }
.profile-emote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.profile-emote-card { min-width: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); }
.profile-emote-card > a { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 94px; padding: 10px; color: var(--ui-ink); text-decoration: none; }
.profile-emote-card > a:hover, .profile-emote-card > a:focus-visible { background: var(--ui-paper-2); outline: 0; }
.profile-emote-card__cover { width: 74px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper-2); }
.profile-emote-card__cover img { width: 100%; height: 100%; object-fit: contain; }
.profile-emote-card__copy { min-width: 0; }
.profile-emote-card__copy strong, .profile-emote-card__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-emote-card__copy small { margin-top: 6px; color: var(--ui-dim); font-size: 11px; }
.profile-emote-card .icon { width: 15px; color: var(--ui-dim); }
@media (max-width: 1040px) { .profile-emote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .profile-emote-grid { grid-template-columns: 1fr; } }

/* Community post detail: one contemporary reading surface with clear internal levels. */
main.content:has(> .post-context-nav) { width: min(calc(100% - 40px), 1480px); }
.post-context-nav {
  min-height: 56px;
  margin: 10px 0 12px;
  border: 0;
}
.post-context-nav__links a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 9px;
  background: var(--ui-paper);
  color: var(--ui-dim);
  font-size: .74rem;
  font-weight: 800;
  text-decoration: none;
}
.post-context-nav__links a:hover,
.post-context-nav__links a:focus-visible { border-color: var(--ui-ink); color: var(--ui-ink); outline: 0; }
.post-reading-layout { grid-template-columns: minmax(0, 1000px) 320px; gap: 18px; }
.post-reading-main { display: grid; gap: 14px; }
.post-reading-main .post-detail {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: 17px;
  background: var(--ui-paper);
  box-shadow: 0 12px 34px rgb(25 32 42 / 5%);
}
.post-reading-main .post-detail__head {
  position: relative;
  padding: clamp(26px, 3.5vw, 46px);
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: var(--ui-paper);
}
.post-reading-main .post-detail__head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ui-ink);
}
.post-reading-main .post-detail__head .entity-eyebrow {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px 9px 4px 5px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: var(--ui-paper-2);
  color: var(--ui-dim);
  letter-spacing: 0;
}
.post-reading-main .post-detail__head h1 {
  max-width: 28ch;
  margin: 0 0 18px;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.post-reading-main .post-byline { min-height: 32px; flex-wrap: wrap; gap: 8px 12px; }
.post-reading-main .post-byline > * + * { position: relative; }
.post-reading-main .post-byline > * + *::before { content: ""; position: absolute; top: 50%; left: -7px; width: 2px; height: 2px; border-radius: 50%; background: var(--ui-line-strong); }
.post-reading-main .post-detail__content {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ui-paper);
}
.post-reading-main .post-detail__content .post-body {
  min-height: 260px;
  padding: clamp(30px, 4vw, 52px) clamp(26px, 3.5vw, 46px);
  font-size: .97rem;
  line-height: 1.9;
}
.post-reading-main .post-actions {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px clamp(18px, 3vw, 32px);
  border-top: 1px solid var(--ui-line);
  background: var(--ui-paper-2);
}
.post-actions__primary, .post-actions__tools { display: flex; flex-wrap: wrap; gap: 7px; }
.post-reading-main .post-action,
.post-reading-main .pik-button,
.post-reading-main .post-foot-nav .text-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 9px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: .73rem;
  font-weight: 800;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.post-reading-main .post-action:hover,
.post-reading-main .pik-button:hover,
.post-reading-main .post-foot-nav .text-button:hover { border-color: var(--ui-ink); background: var(--ui-paper); transform: translateY(-1px); }
.post-reading-main .pik-button[aria-pressed="true"] { border-color: var(--ui-rank); background: color-mix(in srgb, var(--ui-rank) 10%, var(--ui-paper)); color: var(--ui-rank); }
.post-reading-main .post-action--danger { color: var(--ui-danger, #b4232c); }
.post-reading-main .post-foot-nav {
  min-height: 64px;
  margin: 0;
  padding: 10px clamp(18px, 3vw, 32px);
  border-top: 1px solid var(--ui-line);
  background: var(--ui-paper);
}
.post-reading-main #comments {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--ui-line-strong);
  border-radius: 17px;
  background: var(--ui-paper);
  box-shadow: 0 10px 28px rgb(25 32 42 / 4%);
}
.post-reading-main #comments > .section-head { min-height: 58px; padding: 0 20px; border-bottom: 1px solid var(--ui-line); background: var(--ui-paper); }
.post-reading-main #comments > .section-head h2 { font-size: .9rem; }
.post-reading-main #comments [data-comment-list] { padding: 4px 18px; }
.post-reading-main .comment-line { border-radius: 8px; transition: background-color .15s ease; }
.post-reading-main .comment-line:hover { background: var(--ui-paper-2); }
.post-reading-main .comment + .comment { border-top: 1px solid var(--ui-line); }
.post-reading-main .comment-line {
  min-height: 68px;
  grid-template-columns: minmax(118px, auto) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 3px 14px;
  padding: 11px 12px;
}
.post-reading-main .comment-author { grid-column: 1; grid-row: 1; align-self: end; }
.post-reading-main .comment-time { grid-column: 1; grid-row: 2; padding-left: 32px; align-self: start; }
.post-reading-main .comment-body {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 7px 0;
  color: var(--ui-ink);
  font-size: .84rem;
  line-height: 1.65;
}
.post-reading-main .comment-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  gap: 4px;
  opacity: 1;
}
.post-reading-main .comment-actions button {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-paper);
  color: var(--ui-dim);
}
.post-reading-main .comment-actions button:hover,
.post-reading-main .comment-actions button:focus-visible { border-color: var(--ui-ink); background: var(--ui-paper-2); color: var(--ui-ink); outline: 0; }
.post-reading-main .comment--reply {
  position: relative;
  margin: 2px 10px 3px 38px;
  border-left: 2px solid color-mix(in srgb, var(--ui-info) 48%, var(--ui-line));
  border-radius: 0 9px 9px 0;
  background: color-mix(in srgb, var(--ui-info) 3%, var(--ui-paper));
}
.post-reading-main .comment--reply::before {
  content: "";
  position: absolute;
  top: 24px;
  left: -14px;
  width: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ui-info) 48%, var(--ui-line));
}
.post-reading-main .comment--reply > .comment-line { background: transparent; }
.post-reading-main .comment--reply > .comment-line:hover { background: color-mix(in srgb, var(--ui-info) 5%, var(--ui-paper-2)); }
.post-reading-main .comment-kind { border: 1px solid color-mix(in srgb, var(--ui-info) 24%, var(--ui-line)); }
.post-reading-main .comment-reply-target { border: 1px solid color-mix(in srgb, var(--ui-info) 28%, var(--ui-line)); border-radius: 999px; background: var(--ui-paper); }
.post-reading-main .comment-form-home { margin: 0; padding: 12px 18px 18px; border-top: 1px solid var(--ui-line); }
.post-reading-main .comment-composer { background: var(--ui-paper); }
.post-reading-rail { gap: 12px; }
.post-scope-card,
.post-reading-rail > .same-channel-board {
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: 14px;
  background: var(--ui-paper);
  box-shadow: 0 8px 24px rgb(25 32 42 / 4%);
}
.post-scope-card { padding: 17px; }
.post-scope-card > div { margin-top: 12px; }
.post-scope-card nav a { border-color: var(--ui-line-strong); }

@media (max-width: 700px) {
  main.content:has(> .post-context-nav) { width: min(100% - 20px, 1480px); }
  .post-reading-main .post-detail__head { padding: 23px 18px; }
  .post-reading-main .post-detail__head h1 { font-size: 1.65rem; }
  .post-reading-main .post-detail__content .post-body { min-height: 160px; padding: 26px 18px; }
  .post-reading-main .post-actions { align-items: stretch; padding: 10px 12px; }
  .post-actions__tools { margin-left: 0; }
  .post-reading-main .post-action, .post-reading-main .pik-button { flex: 1 1 auto; }
  .post-reading-main #comments [data-comment-list] { padding-inline: 8px; }
  .post-reading-main .comment-line {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 4px 8px;
    padding: 10px 8px;
  }
  .post-reading-main .comment-author { grid-column: 1; grid-row: 1; }
  .post-reading-main .comment-time { grid-column: 1; grid-row: 2; padding-left: 32px; }
  .post-reading-main .comment-body { grid-column: 1 / -1; grid-row: 3; padding: 7px 2px 3px 32px; }
  .post-reading-main .comment-actions { grid-column: 2; grid-row: 1 / span 2; }
  .post-reading-main .comment-actions button { width: 32px; padding: 0; font-size: 0; }
  .post-reading-main .comment-actions .icon { width: 13px; }
  .post-reading-main .comment--reply { margin-left: 22px; margin-right: 0; }
  .post-reading-main .comment-form-home { padding: 10px; }
}

/* Pack Benefit: four equal compact cards, never dark CTA blocks or one-sided borders. */
.my-workspace__content .benefit-panel {
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 4px;
  scrollbar-width: thin;
}
.my-workspace__content .benefit-panel > .benefit-card,
.my-workspace__content .benefit-panel > .benefit-card--ready {
  min-width: 210px;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--ui-line-strong);
  border-left-width: 1px;
  border-radius: 11px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: none;
}
.my-workspace__content .benefit-card h3 { margin: 5px 0 6px; font-size: 1.03rem; line-height: 1.28; }
.my-workspace__content .benefit-card p { font-size: .72rem; line-height: 1.55; }
.my-workspace__content .benefit-card .eyebrow { font-size: .58rem; }
.my-workspace__content .benefit-card > header em,
.my-workspace__content .benefit-card--ready > header em {
  padding: 4px 7px;
  border: 1px solid var(--ui-line);
  background: var(--ui-paper-2);
  color: var(--ui-dim);
  font-size: .61rem;
}
.my-workspace__content .benefit-progress__item { gap: 5px 8px; padding: 8px 0; }
.my-workspace__content .benefit-progress__item b,
.my-workspace__content .benefit-progress__item strong { font-size: .67rem; }
.my-workspace__content .benefit-progress__item strong small { font-size: .6rem; }
.my-workspace__content .benefit-card__action {
  width: fit-content;
  min-height: 34px;
  align-self: end;
  justify-self: start;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: .68rem;
  line-height: 1;
}
.my-workspace__content .benefit-card__action:hover,
.my-workspace__content .benefit-card__action:focus-visible {
  border-color: var(--ui-ink);
  background: var(--ui-paper-2);
  color: var(--ui-ink);
  outline: 0;
}
@media (max-width: 760px) {
  .my-workspace__content .benefit-panel { grid-template-columns: repeat(4, minmax(230px, 78vw)); }
}
}

@media (prefers-reduced-motion: reduce) {
  .desktop-games-entry .nav-games,
  .pack-row, .post-row, .pick-row, .hub-row, .official-row, .board-row,
  .notification-row { transition: none; }
}

/* --------------------------------------------------------------------------
   Discovery portal refresh — Home / LIVE / Search / Official / Pack / HubPack
   -------------------------------------------------------------------------- */

.discovery-masthead {
  min-height: 250px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
  align-items: end;
  gap: clamp(30px, 6vw, 96px);
  padding: clamp(30px, 4vw, 58px);
  border: 1px solid #2d3147;
  border-radius: 19px;
  overflow: hidden;
  color: #f8f8fb;
  background:
    radial-gradient(circle at 82% 12%, rgb(123 109 255 / 20%), transparent 28%),
    linear-gradient(135deg, #171922 0%, #202334 58%, #191b25 100%);
  box-shadow: 0 24px 70px rgb(25 28 45 / 18%);
}
.discovery-masthead .eyebrow { color: #aeb3ff; }
.discovery-masthead h1 {
  max-width: 860px;
  margin: 10px 0 15px;
  font-size: clamp(2.25rem, 4.2vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: -.058em;
  text-wrap: balance;
  word-break: keep-all;
}
.discovery-masthead p { max-width: 700px; margin: 0; color: #c4c7d6; font-size: .96rem; line-height: 1.72; word-break: keep-all; }
.discovery-masthead > aside { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding-left: 24px; border-left: 1px solid rgb(255 255 255 / 13%); }
.discovery-masthead > aside strong { font-size: clamp(2rem, 4vw, 3.75rem); line-height: .9; letter-spacing: -.05em; }
.discovery-masthead > aside span { color: #aeb2c5; font-size: .75rem; }
.discovery-masthead > aside .solid-button { width: fit-content; margin-top: 14px; border-color: rgb(255 255 255 / 16%); background: #f7f7fa; color: #202331; }

.pack-discovery, .hub-discovery, .search-portal, .official-portal { display: grid; gap: 18px; }
.discovery-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 410px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 13px 15px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-paper);
  box-shadow: 0 12px 30px rgb(38 43 57 / 6%);
}
.discovery-toolbar form, .search-masthead form { min-height: 48px; display: grid; grid-template-columns: 46px minmax(0, 1fr); border: 1px solid var(--ui-line-strong); border-radius: 12px; background: var(--ui-paper-2); overflow: hidden; }
.discovery-toolbar form:focus-within, .search-masthead form:focus-within { border-color: #7d83e8; box-shadow: 0 0 0 3px rgb(125 131 232 / 14%); }
.discovery-toolbar form button, .search-masthead form button { display: grid; place-items: center; border: 0; background: transparent; color: var(--ui-dim); }
.discovery-toolbar form .icon, .search-masthead form .icon { width: 18px; }
.discovery-toolbar form input, .search-masthead form input { min-width: 0; min-height: 46px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.discovery-filter-rails { min-width: 0; display: grid; gap: 7px; }
.discovery-toolbar .filter-group, .hub-category-rail { justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.discovery-toolbar .filter-button, .hub-category-rail .filter-button { min-height: 38px; flex: 0 0 auto; padding-inline: 13px; border: 1px solid transparent; border-radius: 10px; white-space: nowrap; }
.discovery-toolbar .filter-button[aria-pressed="true"], .hub-category-rail .filter-button[aria-pressed="true"] { border-color: #cfd2ff; background: #eef0ff; color: #444bc3; }

.discovery-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pack-discovery-card {
  min-width: 0;
  min-height: 196px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ui-paper);
  box-shadow: 0 12px 34px rgb(41 45 60 / 7%);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.pack-discovery-card:hover { transform: translateY(-4px); border-color: #c6c9f1; box-shadow: 0 22px 46px rgb(41 45 60 / 13%); }
.pack-discovery-card__main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 14px; padding: 16px 16px 12px; }
.pack-discovery-card__visual { grid-column: 1 / -1; min-height: 80px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; background: linear-gradient(145deg, #f1f2f7, #e7e9f3); }
[data-theme="dark"] .pack-discovery-card__visual { background: linear-gradient(145deg, #252937, #1c202b); }
.pack-discovery-card__visual .entity-icon { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 9px 22px rgb(35 39 54 / 15%); }
.pack-discovery-card__meta { max-width: 56%; display: grid; justify-items: end; gap: 5px; text-align: right; }
.pack-discovery-card__meta small { color: #6f7488; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pack-discovery-card__live { color: #dc2f3f; font-size: 10px; font-weight: 900; letter-spacing: .08em; line-height: 1; }
.pack-discovery-card__copy { min-width: 0; align-self: end; }
.pack-discovery-card__copy strong { display: block; overflow: hidden; font-size: 1rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.pack-discovery-card__copy small { display: block; margin-top: 5px; overflow: hidden; color: var(--ui-dim); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.pack-discovery-card__status { align-self: end; min-height: 25px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 7px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: .65rem; font-weight: 750; white-space: nowrap; }
.pack-discovery-card__status[data-status="automated"], .pack-discovery-card__status[data-status="active"] { background: #e8f5ef; color: #187152; }
.pack-discovery-card footer { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px 6px 12px; border-top: 1px solid var(--ui-line); }
.pack-discovery-card footer .quiet-button { min-height: 36px; padding-inline: 10px; border-radius: 9px; font-size: .72rem; }
.pack-discovery-card footer > a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: var(--ui-dim); }
.pack-discovery-card footer > a:only-child { margin-left: auto; }
.pack-discovery-card footer > a:hover { background: var(--ui-paper-2); color: var(--ui-text); }
.pack-discovery-card footer .icon { width: 15px; }

.hub-category-rail { display: flex; gap: 7px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); }
.hub-category-rail--static > span { min-height: 38px; display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 13px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: .74rem; font-weight: 750; }
.hub-category-rail--static > span[aria-current="true"] { border-color: #777bd5; background: #282c3e; color: #fff; }
.hub-discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.hub-discovery-card { min-width: 0; min-height: 220px; border: 1px solid var(--ui-line); border-radius: 17px; overflow: hidden; background: var(--ui-paper); box-shadow: 0 13px 36px rgb(40 44 58 / 7%); transition: transform .22s ease, box-shadow .22s ease; }
.hub-discovery-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgb(40 44 58 / 13%); }
.hub-discovery-card > a { min-height: 220px; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: 18px; background: radial-gradient(circle at 90% 0, rgb(122 109 255 / 12%), transparent 38%); }
.hub-discovery-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hub-discovery-card__top > small { color: #6a70cf; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.hub-discovery-card__top .entity-icon { width: 48px; height: 48px; border-radius: 13px; }
.hub-discovery-card__copy { align-self: center; min-width: 0; }
.hub-discovery-card__copy strong { display: block; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.035em; }
.hub-discovery-card__copy small { display: -webkit-box; margin-top: 8px; overflow: hidden; color: var(--ui-dim); font-size: .76rem; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hub-discovery-card__foot { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 9px; padding-top: 13px; border-top: 1px solid var(--ui-line); }
.hub-discovery-card__foot b { color: var(--ui-dim); font-size: .68rem; text-transform: uppercase; }
.hub-discovery-card__foot .icon { width: 15px; }
.hub-member-stack { min-height: 29px; display: flex; align-items: center; padding-left: 5px; }
.hub-member-stack .entity-icon { width: 28px; height: 28px; margin-left: -5px; border: 2px solid var(--ui-paper); border-radius: 9px; }

.search-masthead { grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr); min-height: 230px; }
.search-masthead form { align-self: end; background: rgb(255 255 255 / 9%); border-color: rgb(255 255 255 / 17%); }
.search-masthead form input { color: #fff; }
.search-masthead form input::placeholder { color: #aeb2c2; }
.search-masthead form button { color: #d3d5e2; }
.search-result-group { display: grid; gap: 14px; padding: 19px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); }
.search-result-group > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.search-result-group > header h2 { margin: 0; font-size: 1.05rem; }
.search-result-group > header > span { min-width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #eef0ff; color: #4b51c0; font-size: .72rem; font-weight: 850; }
.search-result-group--packs .discovery-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.search-result-group--hubs .hub-discovery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.search-post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.search-post-list .post-row { border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper-2); }

.official-masthead { min-height: 230px; }
.official-masthead > aside strong { max-width: 300px; font-size: 1rem; line-height: 1.5; letter-spacing: 0; }
.official-jump-nav { display: flex; gap: 8px; overflow-x: auto; padding: 9px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); }
.official-jump-nav a { min-height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border-radius: 10px; font-size: .78rem; font-weight: 800; }
.official-jump-nav a:hover { background: var(--ui-paper-2); }
.official-jump-nav a span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #eceeff; color: #4c53c3; font-size: .66rem; }
.official-board-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; align-items: start; }
.official-board { min-width: 0; padding: 18px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); }
.official-board > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.official-board > header h2 { margin: 5px 0 0; font-size: 1.05rem; }
.official-board > header > strong { color: #555bd0; font-size: 1.55rem; }
.official-board__list .official-row { min-height: 72px; grid-template-columns: 70px minmax(0, 1fr); padding: 11px 0; }
.official-board__list .official-row:last-child { border-bottom: 0; }

.home-discovery { gap: 10px; }
.home-discovery .home-masthead { min-height: 210px; padding: clamp(27px, 3.5vw, 46px); border: 1px solid #2f3246; border-radius: 18px; background: radial-gradient(circle at 85% 20%, rgb(114 104 255 / 22%), transparent 28%), linear-gradient(130deg, #171923, #24273a); }
.home-discovery .home-masthead h1 { font-size: clamp(2.2rem, 4.2vw, 4rem); }
.home-discovery .home-dock { border-radius: 14px; }
.home-command-deck { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(240px, .75fr)); gap: 14px; }
.home-feature-live, .home-official-radar { min-width: 0; padding: 12px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); }
.home-feature-live { color: #f6f8fa; background: linear-gradient(135deg, #151d26, #263241); border-color: #263744; }
.home-feature-live > header, .home-official-radar > header, .home-interest-stage > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.home-feature-live > header h2, .home-official-radar > header h2, .home-interest-stage > header h2 { margin: 5px 0 0; font-size: 1rem; }
.home-feature-live > header a { color: #c6d0d7; font-size: .72rem; }
.home-feature-live > header .icon, .home-official-radar > header .icon, .home-interest-stage > header .icon { width: 14px; }
.home-feature-live .external-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.home-feature-live .external-live-card--compact { grid-template-columns: 112px minmax(0, 1fr); border: 1px solid rgb(255 255 255 / 6%); border-radius: 12px; background: rgb(255 255 255 / 7%); overflow: hidden; }
.home-feature-live .external-live__thumb { aspect-ratio: 1.25; }
.home-feature-live .external-live-card__body { min-width: 0; padding: 12px; color: #f8fafb; }
.home-feature-live .external-live-card__meta { color: #afbdc6; }
.home-feature-live .live-card-actions { display: none; }
.home-official-radar { display: grid; align-content: start; }
.home-coupon-card > span b { color: #bd3041; }
.home-official-card { min-width: 0; min-height: 48px; display: grid; grid-template-columns: 68px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 5px 1px; border-top: 1px solid var(--ui-line); }
.home-official-card > span, .home-official-card a { min-width: 0; }
.home-official-card > span b, .home-official-card > span small, .home-official-card a small { display: block; }
.home-official-card > span b { color: #565dcc; font-size: .68rem; }
.home-official-card > span small, .home-official-card a small { margin-top: 3px; color: var(--ui-dim); font-size: .64rem; }
.home-official-card a strong { display: block; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.home-official-card .icon { width: 14px; color: var(--ui-dim); }
.home-conversation-stage { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(280px, .8fr)); gap: 14px; align-items: stretch; }
.home-conversation-stage > .signal-section, .home-live-ranking, .home-interest-stage { min-width: 0; margin: 0; padding: 17px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); }
.home-conversation-stage .signal-section { min-height: 320px; }
.home-conversation-stage .compact-list { min-width: 0; }
.home-conversation-stage .post-row:hover,
.home-conversation-stage .pick-row:hover,
.community-overview__posts .post-row:hover { background: var(--ui-paper-2); transform: translateX(3px); }
.home-conversation-stage .latest-posts .post-row:has(.post-row__mark) {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  column-gap: 9px;
  padding-left: 10px;
}
.home-conversation-stage .latest-posts .post-row > a { padding-left: 0; }
.home-conversation-stage .latest-posts .post-row__mark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: transparent;
}
.home-conversation-stage .latest-posts .post-row__mark .icon { width: 13px; }
.home-conversation-stage .latest-posts .post-row:hover {
  background: color-mix(in srgb, var(--ui-signal) 9%, var(--ui-paper));
}
.home-conversation-stage .latest-posts .post-row:hover .post-row__mark {
  background: var(--ui-signal);
  color: var(--ui-paper);
}
.home-conversation-stage .top-pik-block .section-head h2,
.home-conversation-stage .community-pick-block .section-head h2 { color: var(--ui-ink); }
.home-conversation-stage .section-meta { color: var(--ui-dim); }
.home-live-ranking { min-height: 0; }
.home-live-ranking .home-rank-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-interest-stage { display: grid; gap: 13px; }
.home-interest-stage > header { margin: 0; }
.home-interest-stage > header nav { display: flex; gap: 7px; }
.home-interest-stage > header nav a { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 9px; background: var(--ui-paper-2); font-size: .72rem; font-weight: 800; }
.home-interest-rail { display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 9px; }
.home-interest-rail .pack-discovery-card { min-height: 160px; }
.home-interest-rail .pack-discovery-card__main { padding: 11px; }
.home-interest-rail .pack-discovery-card__visual { min-height: 60px; padding: 8px; }
.home-interest-rail .pack-discovery-card__visual .entity-icon { width: 43px; height: 43px; }
.home-interest-rail .pack-discovery-card__copy strong { font-size: .86rem; }
.home-interest-rail .pack-discovery-card footer { display: none; }
.home-hub-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.home-hub-rail .hub-discovery-card, .home-hub-rail .hub-discovery-card > a { min-height: 150px; }
.home-hub-rail .hub-discovery-card > a { gap: 9px; padding: 13px; }
.home-hub-rail .hub-discovery-card__top .entity-icon { width: 36px; height: 36px; }
.home-hub-rail .hub-discovery-card__copy strong { font-size: 1rem; }
.home-hub-rail .hub-discovery-card__copy small { -webkit-line-clamp: 1; }

.live-portal { gap: 14px; }
.live-stage { min-width: 0; display: grid; grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr); gap: 14px; align-items: stretch; }
.live-portal .live-stage .live-hero { min-height: 360px; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: 24px; margin: 0; padding: clamp(26px, 3vw, 42px); border-radius: 18px; }
.live-portal .live-stage .live-hero h1 { margin: 12px 0 13px; font-size: clamp(2.15rem, 3.7vw, 3.75rem); }
.live-stage .live-hero__actions { align-self: end; flex-direction: row; flex-wrap: wrap; }
.live-stage .live-external-section { margin: 0; padding: 17px; border-radius: 18px; }
.live-stage .live-section-title { align-items: center; margin-bottom: 12px; }
.live-stage .live-section-title > a { min-height: 38px; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--ui-dim); font-size: .7rem; }
.live-stage .live-section-title > a .icon { width: 13px; }
.live-external-section--priority .external-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.live-external-section--priority .external-live-card--compact { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; border: 1px solid var(--ui-line); border-radius: 13px; overflow: hidden; }
.live-external-section--priority .external-live__thumb { aspect-ratio: 16 / 9; max-height: 185px; }
.live-external-section--priority .external-live-card__body { padding: 12px 13px 13px; }
.live-external-section--priority .external-live-card__meta .entity-icon { width: 27px; height: 27px; }
.live-external-section--priority .live-card-actions { margin-top: 7px; }
.live-portal .live-topic-field { grid-template-columns: 180px minmax(0, 1fr); margin: 0; padding: 16px; border-radius: 16px; }
.live-portal .live-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.live-portal .live-flow-grid { margin: 0; }

@media (max-width: 1180px) {
  .discovery-card-grid, .search-result-group--packs .discovery-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-discovery-grid, .search-result-group--hubs .hub-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-command-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-command-deck > .home-feature-live { grid-column: 1 / -1; }
  .home-feature-live .external-live-card--compact { grid-template-columns: 88px minmax(0, 1fr); }
  .home-conversation-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-conversation-stage > :first-child { grid-column: 1 / -1; min-height: 0; }
  .home-interest-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-hub-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-stage { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); }
}

@media (max-width: 820px) {
  .discovery-masthead, .search-masthead { min-height: 0; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; padding: 30px 25px; }
  .discovery-masthead h1 { font-size: clamp(2rem, 8vw, 3.2rem); }
  .discovery-masthead > aside { padding: 18px 0 0; border-top: 1px solid rgb(255 255 255 / 13%); border-left: 0; }
  .search-masthead form { width: 100%; align-self: auto; }
  .discovery-toolbar { grid-template-columns: minmax(0, 1fr); }
  .official-board-grid { grid-template-columns: minmax(0, 1fr); }
  .home-command-deck, .live-stage { grid-template-columns: minmax(0, 1fr); }
  .home-conversation-stage { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .home-conversation-stage > .signal-section { min-width: min(82vw, 360px); min-height: 300px; scroll-snap-align: start; }
  .home-interest-rail, .home-hub-rail { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .home-interest-rail .pack-discovery-card { min-width: 205px; scroll-snap-align: start; }
  .home-hub-rail .hub-discovery-card { min-width: min(76vw, 300px); scroll-snap-align: start; }
  .live-portal .live-stage .live-hero { min-height: 290px; }
}

@media (max-width: 620px) {
  .pack-discovery, .hub-discovery, .search-portal, .official-portal { gap: 12px; }
  .discovery-masthead, .search-masthead { padding: 26px 21px; border-radius: 16px; }
  .discovery-masthead h1 { margin-top: 8px; font-size: clamp(1.9rem, 9vw, 2.55rem); line-height: 1.08; }
  .discovery-masthead p { font-size: .83rem; line-height: 1.65; }
  .discovery-masthead > aside { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px 12px; }
  .discovery-masthead > aside strong { grid-row: 1 / 3; font-size: 2.25rem; }
  .discovery-masthead > aside .solid-button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .pack-discovery-masthead, .hub-discovery-masthead { padding-block: 21px; }
  .pack-discovery-masthead h1, .hub-discovery-masthead h1 { font-size: clamp(1.95rem, 9vw, 2.2rem); line-height: 1.08; }
  .pack-discovery-masthead p, .hub-discovery-masthead p { font-size: .78rem; line-height: 1.56; }
  .pack-discovery-masthead > aside { grid-template-columns: auto minmax(0, 1fr) auto; padding-top: 12px; }
  .pack-discovery-masthead > aside .solid-button { grid-column: 3; grid-row: 1 / 3; width: auto; margin-top: 0; white-space: nowrap; }
  .discovery-toolbar { padding: 11px; border-radius: 14px; }
  .discovery-card-grid, .search-result-group--packs .discovery-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pack-discovery-card { min-height: 175px; border-radius: 13px; }
  .pack-discovery-card__main { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 10px; }
  .pack-discovery-card__visual { grid-column: 1; min-height: 62px; padding: 8px; border-radius: 10px; }
  .pack-discovery-card__visual .entity-icon { width: 43px; height: 43px; border-radius: 11px; }
  .pack-discovery-card__meta small, .pack-discovery-card__live { font-size: 8px; }
  .pack-discovery-card__copy strong { font-size: .82rem; }
  .pack-discovery-card__copy small { font-size: .6rem; }
  .pack-discovery-card__status { display: none; }
  .pack-discovery-card footer { min-height: 43px; padding: 4px 5px 4px 8px; }
  .pack-discovery-card footer .quiet-button { min-height: 34px; padding-inline: 7px; font-size: .65rem; }
  .hub-discovery-grid, .search-result-group--hubs .hub-discovery-grid { grid-template-columns: minmax(0, 1fr); }
  .hub-discovery-card, .hub-discovery-card > a { min-height: 185px; }
  .hub-discovery-card > a { gap: 12px; padding: 15px; }
  .hub-discovery-card__copy strong { font-size: 1.15rem; }
  .search-result-group { padding: 13px; border-radius: 14px; }
  .search-post-list { grid-template-columns: minmax(0, 1fr); }
  .official-board { padding: 14px; }
  .official-board__list .official-row { grid-template-columns: 60px minmax(0, 1fr); }
  .home-discovery .home-masthead { min-height: 0; padding: 26px 21px; }
  .home-discovery .home-masthead h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .home-feature-live, .home-official-radar, .home-interest-stage, .home-live-ranking { padding: 14px; border-radius: 14px; }
  .home-feature-live .external-live-grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .home-feature-live .external-live-card--compact { min-width: 270px; scroll-snap-align: start; }
  .home-live-ranking .home-rank-stack { grid-template-columns: minmax(0, 1fr); }
  .home-interest-stage > header { align-items: flex-start; }
  .home-interest-stage > header nav { flex-direction: column; }
  .live-portal .live-stage .live-hero { min-height: 0; padding: 27px 21px; border-radius: 16px; }
  .live-portal .live-stage .live-hero h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .live-stage .live-hero__actions { width: 100%; }
  .live-stage .live-hero__actions > * { flex: 1; }
  .live-stage .live-external-section { padding: 14px; border-radius: 15px; }
  .live-external-section--priority .external-live-grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .live-external-section--priority .external-live-card--compact { min-width: 255px; scroll-snap-align: start; }
  .live-portal .live-topic-field { grid-template-columns: minmax(0, 1fr); padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pack-discovery-card, .hub-discovery-card { transition: none; }
}

/* --------------------------------------------------------------------------
 * Entity detail, community, and creation workspaces
 *
 * These routes are destinations, not dashboards. The identity sits once at the
 * top, primary reading stays in one wide column, and the next useful action is
 * visible without scanning three unrelated rails.
 * ----------------------------------------------------------------------- */
.entity-showcase {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(17px, 2vw, 30px);
  min-height: 190px;
  padding: clamp(26px, 3.4vw, 48px);
  overflow: hidden;
  border: 1px solid #303447;
  border-radius: 19px;
  background:
    radial-gradient(circle at 80% 0, rgb(111 102 246 / 23%), transparent 34%),
    linear-gradient(135deg, #171923 0%, #24283a 100%);
  color: #f7f8fc;
  box-shadow: 0 22px 55px rgb(25 28 41 / 17%);
}
.entity-showcase .entity-icon--header { width: clamp(68px, 7vw, 92px); height: clamp(68px, 7vw, 92px); border-radius: 22px; box-shadow: 0 16px 38px rgb(5 7 16 / 32%); }
.entity-showcase__copy { min-width: 0; }
.entity-showcase__copy .eyebrow { color: #b9b6ff; }
.entity-showcase__copy h1 { margin: 7px 0 6px; color: #fff; font-size: clamp(2rem, 4.4vw, 4.25rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; word-break: keep-all; }
.entity-showcase__copy p { max-width: 68ch; margin: 0; overflow: hidden; color: #c7cad7; font-size: .88rem; line-height: 1.65; text-overflow: ellipsis; white-space: nowrap; }
.entity-showcase__signal { min-width: 98px; display: grid; justify-items: end; gap: 5px; padding: 9px 22px; border-right: 1px solid rgb(255 255 255 / 12%); }
.entity-showcase__signal strong { color: #fff; font-size: clamp(2rem, 3.4vw, 3.6rem); line-height: .9; letter-spacing: -.06em; }
.entity-showcase__signal span { color: #aeb3c4; font-size: .65rem; font-weight: 760; letter-spacing: .04em; white-space: nowrap; }
.entity-showcase .pack-identity__actions, .entity-showcase .page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.entity-showcase .solid-button { border-color: #f5f5fa; background: #f5f5fa; color: #222536; }
.entity-showcase .text-button { border-color: rgb(255 255 255 / 15%); color: #d9dbe5; }
.entity-showcase .text-button:hover { background: rgb(255 255 255 / 9%); color: #fff; }
.pack-identity.entity-showcase:has(.entity-icon--header) { grid-template-columns: auto minmax(0, 1fr) auto auto; }

.entity-quicklinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.entity-quicklinks a { min-width: 0; min-height: 72px; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 11px; padding: 11px 14px; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-paper); transition: transform .18s ease, border-color .18s ease; }
.entity-quicklinks a:hover { transform: translateY(-2px); border-color: #bfc3ef; }
.entity-quicklinks a > span { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #eef0ff; color: #5157c9; font-size: 1rem; }
.entity-quicklinks .icon { width: 18px; }
.entity-quicklinks strong { align-self: end; font-size: .83rem; }
.entity-quicklinks small { align-self: start; margin-top: 2px; overflow: hidden; color: var(--ui-dim); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }

.pack-layout[data-layout="entity-detail"], .hub-detail-grid.entity-detail-layout { grid-template-columns: minmax(0, 1fr) minmax(286px, 330px); gap: 14px; align-items: start; }
.pack-layout[data-layout="entity-detail"] .pack-primary, .entity-detail-layout .pack-primary { display: grid; gap: 14px; }
.entity-detail-rail { position: sticky; top: calc(var(--ui-header) + 18px); display: grid; gap: 12px; }
.entity-detail-rail .pack-channels { position: static; display: block; }
.pack-layout[data-layout="entity-detail"] .signal-section, .entity-detail-layout .signal-section { min-width: 0; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); box-shadow: 0 11px 30px rgb(35 40 54 / 6%); }
.pack-layout[data-layout="entity-detail"] .pack-primary > .signal-section, .entity-detail-layout .pack-primary > .signal-section { padding: clamp(16px, 2vw, 23px); }
.pack-post-split { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pack-post-column { min-width: 0; }
.pack-post-column > header { min-height: 40px; display: flex; align-items: center; margin-bottom: 4px; border-bottom: 1px solid var(--ui-line); }
.pack-post-column > header h3 { margin: 0; font-size: .82rem; }
.pack-post-column .pack-post-feed { min-width: 0; }
.pack-live-feed .external-live-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pack-live-feed .external-live-card--compact { grid-template-columns: 92px minmax(0, 1fr); min-height: 72px; border: 0; border-radius: 9px; background: var(--ui-paper-2); }
.pack-live-feed .external-live__thumb { min-height: 72px; aspect-ratio: 16 / 10; }
.pack-live-feed .external-live-card__body { padding: 8px 10px; }
.pack-live-feed .external-live-card h3 { margin-block: 3px; font-size: .75rem; }
.pack-live-feed .external-live-card p, .pack-live-feed .live-card-actions { display: none; }
.entity-detail-rail > .signal-section, .entity-detail-rail > .pack-channels .signal-section { padding: 14px; }
.entity-detail-rail .section-head { min-height: 34px; margin-bottom: 6px; }
.entity-detail-rail .section-head h2 { font-size: .78rem; }
.signal-time { white-space: nowrap; font-variant-numeric: tabular-nums; }

.related-pack-stage, .hub-member-stage { display: grid; gap: 13px; margin-top: 16px; padding: 18px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); }
.related-pack-stage > header, .hub-member-stage > header, .community-directory__section > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.related-pack-stage h2, .hub-member-stage h2, .community-directory__section h2 { margin: 5px 0 0; font-size: 1.05rem; }
.related-pack-stage > header a, .hub-member-stage > header a, .community-directory__section > header a { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-dim); font-size: .72rem; font-weight: 780; }
.related-pack-stage > header .icon, .hub-member-stage > header .icon, .community-directory__section > header .icon { width: 13px; }
.related-pack-rail { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.related-pack-rail .pack-discovery-card { min-height: 158px; box-shadow: none; }
.related-pack-rail .pack-discovery-card__main { padding: 11px; }
.related-pack-rail .pack-discovery-card__visual { min-height: 58px; padding: 8px; }
.related-pack-rail .pack-discovery-card__visual .entity-icon { width: 42px; height: 42px; border-radius: 11px; }
.related-pack-rail .pack-discovery-card__copy strong { font-size: .84rem; }
.related-pack-rail .pack-discovery-card footer { display: none; }
.hub-member-stage.pack-channels { position: static; top: auto; }

.community-directory { display: grid; gap: 17px; }
.community-directory__hero { min-height: 225px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; padding: clamp(28px, 4vw, 52px); border: 1px solid #303447; border-radius: 18px; background: radial-gradient(circle at 86% 14%, rgb(114 104 255 / 24%), transparent 28%), linear-gradient(135deg, #181a24, #292d40); color: #fff; }
.community-directory__hero h1 { max-width: 800px; margin: 9px 0 12px; color: #fff; font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.055em; text-wrap: balance; word-break: keep-all; }
.community-directory__hero p { max-width: 700px; margin: 0; color: #c4c7d4; line-height: 1.7; word-break: keep-all; }
.community-directory__hero .solid-button { border-color: #fff; background: #fff; color: #202333; white-space: nowrap; }
.community-directory__section { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); }
.community-pack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.community-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.community-pack-grid .pack-discovery-card { min-height: 175px; box-shadow: none; }
.community-pack-grid .pack-discovery-card footer { display: none; }
.community-hub-grid .hub-discovery-card, .community-hub-grid .hub-discovery-card > a { min-height: 190px; }

.community-showcase { min-height: 154px; padding: 25px 29px; }
.community-showcase .entity-showcase__copy h1 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); }
.community-channel-rail { display: flex; gap: 7px; margin: 11px 0 9px; padding: 8px; overflow-x: auto; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-paper); scrollbar-width: thin; }
.community-channel-rail .channel-link { min-width: max-content; min-height: 44px; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 5px; margin: 0; padding: 7px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; }
.community-channel-rail .channel-link small { grid-column: 1 / -1; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-channel-rail .channel-link.is-current { border-color: #cfd2ff; background: #eef0ff; color: #444bc3; }
.community-workspace { grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); gap: 12px; }
.community-feed-column { min-width: 0; }
.community-support-rail { min-width: 0; position: sticky; top: calc(var(--ui-header) + 18px); align-self: start; }
.community-support-rail .signal-section { padding: 13px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); }

.compose-intro { max-width: 1120px; margin: 0 auto 13px; padding: 5px 2px 17px; border-bottom: 1px solid var(--ui-line-strong); }
.compose-intro h1 { margin: 8px 0 7px; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.04; letter-spacing: -.055em; text-wrap: balance; word-break: keep-all; }
.compose-intro p { margin: 0; color: var(--ui-dim); line-height: 1.65; }
.compose-page.compose-workbench { width: min(1120px, 100%); grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); align-items: start; }
.compose-editor-card, .compose-recent-card { min-width: 0; }
.compose-workbench .signal-section { margin: 0; padding: clamp(17px, 2.4vw, 27px); border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); box-shadow: 0 14px 36px rgb(35 40 55 / 7%); }
.compose-recent-card { position: sticky; top: calc(var(--ui-header) + 18px); }
.compose-recent-card .signal-section { padding: 14px; }
.compose-workbench .compose-form input[name="title"] { min-height: 54px; font-size: 1rem; }
.compose-workbench .compose-form textarea { min-height: 340px; font-size: .95rem; line-height: 1.75; }
.compose-workbench .form-actions { padding-top: 14px; border-top: 1px solid var(--ui-line); }
.compose-workbench .form-actions .solid-button { min-width: 126px; }

.comment-composer { max-width: 960px; margin-top: 18px; padding: clamp(17px, 2.5vw, 25px); border: 1px solid var(--ui-line); border-radius: 17px; background: var(--ui-paper); box-shadow: 0 13px 34px rgb(35 40 55 / 7%); }
.comment-composer__head { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding-bottom: 13px; border-bottom: 1px solid var(--ui-line); text-align: left; }
.comment-composer__head strong { display: block; margin-top: 4px; font-size: 1rem; }
.comment-composer__head > small { max-width: 320px; color: var(--ui-dim); font-size: .7rem; line-height: 1.55; text-align: right; }
.comment-composer textarea { min-height: 140px; padding: 14px; font-size: .92rem; line-height: 1.7; }
.comment-composer__actions { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.comment-composer__actions small { color: var(--ui-dim); font-size: .7rem; }
.comment-composer__actions .solid-button { min-width: 110px; }

.emote-set-page, .emote-workbench { display: grid; gap: 15px; }
.emote-set-showcase { min-height: 260px; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(25px, 4vw, 52px); overflow: hidden; border: 1px solid #302e4a; border-radius: 19px; background: radial-gradient(circle at 12% 12%, rgb(141 123 255 / 25%), transparent 35%), linear-gradient(135deg, #181725, #292742); color: #fff; }
.emote-set-showcase figure { width: 180px; height: 180px; display: grid; place-items: center; margin: 0; padding: 22px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 28px; background: rgb(255 255 255 / 8%); }
.emote-set-showcase figure img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 17px 18px rgb(2 2 10 / 27%)); }
.emote-set-showcase figure .icon { width: 58px; color: #b9b2ff; }
.emote-set-showcase__copy h1 { margin: 8px 0 9px; color: #fff; font-size: clamp(2.1rem, 4.4vw, 4.25rem); line-height: 1; letter-spacing: -.055em; }
.emote-set-showcase__copy > p { max-width: 620px; color: #c7c5d7; line-height: 1.7; }
.emote-set-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 19px 0 0; }
.emote-set-stats > div { display: flex; gap: 7px; }
.emote-set-stats dt { color: #aaa6bf; font-size: .7rem; }
.emote-set-stats dd { margin: 0; color: #fff; font-size: .75rem; font-weight: 800; }
.emote-set-showcase__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.emote-set-showcase__actions .solid-button { background: #f5f3ff; color: #25213c; }
.emote-set-showcase__actions .text-button { border-color: rgb(255 255 255 / 15%); color: #ddd9eb; }
.emote-set-body { padding: clamp(18px, 3vw, 30px); }
.emote-set-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; }
.emote-set-grid .emote-chip { width: 100%; aspect-ratio: 1; height: auto; padding: 10px; border-radius: 15px; background: var(--ui-paper-2); }

.emote-workbench { width: min(1180px, 100%); margin-inline: auto; gap: 12px; }
.emote-workbench__intro { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: clamp(24px, 3.5vw, 42px); border: 1px solid var(--ui-line-strong); border-radius: 18px; background: var(--ui-paper); color: var(--ui-ink); }
.emote-workbench__intro h1 { max-width: 850px; margin: 9px 0 8px; color: var(--ui-ink); font-size: clamp(2rem, 3.7vw, 3.7rem); line-height: 1.03; letter-spacing: -.055em; text-wrap: balance; word-break: keep-all; }
.emote-workbench__intro p { max-width: 650px; margin: 0; color: var(--ui-dim); line-height: 1.6; }
.emote-workbench__back { width: max-content; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 19px; color: var(--ui-dim); font-size: .75rem; font-weight: 800; }
.emote-workbench__back .icon { width: 14px; }
.emote-workbench__meter { min-width: 180px; display: grid; justify-items: end; gap: 5px; padding-left: 28px; border-left: 1px solid var(--ui-line); }
.emote-workbench__meter strong { color: var(--ui-ink); font-size: 2.1rem; line-height: 1; }
.emote-workbench__meter span, .emote-workbench__meter small { color: var(--ui-dim); font-size: .7rem; }
.emote-workbench__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-paper); }
.emote-workbench__steps span { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--ui-dim); font-size: .76rem; font-weight: 800; }
.emote-workbench__steps span + span { border-left: 1px solid var(--ui-line); }
.emote-workbench__steps span b { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--ui-line-strong); border-radius: 50%; color: var(--ui-dim); font-size: .66rem; }
.emote-workbench__steps span[aria-current="step"] { background: var(--ui-paper-2); color: var(--ui-ink); }
.emote-workbench__steps span[aria-current="step"] b { border-color: #676bd3; background: #676bd3; color: #fff; }
.emote-workbench__steps span.is-complete b { border-color: #676bd3; color: #676bd3; }
.emote-workbench__body { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.emote-maker-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); align-items: start; gap: 14px; }
.emote-maker-main { min-width: 0; display: grid; gap: 14px; }
.emote-maker-panel, .emote-maker-help, .emote-publish-card { min-width: 0; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); }
.emote-maker-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.emote-maker-panel__head h2, .emote-maker-help h2, .emote-publish-card h2 { margin: 6px 0 0; color: var(--ui-ink); font-size: 1.2rem; letter-spacing: -.025em; }
.emote-maker-panel__head p { margin: 8px 0 0; color: var(--ui-dim); font-size: .82rem; line-height: 1.55; }
.emote-count { flex: none; padding: 7px 10px; border-radius: 999px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: .72rem; font-weight: 800; }
.emote-create, .emote-upload, .emote-publish { display: grid; gap: 18px; margin: 0; }
.emote-field { display: grid; gap: 7px; color: var(--ui-ink); font-size: .78rem; font-weight: 800; }
.emote-field > span { display: flex; align-items: center; gap: 7px; }
.emote-field > span small { color: var(--ui-dim); font-size: .66rem; font-weight: 650; }
.emote-field input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--ui-line-strong); border-radius: 9px; background: var(--ui-paper); color: var(--ui-ink); font-size: .86rem; }
.emote-field input:focus { border-color: #676bd3; outline: 3px solid rgb(103 107 211 / 13%); }
.emote-field > small { color: var(--ui-dim); font-size: .68rem; font-weight: 500; line-height: 1.5; }
.emote-pack-context { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper-2); }
.emote-pack-context .icon { width: 20px; color: #676bd3; }
.emote-pack-context p { display: grid; gap: 2px; margin: 0; }
.emote-pack-context strong { font-size: .8rem; }
.emote-pack-context span { color: var(--ui-dim); font-size: .7rem; }
.emote-upload__file { position: relative; min-height: 210px; display: flex !important; align-items: center; justify-content: center; flex-direction: column; gap: 8px !important; padding: 24px; border: 1px dashed var(--ui-line-strong); border-radius: 13px; background: var(--ui-paper-2); text-align: center; cursor: pointer; }
.emote-upload__file:hover, .emote-upload__file:focus-within { border-color: #676bd3; background: color-mix(in srgb, #676bd3 5%, var(--ui-paper)); }
.emote-upload__file input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.emote-upload__icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-paper); color: #676bd3; }
.emote-upload__icon .icon { width: 22px; }
.emote-upload__file strong { margin-top: 3px; color: var(--ui-ink); font-size: .92rem; }
.emote-upload__file small { color: var(--ui-dim); font-size: .7rem; line-height: 1.5; }
.emote-upload__choose { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; margin-top: 5px; padding: 0 15px; border: 1px solid var(--ui-line-strong); border-radius: 8px; background: var(--ui-paper); color: var(--ui-ink); font-size: .73rem; font-weight: 850; }
.emote-file-note { margin: -7px 0 0; color: var(--ui-dim); font-size: .7rem; line-height: 1.55; }
.emote-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 17px; border-top: 1px solid var(--ui-line); }
.emote-form-actions small { color: var(--ui-dim); font-size: .68rem; text-align: right; }
.emote-form-actions .solid-button { min-height: 44px; padding-inline: 18px; }
.emote-draft-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; margin: 0; }
.emote-draft-strip[hidden] { display: none; }
.emote-draft { width: auto; overflow: hidden; margin: 0; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-paper); }
.emote-draft__thumb { width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: var(--ui-paper-2); }
.emote-draft__thumb img { width: 100%; height: 100%; object-fit: contain; }
.emote-draft figcaption { display: grid; gap: 8px; padding: 11px; }
.emote-draft__filename { overflow: hidden; color: var(--ui-dim); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.emote-draft figcaption label { display: grid; gap: 5px; color: var(--ui-ink); font-size: .68rem; font-weight: 750; }
.emote-draft input { width: 100%; min-height: 38px; padding: 0 9px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-paper); color: var(--ui-ink); font-size: .72rem; }
.emote-draft .text-button { width: max-content; min-height: 32px; padding-inline: 9px; }
.emote-draft small { color: var(--ui-signal); font-size: .68rem; line-height: 1.45; }
.emote-uploaded-panel .emote-guide { margin: -8px 0 17px; }
.emote-uploaded-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.emote-uploaded-grid .emote-chip { width: 100%; height: auto; aspect-ratio: 1; border-radius: 11px; background: var(--ui-paper-2); }
.emote-uploaded-empty { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed var(--ui-line); border-radius: 11px; color: var(--ui-dim); }
.emote-uploaded-empty .icon { width: 25px; }
.emote-uploaded-empty p { margin: 0; font-size: .75rem; }
.emote-publish-card { position: sticky; top: calc(var(--ui-header) + 18px); display: grid; gap: 14px; }
.emote-publish-card h2 { overflow: hidden; margin-top: -3px; text-overflow: ellipsis; white-space: nowrap; }
.emote-publish-progress { height: 7px; overflow: hidden; border-radius: 999px; background: var(--ui-paper-2); }
.emote-publish-progress i { width: var(--progress); height: 100%; display: block; border-radius: inherit; background: #676bd3; }
.emote-publish-status { display: grid; gap: 4px; margin: 0; }
.emote-publish-status strong { font-size: 1.25rem; }
.emote-publish-status span, .emote-publish-help { color: var(--ui-dim); font-size: .72rem; line-height: 1.5; }
.emote-publish { gap: 14px; padding-top: 15px; border-top: 1px solid var(--ui-line); }
.emote-sale-registration { display: grid; gap: 12px; padding-top: 17px; border-top: 1px solid var(--ui-line); }
.emote-sale-registration h3 { margin: 4px 0 0; font-size: .95rem; }
.emote-sale-registration .text-button { width: 100%; min-height: 42px; justify-content: center; }
.emote-sale-registration__state { margin: 0; color: var(--ui-dim); font-size: .7rem; text-align: center; }
.emote-rights { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; font-size: .72rem; line-height: 1.55; }
.emote-rights input { margin-top: 2px; }
.emote-publish .solid-button { width: 100%; min-height: 44px; justify-content: center; }
.emote-publish-help { margin: -4px 0 0; text-align: center; }
.emote-maker-help { position: sticky; top: calc(var(--ui-header) + 18px); }
.emote-maker-help h2 { margin: 0 0 15px; }
.emote-maker-help ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; counter-reset: emote-help; }
.emote-maker-help li { position: relative; padding-left: 30px; color: var(--ui-dim); font-size: .75rem; line-height: 1.6; counter-increment: emote-help; }
.emote-maker-help li::before { content: counter(emote-help); position: absolute; top: 0; left: 0; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--ui-paper-2); color: var(--ui-ink); font-size: .64rem; font-weight: 850; }

@media (max-width: 980px) {
  .entity-showcase, .pack-identity.entity-showcase:has(.entity-icon--header) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .entity-showcase__signal { display: none; }
  .entity-showcase .pack-identity__actions, .entity-showcase .page-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .pack-layout[data-layout="entity-detail"], .hub-detail-grid.entity-detail-layout { grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); }
  .related-pack-rail, .community-pack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .community-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compose-page.compose-workbench { grid-template-columns: minmax(0, 1fr) minmax(220px, 270px); }
  .emote-set-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .entity-showcase, .pack-identity.entity-showcase:has(.entity-icon--header) { grid-template-columns: auto minmax(0, 1fr); min-height: 0; padding: 22px 20px; border-radius: 16px; }
  .entity-showcase .entity-icon--header { width: 62px; height: 62px; border-radius: 17px; }
  .entity-showcase__copy h1 { font-size: clamp(1.8rem, 9vw, 2.65rem); }
  .entity-showcase__copy p { white-space: normal; }
  .entity-showcase .pack-identity__actions, .entity-showcase .page-actions { grid-column: 1 / -1; width: 100%; }
  .entity-showcase .pack-identity__actions > *, .entity-showcase .page-actions > * { flex: 1 1 auto; justify-content: center; }
  .entity-quicklinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
  .entity-quicklinks a { min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; justify-items: center; gap: 6px; padding: 10px 4px; text-align: center; scroll-snap-align: none; }
  .entity-quicklinks a > span { grid-row: auto; }
  .entity-quicklinks small { display: none; }
  .pack-post-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pack-layout[data-layout="entity-detail"], .hub-detail-grid.entity-detail-layout, .community-workspace, .compose-page.compose-workbench { grid-template-columns: minmax(0, 1fr); }
  .entity-detail-rail, .community-support-rail, .compose-recent-card { position: static; }
  .pack-layout[data-layout="entity-detail"] > .entity-detail-rail,
  .hub-detail-grid.entity-detail-layout > .entity-detail-rail { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .entity-detail-rail > *,
  .entity-detail-rail .pack-channels { min-width: 0; width: 100%; }
  .related-pack-stage, .hub-member-stage, .community-directory__section { padding: 14px; border-radius: 14px; }
  .related-pack-rail, .community-pack-grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .related-pack-rail { padding-bottom: 0; }
  .related-pack-rail .pack-discovery-card, .community-pack-grid .pack-discovery-card { min-width: 180px; scroll-snap-align: start; }
  .community-directory__hero { min-height: 0; grid-template-columns: minmax(0, 1fr); align-items: start; padding: 26px 21px; }
  .community-directory__hero h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .community-directory__hero .solid-button { width: 100%; justify-content: center; }
  .community-hub-grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .community-hub-grid .hub-discovery-card { min-width: min(78vw, 290px); scroll-snap-align: start; }
  .community-showcase { padding: 21px; }
  .community-channel-rail { margin-top: 9px; }
  .compose-intro h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .compose-workbench .signal-section { padding: 15px; }
  .compose-guide { display: none; }
  .compose-workbench .compose-form textarea { min-height: 270px; }
  .comment-composer__head { align-items: flex-start; flex-direction: column; }
  .comment-composer__head > small { text-align: left; }
  .emote-set-showcase { grid-template-columns: 100px minmax(0, 1fr); align-items: start; padding: 22px 19px; }
  .emote-set-showcase figure { width: 100px; height: 100px; padding: 13px; border-radius: 20px; }
  .emote-set-showcase__copy h1 { font-size: clamp(1.9rem, 9vw, 2.7rem); }
  .emote-set-showcase__actions { grid-column: 1 / -1; width: 100%; flex-direction: row; flex-wrap: wrap; }
  .emote-set-showcase__actions > * { flex: 1 1 auto; justify-content: center; }
  .emote-set-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .emote-workbench__intro { min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .emote-workbench__intro h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .emote-workbench__meter { min-width: 0; grid-template-columns: auto 1fr; justify-items: start; align-items: baseline; padding: 16px 0 0; border-top: 1px solid var(--ui-line); border-left: 0; }
  .emote-workbench__meter strong { grid-row: 1 / 3; font-size: 1.75rem; }
  .emote-workbench__meter span, .emote-workbench__meter small { grid-column: 2; }
  .emote-maker-layout { grid-template-columns: minmax(0, 1fr); }
  .emote-maker-help, .emote-publish-card { position: static; }
  .emote-uploaded-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .official-row { grid-template-columns: 74px minmax(0, 1fr); }
}

.mobile-rail-dots { display: none; }

.related-pack-rail,
.community-pack-grid,
.community-hub-grid,
.games-featured-rail,
.live-portal .live-topic-grid,
.live-stage-preview > div:not(.live-stage-preview__empty),
.live-external-section--priority .external-live-grid,
.pack-live-stage .external-live-grid {
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.related-pack-rail::-webkit-scrollbar,
.community-pack-grid::-webkit-scrollbar,
.community-hub-grid::-webkit-scrollbar,
.games-featured-rail::-webkit-scrollbar,
.live-portal .live-topic-grid::-webkit-scrollbar,
.live-stage-preview > div:not(.live-stage-preview__empty)::-webkit-scrollbar,
.live-external-section--priority .external-live-grid::-webkit-scrollbar,
.pack-live-stage .external-live-grid::-webkit-scrollbar { display: none; }

@media (max-width: 820px) {
  .mobile-rail-dots:not([hidden]) { min-height: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 5px; }
  .mobile-rail-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-line-strong); }
  .mobile-rail-dots i.is-current { background: var(--ui-ink); }
}

@media (max-width: 420px) {
  .entity-showcase { gap: 14px; }
  .entity-showcase .entity-icon--header { width: 54px; height: 54px; }
  .entity-showcase__copy h1 { font-size: 1.75rem; }
  .related-pack-stage > header, .hub-member-stage > header, .community-directory__section > header { align-items: flex-start; }
  .related-pack-stage > header a, .hub-member-stage > header a, .community-directory__section > header a { white-space: nowrap; }
  .comment-composer__actions { align-items: flex-start; flex-direction: column; }
  .comment-composer__actions .solid-button { width: 100%; }
  .emote-set-showcase { grid-template-columns: 78px minmax(0, 1fr); }
  .emote-set-showcase figure { width: 78px; height: 78px; padding: 10px; border-radius: 17px; }
  .emote-set-stats { gap: 7px 14px; }
  .emote-workbench { gap: 9px; }
  .emote-workbench__intro { padding: 21px 17px; border-radius: 14px; }
  .emote-workbench__back { margin-bottom: 15px; }
  .emote-workbench__steps span { min-height: 49px; gap: 5px; padding: 0 4px; font-size: .68rem; text-align: center; }
  .emote-workbench__steps span b { width: 20px; height: 20px; font-size: .61rem; }
  .emote-maker-panel, .emote-maker-help, .emote-publish-card { padding: 18px 15px; border-radius: 14px; }
  .emote-maker-panel__head { gap: 10px; }
  .emote-upload__file { min-height: 190px; padding: 20px 13px; }
  .emote-form-actions { align-items: stretch; flex-direction: column; }
  .emote-form-actions .solid-button { width: 100%; justify-content: center; }
  .emote-form-actions small { text-align: left; }
  .emote-draft-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emote-uploaded-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .entity-quicklinks a, .related-pack-rail .pack-discovery-card { transition: none; }
}

/* --------------------------------------------------------------------------
   Editorial surfaces — content first, without glow or synthetic gradients.

   Games, My and EmotiPack already have their own authored identities. The
   shared PacPik destinations deliberately use a quieter flat system so every
   route does not look like a copy of the same generated hero.
   -------------------------------------------------------------------------- */
.discovery-masthead,
.home-discovery .home-masthead,
.entity-showcase,
.community-directory__hero {
  min-height: 0;
  color: var(--ui-ink);
  border-color: var(--ui-line-strong);
  border-radius: 12px;
  background: var(--ui-paper);
  box-shadow: none;
}
.discovery-masthead {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(25px, 3.2vw, 42px);
}
.discovery-masthead .eyebrow,
.home-masthead .eyebrow,
.entity-showcase__copy .eyebrow { color: var(--ui-dim); }
.discovery-masthead h1,
.home-discovery .home-masthead h1,
.entity-showcase__copy h1,
.community-directory__hero h1 {
  color: var(--ui-ink);
  font-size: clamp(1.9rem, 3.1vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -.042em;
}
.discovery-masthead p,
.home-masthead p,
.entity-showcase__copy p,
.community-directory__hero p { color: var(--ui-dim); }
.discovery-masthead > aside {
  min-width: 170px;
  align-self: center;
  justify-content: center;
  padding: 4px 0 4px 24px;
  border-left-color: var(--ui-line);
}
.discovery-masthead > aside strong { color: var(--ui-ink); font-size: 1.25rem; line-height: 1.2; letter-spacing: -.025em; }
.discovery-masthead > aside span { color: var(--ui-dim); }
.discovery-masthead > aside .solid-button,
.community-directory__hero .solid-button,
.entity-showcase .solid-button {
  border-color: var(--ui-ink);
  background: var(--ui-ink);
  color: var(--ui-paper);
}
.home-discovery .home-masthead {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(16px, 2.6vw, 30px);
  padding: clamp(14px, 1.5vw, 20px);
}
.home-discovery .home-masthead h1 { font-size: clamp(1.8rem, 2.35vw, 2.35rem); }
.home-discovery .home-dock { min-height: 48px; padding-block: 5px; }
.home-masthead nav a {
  color: var(--ui-ink);
  border-color: var(--ui-line-strong);
  border-radius: 8px;
  background: transparent;
}
.home-masthead nav a:hover { border-color: var(--ui-ink); background: var(--ui-paper-2); }
.home-masthead nav .icon { color: currentColor; }

.entity-showcase {
  gap: clamp(17px, 2vw, 26px);
  padding: clamp(22px, 3vw, 34px);
}
.entity-showcase .entity-icon--header {
  width: clamp(62px, 6vw, 82px);
  height: clamp(62px, 6vw, 82px);
  border-radius: 14px;
  box-shadow: none;
}
.entity-showcase__copy h1 { margin-top: 5px; }
.entity-showcase__signal { min-width: 84px; padding-inline: 18px; border-right-color: var(--ui-line); }
.entity-showcase__signal strong { color: var(--ui-ink); font-size: clamp(1.5rem, 2.5vw, 2.35rem); }
.entity-showcase__signal span { color: var(--ui-dim); }
.entity-showcase .text-button { color: var(--ui-ink); border-color: var(--ui-line-strong); }
.entity-showcase .text-button:hover { color: var(--ui-ink); background: var(--ui-paper-2); }
.entity-quicklinks a,
.pack-layout[data-layout="entity-detail"] .signal-section,
.entity-detail-layout .signal-section,
.compose-workbench .signal-section,
.comment-composer { border-radius: 10px; box-shadow: none; }
.entity-quicklinks a > span { border-radius: 8px; background: var(--ui-paper-2); color: var(--ui-ink); }
.entity-quicklinks a:hover { transform: none; border-color: var(--ui-ink); }

.pack-discovery-card,
.hub-discovery-card { border-radius: 10px; box-shadow: none; }
.pack-discovery-card:hover,
.hub-discovery-card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--ui-line-strong); }
.pack-discovery-card__visual,
[data-theme="dark"] .pack-discovery-card__visual,
.hub-discovery-card > a { background: var(--ui-paper-2); }
.hub-discovery-card > a { background: var(--ui-paper); }
.pack-discovery-card__visual .entity-icon { box-shadow: none; }
.hub-discovery-card__top > small { color: var(--ui-dim); }
.hub-category-rail,
.discovery-toolbar,
.official-jump-nav,
.official-board,
.search-result-group { border-radius: 10px; box-shadow: none; }
.discovery-toolbar form,
.search-masthead form { border-radius: 8px; }
.search-masthead form { background: var(--ui-paper-2); border-color: var(--ui-line-strong); }
.search-masthead form input { color: var(--ui-ink); }
.search-masthead form input::placeholder { color: var(--ui-dim); }
.search-masthead form button { color: var(--ui-dim); }

.home-feature-live,
.home-official-radar,
.home-conversation-stage > .signal-section,
.home-live-ranking,
.home-interest-stage { border-radius: 10px; box-shadow: none; }
.home-feature-live {
  color: var(--ui-ink);
  border-color: var(--ui-line-strong);
  background: var(--ui-paper);
}
.home-feature-live > header a,
.home-feature-live .external-live-card__meta { color: var(--ui-dim); }
.home-feature-live .external-live-card--compact { border-color: var(--ui-line); background: var(--ui-paper-2); }
.home-feature-live .external-live-card__body { color: var(--ui-ink); }
.home-feature-live.home-live-now {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  align-content: start;
  gap: 0;
  margin-bottom: 0;
}
.home-feature-live .external-live-grid { min-height: 0; align-items: stretch; }
.home-feature-live .external-live-card--compact {
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(145px, 1fr) auto;
}
.home-feature-live .external-live__thumb { width: 100%; height: 100%; aspect-ratio: auto; }
.home-command-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-official-split { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-official-split > .home-official-radar { min-width: 0; }
.home-conversation-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-conversation-stage .signal-section { min-height: 270px; }
.home-live-ranking .home-rank-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-rank-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-rank-stack > div { min-width: 0; }
.home-rank-empty,
.module-empty,
.home-live-idle,
.live-module-empty,
.live-stage-preview__empty {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  padding: 18px;
  border: 1px dashed var(--ui-line-strong);
  border-radius: 8px;
  background: var(--ui-paper-2);
}
.home-rank-empty p,
.home-live-idle p,
.live-stage-preview__empty p { max-width: 52ch; margin: 0; color: var(--ui-dim); font-size: .76rem; line-height: 1.6; }
.home-rank-empty a,
.module-empty a,
.live-module-empty a { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-ink); font-size: .74rem; font-weight: 800; }
.home-rank-empty .icon,
.module-empty .icon,
.live-module-empty .icon { width: 13px; }
.module-empty--wide { min-height: 82px; }

.live-portal .live-hero,
.live-portal .live-stage .live-hero {
  min-height: 0;
  color: #f5f6f7;
  border-color: #30353a;
  border-radius: 10px;
  background: #1b2025;
  box-shadow: none;
  animation: none;
}
.live-portal .live-stage .live-hero h1 { max-width: 620px; font-size: clamp(2rem, 3.2vw, 3.25rem); }
.live-portal .live-hero p { color: #bdc2c7; }
.live-stage { grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr); }
.live-stage-preview,
.live-stage .live-external-section,
.live-portal .live-topic-field,
.live-portal .live-flow-main,
.live-portal .live-flow-rail,
.live-portal .live-signal-panels > section {
  min-width: 0;
  border-radius: 10px;
  box-shadow: none;
}
.live-stage-preview { display: grid; align-content: start; gap: 14px; padding: 20px; border: 1px solid var(--ui-line); background: var(--ui-paper); }
.live-stage-preview > header span { color: #c93645; font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
.live-stage-preview > header h2 { margin: 6px 0 0; font-size: 1.15rem; }
.live-stage-preview > div:not(.live-stage-preview__empty) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.live-stage-preview > div > a { min-width: 0; min-height: 150px; display: grid; align-content: space-between; gap: 10px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper-2); }
.live-stage-preview > div > a small { color: #c93645; font-size: .62rem; font-weight: 850; }
.live-stage-preview > div > a strong { overflow: hidden; font-size: .82rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.live-stage-preview > div > a .icon { width: 14px; color: var(--ui-dim); }
.live-portal .live-flow-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); }
.live-signal-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.community-directory__hero { align-items: center; }
.community-directory__hero .solid-button { white-space: nowrap; }
.community-channel-rail .channel-link.is-current { border-color: var(--ui-line-strong); background: var(--ui-paper-2); color: var(--ui-ink); }

@media (max-width: 980px) {
  .home-conversation-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-conversation-stage > :last-child { grid-column: 1 / -1; }
  .live-stage { grid-template-columns: minmax(0, 1fr); }
  .live-stage-preview > div:not(.live-stage-preview__empty) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .discovery-masthead,
  .home-discovery .home-masthead { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .discovery-masthead h1,
  .home-discovery .home-masthead h1 { font-size: clamp(1.8rem, 8.5vw, 2.35rem); }
  .discovery-masthead > aside { min-width: 0; padding: 15px 0 0; border-top: 1px solid var(--ui-line); border-left: 0; }
  .home-command-deck { grid-template-columns: minmax(0, 1fr); }
  .home-official-split { grid-template-columns: minmax(0, 1fr); }
  .home-feature-live.home-live-now { grid-template-rows: auto auto; }
  .home-feature-live .external-live-card--compact {
    height: auto;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .home-feature-live .external-live__thumb { height: auto; aspect-ratio: 1.15; }
  .home-conversation-stage { display: flex; }
  .home-rank-stack { grid-template-columns: minmax(0, 1fr); }
  .live-stage-preview > div:not(.live-stage-preview__empty) { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .live-stage-preview > div > a { min-width: min(72vw, 230px); scroll-snap-align: start; }
  .live-portal .live-flow-grid,
  .live-signal-panels { grid-template-columns: minmax(0, 1fr); }
}

/* Pack / HubPack proposal is a guided editorial form, not a settings sheet. */
.proposal-studio { display: grid; gap: 16px; padding-bottom: 42px; }
.proposal-intro {
  min-height: 210px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, .58fr);
  align-items: end;
  gap: clamp(30px, 6vw, 90px);
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid #30343a;
  border-radius: 12px;
  background: #1c2025;
  color: #f5f6f7;
}
.proposal-intro h1 { max-width: 780px; margin: 8px 0 11px; font-size: clamp(2rem, 3.6vw, 3.75rem); line-height: 1.07; letter-spacing: -.052em; text-wrap: balance; word-break: keep-all; }
.proposal-intro p { max-width: 720px; margin: 0; color: #bec3c7; line-height: 1.7; word-break: keep-all; }
.proposal-intro ol { display: grid; margin: 0; padding: 0; border-top: 1px solid #3b4046; list-style: none; }
.proposal-intro li { min-height: 52px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; border-bottom: 1px solid #3b4046; color: #ccd0d3; font-size: .82rem; }
.proposal-intro li b { color: #fff; font-size: .66rem; font-variant-numeric: tabular-nums; }
.proposal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 330px); align-items: start; gap: 16px; }
.proposal-form { width: auto; max-width: none; min-width: 0; display: grid; gap: 0; overflow: hidden; padding-top: 0; border: 1px solid var(--ui-line-strong); border-radius: 12px; background: var(--ui-paper); }
.proposal-kind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 20px; border: 0; border-bottom: 1px solid var(--ui-line); }
.proposal-kind legend { width: 100%; margin-bottom: 12px; color: var(--ui-dim); font-size: .8rem; font-weight: 850; }
.proposal-kind label { position: relative; min-width: 0; cursor: pointer; }
.proposal-kind input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.proposal-kind label > span { min-height: 78px; display: grid; align-content: center; gap: 5px; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper-2); }
.proposal-kind label > span strong { font-size: .92rem; }
.proposal-kind label > span small { color: var(--ui-dim); font-size: .78rem; line-height: 1.45; }
.proposal-kind input:checked + span { border-color: var(--ui-ink); background: var(--ui-paper); box-shadow: inset 3px 0 0 var(--ui-ink); }
.proposal-kind input:focus-visible + span { outline: 2px solid var(--ui-signal); outline-offset: 2px; }
.proposal-form__section { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; margin: 0; padding: clamp(22px, 3vw, 34px); border: 0; border-bottom: 1px solid var(--ui-line); }
.proposal-form__section > header { display: grid; align-content: start; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.proposal-form__section > header > span,
.proposal-members > legend > span { color: var(--ui-dim); font-size: .66rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.proposal-form__section h2 { margin: 0 0 6px; font-size: 1rem; }
.proposal-form__section header p { margin: 0; color: var(--ui-dim); font-size: .8rem; line-height: 1.55; }
.proposal-fields { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.proposal-fields > label:not(.proposal-plan-check),
.proposal-asset form > label:not(.proposal-rights-check) { display: grid; align-content: start; gap: 7px; color: var(--ui-dim); font-size: .8rem; font-weight: 750; }
.proposal-fields input,
.proposal-fields select,
.proposal-fields textarea,
.proposal-asset input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid var(--ui-line-strong); border-radius: 7px; background: var(--ui-canvas); color: var(--ui-ink); }
.proposal-fields textarea { min-height: 105px; line-height: 1.65; resize: vertical; }
.proposal-fields__wide { grid-column: 1 / -1; }
.proposal-plan-check,
.proposal-rights-check { min-height: 46px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: .78rem; line-height: 1.45; }
.proposal-plan-check input,
.proposal-rights-check input,
.proposal-member > input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--ui-ink); }
.proposal-members { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.proposal-members[hidden] { display: none; }
.proposal-members > legend { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; margin-bottom: 4px; }
.proposal-members > legend strong { display: block; font-size: 1rem; }
.proposal-members > legend small { display: block; margin-top: 5px; color: var(--ui-dim); font-size: .8rem; line-height: 1.55; }
.proposal-member-search { min-height: 46px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; border: 1px solid var(--ui-line-strong); border-radius: 7px; background: var(--ui-canvas); }
.proposal-member-search .icon { width: 16px; margin-inline: auto; color: var(--ui-dim); }
.proposal-member-search input { min-width: 0; min-height: 44px; border: 0; outline: 0; background: transparent; }
.proposal-member-grid { max-height: 330px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 2px; overflow-y: auto; scrollbar-width: thin; }
.proposal-member { min-width: 0; cursor: pointer; }
.proposal-member > input { position: absolute; opacity: 0; }
.proposal-member > span { min-height: 64px; display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-paper-2); }
.proposal-member .entity-icon { width: 35px; height: 35px; border-radius: 8px; }
.proposal-member strong,
.proposal-member small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proposal-member strong { font-size: .72rem; }
.proposal-member small { margin-top: 3px; color: var(--ui-dim); font-size: .62rem; }
.proposal-member > input:checked + span { border-color: var(--ui-ink); background: var(--ui-paper); box-shadow: inset 3px 0 0 var(--ui-ink); }
.proposal-member > input:focus-visible + span { outline: 2px solid var(--ui-signal); outline-offset: 1px; }
.proposal-member-count { margin: 0; color: var(--ui-dim); font-size: .78rem; font-weight: 800; }
.proposal-submit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 25px; padding: 20px clamp(22px, 3vw, 34px); }
.proposal-submit strong { font-size: .78rem; }
.proposal-submit p { margin: 4px 0 0; color: var(--ui-dim); font-size: .78rem; line-height: 1.5; }
.proposal-submit .solid-button { min-width: 155px; justify-content: center; }
.proposal-submit .proposal-result { grid-column: 1 / -1; }
.proposal-history { position: sticky; top: calc(var(--ui-header) + 18px); min-width: 0; display: grid; gap: 13px; padding: 18px; border: 1px solid var(--ui-line-strong); border-radius: 10px; background: var(--ui-paper); }
.proposal-history h2 { margin: 5px 0 0; font-size: 1rem; }
.proposal-history > div { display: grid; gap: 8px; }
.proposal-history--empty { min-height: 210px; align-content: center; }
.proposal-history--empty p { margin: 0; color: var(--ui-dim); font-size: .74rem; line-height: 1.65; }
.proposal-status-card { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper-2); }
.proposal-status-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.proposal-status-card > header span { color: var(--ui-dim); font-size: .61rem; font-weight: 900; letter-spacing: .09em; }
.proposal-status-card > header em { color: var(--ui-ink); font-size: .65rem; font-style: normal; font-weight: 800; }
.proposal-status-card > div strong,
.proposal-status-card > div small { display: block; }
.proposal-status-card > div strong { font-size: .82rem; }
.proposal-status-card > div small { margin-top: 4px; color: var(--ui-dim); font-size: .64rem; line-height: 1.45; }
.proposal-status-card footer { display: grid; gap: 7px; }
.proposal-asset > summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; color: var(--ui-dim); font-size: .68rem; font-weight: 800; }
.proposal-asset form { display: grid; gap: 10px; padding-top: 9px; border-top: 1px solid var(--ui-line); }
.proposal-asset input[type="file"] { min-height: 48px; padding: 8px; }

@media (max-width: 980px) {
  .proposal-layout { grid-template-columns: minmax(0, 1fr); }
  .proposal-history { position: static; }
}

@media (max-width: 700px) {
  .proposal-intro { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 20px; }
  .proposal-intro h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .proposal-kind { grid-template-columns: minmax(0, 1fr); padding: 15px; }
  .proposal-form__section { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 21px 16px; }
  .proposal-fields { grid-template-columns: minmax(0, 1fr); }
  .proposal-fields__wide { grid-column: auto; }
  .proposal-member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proposal-submit { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .proposal-submit .solid-button { width: 100%; }
}

@media (max-width: 390px) {
  .proposal-member-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Top Pik reads like a live ledger: one clear lead, then the chasing stories. */
.pik-ledger { display: grid; gap: 22px; padding: 32px 0 48px; }
.pik-ledger__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; padding: 0 2px 24px; border-bottom: 1px solid var(--ui-line-strong); }
.pik-ledger__head h1 { max-width: 820px; margin: 7px 0 8px; font-size: clamp(2rem, 3.3vw, 3.5rem); line-height: 1.08; letter-spacing: -.045em; word-break: keep-all; }
.pik-ledger__head p { max-width: 700px; margin: 0; color: var(--ui-dim); line-height: 1.7; word-break: keep-all; }
.pik-ledger__head nav { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper); }
.pik-ledger__head nav button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 5px; background: transparent; color: var(--ui-dim); cursor: pointer; font-size: .76rem; font-weight: 800; }
.pik-ledger__head nav button[aria-pressed="true"] { background: var(--ui-ink); color: var(--ui-paper); }
.pik-ledger__board { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr); align-items: stretch; gap: 14px; }
.pik-ledger__lead { position: relative; min-height: 390px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: space-between; gap: 28px; overflow: hidden; padding: clamp(25px, 3.8vw, 52px); border: 1px solid var(--ui-line-strong); border-radius: 11px; background: var(--ui-paper); }
.pik-ledger__lead::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--ui-rank); }
.pik-ledger__rank { grid-column: 1 / -1; color: var(--ui-rank); font-size: .73rem; font-weight: 900; letter-spacing: .12em; }
.pik-ledger__lead > div { align-self: end; }
.pik-ledger__lead small { color: var(--ui-rank); font-size: .68rem; font-weight: 900; letter-spacing: .06em; }
.pik-ledger__lead h2 { max-width: 700px; margin: 9px 0 12px; font-size: clamp(1.8rem, 3vw, 3.15rem); line-height: 1.13; letter-spacing: -.045em; word-break: keep-all; }
.pik-ledger__lead p { margin: 0; color: var(--ui-dim); }
.pik-ledger__lead > strong { align-self: end; display: grid; justify-items: end; color: var(--ui-rank); font-size: clamp(2rem, 4vw, 4rem); line-height: .9; font-variant-numeric: tabular-nums; }
.pik-ledger__lead > strong span { margin-bottom: 7px; color: var(--ui-dim); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }
.pik-ledger__lead > .icon { position: absolute; right: 22px; top: 22px; width: 17px; color: var(--ui-dim); }
.pik-ledger__list { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pik-ledger__list li { min-height: 0; }
.pik-ledger__list a { height: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 16px; align-items: center; gap: 13px; padding: 16px 18px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-paper); }
.pik-ledger__list a:hover { border-color: var(--ui-line-strong); }
.pik-ledger__list b { color: var(--ui-rank); font-size: .7rem; font-variant-numeric: tabular-nums; }
.pik-ledger__list span { min-width: 0; }
.pik-ledger__list span strong,
.pik-ledger__list span small { display: block; }
.pik-ledger__list span strong { overflow: hidden; font-size: .86rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.pik-ledger__list span small { margin-top: 5px; color: var(--ui-dim); font-size: .66rem; }
.pik-ledger__list em { color: var(--ui-rank); font-size: .72rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.pik-ledger__list .icon { width: 14px; color: var(--ui-dim); }
.pik-ledger__empty { min-height: 260px; display: grid; place-items: center; border: 1px solid var(--ui-line); background: var(--ui-paper); }

/* Community's Pick is a source desk, not another PacPik ranking card. */
.pick-observer { display: grid; gap: 22px; padding: 32px 0 48px; }
.pick-observer__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; padding: 30px 34px; border-block: 1px solid var(--ui-line-strong); background: var(--ui-paper); }
.pick-observer__intro h1 { max-width: 820px; margin: 7px 0 9px; font-size: clamp(1.9rem, 3vw, 3.2rem); line-height: 1.12; letter-spacing: -.04em; word-break: keep-all; }
.pick-observer__intro p { max-width: 720px; margin: 0; color: var(--ui-dim); line-height: 1.7; word-break: keep-all; }
.pick-observer__intro dl { display: flex; gap: 32px; margin: 0; padding-left: 30px; border-left: 1px solid var(--ui-line); }
.pick-observer__intro dl div { display: grid; gap: 5px; }
.pick-observer__intro dt { color: var(--ui-dim); font-size: .64rem; font-weight: 800; }
.pick-observer__intro dd { margin: 0; font-size: .9rem; font-weight: 850; white-space: nowrap; }
.pick-observer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
.pick-observer__source { min-width: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); box-shadow: 0 8px 24px rgb(18 24 33 / 5%); }
.pick-observer__source[data-state="stale"] { opacity: .84; }
.pick-observer__source > header { min-height: 88px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 16px; background: color-mix(in srgb, var(--ui-pick) 6%, var(--ui-paper)); }
.pick-observer__mark { width: 42px; height: 42px; border-radius: 12px; }
.pick-observer__mark .icon { width: 18px; }
.pick-observer__mark b { min-width: 17px; height: 17px; font-size: 7px; }
.pick-observer__source h2 { margin: 1px 0 5px; font-size: .86rem; }
.pick-observer__source header p { margin: 0; color: var(--ui-dim); font-size: .65rem; line-height: 1.5; }
.pick-observer__source header em { color: var(--ui-dim); font-size: .62rem; font-style: normal; font-weight: 850; }
.pick-observer__source > div { display: grid; }
.pick-observer__source > div > a { min-height: 82px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 15px; align-items: center; gap: 10px; margin: 4px 7px; padding: 10px 11px; border-radius: 10px; transition: background-color .16s ease, transform .16s ease; }
.pick-observer__source > div > a:hover { background: var(--ui-paper-2); transform: translateX(3px); }
.pick-observer__source > div > a > span { color: var(--ui-signal); font-size: .66rem; font-weight: 900; }
.pick-observer__source > div > a > strong,
.pick-observer__source > div > a > small { grid-column: 2; display: block; }
.pick-observer__source > div > a > strong { align-self: end; overflow: hidden; font-size: .78rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.pick-observer__source > div > a > small { align-self: start; color: var(--ui-dim); font-size: .63rem; }
.pick-observer__source > div > a > .icon { grid-column: 3; grid-row: 1 / span 2; width: 13px; color: var(--ui-dim); }

/* Today is an agenda: dense on desktop, compact and readable when it folds. */
.agenda-board { display: grid; gap: 18px; padding: 32px 0 50px; }
.agenda-board__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; padding-bottom: 23px; border-bottom: 2px solid var(--ui-ink); }
.agenda-board__head h1 { margin: 7px 0 9px; font-size: clamp(2rem, 3.1vw, 3.3rem); line-height: 1.1; letter-spacing: -.045em; word-break: keep-all; }
.agenda-board__head p { max-width: 760px; margin: 0; color: var(--ui-dim); line-height: 1.7; word-break: keep-all; }
.agenda-board__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 11px; align-items: start; }
.agenda-group { min-width: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-paper); }
.agenda-group#updates-today { grid-column: span 3; }
.agenda-group#updates-deadline { grid-column: span 3; }
.agenda-group#updates-upcoming { grid-column: span 6; }
.agenda-group#updates-news { grid-column: 1 / -1; }
.agenda-group > header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--ui-line); }
.agenda-group > header h2 { margin: 0; font-size: .82rem; }
.agenda-group > header span { min-width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 50%; color: var(--ui-dim); font-size: .62rem; font-weight: 850; }
.agenda-row { min-height: 74px; display: grid; grid-template-columns: 72px minmax(0, 1fr) 15px; align-items: center; gap: 11px; padding: 11px 15px; border-bottom: 1px solid var(--ui-line); }
.agenda-row:last-child { border-bottom: 0; }
.agenda-row:hover { background: var(--ui-paper-2); }
.agenda-row time { color: var(--ui-signal); font-size: .66rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.agenda-row span { min-width: 0; }
.agenda-row strong,
.agenda-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-row strong { font-size: .76rem; }
.agenda-row small { margin-top: 5px; color: var(--ui-dim); font-size: .62rem; }
.agenda-row .icon { width: 13px; color: var(--ui-dim); }
.agenda-group__empty { min-height: 128px; display: flex; align-items: center; margin: 0; padding: 18px; color: var(--ui-dim); font-size: .72rem; line-height: 1.6; }

@media (max-width: 1040px) {
  .pik-ledger__board { grid-template-columns: minmax(0, 1fr); }
  .pik-ledger__lead { min-height: 300px; }
  .pik-ledger__list { grid-template-rows: none; }
  .pick-observer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-group#updates-today,
  .agenda-group#updates-deadline { grid-column: span 6; }
  .agenda-group#updates-upcoming,
  .agenda-group#updates-news { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .pik-ledger,
  .pick-observer,
  .agenda-board { padding-top: 18px; }
  .pik-ledger__head,
  .pick-observer__intro,
  .agenda-board__head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
  .pik-ledger__head nav { width: 100%; }
  .pik-ledger__head nav button { flex: 1; padding-inline: 8px; }
  .pik-ledger__lead { min-height: 270px; padding: 23px 20px; }
  .pik-ledger__lead > strong { font-size: 2rem; }
  .pik-ledger__list a { grid-template-columns: 26px minmax(0, 1fr) 14px; }
  .pik-ledger__list em { grid-column: 2; justify-self: start; }
  .pik-ledger__list .icon { grid-column: 3; grid-row: 1 / span 2; }
  .pick-observer__intro { padding: 23px 19px; }
  .pick-observer__intro dl { padding: 15px 0 0; border-top: 1px solid var(--ui-line); border-left: 0; }
  .pick-observer__grid { grid-template-columns: minmax(0, 1fr); }
  .agenda-board__grid { grid-template-columns: minmax(0, 1fr); }
  .agenda-group#updates-today,
  .agenda-group#updates-deadline,
  .agenda-group#updates-upcoming,
  .agenda-group#updates-news { grid-column: 1; }
}

/* Notifications stay calm and task-oriented; My already owns the expressive identity surface. */
.notification-center { width: min(1240px, 100%); gap: 22px; padding: 30px 0 48px; }
.notification-center__hero {
  min-height: 0;
  padding: 30px 4px 25px;
  overflow: visible;
  border: 0;
  border-top: 2px solid var(--ui-ink);
  border-bottom: 1px solid var(--ui-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
}
.notification-center__mark { width: 48px; height: 48px; border-color: var(--ui-line-strong); border-radius: 50%; background: var(--ui-paper); color: var(--ui-ink); }
.notification-center__identity .eyebrow { color: var(--ui-dim); }
.notification-center__identity h1 { margin: 0; color: var(--ui-ink); font-size: clamp(1.35rem, 2vw, 1.75rem); }
.notification-center__identity p { color: var(--ui-dim); }
.notification-center__summary dl { gap: 22px; }
.notification-center__summary dl > div { min-width: 64px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.notification-center__summary dt { color: var(--ui-dim); }
.notification-center__summary dd { color: var(--ui-ink); font-size: 1.35rem; }
.notification-center__summary .text-button { min-height: 40px; border-color: var(--ui-line-strong); color: var(--ui-ink); }
.notification-center__hero > small { color: var(--ui-dim); }
.notification-center__list { border-radius: 7px; box-shadow: none; }
.notification-center__group > header { padding-inline: 0; }
.notification-center__group > header span { border: 1px solid var(--ui-line); border-radius: 50%; background: transparent; }
.notification-row { padding-inline: 16px; }
.notification-row.is-unread { background: var(--ui-paper); box-shadow: inset 3px 0 0 var(--ui-ink); }
.notification-row__icon { border: 1px solid var(--ui-line); border-radius: 50%; background: transparent; color: var(--ui-dim); }
.notification-row__icon[data-tone="conversation"],
.notification-row__icon[data-tone="management"],
.notification-row__icon[data-tone="safety"] { background: transparent; color: var(--ui-ink); }
.notification-row__state,
.notification-row.is-unread .notification-row__state { border-radius: 4px; background: var(--ui-paper-2); color: var(--ui-dim); }

@media (max-width: 700px) {
  .notification-center { padding-top: 18px; }
  .notification-center__hero { padding: 23px 0 20px; border-radius: 0; }
  .notification-center__summary dl { gap: 16px; }
  .notification-center__list { border-radius: 6px; }
}

/* Manager entry is a launchpad. It should not resemble a public discovery page. */
.manager-launchpad { display: grid; gap: 18px; padding: 32px 0 48px; }
.manager-launchpad > header { min-height: 210px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 36px; padding: 36px 40px; border: 1px solid var(--ui-line-strong); border-left: 6px solid var(--ui-ink); background: var(--ui-paper); }
.manager-launchpad > header h1 { max-width: 800px; margin: 7px 0 9px; font-size: clamp(2rem, 3.5vw, 3.55rem); line-height: 1.08; letter-spacing: -.047em; word-break: keep-all; }
.manager-launchpad > header p { max-width: 720px; margin: 0; color: var(--ui-dim); line-height: 1.7; word-break: keep-all; }
.manager-launchpad > header > strong { display: grid; justify-items: end; color: var(--ui-ink); font-size: 2.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.manager-launchpad > header > strong span { margin-top: 7px; color: var(--ui-dim); font-size: .66rem; font-weight: 750; }
.manager-launchpad__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 360px); align-items: start; gap: 18px; }
.manager-launchpad__choices { display: grid; gap: 10px; }
.manager-launchpad__choices > h2 { margin: 0 0 4px; font-size: .92rem; }
.manager-launchpad__community { min-height: 102px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 18px; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--ui-line); background: var(--ui-paper); }
.manager-launchpad__community:hover { border-color: var(--ui-ink); }
.manager-launchpad__community .entity-icon { width: 54px; height: 54px; border-radius: 10px; }
.manager-launchpad__community span { min-width: 0; }
.manager-launchpad__community small,
.manager-launchpad__community strong,
.manager-launchpad__community em { display: block; }
.manager-launchpad__community small { color: var(--ui-dim); font-size: .6rem; font-weight: 850; letter-spacing: .08em; }
.manager-launchpad__community strong { margin-top: 4px; font-size: 1rem; }
.manager-launchpad__community em { margin-top: 4px; color: var(--ui-dim); font-size: .68rem; font-style: normal; }
.manager-launchpad__community > .icon { width: 16px; color: var(--ui-dim); }
.manager-launchpad__body > aside { padding: 20px; border-top: 2px solid var(--ui-ink); background: var(--ui-paper-2); }
.manager-launchpad__body > aside > span { color: var(--ui-dim); font-size: .68rem; font-weight: 850; }
.manager-launchpad__body > aside ol { display: grid; gap: 0; margin: 13px 0 0; padding: 0; list-style: none; }
.manager-launchpad__body > aside li { min-height: 58px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; border-top: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .72rem; line-height: 1.5; }
.manager-launchpad__body > aside b { color: var(--ui-ink); font-size: .62rem; }

@media (max-width: 820px) {
  .manager-launchpad__body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .manager-launchpad { padding-top: 18px; }
  .manager-launchpad > header { min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 25px 20px; }
  .manager-launchpad > header > strong { justify-items: start; }
  .manager-launchpad__community { grid-template-columns: 46px minmax(0, 1fr) 16px; padding: 14px; }
  .manager-launchpad__community .entity-icon { width: 46px; height: 46px; }
}

/* Policy pages behave like a reference library, with a persistent local index. */
.policy-library { display: grid; gap: 22px; padding: 32px 0 50px; }
.policy-library__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; padding: 30px 0 25px; border-top: 2px solid var(--ui-ink); border-bottom: 1px solid var(--ui-line-strong); }
.policy-library__head h1 { max-width: 820px; margin: 7px 0 9px; font-size: clamp(2rem, 3.2vw, 3.35rem); line-height: 1.1; letter-spacing: -.045em; word-break: keep-all; }
.policy-library__head p { max-width: 760px; margin: 0; color: var(--ui-dim); line-height: 1.7; word-break: keep-all; }
.policy-library__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 24px; }
.policy-library__layout > aside { position: sticky; top: calc(var(--ui-header) + 20px); padding: 18px 0; border-top: 2px solid var(--ui-ink); border-bottom: 1px solid var(--ui-line); }
.policy-library__layout > aside > span { color: var(--ui-dim); font-size: .66rem; font-weight: 850; }
.policy-library__layout > aside nav { display: grid; margin-top: 10px; }
.policy-library__layout > aside nav a { min-height: 42px; display: flex; align-items: center; border-top: 1px solid var(--ui-line); font-size: .73rem; font-weight: 780; }
.policy-library__layout > aside nav a:hover { padding-left: 5px; color: var(--ui-signal); }
.policy-library__layout > aside p { margin: 16px 0 0; color: var(--ui-dim); font-size: .66rem; line-height: 1.65; }
.policy-library__content { gap: 12px; }
.policy-library__content > div { min-width: 0; scroll-margin-top: calc(var(--ui-header) + 20px); }
.policy-library__content .signal-section { height: 100%; border-radius: 5px; box-shadow: none; }
.policy-library__content .section-head { border-bottom: 1px solid var(--ui-line); }
.policy-library__content .legal-copy { max-width: none; }
.legal-document-nav {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 0 22px;
  border-top: 1px solid var(--ui-line-strong); border-bottom: 1px solid var(--ui-line);
}
.legal-document-nav a {
  min-height: 38px; padding: 8px 11px; display: inline-flex; align-items: center;
  border: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .72rem; font-weight: 780;
}
.legal-document-nav a[aria-current="page"] { border-color: var(--ui-signal); color: var(--ui-signal); }
.legal-document-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.legal-document-cards article { min-width: 0; padding: 18px; border: 1px solid var(--ui-line); }
.legal-document-cards h3 { margin: 0 0 8px; font-size: 1rem; }
.legal-document-cards p { min-height: 3.2em; margin: 0 0 14px; color: var(--ui-dim); font-size: .8rem; line-height: 1.6; }
.legal-table-wrap { max-width: 100%; margin-top: 16px; overflow-x: auto; }
.legal-table-wrap table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .75rem; line-height: 1.55; }
.legal-table-wrap th, .legal-table-wrap td { padding: 10px; border: 1px solid var(--ui-line); text-align: left; vertical-align: top; }
.legal-table-wrap th { background: var(--ui-paper-2); }

/* About keeps its story scenes, but removes the repeated floating-card treatment. */
.about-intro { min-height: 340px; padding: clamp(32px, 5vw, 62px); border: 1px solid var(--ui-line-strong); border-radius: 8px; background: var(--ui-paper); box-shadow: none; }
.about-intro h1 { max-width: 15ch; font-size: clamp(2.35rem, 4.3vw, 4.6rem); line-height: 1.02; word-break: keep-all; text-wrap: balance; }
.about-brand-poster { border: 1px solid var(--ui-line); border-radius: 6px; box-shadow: none; }
.about-brand-poster figcaption { left: 0; right: 0; bottom: 0; padding: 12px 16px; border-radius: 0; background: var(--ui-paper); box-shadow: none; }
.about-scenes { gap: 10px; margin-top: 10px; }
.about-scene { min-height: 250px; grid-template-columns: minmax(230px, .66fr) minmax(0, 1.34fr); padding: clamp(25px, 4vw, 48px); border: 1px solid var(--ui-line); border-left: 4px solid #58708d; border-radius: 7px; background: var(--ui-paper); box-shadow: none; }
.about-scene:nth-child(2) { border-left-color: #9b684b; background: var(--ui-paper); }
.about-scene:nth-child(3) { border-left-color: #7c5b78; background: var(--ui-paper); }
.about-scene:nth-child(4) { border-left-color: #547768; background: var(--ui-paper); }
.about-scene:nth-child(5) { border-left-color: #9a544d; background: var(--ui-paper); }
.about-scene:nth-child(even) { grid-template-columns: minmax(0, 1.34fr) minmax(230px, .66fr); }
.about-scene:nth-child(even) .about-scene__copy { order: 2; }
.about-scene:nth-child(even) .about-scene__preview { order: 1; }
.about-scene__preview { border: 1px solid var(--ui-line); border-radius: 5px; background: var(--ui-paper-2); box-shadow: none; }
.about-games-preview { display: grid; gap: 12px; padding: clamp(22px, 4vw, 46px); border: 1px solid #343a40; background: #1b2025; color: #f5f6f7; }
.about-games-preview span { color: #ee765f; font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
.about-games-preview strong { max-width: 22ch; font-size: clamp(1.35rem, 2.5vw, 2.35rem); line-height: 1.18; letter-spacing: -.035em; }
.about-games-preview small { color: #bdc2c7; font-size: .78rem; line-height: 1.55; }

@media (max-width: 820px) {
  .policy-library__layout { grid-template-columns: minmax(0, 1fr); }
  .policy-library__layout > aside { position: static; }
  .policy-library__layout > aside nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-library__layout > aside nav a { padding-right: 10px; }
}

@media (max-width: 700px) {
  .policy-library { padding-top: 18px; }
  .policy-library__head { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 23px; }
  .policy-library__content { grid-template-columns: minmax(0, 1fr); }
  .legal-document-cards { grid-template-columns: minmax(0, 1fr); }
  .about-intro { padding: 27px 20px; border-radius: 6px; }
  .about-intro h1 { font-size: clamp(2.25rem, 11vw, 3.1rem); }
  .about-scene,
  .about-scene:nth-child(even) { grid-template-columns: minmax(0, 1fr); padding: 25px 19px; border-radius: 5px; }
  .about-scene:nth-child(even) .about-scene__copy,
  .about-scene:nth-child(even) .about-scene__preview { order: initial; }
}

/* A wrong address still offers useful exits instead of the old empty card. */
.missing-route {
  width: min(1120px, 100%);
  min-height: 460px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: stretch;
  margin-inline: auto;
  border-block: 1px solid var(--ui-line-strong);
  background: var(--ui-paper);
}
.missing-route > aside { display: grid; align-content: center; gap: 7px; padding: 34px; border-right: 1px solid var(--ui-line); }
.missing-route > aside strong { font-size: clamp(3.4rem, 7vw, 6rem); line-height: .9; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.missing-route > aside span { color: var(--ui-dim); font-size: .7rem; font-weight: 800; }
.missing-route > div { display: grid; align-content: center; justify-items: start; padding: clamp(34px, 6vw, 82px); }
.missing-route h1 { max-width: 680px; margin: 8px 0 11px; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.08; letter-spacing: -.05em; word-break: keep-all; }
.missing-route p { max-width: 620px; margin: 0; color: var(--ui-dim); line-height: 1.7; word-break: keep-all; }
.missing-route nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 27px; }
.missing-route nav a { justify-content: center; min-width: 108px; }

@media (max-width: 700px) {
  .missing-route { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .missing-route > aside { grid-template-columns: auto minmax(0, 1fr); align-items: end; padding: 24px 20px; border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .missing-route > aside strong { font-size: 3.2rem; }
  .missing-route > div { padding: 34px 20px 42px; }
  .missing-route nav { width: 100%; }
  .missing-route nav a { flex: 1; min-width: 0; }
}

/* ==========================================================================
   Staging feedback pass: denser desktop IA, plain-language states, flat color.
   ========================================================================== */

/* LIVE connection expands inside the stage so every control stays clickable. */
.live-portal .live-stage { position: relative; overflow: visible; }
.live-portal .live-stage .live-hero { overflow: visible; z-index: 4; }
.live-portal .live-stage .live-hero__actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  justify-content: start;
}
.live-portal .live-stage .live-hero__actions > * { min-width: 0; }
.live-portal .live-stage .live-share-panel { width: 100%; }
.live-portal .live-stage .live-share-panel[open] { grid-column: 1 / -1; z-index: 20; }
.live-portal .live-stage .live-share-panel__body {
  position: static;
  width: 100%;
  max-height: none;
  margin-top: 8px;
  overflow: visible;
}

/* A short real ranking shares its row with a useful next destination. */
.home-rank-band {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr);
  gap: 14px;
}
.home-rank-band > .home-live-ranking { min-width: 0; }
.home-rank-companion {
  min-width: 0;
  display: grid;
  align-content: center;
  padding: 24px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 10px;
  background: #20242a;
  color: #f4f5f6;
}
.home-rank-companion .eyebrow { color: #b9bec3; }
.home-rank-companion h2 { margin: 8px 0 9px; font-size: clamp(1.1rem, 1.8vw, 1.55rem); line-height: 1.25; letter-spacing: -.035em; word-break: keep-all; }
.home-rank-companion p { max-width: 45ch; margin: 0; color: #b9bec3; font-size: .76rem; line-height: 1.65; word-break: keep-all; }
.home-rank-companion nav { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.home-rank-companion a { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #454b52; border-radius: 7px; color: #fff; font-size: .72rem; font-weight: 800; }
.home-rank-companion a:hover { border-color: #f2f3f4; background: #2a3036; }
.home-rank-companion .icon { width: 13px; }

/* Official information is a plain user-facing library, including Pack detail. */
.pack-official-portal { display: grid; gap: 14px; }
.pack-official-masthead { min-height: 210px; border-radius: 10px; background: #20242a; }
.pack-official-masthead h1 { color: #f5f6f7; }
.pack-official-masthead .eyebrow,
.pack-official-masthead p,
.pack-official-masthead > aside { color: #c7cbd0; }
.pack-official-masthead > aside strong { color: #f5f6f7; }
.pack-official-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-paper);
}
.pack-official-empty h2 { margin: 7px 0 8px; font-size: clamp(22px, 2.3vw, 34px); letter-spacing: -.035em; }
.pack-official-empty p { max-width: 660px; margin: 0; color: var(--ui-dim); font-size: 14px; line-height: 1.75; }
.pack-official-empty nav { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

@media (max-width: 720px) {
  .pack-official-empty { grid-template-columns: 1fr; align-items: start; gap: 18px; padding: 20px; }
  .pack-official-empty nav { align-items: stretch; flex-direction: column; white-space: normal; }
  .pack-official-empty nav a { justify-content: center; }
}
.official-board-grid--pack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.official-board-grid--pack > :first-child { grid-column: 1 / -1; }

/* Top Pik has one compact honest zero state, not an empty billboard. */
.pik-ledger__empty {
  min-height: 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--ui-line-strong);
}
.pik-ledger__empty-card {
  min-height: 132px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 20px 22px;
  border: 1px solid var(--ui-line);
  background: var(--ui-paper);
}
.pik-ledger__empty-mark { height: 62px; display: grid; place-items: center; border: 1px solid var(--ui-line-strong); color: var(--ui-dim); font-size: .72rem; font-weight: 900; }
.pik-ledger__empty strong { display: block; font-size: 1.05rem; }
.pik-ledger__empty p { max-width: 58ch; margin: 7px 0 0; color: var(--ui-dim); font-size: .78rem; line-height: 1.6; }
.pik-ledger__empty .text-button { white-space: nowrap; }

/* Post detail becomes a reading page with a persistent community rail. */
main.content:has(> .post-context-nav) { width: min(1480px, calc(100% - 48px)); }
.post-context-nav { width: min(1380px, 100%); margin-inline: auto; }
.post-context-nav__links { width: 100%; display: flex; align-items: center; gap: 8px; }
.post-context-nav__links a { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-paper); }
.post-reading-layout {
  width: min(1380px, 100%);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
  align-items: start;
  gap: 16px;
  margin-inline: auto;
}
.post-reading-main { min-width: 0; display: grid; gap: 14px; }
.post-reading-main .post-detail,
.post-reading-main > .signal-section { margin: 0; border: 1px solid var(--ui-line); border-radius: 10px; box-shadow: none; }
.post-reading-main .post-detail { min-height: 420px; padding: clamp(28px, 4vw, 52px); }
.post-reading-main .post-body { min-height: 160px; font-size: .98rem; line-height: 1.85; }
.post-reading-main .post-actions { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--ui-line); }
.post-reading-main .post-action,
.post-reading-main .pik-button { border-radius: 7px; }
.post-reading-main .comment-composer { margin-top: 16px; padding: 20px; border-radius: 8px; background: var(--ui-paper-2); }
.post-reading-main .comment-composer__head { align-items: start; }
.post-reading-rail { position: sticky; top: calc(var(--ui-header) + 18px); min-width: 0; display: grid; gap: 12px; }
.post-scope-card { padding: 20px; border: 1px solid #33383e; border-radius: 9px; background: #20242a; color: #f4f5f6; }
.post-scope-card > div { display: flex; align-items: center; gap: 11px; margin-top: 12px; }
.post-scope-card > div strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; white-space: nowrap; }
.post-scope-card > p { margin: 8px 0 15px 43px; color: #b9bec3; font-size: .74rem; }
.post-scope-card nav { display: grid; border-top: 1px solid #3b4147; }
.post-scope-card nav a { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #3b4147; color: #eef0f2; font-size: .74rem; font-weight: 800; }
.post-scope-card nav .icon { width: 13px; color: #aeb4ba; }
.post-reading-rail > .same-channel-board { margin: 0; padding: 15px; border: 1px solid var(--ui-line); border-radius: 9px; box-shadow: none; }
.post-reading-rail .same-channel-board .section-head { align-items: start; }
.post-reading-rail .community-feed-tabs,
.post-reading-rail .community-feed-sort { overflow-x: auto; flex-wrap: nowrap; }
.post-reading-rail .board-row { border-radius: 6px; }
.post-reading-rail .post-ad-rail { position: static; }

/* Emote library actions are explicit at both card and detail level. */
.emote-set-card__footer { justify-content: stretch; }
.emote-set-card__footer > * { width: 100%; }
.emote-set-card__library { min-height: 40px; border-radius: 7px; }
.emote-set-card__status--included,
.emote-library-state { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid var(--ui-line-strong); border-radius: 7px; background: var(--ui-paper-2); color: var(--ui-ink); font-size: .72rem; font-weight: 850; }
.emote-hero__included { min-height: 42px; display: inline-flex; align-items: center; padding: 0 13px; border-left: 2px solid #f2b9a8; color: #dedde9; font-size: .72rem; font-weight: 750; }

/* Business intake: choose a lane first, then fill only that lane's form. */
.business-portal { width: min(1320px, 100%); display: grid; gap: 14px; margin-inline: auto; }
.business-intro { min-height: 230px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; padding: clamp(30px, 4vw, 52px); border: 1px solid #343a40; border-radius: 10px; background: #20242a; color: #f5f6f7; }
.business-intro h1 { max-width: 780px; margin: 8px 0 10px; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.06; letter-spacing: -.045em; word-break: keep-all; white-space: nowrap; }
.business-intro p { max-width: 700px; margin: 0; color: #bdc2c7; line-height: 1.7; word-break: keep-all; }
.business-intro > a { min-height: 43px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid #555d65; border-radius: 7px; color: #fff; font-size: .76rem; font-weight: 800; }
.business-jump { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ui-line-strong); background: var(--ui-paper); scroll-margin-top: calc(var(--ui-header) + 12px); }
.business-jump > a { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 11px; padding: 16px 18px; border-left: 1px solid var(--ui-line); }
.business-jump > a:first-child { border-left: 0; }
.business-jump b { color: var(--ui-dim); font: 800 .68rem/1 var(--mono); }
.business-jump span { min-width: 0; display: grid; gap: 4px; }
.business-jump strong { font-size: .9rem; }
.business-jump small { overflow: hidden; color: var(--ui-dim); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.business-jump > a:hover { background: var(--ui-paper-2); }
.business-lanes { display: grid; gap: 14px; }
.business-lane { display: grid; grid-template-columns: minmax(250px, .42fr) minmax(0, 1fr); align-items: start; border: 1px solid var(--ui-line-strong); background: var(--ui-paper); scroll-margin-top: calc(var(--ui-header) + 18px); }
.business-lane > aside { position: sticky; top: calc(var(--ui-header) + 18px); min-height: 230px; padding: 26px; border-right: 1px solid var(--ui-line); }
.business-lane > aside > span { color: var(--ui-dim); font: 800 .68rem/1 var(--mono); }
.business-lane > aside h2 { margin: 28px 0 10px; font-size: 1.45rem; letter-spacing: -.035em; }
.business-lane > aside p { margin: 0; color: var(--ui-dim); font-size: .76rem; line-height: 1.65; word-break: keep-all; }
.business-lane__body { min-width: 0; padding: 24px; }
.business-lane__body > .legal-copy:first-child { margin-top: 0; }
.business-lane .intake-form { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 20px; padding: 20px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper-2); }
.business-lane .intake-form > label { min-width: 0; }
.business-lane .intake-form > label:has(textarea),
.business-lane .intake-form > .intake-purpose,
.business-lane .intake-form > button,
.business-lane .intake-form > .intake-result { grid-column: 1 / -1; }
.business-lane .intake-form > button { justify-self: end; min-width: 130px; }
.business-campaign-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.business-campaign-guide strong { display: block; font-size: .9rem; }
.business-campaign-guide p { max-width: 58ch; margin: 5px 0 0; color: var(--ui-dim); font-size: .73rem; line-height: 1.55; word-break: keep-all; }
.business-campaign-guide .solid-button { border-color: #24282d; background: #24282d; color: #fff; }
.business-campaign-state { margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--ui-line-strong); color: var(--ui-dim); font-size: .73rem; line-height: 1.65; }

/* PacPik Games zero state: flat storefront map, no violet glow or fake artwork. */
.games-discovery {
  --games-home-bg: #111214;
  --games-home-panel: #191b1f;
  --games-home-panel-2: #202329;
  --games-home-line: #373b42;
  --games-home-muted: #aeb3ba;
  --games-home-accent: #ff7651;
  --games-home-accent-2: #ff7651;
  background: var(--games-home-bg);
  box-shadow: 0 0 0 100vmax var(--games-home-bg);
}
.games-discovery .games-local-header { border-bottom-color: #363a40; background: #111214; }
.games-discovery .games-local-header nav a:hover,
.games-discovery .games-local-header nav a[aria-current="page"] { border-bottom-color: #ff7651; }
.games-discovery .games-local-apply { border-color: #555b62; }
.games-discovery .games-local-apply span,
.games-discovery .games-kicker { color: #ff9a7d; }
.games-discovery .games-local-apply:hover,
.games-discovery .games-local-apply[aria-current="page"] { border-color: #ff7651; background: #24272c; }
.games-discovery .games-button { border-color: #ff7651; background: #ff7651; color: #161718; }
.games-discovery .games-button:hover { border-color: #ff9679; background: #ff9679; }
.games-showcase {
  min-height: 0;
  padding: 30px 0 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  overflow: visible;
  border-bottom-color: #393d43;
  background: #111214;
}
.games-showcase::after { display: none; }
.games-showcase__identity {
  position: static;
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  padding: 0 4px;
}
.games-showcase__identity > div:first-child { display: block; margin: 0; }
.games-showcase__identity h1 { max-width: 720px; margin: 7px 0 0; color: #f5f6f7; font-size: clamp(1.75rem, 2.35vw, 2.5rem); line-height: 1.12; letter-spacing: -.04em; word-break: keep-all; white-space: nowrap; }
.games-showcase__identity p { max-width: 690px; margin: 10px 0 0; color: #b9bec4; font-size: .83rem; line-height: 1.65; word-break: keep-all; }
.games-showcase__identity small { display: block; margin-top: 3px; color: #858b92; font-size: .66rem; }
.games-showcase__identity > .games-showcase__identity-actions { flex: none; display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; margin: 0; }
.games-showcase__identity-actions .button-secondary { border-color: #555b62; background: #191b1f; color: #f5f6f7; }
.games-showcase__feature {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(330px, .72fr);
  overflow: hidden;
  border: 1px solid #43474e;
  border-radius: 8px;
  background: #f3f1ec;
}
.games-showcase__art {
  position: relative;
  z-index: 0;
  inset: auto;
  min-height: 390px;
  display: block;
  overflow: hidden;
  border-right: 1px solid #c9c7c1;
  background: #24272c;
}
.games-showcase__art::after { display: none; }
.games-showcase__art img { width: 100%; height: 100%; display: block; object-fit: cover; transform: none; }
.games-showcase__art-label { position: absolute; left: 14px; bottom: 14px; min-height: 27px; display: inline-flex; align-items: center; padding: 0 9px; border: 1px solid rgb(255 255 255 / 48%); border-radius: 4px; background: rgb(17 18 20 / 86%); color: #fff; font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.games-showcase__game {
  position: static;
  width: auto;
  min-width: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #17181a;
}
.games-showcase__tags span { border-color: #c9c7c1; background: #ebe8e1; color: #77402f; }
.games-showcase__game h2 { margin: 15px 0 0; font-size: clamp(2rem, 3vw, 3.35rem); line-height: 1.05; letter-spacing: -.055em; word-break: keep-all; overflow-wrap: anywhere; }
.games-showcase__game h2 a:hover { color: #b74629; }
.games-showcase__developer { margin: 9px 0 0; color: #a83f25; font-size: .73rem; }
.games-showcase__description { max-width: 48ch; margin: 14px 0 0; color: #62656a; font-size: .78rem; line-height: 1.65; word-break: keep-all; }
.games-showcase__facts { margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #c9c7c1; border-bottom: 1px solid #c9c7c1; }
.games-showcase__facts div { min-width: 0; padding: 10px 8px 10px 0; }
.games-showcase__facts div + div { padding-left: 12px; border-left: 1px solid #c9c7c1; }
.games-showcase__facts dt { color: #777a7e; font-size: .59rem; font-weight: 800; }
.games-showcase__facts dd { margin: 4px 0 0; overflow: hidden; color: #27292c; font-size: .7rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.games-showcase__actions { margin-top: 18px; }
.games-showcase__actions > span { color: #6f7277; }
.games-showcase__actions > span b { color: #1b1c1e; }
.games-showcase .games-loop { position: static; width: 100%; border-color: #3d4147; background: #191b1f; }
.games-showcase .games-loop li { border-color: #3d4147; }
.games-showcase .games-loop b { color: #ff8c6b; }
.games-showcase .games-loop span { color: #d8dadd; }
.games-card__actions { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.games-card__actions a { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid #c5c9c7; border-radius: 4px; color: #35383a; font-size: .64rem; font-weight: 850; }
.games-card__actions .games-card__play { border-color: #c55738; background: #ff7651; color: #161718; }
.games-card__actions a:hover { border-color: #a7462c; color: #9c371f; }
.games-card__actions .games-card__play:hover { background: #ff9679; color: #161718; }
main.content:has(> .game-play-page) { width: min(1800px, calc(100% - 24px)); padding-top: 8px; }
.game-play-page { width: 100%; margin: 0 auto 36px; }
.game-play-layout {
  display: grid;
  grid-template-columns: clamp(112px, 10vw, 160px) minmax(0, 1fr) clamp(112px, 10vw, 160px);
  grid-template-areas: "top top top" "left game right";
  gap: 12px 16px;
}
.game-play-ad-space--top { grid-area: top; min-height: 72px; }
.game-play-ad-space--left { grid-area: left; }
.game-play-ad-space--right { grid-area: right; }
.game-play-workspace { grid-area: game; width: min(100%, 1240px); min-width: 0; justify-self: center; overflow: hidden; border: 1px solid #3c4147; border-radius: 8px; background: #191b1f; color: #f5f6f7; }
.game-play-toolbar { min-height: 54px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px 14px; border-bottom: 1px solid #3c4147; }
.game-play-toolbar > a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid #555b62; border-radius: 5px; color: #d7dadd; font-size: .72rem; font-weight: 800; }
.game-play-toolbar > div { min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.game-play-toolbar strong { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.game-play-toolbar small { overflow: hidden; color: #9ea4aa; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.game-play-stage { position: relative; background: #090a0c; }
.game-play-stage > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px 4px 14px; background: #111318; }
.game-play-stage > header strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.game-play-stage > header button { min-height: 40px; padding: 0 12px; border: 1px solid #555b62; border-radius: 4px; background: #202329; color: #fff; font: 800 .68rem/1 var(--sans); cursor: pointer; }
.game-play-stage iframe { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; border: 0; background: #000; }
.game-play-stage:fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  border-radius: 0;
  background: #000;
}
.game-play-stage:fullscreen iframe { width: 100%; height: 100%; min-height: 0; }
.game-play-launcher { min-height: min(70dvh, 720px); display: grid; place-content: center; justify-items: center; gap: 20px; padding: 30px; text-align: center; }
.game-play-launcher h1 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.05em; }
.game-play-launcher p { margin: 4px 0 0; color: #aeb3b8; }
.game-play-launcher .action-row { display: flex; justify-content: center; gap: 8px; }
.game-play-launcher .button { min-height: 48px; padding-inline: 20px; border-radius: 5px; }
.game-play-unavailable { min-height: 52dvh; display: grid; place-items: center; color: #adb2b8; }
.game-play-workspace .legal-links { min-height: 40px; display: flex; align-items: center; justify-content: end; gap: 14px; padding: 7px 14px; border-top: 1px solid #3c4147; }
.game-play-workspace .legal-links:empty { display: none; }
.game-play-workspace .legal-links a { color: #aeb4ba; font-size: .65rem; font-weight: 750; }
@media (max-width: 1180px) {
  .game-play-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "game";
  }
  .game-play-ad-space--left,
  .game-play-ad-space--right { display: none; }
}
.public-data-notice { min-height: 54px; margin: 14px 0; padding: 9px 12px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--ui-line-strong); border-left: 3px solid #d07858; border-radius: 7px; background: var(--ui-paper); }
.public-data-notice > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ui-paper-2); color: #a74b2c; }
.public-data-notice p { min-width: 0; margin: 0; display: grid; gap: 2px; }
.public-data-notice strong { font-size: .76rem; }
.public-data-notice small { color: var(--ui-dim); font-size: .67rem; line-height: 1.4; }
.public-data-notice a { min-height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--ui-line); border-radius: 6px; font-size: .68rem; font-weight: 800; }
.desktop-games-entry .nav-games,
.desktop-games-entry .nav-games[aria-current="page"] {
  border-color: #3d4147;
  background: #202226;
  box-shadow: none;
  transform: none;
}
.desktop-games-entry .nav-games:hover { border-color: #ff7651; background: #282b30; transform: none; }
.desktop-games-entry .nav-games .icon { color: #ff9476; }
.desktop-games-entry .nav-games small { border-color: #765044; color: #ffb29d; }
.games-zero-stage {
  min-height: 680px;
  padding: clamp(38px, 5vw, 72px) clamp(26px, 4.5vw, 70px) 30px;
  grid-template-columns: minmax(330px, .72fr) minmax(560px, 1.28fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 28px 5vw;
  overflow: visible;
  border-bottom-color: #393d43;
  background: #111214;
}
.games-zero-stage::before { display: none; }
.games-zero-stage__copy { align-self: center; }
.games-zero-stage h1 { max-width: 640px; margin-top: 18px; font-size: clamp(2.8rem, 4.3vw, 5.15rem); line-height: .98; }
.games-zero-stage__copy > p { max-width: 560px; margin: 22px 0 0; color: #bec2c8; font-size: .9rem; line-height: 1.72; word-break: keep-all; }
.games-zero-stage__actions .button-secondary { border-color: #4b5057; background: #191b1f; color: #f5f6f7; }
.games-zero-browser { align-self: center; min-width: 0; padding: 22px; border: 1px solid #43474e; border-radius: 9px; background: #f3f1ec; color: #17181a; }
.games-zero-browser > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); align-items: end; gap: 22px; padding-bottom: 17px; border-bottom: 1px solid #c9c7c1; }
.games-zero-browser > header span { color: #b74629; font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.games-zero-browser > header h2 { margin: 6px 0 0; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.045em; }
.games-zero-browser > header p { margin: 0; color: #686a6e; font-size: .72rem; line-height: 1.55; }
.games-zero-browser__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #c9c7c1; }
.games-zero-browser__groups article { position: relative; min-width: 0; min-height: 190px; display: grid; align-content: start; padding: 18px 16px; border-left: 1px solid #c9c7c1; }
.games-zero-browser__groups article:first-child { border-left: 0; }
.games-zero-browser__groups article > span { color: #8a4a38; font-size: .56rem; font-weight: 900; letter-spacing: .08em; }
.games-zero-browser__groups article > strong { margin-top: 10px; font-size: .95rem; }
.games-zero-browser__groups article > b { position: absolute; right: 14px; top: 15px; color: #8a8d91; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.games-zero-browser__groups article > p { margin: auto 0 0; color: #686a6e; font-size: .66rem; line-height: 1.55; word-break: keep-all; }
.games-zero-browser__waiting { min-height: 92px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 13px; padding: 15px 5px 0; }
.games-zero-browser__waiting > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #a9a7a1; }
.games-zero-browser__waiting strong { display: block; font-size: .78rem; }
.games-zero-browser__waiting p { margin: 4px 0 0; color: #686a6e; font-size: .65rem; line-height: 1.5; }
.games-zero-stage__loop { grid-column: 1; border-color: #3d4147; }
.games-zero-stage__loop li { border-color: #3d4147; }
.games-zero-stage__loop b { color: #ff8c6b; }
.games-zero-stage__recruit { grid-column: 2; border-color: #43474e; border-left-color: #ff7651; background: #1a1c20; }
.games-zero-stage__recruit > div > span { color: #ff9a7d; }
.games-zero-stage__recruit p { color: #aeb3ba; }
.games-zero-stage__recruit li { color: #c7cbd0; }
.games-zero-stage__copy,
.games-zero-browser,
.games-zero-stage__loop,
.games-zero-stage__recruit { animation-name: games-home-rise; }
.games-zero-browser { animation-duration: .68s; animation-delay: .13s; animation-fill-mode: both; }

@media (max-width: 980px) {
  .home-rank-band { grid-template-columns: minmax(0, 1fr); }
  .post-reading-layout { grid-template-columns: minmax(0, 1fr); }
  .post-reading-rail { position: static; grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr); }
  .post-reading-rail > .same-channel-board { min-width: 0; }
  .business-lane { grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr); }
  .games-zero-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .games-zero-stage__copy,
  .games-zero-browser,
  .games-zero-stage__loop,
  .games-zero-stage__recruit { grid-column: 1; }
  .games-zero-stage__recruit { grid-template-columns: minmax(0, 1fr) auto; }
  .games-showcase__feature { grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); }
  .games-showcase__art { min-height: 340px; }
}

@media (max-width: 700px) {
  .official-board-grid--pack { grid-template-columns: minmax(0, 1fr); }
  .official-board-grid--pack > :first-child { grid-column: auto; }
  .pik-ledger__empty-card { grid-template-columns: 48px minmax(0, 1fr); gap: 13px; padding: 16px; }
  .pik-ledger__empty-mark { height: 48px; }
  .pik-ledger__empty .text-button { grid-column: 1 / -1; justify-content: center; }
  main.content:has(> .post-context-nav) { width: min(100% - 24px, 1480px); }
  .post-reading-main .post-detail { min-height: 0; padding: 24px 18px; }
  .post-reading-main .post-body { min-height: 110px; }
  .post-reading-rail { grid-template-columns: minmax(0, 1fr); }
  .post-reading-rail > .same-channel-board { order: 2; }
  .business-intro { min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 28px 20px; }
  .business-jump { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .business-jump > a { min-width: 0; min-height: 72px; border-top: 1px solid var(--ui-line); border-left: 0; }
  .business-jump > a:first-child { border-top: 0; }
  .business-lane { grid-template-columns: minmax(0, 1fr); }
  .business-lane > aside { position: static; min-height: 0; padding: 20px; border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .business-lane > aside h2 { margin-top: 13px; }
  .business-lane__body { padding: 16px; }
  .business-lane .intake-form { grid-template-columns: minmax(0, 1fr); padding: 15px; }
  .business-lane .intake-form > * { grid-column: 1 !important; }
  .business-campaign-guide { grid-template-columns: minmax(0, 1fr); }
  .business-campaign-guide .solid-button { justify-content: center; }
  .games-zero-stage { min-height: 0; margin-inline: -12px; padding: 34px 18px 22px; gap: 24px; }
  .games-zero-stage h1 { font-size: clamp(2.45rem, 12vw, 3.3rem); }
  .games-zero-browser { padding: 16px; }
  .games-zero-browser > header { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .games-zero-browser__groups { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .games-zero-browser__groups article { min-width: min(72vw, 230px); scroll-snap-align: start; }
  .games-zero-stage__loop li { min-height: 52px; }
  .games-zero-stage__recruit { grid-template-columns: minmax(0, 1fr); }
  .games-zero-stage__recruit .button,
  .games-zero-stage__recruit ul { grid-column: 1; grid-row: auto; }
  .games-showcase { min-height: 0; margin-inline: -12px; padding: 24px 12px 20px; }
  .games-showcase__identity { position: static; width: auto; display: grid; align-items: start; gap: 16px; padding: 0 2px; }
  .games-showcase__identity h1 { font-size: clamp(1.75rem, 8.3vw, 2.35rem); line-height: 1.13; white-space: normal; }
  .games-showcase__identity > .games-showcase__identity-actions { justify-content: start; }
  .games-showcase__identity > .games-showcase__identity-actions .button { flex: 1 1 calc(50% - 4px); justify-content: center; padding-inline: 10px; }
  .games-showcase__feature { grid-template-columns: minmax(0, 1fr); }
  .games-showcase__art { min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid #c9c7c1; }
  .games-showcase__game { position: static; width: auto; padding: 20px 18px; }
  .games-showcase__game h2 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .games-showcase .games-loop { position: static; width: 100%; }
  main.content:has(> .game-play-page) { width: calc(100% - 12px); padding-top: 6px; }
  .game-play-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "game"; }
  .game-play-toolbar { grid-template-columns: auto minmax(0, 1fr); padding-inline: 8px; }
  .game-play-toolbar small { display: none; }
  .game-play-stage > header button { min-height: 44px; }
  .game-play-stage iframe { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .game-play-launcher { min-height: 62svh; padding: 22px 14px; }
  .game-play-launcher .action-row { width: 100%; }
  .game-play-launcher .button { width: 100%; justify-content: center; }
  .public-data-notice { grid-template-columns: 28px minmax(0, 1fr); }
  .public-data-notice a { grid-column: 2; justify-self: start; }
  .mobile-nav .nav-games,
  .mobile-nav .nav-games[aria-current="page"] { background: #202226; color: #fff; }
  .mobile-nav .nav-games[aria-current="page"]::before { background: #ff7651; }
}

/* 모바일 프레임은 폭 기반 16:9로 잠그지 않는다. 세로·가로 모두 실제 동적 뷰포트에서
   stage header와 하단 메뉴/safe area를 뺀 높이를 게임에 넘긴다. */
@media (max-width: 760px) {
  .game-play-stage iframe {
    height: max(200px, calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    min-height: 0;
    aspect-ratio: auto;
  }
}

@media (min-width: 761px) and (max-width: 980px) and (orientation: landscape) {
  .game-play-stage iframe {
    height: max(200px, calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    min-height: 0;
    aspect-ratio: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .games-zero-browser { animation: none; }
}

/* ============================================================
   PacPik LIVE — broadcast-first portal and consent-first watch
   ============================================================ */
.live-stage {
  display: grid;
  grid-template-columns: minmax(320px, .64fr) minmax(0, 1.36fr);
  gap: 14px;
  align-items: stretch;
}
.live-stage > .live-hero { height: 100%; }
.live-portal .live-hero {
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
  gap: 28px;
  padding: clamp(26px, 3.3vw, 42px);
  border: 1px solid #31373d;
  border-radius: 10px;
  background: #1b2025;
  box-shadow: none;
}
.live-portal .live-hero h1 { max-width: 12ch; font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: 1.08; }
.live-portal .live-hero__actions { width: 100%; max-width: 260px; align-self: end; }
.live-idle,
.live-upcoming {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--ui-line-strong);
  border-radius: 10px;
  background: var(--ui-paper);
}
.live-idle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; }
.live-idle span { color: #b32f3d; font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.live-idle h2 { max-width: 18ch; margin: 7px 0 9px; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.18; letter-spacing: -.035em; }
.live-idle p { max-width: 54ch; margin: 0; color: var(--ui-dim); font-size: .82rem; line-height: 1.65; }
.live-idle nav { display: grid; min-width: 190px; border-top: 1px solid var(--ui-line); }
.live-idle nav a { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ui-line); color: var(--ui-ink); font-size: .78rem; font-weight: 800; text-decoration: none; }
.live-idle nav .icon { width: 14px; }
.live-filter-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: -2px 0 16px; }
.live-filter-bar button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--ui-line);
  border-radius: 7px;
  background: var(--ui-paper-2);
  color: var(--ui-dim);
  font: 760 .74rem/1 var(--sans);
  cursor: pointer;
}
.live-filter-bar button[aria-pressed="true"] { border-color: #20262b; background: #20262b; color: #fff; }
.live-filter-bar b { min-width: 18px; padding: 3px 5px; border-radius: 3px; background: rgb(255 255 255 / 12%); font-size: .64rem; text-align: center; }
.live-filter-empty { margin: 16px 0 0; color: var(--ui-dim); font-size: .78rem; }
.external-live-card[hidden] { display: none !important; }
.live-external-section--priority .external-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.live-external-section--priority .external-live-grid--count-1 { grid-template-columns: minmax(0, 1fr); }
.live-external-section--priority .external-live-card--compact { border-radius: 9px; box-shadow: none; }
.live-external-section--priority .external-live-card--compact:hover { transform: translateY(-2px); box-shadow: none; }
.live-external-section--priority .external-live__thumb { aspect-ratio: 16 / 9; }
.live-relation-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.live-relation-chips a {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--ui-line);
  border-radius: 5px;
  background: var(--ui-paper);
  color: var(--ui-dim);
  font-size: .66rem;
  font-weight: 760;
  text-decoration: none;
}
.live-channel-row { border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper-2); }
.live-share-panel__body .live-channel-row { border-color: #38434b; background: #202a32; }
.live-channel-row > div:first-child > span { color: #ba3542; font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.live-channel-row small { display: flex; flex-wrap: wrap; gap: 3px 9px; }
.live-channel-row small > span { position: relative; white-space: nowrap; }
.live-channel-row > div:last-child { display: flex; align-items: center; gap: 6px; }
.external-live__player { position: relative; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #0d1115; }
.external-live__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-watch-mount { position: absolute; inset: 0; }
.live-watch-mount > iframe { width: 100%; height: 100%; }
.external-live__consent {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: stretch;
  background: #151a1f;
  color: #fff;
}
.external-live__consent > img,
.external-live__consent > span:first-child { width: 100%; height: 100%; min-height: 0; object-fit: cover; background: #232a30; }
.external-live__consent > span:first-child { display: grid; place-items: center; color: #aeb8bf; font-weight: 850; }
.external-live__consent > div { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: clamp(20px, 3vw, 38px); }
.external-live__consent > div > span { color: #ef6c76; font-size: .67rem; font-weight: 900; letter-spacing: .09em; }
.external-live__consent strong { font-size: clamp(1.15rem, 2vw, 1.65rem); line-height: 1.25; letter-spacing: -.025em; }
.external-live__consent p { margin: 0; color: #b6c0c6; font-size: .75rem; line-height: 1.6; }
.external-live__consent .solid-button { margin-top: 6px; }
.external-live__player--external { aspect-ratio: auto; min-height: 148px; background: #151a1f; }
.live-external-fallback { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 148px; color: #fff; }
.live-external-fallback > img,
.live-external-fallback > span:first-child { width: 100%; height: 100%; min-height: 148px; object-fit: cover; background: #232a30; }
.live-external-fallback > span:first-child { display: grid; place-items: center; color: #aeb8bf; font-size: .76rem; font-weight: 850; }
.live-external-fallback > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center; gap: 7px 18px; padding: 22px 24px; }
.live-external-fallback > div > span { grid-column: 1 / -1; color: #ef6c76; font-size: .67rem; font-weight: 900; letter-spacing: .09em; }
.live-external-fallback strong { font-size: clamp(.95rem, 1.5vw, 1.2rem); line-height: 1.35; }
.live-external-fallback .solid-button { margin: 0; white-space: nowrap; }
.live-watch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.live-watch-actions .text-button { color: #d9e0e4; }
.live-watch-loading { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: #11161a; color: #dce3e6; font-size: .78rem; }
.live-watch-fallback { height: 100%; display: grid; place-content: center; justify-items: start; gap: 9px; padding: clamp(22px, 5vw, 54px); }
.live-watch-fallback p { max-width: 52ch; margin: 0; color: #afbbc2; font-size: .78rem; line-height: 1.6; }
.live-detail-layout > div { padding: 0; overflow: hidden; border-radius: 10px; }
.live-detail-layout > aside { border: 1px solid var(--ui-line); border-radius: 10px; box-shadow: none; }
.live-detail-layout .external-live-card__body { padding: 16px 20px 20px; }
.live-detail-layout .external-live-card__body > .live-card-actions { display: none; }
.pack-live-stage {
  margin: 14px 0;
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid var(--ui-line-strong);
  border-radius: 10px;
  background: var(--ui-paper);
}
.pack-live-stage > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.pack-live-stage h2 { margin: 6px 0 4px; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -.035em; }
.pack-live-stage header p { max-width: 60ch; margin: 0; color: var(--ui-dim); font-size: .75rem; line-height: 1.55; }
.pack-live-stage > header > a { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-ink); font-size: .75rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.pack-live-stage .external-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pack-live-stage .external-live-card--compact { grid-template-columns: minmax(0, 1fr); border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper-2); }
.pack-live-stage .external-live__thumb { aspect-ratio: 16 / 8; }
.creator-live-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: 22px; margin-bottom: 18px; padding: 18px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-paper-2); }
.creator-live-intro h3 { margin: 5px 0 7px; font-size: 1.15rem; }
.creator-live-intro p { max-width: 64ch; margin: 0; color: var(--ui-dim); font-size: .76rem; line-height: 1.65; }
.creator-live-intro ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.creator-live-intro li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 7px; padding: 9px; border-bottom: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .7rem; }
.creator-live-intro li b { color: #b42f3d; }
.streamer-brand small { color: #84939c; font-size: .68rem; font-weight: 650; }
.streamer-slide::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: var(--streamer-art); background-size: cover; background-position: center; opacity: .2; }
@media (min-width: 1280px) {
  .live-external-section--priority .external-live-grid--count-3,
  .live-external-section--priority .external-live-grid--count-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .live-stage { grid-template-columns: minmax(0, 1fr); }
  .live-portal .live-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .pack-live-stage .external-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .live-portal .live-hero { grid-template-columns: minmax(0, 1fr); }
  .live-idle { grid-template-columns: minmax(0, 1fr); }
  .live-idle nav { min-width: 0; }
  .live-filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .live-filter-bar button { flex: none; }
  .external-live__consent { position: relative; grid-template-columns: minmax(0, 1fr); }
  .external-live__consent > img,
  .external-live__consent > span:first-child { aspect-ratio: 16 / 9; height: auto; }
  .live-external-fallback { grid-template-columns: 112px minmax(0, 1fr); min-height: 112px; }
  .live-external-fallback > img,
  .live-external-fallback > span:first-child { min-height: 112px; }
  .live-external-fallback > div { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 15px; }
  .live-external-fallback > div > span { grid-column: auto; }
  .live-external-fallback strong { font-size: .85rem; }
  .live-external-fallback .solid-button { width: fit-content; min-height: 38px; padding: 9px 12px; }
  .external-live__player { aspect-ratio: auto; }
  .external-live__player iframe { position: relative; aspect-ratio: 16 / 9; }
  .pack-live-stage > header { align-items: flex-start; flex-direction: column; }
  .pack-live-stage .external-live-grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .pack-live-stage .external-live-card { min-width: min(78vw, 290px); scroll-snap-align: start; }
  .creator-live-intro { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Detail pass — readable Korean, complete routes, one clear action
   ============================================================ */
.live-portal .live-hero h1 {
  max-width: 16ch;
  font-size: clamp(2rem, 3.15vw, 3.25rem);
  line-height: 1.12;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}
.live-portal .live-hero p,
.live-idle h2,
.live-idle p { word-break: keep-all; overflow-wrap: normal; }
.live-portal .live-hero__actions { max-width: 310px; }
.live-portal .live-hero__actions summary,
.live-portal .live-hero__actions a { white-space: nowrap; word-break: keep-all; }
.live-stage--idle { grid-template-columns: minmax(390px, .78fr) minmax(0, 1.22fr); }
.live-stage--idle > .live-hero,
.live-stage--idle > .live-idle { min-height: 330px; }
.live-stage--idle .live-idle { align-content: center; align-items: center; }
.live-idle h2 { max-width: 24ch; font-size: clamp(1.45rem, 2.2vw, 2.05rem); line-height: 1.22; text-wrap: balance; }
.live-browse-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--ui-line-strong);
}
.live-browse-paths a {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 5px 12px;
  padding: 19px 22px;
  border-left: 1px solid var(--ui-line);
  color: var(--ui-ink);
  text-decoration: none;
}
.live-browse-paths a:first-child { border-left: 0; }
.live-browse-paths a > span { grid-row: 1 / span 2; color: #b42f3d; font: 850 .68rem/1 var(--mono); }
.live-browse-paths a > strong { min-width: 0; font-size: .9rem; word-break: keep-all; }
.live-browse-paths a > small { min-width: 0; color: var(--ui-dim); font-size: .7rem; line-height: 1.45; word-break: keep-all; }
.live-browse-paths a > .icon,
.live-browse-paths a > b { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 14px; color: var(--ui-dim); }
.live-official-overview { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); }
.live-official-overview .live-section-title { margin-bottom: 14px; }
.live-official-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.live-portal .live-flow-grid--single { grid-template-columns: minmax(0, 1fr); }
.live-flow-grid--single .live-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.live-flow-grid--single .live-trend-card { min-height: 62px; }
.live-compact-empty { display: grid; gap: 5px; padding: 17px 0 3px; border-top: 1px solid var(--ui-line); }
.live-compact-empty strong { font-size: .84rem; }
.live-compact-empty span { color: var(--ui-dim); font-size: .74rem; line-height: 1.55; }

#home-content { scroll-margin-top: calc(var(--ui-header) + 20px); }

/* Home modules share one header baseline. The label and arrow are one hit area,
   not two unrelated inline glyphs that happen to sit near each other. */
.home-command-deck > .home-feature-live > header,
.home-official-split > .home-official-radar > header {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  margin-bottom: 7px;
}
.home-command-deck > .home-feature-live > header > div,
.home-official-split > .home-official-radar > header > div { min-width: 0; }
.home-module-link {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 1px 0 0;
  color: var(--ui-dim);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.home-module-link > span { display: block; line-height: 1; }
.home-module-link > .icon { flex: 0 0 13px; width: 13px; height: 13px; display: block; }
.home-feature-live .home-module-link { color: var(--ui-dim); }
.home-module-link:hover { color: var(--ui-ink); }

.games-zero-stage h1 {
  max-width: 13ch;
  font-size: clamp(2.7rem, 4.2vw, 4.6rem);
  line-height: 1.08;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.official-cluster { display: grid; gap: 12px; padding-top: 10px; }
.official-cluster + .official-cluster { margin-top: 14px; padding-top: 24px; border-top: 1px solid var(--ui-line-strong); }
.official-cluster > header { display: flex; align-items: end; justify-content: space-between; }
.official-cluster > header h2 { margin: 5px 0 0; font-size: 1.28rem; letter-spacing: -.03em; }
.official-board-grid--schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.official-board-grid--schedule .official-board { min-height: 180px; }
.official-board-grid--discovery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.event-detail { width: min(1240px, 100%); margin-inline: auto; gap: 18px; }
.event-detail__hero {
  min-height: 230px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--ui-line-strong);
  border-radius: 10px;
  background: var(--ui-paper);
}
.event-detail__hero .crumbs { margin-bottom: 28px; }
.event-detail__hero h1 { max-width: 900px; margin: 8px 0 10px; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.07; letter-spacing: -.05em; word-break: keep-all; text-wrap: balance; }
.event-detail__hero p { margin: 0; color: var(--ui-dim); font-size: .82rem; }
.event-actions { align-self: end; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.event-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--ui-line-strong); border-radius: 6px; background: transparent; color: var(--ui-ink); font-size: .78rem; font-weight: 850; text-decoration: none; cursor: pointer; }
.event-detail .event-action--primary { border-color: #171b20; background: #171b20; color: #fff !important; }
.event-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.event-detail__layout > main { padding: 4px clamp(8px, 2vw, 24px) 20px; border-top: 2px solid var(--ui-ink); }
.event-detail__layout .panel { padding: 26px 0; }
.event-detail__layout .keyvalues { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
.event-detail__layout .keyvalues > div { min-height: 46px; border-bottom: 1px solid var(--ui-line); }
.event-detail__rail { position: sticky; top: calc(var(--ui-header) + 18px); display: grid; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-paper); }
.event-detail__rail section { padding: 20px; }
.event-detail__rail section + section { border-top: 1px solid var(--ui-line); }
.event-detail__rail h2 { margin: 7px 0 10px; font-size: 1rem; overflow-wrap: anywhere; }
.event-detail__rail p { margin: 8px 0 0; font-size: .78rem; line-height: 1.5; }
.event-detail__rail small { display: block; margin-top: 9px; color: var(--ui-dim); font-size: .7rem; line-height: 1.55; }

.compose-page.compose-workbench { width: min(1280px, 100%); grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 16px; }
.compose-workbench .signal-section { padding: clamp(20px, 2.6vw, 32px); border-radius: 9px; box-shadow: none; }
.compose-form { gap: 18px; }
.compose-field { display: grid; gap: 8px; color: var(--ui-dim); font-size: .78rem; font-weight: 800; }
.compose-field--body { display: grid; gap: 8px; }
.compose-title-field { display: block; }
.compose-workbench .compose-form input[name="title"] {
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 750;
  letter-spacing: -.025em;
}
.compose-workbench .compose-form input[name="title"]::placeholder { color: color-mix(in srgb, var(--ui-dim) 75%, transparent); opacity: 1; }
.compose-editor-surface {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 4px;
  background: var(--ui-paper);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.compose-editor-surface:focus-within { border-color: var(--ui-line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-signal) 10%, transparent); }
.compose-workbench .compose-editor-surface > .editor-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-height: 45px;
  padding: 0 6px;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: var(--ui-paper-2);
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.compose-workbench .compose-editor-surface > .editor-toolbar::-webkit-scrollbar { display: none; }
.compose-workbench .editor-toolbar--post button {
  flex: 0 0 40px;
  width: 40px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 3px;
  color: var(--ui-ink);
  font-size: .88rem;
  font-weight: 650;
}
.compose-workbench .editor-toolbar--post button:hover,
.compose-workbench .editor-toolbar--post button:focus-visible { background: var(--ui-paper); color: var(--ui-ink); }
.compose-workbench .editor-toolbar--post button .icon { width: 18px; height: 18px; stroke-width: 1.7; }
.compose-workbench .editor-toolbar--post button b,
.compose-workbench .editor-toolbar--post button u { font-size: 1rem; text-underline-offset: 2px; }
.editor-toolbar__divider { flex: 0 0 1px; width: 1px; height: 22px; align-self: center; margin: 0 5px; background: var(--ui-line); }
.editor-tool-select { position: relative; flex: 0 0 auto; min-height: 44px; display: grid; align-items: center; color: var(--ui-ink); }
.editor-tool-select select { min-height: 44px; padding: 0 29px 0 10px; border: 0; border-radius: 3px; background: transparent; color: inherit; font: 650 .78rem/1 var(--sans); cursor: pointer; appearance: none; }
.editor-tool-select select:hover,
.editor-tool-select select:focus-visible { outline: 0; background: var(--ui-paper); }
.editor-tool-select > .icon { position: absolute; inset-inline-end: 8px; width: 13px; height: 13px; pointer-events: none; }
.editor-tool-select--block { width: 112px; }
.editor-tool-select--block select { width: 100%; }
.editor-tool-select--color { width: 42px; place-items: center; font-weight: 750; }
.editor-tool-select--color > span:not(.sr-only) { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 4px; pointer-events: none; }
.editor-tool-select--color > span:not(.sr-only)::after { content: ""; position: absolute; bottom: 9px; width: 14px; height: 2px; background: var(--ui-signal); }
.editor-tool-select--color select { position: absolute; inset: 0; width: 100%; opacity: 0; }
.editor-tool-select--color > .icon { inset-inline-end: 2px; width: 9px; height: 9px; }
.compose-workbench .compose-editor-surface > textarea,
.compose-workbench .compose-editor-surface > .rich-editor {
  width: 100%;
  min-height: 430px;
  padding: 20px 22px;
  border: 0;
  border-radius: 0;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: 1rem;
  line-height: 1.78;
}
.compose-workbench .compose-editor-surface > .rich-editor:focus-visible { outline: 0; }
.compose-workbench .compose-editor-surface > .rich-editor[data-empty="true"]::before { top: 20px; inset-inline-start: 22px; }
.compose-editor-surface > .image-strip:not([hidden]),
.compose-editor-surface > .video-strip:not([hidden]),
.compose-editor-surface > .emote-picker-slot:not([hidden]) { padding: 12px; border-top: 1px solid var(--ui-line); }
.compose-submit { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 2px; }
.compose-submit__actions { display: flex; justify-content: flex-end; gap: 8px; }
.compose-submit__actions > button { min-height: 44px; justify-content: center; padding-inline: 18px; border-radius: 4px; }
.compose-cancel-button { min-width: 82px; border: 1px solid var(--ui-line-strong); background: var(--ui-paper); color: var(--ui-ink); }
.compose-cancel-button:hover { border-color: var(--ui-ink); background: var(--ui-paper-2); color: var(--ui-ink); }
.compose-submit > small { color: var(--ui-dim); font-size: .7rem; line-height: 1.5; }
.compose-submit .solid-button { min-width: 132px; border-radius: 4px; background: #171b20; color: #fff; }
.rich-color--accent { color: var(--ui-signal); }
.rich-color--muted { color: var(--ui-dim); }
.rich-color--danger { color: #c83f4d; }
.compose-guide { padding: 20px; border: 1px solid var(--ui-line-strong); border-radius: 9px; background: #171b20; color: #fff; }
.compose-guide h2 { margin: 8px 0 14px; font-size: 1.05rem; word-break: keep-all; }
.compose-guide ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: compose-guide; }
.compose-guide li { position: relative; padding-left: 24px; color: #c3c9ce; font-size: .72rem; line-height: 1.55; word-break: keep-all; counter-increment: compose-guide; }
.compose-guide li::before { content: counter(compose-guide, decimal-leading-zero); position: absolute; left: 0; top: .15em; color: #ef6774; font: 800 .62rem/1 var(--mono); }
.compose-recent-card { display: grid; gap: 10px; }

.proposal-submit .solid-button,
.community-workspace .solid-button,
.manager-recruitment .solid-button { border-color: #171b20; border-radius: 6px; background: #171b20; color: #fff; box-shadow: none; }
.community-workspace .signal-section { border-radius: 9px; box-shadow: none; }
.community-feed-tools {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: -3px 0 12px;
  padding: 10px 0 13px;
  border-bottom: 1px solid var(--ui-line);
}
.community-feed-tools .feed-sort { min-width: max-content; padding: 0; border: 0; }
.community-workspace .feed-sort__item { border-radius: 5px; }
.community-workspace .feed-sort__item[aria-current="true"] { background: #171b20; color: #fff; }
.community-workspace .feed-search { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto auto; gap: 6px; padding: 0; border: 0; }
.community-workspace .feed-search select,
.community-workspace .feed-search input[type="search"] { min-height: 42px; border-radius: 6px; }
.community-feed-tools > .solid-button { min-height: 44px; justify-content: center; white-space: nowrap; }
.community-workspace .list-foot--pager { justify-content: center; padding-top: 15px; border-top: 1px solid var(--ui-line); }
.community-workspace .list-foot--pager:empty { display: none; }
.manager-recruitment { padding: 16px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-paper-2); box-shadow: none; }

.pik-ledger__empty {
  min-height: 150px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 28px 34px;
  border-block: 1px solid var(--ui-line-strong);
  background: transparent;
}
.pik-ledger__empty-mark { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--ui-line-strong); color: var(--ui-dim); font-size: .72rem; }
.pik-ledger__empty strong { font-size: 1rem; }
.pik-ledger__empty p { max-width: 64ch; margin: 7px 0 0; color: var(--ui-dim); font-size: .76rem; line-height: 1.6; }
.pik-ledger__empty .text-button { white-space: nowrap; }

@media (max-width: 980px) {
  .live-stage--idle { grid-template-columns: minmax(0, 1fr); }
  .live-stage--idle > .live-hero,
  .live-stage--idle > .live-idle { min-height: 0; }
  .official-board-grid--schedule { grid-template-columns: minmax(0, 1fr); }
  .official-board-grid--discovery { grid-template-columns: minmax(0, 1fr); }
  .event-detail__layout { grid-template-columns: minmax(0, 1fr); }
  .event-detail__rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-detail__rail section + section { border-top: 0; border-left: 1px solid var(--ui-line); }
  .compose-page.compose-workbench { grid-template-columns: minmax(0, 1fr); }
  .compose-recent-card { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .live-browse-paths { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; scroll-snap-type: none; }
  .live-browse-paths a { min-width: 0; min-height: 82px; border-top: 1px solid var(--ui-line); border-left: 0; scroll-snap-align: none; }
  .live-browse-paths a:first-child { border-top: 0; }
  .live-official-list { grid-template-columns: minmax(0, 1fr); }
  .live-flow-grid--single .live-trend-grid { grid-template-columns: minmax(0, 1fr); }
  .games-zero-stage h1 { max-width: 10ch; font-size: clamp(2.35rem, 11vw, 3rem); }
  .event-detail__hero { min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 24px 19px; }
  .event-detail__hero .crumbs { margin-bottom: 20px; }
  .event-actions { width: 100%; }
  .event-action { flex: 1; }
  .event-detail__layout .keyvalues { grid-template-columns: minmax(0, 1fr); }
  .event-detail__rail { grid-template-columns: minmax(0, 1fr); }
  .event-detail__rail section + section { border-top: 1px solid var(--ui-line); border-left: 0; }
  .compose-recent-card { grid-template-columns: minmax(0, 1fr); }
  .compose-workbench .compose-editor-panel { padding: 12px; }
  .compose-form { gap: 12px; }
  .compose-workbench .compose-form input[name="title"] {
    min-height: 62px;
    padding: 12px 14px;
    font-size: clamp(1.2rem, 6vw, 1.5rem);
  }
  .compose-workbench .compose-editor-surface > .editor-toolbar { padding-inline: 2px; }
  .compose-workbench .editor-toolbar--post button { flex-basis: 40px; width: 40px; min-height: 44px; }
  .editor-tool-select--block { width: 96px; }
  .editor-tool-select select { padding-inline-start: 8px; }
  .compose-workbench .compose-editor-surface > textarea,
  .compose-workbench .compose-editor-surface > .rich-editor { min-height: 360px; padding: 17px 16px; }
  .compose-workbench .compose-editor-surface > .rich-editor[data-empty="true"]::before { top: 17px; inset-inline-start: 16px; }
  .compose-submit { justify-content: stretch; }
  .compose-submit__actions { width: 100%; }
  .compose-submit__actions > button { flex: 1; }
  .compose-submit > small { grid-column: 1 / -1; }
  .community-workspace .feed-search { grid-template-columns: minmax(0, 1fr) auto; }
  .community-workspace .feed-search select { grid-column: 1 / -1; }
  .community-feed-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .community-feed-tools .feed-sort { grid-column: 1 / -1; overflow-x: auto; }
  .pik-ledger__empty { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 22px 4px; }
  .pik-ledger__empty-mark { width: 48px; height: 48px; }
  .pik-ledger__empty .text-button { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 480px) {
  .community-feed-tools { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .community-feed-tools .feed-search { grid-template-columns: minmax(0, 1fr) auto; }
  .community-feed-tools > .solid-button { width: 100%; }
}

/* The official hero's verification note becomes a horizontal footnote on small
   screens. Keeping it as the desktop side column leaves one Korean character
   per line and makes the note look like a broken control. */
@media (max-width: 620px) {
  .official-masthead {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 22px;
    min-height: 0;
  }
  .official-masthead > aside {
    align-self: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px 14px;
    padding: 17px 0 0;
    border-top: 1px solid rgb(255 255 255 / 16%);
    border-left: 0;
  }
  .official-masthead > aside span,
  .official-masthead > aside strong {
    min-width: 0;
    margin: 0;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .official-masthead > aside strong {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    font-size: .8rem;
    line-height: 1.55;
  }
  .official-masthead > aside span {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Home density follows the amount of real data. Three ranks are three useful
   destinations, not a short list floating inside a billboard-sized panel. */
.home-rank-stack--single { grid-template-columns: minmax(0, 1fr) !important; }
.home-rank-stack--single > div { padding: 0; }
.home-rank-stack--single > div > .compact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.home-rank-stack--single .pack-row,
.home-rank-stack--single .hub-row {
  min-width: 0;
  min-height: 64px;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 24%, var(--ui-line));
  border-radius: 8px;
  background: var(--ui-paper);
  box-shadow: 0 2px 7px rgb(25 30 38 / 5%);
}
.home-rank-stack--single .pack-row:hover,
.home-rank-stack--single .hub-row:hover {
  border-color: var(--ui-ink);
  background: var(--ui-paper-2);
}
.home-rank-stack--single .pack-row__main,
.home-rank-stack--single .hub-row a { min-height: 62px; padding: 8px 10px; }
.home-rank-stack--single .pack-row__main > span:last-of-type,
.home-rank-stack--single .hub-row a > span:last-of-type { min-width: 0; }
.home-rank-stack--single strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-rank-tabs { display: none; }
.home-pack-pills { scrollbar-width: none; }
.home-pack-pills::-webkit-scrollbar { display: none; }
.official-jump-nav { scrollbar-width: none; overscroll-behavior-inline: contain; }
.official-jump-nav::-webkit-scrollbar { display: none; }
.home-swipe-cue { display: none; }

@media (max-width: 820px) {
  .home-conversation-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .home-conversation-stage > .signal-section {
    min-width: 0;
    min-height: 0;
    scroll-snap-align: none;
  }
  .home-feature-live .external-live-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .home-feature-live .external-live-card--compact {
    min-width: 0;
    scroll-snap-align: none;
  }
  .home-interest-rail,
  .home-hub-rail {
    display: grid;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .home-interest-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hub-rail { grid-template-columns: minmax(0, 1fr); }
  .home-interest-rail .pack-discovery-card,
  .home-hub-rail .hub-discovery-card { min-width: 0; }
}

@media (max-width: 620px) {
  .home-rank-band { gap: 10px; }
  .home-live-ranking .home-rank-stack { grid-template-columns: minmax(0, 1fr) !important; }
  .home-rank-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    margin-bottom: 10px;
    padding: 3px;
    border: 1px solid var(--ui-line);
    border-radius: 7px;
    background: var(--ui-paper-2);
  }
  .home-rank-tabs button {
    min-height: 34px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ui-dim);
    font-size: .72rem;
    font-weight: 800;
  }
  .home-rank-tabs button[aria-pressed="true"] { background: var(--ui-paper); color: var(--ui-ink); box-shadow: 0 1px 4px rgb(18 24 28 / 8%); }
  .home-rank-stack[data-active="pack"] > [data-home-rank-panel="hub"],
  .home-rank-stack[data-active="hub"] > [data-home-rank-panel="pack"] { display: none; }
  .home-rank-stack--single > div > .compact-list { grid-template-columns: minmax(0, 1fr); }
  .home-rank-stack--single .pack-row,
  .home-rank-stack--single .hub-row { min-height: 58px; }
  .home-rank-stack--single .pack-row__main,
  .home-rank-stack--single .hub-row a { min-height: 56px; }
  .home-rank-companion {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 5px 14px;
    padding: 16px;
  }
  .home-rank-companion h2 { margin: 4px 0 0; font-size: 1rem; }
  .home-rank-companion p { grid-column: 1 / -1; font-size: .7rem; }
  .home-rank-companion nav { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
  .home-rank-companion nav a { min-height: 34px; padding-inline: 9px; }
  .home-dock { position: relative; align-items: flex-start; padding-bottom: 12px; }
  .home-swipe-cue {
    position: static;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    transform: none;
  }
  .home-swipe-cue .mobile-rail-dots { min-height: 8px; display: flex; gap: 4px; padding: 0; }
  .home-swipe-cue .mobile-rail-dots button {
    width: 6px;
    min-width: 6px;
    height: 6px;
    min-height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ui-line-strong);
  }
  .home-swipe-cue .mobile-rail-dots button.is-current {
    background: var(--ui-ink);
    box-shadow: 0 0 0 2px var(--ui-paper), 0 0 0 3px var(--ui-line-strong);
  }

  .profile-menu__flyout {
    position: fixed;
    top: calc(var(--ui-header) + 48px);
    right: 12px;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - var(--ui-header) - 124px - env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ========================================================================
   Official, LIVE, Games IA completion pass
   Final overrides stay at the end so the current component markup owns the
   cascade. Surfaces are flat, information-dense, and data-shaped.
   ======================================================================== */

/* Neutral product actions. Ranking/accent colors stay semantic, not generic. */
.ui-app .solid-button {
  border-color: #20272d;
  border-radius: 5px;
  background: #20272d;
  color: #fff;
  box-shadow: none;
}
.ui-app .solid-button:hover { border-color: #0f1418; background: #0f1418; color: #fff; }
.community-feed-tabs button[aria-pressed="true"],
.community-feed-tabs a[aria-current="page"],
.community-channel-rail .channel-link.is-current {
  border-color: #20272d;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: inset 3px 0 0 #20272d;
}
.feed-sort__item:is(button) {
  appearance: none;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ui-dim);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}
.feed-sort__item:is(button)[aria-pressed="true"] {
  background: transparent;
  color: var(--ui-ink);
  box-shadow: inset 0 -2px 0 #20272d;
  font-weight: 850;
}
.composer-channel-picker {
  gap: 0;
  padding: 0 8px;
  overflow-x: auto;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: transparent;
}
.composer-channel-picker > span { flex: none; padding-inline: 8px 12px; color: var(--ui-dim); }
.composer-channel-picker a {
  flex: none;
  min-height: 44px;
  padding-inline: 13px;
  border-radius: 0;
  color: var(--ui-dim);
}
.composer-channel-picker a[aria-current="page"] {
  background: transparent;
  color: var(--ui-ink);
  box-shadow: inset 0 -2px 0 #20272d;
}
.same-channel-board .community-feed-tabs { position: sticky; top: 0; z-index: 1; background: var(--ui-paper); }

/* Official information is a system: summary home, type views, search and a
   separate Pack directory. Results are not represented only as Pack cards. */
.official-system,
.pack-official-system { width: min(1320px, 100%); margin-inline: auto; display: grid; gap: 14px; }
.official-command {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(18px, 2.2vw, 27px) 2px 15px;
  border-bottom: 1px solid var(--ui-line-strong);
  background: transparent;
}
.official-command > div > span,
.pack-official-command > div > span { color: var(--ui-dim); font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.official-command h1,
.pack-official-command h1 {
  max-width: 26ch;
  margin: 6px 0 7px;
  font-size: clamp(1.85rem, 2.7vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -.045em;
  word-break: keep-all;
  text-wrap: balance;
}
.official-command p,
.pack-official-command p { max-width: 62ch; margin: 0; color: var(--ui-dim); font-size: .78rem; line-height: 1.6; word-break: keep-all; }
.official-search {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(180px, .7fr) auto;
  align-items: end;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 7px;
  background: var(--ui-paper-2);
}
.official-search label,
.pack-official-search label { min-width: 0; display: grid; gap: 6px; color: var(--ui-dim); font-size: .65rem; font-weight: 850; }
.official-search input,
.official-search select,
.pack-official-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 4px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font: inherit;
  font-size: .78rem;
}
.official-search button,
.pack-official-search button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #20272d;
  border-radius: 4px;
  background: #20272d;
  color: #fff;
  font: 850 .74rem/1 var(--sans);
  cursor: pointer;
}
.official-view-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  overflow: visible;
  padding: 0;
  border-block: 1px solid var(--ui-line);
  background: var(--ui-paper);
}
.official-view-tabs button,
.official-view-tabs > a {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 13px;
  border: 0;
  border-right: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--ui-dim);
  font: 800 .72rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.official-view-tabs button:last-child,
.official-view-tabs > a:last-child { border-right: 0; }
.official-view-tabs button span,
.official-view-tabs > a span { min-width: 0; color: inherit; overflow-wrap: anywhere; }
.official-view-tabs button b,
.official-view-tabs > a b { flex: none; color: var(--ui-dim); font: 800 .62rem/1 var(--mono); }
.official-view-tabs button[aria-pressed="true"],
.official-view-tabs > a[aria-current="page"] { background: var(--ui-paper-2); color: var(--ui-ink); box-shadow: inset 0 -3px 0 var(--ui-ink); }
.official-view-tabs button[aria-pressed="true"] b,
.official-view-tabs > a[aria-current="page"] b { color: var(--ui-ink); }
.pack-official-tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.official-subtabs { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 2px 0 10px; border-bottom: 1px solid var(--ui-line); }
.official-subtabs button {
  min-height: 30px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ui-dim);
  font: 750 .69rem/1 var(--sans);
  cursor: pointer;
}
.official-subtabs button span { margin-left: 3px; font: 750 .6rem/1 var(--mono); }
.official-subtabs button[aria-pressed="true"] { border-bottom-color: var(--ui-ink); color: var(--ui-ink); }

.official-home-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: 12px;
  align-items: start;
}
.official-home-focus {
  min-width: 0;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--ui-line-strong);
  background: var(--ui-paper);
}
.official-home-focus > header,
.official-results > header,
.pack-official-results > header {
  min-height: 45px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  margin-bottom: 10px;
}
.official-home-focus h2,
.official-results > header h2,
.pack-official-results > header h2,
.official-pack-index h2 { margin: 0; font-size: 1rem; letter-spacing: -.03em; }
.official-home-focus > header > div > span { display: block; margin-bottom: 5px; color: #a33c2d; font: 850 .6rem/1 var(--mono); letter-spacing: .06em; }
.official-home-focus header p,
.official-results > header p,
.pack-official-results > header p { margin: 4px 0 0; color: var(--ui-dim); font-size: .68rem; line-height: 1.45; word-break: keep-all; }
.official-results > .pager { justify-content: center; margin-top: 18px; }
.discovery-list-foot,
.search-results-foot { display: grid; gap: 18px; margin-top: 22px; }
.list-bottom-search { display: flex; align-items: end; justify-content: center; gap: 8px; padding-top: 18px; border-top: 1px solid var(--ui-line); }
.list-bottom-search label { display: grid; gap: 6px; width: min(520px, 100%); }
.list-bottom-search label > span { font-size: 12px; color: var(--ui-dim); }
.list-bottom-search input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper); color: var(--ui-ink); }
.list-bottom-search .text-button { min-height: 44px; white-space: nowrap; }
@media (max-width: 640px) {
  .list-bottom-search { align-items: stretch; flex-direction: column; }
  .list-bottom-search .text-button { justify-content: center; width: 100%; }
}
.official-home-focus > header > a { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-dim); font-size: .68rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.official-home-focus > header > a .icon { width: 13px; }
.official-home-focus .compact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.official-home-map { display: grid; border: 1px solid var(--ui-line-strong); background: var(--ui-paper); }
.official-home-map > a {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 4px 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--ui-line);
  color: var(--ui-ink);
  text-decoration: none;
}
.official-home-map > a:first-child { border-top: 0; }
.official-home-map span { font-size: .78rem; font-weight: 850; }
.official-home-map strong { grid-column: 2; grid-row: 1; font: 850 .74rem/1 var(--mono); }
.official-home-map small { overflow: hidden; color: var(--ui-dim); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.official-home-map .icon,
.official-home-map b { grid-column: 2; grid-row: 2; width: 13px; color: var(--ui-dim); }

.official-entry {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--ui-line);
}
.official-entry > time { overflow: hidden; padding-top: 3px; color: #a33c2d; font: 800 .62rem/1.25 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.official-entry__body { min-width: 0; }
.official-entry__identity { min-width: 0; display: flex; align-items: center; gap: 6px; }
.official-entry__identity .entity-icon { flex: none; width: 26px; height: 26px; aspect-ratio: 1; border-radius: 5px; }
.official-system .entity-icon img,
.pack-official-system .entity-icon img { object-fit: contain; }
.official-entry__identity > a { overflow: hidden; color: var(--ui-ink); font-size: .67rem; font-weight: 850; text-overflow: ellipsis; text-decoration: none; white-space: nowrap; }
.official-entry__identity > span { flex: none; padding-left: 7px; border-left: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .62rem; }
.official-entry h3 { margin: 6px 0 0; font-size: .82rem; line-height: 1.4; letter-spacing: -.015em; }
.official-entry h3 > a { color: var(--ui-ink); text-decoration: none; word-break: keep-all; }
.official-entry footer { min-width: 0; display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 6px; color: var(--ui-dim); font-size: .61rem; }
.official-entry footer > a { color: var(--ui-ink); font-weight: 800; text-decoration: none; }
.official-inline-empty { margin: 0; padding: 16px 0; border-top: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .72rem; }

.official-browser { display: block; }
.official-results,
.pack-official-results { min-width: 0; padding: clamp(19px, 2.5vw, 28px); border: 1px solid var(--ui-line-strong); background: var(--ui-paper); }
.official-results > header > strong,
.pack-official-results > header > strong { font-size: 1rem; }
.official-pack-index { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ui-line-strong); background: var(--ui-paper); }
.official-pack-index > header { grid-column: 1 / -1; padding: 15px 17px; border-bottom: 1px solid var(--ui-line); }
.official-pack-index > header > small { display: block; margin-top: 5px; color: var(--ui-dim); font-size: .64rem; }
.official-pack-link {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border-left: 1px solid var(--ui-line);
  color: var(--ui-ink);
  text-decoration: none;
}
.official-pack-link:nth-of-type(4n + 1) { border-left: 0; }
.official-pack-link .entity-icon { width: 30px; height: 30px; aspect-ratio: 1; border-radius: 5px; }
.official-pack-link span { min-width: 0; display: grid; gap: 2px; }
.official-pack-link strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.official-pack-link small { color: var(--ui-dim); font-size: .61rem; }
.official-pack-link .icon,
.official-pack-link > b { width: 13px; color: var(--ui-dim); font-size: .72rem; }
.official-benefit-group {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 12px 0;
  border-top: 1px solid var(--ui-line);
}
.official-benefit-group > .entity-icon { width: 36px; height: 36px; aspect-ratio: 1; border-radius: 7px; }
.official-benefit-group > div { min-width: 0; }
.official-benefit-group > div > span { color: var(--ui-dim); font-size: .59rem; font-weight: 800; }
.official-benefit-group h3 { margin: 3px 0 0; font-size: .8rem; }
.official-benefit-group h3 a { color: var(--ui-ink); text-decoration: none; }
.official-benefit-group > strong { display: flex; align-items: baseline; gap: 2px; font: 850 .9rem/1 var(--mono); }
.official-benefit-group > strong small { color: var(--ui-dim); font: 750 .6rem/1 var(--sans); }
.official-benefit-group > a { min-height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--ui-line-strong); border-radius: 4px; color: var(--ui-ink); font-size: .66rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.official-benefit-group > a .icon { width: 12px; }
.official-schedule-pack { border-top: 2px solid var(--ui-ink); }
.official-schedule-pack + .official-schedule-pack { margin-top: 18px; }
.official-schedule-pack > header { min-height: 54px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; }
.official-schedule-pack > header .entity-icon { width: 30px; height: 30px; }
.official-schedule-pack > header h3 { margin: 0; font-size: .82rem; }
.official-schedule-pack > header h3 a { color: var(--ui-ink); text-decoration: none; }
.official-schedule-pack > header span { color: var(--ui-dim); font-size: .64rem; }
.official-result-empty { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--ui-line); }
.official-result-empty strong { font-size: .8rem; }
.official-result-empty a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--ui-line-strong); border-radius: 4px; color: var(--ui-ink); font-size: .68rem; font-weight: 800; text-decoration: none; }

.pack-official-command {
  min-height: 148px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border-block: 1px solid var(--ui-line-strong);
  background: var(--ui-paper);
}
.pack-official-command > .entity-icon { width: 72px; height: 72px; border-radius: 10px; }
.pack-official-command > strong { display: grid; justify-items: end; font-size: 1.7rem; }
.pack-official-command > strong small { color: var(--ui-dim); font-size: .63rem; font-weight: 700; }
.pack-official-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; padding: 14px; border: 1px solid var(--ui-line-strong); background: var(--ui-paper); }
.pack-official-empty { min-height: 0; }

/* Games uses the existing dark/orange portal, but the discovery shell now
   scales to many real entries and remains honest when the count is zero. */
.games-zero-stage {
  min-height: 0;
  padding: clamp(28px, 4vw, 48px) 4px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
  border-bottom: 1px solid #393d43;
  background: #111214;
}
.games-zero-stage__copy { grid-column: 1; align-self: center; }
.games-zero-stage h1 {
  max-width: none;
  margin: 12px 0 0;
  font-size: clamp(2.1rem, 3vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.05em;
  word-break: keep-all;
  white-space: nowrap;
}
.games-zero-stage__copy > p { max-width: 56ch; margin: 14px 0 0; font-size: .82rem; line-height: 1.65; }
.games-zero-stage__actions { margin-top: 19px; }
.games-zero-stage__loop { grid-column: 1; align-self: end; }
.games-zero-stage__recruit { grid-column: auto; grid-row: auto; align-self: auto; min-height: 0; padding: 18px 22px; border: 1px solid #43474e; border-left: 3px solid #ff7651; border-radius: 5px; background: #191b1f; }
.games-zero-stage__recruit ul,
.games-zero-stage__recruit .button { grid-row: auto; }
.games-zero-stage__copy,
.games-zero-stage__loop,
.games-zero-stage__recruit { animation-name: games-home-rise; }

.games-portal { display: grid; gap: 18px; padding-bottom: 34px; }
.games-library { overflow: hidden; border: 1px solid #43474e; border-radius: 7px; background: #f3f1ec; color: #17181a; }
.games-library__head { min-height: 112px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 22px 24px; border-bottom: 1px solid #c9c7c1; }
.games-library__head > div > span { color: #a44127; font: 900 .61rem/1 var(--mono); letter-spacing: .1em; }
.games-library__head h2 { margin: 7px 0 3px; font-size: clamp(1.35rem, 2.2vw, 2rem); letter-spacing: -.045em; }
.games-library__head p { margin: 0; color: #676a6e; font-size: .72rem; line-height: 1.55; word-break: keep-all; }
.games-library__head > strong { display: grid; justify-items: end; font-size: 1.8rem; }
.games-library__head > strong small { color: #777a7e; font-size: .6rem; }
.games-library__lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid #c9c7c1; }
.games-library__lanes button { min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 13px; border: 0; border-left: 1px solid #c9c7c1; border-radius: 0; background: transparent; color: #36383b; font: 800 .68rem/1 var(--sans); cursor: pointer; }
.games-library__lanes button:first-child { border-left: 0; }
.games-library__lanes button b { color: #9c432c; font: 800 .65rem/1 var(--mono); }
.games-library__lanes button[aria-pressed="true"] { background: #202329; color: #fff; }
.games-library__lanes button:disabled { color: #999b9e; cursor: default; }
.games-library__lanes button:disabled b { color: #999b9e; }
.games-library__controls { display: grid; grid-template-columns: minmax(210px, 1.4fr) repeat(5, minmax(120px, .72fr)); gap: 7px; padding: 15px 18px; border-bottom: 1px solid #c9c7c1; background: #ebe8e1; }
.games-library__controls label { min-width: 0; display: grid; gap: 5px; color: #66696c; font-size: .59rem; font-weight: 850; }
.games-library__controls input,
.games-library__controls select { width: 100%; min-height: 38px; padding: 0 9px; border: 1px solid #b7b5af; border-radius: 4px; background: #f8f7f3; color: #202225; font: 750 .7rem/1 var(--sans); }
.games-library__controls :disabled { color: #929496; background: #e2dfd8; }
.games-library__summary { min-height: 46px; display: flex; align-items: baseline; gap: 8px; padding: 0 20px; border-bottom: 1px solid #c9c7c1; }
.games-library__summary strong { font-size: .78rem; }
.games-library__summary span { color: #777a7e; font-size: .64rem; }
.games-library__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.games-library__grid .games-card { min-width: 0; border: 0; border-left: 1px solid #c9c7c1; border-bottom: 1px solid #c9c7c1; border-radius: 0; box-shadow: none; }
.games-library__grid .games-card:nth-child(4n + 1) { border-left: 0; }
.games-library__grid .games-card[hidden] { display: none !important; }
.games-library__grid .games-card__media { border-radius: 0; }
.games-library__empty { min-height: 132px; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 25px; text-align: center; }
.games-library__empty strong { font-size: .82rem; }
.games-library__empty p { max-width: 64ch; margin: 0; color: #6d7073; font-size: .68rem; line-height: 1.55; word-break: keep-all; }
.games-library__pager { min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-top: 1px solid #c9c7c1; }
.games-library__pager[hidden] { display: none; }
.games-library__pager > span { display: flex; gap: 5px; }
.games-library__pager button { min-width: 40px; min-height: 40px; padding: 0 10px; border: 1px solid #b7b5af; border-radius: 4px; background: #f8f7f3; color: #25272a; font: 850 .7rem/1 var(--sans); cursor: pointer; }
.games-library__pager button[aria-current="page"] { border-color: #25272a; background: #25272a; color: #fff; }
.games-library__pager button:disabled { opacity: .45; cursor: default; }
.games-library__bottom-search { display: flex; align-items: end; justify-content: center; gap: 8px; padding: 16px 18px 20px; border-top: 1px solid #c9c7c1; }
.games-library__bottom-search label { width: min(520px, 100%); display: grid; gap: 5px; color: #66696c; font-size: .62rem; font-weight: 850; }
.games-library__bottom-search input { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #b7b5af; border-radius: 4px; background: #f8f7f3; color: #202225; }
.games-library__bottom-search button { min-height: 42px; padding: 0 15px; border: 1px solid #25272a; border-radius: 4px; background: #25272a; color: #fff; font-weight: 850; }

/* LIVE keeps every semantic lane compact. Real broadcasts remain first. */
.live-stage--idle { display: block; }
.live-idle.live-zero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  align-items: center;
  gap: clamp(24px, 4vw, 54px);
  padding: clamp(22px, 2.5vw, 32px);
  border-color: #31373d;
  background: #1b2025;
  color: #fff;
}
.live-zero__copy { min-width: 0; }
.live-zero h1 {
  max-width: 17ch;
  margin: 10px 0 8px;
  font-size: clamp(1.85rem, 2.8vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -.045em;
  word-break: keep-all;
  text-wrap: balance;
}
.live-zero p { max-width: 68ch; margin: 0; color: #bdc6cc; font-size: .82rem; line-height: 1.6; word-break: keep-all; }
.live-zero__actions { min-width: 0; display: grid; align-content: center; gap: 9px; }
.live-zero nav { min-width: 0; border-color: #343a40; }
.live-zero nav a { min-height: 42px; border-color: #343a40; color: #eef3f5; }
.live-zero .live-share-panel { width: 100%; }
.live-zero .live-share-panel > summary { min-height: 42px; }
.live-portal .live-stage .live-hero { min-height: 0; align-content: start; gap: 14px; padding: clamp(22px, 2.2vw, 30px); }
.live-stage .live-section-title > a { flex: none; white-space: nowrap; word-break: keep-all; }
.live-portal .live-hero h1,
.live-portal .live-stage .live-hero h1 { max-width: 17ch; font-size: clamp(1.9rem, 2.7vw, 2.7rem); line-height: 1.12; word-break: keep-all; text-wrap: balance; }
.live-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.live-insight-grid > section { min-width: 0; padding: 17px 19px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-paper); box-shadow: none; }
.live-insight-grid .live-topic-field { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 15px; }
.live-insight-grid header > span,
.live-insight-grid .live-section-title span { display: block; margin-bottom: 5px; color: #a23b47; font: 850 .58rem/1 var(--mono); letter-spacing: .08em; }
.live-insight-grid h2 { margin: 0; font-size: .98rem; letter-spacing: -.025em; }
.live-insight-grid header p { margin: 4px 0 0; color: var(--ui-dim); font-size: .68rem; line-height: 1.45; }
.live-insight-grid .live-section-title { min-height: 44px; margin-bottom: 7px; }
.live-insight-grid .live-topic-grid,
.live-insight-grid .live-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.live-insight-grid .live-topic-card,
.live-insight-grid .live-trend-card { min-height: 58px; padding: 9px 10px; border-radius: 5px; box-shadow: none; }
.live-insight-grid .live-rank-row,
.live-insight-grid .live-pick-row { min-height: 46px; }
.live-module-note { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .69rem; }
.live-module-note a,
.live-compact-empty a { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-ink); font-size: .69rem; font-weight: 800; white-space: nowrap; }
.live-official-overview { padding: 19px; }
.live-official-row { min-width: 0; min-height: 64px; display: grid; grid-template-columns: 74px 70px minmax(0, 1fr); align-items: center; gap: 8px; }
.live-official-row > time { color: var(--ui-dim); font: 750 .61rem/1 var(--mono); }
.live-official-row > span { color: #a82f3d; font-size: .63rem; font-weight: 850; }
.live-official-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-portal .live-stage .live-share-panel > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 13px;
  align-items: center;
  justify-content: initial;
  gap: 8px;
  padding-inline: 11px;
}
.live-contract summary > span { color: #ef7c86; font: 850 .55rem/1 var(--mono); letter-spacing: .08em; }
.live-portal .live-stage .live-share-panel > summary > strong { grid-column: 1; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.live-portal .live-stage .live-share-panel > summary > b { grid-column: 2; min-width: 19px; padding: 3px 5px; border-radius: 4px; background: rgb(255 255 255 / 10%); font-size: .62rem; text-align: center; }
.live-portal .live-stage .live-share-panel > summary > .icon { grid-column: 3; width: 13px; }
.live-contract summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.live-contract summary > strong { grid-column: 1; font-size: .72rem; }
.live-contract summary > .icon { grid-column: 2; grid-row: 1 / span 2; width: 13px; }
.live-portal .live-stage .live-share-panel__body { display: grid; gap: 12px; }
.live-share-panel__eyebrow { color: #ef7c86; font: 850 .58rem/1 var(--mono); letter-spacing: .1em; }
.live-connect-state { min-width: 0; display: grid; justify-items: start; gap: 9px; }
.live-connect-state p { margin: 0; color: #d9dfe2; font-size: .76rem; line-height: 1.6; }
.live-connect-state .solid-button { justify-self: start; }
.live-share-panel__body > small { display: block; padding-top: 10px; border-top: 1px solid #38434b; color: #c8d1d6; font-size: .68rem; line-height: 1.55; }
.live-share-panel__body p,
.live-share-panel__body small { word-break: keep-all; overflow-wrap: normal; }

@media (max-width: 1100px) {
  .official-search { max-width: 760px; }
  .official-pack-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .official-pack-link:nth-of-type(4n + 1) { border-left: 1px solid var(--ui-line); }
  .official-pack-link:nth-of-type(3n + 1) { border-left: 0; }
  .games-library__controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .games-library__search { grid-column: span 2; }
  .games-library__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .games-library__grid .games-card:nth-child(4n + 1) { border-left: 1px solid #c9c7c1; }
  .games-library__grid .games-card:nth-child(3n + 1) { border-left: 0; }
}

@media (max-width: 820px) {
  .official-view-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .official-view-tabs button,
  .official-view-tabs > a { border-bottom: 1px solid var(--ui-line); }
  .official-view-tabs button:nth-child(3n),
  .official-view-tabs > a:nth-child(3n) { border-right: 0; }
  .official-view-tabs button:nth-last-child(-n + 3),
  .official-view-tabs > a:nth-last-child(-n + 3) { border-bottom: 0; }
  .pack-official-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pack-official-tabs button:nth-child(3n),
  .pack-official-tabs > a:nth-child(3n) { border-right: 1px solid var(--ui-line); }
  .pack-official-tabs button:nth-child(4n),
  .pack-official-tabs > a:nth-child(4n) { border-right: 0; }
  .pack-official-tabs button:nth-last-child(-n + 3),
  .pack-official-tabs > a:nth-last-child(-n + 3) { border-bottom: 0; }
  .official-home-overview { grid-template-columns: minmax(0, 1fr); }
  .official-home-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .official-home-map > a { border-top: 1px solid var(--ui-line); border-left: 1px solid var(--ui-line); }
  .official-home-map > a:nth-child(-n + 2) { border-top: 0; }
  .official-home-map > a:nth-child(odd) { border-left: 0; }
  .official-pack-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .official-pack-link:nth-of-type(3n + 1) { border-left: 1px solid var(--ui-line); }
  .official-pack-link:nth-of-type(2n + 1) { border-left: 0; }
  .pack-official-command { grid-template-columns: auto minmax(0, 1fr); }
  .pack-official-command > strong { grid-column: 2; justify-items: start; }
  .games-zero-stage { grid-template-columns: minmax(0, 1fr); }
  .games-zero-stage__copy,
  .games-zero-stage__loop { grid-column: 1; grid-row: auto; }
  .games-library__lanes { grid-template-columns: repeat(5, minmax(110px, 1fr)); overflow-x: auto; }
  .games-library__lanes { scrollbar-width: none; }
  .games-library__lanes::-webkit-scrollbar { display: none; }
  .games-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games-library__grid .games-card:nth-child(3n + 1) { border-left: 1px solid #c9c7c1; }
  .games-library__grid .games-card:nth-child(2n + 1) { border-left: 0; }
  .live-idle.live-zero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .live-insight-grid .live-topic-field { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .official-system,
  .pack-official-system { gap: 10px; }
  .official-command { padding: 20px 0 17px; gap: 18px; }
  .official-command h1,
  .pack-official-command h1 { max-width: none; font-size: clamp(1.9rem, 9vw, 2.45rem); }
  .official-search { grid-template-columns: minmax(0, 1fr) auto; }
  .official-search label:first-child { grid-column: 1 / -1; }
  .official-view-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .official-view-tabs button,
  .official-view-tabs > a { min-height: 42px; padding-inline: 10px; border-right: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); }
  .official-view-tabs button:nth-child(odd),
  .official-view-tabs > a:nth-child(odd) { border-right: 1px solid var(--ui-line); }
  .official-view-tabs button:nth-child(even),
  .official-view-tabs > a:nth-child(even) { border-right: 0; }
  .official-view-tabs button:nth-last-child(-n + 2),
  .official-view-tabs > a:nth-last-child(-n + 2) { border-bottom: 0; }
  .pack-official-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-official-tabs button:nth-last-child(-n + 2),
  .pack-official-tabs > a:nth-last-child(-n + 2) { border-bottom: 0; }
  .pack-official-tabs button:last-child,
  .pack-official-tabs > a:last-child { border-bottom: 0; }
  .official-home-focus { padding: 17px 15px; }
  .official-home-focus .compact-list { grid-template-columns: minmax(0, 1fr); }
  .official-entry { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
  .official-entry footer { gap-inline: 7px; }
  .official-pack-index { grid-template-columns: minmax(0, 1fr); }
  .official-pack-index .official-pack-link { border-left: 0; }
  .official-benefit-group { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; }
  .official-benefit-group > .entity-icon { width: 32px; height: 32px; }
  .official-benefit-group > strong { grid-column: 3; }
  .official-benefit-group > a { grid-column: 2 / -1; justify-self: start; }
  .pack-official-command { min-height: 0; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 19px 0; background: transparent; }
  .pack-official-command > .entity-icon { width: 52px; height: 52px; }
  .pack-official-command > strong { grid-column: 2; }
  .pack-official-search { grid-template-columns: minmax(0, 1fr) auto; padding: 11px; }
  .pack-official-results { padding: 17px 14px; }
  .games-zero-stage { margin-inline: -12px; padding: 28px 18px 22px; gap: 18px; }
  .games-zero-stage h1 { max-width: none; font-size: clamp(2.05rem, 9vw, 2.35rem); line-height: 1.08; white-space: normal; }
  .games-zero-stage__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games-zero-stage__actions .button { width: 100%; padding-inline: 8px; }
  .games-zero-stage__loop { grid-template-columns: repeat(4, minmax(78px, 1fr)); overflow-x: auto; }
  .games-zero-stage__recruit { padding: 18px; }
  .games-library { margin-inline: -12px; border-inline: 0; border-radius: 0; }
  .games-library__head { min-height: 0; padding: 18px; }
  .games-library__head > strong { font-size: 1.35rem; }
  .games-library__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px; }
  .games-library__search { grid-column: 1 / -1; }
  .games-library__lanes { grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
  .games-library__lanes button:nth-child(-n + 3) { grid-column: span 2; }
  .games-library__lanes button:nth-child(n + 4) { grid-column: span 3; border-top: 1px solid #c9c7c1; }
  .games-library__lanes button:nth-child(4) { border-left: 0; }
  .games-library__grid { grid-template-columns: minmax(0, 1fr); }
  .games-library__grid .games-card,
  .games-library__grid .games-card:nth-child(2n + 1),
  .games-library__grid .games-card:nth-child(3n + 1),
  .games-library__grid .games-card:nth-child(4n + 1) { border-left: 0; }
  .games-library__pager { padding-inline: 10px; }
  .games-library__pager button { min-width: 44px; min-height: 44px; }
  .games-library__bottom-search { align-items: stretch; flex-direction: column; padding-inline: 13px; }
  .games-library__bottom-search button { min-height: 44px; }
  .live-insight-grid { grid-template-columns: minmax(0, 1fr); }
  .live-idle.live-zero { padding: 21px 18px; }
  .live-zero h1 { max-width: 14ch; font-size: clamp(1.8rem, 8.8vw, 2.25rem); }
  .live-zero p { font-size: .78rem; line-height: 1.55; }
  .live-zero .live-hero__meta { margin-top: 14px; }
  .live-insight-grid > section { padding: 15px; }
  .live-filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  .live-filter-bar button { width: 100%; justify-content: center; }
  .live-external-section--priority .external-live-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }
  .live-external-section--priority .external-live-card--compact {
    width: 100%;
    min-width: 0;
    scroll-snap-align: none;
  }
  .live-insight-grid .live-topic-grid,
  .live-insight-grid .live-trend-grid { grid-template-columns: minmax(0, 1fr); }
  .live-official-list { grid-template-columns: minmax(0, 1fr); }
  .live-official-row { grid-template-columns: 66px 64px minmax(0, 1fr); gap: 6px; }
}

@media (max-width: 390px) {
  .official-search { grid-template-columns: minmax(0, 1fr); }
  .official-search label,
  .official-search label:first-child,
  .official-search button { grid-column: 1; }
  .pack-official-search { grid-template-columns: minmax(0, 1fr); }
  .official-entry { grid-template-columns: minmax(0, 1fr); }
  .official-entry > time { padding-top: 0; }
  .official-home-map { grid-template-columns: minmax(0, 1fr); }
  .official-home-map > a,
  .official-home-map > a:nth-child(-n + 2),
  .official-home-map > a:nth-child(odd) { border-left: 0; border-top: 1px solid var(--ui-line); }
  .official-home-map > a:first-child { border-top: 0; }
  .games-zero-stage__actions { grid-template-columns: minmax(0, 1fr); }
  .games-library__controls { grid-template-columns: minmax(0, 1fr); }
  .games-library__controls .games-library__search { grid-column: 1; }
  .live-official-row { grid-template-columns: 58px minmax(0, 1fr); }
  .live-official-row > a { grid-column: 1 / -1; }
}

/* Community channels are navigation rows, not accent-colored selection pills. */
.entity-detail-rail .entity-channel-link {
  min-height: 52px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
  margin: 0;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink);
}
.entity-detail-rail .entity-channel-link:last-child { border-bottom: 0; }
.entity-detail-rail .entity-channel-link > span {
  grid-row: 1 / 3;
  color: var(--ui-dim);
  font: 750 .8rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.entity-detail-rail .entity-channel-link > strong { align-self: end; font-size: .88rem; }
.entity-detail-rail .entity-channel-link > small {
  grid-column: 2;
  align-self: start;
  margin: 0;
  color: var(--ui-dim);
}
.entity-detail-rail .entity-channel-link > .icon,
.entity-detail-rail .entity-channel-link > b {
  grid-column: 3;
  grid-row: 1 / 3;
  width: 14px;
  color: var(--ui-dim);
}
.entity-detail-rail .entity-channel-link:hover { background: var(--ui-paper-2); }

@media (max-width: 620px) {
  .community-channel-rail {
    flex-wrap: wrap;
    overflow: visible;
    scrollbar-width: none;
  }
  .community-channel-rail::-webkit-scrollbar { display: none; }
  .community-channel-rail .channel-link { flex: 1 1 140px; min-width: 0; }
}

/* Manager Console: task-focused sections instead of one long settings dump. */
.manager-console { display: grid; gap: 12px; padding-bottom: 42px; }
.manager-console > .back-line { margin-bottom: 0; }
.manager-console__head {
  min-height: 168px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding: 28px 30px;
  border: 1px solid var(--ui-line-strong);
  border-left: 5px solid var(--ui-ink);
  background: var(--ui-paper);
}
.manager-console__head h1 {
  max-width: 780px;
  margin: 8px 0;
  font-size: clamp(1.9rem, 3.5vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
  word-break: keep-all;
}
.manager-console__head p { margin: 0; color: var(--ui-dim); }
.manager-console__head dl { min-width: 220px; display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); margin: 0; border: 1px solid var(--ui-line); }
.manager-console__head dl > div { padding: 13px 15px; }
.manager-console__head dl > div + div { border-left: 1px solid var(--ui-line); }
.manager-console__head dt { color: var(--ui-dim); font-size: .66rem; }
.manager-console__head dd { margin: 5px 0 0; font-size: 1.15rem; font-weight: 850; }
.manager-console__nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--ui-line);
  background: var(--ui-paper);
}
.manager-console__nav a {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  border-right: 1px solid var(--ui-line);
  color: var(--ui-dim);
  font-size: .77rem;
  font-weight: 750;
  text-align: center;
}
.manager-console__nav a:last-child { border-right: 0; }
.manager-console__nav a[aria-current="page"] { background: var(--ui-paper-2); color: var(--ui-ink); box-shadow: inset 0 -3px 0 var(--ui-ink); }
.manager-console__nav b { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--ui-ink); color: var(--ui-paper); font-size: .61rem; }
.manager-console__body { gap: 12px; padding-top: 0; }
.manager-console__body > .signal-section { margin: 0; padding: 18px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper); box-shadow: none; }
.manager-console__quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; border: 1px solid var(--ui-line); background: var(--ui-paper); }
.manager-console__quick a { min-height: 61px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 15px 17px; border-bottom: 1px solid var(--ui-line); }
.manager-console__quick a:nth-child(odd) { border-right: 1px solid var(--ui-line); }
.manager-console__quick a:nth-last-child(-n + 2) { border-bottom: 0; }
.manager-console__quick a:hover { background: var(--ui-paper-2); }
.manager-console__quick .icon { width: 15px; color: var(--ui-dim); }
.governance-status { gap: 8px; padding: 0 0 16px; border-bottom: 1px solid var(--ui-line); }
.governance-status > p { margin: 0; color: var(--ui-dim); font-size: .74rem; }
.manager-workload { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ui-line); }
.manager-workload > section { min-width: 0; padding: 15px 16px; }
.manager-workload > section + section { border-left: 1px solid var(--ui-line); }
.manager-workload h3 { margin: 0 0 11px; font-size: .76rem; }
.manager-workload dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.manager-workload dt { color: var(--ui-dim); font-size: .66rem; }
.manager-workload dd { margin: 3px 0 0; font-size: 1rem; font-weight: 850; }
.manager-console[data-manager-view="content"] .manager-console__body { grid-template-columns: minmax(0, 1fr); }
.manager-report-row { display: grid; grid-template-columns: 105px minmax(0, 1fr) minmax(225px, auto); align-items: start; gap: 8px 18px; padding: 16px 0; border-bottom: 1px solid var(--ui-line); }
.manager-report-row:last-child { border-bottom: 0; }
.manager-report-row header { grid-row: 1 / span 2; display: flex; align-items: flex-start; flex-direction: column; gap: 6px; }
.manager-report-row footer { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: flex-end; flex-direction: column; gap: 12px; }
.manager-report-row header span { font-size: .72rem; font-weight: 850; }
.manager-report-row time, .manager-report__pending { color: var(--ui-dim); font-size: .67rem; }
.manager-report-row p { margin: 0; line-height: 1.55; }
.manager-report__summary { display: grid; gap: 6px; padding-left: 12px; border-left: 3px solid var(--ui-line-strong); }
.manager-report__summary > strong { font-size: .9rem; line-height: 1.4; }
.manager-report__summary > p { color: var(--ui-dim); font-size: .78rem; }
.manager-report__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--ui-dim); font-size: .68rem; }
.manager-report__meta a { color: var(--ui-ink); font-weight: 750; }
.manager-report__reason { grid-column: 2; display: flex; gap: 8px; font-size: .76rem; }
.manager-report__reason b { flex: 0 0 auto; }
.manager-report__target { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 800; }
.manager-report__target .icon { width: 13px; }
.manager-channel-row { padding: 13px 0; border-bottom: 1px solid var(--ui-line); }
.manager-channel-row > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.manager-channel-row > header > span { min-width: 0; display: grid; gap: 4px; }
.manager-channel-row > header small { color: var(--ui-dim); font-size: .7rem; }
.manager-channel-row [data-channel-edit-toggle] { min-height: 34px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--ui-ink); border-radius: 0; background: transparent; color: var(--ui-ink); box-shadow: none; }
.manager-channel-row [data-channel-edit-toggle]:hover,
.manager-channel-row [data-channel-edit-toggle]:focus-visible { background: transparent; color: var(--ui-ink); box-shadow: none; }
.manager-channel-edit { margin-top: 13px; padding: 13px 0 0; border: 0; border-top: 1px solid var(--ui-line); background: transparent; }
.manager-channel-edit > small { color: var(--ui-dim); font-size: .7rem; }
.manager-channel-create { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ui-line); }
.manager-channel-create h3 { margin: 0; font-size: .84rem; }
.comment:target { scroll-margin-top: 120px; outline: 2px solid var(--ui-ink); outline-offset: 4px; }
.manager-console__body .manager-console-safety form,
.manager-console__body .manager-exit-controls form,
.manager-console__body .permission-grid,
.manager-console__body .tab-policy-form { border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-paper-2); }

@media (max-width: 760px) {
  .manager-console__head { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 23px 20px; }
  .manager-console__head h1 { font-size: clamp(1.8rem, 8.5vw, 2.45rem); }
  .manager-console__head dl { width: 100%; min-width: 0; }
  .manager-console__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manager-console__nav a { justify-content: space-between; border-bottom: 1px solid var(--ui-line); }
  .manager-console__nav a:nth-child(even) { border-right: 0; }
  .manager-console__nav a:nth-last-child(-n + 2) { border-bottom: 0; }
  .manager-console__quick { grid-template-columns: minmax(0, 1fr); }
  .manager-console__quick a,
  .manager-console__quick a:nth-child(odd),
  .manager-console__quick a:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .manager-console__quick a:last-child { border-bottom: 0; }
  .manager-workload { grid-template-columns: minmax(0, 1fr); }
  .manager-workload > section + section { border-top: 1px solid var(--ui-line); border-left: 0; }
  .manager-report-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .manager-report-row header { grid-row: auto; align-items: center; flex-direction: row; justify-content: space-between; }
  .manager-report-row footer { grid-column: auto; grid-row: auto; align-items: flex-start; }
  .manager-report-row .inline-actions { width: 100%; }
  .manager-report-row .inline-actions > * { flex: 1 1 0; }
  .manager-report__reason { grid-column: auto; display: grid; gap: 3px; }
  .manager-channel-row > header { align-items: flex-start; }
  .manager-channel-row > header .inline-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* ==========================================================================
   Official unified UI
   The accepted title/search block stays intact. Everything below it follows
   PacPik's Pack/community rhythm: flat cards, restrained color, clear targets.
   ========================================================================== */
.official-system,
.pack-official-system { --official-accent: #a84432; }

.official-view-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  background: transparent;
}
.official-view-tabs button,
.official-view-tabs > a {
  min-height: 48px;
  padding: 8px 12px;
  justify-content: center;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ui-dim);
  font-size: .75rem;
  transition: border-color .16s ease, color .16s ease;
}
.official-view-tabs button:last-child,
.official-view-tabs > a:last-child { border-right: 0; }
.official-view-tabs button:hover,
.official-view-tabs > a:hover { color: var(--ui-ink); }
.official-view-tabs button b,
.official-view-tabs > a b {
  min-width: 0;
  height: auto;
  display: inline;
  border-radius: 0;
  background: transparent;
  color: var(--ui-faint);
}
.official-view-tabs button[aria-pressed="true"],
.official-view-tabs > a[aria-current="page"] {
  border-bottom-color: #20262b;
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
}
.official-view-tabs button[aria-pressed="true"] b,
.official-view-tabs > a[aria-current="page"] b { background: transparent; color: var(--ui-ink); }
.pack-official-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.official-subtabs {
  gap: 7px;
  padding: 0;
  border: 0;
}
.official-subtabs button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-paper);
}
.official-subtabs button[aria-pressed="true"] {
  border-color: var(--ui-line-strong);
  background: var(--ui-paper-2);
  color: var(--ui-ink);
  box-shadow: inset 0 -2px 0 var(--ui-ink);
}

.official-home-overview { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.official-home-focus,
.official-home-stream,
.official-results,
.pack-official-results,
.official-pack-index {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-paper);
  box-shadow: 0 10px 30px rgb(29 35 44 / 5%);
}
.official-home-focus { padding: clamp(18px, 2vw, 24px); }
.official-home-focus > header,
.official-home-stream > header,
.official-results > header,
.pack-official-results > header { margin-bottom: 13px; }
.official-home-focus > header > div > span { color: var(--official-accent); }
.official-home-summaries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.official-home-stream { padding: 18px; }
.official-home-stream > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.official-home-stream > header h2 { margin: 0 0 4px; font-size: .95rem; }
.official-home-stream > header p { margin: 0; color: var(--ui-dim); font-size: .68rem; }
.official-home-stream > header > a { flex: none; color: var(--ui-dim); font-size: .68rem; font-weight: 800; }
.official-home-stream .compact-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.official-home-stream .official-entry { min-height: 104px; }

.official-home-focus .compact-list,
.official-results > .compact-list,
.pack-official-results > .compact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.official-entry {
  min-height: 122px;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  background: var(--ui-paper);
}
.official-entry > time { color: var(--official-accent); }
.official-entry__identity .entity-icon { width: 29px; height: 29px; border-radius: 7px; }
.official-entry h3 { margin-top: 8px; font-size: .84rem; line-height: 1.45; }
.official-entry h3 > a:hover { color: var(--official-accent); }
.official-entry footer { margin-top: 9px; }
.official-entry footer > a { margin-left: auto; }

.official-results,
.pack-official-results { padding: clamp(18px, 2.5vw, 25px); }
.official-pack-index {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 15px;
}
.official-pack-index > header {
  margin: -15px -15px 3px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ui-line);
}
.official-pack-link {
  min-height: 64px;
  padding: 10px 11px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-paper-2);
}
.official-pack-link:nth-of-type(4n + 1) { border-left: 1px solid var(--ui-line); }
.official-pack-link:hover { border-color: var(--ui-line-strong); background: var(--ui-paper); }
.official-pack-link .entity-icon { width: 36px; height: 36px; border-radius: 8px; }

.official-benefit-group {
  min-height: 86px;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 12px;
  margin-top: 9px;
  padding: 13px 15px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  text-decoration: none;
}
.official-benefit-group:first-of-type { margin-top: 0; }
.official-benefit-group:hover { border-color: var(--ui-line-strong); transform: translateY(-1px); }
.official-benefit-group > .entity-icon { width: 44px; height: 44px; border-radius: 10px; }
.official-benefit-group h3 { margin: 3px 0 2px; font-size: .9rem; }
.official-benefit-group > div > small { display: block; overflow: hidden; color: var(--ui-dim); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.official-benefit-group > strong { color: var(--official-accent); }
.official-benefit-group__open {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  font-size: .67rem;
  font-weight: 850;
  white-space: nowrap;
}
.official-benefit-group__open .icon { width: 12px; }
.official-schedule-pack {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  background: var(--ui-paper-2);
}
.official-schedule-pack + .official-schedule-pack { margin-top: 10px; }
.official-schedule-pack > header { min-height: 44px; }

.pack-official-command {
  min-height: 142px;
  padding: 23px 25px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-paper);
  box-shadow: 0 10px 30px rgb(29 35 44 / 5%);
}
.pack-official-command > .entity-icon { width: 68px; height: 68px; border-radius: 15px; }
.pack-official-search { border-radius: 12px; }

/* Event detail uses the same hierarchy instead of the old oversized document. */
.event-detail {
  width: min(1180px, 100%);
  display: grid;
  gap: 14px;
  margin-inline: auto;
}
.event-detail__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 4px 2px;
  color: var(--ui-dim);
  font-size: .7rem;
}
.event-detail__breadcrumb a:hover { color: var(--ui-ink); }
.event-detail__hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 28px;
  padding: clamp(22px, 3.5vw, 38px);
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-paper);
  box-shadow: 0 12px 34px rgb(29 35 44 / 6%);
}
.event-detail__identity {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.event-detail__identity .entity-icon { width: 40px; height: 40px; border-radius: 10px; }
.event-detail__identity > div { display: grid; gap: 2px; }
.event-detail__identity span { color: #a84432; font-size: .64rem; font-weight: 850; }
.event-detail__identity a { font-size: .76rem; font-weight: 850; }
.event-detail__heading { min-width: 0; }
.event-detail__heading h1 {
  max-width: 28ch;
  margin: 0;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.045em;
  word-break: keep-all;
  text-wrap: balance;
}
.event-detail__heading p { margin: 10px 0 0; color: var(--ui-dim); font-size: .72rem; }
.event-actions { justify-content: flex-end; }
.event-action { min-height: 42px; border-radius: 8px; }
.event-detail__layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: 14px;
}
.event-detail__main { min-width: 0; display: grid; gap: 12px; }
.event-detail__summary {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-paper);
}
.event-detail__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.event-detail__facts > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ui-line);
}
.event-detail__facts > div:nth-child(odd) { border-right: 1px solid var(--ui-line); }
.event-detail__facts dt { color: var(--ui-dim); font-size: .72rem; }
.event-detail__facts dd { min-width: 0; margin: 0; font-size: .82rem; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.event-detail__facts dd small { display: block; margin-top: 3px; color: var(--ui-dim); font-size: .65rem; font-weight: 500; }
.event-detail__undated { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--ui-line); color: var(--ui-dim); font-size: .76rem; }
.event-detail__undated strong { color: var(--ui-ink); }
.event-detail__guidance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
}
.event-detail__guidance p { margin: 0; font-size: .82rem; line-height: 1.55; }
.event-detail__guidance small { display: block; margin-top: 4px; color: var(--ui-dim); font-size: .69rem; line-height: 1.5; }
.event-detail__guidance > a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 850; }
.event-detail__card {
  margin: 0;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: var(--ui-paper);
  box-shadow: 0 8px 26px rgb(29 35 44 / 4%);
}
.event-detail__card > header { margin-bottom: 14px; }
.event-detail__card > header > span { display: block; margin-bottom: 5px; color: #a84432; font-size: .6rem; font-weight: 900; letter-spacing: .04em; }
.event-detail__card .sectiontitle { margin: 0; font-size: 1rem; }
.event-detail__card .keyvalues { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.event-detail__card .keyvalues > div { min-height: 52px; border-bottom: 1px solid var(--ui-line); }
.event-detail__card .keyvalues dt { color: var(--ui-dim); }
.event-detail__action-card > p { max-width: 70ch; line-height: 1.7; }
.event-detail__rail {
  position: sticky;
  top: calc(var(--ui-header) + 18px);
  display: grid;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.event-detail__rail section {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  background: var(--ui-paper);
}
.event-detail__rail section + section { border-top: 1px solid var(--ui-line); }
.event-detail__rail section > span { color: #a84432; font-size: .61rem; font-weight: 900; }
.event-detail__rail h2 { margin: 7px 0; font-size: .9rem; overflow-wrap: anywhere; }
.event-detail__rail p { color: var(--ui-dim); font-size: .69rem; line-height: 1.55; }
.event-detail__rail section > a {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 12px;
  padding: 0 11px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 850;
}
.event-detail__pack { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; }
.event-detail__pack .entity-icon { width: 40px; height: 40px; border-radius: 10px; }
.event-detail__pack > a { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .official-view-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .official-view-tabs button,
  .official-view-tabs > a { border-bottom: 1px solid var(--ui-line); }
  .official-view-tabs button[aria-pressed="true"],
  .official-view-tabs > a[aria-current="page"] { border-bottom: 2px solid var(--ui-ink); }
  .official-pack-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .official-pack-link:nth-of-type(3n + 1) { border-left: 1px solid var(--ui-line); }
  .event-detail__layout { grid-template-columns: minmax(0, 1fr); }
  .event-detail__rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .official-view-tabs,
  .pack-official-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .official-view-tabs button,
  .official-view-tabs > a,
  .official-view-tabs button:nth-child(odd),
  .official-view-tabs > a:nth-child(odd),
  .official-view-tabs button:nth-child(even),
  .official-view-tabs > a:nth-child(even),
  .official-view-tabs button:nth-last-child(-n + 2),
  .official-view-tabs > a:nth-last-child(-n + 2) { min-height: 44px; padding-inline: 7px; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; }
  .official-view-tabs button[aria-pressed="true"],
  .official-view-tabs > a[aria-current="page"] { border-bottom: 2px solid var(--ui-ink); }
  .official-home-overview { gap: 10px; }
  .official-home-summaries { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .official-home-stream { padding: 15px; }
  .official-home-focus .compact-list,
  .official-results > .compact-list,
  .pack-official-results > .compact-list { grid-template-columns: minmax(0, 1fr); }
  .official-entry { min-height: 0; grid-template-columns: 57px minmax(0, 1fr); padding: 12px; }
  .official-pack-index { grid-template-columns: minmax(0, 1fr); padding: 11px; }
  .official-pack-index > header { margin: -11px -11px 1px; }
  .official-pack-index .official-pack-link { border: 1px solid var(--ui-line); }
  .official-benefit-group { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 12px; }
  .official-benefit-group > .entity-icon { width: 40px; height: 40px; }
  .official-benefit-group > strong { grid-column: 3; }
  .official-benefit-group__open { grid-column: 2 / -1; justify-self: start; }
  .pack-official-command { grid-template-columns: 52px minmax(0, 1fr); padding: 18px; }
  .pack-official-command > .entity-icon { width: 52px; height: 52px; border-radius: 12px; }
  .pack-official-command h1 { font-size: clamp(1.55rem, 7vw, 1.95rem); line-height: 1.1; }
  .pack-official-command > strong { grid-column: 2; }
  .event-detail { gap: 10px; }
  .event-detail__hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 19px; }
  .event-detail__identity { grid-column: 1; }
  .event-detail__heading h1 { max-width: none; font-size: clamp(1.55rem, 7vw, 2rem); line-height: 1.16; }
  .event-actions { width: 100%; justify-content: stretch; }
  .event-actions > * { flex: 1 1 auto; }
  .event-detail__card { padding: 18px 16px; }
  .event-detail__card .keyvalues { grid-template-columns: minmax(0, 1fr); }
  .event-detail__facts { grid-template-columns: minmax(0, 1fr); }
  .event-detail__facts > div:nth-child(odd) { border-right: 0; }
  .event-detail__facts > div { padding: 12px 14px; }
  .event-detail__guidance { align-items: flex-start; padding: 14px; }
  .event-detail__rail { grid-template-columns: minmax(0, 1fr); }
}

/* Post-side community controls: selection is a quiet typographic cue. */
.post-reading-rail .same-channel-board .community-feed-tabs {
  position: static;
  gap: 18px;
  margin: 0 0 9px;
  padding: 0;
  overflow: visible;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.post-reading-rail .same-channel-board .community-feed-tabs button,
.post-reading-rail .same-channel-board .community-feed-tabs a {
  min-height: 36px;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ui-dim);
  box-shadow: none;
}
.post-reading-rail .same-channel-board .community-feed-tabs button[aria-pressed="true"],
.post-reading-rail .same-channel-board .community-feed-tabs a[aria-current="page"] {
  border-bottom-color: var(--ui-ink);
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
}
.post-reading-rail .same-channel-board .feed-sort { gap: 12px; }
.post-reading-rail .same-channel-board .feed-sort__item {
  min-height: 28px;
  padding: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.post-reading-rail .same-channel-board .feed-sort__item[aria-current="true"],
.post-reading-rail .same-channel-board .feed-sort__item[aria-pressed="true"] {
  border-bottom-color: var(--ui-ink);
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
}
.post-reading-rail .same-channel-board .board-row.is-active {
  background: var(--ui-paper-2);
  box-shadow: none;
}
.post-reading-rail .same-channel-board .board-row.is-active > a { border-left: 0; }
.post-reading-rail .same-channel-board .board-row.is-active strong { color: var(--ui-ink); }

/* The same quiet rule applies to the main community screen. */
.community-feed-tabs {
  gap: 6px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 18%, var(--ui-line));
  border-radius: 10px;
  background: var(--ui-paper);
  box-shadow: none;
}
.community-feed-tabs button,
.community-feed-tabs a {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
}
.community-feed-tabs button[aria-pressed="true"],
.community-feed-tabs a[aria-current="page"] {
  border-color: var(--ui-line);
  background: var(--ui-paper-2);
  color: var(--ui-ink);
  box-shadow: none;
}
.community-channel-rail .channel-link.is-current {
  border-color: transparent;
  background: var(--ui-paper-2);
  color: var(--ui-ink);
  box-shadow: none;
}
.community-channel-rail .channel-link.is-current span { color: var(--ui-ink); }

/* Pack and HubPack discovery uses quiet text tabs instead of colored pills. */
.discovery-toolbar .discovery-filter-rails { gap: 0; }
.discovery-toolbar .filter-group {
  gap: 16px;
  padding: 7px 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--ui-line);
}
.discovery-toolbar .filter-group:first-child { border-top: 0; }
.discovery-toolbar .filter-group::-webkit-scrollbar { display: none; }
.discovery-toolbar .filter-button {
  min-height: 34px;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ui-dim);
  box-shadow: none;
}
.discovery-toolbar .filter-button:hover {
  border-bottom-color: var(--ui-line-strong);
  background: transparent;
  color: var(--ui-ink);
}
.discovery-toolbar .filter-button[aria-pressed="true"] {
  border-color: transparent;
  border-bottom-color: var(--ui-ink);
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
}
.discovery-sort .filter-button[aria-pressed="true"] { font-weight: 900; }

@media (max-width: 760px) {
  .discovery-toolbar .filter-group { gap: 14px; padding-block: 6px; }
  .discovery-toolbar .filter-button { min-height: 40px; }
}

/* Games registration: one short start form, then one task at a time. */
.games-registration {
  --games-registration-accent: #ff7651;
  --games-registration-ink: #191b1f;
  --games-registration-line: #d3d6d2;
  padding-bottom: 56px;
}
.games-registration-start,
.games-registration-workspace {
  --ui-paper: #fbfbfa;
  --ui-paper-2: #f5f5f2;
  --ui-ink: #191b1f;
  --ui-dim: #666a70;
  --ui-line: #d3d6d2;
  --ui-line-strong: #bdc1bd;
  color-scheme: light;
}
.games-registration .games-local-header { border-bottom-color: #373b42; background: #111214; color: #f7f7f5; }
.games-registration .games-local-header nav a { color: #b5b9bf; }
.games-registration .games-local-header nav a:hover,
.games-registration .games-local-header nav a[aria-current="page"] { border-bottom-color: var(--games-registration-accent); color: #fff; }
.games-registration .games-local-apply { border-color: #50545a; color: #fff; }
.games-registration .games-local-apply span { color: var(--games-registration-accent); }
.games-registration .games-local-apply:hover,
.games-registration .games-local-apply[aria-current="page"] { border-color: var(--games-registration-accent); background: #24272c; }
.games-registration a:focus-visible,
.games-registration button:focus-visible,
.games-registration input:focus-visible,
.games-registration select:focus-visible,
.games-registration textarea:focus-visible,
.games-registration summary:focus-visible { outline: 2px solid #c55738; outline-offset: 2px; }

.games-registration-start {
  width: min(900px, calc(100% - 40px));
  margin: 34px auto 0;
  overflow: hidden;
  border: 1px solid var(--games-registration-line);
  background: #fff;
  color: #1a1c20;
}
.games-registration-start__head {
  min-height: 150px;
  padding: 30px 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: end;
  gap: 36px;
  border-bottom: 1px solid var(--games-registration-line);
}
.games-registration-start__head > div > span { color: #c55738; font-size: 12px; font-weight: 900; }
.games-registration-start__head h1 { max-width: 17ch; margin: 8px 0 10px; font-size: clamp(2.15rem, 4.5vw, 3.45rem); line-height: 1.02; letter-spacing: -.055em; word-break: keep-all; }
.games-registration-start__head > div > p { max-width: 590px; margin: 0; color: #5f646b; font-size: 14px; line-height: 1.65; word-break: keep-all; }
.games-registration-start__head aside { padding-left: 20px; border-left: 1px solid var(--games-registration-line); }
.games-registration-start__head aside b { color: #202226; font-size: 13px; }
.games-registration-start__head aside p { margin: 6px 0 0; color: #6c7077; font-size: 12px; line-height: 1.55; }

.games-registration-form { display: grid; }
.games-registration-form > section { padding: 28px 34px 30px; border-bottom: 1px solid var(--games-registration-line); }
.games-registration-form > section > header { margin-bottom: 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.games-registration-form > section > header h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.games-registration-form > section > header p { max-width: 480px; margin: 0; color: #6a6e74; font-size: 13px; line-height: 1.55; text-align: right; }
.games-registration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 15px; }
.games-registration-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.games-registration .games-field { gap: 8px; color: #2a2d31; font-size: 14px; font-weight: 800; }
.games-registration .games-field small { color: #70747a; font-size: 12px; font-weight: 550; line-height: 1.55; }
.games-registration .games-field input:not([type="checkbox"]),
.games-registration .games-field select,
.games-registration .games-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #bdc1bd;
  border-radius: 4px;
  outline: 0;
  background: #fbfbfa;
  color: #191b1f;
  font-size: 14px;
}
.games-registration .games-field textarea { min-height: 116px; padding-block: 11px; resize: vertical; line-height: 1.6; }
.games-registration .games-field input:focus,
.games-registration .games-field select:focus,
.games-registration .games-field textarea:focus { border-color: #9d462e; box-shadow: 0 0 0 3px rgb(255 118 81 / 17%); }
.games-registration-advanced { border-bottom: 1px solid var(--games-registration-line); }
.games-registration-advanced > summary { min-height: 54px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: #303338; font-size: 13px; font-weight: 800; list-style: none; }
.games-registration-advanced > summary::-webkit-details-marker { display: none; }
.games-registration-advanced > summary::after { content: '+'; color: #73777e; font-size: 18px; }
.games-registration-advanced[open] > summary::after { content: '−'; }
.games-registration-advanced > div { padding: 0 34px 28px; }
.games-registration-form > footer { min-height: 88px; padding: 18px 24px 18px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--games-registration-ink); color: #fff; }
.games-registration-form > footer b { font-size: 13px; }
.games-registration-form > footer p { margin: 4px 0 0; color: #b7bbc0; font-size: 12px; }
.games-registration-form button,
.games-registration-panel form > footer button,
.games-registration-upload__actions button,
.games-registration-submit-actions [data-action="submit"] {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--games-registration-accent);
  border-radius: 4px;
  background: var(--games-registration-accent);
  color: #191b1f;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}
.games-registration-form button:hover,
.games-registration-panel form > footer button:hover,
.games-registration-upload__actions button:hover,
.games-registration-submit-actions [data-action="submit"]:hover { border-color: #ff8c6d; background: #ff8c6d; }
.games-registration button:disabled { cursor: not-allowed; opacity: .52; }
.games-registration-status { width: min(900px, calc(100% - 40px)); min-height: 24px; margin: 10px auto 0; color: #8f3d27; font-size: 13px; }
.games-registration-status[data-bad="true"] { padding: 11px 13px; border-left: 3px solid #b94c3a; background: #fbefec; color: #843529; }

.games-registration-detail { width: min(1240px, calc(100% - 40px)); margin: 26px auto 0; }
.games-registration-detail > .games-registration-status { width: 100%; margin-block: 10px; }
.games-registration-summary { min-height: 158px; padding: 25px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr); align-items: center; gap: 38px; border: 1px solid #34373c; background: var(--games-registration-ink); color: #fff; }
.games-registration-summary > div:first-child > span { color: var(--games-registration-accent); font-size: 11px; font-weight: 900; }
.games-registration-summary h1 { max-width: 22ch; margin: 6px 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.08; letter-spacing: -.045em; }
.games-registration-summary > div:first-child > p { margin: 0 0 15px; color: #bfc2c7; font-size: 13px; line-height: 1.55; }
.games-registration-summary [data-next-action] { min-height: 42px; padding: 0 14px; border: 1px solid #62666d; border-radius: 3px; background: transparent; color: #fff; cursor: pointer; font-size: 12px; font-weight: 850; }
.games-registration-summary [data-next-action]:hover { border-color: var(--games-registration-accent); color: var(--games-registration-accent); }
.games-registration-progress { min-width: 0; }
.games-registration-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.games-registration-progress > div span { color: #b8bbc0; font-size: 12px; }
.games-registration-progress > div b { color: #fff; font-size: 15px; }
.games-registration-progress > i { height: 4px; margin-top: 8px; display: block; overflow: hidden; background: #45494f; }
.games-registration-progress > i span { height: 100%; display: block; background: var(--games-registration-accent); transition: width .2s ease; }
.games-registration-progress dl { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #3d4147; }
.games-registration-progress dl div { min-width: 0; padding: 12px 9px 0; border-left: 1px solid #3d4147; }
.games-registration-progress dl div:first-child { padding-left: 0; border-left: 0; }
.games-registration-progress dt { color: #8f949b; font-size: 10px; }
.games-registration-progress dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #f0f1f2; font-size: 12px; font-weight: 800; }

.games-registration-workspace { min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); border: 1px solid var(--games-registration-line); border-top: 0; background: #fff; }
.games-registration-checklist { padding: 22px 14px; border-right: 1px solid var(--games-registration-line); background: #f4f4f1; }
.games-registration-checklist h2 { margin: 0 8px 12px; color: #575b61; font-size: 12px; }
.games-registration-checklist button { width: 100%; min-height: 57px; padding: 8px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; border: 0; border-top: 1px solid #dedfdb; border-radius: 0; background: transparent; color: #60646a; cursor: pointer; text-align: left; }
.games-registration-checklist button:last-child { border-bottom: 1px solid #dedfdb; }
.games-registration-checklist button > i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #c5c8c4; border-radius: 50%; color: #74787e; font: 800 10px/1 var(--mono); }
.games-registration-checklist button > span { min-width: 0; display: grid; gap: 2px; }
.games-registration-checklist button b { color: #34373c; font-size: 13px; }
.games-registration-checklist button small { color: #777b81; font-size: 11px; }
.games-registration-checklist button[aria-selected="true"] { background: #fff; color: #191b1f; }
.games-registration-checklist button[aria-selected="true"] > i { border-color: var(--games-registration-ink); background: var(--games-registration-ink); color: #fff; }
.games-registration-checklist button[data-state="done"] > i::after { content: '✓'; }
.games-registration-checklist button[data-state="done"] > i { font-size: 0; border-color: #71766f; background: #fff; color: #334039; }
.games-registration-checklist button[data-state="done"] > i::after { font: 900 13px/1 sans-serif; }
.games-registration-checklist button[data-state="doing"] > i { border-color: var(--games-registration-accent); color: #a8442b; }
.games-registration-panels { min-width: 0; }
.games-registration-panel { min-width: 0; padding: 30px 34px 36px; color: #1b1d21; scroll-margin-top: calc(var(--ui-header, 74px) + 16px); }
.games-registration-panel[hidden] { display: none; }
.games-registration-panel > header { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--games-registration-line); }
.games-registration-panel > header h2 { margin: 0; outline: 0; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.2; letter-spacing: -.03em; word-break: keep-all; }
.games-registration-panel > header p { max-width: 760px; margin: 8px 0 0; color: #696d73; font-size: 13px; line-height: 1.65; word-break: keep-all; }
.games-registration-panel form > footer { margin-top: 24px; padding-top: 18px; display: flex; justify-content: flex-end; border-top: 1px solid var(--games-registration-line); }
.games-registration-panel .games-registration-flow { margin-top: 24px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--games-registration-line); }
.games-registration-panel .games-registration-flow__back,
.games-registration-submit-actions .games-registration-flow__back { min-height: 46px; padding: 0 16px; border: 1px solid #b9bdb9; border-radius: 4px; background: #fff; color: #4d5157; cursor: pointer; font-size: 12px; font-weight: 800; }
.games-registration-panel .games-registration-flow__back:hover,
.games-registration-submit-actions .games-registration-flow__back:hover { border-color: #62666d; background: #f4f4f1; }
.games-registration-panel .games-registration-flow__back:disabled { visibility: hidden; }
.games-registration-panel form :disabled { opacity: .62; }
.games-registration-check { min-height: 58px; margin-top: 16px; padding: 10px 12px; display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--games-registration-line); border-bottom: 1px solid var(--games-registration-line); font-size: 13px; }
.games-registration-check input { width: 18px; height: 18px; min-height: 18px; flex: none; accent-color: #1d2024; }
.games-registration-check span { display: grid; gap: 3px; }
.games-registration-check small { color: #72767c; font-size: 11px; }
.games-registration-pack { min-height: 52px; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--games-registration-line); color: #666a70; font-size: 12px; }
.games-registration-pack b { color: #2d3035; font-size: 12px; overflow-wrap: anywhere; text-align: right; }

.games-registration-panel .games-proof-status li { border-color: #d1d3cf; background: #f6f6f3; }
.games-registration-panel .games-proof-status li b { color: #303338; }
.games-registration-panel .games-proof-status li p,
.games-registration-panel .games-proof-help { color: #666b70; }
.games-registration-panel .games-proof-primary { border-color: #c7cac6; border-radius: 4px; background: #fff; }
.games-registration-panel .games-proof-primary > form,
.games-registration-panel .games-proof-primary__intro { padding: 22px; }
.games-registration-panel .games-proof-primary__intro { background: #f3f3ef; }
.games-registration-panel .games-proof-primary__intro > span { color: #a8442b; }
.games-registration-panel .games-proof-primary h3,
.games-registration-panel .games-proof-primary label { color: #282b30; }
.games-registration-panel .games-proof-primary ol li { color: #555a60; }
.games-registration-panel .games-proof-primary ol li::before { border-color: #bfc2be; color: #91432d; }
.games-registration-panel .games-proof-primary > form { border-left-color: #d1d3cf; }
.games-registration-panel .games-proof-primary label small { color: #70747a; }
.games-registration-panel .games-proof-primary input { border-color: #bfc2be; color: #191b1f; }
.games-registration-panel .games-proof-primary input:focus { border-color: #9d462e; box-shadow: 0 0 0 3px rgb(255 118 81 / 17%); }
.games-registration-panel .games-proof-primary button,
.games-registration-panel .games-proof-method button,
.games-registration-panel .games-proof-result button { border-color: var(--games-registration-accent); background: var(--games-registration-accent); color: #191b1f; }
.games-registration-panel .games-proof-alternatives { border-top-color: #d3d6d2; }
.games-registration-panel .games-proof-alternatives > summary { color: #34373c; }
.games-registration-panel .games-proof-method { border-color: #d1d3cf; }
.games-registration-panel .games-proof-method > summary b { color: #34373c; }
.games-registration-panel .games-proof-method > summary small { color: #74787e; }
.games-registration-panel .games-proof-result { border-radius: 4px; }
.games-registration-panel .games-proof-status li,
.games-registration-panel .games-proof-method { border-radius: 4px; }

.games-registration-upload { display: grid; gap: 17px; }
.games-upload-surface { min-height: 126px; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; border: 1px dashed #969b96; background: #f6f6f3; cursor: pointer; }
.games-upload-surface:focus-within { border-color: #9d462e; box-shadow: 0 0 0 3px rgb(255 118 81 / 17%); }
.ui-app .games-registration .games-upload-surface input[type="file"] {
  position: absolute;
  width: 1px;
  min-height: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
}
.games-upload-surface > span { display: grid; gap: 7px; }
.games-upload-surface b { color: #202327; font-size: 16px; }
.games-upload-surface small { color: #70747a; font-size: 12px; line-height: 1.5; }
.games-upload-surface strong { max-width: 280px; color: #42464b; font-size: 12px; overflow-wrap: anywhere; text-align: right; }
.games-registration-upload__actions { display: flex; justify-content: flex-end; }
.games-registration-assets { display: grid; border-top: 1px solid var(--games-registration-line); }
.games-registration-assets > p { margin: 0; padding: 17px 2px; color: #73777c; font-size: 13px; }
.games-registration-assets > div { min-height: 50px; padding: 0 2px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--games-registration-line); color: #6b6f74; font-size: 12px; }
.games-registration-assets > div b { color: #2d3035; }

.games-registration-options { margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; border-top: 1px solid var(--games-registration-line); }
.games-registration-options legend { padding: 0 0 12px; color: #2b2e32; font-size: 14px; font-weight: 850; }
.games-registration-options label { min-height: 50px; padding: 0 10px; display: flex; align-items: center; gap: 9px; border-right: 1px solid var(--games-registration-line); border-bottom: 1px solid var(--games-registration-line); color: #41454a; font-size: 12px; }
.games-registration-options label:nth-of-type(3n) { border-right: 0; }
.games-registration-options input { width: 18px; height: 18px; min-height: 18px; accent-color: #1d2024; }
.games-registration-conditions { margin-top: 18px; }
.games-registration-consents { margin: 0; padding: 0; display: grid; border: 0; border-top: 1px solid var(--games-registration-line); }
.games-registration-consents label { min-height: 55px; padding: 10px 2px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--games-registration-line); color: #33363b; font-size: 13px; line-height: 1.5; }
.games-registration-consents input { width: 18px; height: 18px; min-height: 18px; flex: none; accent-color: #1d2024; }

.games-submit-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--games-registration-line); }
.games-submit-checks > div { min-height: 64px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-right: 1px solid var(--games-registration-line); border-bottom: 1px solid var(--games-registration-line); }
.games-submit-checks > div:nth-child(2n) { border-right: 0; }
.games-submit-checks b { color: #303338; font-size: 13px; }
.games-submit-checks span { color: #8a3a25; font-size: 11px; font-weight: 850; }
.games-submit-checks [data-state="done"] span { color: #37634f; }
.games-registration-submit-actions { margin-top: 24px; padding-top: 18px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--games-registration-line); }
.games-registration-submit-actions [data-action="withdraw"] { min-height: 46px; padding: 0 16px; border: 1px solid #b9bdb9; border-radius: 4px; background: #fff; color: #4d5157; cursor: pointer; font-size: 12px; font-weight: 800; }

@media (max-width: 980px) {
  .games-registration-summary { grid-template-columns: 1fr; gap: 24px; }
  .games-registration-workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .games-registration-panel { padding-inline: 25px; }
}

@media (max-width: 760px) {
  .games-registration { padding-bottom: 34px; }
  .games-registration-start,
  .games-registration-detail { width: calc(100% - 24px); margin-top: 16px; }
  .games-registration-start__head { min-height: 0; padding: 25px 20px; grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .games-registration-start__head h1 { max-width: 12ch; font-size: clamp(2rem, 10vw, 2.75rem); }
  .games-registration-start__head > div > p { font-size: 13px; }
  .games-registration-start__head aside { padding: 16px 0 0; border-top: 1px solid var(--games-registration-line); border-left: 0; }
  .games-registration-form > section { padding: 24px 20px 26px; }
  .games-registration-form > section > header { align-items: flex-start; flex-direction: column; gap: 7px; }
  .games-registration-form > section > header p { text-align: left; }
  .games-registration-grid { grid-template-columns: 1fr; gap: 16px; }
  .games-registration-advanced > summary { min-height: 58px; padding-inline: 20px; }
  .games-registration-advanced > div { padding-inline: 20px; }
  .games-registration-form > footer { padding: 20px; align-items: stretch; flex-direction: column; }
  .games-registration-form > footer button { width: 100%; min-height: 50px; }
  .games-registration-status { width: calc(100% - 24px); }
  .games-registration-summary { min-height: 0; padding: 23px 20px; }
  .games-registration-summary h1 { max-width: 100%; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 2rem; }
  .games-registration-summary [data-next-action] { width: 100%; min-height: 46px; }
  .games-registration-progress dl { grid-template-columns: 1fr; }
  .games-registration-progress dl div { min-height: 48px; padding: 10px 0; display: flex; align-items: center; justify-content: space-between; border-left: 0; border-bottom: 1px solid #3d4147; }
  .games-registration-progress dl div:last-child { border-bottom: 0; }
  .games-registration-progress dd { margin: 0; text-align: right; }
  .games-registration-workspace { grid-template-columns: 1fr; }
  .games-registration-checklist { padding: 14px 12px; border-right: 0; border-bottom: 1px solid var(--games-registration-line); }
  .games-registration-checklist h2 { margin-block: 2px 10px; }
  .games-registration-checklist button { min-height: 50px; }
  .games-registration-checklist button > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .games-registration-checklist button b,
  .games-registration-checklist button small { white-space: nowrap; }
  .games-registration-panel { padding: 24px 18px 30px; }
  .games-registration-panel > header h2 { font-size: 1.45rem; }
  .games-registration-panel > header p { font-size: 12px; }
  .games-upload-surface { min-height: 142px; grid-template-columns: 1fr; align-content: center; }
  .games-upload-surface strong { max-width: none; text-align: left; }
  .games-registration-upload__actions button,
  .games-registration-panel form > footer button { width: 100%; min-height: 48px; }
  .games-registration-panel .games-registration-flow { display: grid; grid-template-columns: minmax(88px, .38fr) minmax(0, 1fr); }
  .games-registration-panel .games-registration-flow button { width: 100%; min-height: 48px; }
  .games-registration-options { grid-template-columns: 1fr; }
  .games-registration-options label,
  .games-registration-options label:nth-of-type(3n) { border-right: 0; }
  .games-submit-checks { grid-template-columns: 1fr; }
  .games-submit-checks > div { border-right: 0; }
  .games-registration-submit-actions { flex-direction: column; }
  .games-registration-submit-actions button { width: 100%; min-height: 48px; }
  .games-registration-panel .games-proof-primary { grid-template-columns: 1fr; }
  .games-registration-panel .games-proof-primary > form { border-top: 1px solid #cbd7d3; border-left: 0; }
}

/* 전체 커뮤니티는 Pack 선택 화면이 아니라 글에서 시작한다. */
.community-overview { display: grid; gap: 12px; }
.community-overview__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 3.2vw, 40px);
  border: 1px solid var(--ui-line-strong);
  border-radius: 12px;
  background: var(--ui-paper);
}
.community-overview__head h1 { margin: 7px 0 9px; font-size: clamp(2rem, 3.2vw, 3.15rem); line-height: 1.08; letter-spacing: -.045em; word-break: keep-all; }
.community-overview__head p { max-width: 720px; margin: 0; color: var(--ui-dim); line-height: 1.65; word-break: keep-all; }
.community-overview__head form { min-height: 48px; display: grid; grid-template-columns: 46px minmax(0, 1fr); border: 1px solid var(--ui-line-strong); border-radius: 8px; background: var(--ui-paper-2); overflow: hidden; }
.community-overview__head form button { display: grid; place-items: center; border: 0; border-right: 1px solid var(--ui-line); background: transparent; color: var(--ui-dim); cursor: pointer; }
.community-overview__head form button .icon { width: 18px; }
.community-overview__head form input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ui-ink); padding: 0 14px; outline: 0; }
.community-overview__head form:focus-within { border-color: var(--ui-ink); }
.community-overview__tabs { min-height: 48px; display: flex; align-items: stretch; gap: 22px; padding: 0 20px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); }
.community-overview__tabs a { position: relative; display: inline-flex; align-items: center; gap: 7px; color: var(--ui-dim); font-size: 13px; font-weight: 800; }
.community-overview__tabs a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; content: ""; }
.community-overview__tabs a[aria-current="page"] { color: var(--ui-ink); }
.community-overview__tabs a[aria-current="page"]::after { background: var(--ui-ink); }
.community-overview__tabs b { min-width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: 10px; }
.community-overview__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); align-items: start; gap: 12px; }
.community-overview__feed,
.community-overview__scopes { border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); overflow: hidden; }
.community-overview__feed > header,
.community-overview__scopes > header { padding: 20px 22px 16px; border-bottom: 1px solid var(--ui-line); }
.community-overview__feed h2,
.community-overview__scopes h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.02em; }
.community-overview__feed header p { margin: 6px 0 0; color: var(--ui-dim); font-size: 12px; }
.community-overview__posts { padding: 0 22px 8px; }
.community-overview__posts .post-row { min-height: 66px; }
.community-overview__posts .module-empty { min-height: 190px; border: 0; }
.community-overview__scopes .eyebrow { display: block; margin-bottom: 6px; }
.community-scope-list { padding: 4px 14px; }
.community-scope-link { min-height: 58px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 10px; border-bottom: 1px solid var(--ui-line); }
.community-scope-link:last-child { border-bottom: 0; }
.community-scope-link .entity-icon { width: 34px; height: 34px; border-radius: 8px; }
.community-scope-link > span { min-width: 0; display: grid; gap: 2px; }
.community-scope-link strong { overflow: hidden; color: var(--ui-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.community-scope-link small { color: var(--ui-dim); font-size: 10px; }
.community-scope-link > .icon,
.community-scope-link > b { width: 14px; color: var(--ui-dim); font-size: 12px; }
.community-overview__scopes > nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ui-line); }
.community-overview__scopes > nav a { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--ui-ink); font-size: 11px; font-weight: 800; }
.community-overview__scopes > nav a + a { border-left: 1px solid var(--ui-line); }
.community-overview__scopes > nav .icon { width: 13px; }

@media (max-width: 820px) {
  .community-overview__head { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 23px 20px; }
  .community-overview__head h1 { font-size: clamp(2rem, 9vw, 2.7rem); }
  .community-overview__layout { grid-template-columns: minmax(0, 1fr); }
  .community-overview__scopes { order: 2; }
  .community-scope-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
}

@media (max-width: 520px) {
  .community-overview { gap: 9px; }
  .community-overview__tabs { gap: 18px; padding-inline: 15px; }
  .community-overview__feed > header,
  .community-overview__scopes > header { padding: 17px 16px 14px; }
  .community-overview__posts { padding-inline: 16px; }
  .community-scope-list { grid-template-columns: minmax(0, 1fr); padding-inline: 12px; }
  .community-overview__head form { min-height: 46px; }
}

/* Games discovery keeps browsing on one page; game launch starts from the detail page. */
.games-home-intro {
  min-height: 164px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  border-bottom: 1px solid #3d4147;
  background: #15171b;
  color: #f6f7f8;
}
.games-home-intro h1 {
  max-width: 850px;
  margin: 7px 0 0;
  font-size: clamp(1.75rem, 2.8vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.045em;
  word-break: keep-all;
}
.games-home-intro p { max-width: 760px; margin: 10px 0 0; color: #b9bec4; font-size: .82rem; line-height: 1.6; word-break: keep-all; }
.games-home-intro__actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.games-home-intro__actions .button-secondary { border-color: #555b62; background: #1b1d21; color: #f5f6f7; }
.games-home-shelves { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.games-shelf { min-width: 0; padding: 17px; border: 1px solid #c9c7c1; border-radius: 7px; background: #f8f7f3; }
.games-shelf__grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, calc((100% - 27px) / 4)); grid-template-columns: none; gap: 9px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.games-shelf__grid::-webkit-scrollbar { display: none; }
.games-shelf__grid > .games-card { scroll-snap-align: start; }
.games-shelf .games-card__media { aspect-ratio: 2 / 1; }
.games-shelf__grid + .mobile-rail-dots:not([hidden]) { min-height: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 5px; }
.games-shelf__grid + .mobile-rail-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-line-strong); }
.games-shelf__grid + .mobile-rail-dots i.is-current { background: var(--ui-ink); }
.games-shelf .games-module__head { min-height: 58px; }
.games-shelf .games-module__head p { max-width: 34ch; }
.games-card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.games-card__actions button,
.games-card__actions a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid #c5c9c7;
  border-radius: 4px;
  background: #f8f7f3;
  color: #35383a;
  font: 850 .64rem/1 var(--sans);
  cursor: pointer;
}
.games-card__actions button[aria-pressed="true"] { border-color: #c55738; background: #ff7651; color: #17181a; }
.games-card__actions button:disabled { cursor: wait; opacity: .7; }
.games-card__actions .games-card__detail { border-color: #393d42; background: #202329; color: #fff; }
.games-card__actions .games-card__detail:hover { border-color: #a7462c; background: #2d3035; color: #fff; }
.games-card__status { min-height: 0; margin: 5px 0 0; color: #56605d; font-size: .58rem; line-height: 1.35; }
.games-card__status:empty { display: none; }
.games-card__status[data-bad="true"] { color: #a53c26; }

@media (max-width: 980px) {
  .games-shelf__grid { grid-auto-columns: minmax(220px, calc((100% - 18px) / 3)); }
}

@media (max-width: 720px) {
  .games-home-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-inline: -12px; padding: 23px 18px; }
  .games-home-intro h1 { max-width: 18ch; font-size: clamp(1.7rem, 8vw, 2.15rem); }
  .games-home-intro p { font-size: .75rem; }
  .games-home-intro__actions { justify-content: start; }
  .games-home-intro__actions .button { flex: 1 1 calc(50% - 4px); min-height: 46px; justify-content: center; }
  .games-shelf { margin-inline: -12px; padding: 15px 12px; border-inline: 0; border-radius: 0; }
  .games-shelf__grid { grid-auto-columns: min(78vw, 280px); }
  .games-card__actions button,
  .games-card__actions a { min-height: 44px; }
}

@media (max-width: 440px) {
  .games-shelf .games-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .games-shelf .games-card__media { height: 100%; min-height: 154px; aspect-ratio: auto; border-right: 1px solid #c9c7c1; border-bottom: 0; }
  .games-shelf .games-card__desc { display: none; }
}

/* ── 「불러오는 중」 상자는 그리지 않는다 ─────────────────────────────────────────
 * 홈·라이브·팩·커뮤니티가 첫 화면과 화면 바뀔 때 회색 상자에 빙글 도는 표시와
 * 「콘텐츠를 불러오는 중입니다」를 띄웠다. 2026-09-02 오너: 「로딩 때 이상한 거 안 뜨게
 * 해라 — 라이브도 홈도 여러 곳 전부」. 자료가 오면 그 자리에 내용이 들어오고, 안 오면
 * 그 칸은 그냥 비어 있다. 상자가 있다가 사라지는 것이 «깜빡임»이었다.
 * markup 은 남긴다 — 화면 낭독기에는 aria-busy 가 상태를 말하고, 시험 계약도 그 위에 있다. */
.state-panel:has(> .loading-signal),
.route-loading,
.loading-signal,
.proposal-discovery__loading,
.mega-live-list > small:only-child { display: none !important; }

/* ============================================================
   Advertising rates — plain-language placement catalogue
   Visual order: real position -> rendered size -> price -> booking.
   ============================================================ */
.ads-rate-experience {
  margin-inline: 0;
  padding-bottom: 72px;
  background: #f3f1ea;
  color: #202226;
  box-shadow: 0 0 0 100vmax #f3f1ea;
  clip-path: inset(0 -100vmax);
  color-scheme: light;
}
.ads-rate-hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cbc8bf;
  border-radius: 10px;
  background: #fbfaf6;
}
.ads-rate-hero::after { display: none; }
.ads-rate-hero > div:first-child { padding: clamp(34px, 5vw, 68px); }
.ads-rate-hero .eyebrow { color: #bb3f2e; font-size: .68rem; font-weight: 900; letter-spacing: .13em; }
.ads-rate-hero h1 {
  max-width: 820px;
  margin: 12px 0 16px;
  color: #202226;
  font-size: clamp(2.55rem, 5.3vw, 5.35rem);
  line-height: 1.02;
  letter-spacing: -.065em;
  word-break: keep-all;
  text-wrap: balance;
}
.ads-rate-hero p { max-width: 680px; margin: 0; color: #646464; font-size: .94rem; line-height: 1.75; word-break: keep-all; }
.ads-rate-hero__jumps { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; }
.ads-rate-hero__jumps a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #bdbab2;
  border-radius: 5px;
  background: #fff;
  color: #27282b;
  font-size: .76rem;
  font-weight: 850;
  text-decoration: none;
}
.ads-rate-hero__jumps a:first-child { border-color: #25272a; background: #25272a; color: #fff; }
.ads-rate-hero__action {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(28px, 4vw, 48px);
  border-left: 1px solid #cbc8bf;
  background: #202226;
  color: #fff;
  text-align: left;
}
.ads-rate-hero__action > strong { max-width: 15ch; font-size: 1.15rem; line-height: 1.35; word-break: keep-all; }
.ads-rate-hero__action p { color: #c9c9c7; font-size: .78rem; line-height: 1.65; }
.ads-rate-hero__action .solid-button { width: 100%; margin-top: 8px; border-radius: 5px; background: #ff7651; color: #18191b; }
.ads-rate-main { width: min(1240px, calc(100% - 32px)); display: grid; gap: 18px; margin: 18px auto 0; }
.rate-mobile-menu { display: none; }
.rate-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #cbc8bf;
  border-radius: 8px;
  background: #fbfaf6;
}
.rate-summary > div { min-height: 108px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 19px 22px; }
.rate-summary > div + div { border-left: 1px solid #d8d5cd; }
.rate-summary span { color: #b94030; font-size: .65rem; font-weight: 900; letter-spacing: .08em; }
.rate-summary strong { font-size: 1rem; }
.rate-summary small { color: #77766f; font-size: .67rem; }
.rate-section {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid #cbc8bf;
  border-radius: 9px;
  background: #fbfaf6 !important;
}
.rate-section > header { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; max-width: 900px; margin-bottom: 28px; }
.rate-section > header > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #d0b3aa; border-radius: 50%; background: #fff2ec; color: #b94030; font-size: .68rem; font-weight: 900; }
.rate-section > header h2 { margin: 0 0 8px; color: #202226; font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.16; letter-spacing: -.045em; word-break: keep-all; }
.rate-section > header p { max-width: 760px; margin: 0; color: #676762; font-size: .82rem; line-height: 1.7; word-break: keep-all; }
.rate-device-jumps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
.rate-device-jumps a {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 16px 20px;
  border: 1px solid #aaa8a1;
  border-radius: 7px;
  background: #fff;
  color: #25272a;
  text-decoration: none;
}
.rate-device-jumps a:first-child { background: #25272a; color: #fff; }
.rate-device-jumps strong { font-size: 1rem; }
.rate-device-jumps span { color: inherit; font-size: .7rem; opacity: .72; }
.rate-device-block { scroll-margin-top: calc(var(--ui-header) + 16px); }
.rate-device-block + .rate-device-block { margin-top: 42px; padding-top: 38px; border-top: 1px solid #cbc8bf; }
.rate-device-block > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 24px; align-items: end; margin-bottom: 16px; }
.rate-device-block > header span { color: #b94030; font-size: .64rem; font-weight: 900; letter-spacing: .12em; }
.rate-device-block > header h3 { margin: 5px 0 0; font-size: 1.35rem; letter-spacing: -.035em; }
.rate-device-block > header p { margin: 0; color: #6a6964; font-size: .75rem; line-height: 1.6; word-break: keep-all; }
.placement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.placement-card { min-width: 0; overflow: hidden; border: 1px solid #c8c5bd; border-radius: 8px; background: #fff; }
.placement-mini {
  position: relative;
  min-height: 244px;
  overflow: hidden;
  border-bottom: 1px solid #cfccc5;
  background: #e9e8e3;
}
.placement-mini--mobile { width: min(238px, calc(100% - 38px)); min-height: 308px; margin: 20px auto; border: 7px solid #292b2e; border-radius: 28px; box-shadow: 0 10px 24px rgb(0 0 0 / 14%); }
.placement-mini__top { height: 34px; display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid #bcbab4; background: #f9f8f4; }
.placement-mini__top b { font-size: .55rem; letter-spacing: -.03em; }
.placement-mini__top span { height: 6px; border-radius: 5px; background: #d0cec7; }
.placement-mini__top i { width: 8px; height: 8px; border-radius: 50%; background: #b9b7b0; }
.placement-mini__head { height: 56px; display: grid; align-content: center; gap: 7px; padding: 0 16px; background: #f4f3ee; }
.placement-mini__head span { display: block; height: 7px; border-radius: 3px; background: #c9c7c0; }
.placement-mini__head span:first-child { width: 42%; height: 12px; background: #96948d; }
.placement-mini__head span:last-child { width: 66%; }
.placement-mini__content,
.placement-mini__tail { display: grid; gap: 7px; padding: 12px 16px; }
.placement-mini__content i,
.placement-mini__tail i { display: block; height: 17px; border: 1px solid #d0cec8; border-radius: 3px; background: #f8f7f3; }
.placement-mini__tail { position: absolute; right: 0; bottom: 0; left: 0; }
.placement-mini__tail i { height: 12px; }
.placement-mini__ad {
  position: absolute;
  z-index: 2;
  top: 92px;
  right: 16px;
  left: 16px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid #bf3f2e;
  border-radius: 4px;
  background: #fff2ec;
  color: #a93426;
}
.placement-mini__ad small { padding: 3px 5px; border-radius: 3px; background: #b83d2e; color: #fff; font-size: .52rem; font-weight: 900; }
.placement-mini__ad strong { font-size: .74rem; }
.placement-mini--community .placement-mini__ad { top: 145px; }
.placement-mini--article .placement-mini__ad { top: 118px; }
.placement-mini--pack .placement-mini__ad { top: 102px; }
.placement-mini--launch .placement-mini__ad { top: 148px; }
.placement-mini--games .placement-mini__ad { top: 136px; }
.placement-mini--gameplay .placement-mini__ad { top: 48px; right: 44px; left: 44px; min-height: 48px; }
.placement-mini--live .placement-mini__ad { top: 158px; }
.placement-mini--mobile .placement-mini__ad { right: 9px; left: 9px; min-height: 62px; }
.placement-mini--mobile.placement-mini--home .placement-mini__ad { top: 96px; }
.placement-mini--mobile.placement-mini--community .placement-mini__ad { top: 162px; }
.placement-mini--mobile.placement-mini--article .placement-mini__ad { top: 126px; }
.placement-mini--mobile.placement-mini--pack .placement-mini__ad { top: 108px; }
.placement-mini--mobile.placement-mini--launch .placement-mini__ad { top: 170px; }
.placement-mini--mobile.placement-mini--games .placement-mini__ad { top: 150px; }
.placement-mini--mobile.placement-mini--live .placement-mini__ad { top: 176px; }
.placement-mini__rail { position: absolute; top: 108px; right: 10px; width: 27px; height: 104px; display: grid; place-items: center; border: 2px solid #bf3f2e; background: #fff2ec; color: #a93426; font-size: .52rem; font-style: normal; writing-mode: vertical-rl; }
.placement-card__body { padding: 20px; }
.placement-card__body > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.placement-card__body > header span { color: #b94030; font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.placement-card__body > header h3 { margin: 4px 0 0; font-size: 1.15rem; letter-spacing: -.035em; }
.placement-card__body > header > b { padding: 5px 7px; border: 1px solid #d7a399; border-radius: 4px; color: #a73729; font-size: .58rem; white-space: nowrap; }
.placement-card__body > p { min-height: 2.9em; margin: 10px 0 14px; color: #696862; font-size: .74rem; line-height: 1.55; word-break: keep-all; }
.placement-card__sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 13px; border-block: 1px solid #d8d5cd; }
.placement-card__sizes > div { min-width: 0; padding: 11px 10px 11px 0; }
.placement-card__sizes > div + div { padding-left: 10px; border-left: 1px solid #d8d5cd; }
.placement-card__sizes dt { color: #85837d; font-size: .58rem; font-weight: 750; }
.placement-card__sizes dd { margin: 4px 0 0; color: #2c2e31; font-size: .67rem; font-weight: 850; line-height: 1.45; overflow-wrap: anywhere; }
.placement-card__body ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.placement-card__body li { display: flex; justify-content: space-between; gap: 12px; color: #555650; font-size: .68rem; }
.placement-card__body li strong { color: #222427; text-align: right; }
.placement-card__body li small { color: #77766f; font-weight: 650; }
.rate-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.rate-product-card { min-width: 0; min-height: 220px; display: flex; flex-direction: column; padding: 18px; border: 1px solid #cbc8c0; border-radius: 7px; background: #fff; }
.rate-product-card > header { display: flex; justify-content: space-between; gap: 8px; }
.rate-product-card > header span { color: #77756f; font-size: .6rem; font-weight: 850; }
.rate-product-card > header b { color: #b73c2d; font-size: .58rem; }
.rate-product-card h3 { margin: 15px 0 7px; font-size: 1rem; letter-spacing: -.025em; }
.rate-product-card p { margin: 0; color: #6b6a64; font-size: .7rem; line-height: 1.55; }
.rate-product-card > div { margin-top: auto; padding-top: 18px; }
.rate-product-card > div strong { display: block; font-size: 1.45rem; letter-spacing: -.04em; }
.rate-product-card > div small { display: block; margin-top: 4px; color: #77756f; font-size: .62rem; }
.rate-product-card em { margin-top: 10px; color: #b33b2c; font-size: .62rem; font-style: normal; font-weight: 800; }
.rate-independence { margin-top: 18px; padding: 18px 20px; border: 1px solid #d6b4aa; border-left: 4px solid #bf402f; background: #fff2ec; color: #4f4945; }
.rate-independence > strong { color: #9f3427; font-size: .72rem; }
.rate-independence p { margin: 6px 0 0; font-size: .72rem; line-height: 1.65; }
.rate-booking__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-block: 1px solid #cbc8bf; list-style: none; }
.rate-booking__steps li { min-height: 156px; display: flex; flex-direction: column; gap: 7px; padding: 20px; }
.rate-booking__steps li + li { border-left: 1px solid #d8d5cd; }
.rate-booking__steps b { color: #b94030; font-size: .68rem; }
.rate-booking__steps strong { font-size: .9rem; word-break: keep-all; }
.rate-booking__steps span { color: #6c6b65; font-size: .68rem; line-height: 1.5; word-break: keep-all; }
.rate-booking .rate-cta-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 22px; }
.rate-booking .rate-cta-links a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid #bdbab2; border-radius: 5px; color: #333437; font-size: .7rem; text-decoration: none; }
.rate-booking .rate-cta-links .solid-button { border-color: #242629; background: #242629; color: #fff; }
.rate-details { overflow: hidden; border: 1px solid #cbc8bf; border-radius: 8px; background: #fbfaf6; }
.rate-details details + details { border-top: 1px solid #d4d1c9; }
.rate-details summary { min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-size: .82rem; font-weight: 850; cursor: pointer; }
.rate-details summary::after { content: "+"; color: #b94030; font-size: 1.1rem; }
.rate-details details[open] summary::after { content: "−"; }
.rate-details details > div { padding: 0 22px 22px; color: #66655f; font-size: .76rem; line-height: 1.7; }
.rate-details p { max-width: 860px; margin: 0 0 14px; }
.rate-details .tier-ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid #d0cdc5; }

@media (max-width: 980px) {
  .ads-rate-hero { grid-template-columns: minmax(0, 1fr); }
  .ads-rate-hero__action { border-top: 1px solid #cbc8bf; border-left: 0; }
  .rate-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rate-summary > div:nth-child(3) { border-top: 1px solid #d8d5cd; border-left: 0; }
  .rate-summary > div:nth-child(4) { border-top: 1px solid #d8d5cd; }
  .placement-grid { grid-template-columns: minmax(0, 1fr); }
  .rate-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .ads-rate-experience { margin-inline: -12px; padding-bottom: 42px; }
  .ads-rate-hero { display: block; border-inline: 0; border-radius: 0; }
  .ads-rate-hero > div:first-child { padding: 30px 18px; }
  .ads-rate-hero h1 { font-size: clamp(2.5rem, 12.5vw, 3.7rem); }
  .ads-rate-hero p { font-size: .82rem; }
  .ads-rate-hero__jumps { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ads-rate-hero__jumps a { justify-content: center; }
  .ads-rate-hero__action { padding: 24px 18px; }
  .rate-mobile-menu {
    position: sticky;
    z-index: 8;
    top: calc(var(--ui-header) + 8px);
    width: fit-content;
    display: block;
    margin: 8px 12px 0 auto;
  }
  .rate-mobile-menu summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid #25272a;
    border-radius: 5px;
    background: #25272a;
    color: #fff;
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
    box-shadow: 0 8px 20px rgb(0 0 0 / 14%);
  }
  .rate-mobile-menu summary::-webkit-details-marker { display: none; }
  .rate-mobile-menu summary::after { content: "☰"; font-size: .8rem; }
  .rate-mobile-menu[open] summary::after { content: "×"; font-size: 1rem; }
  .rate-mobile-menu nav {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(238px, calc(100vw - 24px));
    display: grid;
    padding: 7px;
    border: 1px solid #aaa8a1;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 16px 38px rgb(0 0 0 / 18%);
  }
  .rate-mobile-menu nav a { min-height: 44px; display: flex; align-items: center; padding: 0 11px; border-bottom: 1px solid #e2dfd8; color: #282a2d; font-size: .72rem; font-weight: 800; text-decoration: none; }
  .rate-mobile-menu nav a:last-child { border-bottom: 0; }
  .ads-rate-main { width: calc(100% - 24px); margin-top: 12px; gap: 12px; }
  .rate-summary { grid-template-columns: minmax(0, 1fr); }
  .rate-summary > div { min-height: 84px; padding: 15px 17px; border-top: 1px solid #d8d5cd; border-left: 0 !important; }
  .rate-summary > div:first-child { border-top: 0; }
  .rate-section { padding: 24px 15px; }
  .rate-section > header { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  .rate-section > header > span { width: 28px; height: 28px; }
  .rate-section > header h2 { font-size: 1.65rem; }
  .rate-device-jumps { grid-template-columns: minmax(0, 1fr); }
  .rate-device-block > header { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .placement-grid { grid-template-columns: 1fr; }
  .placement-mini:not(.placement-mini--mobile) { min-height: 210px; }
  .placement-card__body { padding: 17px 14px; }
  .placement-card__sizes { grid-template-columns: minmax(0, 1fr); }
  .placement-card__sizes > div + div { padding-left: 0; border-top: 1px solid #d8d5cd; border-left: 0; }
  .placement-card__body li { align-items: start; }
  .rate-product-grid { grid-template-columns: minmax(0, 1fr); }
  .rate-product-card { min-height: 190px; }
  .rate-booking__steps { grid-template-columns: minmax(0, 1fr); }
  .rate-booking__steps li { min-height: 0; }
  .rate-booking__steps li + li { border-top: 1px solid #d8d5cd; border-left: 0; }
  .rate-booking .rate-cta-links { display: grid; }
  .rate-booking .rate-cta-links a { justify-content: center; }
  .rate-details .tier-ladder { grid-template-columns: minmax(0, 1fr); }
}

/* LIVE 메인 목록은 여섯 방송씩 한 페이지로 넘긴다. */
.live-external-section--priority .external-live-grid--paged {
  display: grid;
  width: 100%;
  grid-template-rows: repeat(2, minmax(0, auto));
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 20px) / 3);
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
.live-external-section--priority .external-live-grid--paged > .live-page-start { scroll-snap-align: start; }
.live-page-controls { min-height: 38px; display: grid; grid-template-columns: 38px minmax(70px, auto) 38px; align-items: center; justify-content: center; gap: 9px; padding-top: 8px; }
.live-page-controls .mobile-rail-dots { min-height: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0; }
.live-page-controls button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--ui-line-strong); border-radius: 50%; background: var(--ui-paper); color: var(--ui-ink); cursor: pointer; }
.live-page-controls button:hover, .live-page-controls button:focus-visible { border-color: var(--ui-signal); color: var(--ui-signal); outline: 0; }
.live-page-controls button:disabled { opacity: .35; cursor: default; }
.live-page-controls button .icon { width: 15px; }
.live-page-controls [data-rail-prev] .icon { transform: rotate(180deg); }

@media (max-width: 980px) {
  .live-external-section--priority .external-live-grid--paged {
    grid-template-rows: repeat(3, minmax(0, auto));
    grid-auto-columns: calc((100% - 10px) / 2);
  }
  .live-detail-more .external-live-grid,
  .live-detail-pack-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .live-external-section--priority .external-live-grid--paged {
    grid-template-rows: repeat(6, minmax(0, auto));
    grid-template-columns: none;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }
  .live-external-section--priority .external-live-grid--paged > .external-live-card--compact { width: 100%; min-width: 0; }
  .live-detail-more { margin-inline: -4px; padding: 16px; }
  .live-detail-more .live-section-title { align-items: flex-start; }
  .live-detail-more .external-live-grid,
  .live-detail-pack-strip {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .live-detail-more .external-live-grid::-webkit-scrollbar,
  .live-detail-pack-strip::-webkit-scrollbar { display: none; }
  .live-detail-more .external-live-card--compact,
  .live-detail-pack-strip > a { flex: 0 0 min(78vw, 280px); scroll-snap-align: start; }
  .live-detail-more .external-live-card--compact { display: block; }
  .live-detail-more .live-card-actions { display: flex; }
  .live-detail-more + .mobile-rail-dots,
  .live-detail-more .mobile-rail-dots { display: flex; }
}

/* ========================================================================
   Owner polish — familiar controls, compact benefit progress, clear routes.
   These are presentation-only overrides; data contracts and ad slots stay put.
   ======================================================================== */

/* The account agreement uses a native checkbox, not the full auth input height. */
.auth-form .auth-check input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 1px 0 0;
  padding: 0;
  border-radius: 3px;
  accent-color: var(--ui-ink);
}

/* PacPik search: the symbol lives here once; the wordmark at left stays typographic. */
.route-transitioning #main { pointer-events: none; }

.header-search,
.mobile-search {
  gap: 0;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 26%, var(--ui-line));
  border-radius: 999px;
  background: var(--ui-paper);
  box-shadow: 0 8px 22px rgb(26 31 40 / 7%);
}
.header-search { height: 46px; }
.header-search:hover,
.mobile-search:hover { border-color: #8c9298; }
.header-search:focus-within,
.mobile-search:focus-within {
  border-color: var(--ui-ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-ink) 10%, transparent);
}
.header-search .search-brand,
.mobile-search .search-brand {
  width: 36px;
  min-width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ui-ink) 9%, var(--ui-paper));
}
.header-search .search-brand .brandmark,
.mobile-search .search-brand .brandmark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink);
}
.header-search .search-brand .brandmark svg,
.mobile-search .search-brand .brandmark svg { width: 22px; height: 22px; }

.brandmark,
.brandmark__plate {
  transition: color .32s cubic-bezier(.22, 1, .36, 1), fill .32s cubic-bezier(.22, 1, .36, 1);
}
html.theme-switching .brandmark { animation: pacpik-theme-switch .42s cubic-bezier(.22, 1, .36, 1); }
@keyframes pacpik-theme-switch {
  0% { transform: scale(1) rotate(0); }
  42% { transform: scale(.78) rotate(-12deg); opacity: .58; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .brandmark, .brandmark__plate,
  .entity-icon[data-icon-type="auto-generic"],
  .entity-icon[data-icon-type="auto-generic"]::before { transition: none; }
  html.theme-switching .brandmark,
  html.theme-switching .entity-icon[data-icon-type="auto-generic"]::before { animation: none; }
}
.header-search .search-submit,
.mobile-search .search-submit {
  width: 36px;
  min-width: 36px;
  height: 36px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 24%, var(--ui-line));
  border-radius: 50%;
  background: transparent;
  color: var(--ui-ink);
}
.header-search .search-submit:hover,
.mobile-search .search-submit:hover {
  border-color: color-mix(in srgb, var(--ui-ink) 32%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-ink) 5%, transparent);
  color: var(--ui-ink);
}
.header-search input,
.mobile-search input {
  padding: 0 12px;
  border: 0 !important;
  box-shadow: none !important;
  font-size: .82rem;
}

/* Hover can cross the small gap without collapsing the account menu. */
.profile-menu__flyout { top: calc(100% + 8px); }
.profile-menu__flyout::before { height: 14px; }

/* LIVE reuses the same Pack rows found elsewhere instead of one-off tiles. */
.live-portal .live-pack-row-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.live-portal .live-pack-row-grid .pack-row {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-paper-2);
}
.live-portal .live-pack-row-grid .pack-row__main { min-height: 66px; padding: 9px 11px; }

/* Keep the proposal choice heading inside its panel with real breathing room. */
.proposal-kind {
  position: relative;
  padding: 62px 20px 20px;
}
.proposal-kind legend {
  position: absolute;
  top: 20px;
  left: 20px;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--ui-ink);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.025em;
}

/* Pack Benefit is a progress dashboard, not four presentation slides. */
.my-workspace__content .benefit-dashboard { display: grid; gap: 12px; }
.my-workspace__content .benefit-dashboard__intro {
  min-height: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 22%, var(--ui-line));
  border-radius: 12px;
  background: var(--ui-paper-2);
  color: var(--ui-ink);
}
.my-workspace__content .benefit-dashboard__intro h3 { margin: 5px 0 4px; font-size: clamp(1.25rem, 2.1vw, 1.75rem); }
.my-workspace__content .benefit-dashboard__intro p { margin: 0; color: var(--ui-dim); font-size: .82rem; }
.my-workspace__content .benefit-dashboard__intro > strong { display: grid; justify-items: end; font-size: 2.25rem; line-height: 1; }
.my-workspace__content .benefit-dashboard__intro > strong small { margin-top: 5px; color: var(--ui-dim); font-size: .68rem; font-weight: 750; }
.my-workspace__content .benefit-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}
.my-workspace__content .benefit-panel > .benefit-card {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 12px;
  background: var(--ui-paper);
  box-shadow: none;
}
.my-workspace__content .benefit-panel > .benefit-card--ready { border-color: color-mix(in srgb, var(--ui-ink) 28%, var(--ui-line)); background: var(--ui-paper); box-shadow: none; }
.benefit-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.benefit-card__mark { color: var(--ui-dim); font-size: .72rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.benefit-card > header em { padding: 5px 8px; border-radius: 999px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: .68rem; font-style: normal; font-weight: 800; }
.benefit-card--ready > header em { border: 1px solid color-mix(in srgb, var(--ui-ink) 20%, var(--ui-line)); background: var(--ui-paper-2); color: var(--ui-ink); }
.my-workspace__content .benefit-card h3 { margin: 6px 0 7px; font-size: clamp(1.18rem, 1.8vw, 1.55rem); line-height: 1.22; }
.my-workspace__content .benefit-card p { margin: 0; color: var(--ui-dim); font-size: .82rem; line-height: 1.62; }
.benefit-progress { display: grid; align-content: start; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--ui-line); list-style: none; }
.benefit-progress__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 16px; padding: 11px 0; border-bottom: 1px solid var(--ui-line); }
.benefit-progress__item > span { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--ui-dim); }
.benefit-progress__item i { width: 7px; height: 7px; flex: none; border: 1px solid var(--ui-line-strong); border-radius: 50%; }
.benefit-progress__item.is-done i { border-color: #202326; background: #202326; }
.benefit-progress__item b,
.benefit-progress__item strong { font-size: .76rem; }
.benefit-progress__item strong { color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.benefit-progress__item strong small { color: var(--ui-dim); font-size: .68rem; }
.benefit-progress__item progress { grid-column: 1 / -1; width: 100%; height: 4px; overflow: hidden; border: 0; border-radius: 999px; background: var(--ui-paper-2); }
.benefit-progress__item progress::-webkit-progress-bar { background: var(--ui-paper-2); }
.benefit-progress__item progress::-webkit-progress-value { background: #555d64; }
.benefit-progress__item progress::-moz-progress-bar { background: #555d64; }
.benefit-card__action { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--ui-ink) 28%, var(--ui-line)); border-radius: 7px; background: var(--ui-paper); color: var(--ui-ink); font-size: .78rem; font-weight: 850; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.benefit-card__action:hover { border-color: var(--ui-ink); background: var(--ui-paper-2); transform: translateY(-1px); }
.benefit-card__action .icon { width: 15px; }

/* Games directory opens with the product wordmark, then one quiet explanation. */
.games-home-intro { min-height: 138px; }
.games-home-intro__copy { min-width: 0; }
.games-home-intro .games-wordmark {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: clamp(2.1rem, 4.2vw, 4.2rem);
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.065em;
  white-space: nowrap;
}
.games-home-intro .games-wordmark span { color: #8f9cff; font-size: .54em; letter-spacing: -.035em; vertical-align: .12em; }
.games-home-intro p { max-width: 690px; margin-top: 12px; }

/* The game detail copy reads as part of one product surface, not a green slide. */
.games-pack-experience .game-pack-hero {
  border-color: #292d32;
  border-radius: 8px;
  background: #101216;
}
.games-pack-experience .game-pack-hero__media { background: #08090b; }
.games-pack-experience .game-pack-hero__copy {
  display: grid;
  align-content: center;
  padding: clamp(28px, 3vw, 42px);
  border-left: 1px solid #30343a;
  background: #181b20;
}
.games-pack-experience .game-pack-hero__copy .eyebrow { color: #9ba4ff; }
.games-pack-experience .game-pack-hero__desc { color: #c2c6cb; line-height: 1.65; }
.games-pack-experience .game-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 24px 0;
  padding: 19px 0;
  border-top: 1px solid #363a40;
  border-bottom: 1px solid #363a40;
}
.games-pack-experience .game-facts div,
.games-pack-experience .game-facts div:nth-child(odd) {
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 0;
  border: 0;
}
.games-pack-experience .game-facts dt { color: #8f969e; font-size: .66rem; letter-spacing: .03em; }
.games-pack-experience .game-facts dd { color: #fff; font-size: .82rem; }
.games-pack-experience .game-pack-actions .games-button { border-color: #fff; background: #fff; color: #15171a; }
.games-pack-experience .game-pack-actions .button-secondary { border-color: #51565d; background: transparent; color: #fff; }
.games-pack-experience .game-pack-actions .button-quiet { color: #9da3aa; }

@media (max-width: 820px) {
  .my-workspace__content .benefit-panel { grid-template-columns: minmax(0, 1fr); }
  .live-portal .live-pack-row-grid { grid-template-columns: minmax(0, 1fr); }
  .proposal-kind { padding: 58px 16px 16px; }
  .proposal-kind legend { top: 18px; left: 16px; }
  .games-home-intro .games-wordmark { font-size: clamp(2.15rem, 11vw, 3.45rem); }
  .games-pack-experience .game-pack-hero__copy { border-top: 1px solid #30343a; border-left: 0; }
}

@media (max-width: 520px) {
  .my-workspace__content .benefit-dashboard__intro { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .my-workspace__content .benefit-dashboard__intro > strong { display: flex; align-items: baseline; justify-content: start; gap: 7px; font-size: 1.65rem; }
  .games-home-intro { min-height: 0; }
  .games-home-intro .games-wordmark { font-size: clamp(2rem, 12vw, 3rem); }
  .games-home-intro__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games-pack-experience .game-facts { grid-template-columns: minmax(0, 1fr); }
}

/* Community controls keep their own boundaries; never add another group perimeter. */
.community-feed-column { display: grid; gap: 10px; }
.community-control-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.community-control-panel .community-feed-tools { margin: 0; padding: 0; border: 0; }
.community-workspace .feed-search { padding: 0; border: 0; border-radius: 0; background: transparent; }
.community-workspace .feed-search select,
.community-workspace .feed-search input[type="search"],
.community-workspace .feed-search .text-button {
  border: 1px solid var(--ui-line) !important;
  border-radius: 6px !important;
  background: var(--ui-paper) !important;
  box-shadow: none !important;
}
.community-workspace .feed-search .text-button:hover { border-color: var(--ui-ink); background: var(--ui-paper-2); }
.community-workspace .community-feed-tools > .solid-button {
  border: 1px solid color-mix(in srgb, var(--ui-ink) 32%, var(--ui-line));
  background: var(--ui-paper);
  color: var(--ui-ink);
}
.community-workspace .community-feed-tools > .solid-button:hover { border-color: var(--ui-ink); background: var(--ui-paper-2); }
.community-workspace .community-feed { overflow: visible; padding: 0; border: 0; background: transparent; }
.community-workspace .community-feed > .section-head {
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-paper-2);
}
.community-workspace .community-feed > .channel-board { padding: 6px 10px; }
.community-workspace .community-feed > .list-foot { margin-inline: 12px; }
.channel-board { gap: 4px; border-top: 0; }
.board-row,
.board-row.has-moderation {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  border-bottom: 0;
  border-radius: 9px;
}
.board-row.has-moderation { grid-template-columns: 36px minmax(0, 1fr) auto; }
.board-row__mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--ui-paper-2);
  color: var(--ui-dim);
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.board-row__mark .icon { width: 15px; }
.board-row:hover { background: var(--ui-paper-2); transform: translateX(2px); }
.board-row:hover .board-row__mark { background: var(--ui-ink); color: var(--ui-paper); transform: translateY(-1px); }
.community-workspace .feed-sort__item,
.post-reading-rail .same-channel-board .feed-sort__item { padding: 0 1px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; }
.community-workspace .feed-sort__item[aria-current="true"],
.community-workspace .feed-sort__item[aria-pressed="true"],
.post-reading-rail .same-channel-board .feed-sort__item[aria-current="true"],
.post-reading-rail .same-channel-board .feed-sort__item[aria-pressed="true"] {
  border: 0;
  border-bottom: 1px solid var(--ui-ink);
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
}

/* Post reading: title/byline and article body are distinct bordered surfaces. */
.global-brand .brand-name { font-size: 26px; line-height: 1; letter-spacing: -.06em; }

.post-reading-main .post-detail {
  min-height: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.post-reading-main .post-detail__head {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid color-mix(in srgb, var(--ui-ink) 22%, var(--ui-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-ink) 10%, var(--ui-paper));
}
.post-reading-main .post-detail__head h1 { margin-bottom: 16px; }
.post-reading-main .post-detail__content {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid color-mix(in srgb, var(--ui-ink) 18%, var(--ui-line));
  border-radius: 12px;
  background: var(--ui-paper);
}
.post-reading-main .post-detail__content .post-body {
  min-height: 120px;
  margin: 0;
  padding: 0 0 26px;
}
.post-reading-main .post-detail__content .post-actions { margin-top: 0; }
.post-reading-main .post-action,
.post-reading-main .pik-button,
.post-reading-main .post-foot-nav .text-button {
  border: 1px solid color-mix(in srgb, var(--ui-ink) 22%, var(--ui-line));
  box-shadow: none;
}
.post-reading-main .post-action:hover,
.post-reading-main .post-foot-nav .text-button:hover { border-color: var(--ui-ink); }

/* The context rail belongs to the same light surface system as the article. */
.post-scope-card { border-color: color-mix(in srgb, var(--ui-ink) 22%, var(--ui-line)); background: var(--ui-paper); color: var(--ui-ink); }
.post-scope-card > p { color: var(--ui-dim); }
.post-scope-card nav { gap: 0; padding-top: 8px; border-top: 1px solid var(--ui-line); }
.post-scope-card nav a { min-height: 40px; padding: 0; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; color: var(--ui-ink); }
.post-scope-card nav a:hover { background: transparent; color: var(--ui-ink); }
.post-scope-card nav .icon { color: var(--ui-dim); }
/* Comments keep PacPik's surface language but use forum-like information density. */
.post-reading-main #comments { padding: 14px; }
.post-reading-main #comments > .section-head { min-height: 34px; padding: 0 4px 8px; }
.post-reading-main #comments > .section-head h2 { font-size: .82rem; }
.post-reading-main #comments [data-comment-list] { display: grid; gap: 3px; }
.post-reading-main .comment {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.comment-line {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(104px, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  transition: background-color .14s ease;
}
.comment-line:hover { background: var(--ui-paper-2); }
.comment-author { flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
.comment-author .author-identity { gap: 6px; }
.comment-author .profile-medallion,
.comment-author .profile-medallion--author { width: 26px; height: 26px; }
.comment-kind {
  min-width: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ui-info) 10%, var(--ui-paper));
  color: var(--ui-info);
}
.comment-kind .icon { width: 11px; }
.comment-body { min-width: 0; margin: 0; line-height: 1.55; }
.comment-body p { margin: 0; }
.comment-time { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-dim); font-size: .66rem; white-space: nowrap; }
.comment-actions { flex-wrap: nowrap; gap: 1px; opacity: .62; }
.comment-line:hover .comment-actions,
.comment-line:focus-within .comment-actions { opacity: 1; }
.comment-actions button {
  min-height: 30px;
  padding: 0 6px;
  gap: 3px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: transparent;
  color: var(--ui-dim);
  font-size: .68rem;
}
.comment-actions button:hover,
.comment-actions button:focus-visible { background: var(--ui-paper); color: var(--ui-ink); }
.comment--reply {
  margin: 2px 0 2px 28px;
  padding: 0;
  border: 0;
  background: transparent;
}
.comment--reply > .comment-line { background: color-mix(in srgb, var(--ui-paper-2) 72%, transparent); }
.comment-reply-slot:empty { display: none; }
.comment-reply-slot:not(:empty) { margin: 4px 0 7px 28px; }
.comment-reply-form {
  border: 1px solid color-mix(in srgb, var(--ui-info) 28%, var(--ui-line)) !important;
  background: color-mix(in srgb, var(--ui-info) 5%, var(--ui-paper)) !important;
}
.comment-reply-target {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-right: 4px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--ui-blue-soft);
  color: var(--ui-info);
  font-size: .7rem;
  font-weight: 850;
}
.comment-reply-form textarea { min-height: 72px; }

/* The composer is a tool, not a second hero card. */
.comment-form-home { margin-top: 8px; }
.post-reading-main .comment-composer,
.comment-reply-slot .comment-composer {
  max-width: none;
  margin: 0;
  padding: 10px;
  gap: 6px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-paper-2);
  box-shadow: none;
}
.comment-composer__head {
  min-height: 30px;
  align-items: center;
  padding: 0;
  border: 0;
}
.comment-composer__head strong { margin: 0; font-size: .8rem; }
.comment-composer__cancel { width: auto; min-height: 28px; padding: 0 7px; font-size: .68rem; }
.comment-composer .composer-identity {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--ui-paper);
}
.comment-composer .composer-identity small { display: none; }
.comment-composer .guest-credentials {
  grid-template-columns: minmax(130px, .45fr) minmax(260px, 1fr);
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.comment-composer .guest-credentials legend { grid-column: 1 / -1; padding: 0; color: var(--ui-dim); }
.comment-composer .guest-credentials label { gap: 3px; font-size: .68rem; }
.comment-composer .guest-credentials input { min-height: 34px; }
.comment-composer .password-line .text-button { min-height: 34px; padding-inline: 8px; font-size: .68rem; }
.comment-composer .editor-toolbar--compact {
  padding: 2px;
  gap: 1px;
  border: 0;
  border-radius: 7px;
  background: transparent;
}
.comment-composer .editor-toolbar--compact button { min-height: 32px; padding: 0 8px; border: 1px solid var(--ui-line); border-radius: 6px; font-size: .72rem; }
.comment-composer .rich-editor {
  min-height: 76px;
  padding: 10px 11px;
  border-radius: 8px;
  line-height: 1.55;
}
.comment-composer .rich-editor[data-empty="true"]::before { top: 10px; inset-inline-start: 11px; }
.comment-composer__actions { justify-content: flex-end; gap: 6px; }
.comment-composer__actions .solid-button { min-width: 76px; min-height: 34px; border-radius: 7px; }
.comment-composer__actions .solid-button,
.comment-composer__actions .text-button,
.comment-composer__cancel,
.comment-composer .password-line .text-button { border: 1px solid color-mix(in srgb, var(--ui-ink) 22%, var(--ui-line)); }

/* Picker: only personal sets, recents, and favorites; set covers act as the chooser. */
.comment-composer .emote-picker { margin-top: 4px; padding: 9px; border-radius: 9px; background: var(--ui-paper); }
.comment-composer .emote-picker__tabs button { min-height: 34px; padding: 0 9px; border-radius: 7px; font-size: .72rem; }
.comment-composer .emote-picker__search input { min-height: 34px; margin: 6px 0; border-radius: 7px; }
.comment-composer .emote-picker__panel { max-height: 230px; }
.comment-composer .emote-picker [data-emote-panel="mine"]:not([hidden]) {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px;
}
.comment-composer .emote-picker [data-emote-panel="mine"] .emote-set-card { flex: 0 0 84px; min-width: 0; }
.comment-composer .emote-picker [data-emote-panel="mine"] .emote-set-card__main {
  min-height: 82px;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 5px;
  padding: 6px;
  border-radius: 8px;
  text-align: center;
}
.comment-composer .emote-picker [data-emote-panel="mine"] .emote-set-card__main:hover,
.comment-composer .emote-picker [data-emote-panel="mine"] .emote-set-card__main:focus-visible { background: var(--ui-paper-2); }
.comment-composer .emote-picker [data-emote-panel="mine"] .emote-set-card__cover { width: 48px; height: 48px; }
.comment-composer .emote-picker [data-emote-panel="mine"] .emote-set-card__text { width: 100%; }
.comment-composer .emote-picker [data-emote-panel="mine"] .emote-set-card__text strong { font-size: .68rem; }
.comment-composer .emote-picker [data-emote-panel="mine"] .emote-set-card__text small { display: none; }

@media (max-width: 700px) {
  .global-brand .brand-name { font-size: 22px; }
  .post-reading-main .post-detail__head,
  .post-reading-main .post-detail__content { padding: 20px 16px; }
  .post-reading-main #comments { padding: 11px 8px; }
  .comment-line {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 5px;
    padding: 7px 5px;
  }
  .comment-time { grid-column: 2; font-size: .62rem; }
  .comment-actions { grid-column: 3; grid-row: 1 / span 2; }
  .comment-actions button { width: 30px; padding: 0; justify-content: center; font-size: 0; }
  .comment-actions .icon { width: 12px; }
  .comment--reply { margin-left: 18px; }
  .comment-reply-slot:not(:empty) { margin-left: 18px; }
  .comment-composer .guest-credentials { grid-template-columns: minmax(0, 1fr); }
}

/* Community continuation: the feed must lead somewhere after its last row. */
.community-continuation {
  margin-top: 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-paper);
  overflow: hidden;
}
.community-continuation > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: end;
  gap: 24px;
  padding: 22px;
  border-bottom: 1px solid var(--ui-line);
}
.community-continuation h2 { margin: 5px 0 4px; font-size: 1.22rem; letter-spacing: -.03em; }
.community-continuation header p { margin: 0; color: var(--ui-dim); font-size: .75rem; }
.community-global-search {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  overflow: hidden;
}
.community-global-search input { min-width: 0; padding: 0 13px; border: 0; background: transparent; color: var(--ui-ink); outline: 0; }
.community-global-search button { display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; border: 0; border-left: 1px solid var(--ui-line); background: var(--ui-paper-2); color: var(--ui-ink); font-size: .72rem; font-weight: 800; cursor: pointer; }
.community-global-search button .icon { width: 15px; }
.community-popular-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 14px; }
.community-popular-row { min-height: 62px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.community-popular-row:hover { background: var(--ui-paper-2); }
.community-popular-row .entity-icon { width: 34px; height: 34px; border-radius: 8px; }
.community-popular-row > span { min-width: 0; display: grid; gap: 3px; }
.community-popular-row small { overflow: hidden; color: var(--ui-dim); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.community-popular-row strong { overflow: hidden; color: var(--ui-ink); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.community-popular-row em { display: inline-flex; align-items: center; gap: 3px; color: var(--ui-dim); font-size: .68rem; font-style: normal; font-weight: 800; }
.community-popular-row em .icon, .community-popular-row > .icon { width: 14px; }
.community-continuation > footer { display: flex; justify-content: flex-end; padding: 0 22px 16px; }
.community-continuation > footer a { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-ink); font-size: .72rem; font-weight: 800; }
.community-continuation > footer .icon { width: 13px; }

/* The end of a post is a continuation surface, not a dead-end chip row. */
.post-continuation { overflow: hidden; border: 1px solid color-mix(in srgb, var(--ui-ink) 20%, var(--ui-line)); border-radius: 12px; background: var(--ui-paper); }
.post-continuation > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.post-continuation > header h2 { margin: 4px 0 0; font-size: 1.08rem; }
.post-continuation > header > a { min-height: 36px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--ui-line); border-radius: 7px; font-size: .72rem; font-weight: 800; }
.post-continuation > header > a:hover { border-color: var(--ui-ink); }
.post-continuation > header .icon { width: 13px; }
.post-continuation__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-continuation__grid > section { min-width: 0; padding: 14px; }
.post-continuation__grid > section + section { border-left: 1px solid var(--ui-line); }
.post-continuation__grid > section > header { min-height: 34px; display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 0 4px 9px; }
.post-continuation__grid h3 { margin: 0; font-size: .82rem; }
.post-continuation__grid header a { color: var(--ui-dim); font-size: .68rem; font-weight: 800; }
.post-next-row { min-height: 54px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 7px; border: 1px solid transparent; border-radius: 8px; }
.post-next-row:hover { border-color: var(--ui-line); background: var(--ui-paper-2); }
.post-next-row > b { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 7px; color: var(--ui-dim); font-size: .66rem; }
.post-next-row > span { min-width: 0; display: grid; gap: 3px; }
.post-next-row strong,
.post-next-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-next-row strong { font-size: .78rem; }
.post-next-row small { color: var(--ui-dim); font-size: .65rem; }
.post-next-row > .icon { width: 13px; color: var(--ui-dim); }
.post-next-row--pack > .entity-icon { width: 28px; height: 28px; border-radius: 7px; }

@media (max-width: 620px) {
  /* Mobile community follows a feed, not a stack of control cards. */
  .community-context-nav { margin-bottom: 3px; }
  .community-showcase,
  .entity-showcase.community-showcase {
    min-height: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 11px;
    padding: 14px 4px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .community-showcase .entity-icon--header { width: 46px; height: 46px; border-radius: 12px; box-shadow: none; }
  .community-showcase .entity-showcase__copy .eyebrow { display: none; }
  .community-showcase .entity-showcase__copy h1 { margin: 0 0 3px; font-size: 1.35rem; }
  .community-showcase .entity-showcase__copy p { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .community-showcase .page-actions { grid-column: 1 / -1; }

  .community-channel-rail {
    flex-wrap: nowrap;
    gap: 5px;
    margin: 0 0 5px;
    padding: 5px 0 8px;
    overflow-x: auto;
    border: 0;
    border-bottom: 1px solid var(--ui-line);
    border-radius: 0;
    background: transparent;
    scrollbar-width: none;
  }
  .community-channel-rail::-webkit-scrollbar { display: none; }
  .community-channel-rail .channel-link {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    border-radius: 8px;
  }
  .community-channel-rail .channel-link small { display: none; }
  .community-channel-rail .channel-link.is-current { background: var(--ui-paper-2); }

  .community-feed-tabs { gap: 16px; margin-bottom: 5px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .community-feed-tabs::-webkit-scrollbar { display: none; }
  .community-feed-tabs button, .community-feed-tabs a { flex: 0 0 auto; min-height: 40px; }
  .community-workspace { gap: 7px; }
  .community-feed-column { gap: 7px; }
  .community-control-panel { padding: 7px; border-radius: 8px; }
  .community-workspace .signal-section { padding: 12px 11px; border-radius: 8px; }
  .community-workspace .section-head { min-height: 30px; margin-bottom: 5px; }
  .community-workspace .section-head h2 { font-size: .95rem; }
  .community-feed-tools,
  .community-feed-tools:is(*) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin: 0 0 7px;
    padding: 0 0 7px;
  }
  .community-feed-tools .feed-sort { grid-column: 1 / -1; gap: 5px; margin: 0; overflow-x: auto; }
  .community-feed-tools .feed-sort__item { min-height: 34px; padding: 0 9px; }
  .community-workspace .feed-search {
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 4px;
    margin: 0;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--ui-ink) 24%, var(--ui-line));
    border-radius: 7px;
    overflow: visible;
  }
  .community-workspace .feed-search select { display: none; }
  .community-workspace .feed-search input[type="search"] { min-height: 42px; padding-inline: 11px; border: 1px solid var(--ui-line); border-radius: 5px; }
  .community-workspace .feed-search .text-button { min-width: 42px; min-height: 42px; padding: 0; border: 1px solid var(--ui-line); border-radius: 5px; font-size: 0; }
  .community-workspace .feed-search .text-button .icon { width: 17px; }
  .community-feed-tools > .solid-button { grid-column: 2; width: auto; min-width: 92px; min-height: 44px; padding-inline: 12px; }
  .community-workspace .community-feed { padding: 0; }
  .community-workspace .community-feed > .section-head { min-height: 42px; margin: 0; padding: 0 11px; }
  .community-workspace .community-feed > .channel-board { padding: 4px 7px; }
  .channel-board { gap: 1px; }
  .board-row, .board-row.has-moderation { grid-template-columns: 32px minmax(0, 1fr); border-radius: 7px; }
  .board-row.has-moderation { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .board-row__mark { width: 28px; height: 28px; border-radius: 7px; }
  .board-row > a { min-height: 48px; padding: 6px 5px; }
  .board-row strong { font-size: 13.5px; }
  .community-workspace .list-foot--pager { padding-top: 10px; border-top: 0; }
  .pager > .pager__step:first-child, .pager > .pager__step:last-child { display: none; }
  .pager__step, .pager__page { min-width: 36px; min-height: 36px; padding-inline: 7px; }

  .community-support-rail .signal-section { padding: 10px 11px; }
  .community-support-rail .section-head { margin-bottom: 4px; }
  .manager-recruitment { padding: 11px; }
  .manager-recruitment .solid-button { min-height: 38px; }

  .community-continuation { margin-top: 7px; border-radius: 8px; }
  .community-continuation > header { grid-template-columns: minmax(0, 1fr); gap: 13px; padding: 16px 14px; }
  .community-continuation h2 { font-size: 1.08rem; }
  .community-global-search { min-height: 42px; }
  .community-global-search button { min-width: 44px; padding: 0 12px; }
  .community-global-search button span { display: none; }
  .community-popular-list { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 6px 8px; }
  .community-popular-row { min-height: 58px; padding: 7px 6px; }
  .community-continuation > footer { justify-content: stretch; padding: 6px 14px 15px; }
  .community-continuation > footer a { width: 100%; min-height: 42px; justify-content: center; border: 1px solid var(--ui-line); border-radius: 7px; }
}

/* Owner pass: keep interactions legible and update only the module that changed. */
.discovery-results-region { display: grid; gap: 14px; }
.discovery-toolbar form,
.search-masthead form { grid-template-columns: minmax(0, 1fr) 46px; }
.discovery-toolbar form button,
.search-masthead form button {
  border: 1px solid color-mix(in srgb, var(--ui-ink) 22%, var(--ui-line));
  border-radius: 50%;
  background: var(--ui-paper-2);
  color: var(--ui-ink);
}
.discovery-toolbar form button:hover,
.search-masthead form button:hover { border-color: var(--ui-ink); }

/* Only the two section titles carry source color. Content stays neutral; Pik remains the signal. */
.home-conversation-stage .top-pik-block .section-head h2 { color: var(--ui-rank); }
.home-conversation-stage .community-pick-block .section-head h2 { color: var(--ui-pick); }
.home-conversation-stage .top-pik-block .post-row strong,
.home-conversation-stage .community-pick-block .pick-row strong { color: var(--ui-ink); }
.home-conversation-stage .top-pik-block .section-meta,
.home-conversation-stage .community-pick-block .section-meta { color: var(--ui-dim); }
.home-conversation-stage .top-pik-block .post-row--inline-rank {
  grid-template-columns: minmax(0, 1fr) auto;
}
.home-conversation-stage .top-pik-block .post-row--inline-rank > a strong {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.home-conversation-stage .top-pik-block .post-row__inline-rank {
  flex: none;
  color: var(--ui-rank);
  font-size: 11px;
  font-weight: 800;
}

/* Related-post search is a neutral outlined control, not a purple floating patch. */
.post-reading-rail .same-channel-board .feed-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.post-reading-rail .same-channel-board .feed-search select { grid-column: 1 / -1; border: 1px solid var(--ui-line); }
.post-reading-rail .same-channel-board .feed-search input { border: 1px solid var(--ui-line); background: var(--ui-paper); }
.post-reading-rail .same-channel-board .feed-search .text-button {
  border: 1px solid var(--ui-line);
  background: var(--ui-paper);
  color: var(--ui-ink);
}
.post-reading-rail .same-channel-board .feed-search .text-button:hover { border-color: var(--ui-ink); background: var(--ui-paper-2); }

/* Official-information cells use one quiet boundary instead of heavy rules. */
.official-home-focus,
.official-home-stream,
.official-results,
.pack-official-results,
.official-pack-index,
.official-entry,
.official-pack-link,
.official-benefit-group,
.pack-official-search { border: 1px solid var(--ui-line); box-shadow: none; }
.official-schedule-pack { border-top: 1px solid var(--ui-line); }

/* Action affordances remain outlined even when their fill is quiet. */
.ui-app .quiet-button,
.ui-app .solid-button { border: 1px solid color-mix(in srgb, var(--ui-ink) 22%, var(--ui-line)); }
.ui-app .text-button,
.ui-app .danger-button,
.ui-app .filter-button,
.ui-app .editor-toolbar button { border: 0; }

/* EmotePack storefront: cover-first tiles open the set; popular/latest switch in place. */
.emote-spotlight {
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  border-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-ink) 7%, var(--ui-paper));
  color: var(--ui-ink);
}
.emote-spotlight::before,
.emote-spotlight::after { display: none; }
.emote-spotlight__viewport {
  min-height: 360px;
  display: flex;
  transform: translate3d(calc(var(--emote-slide, 0) * -100%), 0, 0);
  transition: transform .58s cubic-bezier(.22, .72, .18, 1);
  will-change: transform;
}
.emote-spotlight__viewport.is-resetting { transition: none; }
.emote-spotlight__slide {
  min-width: 100%;
  flex: 0 0 100%;
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, .8fr);
  align-items: center;
  gap: clamp(24px, 6vw, 84px);
  padding: clamp(34px, 5vw, 68px);
}
.emote-spotlight__copy { min-width: 0; }
.emote-spotlight__copy .eyebrow { color: var(--ui-pick); }
.emote-spotlight__copy h2 { max-width: 18ch; margin: 9px 0; font-size: clamp(2.1rem, 4vw, 4rem); line-height: 1.04; letter-spacing: -.06em; word-break: keep-all; }
.emote-spotlight__copy p { margin: 0 0 22px; color: var(--ui-dim); font-size: .86rem; }
.emote-spotlight__copy .solid-button { width: fit-content; border-color: var(--ui-ink); background: var(--ui-paper); color: var(--ui-ink); }
.emote-spotlight__cover {
  width: min(100%, 320px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 24px;
  background: var(--ui-paper);
  box-shadow: 0 18px 45px rgb(25 30 39 / 12%);
}
.emote-spotlight__cover img { width: 100%; height: 100%; object-fit: contain; }
.emote-spotlight__dots { position: absolute; left: clamp(34px, 5vw, 68px); bottom: 24px; display: flex; gap: 7px; }
.emote-spotlight__dots button { width: 26px; height: 6px; padding: 0; border: 1px solid var(--ui-line-strong); border-radius: 999px; background: var(--ui-paper); }
.emote-spotlight__dots button[aria-pressed="true"] { border-color: var(--ui-ink); background: var(--ui-ink); }
.emote-discovery { width: min(1120px, 100%); margin-inline: auto; padding: 46px 0 70px; gap: 30px; }
/* STORE uses the existing emote route; pending categories are text, not dead tabs. */
.store-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.store-entry__intro { flex: 1 1 240px; min-width: 0; }
.store-entry__intro h1 { margin: 0; font-size: 1.7rem; line-height: 1.2; letter-spacing: -.035em; }
.store-entry__intro p { margin: 7px 0 0; color: var(--ui-dim); font-size: .8rem; line-height: 1.5; }
.store-entry__toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.store-entry__toolbar .emote-store-nav { min-width: 0; }
.store-entry__create {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  margin-top: -22px;
  padding: 0 13px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 9px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.store-entry__create:hover { border-color: var(--ui-ink); background: var(--ui-paper-2); }
.store-entry__categories { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.store-entry__category { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-ink); font-size: .88rem; font-weight: 800; }
.store-entry__pending { display: inline-flex; align-items: baseline; gap: 7px; color: var(--ui-dim); font-size: .85rem; }
.store-entry__pending small { font-size: .68rem; font-weight: 400; }
.emote-discovery,
.store-entry__catalog { scroll-margin-top: calc(var(--ui-header) + 20px); }
.store-entry__catalog { display: grid; min-width: 0; gap: 30px; }
.store-loading { gap: 18px; }
.store-loading-head { display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
.store-loading-head strong { font-size: .9rem; }
.store-loading-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.store-loading-card { display: grid; gap: 10px; min-height: 218px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); }
.store-loading-card i, .store-loading-card b, .store-loading-card small { display: block; border-radius: 8px; background: color-mix(in srgb, var(--ui-muted) 72%, var(--ui-paper)); animation: store-loading-pulse 1.1s ease-in-out infinite alternate; }
.store-loading-card i { aspect-ratio: 1; }
.store-loading-card b { width: 72%; height: 14px; }
.store-loading-card small { width: 46%; height: 10px; }
@keyframes store-loading-pulse { to { opacity: .45; } }
@media (max-width: 760px) { .store-loading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .store-loading-card { min-height: 160px; } }
@media (prefers-reduced-motion: reduce) { .store-loading-card i, .store-loading-card b, .store-loading-card small { animation: none; } }
.store-entry__catalog > .emote-store-nav { margin-top: 0; }
@media (max-width: 760px) {
  .emote-discovery,
  .store-entry__catalog { scroll-margin-top: calc(var(--ui-header) + 74px); }
  .store-entry__toolbar { gap: 8px; }
  .store-entry__create { min-height: 34px; margin-top: -14px; padding-inline: 10px; font-size: .7rem; }
}
@media (max-width: 520px) {
  .store-entry__toolbar { grid-template-columns: minmax(0, 1fr); }
  .store-entry__create { margin-top: 0; }
}
.emote-discovery__community.emote-market {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.emote-market > header { align-items: flex-end; margin-bottom: 24px; }
.emote-market > header h1 { margin: 5px 0 0; font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.08; letter-spacing: -.045em; }
.emote-market > header p { margin: 7px 0 0; color: var(--ui-dim); font-size: .78rem; }
.emote-market__tabs { display: flex; gap: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--ui-line); }
.emote-market__tabs button { position: relative; min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--ui-dim); font-size: .9rem; font-weight: 850; }
.emote-market__tabs button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; transform: scaleX(.45); transition: background-color .16s ease, transform .16s ease; }
.emote-market__tabs button[aria-pressed="true"] { color: var(--ui-ink); }
.emote-market__tabs button[aria-pressed="true"]::after { background: var(--ui-ink); transform: scaleX(1); }
.emote-market__panel[hidden] { display: none; }
.emote-market .emote-set-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 12px; }
.emote-market .emote-set-card { min-width: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.emote-market .emote-set-card__main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 0; }
.emote-market .emote-set-card__cover {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 12px;
  border: 0;
  border-radius: 9px;
  background: #f4f4f5;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.emote-market .emote-set-card__rank { position: absolute; z-index: 1; top: 7px; left: 7px; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 5px; border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-paper); color: var(--ui-ink); font-size: .7rem; }
.emote-market .emote-set-card__cover img { width: 100%; height: 100%; object-fit: contain; }
.emote-market .emote-set-card__main:hover .emote-set-card__cover { transform: translateY(-3px); background: #eeeeef; }
.emote-market .emote-set-card__text { min-width: 0; display: grid; gap: 3px; padding: 0 3px; }
.emote-market .emote-set-card__text strong,
.emote-market .emote-set-card__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emote-market .emote-set-card__text strong { font-size: .84rem; }
.emote-market .emote-set-card__text small { color: var(--ui-dim); font-size: .7rem; }
.emote-market .emote-set-card__price { color: var(--ui-ink); font-size: .76rem; font-weight: 850; }
.emote-market .emote-set-card__footer { margin-top: 7px; padding: 0 3px; border: 0; }
.emote-market .emote-set-card__library { width: 100%; min-height: 34px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-paper); }

@media (max-width: 1100px) {
  .emote-market .emote-set-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .emote-spotlight,
  .emote-spotlight__viewport,
  .emote-spotlight__slide { min-height: 0; }
  .emote-spotlight__slide { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 20px 52px; }
  .emote-spotlight__cover { grid-row: 1; width: min(72vw, 250px); border-radius: 18px; }
  .emote-spotlight__copy h2 { font-size: 2rem; }
  .emote-spotlight__dots { left: 20px; bottom: 20px; }
  .emote-discovery { width: 100%; padding: 24px 0 48px; }
  .emote-market > header { align-items: flex-start; }
  .emote-market__tabs { width: 100%; gap: 20px; }
  .emote-market__tabs button { flex: 0 0 auto; }
  .emote-market .emote-set-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 9px; }
}

/* Emote shop home follows a storefront rhythm: navigation, feature strip, search, then open sections. */
.emote-store-nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 58px;
  margin: -22px 0 0;
  background: transparent;
}
.ui-app .discovery-toolbar .filter-button {
  min-height: 34px;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ui-dim);
  box-shadow: none;
}
.ui-app .discovery-toolbar .filter-button:hover {
  border-bottom-color: var(--ui-line-strong);
  background: transparent;
  color: var(--ui-ink);
}
.ui-app .discovery-toolbar .filter-button[aria-pressed="true"] {
  border: 0;
  border-bottom: 2px solid var(--ui-ink);
  background: transparent;
  color: var(--ui-ink);
  box-shadow: none;
}
.emote-store-nav :is(a, button) {
  position: relative;
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--ui-dim);
  font-size: .92rem;
  font-weight: 800;
  text-decoration: none;
}
.emote-store-nav :is(a, button)::after {
  content: "";
  position: absolute;
  right: 32%;
  bottom: 0;
  left: 32%;
  height: 2px;
  background: transparent;
  transition: inset .18s ease, background-color .18s ease;
}
.emote-store-nav :is(a[aria-current="page"], button[aria-pressed="true"]) { color: var(--ui-ink); }
.emote-store-nav :is(a[aria-current="page"], button[aria-pressed="true"])::after { right: 0; left: 0; background: var(--ui-ink); }
.emote-store-panel[hidden] { display: none; }
.emote-store-panel { display: grid; gap: 34px; }
.emote-store-hero.emote-spotlight {
  min-height: 314px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--ui-paper-2);
  box-shadow: none;
}
.emote-store-hero .emote-spotlight__viewport,
.emote-store-hero .emote-spotlight__slide { min-height: 314px; }
.emote-store-hero .emote-spotlight__slide { grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); padding: 36px 58px; }
.emote-store-hero .emote-spotlight__copy h2 { margin: 7px 0 9px; color: var(--ui-ink); font-size: clamp(2.1rem, 4vw, 3.65rem); }
.emote-store-hero .emote-spotlight__copy .eyebrow { color: var(--ui-ink); }
.emote-store-hero .emote-spotlight__copy .solid-button { min-height: 42px; background: #2b2e33; color: #fff; }
.emote-store-hero .emote-spotlight__cover {
  width: 100%;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.emote-spotlight__preview { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.emote-spotlight__preview img { width: 100%; aspect-ratio: 1; padding: 14px; object-fit: contain; border-radius: 14px; background: var(--ui-paper); }
.ui-app .emote-store-search.header-search {
  width: min(960px, calc(100% - 32px));
  max-width: none;
  height: 58px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  margin: -8px auto 0;
  padding: 5px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 999px;
  background: var(--ui-paper-2);
  box-shadow: none;
}
.emote-store-search.header-search input { min-width: 0; border: 0; background: transparent; box-shadow: none; outline: 0; }
.ui-app .emote-store-search.header-search .search-brand,
.ui-app .emote-store-search.header-search .search-submit { position: relative; width: 46px; min-width: 46px; height: 46px; }
.ui-app .emote-store-search.header-search .search-brand .brandmark { width: 46px; height: 46px; border-radius: 50%; background: var(--ui-ink); color: var(--ui-paper); }
.ui-app .emote-store-search.header-search .search-brand .brandmark svg { display: none; }
.ui-app .emote-store-search.header-search .search-brand .brandmark::before { content: ""; width: 28px; height: 28px; background: var(--ui-paper); -webkit-mask: url("/assets/brand/glyph.svg") center / contain no-repeat; mask: url("/assets/brand/glyph.svg") center / contain no-repeat; }
.emote-store-quick { display: flex; justify-content: center; gap: clamp(24px, 7vw, 88px); padding: 8px 14px 24px; scrollbar-width: none; }
.emote-store-quick::-webkit-scrollbar { display: none; }
.emote-store-quick a { min-width: 80px; display: grid; justify-items: center; gap: 8px; color: var(--ui-ink); font-size: .76rem; font-weight: 750; }
.emote-store-quick a span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--ui-paper-2); }
.emote-store-quick a .icon { width: 22px; height: 22px; }
.emote-store-results { display: grid; gap: 96px; padding: 30px 0 18px; }
.emote-store-section { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.emote-store-section > header { align-items: end; margin-bottom: 18px; }
.emote-store-section > header h2 { margin: 3px 0 0; font-size: 1.35rem; letter-spacing: -.03em; }
.emote-store-section > header .eyebrow { color: var(--ui-dim); font-size: .61rem; }
.emote-store-section > header .text-button { min-height: 32px; border: 0; color: var(--ui-dim); }
.emote-store-section[hidden] { display: none; }
.emote-store-no-results { min-height: 160px; display: grid; place-items: center; color: var(--ui-dim); }
.emote-store-no-results[hidden] { display: none; }
.emote-search-ranking__list { display: grid; gap: 8px; }
.emote-rank-item { overflow: hidden; border-radius: 10px; background: var(--ui-paper-2); }
.emote-rank-item[hidden], .emote-rank-item__detail[hidden] { display: none; }
.emote-rank-item__toggle {
  width: 100%; min-height: 54px; display: grid; grid-template-columns: 34px 24px minmax(0, 1fr) 24px;
  align-items: center; gap: 10px; padding: 7px 16px; border: 0; background: transparent; color: var(--ui-ink); text-align: left;
}
.emote-rank-item__cover { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: var(--ui-paper); }
.emote-rank-item__cover img { width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.emote-rank-item__toggle b { color: var(--ui-signal); font-size: .82rem; text-align: center; }
.emote-rank-item__toggle strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.emote-rank-item__chevron { display: grid; place-items: center; color: var(--ui-dim); transition: transform .16s ease; }
.emote-rank-item__toggle[aria-expanded="true"] .emote-rank-item__chevron { transform: rotate(90deg); }
.emote-rank-item__detail { padding: 0 10px 10px; }
.emote-rank-item__detail > a { display: grid; gap: 7px; padding: 22px; border-radius: 9px; background: var(--ui-paper); color: var(--ui-ink); }
.emote-rank-item__detail > a > span { min-height: 126px; display: flex; align-items: center; justify-content: center; gap: 14px; overflow: hidden; }
.emote-rank-item__detail img { width: min(20%, 126px); aspect-ratio: 1; object-fit: contain; }
.emote-rank-item__detail small { color: var(--ui-dim); text-align: center; }
.emote-search-ranking__more { width: 100%; min-height: 42px; margin-top: 8px; border: 1px solid var(--ui-line); border-radius: 9px; background: transparent; color: var(--ui-ink); }
.emote-search-ranking__more .icon { width: 16px; height: 16px; margin-left: 6px; vertical-align: -3px; }
.ad-slot--emotes-home { width: 100%; min-height: 112px; }

/* The pack detail belongs to the same neutral storefront, not a separate purple product. */
.emote-set-page { width: min(1120px, 100%); margin-inline: auto; padding: 34px 0 64px; gap: 34px; }
.emote-set-showcase {
  min-height: 280px;
  grid-template-columns: 230px minmax(0, 1fr) auto;
  gap: 42px;
  padding: 34px 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-ink);
}
.emote-set-showcase figure { width: 230px; height: 230px; padding: 18px; border: 0; border-radius: 12px; background: var(--ui-paper-2); }
.emote-set-showcase figure img { filter: none; }
.emote-set-showcase__copy h1 { margin: 7px 0 8px; color: var(--ui-ink); font-size: clamp(2rem, 3.6vw, 3.35rem); }
.emote-set-showcase__copy > p { color: var(--ui-dim); }
.emote-set-stats dt { color: var(--ui-dim); }
.emote-set-stats dd { color: var(--ui-ink); }
.emote-set-showcase__actions .text-button { border-color: var(--ui-line-strong); color: var(--ui-ink); }
.emote-store-purchase { display: grid; gap: 7px; }
.emote-store-purchase .solid-button { width: 100%; justify-content: center; }
.emote-store-state { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--ui-line-strong); border-radius: 9px; color: var(--ui-dim); font-size: .78rem; font-weight: 800; }
.emote-set-body { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.emote-set-body > .section-head { margin-bottom: 18px; }
.emote-set-grid { gap: 12px; }
.emote-set-grid .emote-chip { padding: 12px; border-radius: 9px; background: var(--ui-paper-2); }
.emote-set-grid .emote-chip__star,
.emote-picker .emote-chip__star {
  width: auto; min-width: 34px; height: 23px; grid-auto-flow: column; gap: 2px; padding: 0 6px;
  border-radius: 999px; color: var(--ui-dim); font-size: 9px; font-weight: 800;
}
.emote-chip__star .icon { width: 12px; height: 12px; }
.emote-chip__star[aria-pressed="true"] { background: color-mix(in srgb, var(--ui-pick) 12%, var(--ui-paper)); color: var(--ui-pick); }

@media (max-width: 760px) {
  .emote-store-nav { min-height: 52px; margin: -14px 0 0; }
  .emote-store-hero .emote-spotlight__slide { grid-template-columns: minmax(0, 1fr); padding: 24px 18px 30px; }
  .emote-store-hero .emote-spotlight__cover { grid-row: 1; width: 100%; }
  .emote-spotlight__preview { gap: 8px; }
  .emote-spotlight__preview img { padding: 8px; border-radius: 9px; }
  .emote-store-search.header-search { width: 100%; }
  .emote-store-quick { justify-content: flex-start; gap: 14px; overflow-x: auto; }
  .emote-store-quick a { flex: 0 0 78px; }
  .emote-store-results { gap: 68px; padding-top: 18px; }
  .emote-store-quick { padding-bottom: 18px; }
  .emote-rank-item__toggle { grid-template-columns: 30px 20px minmax(0, 1fr) 20px; gap: 7px; padding-inline: 10px; }
  .emote-rank-item__cover { width: 30px; height: 30px; }
  .emote-rank-item__detail > a { padding: 15px 8px; }
  .emote-rank-item__detail > a > span { min-height: 92px; gap: 5px; }
  .emote-set-page { padding: 18px 0 42px; }
  .emote-set-showcase { grid-template-columns: 110px minmax(0, 1fr); padding: 16px 0 22px; gap: 16px; }
  .emote-set-showcase figure { width: 110px; height: 110px; padding: 10px; border-radius: 9px; }
  .emote-set-showcase__actions { grid-column: 1 / -1; }
}

/* ========================================================================
   Responsive shell and Pack Benefit final contract
   These rules intentionally live last: later legacy desktop rules must never
   turn compact actions into full-card dark blocks again.
   ======================================================================== */

/* The search mark is one circular cut-out symbol, not a square inside a circle. */
.ui-app .header-search .search-brand,
.ui-app .mobile-search .search-brand {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.ui-app .header-search .search-brand .brandmark,
.ui-app .mobile-search .search-brand .brandmark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ui-ink);
  color: var(--ui-paper);
}
.ui-app .header-search .search-brand .brandmark svg,
.ui-app .mobile-search .search-brand .brandmark svg {
  display: none;
}
.ui-app .header-search .search-brand .brandmark::before,
.ui-app .mobile-search .search-brand .brandmark::before {
  content: "";
  width: 22px;
  height: 22px;
  background: var(--ui-paper);
  -webkit-mask: url("/assets/brand/glyph.svg") center / contain no-repeat;
  mask: url("/assets/brand/glyph.svg") center / contain no-repeat;
}

/* A clicked account control owns the open state on touch devices. */
.ui-app .profile-menu__flyout[hidden] { display: none; }
.ui-app .profile-menu[data-open="true"] .profile-menu__flyout,
.ui-app .profile-menu .identity-button[aria-expanded="true"] + .profile-menu__flyout {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Four equal desktop cards; every action stays a compact outlined control. */
.ui-app .my-workspace__content .benefit-dashboard__intro {
  min-height: 0;
  padding: 16px 18px;
  border: 1px solid var(--ui-line-strong);
  border-left-width: 1px;
  border-radius: 11px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: none;
}
.ui-app .my-workspace__content .benefit-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 0;
}
.ui-app .my-workspace__content .benefit-panel > .benefit-card,
.ui-app .my-workspace__content .benefit-panel > .benefit-card--ready {
  min-width: 0;
  min-height: 0;
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ui-line-strong);
  border-left-width: 1px;
  border-radius: 11px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: none;
}
.ui-app .my-workspace__content .benefit-card__action {
  width: max-content;
  max-width: 100%;
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-self: end;
  justify-self: start;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: none;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1;
}
.ui-app .my-workspace__content .benefit-card__action:hover,
.ui-app .my-workspace__content .benefit-card__action:focus-visible {
  border-color: var(--ui-ink);
  background: var(--ui-paper-2);
  color: var(--ui-ink);
  outline: 0;
  transform: none;
}

@media (max-width: 760px) {
  .ui-app .header-row { overflow: visible; }
  .ui-app .profile-menu { position: static; }
  .ui-app .profile-menu__flyout {
    position: fixed;
    z-index: 300;
    top: calc(var(--ui-header) + 58px);
    right: 12px;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - var(--ui-header) - 142px - env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--ui-line-strong);
    background: var(--ui-paper);
    color: var(--ui-ink);
    box-shadow: 0 18px 48px rgb(18 24 31 / 18%);
  }
  .ui-app .mobile-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
  }
  .ui-app .mobile-nav__item {
    min-width: 0;
    padding-inline: 2px;
    overflow: visible;
    font-size: clamp(8px, 2.25vw, 10px);
    white-space: nowrap;
  }
  .ui-app .my-workspace__content .benefit-panel {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }
  .ui-app .my-workspace__content .benefit-panel > .benefit-card,
  .ui-app .my-workspace__content .benefit-panel > .benefit-card--ready {
    min-width: 0;
  }
}

/* The capsule outline sits above its children, so the input cannot erase it. */
.ui-app .header-search,
.ui-app .mobile-search {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  background: var(--ui-paper);
}
.ui-app .header-search::before,
.ui-app .mobile-search::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 26%, var(--ui-line));
  border-radius: 999px;
  pointer-events: none;
}
.ui-app .header-search:hover::before,
.ui-app .mobile-search:hover::before { border-color: #8c9298; }
.ui-app .header-search:focus-within::before,
.ui-app .mobile-search:focus-within::before { border-color: var(--ui-ink); }
.ui-app .header-search input,
.ui-app .mobile-search input {
  position: relative;
  z-index: 0;
  align-self: stretch;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none;
}
.ui-app .header-search .search-brand,
.ui-app .mobile-search .search-brand,
.ui-app .header-search .search-submit,
.ui-app .mobile-search .search-submit { position: relative; z-index: 1; }

/* Home entry points become one compact desktop menu; mobile keeps its layout. */
@media (min-width: 621px) {
  .ui-app .home-masthead .home-masthead__links {
    width: clamp(174px, 13vw, 202px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 7px;
  }
  .ui-app .home-masthead .home-masthead__links a {
    width: 100%;
    min-height: 38px;
    justify-content: space-between;
    padding: 0 11px 0 13px;
  }
}

@media (max-width: 620px) {
  .ui-app .home-pack-pill { min-width: 135px; overflow: hidden; }
  .ui-app .home-pack-pill > span:not(.entity-icon) { min-width: 0; max-width: 100%; overflow: hidden; }
  .ui-app .home-pack-pill strong {
    min-width: 0;
    max-width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ui-app .home-interest-rail .pack-discovery-card__copy strong { overflow-wrap: anywhere; }
}

/* Final Games skin: neutral shell, soft card hierarchy, no green presentation bar. */
.games-experience {
  --games-accent: #ef684b;
  --games-accent-strong: #b8432e;
  --games-mute: var(--ui-dim);
  --games-line: var(--ui-line-strong);
  color: var(--ui-ink);
}
.games-experience .games-local-header,
.games-discovery .games-local-header,
.games-registration .games-local-header {
  min-height: 58px;
  margin-top: 14px;
  padding: 0 16px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 11px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: 0 6px 20px rgb(24 30 39 / 4%);
  animation: none;
}
.games-experience .games-wordmark span,
.games-discovery .games-wordmark span,
.games-registration .games-wordmark span,
.games-experience .games-local-header nav a,
.games-discovery .games-local-header nav a,
.games-registration .games-local-header nav a { color: var(--ui-dim); }
.games-experience .games-wordmark strong,
.games-discovery .games-wordmark strong,
.games-registration .games-wordmark strong { color: var(--ui-ink); }
.games-experience .games-local-header nav a:hover,
.games-experience .games-local-header nav a[aria-current="page"],
.games-discovery .games-local-header nav a:hover,
.games-discovery .games-local-header nav a[aria-current="page"],
.games-registration .games-local-header nav a:hover,
.games-registration .games-local-header nav a[aria-current="page"] {
  border-bottom-color: var(--games-accent);
  color: var(--ui-ink);
}
.games-experience .games-local-apply,
.games-discovery .games-local-apply,
.games-registration .games-local-apply {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-paper);
  color: var(--ui-ink);
}
.games-experience .games-local-apply span,
.games-discovery .games-local-apply span,
.games-registration .games-local-apply span { color: var(--games-accent-strong); }
.games-pack-experience .game-pack { gap: 18px; padding-top: 16px; }
.games-pack-experience .game-pack-hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 14px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: 0 12px 34px rgb(24 30 39 / 6%);
}
.games-pack-experience .game-pack-hero__media {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: #0e1015;
}
.games-pack-experience .game-pack-hero__copy {
  display: grid;
  align-content: center;
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-paper-2);
  color: var(--ui-ink);
}
.games-pack-experience .game-pack-hero__copy .eyebrow { color: var(--games-accent-strong); }
.games-pack-experience .game-pack-hero h1 {
  margin: 7px 0 10px;
  overflow: visible;
  color: var(--ui-ink);
  font-size: clamp(1.85rem, 2.7vw, 3.15rem);
  line-height: 1.06;
  text-overflow: clip;
  white-space: normal;
}
.games-pack-experience .game-pack-hero__desc { color: var(--ui-dim); font-size: .82rem; line-height: 1.65; }
.games-pack-experience .game-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 20px 0;
  padding: 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 0;
}
.games-pack-experience .game-facts div,
.games-pack-experience .game-facts div:nth-child(odd) {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
}
.games-pack-experience .game-facts dt { color: var(--ui-dim); font-size: .64rem; }
.games-pack-experience .game-facts dd { color: var(--ui-ink); font-size: .78rem; }
.games-pack-experience .game-pack-actions .button,
.games-pack-experience .game-pack-actions .games-button,
.games-pack-experience .game-pack-actions .button-secondary,
.games-pack-experience .game-pack-actions .button-quiet {
  width: max-content;
  min-width: 0;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: none;
}
.games-pack-experience .game-pack-actions [data-game-pik][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--games-accent) 58%, var(--ui-line));
  background: color-mix(in srgb, var(--games-accent) 9%, var(--ui-paper));
  color: var(--games-accent-strong);
}

@media (max-width: 900px) {
  .games-pack-experience .game-pack-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .games-experience .games-local-header,
  .games-discovery .games-local-header,
  .games-registration .games-local-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
  }
  .games-experience .games-local-header nav,
  .games-discovery .games-local-header nav,
  .games-registration .games-local-header nav {
    grid-column: 1 / -1;
    order: 3;
    overflow-x: auto;
    border-top: 1px solid var(--ui-line);
  }
  .games-experience .games-local-header nav a,
  .games-discovery .games-local-header nav a,
  .games-registration .games-local-header nav a { flex: 1 0 auto; padding-inline: 10px; }
  .games-pack-experience .game-pack-hero { margin-inline: 0; padding: 8px; border-radius: 11px; }
  .games-pack-experience .game-pack-hero__copy { padding: 18px; }
  .games-pack-experience .game-pack-hero h1 { font-size: clamp(1.9rem, 9vw, 2.55rem); }
  .games-pack-experience .game-facts { grid-template-columns: minmax(0, 1fr); }
  .games-pack-experience .game-pack-actions > * { flex: 0 1 auto; }
}

/* Keep after legacy community rules: compact comment and reply composer. */
.post-reading-main .comment-composer,
.comment-reply-slot .comment-composer {
  display: grid;
  grid-template-columns: minmax(270px, 360px) minmax(0, 1fr);
  align-items: end;
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ui-ink) 18%, var(--ui-line));
  border-radius: 12px;
  background: var(--ui-paper);
}
.comment-composer__head { grid-column: 1 / -1; }
.comment-compose-stack { min-width: 0; display: grid; gap: 7px; }
.comment-compose-bar {
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px 38px;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 18px;
  background: rgb(35 38 43 / 90%);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 8px 24px rgb(17 19 22 / 12%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.comment-compose-bar:focus-within {
  border-color: rgb(255 255 255 / 27%);
  background: rgb(35 38 43 / 94%);
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 0 0 3px rgb(35 38 43 / 7%);
}
.comment-compose-field { min-width: 0; }
.comment-compose-field .rich-source { display: none; }
.comment-compose-field .rich-editor,
.comment-compose-field textarea {
  width: 100%;
  min-height: 38px;
  max-height: 150px;
  margin: 0;
  padding: 8px 4px;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f5f2f6;
  font-size: .82rem;
  line-height: 1.45;
  outline: 0;
  resize: none;
}
.comment-compose-field .rich-editor[data-empty="true"]::before { top: 8px; inset-inline-start: 4px; color: rgb(245 242 246 / 58%); }
.comment-compose-more,
.comment-compose-emote,
.comment-compose-send {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgb(245 242 246 / 78%);
}
.comment-compose-more:hover,
.comment-compose-emote:hover { border: 0; background: transparent; color: #fff; transform: translateY(-1px); }
.comment-compose-emote[aria-expanded="true"] {
  border: 0;
  background: transparent;
  color: #fff;
}
.comment-compose-send {
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 11px;
  background: #fff;
  color: #23262b;
}
.comment-compose-send .icon { width: 20px; height: 20px; }
.comment-compose-send:hover { border-color: #fff; background: #f1f2f3; color: #111318; filter: none; }
.comment-compose-tools[hidden],
.comment-composer .emote-picker-slot[hidden] { display: none; }
.comment-compose-tools {
  padding: 5px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-paper-2);
}
.comment-compose-tools .editor-toolbar--compact { padding: 0; }
.comment-composer .guest-credentials--compact {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(92px, .7fr) minmax(168px, 1.3fr);
  align-items: end;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}
.comment-composer .guest-credentials--compact legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.comment-composer .guest-credentials--compact label { min-width: 0; display: grid; gap: 3px; }
.comment-composer .guest-credentials--compact .guest-credentials__label { color: var(--ui-dim); font-size: .62rem; font-weight: 750; }
.comment-composer .guest-credentials--compact input {
  min-width: 0;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-paper-2);
}
.comment-composer .guest-credentials--compact .password-line {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 3px;
}
.comment-composer .guest-credentials--compact .password-line .text-button {
  min-width: 0;
  min-height: 38px;
  padding: 0 7px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-paper);
  font-size: .62rem;
}

@media (max-width: 700px) {
  .post-reading-main .comment-composer,
  .comment-reply-slot .comment-composer {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
  }
  .comment-composer .guest-credentials--compact {
    grid-template-columns: minmax(88px, .72fr) minmax(170px, 1.28fr);
    gap: 5px;
  }
  .comment-composer .guest-credentials--compact .guest-credentials__label { display: none; }
  .comment-composer .guest-credentials--compact input,
  .comment-composer .guest-credentials--compact .password-line .text-button { min-height: 34px; }
  .comment-compose-bar {
    min-height: 48px;
    grid-template-columns: 32px minmax(0, 1fr) 32px 36px;
    gap: 4px;
    padding: 5px;
    border-radius: 16px;
  }
  .comment-compose-more,
  .comment-compose-emote { border-radius: 0; }
  .comment-compose-send { border-radius: 10px; }
}

/* The + menu floats from its anchor instead of pushing the comment form taller. */
.comment-compose-stack { position: relative; }
.comment-compose-tools {
  position: absolute;
  z-index: 18;
  inset-inline-start: 0;
  bottom: calc(100% + 8px);
  width: min(164px, calc(100vw - 44px));
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 11px;
  background: rgb(35 38 43 / 97%);
  box-shadow: 0 14px 34px rgb(15 17 20 / 24%);
  animation: comment-menu-in 170ms cubic-bezier(.2,.8,.2,1) both;
  transform-origin: bottom left;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.comment-compose-tools .editor-toolbar--compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 0;
  background: transparent;
}
.comment-compose-tools .editor-toolbar--compact button {
  width: 100%;
  min-height: 30px;
  justify-content: flex-start;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgb(250 247 251 / 88%);
  font-size: .68rem;
  text-align: start;
}
.comment-compose-tools .editor-toolbar--compact button:hover,
.comment-compose-tools .editor-toolbar--compact button:focus-visible {
  border: 0;
  background: rgb(255 255 255 / 9%);
  color: #fff;
}
@keyframes comment-menu-in {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .comment-compose-tools { animation: none; }
}

.ui-app .comment-compose-bar .comment-compose-more,
.ui-app .comment-compose-bar .comment-compose-emote { color: rgb(245 246 247 / 82%); }
.ui-app .comment-compose-bar .comment-compose-more:hover,
.ui-app .comment-compose-bar .comment-compose-emote:hover,
.ui-app .comment-compose-bar .comment-compose-more[aria-expanded="true"],
.ui-app .comment-compose-bar .comment-compose-emote[aria-expanded="true"] { color: #fff; }

/* Emotes open as a right-aligned popover directly below their button. */
.comment-compose-stack > .emote-picker-slot:not([hidden]) {
  position: absolute;
  z-index: 19;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  width: min(520px, 100%);
  max-width: calc(100vw - 44px);
  animation: comment-emote-in 180ms cubic-bezier(.2,.8,.2,1) both;
  transform-origin: top right;
}
@keyframes comment-emote-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .comment-compose-stack > .emote-picker-slot:not([hidden]) { animation: none; }
}

/* Comments end before the composer; identity and message are independent bars. */
.post-reading-main .comment-compose-section {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}
.post-reading-main .comment-compose-section .comment-form-home {
  margin: 0;
  padding: 0;
  border: 0;
}
.post-reading-main .comment-compose-section .comment-composer,
.comment-reply-slot .comment-composer {
  max-width: none;
  display: grid;
  grid-template-columns: max-content minmax(320px, 1fr);
  align-items: end;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.comment-reply-slot .comment-composer { padding-block: 7px; }
.comment-composer .guest-credentials--compact,
.comment-composer > .composer-identity {
  min-width: 0;
  min-height: 48px;
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 14px;
  background: rgb(35 38 43 / 90%);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.comment-composer .guest-credentials--compact {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.comment-composer .guest-credentials--compact {
  width: max-content;
  max-width: 100%;
  grid-template-columns: minmax(130px, 180px) minmax(260px, 360px);
  align-items: center;
  gap: 10px;
}
.comment-composer .guest-credentials--compact .guest-credentials__label { display: none; }
.ui-app .comment-composer .guest-credentials--compact input {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #c5c9ce;
  border-radius: 9px;
  background: #fff !important;
  color: #23262b;
  box-shadow: none;
  outline: 0;
}
.ui-app .comment-composer .guest-credentials--compact input::placeholder { color: #767b83; }
.ui-app .comment-composer .guest-credentials--compact input:focus {
  border-color: #676c74;
  box-shadow: 0 0 0 3px rgb(35 38 43 / 8%);
}
.comment-composer .guest-credentials--compact .password-line .text-button {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 8px;
  background: #fff;
  color: #23262b;
  font-size: .62rem;
}
.comment-composer .guest-credentials--compact .password-line .text-button:hover {
  border-color: #fff;
  background: #f1f2f3;
  color: #111318;
}
.comment-composer > .composer-identity {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f5f6f7;
}
.comment-composer > .composer-identity span,
.comment-composer > .composer-identity small { color: rgb(245 246 247 / 62%); }

@media (max-width: 700px) {
  .post-reading-main .comment-compose-section { margin-top: 12px; }
  .post-reading-main .comment-compose-section .comment-composer,
  .comment-reply-slot .comment-composer {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .comment-composer .guest-credentials--compact {
    width: 100%;
    grid-template-columns: minmax(88px, .7fr) minmax(176px, 1.3fr);
    gap: 8px;
  }
  .comment-composer .guest-credentials--compact input,
  .comment-composer .guest-credentials--compact .password-line .text-button { min-height: 34px; }
}

.ui-app .comment-compose-bar {
  min-height: 56px;
  grid-template-columns: 36px minmax(0, 1fr) 40px 36px;
  padding: 5px 7px;
  border-radius: 10px;
}
.ui-app .comment-compose-more .icon { width: 21px; height: 21px; }
.ui-app .comment-compose-emote .icon { width: 27px; height: 27px; }
.ui-app .comment-compose-more,
.ui-app .comment-compose-emote {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ui-app .comment-compose-more:hover,
.ui-app .comment-compose-emote:hover,
.ui-app .comment-compose-more[aria-expanded="true"],
.ui-app .comment-compose-emote[aria-expanded="true"] { border: 0; }
.ui-app .comment-compose-more .icon,
.ui-app .comment-compose-emote .icon {
  transform-origin: center;
  transition: transform 170ms cubic-bezier(.2,.8,.2,1), color 170ms ease;
}
.ui-app .comment-compose-more[aria-expanded="true"] .icon { transform: rotate(45deg) scale(1.08); }
.ui-app .comment-compose-emote[aria-expanded="true"] .icon { transform: rotate(-8deg) scale(1.1); }
.ui-app .comment-compose-more:active .icon,
.ui-app .comment-compose-emote:active .icon { transform: scale(.82); transition-duration: 70ms; }
.ui-app .comment-compose-send {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid #858b93;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  line-height: 0;
}
.ui-app .comment-compose-send .comment-send-symbol {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 170ms cubic-bezier(.2,.8,.2,1);
}
.ui-app .comment-compose-send:hover .comment-send-symbol { transform: scale(1.06); }
.ui-app .comment-compose-send:hover { border-color: #a0a5ac; background: transparent; }
.ui-app .comment-compose-send:active .comment-send-symbol { transform: scale(.88); transition-duration: 70ms; }
.ui-app .comment-composer .guest-credentials--compact {
  grid-template-columns: 140px 330px;
  gap: 10px;
  justify-self: start;
}
.ui-app .comment-composer .guest-credentials--compact .password-line {
  grid-template-columns: minmax(120px, 1fr) 58px 58px;
  gap: 5px;
}
.ui-app .comment-composer .guest-credentials--compact .password-line .text-button {
  width: 58px;
  padding-inline: 6px;
  border-color: #c5c9ce;
}
@media (max-width: 700px) {
  .ui-app .comment-compose-bar {
    min-height: 54px;
    grid-template-columns: 34px minmax(0, 1fr) 38px 36px;
    padding: 5px 6px;
    border-radius: 10px;
  }
  .ui-app .comment-compose-emote .icon { width: 25px; height: 25px; }
  .ui-app .comment-compose-send { border-radius: 10px; }
  .ui-app .comment-compose-send .comment-send-symbol { width: 100%; height: 100%; }
  .ui-app .comment-composer .guest-credentials--compact {
    grid-template-columns: minmax(82px, 100px) minmax(0, 1fr);
    gap: 8px;
  }
  .ui-app .comment-composer .guest-credentials--compact .password-line {
    grid-template-columns: minmax(70px, 1fr) 54px 54px;
    gap: 4px;
  }
  .ui-app .comment-composer .guest-credentials--compact .password-line .text-button {
    width: 54px;
    padding-inline: 4px;
  }
}
.ui-app .comment-compose-field .rich-editor {
  overflow-y: hidden;
  transition: height 160ms cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .ui-app .comment-compose-field .rich-editor,
  .ui-app .comment-compose-more .icon,
  .ui-app .comment-compose-emote .icon,
  .ui-app .comment-compose-send .icon { transition: none; }
}

/* Mobile post actions stay controls, not oversized full-width cards. */
@media (max-width: 700px) {
  .post-reading-main .post-actions {
    min-height: 0;
    align-items: center !important;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 8px 0;
    background: transparent;
  }
  .post-reading-main .post-actions__primary,
  .post-reading-main .post-actions__tools {
    width: auto;
    flex: 0 1 auto;
    gap: 5px;
  }
  .post-reading-main .post-actions__primary > *,
  .post-reading-main .post-actions__tools > *,
  .post-reading-main .post-action,
  .post-reading-main .pik-button {
    min-width: 0;
    min-height: 32px;
    flex: 0 0 auto !important;
    padding: 0 9px;
    border-radius: 7px;
    font-size: .68rem;
  }
  .post-reading-main .post-action .icon,
  .post-reading-main .pik-button .icon { width: 13px; height: 13px; }
}

/* Final post controls: compact hierarchy, not a pile of equal buttons. */
.post-reading-main .post-foot-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.post-reading-main .post-foot-nav__write {
  margin-left: auto;
  border-color: var(--ui-ink);
  background: var(--ui-ink);
  color: var(--ui-paper);
}
.post-reading-main .post-foot-nav__write:hover {
  border-color: var(--ui-ink);
  background: color-mix(in srgb, var(--ui-ink) 88%, var(--ui-paper));
  color: var(--ui-paper);
}
.post-reading-main .pik-button {
  border-color: color-mix(in srgb, var(--ui-rank) 46%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-rank) 9%, var(--ui-paper));
  color: var(--ui-rank);
}
.post-reading-main .pik-button:hover,
.post-reading-main .pik-button[aria-pressed="true"] {
  border-color: var(--ui-rank);
  background: color-mix(in srgb, var(--ui-rank) 16%, var(--ui-paper));
  color: var(--ui-rank);
}

/* Reply target lives inside the same input bar; there is no detached purple header. */
.comment-compose-field--reply {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.comment-reply-form .comment-compose-field textarea,
.comment-reply-form .comment-compose-field .rich-editor {
  height: 38px;
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 22px;
}
.comment-compose-recipient {
  max-width: 150px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px 0 8px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 7px;
  background: rgb(255 255 255 / 7%);
  color: rgb(245 246 247 / 76%);
  font-size: .66rem;
  white-space: nowrap;
}
.comment-compose-recipient strong {
  min-width: 0;
  overflow: hidden;
  color: #f5f6f7;
  text-overflow: ellipsis;
}
.comment-compose-recipient button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(245 246 247 / 66%);
  font-size: 15px;
}
.comment-compose-recipient button:hover { color: #fff; }
.comment-reply-form {
  border: 0 !important;
  background: transparent !important;
}
.comment-reply-slot .comment-reply-form { align-items: start; }
.ui-app .comment-compose-field .rich-editor,
.ui-app .comment-compose-field .rich-editor:focus,
.ui-app .comment-compose-field .rich-editor:focus-visible,
.ui-app .comment-compose-field textarea:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Registered replies keep their target visible and read as a reply at a glance. */
.post-reading-main #comments [data-comment-list] {
  display: block;
  border-top: 1px solid var(--ui-line);
}
.post-reading-main #comments .comment {
  margin-block: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.post-reading-main #comments .comment-line {
  position: relative;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 8px;
  padding: 9px 8px;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: var(--ui-paper);
}
.post-reading-main #comments .comment-author {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.post-reading-main #comments .comment-author a,
.post-reading-main #comments .comment-author strong {
  color: var(--ui-ink);
  font-weight: 800;
}
.post-reading-main #comments .comment-time {
  display: inline-flex;
  margin-left: 2px;
  color: var(--ui-dim);
  font-size: .64rem;
  font-weight: 500;
}
.post-reading-main #comments .comment-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.post-reading-main #comments .comment-pik[aria-pressed="true"] {
  color: var(--ui-pick);
  opacity: 1;
}
.post-reading-main #comments .comment-pik span { min-width: 1ch; font-size: .66rem; }
.post-reading-main #comments .comment-body {
  grid-column: 1 / 3;
  grid-row: 2;
  padding-left: 32px;
}
.post-reading-main .comment--reply {
  position: relative;
  margin: 0 0 0 28px;
  padding-left: 0;
  border-left: 0;
}
.post-reading-main .comment--reply::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: -14px;
  width: 13px;
  height: 24px;
  border: 0;
  border-bottom: 1px solid var(--ui-line-strong);
  border-left: 1px solid var(--ui-line-strong);
  border-radius: 0 0 0 6px;
  background: transparent;
}
.post-reading-main .comment--reply > .comment-line {
  background: color-mix(in srgb, var(--ui-paper-2) 58%, var(--ui-paper));
}
.comment-reply-mention {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: .69rem;
  font-weight: 800;
  vertical-align: baseline;
}
.comment-reply-mention + p { display: inline; }

@media (max-width: 700px) {
  .post-reading-main .comment--reply { margin: 0 0 0 18px; padding-left: 0; }
  .post-reading-main #comments .comment-line {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 3px 6px;
    padding: 9px 5px;
  }
  .post-reading-main #comments .comment-time { margin-left: 1px; padding-left: 0; }
  .post-reading-main #comments .comment-body { grid-column: 1 / -1; grid-row: 3; padding: 5px 2px 1px 32px; }
  .post-reading-main #comments .comment-actions { grid-column: 2; grid-row: 1 / span 2; }
}

.post-reading-main .comment-composer--signed-in,
.comment-reply-slot .comment-composer--signed-in {
  grid-template-columns: minmax(0, 1fr);
}
.comment-composer--signed-in > .comment-compose-stack { grid-column: 1 / -1; }

/* Guest credentials stay short so the actual message gets most of the row. */
@media (min-width: 701px) {
  .ui-app .comment-composer .guest-credentials--compact {
    grid-template-columns: 104px 224px;
    gap: 7px;
  }
  .ui-app .comment-composer .guest-credentials--compact .password-line {
    grid-template-columns: 112px 52px 52px;
    gap: 4px;
  }
  .ui-app .comment-composer .guest-credentials--compact .password-line .text-button {
    width: 52px;
    padding-inline: 4px;
  }
}

/* Pick one representative pack horizontally, then show only that pack's images. */
.comment-composer .emote-picker {
  margin: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #cfd3d8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 38px rgb(23 28 35 / 15%);
}
.comment-composer .emote-picker__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 8px;
  padding: 3px;
  overflow: visible;
  border: 1px solid #e0e2e5;
  border-radius: 8px;
  background: #f1f2f4;
}
.comment-composer .emote-picker__tabs button {
  min-width: 0;
  min-height: 34px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #6b7179;
  font-size: .68rem;
  white-space: nowrap;
}
.comment-composer .emote-picker__tabs button[aria-pressed="true"] {
  border-color: #d2d5da;
  background: #fff;
  color: #23262b;
  box-shadow: 0 2px 6px rgb(23 28 35 / 7%);
}
.comment-composer .emote-picker__panel:not([hidden]),
.comment-composer .emote-picker [data-emote-panel="mine"]:not([hidden]) { display: block; }
.comment-composer .emote-picker__panel[hidden] { display: none; }
.comment-composer .emote-picker__panel > .state-panel {
  min-height: 116px;
  padding: 24px 12px 12px;
  border: 1px solid #e0e2e5;
  border-radius: 8px;
  background: #f8f9fa;
}
.comment-composer .emote-picker__search {
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  background: #f6f7f8;
}
.comment-composer .emote-picker__search:focus-within { border-color: #7d838b; background: #fff; }
.comment-composer .emote-picker__search input {
  min-height: 38px;
  margin: 0;
  padding: 0 4px 0 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #23262b;
  font-size: .72rem;
  outline: 0;
}
.comment-composer .emote-picker__search input:focus { border: 0; box-shadow: none; }
.emote-picker__search-icon { display: grid; place-items: center; color: #666c74; }
.emote-picker__search-icon .icon { width: 15px; height: 15px; }
.emote-picker__pack-shelf {
  display: flex;
  gap: 8px;
  min-height: 68px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid #e0e2e5;
  border-radius: 8px;
  background: #f6f7f8;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.emote-picker__pack {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  background: #fff;
  color: var(--ui-dim);
  scroll-snap-align: start;
}
.emote-picker__pack > span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #f1f2f4;
}
.emote-picker__pack img { width: 100%; height: 100%; object-fit: contain; }
.emote-picker__pack:hover { border-color: #8b9097; color: #23262b; transform: translateY(-1px); }
.emote-picker__pack[aria-pressed="true"] {
  border-color: #353a40;
  background: #fff;
  color: #23262b;
  box-shadow: 0 4px 10px rgb(23 28 35 / 10%);
}
.emote-picker__pack-panel { padding-top: 8px; }
.emote-picker__pack-panel > header {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px 6px;
}
.emote-picker__pack-panel > header strong { color: #23262b; font-size: .72rem; }
.emote-picker__pack-panel > header small { color: var(--ui-dim); font-size: .62rem; }
.emote-picker__pack-grid {
  max-height: 236px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 3px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #e0e2e5;
  border-radius: 8px;
  background: #f8f9fa;
}
.emote-picker__pack-grid .emote-chip,
.emote-picker__pack-grid .emote-chip-wrap { justify-self: center; }
.emote-picker__pack-grid button.emote-chip:hover,
.emote-picker__pack-grid button.emote-chip:focus-visible { background: #eceef1; }
.emote-picker__pack-loading { grid-column: 1 / -1; margin: 14px 4px; color: var(--ui-dim); font-size: .72rem; }
.comment-composer .emote-picker__notice {
  margin: 8px -10px -10px;
  padding: 8px 10px;
  border-top: 1px solid #e0e2e5;
  background: #f6f7f8;
  color: #666c74;
  font-size: .67rem;
  line-height: 1.5;
}
.post-reading-main #comments { overflow: visible; }

/* Search text is vertically centered in every compact search field. */
.ui-app .header-search input,
.ui-app .mobile-search input {
  box-sizing: border-box;
  height: 36px !important;
  min-height: 36px;
  align-self: center;
  padding: 0 12px !important;
  line-height: 36px !important;
}

@media (max-width: 700px) {
  .post-reading-main .post-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: start !important;
    gap: 6px !important;
  }
  .post-reading-main .post-actions__primary,
  .post-reading-main .post-actions__tools { flex-wrap: nowrap; }
  .post-reading-main .post-actions__tools { padding-top: 6px; border-top: 1px solid var(--ui-line); }
  .post-reading-main .post-action,
  .post-reading-main .pik-button {
    min-height: 44px;
    gap: 4px;
    padding: 0 7px;
  }
  .post-reading-main .pik-button__mark { width: 18px; height: 18px; border-radius: 5px; }
  .post-reading-main .pik-button b { min-width: 17px; padding-left: 5px; }
  .post-reading-main .post-foot-nav { min-height: 52px; padding: 8px 0; }
  .post-reading-main .post-foot-nav .text-button { min-height: 44px; padding: 0 10px; }
  .comment-compose-recipient { max-width: 108px; padding-left: 6px; }
  .emote-picker__pack-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .emote-picker__pack-grid .emote-chip { width: 50px; height: 50px; }
}

/* Final post-detail composition: one connected post, then one connected thread. */
.post-reading-main .post-detail {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: 11px;
  background: var(--ui-paper);
}
.post-reading-main .post-detail__head {
  padding: 18px 22px;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
}
.post-reading-main .post-detail__head::before { display: none; }
.post-reading-main .post-detail__head .entity-eyebrow {
  min-height: 27px;
  margin-bottom: 6px;
}
.post-reading-main .post-detail__head h1 {
  max-width: 38ch;
  margin-bottom: 9px;
  font-size: clamp(1.45rem, 1.9vw, 1.8rem);
  font-weight: 650;
  line-height: 1.24;
  letter-spacing: -.032em;
}
.post-reading-main .post-detail__content {
  padding: 22px;
  border: 0;
  border-radius: 0;
}
.post-reading-main .post-detail > .ad-slot--post-meta {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
}
.post-reading-main #comments > .ad-slot--post-primary {
  margin: 0 0 8px;
}
.post-reading-main > .post-foot-nav {
  min-height: 48px;
  margin-top: -4px;
  padding: 5px 0;
  border-top: 1px solid var(--ui-line);
  background: transparent;
}

@media (max-width: 700px) {
  .post-reading-main #comments .comment-form button { min-height: 44px; }
  .post-reading-main .post-detail__head { padding: 15px; }
  .post-reading-main .post-detail__head h1 { font-size: 1.32rem; }
  .post-reading-main .post-detail__content { padding: 18px 15px; }
  .post-reading-main #comments .comment-line {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  .post-reading-main #comments .comment-author {
    grid-column: 1;
    grid-row: 1;
  }
  .post-reading-main #comments .comment-body {
    grid-column: 1;
    grid-row: 2;
    padding: 4px 2px 2px 32px;
  }
  .post-reading-main #comments .comment-actions {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
  }
  .comment-compose-field--reply {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(38px, auto);
    align-items: start;
    gap: 2px;
  }
  .comment-compose-field--reply .comment-compose-recipient {
    max-width: min(150px, 100%);
  }
  .comment-reply-form .comment-compose-field textarea,
  .comment-reply-form .comment-compose-field .rich-editor {
    height: auto;
    overflow-y: hidden;
  }
  .post-reading-main #comments .comment-actions button {
    width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    gap: 0;
  }
  .post-reading-main #comments .comment-actions button:not(.comment-pik) .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
  }
  .post-reading-main #comments .comment-actions button:not(.comment-pik) { position: relative; }
  .post-reading-main #comments .comment-actions .comment-pik {
    width: 44px;
    grid-template-columns: 15px auto;
    place-content: center;
    align-items: center;
    column-gap: 2px;
  }
  .post-reading-main #comments .comment-actions .comment-pik .icon {
    width: 15px;
    height: 15px;
  }
  .post-reading-main #comments .comment-actions .comment-pik span {
    min-width: 0;
    line-height: 1;
  }
}

.post-reading-main #comments .comment-actions .comment-pik {
  order: 99;
  margin-left: 8px;
  border-color: color-mix(in srgb, var(--ui-rank) 38%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-rank) 7%, var(--ui-paper));
  color: var(--ui-rank);
  opacity: 1;
}
.post-reading-main #comments .comment-actions .comment-pik:hover,
.post-reading-main #comments .comment-actions .comment-pik[aria-pressed="true"] {
  border-color: var(--ui-rank);
  background: color-mix(in srgb, var(--ui-rank) 14%, var(--ui-paper));
  color: var(--ui-rank);
}

.comment-compose-tools .editor-toolbar--compact button {
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.012em;
}

/* Benefit cards scan as four compact capabilities; status detail stays in the copy below. */
.ui-app .my-workspace__content .benefit-card h3 {
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 761px) {
  .ui-app .my-workspace__content .benefit-card p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* My header is one compact dashboard row, not the former hero plus a second stats row. */
@media (min-width: 981px) {
  .ui-app .my-identity {
    min-height: 132px;
    grid-template-columns: minmax(300px, 1fr) minmax(420px, .88fr) auto;
    grid-template-areas: "person stats actions";
    align-items: center;
    align-content: center;
    gap: 22px;
    padding: 21px 24px 21px 30px;
    border-radius: 17px;
    background: var(--ui-paper);
    box-shadow: 0 13px 36px rgb(35 33 55 / 8%);
  }
  .ui-app .my-identity::before {
    top: 22px;
    right: auto;
    bottom: 22px;
    left: 0;
    width: 5px;
    height: auto;
    border: 0;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(#8e75ff, #6e62d7);
    opacity: 1;
  }
  .ui-app .my-identity::after { display: none; }
  .ui-app .my-identity__person { grid-area: person; }
  .ui-app .my-identity__person .profile-medallion--profile { width: 66px; height: 66px; }
  .ui-app .my-identity__actions { grid-area: actions; display: grid; gap: 7px; }
  .ui-app .my-identity__actions a { min-height: 38px; justify-content: center; white-space: nowrap; box-shadow: none; }
  .ui-app .my-identity__stats {
    grid-area: stats;
    grid-column: auto;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }
  .ui-app .my-identity__stats > div {
    min-height: 66px;
    padding: 11px 14px;
    border-left: 1px solid var(--ui-line);
    background: transparent;
  }
  .ui-app .my-identity__stats > div:last-child { border-right: 1px solid var(--ui-line); }
  .ui-app .my-identity__stats dd { font-size: 21px; }
}

/* My Emotes: creator shelf, saved shelf and individual Pik are separate products. */
.my-emote-dashboard { display: grid; gap: 14px; }
.my-emote-dashboard__heading {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 2px 16px;
  border-bottom: 1px solid var(--ui-line);
}
.my-emote-dashboard__heading h3 { margin: 0 0 6px; color: var(--ui-ink); font-size: 1.18rem; letter-spacing: -.03em; }
.my-emote-dashboard__heading p { max-width: 650px; margin: 0; color: var(--ui-dim); font-size: .72rem; line-height: 1.55; }
.my-emote-dashboard__heading .solid-button, .my-emote-dashboard__heading .text-button { min-height: 40px; flex: none; }
.my-emote-dashboard__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.my-emote-dashboard__summary > div { min-height: 72px; display: grid; align-content: center; gap: 5px; padding: 12px 15px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper); }
.my-emote-dashboard__summary dt { color: var(--ui-dim); font-size: .62rem; font-weight: 800; }
.my-emote-dashboard__summary dd { margin: 0; color: var(--ui-ink); font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.my-emote-dashboard__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.my-emote-dashboard__section { min-width: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.my-emote-dashboard__section > header { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 17px; border-bottom: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.my-emote-dashboard__section > header h3 { margin: 4px 0 0; color: var(--ui-ink); font-size: .9rem; }
.my-emote-dashboard__section > header > span { min-width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-paper); color: var(--ui-dim); font-size: .67rem; font-weight: 900; }
.my-emote-dashboard__sets { display: grid; gap: 0; padding: 6px 16px; }
.my-emote-dashboard__sets .emote-set-card { min-width: 0; border-bottom: 1px solid var(--ui-line); }
.my-emote-dashboard__sets .emote-set-card:last-child { border-bottom: 0; }
.my-emote-dashboard__sets .emote-set-card__main { min-height: 106px; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; padding: 13px 2px; }
.my-emote-dashboard__sets .emote-set-card__cover { width: 78px; height: 78px; border: 1px solid var(--ui-line); border-radius: 18px; background: #f1f1f3; }
.my-emote-dashboard__sets .emote-set-card__text strong { color: var(--ui-ink); font-size: .9rem; }
.my-emote-dashboard__sets .emote-set-card__counts { margin-top: 5px; }
.my-emote-dashboard__sets .state-panel { min-height: 114px; margin: 12px 0; border-radius: 11px; }
.my-emote-dashboard__favorites > div { min-height: 118px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 16px; }
.my-emote-dashboard__favorites .emote-chip-wrap { width: 76px; min-height: 94px; display: grid; justify-items: center; }
.my-emote-dashboard__favorites .emote-chip { width: 68px; height: 68px; }
.my-emote-dashboard__favorites .state-panel { width: 100%; margin: 0; }

/* Public creator profile: EmotePacks are visual showcases rather than one text row. */
.profile-emote-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.profile-emote-card { min-width: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-paper); box-shadow: 0 12px 28px rgb(31 34 45 / 6%); }
.profile-emote-card > .profile-emote-card__hero { min-height: 184px; display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 22px 24px; color: var(--ui-ink); text-decoration: none; }
.profile-emote-card > .profile-emote-card__hero:hover, .profile-emote-card > .profile-emote-card__hero:focus-visible { background: color-mix(in srgb, #8d79f6 5%, var(--ui-paper)); outline: 0; }
.profile-emote-card__cover { width: 132px; height: 132px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 26px; background: #f0f0f2; }
.profile-emote-card__cover img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.profile-emote-card__copy { min-width: 0; display: block; }
.profile-emote-card__copy > strong { display: block; margin-top: 6px; color: var(--ui-ink); font-size: clamp(1.25rem, 2.2vw, 1.65rem); letter-spacing: -.035em; }
.profile-emote-card__copy p { max-width: 58ch; margin: 8px 0 13px; color: var(--ui-dim); font-size: .76rem; line-height: 1.6; }
.profile-emote-card__copy > span { color: var(--ui-dim); font-size: .68rem; font-weight: 750; }
.profile-emote-card__hero > .icon { width: 20px; color: var(--ui-dim); }
.profile-emote-card__preview { min-height: 116px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: 15px 20px 20px; border-top: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.profile-emote-card__preview > span { min-width: 0; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: var(--ui-paper); }
.profile-emote-card__preview img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }

@media (max-width: 760px) {
  .my-emote-dashboard__heading { min-height: 0; align-items: flex-start; flex-direction: column; padding: 2px 0 14px; }
  .my-emote-dashboard__heading .solid-button, .my-emote-dashboard__heading .text-button { width: 100%; justify-content: center; }
  .my-emote-dashboard__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-emote-dashboard__columns { grid-template-columns: 1fr; }
  .profile-emote-card > .profile-emote-card__hero { min-height: 0; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .profile-emote-card__cover { width: 88px; height: 88px; border-radius: 19px; }
  .profile-emote-card__hero > .icon { display: none; }
  .profile-emote-card__copy p { display: none; }
  .profile-emote-card__preview { min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px; }
}

/* My workspace refresh: each utility tab is a dashboard, not a stack of legacy forms. */
.my-experience:is([data-my-tab="activity"], [data-my-tab="follows"], [data-my-tab="saved"], [data-my-tab="creator"], [data-my-tab="profile"], [data-my-tab="settings"]) .my-workspace__heading { display: none; }
.my-experience:is([data-my-tab="activity"], [data-my-tab="follows"], [data-my-tab="saved"], [data-my-tab="creator"], [data-my-tab="profile"], [data-my-tab="settings"]) .my-workspace__content { padding-top: 0; }
.my-modern-dashboard { min-width: 0; display: grid; gap: 13px; }
.my-modern-intro {
  min-height: 104px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 20px 21px;
  border: 1px solid color-mix(in srgb, var(--my-accent) 22%, var(--ui-line));
  border-radius: 16px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--my-accent) 7%, var(--ui-paper)), var(--ui-paper) 65%);
}
.my-modern-intro__icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--my-accent) 30%, var(--ui-line)); border-radius: 15px; background: var(--ui-paper); color: var(--my-accent-strong); box-shadow: 0 8px 20px rgb(80 65 140 / 8%); }
.my-modern-intro__icon .icon { width: 22px; height: 22px; }
.my-modern-intro > div { min-width: 0; }
.my-modern-intro h3 { margin: 4px 0 3px; color: var(--ui-ink); font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.25; letter-spacing: -.03em; }
.my-modern-intro p { max-width: 66ch; margin: 0; color: var(--ui-dim); font-size: .71rem; line-height: 1.55; }
.my-modern-intro > .solid-button, .my-modern-intro > .text-button { min-height: 40px; flex: none; white-space: nowrap; }
.my-modern-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.my-modern-metrics > div { min-height: 70px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper); }
.my-modern-metrics dt { color: var(--ui-dim); font-size: .64rem; font-weight: 800; }
.my-modern-metrics dd { margin: 0; color: var(--ui-ink); font-size: 1.32rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.my-modern-columns { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.my-workspace__content .my-modern-list,
.my-workspace__content .my-modern-card { min-width: 0; overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); }
.my-workspace__content .my-modern-list > .section-head,
.my-workspace__content .my-modern-card > .section-head { min-height: 54px; display: flex; align-items: center; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.my-workspace__content .my-modern-list > .section-head h2,
.my-workspace__content .my-modern-card > .section-head h2 { margin: 0; line-height: 1.3; }
.my-workspace__content .my-modern-list > :not(.section-head),
.my-workspace__content .my-modern-card > :not(.section-head) { margin-right: 14px; margin-left: 14px; }
.my-workspace__content .my-modern-list > .compact-list,
.my-workspace__content .my-modern-list > .state-panel { margin: 0; }
.my-workspace__content .my-modern-list .compact-list { gap: 0; padding: 4px 13px; }
.my-workspace__content .my-modern-list .text-row,
.my-workspace__content .my-modern-list .official-row { min-height: 64px; border-bottom: 1px solid var(--ui-line); }
.my-workspace__content .my-modern-list .state-panel { min-height: 122px; border-radius: 0; }
.my-workspace__content .my-modern-list .module-empty { margin: 0; border: 0; border-radius: 0; }
.my-activity-dashboard .my-modern-columns .my-activity-panel { border-color: var(--ui-line); border-radius: 14px; }
.my-activity-dashboard .my-activity-panel .section-head { min-height: 54px; background: var(--ui-paper-2); }
.my-activity-dashboard .my-activity-panel .compact-list { padding: 4px 13px; }

/* Creator has a status shelf and a separate, scan-friendly connection flow. */
.my-creator-dashboard .creator-live-intro { margin: 0; padding: 18px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); box-shadow: none; }
.my-creator-dashboard .creator-live-intro > div { align-self: center; }
.my-creator-dashboard .creator-live-intro ol { gap: 7px; }
.my-creator-dashboard .creator-live-intro li { min-height: 46px; align-items: center; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper-2); }
.my-creator-dashboard .creator-live-intro li b { color: var(--my-accent-strong); }
.my-creator-dashboard .my-modern-list > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 17px; border-bottom: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.my-creator-dashboard .my-modern-list > header h3 { margin: 3px 0 0; font-size: .9rem; }
.my-creator-dashboard .my-modern-list > header > strong { min-width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-paper); font-size: .72rem; }
.my-creator-dashboard .live-channel-row { margin: 0 15px; }
.my-creator-dashboard .my-modern-list .module-empty { min-height: 138px; display: grid; align-content: center; gap: 6px; padding: 24px; background: var(--ui-paper-2); }
.my-creator-dashboard .my-modern-list .module-empty > * { margin: 0; }

/* Profile editor: preview first, then separate photo, name and privacy cards. */
.my-profile-dashboard > .profile-settings-preview { margin: 0; padding: 18px 20px; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.my-profile-editor-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; }
.my-profile-editor-grid .my-profile-visibility-card { grid-column: 1 / -1; }
.my-profile-editor-grid .avatar-settings,
.my-profile-editor-grid .settings-form { margin: 0; padding: 20px; }
.my-profile-editor-grid .avatar-settings { min-height: 210px; align-items: center; }
.my-profile-dashboard > .collection-showcase { margin: 0; border-radius: 14px; box-shadow: none; }
.my-profile-dashboard > .my-modern-card .support-settings { margin: 0; padding: 17px; }

/* Account: status is a compact snapshot; editable controls are separate cards. */
.my-account-state { min-height: 31px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid color-mix(in srgb, #2f9b65 35%, var(--ui-line)); border-radius: 999px; background: color-mix(in srgb, #2f9b65 8%, var(--ui-paper)); color: #237b4e; font-size: .68rem; font-weight: 900; }
.my-account-snapshot .fact-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 10px 14px 14px; background: var(--ui-line); }
.my-account-snapshot .fact-list > div { min-height: 68px; grid-column: span 2; align-content: center; padding: 11px 13px; border: 0; border-radius: 0; background: var(--ui-paper); }
.my-account-snapshot .fact-list > div:nth-child(5) { grid-column: span 4; }
.my-account-snapshot .fact-list dt { color: var(--ui-dim); font-size: .61rem; font-weight: 800; }
.my-account-snapshot .fact-list dd { margin-top: 5px; color: var(--ui-ink); font-size: .76rem; font-weight: 800; }
.my-settings-grid { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 10px; align-items: start; }
.my-settings-grid .settings-form,
.my-settings-grid .sign-in-settings { max-width: none; margin: 0; padding: 17px; }
.my-settings-grid .settings-form > label,
.my-settings-grid .sign-in-settings > label,
.my-settings-grid .account-password-form > label { padding: 0; background: transparent; }
.my-settings-grid .settings-form select,
.my-settings-grid .sign-in-settings input,
.my-settings-grid .account-password-form input { background: var(--ui-paper); }
.my-settings-grid .danger-button { margin-top: 14px; }

@media (max-width: 980px) {
  .my-modern-columns, .my-profile-editor-grid, .my-settings-grid { grid-template-columns: 1fr; }
  .my-profile-editor-grid .my-profile-visibility-card { grid-column: auto; }
}

@media (max-width: 640px) {
  .my-modern-intro { min-height: 0; grid-template-columns: 42px minmax(0, 1fr); padding: 16px; }
  .my-modern-intro__icon { width: 42px; height: 42px; border-radius: 13px; }
  .my-modern-intro > .solid-button, .my-modern-intro > .text-button, .my-modern-intro > .my-account-state { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .my-modern-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .my-modern-metrics > div { min-height: 68px; display: grid; grid-template-columns: 1fr; gap: 5px; padding: 11px; }
  .my-modern-metrics dd { font-size: 1.15rem; }
  .my-account-snapshot .fact-list { grid-template-columns: 1fr; padding: 8px 13px 13px; }
  .my-account-snapshot .fact-list > div, .my-account-snapshot .fact-list > div:nth-child(5) { grid-column: 1; }
  .my-profile-dashboard > .profile-settings-preview { align-items: flex-start; padding: 16px; }
}

/* Bookmarks: a purpose-built library, not generic section rows. */
.bookmark-studio { min-width: 0; display: grid; gap: 12px; }
.bookmark-studio__head { min-height: 126px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 25px; border: 1px solid color-mix(in srgb, var(--my-accent) 24%, var(--ui-line)); border-radius: 17px; background: linear-gradient(120deg, color-mix(in srgb, var(--my-accent) 9%, var(--ui-paper)), var(--ui-paper) 70%); }
.bookmark-studio__head h3 { margin: 5px 0 5px; font-size: clamp(1.25rem, 2.1vw, 1.55rem); letter-spacing: -.035em; }
.bookmark-studio__head p { margin: 0; color: var(--ui-dim); font-size: .73rem; line-height: 1.55; }
.bookmark-studio__head > strong { min-width: 90px; display: grid; justify-items: center; padding: 13px 18px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); color: var(--ui-ink); font-size: 2.25rem; line-height: 1; }
.bookmark-studio__head > strong small { margin-bottom: 6px; color: var(--ui-dim); font-size: .58rem; letter-spacing: .11em; }
.bookmark-studio__filters { min-height: 48px; display: flex; align-items: center; gap: 7px; padding: 5px; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-paper-2); }
.bookmark-studio__filters button { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--ui-dim); font: inherit; font-size: .68rem; font-weight: 800; cursor: pointer; }
.bookmark-studio__filters button:hover { background: color-mix(in srgb, var(--ui-paper) 70%, transparent); color: var(--ui-ink); }
.bookmark-studio__filters button:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 1px; }
.bookmark-studio__filters button.is-active { background: var(--ui-paper); color: var(--ui-ink); box-shadow: 0 4px 12px rgb(32 36 46 / 6%); }
.bookmark-studio__filters b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; background: var(--ui-paper-2); font-size: .58rem; }
.bookmark-shelf { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.bookmark-shelf > header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 17px; border-bottom: 1px solid var(--ui-line); }
.bookmark-shelf > header > div { display: flex; align-items: center; gap: 11px; }
.bookmark-shelf > header > div > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--ui-paper-2); color: var(--my-accent-strong); }
.bookmark-shelf > header .icon { width: 17px; }
.bookmark-shelf > header h3 { margin: 0 0 3px; font-size: .88rem; }
.bookmark-shelf > header p { margin: 0; color: var(--ui-dim); font-size: .62rem; }
.bookmark-shelf > header > b { min-width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 9px; font-size: .68rem; }
.bookmark-shelf__grid { min-height: 132px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 13px; background: var(--ui-paper-2); }
.bookmark-card { min-width: 0; min-height: 96px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 34px; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper); }
.bookmark-card > a { display: contents; color: inherit; text-decoration: none; }
.bookmark-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--my-accent) 10%, var(--ui-paper-2)); color: var(--my-accent-strong); }
.bookmark-card__icon .icon { width: 18px; }
.bookmark-card > div, .bookmark-card > a + div { min-width: 0; display: grid; align-content: center; gap: 4px; }
.bookmark-card small { color: var(--my-accent-strong); font-size: .56rem; font-weight: 850; letter-spacing: .05em; }
.bookmark-card strong { overflow: hidden; color: var(--ui-ink); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-card p { margin: 0; color: var(--ui-dim); font-size: .61rem; }
.bookmark-card__remove { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); color: var(--my-accent-strong); }
.bookmark-card__remove .icon { width: 15px; fill: currentColor; }
.bookmark-empty { grid-column: 1 / -1; min-height: 110px; display: grid; justify-items: center; align-content: center; gap: 5px; color: var(--ui-dim); text-align: center; }
.bookmark-empty > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--ui-paper); }
.bookmark-empty .icon { width: 16px; }
.bookmark-empty strong { color: var(--ui-ink); font-size: .74rem; }
.bookmark-empty p { margin: 0; font-size: .62rem; }

/* Creator: a four-step studio and a dedicated channel board. */
.creator-studio { min-width: 0; display: grid; gap: 12px; }
.creator-journey { padding: 18px; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.creator-journey > header { margin-bottom: 14px; }
.creator-journey > header h3 { margin: 4px 0 0; font-size: 1rem; }
.creator-journey > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.creator-journey article { position: relative; min-height: 142px; display: grid; align-content: center; justify-items: start; gap: 7px; padding: 17px; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-paper-2); }
.creator-journey article > b { position: absolute; top: 12px; right: 13px; color: color-mix(in srgb, var(--my-accent) 65%, var(--ui-dim)); font-size: .62rem; letter-spacing: .08em; }
.creator-journey article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--ui-paper); color: var(--my-accent-strong); }
.creator-journey article .icon { width: 16px; }
.creator-journey article > strong { font-size: .76rem; }
.creator-journey article > small { color: var(--ui-dim); font-size: .6rem; line-height: 1.45; }
.creator-channel-board { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.creator-channel-board > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 17px; border-bottom: 1px solid var(--ui-line); }
.creator-channel-board > header h3 { margin: 4px 0 0; font-size: .92rem; }
.creator-channel-board > header > strong { min-width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 9px; font-size: .7rem; }
.creator-channel-board__body { min-height: 145px; padding: 13px; background: var(--ui-paper-2); }
.creator-channel-empty { min-height: 119px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 17px 20px; border: 1px dashed var(--ui-line-strong); border-radius: 12px; background: var(--ui-paper); }
.creator-channel-empty > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--ui-paper-2); color: var(--my-accent-strong); }
.creator-channel-empty .icon { width: 20px; }
.creator-channel-empty strong { font-size: .8rem; }
.creator-channel-empty p { margin: 5px 0 0; color: var(--ui-dim); font-size: .65rem; }
.creator-channel-card { min-height: 82px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper); }
.creator-channel-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--ui-paper-2); color: var(--my-accent-strong); }
.creator-channel-card__state { color: #237b4e; font-size: .62rem; font-weight: 850; }

/* Profile Studio: every decision has its own card and deliberate vertical rhythm. */
.profile-studio { min-width: 0; display: grid; gap: 12px; }
.profile-studio__head { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 21px 23px; border: 1px solid color-mix(in srgb, var(--my-accent) 24%, var(--ui-line)); border-radius: 17px; background: linear-gradient(120deg, color-mix(in srgb, var(--my-accent) 8%, var(--ui-paper)), var(--ui-paper) 70%); }
.profile-studio__head h3 { margin: 5px 0; font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.035em; }
.profile-studio__head p { margin: 0; color: var(--ui-dim); font-size: .72rem; }
.profile-studio__head > a { flex: none; }
.profile-studio__preview { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 21px; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.profile-studio__identity { min-width: 0; display: flex; align-items: center; gap: 14px; }
.profile-studio__identity > div { min-width: 0; display: grid; gap: 3px; }
.profile-studio__identity > div > span { color: var(--my-accent-strong); font-size: .58rem; font-weight: 900; }
.profile-studio__identity strong { overflow: hidden; font-size: 1.14rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-studio__identity small { color: var(--ui-dim); font-size: .64rem; }
.profile-studio__preview dl { min-width: 340px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--ui-line); border-radius: 12px; overflow: hidden; }
.profile-studio__preview dl > div { min-height: 60px; display: grid; align-content: center; gap: 4px; padding: 9px 13px; border-left: 1px solid var(--ui-line); }
.profile-studio__preview dl > div:first-child { border-left: 0; }
.profile-studio__preview dt { color: var(--ui-dim); font-size: .58rem; }
.profile-studio__preview dd { margin: 0; font-size: .72rem; font-weight: 850; }
.profile-studio__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; }
.profile-studio-card { min-width: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.profile-studio-card > header { min-height: 76px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.profile-studio-card > header > b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--ui-paper); color: var(--my-accent-strong); font-size: .6rem; }
.profile-studio-card > header h3 { margin: 0 0 3px; font-size: .86rem; }
.profile-studio-card > header p { margin: 0; color: var(--ui-dim); font-size: .61rem; line-height: 1.45; }
.profile-photo-studio .avatar-settings { min-height: 188px; margin: 0; padding: 20px; align-items: center; }
.profile-photo-studio .avatar-settings__stage { cursor: grab; }
.profile-photo-studio .avatar-settings__stage:active { cursor: grabbing; }
.avatar-settings__drag-hint { position: absolute; right: 5px; bottom: 5px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 9px; background: color-mix(in srgb, var(--ui-paper) 92%, transparent); color: var(--ui-dim); box-shadow: 0 4px 12px rgb(24 27 34 / 10%); pointer-events: none; }
.avatar-settings__drag-hint .icon { width: 13px; }
.profile-photo-studio .avatar-settings__zoom { gap: 8px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper-2); }
.profile-photo-studio .avatar-settings__zoom > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.profile-photo-studio .avatar-settings__zoom b { color: var(--ui-ink); font-size: .67rem; }
.profile-photo-studio .avatar-settings__zoom small { color: var(--ui-dim); font-size: .55rem; }
.profile-photo-studio .avatar-settings__zoom > div { display: grid; grid-template-columns: 16px minmax(0, 1fr) 16px; align-items: center; gap: 7px; color: var(--ui-dim); font-weight: 900; text-align: center; }
.profile-photo-studio .avatar-settings__zoom input { width: 100%; accent-color: var(--my-accent-strong); }

/* Every full profile summary uses the same compact identity density as My. */
.profile-public-identity { position: relative; min-height: 128px; display: grid; grid-template-columns: minmax(300px, 1.35fr) minmax(420px, 1fr) auto; align-items: center; gap: 24px; padding: 20px 22px 20px 27px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--my-accent) 24%, var(--ui-line)); border-radius: 15px; background: var(--ui-paper); }
.profile-public-identity::before, .profile-studio__preview::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; border-radius: 0 4px 4px 0; background: var(--my-accent); }
.profile-public-identity__person { min-width: 0; display: flex; align-items: center; gap: 14px; }
.profile-public-identity__person > div { min-width: 0; display: grid; justify-items: start; }
.profile-public-identity__kicker { color: var(--my-accent-strong); font-size: .58rem; font-weight: 900; letter-spacing: .11em; }
.profile-public-identity h1 { margin: 3px 0 4px; overflow: hidden; color: var(--ui-ink); font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.08; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.profile-public-identity__person p { margin: 0; color: var(--ui-dim); font-size: .63rem; }
.profile-public-identity .profile-chips { margin-top: 7px; }
.profile-public-identity__stats { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); margin: 0; }
.profile-public-identity__stats > div { min-width: 0; min-height: 58px; display: grid; align-content: center; gap: 5px; padding: 0 14px; border-left: 1px solid var(--ui-line); }
.profile-public-identity__stats dt { overflow: hidden; color: var(--ui-dim); font-size: .56rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.profile-public-identity__stats dd { margin: 0; color: var(--ui-ink); font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.profile-public-identity__stats > div:first-child dd { color: var(--my-accent-strong); }
.profile-public-identity__actions { display: flex; align-items: center; justify-content: end; gap: 8px; }
.profile-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profile-social__pending, .profile-social__status { font-size: .76rem; color: var(--ui-dim); line-height: 1.6; }
.profile-social__status:not(:empty) { flex-basis: 100%; }
.ui-app .profile-social__button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); color: var(--ui-ink); font: inherit; font-size: .73rem; font-weight: 750; line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.profile-social__button .icon { width: 16px; height: 16px; flex: none; }
.ui-app .profile-social__pik { color: #7760dc; border-color: color-mix(in srgb, #a993ff 40%, var(--ui-line)); background: color-mix(in srgb, #a993ff 9%, var(--ui-paper)); }
.profile-social__pik[data-friend-state="accepted"] > .icon:first-child { fill: currentColor; }
.profile-social__button small { font-size: .65rem; font-weight: 500; }
.ui-app .profile-social__button:not(:disabled):hover { background: var(--ui-paper-2); border-color: color-mix(in srgb, #a993ff 60%, var(--ui-line)); transform: translateY(-1px); }
.profile-social__button:focus-visible { outline: 2px solid #8067ef; outline-offset: 3px; }
.profile-social__button:disabled { cursor: default; opacity: .65; }
.profile-social__dialog { width: min(390px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--ui-line); border-radius: 16px; color: var(--ui-ink); background: var(--ui-paper); }
.profile-social__dialog::backdrop { background: #10142166; }
.profile-social__dialog h2 { margin: 0 0 14px; font-size: 1.1rem; }
.profile-social__dialog p { font-size: .8rem; line-height: 1.7; }
.profile-social__dialog > div { display: flex; justify-content: end; gap: 8px; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .ui-app .profile-social__button { transition: none; transform: none; } }
.profile-public-pik-types { display: flex; align-items: center; gap: 7px; padding: 5px; overflow-x: auto; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-paper-2); }
.profile-public-pik-types span { flex: 0 0 auto; min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 8px; background: var(--ui-paper); color: var(--ui-dim); font-size: .61rem; font-weight: 800; }
.profile-public-pik-types b { color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.profile-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-studio__preview { position: relative; padding-left: 25px; }

@media (max-width: 1040px) {
  .profile-public-identity { grid-template-columns: minmax(0, 1fr) auto; }
  .profile-public-identity__stats { grid-column: 1 / -1; grid-row: 2; }
  .profile-public-identity__stats > div:first-child { border-left: 0; }
}
.profile-name-studio { display: grid; }
.profile-name-studio > label { display: grid; align-content: center; gap: 7px; min-height: 122px; padding: 18px; color: var(--ui-dim); font-size: .66rem; font-weight: 800; }
.profile-name-studio input, .profile-support-studio input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-line-strong); border-radius: 10px; background: var(--ui-paper-2); color: var(--ui-ink); font: inherit; }
.profile-name-studio label small { color: var(--ui-dim); font-size: .58rem; line-height: 1.45; }
.profile-name-studio > .auth-form-error { margin: 0 18px; }
.profile-name-studio > button { margin: 0 18px 18px; }
.profile-privacy-studio { grid-column: 1 / -1; }
.profile-privacy-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; }
.profile-privacy-options > label { min-height: 78px; display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper-2); }
.profile-privacy-options label > span { display: grid; gap: 4px; }
.profile-privacy-options strong { font-size: .74rem; }
.profile-privacy-options small { color: var(--ui-dim); font-size: .59rem; line-height: 1.4; }
.profile-privacy-options input { width: 40px; height: 22px; appearance: none; border: 1px solid var(--ui-line-strong); border-radius: 999px; background: var(--ui-line); transition: background-color .16s ease; }
.profile-privacy-options input::after { content: ""; width: 16px; height: 16px; display: block; margin: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(20 24 30 / 20%); transition: transform .16s ease; }
.profile-privacy-options input:checked { border-color: var(--my-accent-strong); background: var(--my-accent-strong); }
.profile-privacy-options input:checked::after { transform: translateX(18px); }
.profile-privacy-studio > .auth-form-error { margin: 0 16px; }
.profile-privacy-studio > button { margin: 0 16px 16px; }
.profile-decoration-studio, .profile-support-studio { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.profile-decoration-studio > header, .profile-support-studio > header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--ui-line); }
.profile-decoration-studio h3, .profile-support-studio h3 { margin: 4px 0 3px; font-size: .92rem; }
.profile-decoration-studio header p, .profile-support-studio header p { margin: 0; color: var(--ui-dim); font-size: .62rem; }
.profile-decoration-studio .collection-grid { padding: 14px; }
/* Equipment uses one-choice radios in the existing two-column badge card.
   Keep the native control accessible without consuming the image/text grid. */
.ui-app [data-equipment-form] .collection-card input[type="radio"] { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
[data-equipment-form] .collection-card > span:last-child { min-width: 0; }
[data-equipment-form] .collection-card strong { line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
[data-equipment-form] .collection-emblem:empty { visibility: hidden; }
[data-equipment-form] > p { margin: 0; padding: 0 18px 12px; color: var(--ui-dim); font-size: .72rem; line-height: 1.55; }
[data-equipment-form] > p:empty { min-height: 0; padding: 0; }
[data-equipment-form] .collection-grid:empty { padding: 8px 0; }
.profile-verification-guide__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 0 18px 12px; }
.profile-verification-guide__list .verification-record { min-width: 0; }
.profile-verification-guide__list .verification-record summary { line-height: 1.5; }
@media (max-width: 560px) { .profile-verification-guide__list { grid-template-columns: minmax(0, 1fr); } }
.profile-support-studio > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr) auto; align-items: center; gap: 14px; padding: 17px; }
.profile-support-studio > div > label:first-child { display: grid; gap: 6px; color: var(--ui-dim); font-size: .64rem; font-weight: 800; }

/* Account Center: custom overview and controls replace legacy fact/form stacks. */
.account-center { min-width: 0; display: grid; gap: 12px; }
.account-center__head { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 21px 23px; border: 1px solid color-mix(in srgb, var(--my-accent) 24%, var(--ui-line)); border-radius: 17px; background: linear-gradient(120deg, color-mix(in srgb, var(--my-accent) 8%, var(--ui-paper)), var(--ui-paper) 70%); }
.account-center__head h3 { margin: 5px 0; font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.035em; }
.account-center__head p { margin: 0; color: var(--ui-dim); font-size: .72rem; }
.account-center__head > span { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid color-mix(in srgb, #2f9b65 34%, var(--ui-line)); border-radius: 999px; background: color-mix(in srgb, #2f9b65 8%, var(--ui-paper)); color: #237b4e; font-size: .65rem; font-weight: 900; }
.account-center__head > span .icon { width: 14px; }
.account-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.account-overview article { min-width: 0; min-height: 82px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--ui-line); border-radius: 13px; background: var(--ui-paper); }
.account-overview article > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--ui-paper-2); color: var(--my-accent-strong); }
.account-overview .icon { width: 16px; }
.account-overview article > div { min-width: 0; display: grid; gap: 4px; }
.account-overview small { color: var(--ui-dim); font-size: .57rem; }
.account-overview strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.account-control-grid { display: grid; grid-template-columns: minmax(270px, .75fr) minmax(0, 1.25fr); align-items: start; gap: 10px; }
.account-control-card { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.account-control-card > header { min-height: 84px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.account-control-card > header > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--ui-paper); color: var(--my-accent-strong); }
.account-control-card > header .icon { width: 18px; }
.account-control-card > header small { color: var(--my-accent-strong); font-size: .56rem; font-weight: 900; letter-spacing: .08em; }
.account-control-card > header h3 { margin: 3px 0; font-size: .88rem; }
.account-control-card > header p { margin: 0; color: var(--ui-dim); font-size: .61rem; }
.account-control-card__body { min-height: 184px; display: grid; align-content: center; gap: 12px; padding: 17px; }
.account-control-card__body > label { display: grid; gap: 6px; color: var(--ui-dim); font-size: .63rem; font-weight: 800; }
.account-control-card__body input, .account-control-card__body select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-line-strong); border-radius: 10px; background: var(--ui-paper-2); color: var(--ui-ink); font: inherit; }
.account-control-card__body .auth-password { display: grid; }
.account-control-card__body .auth-password input { grid-area: 1 / 1; padding-right: 42px; }
.account-control-card__body .auth-password button { grid-area: 1 / 1; align-self: center; justify-self: end; width: 40px; height: 40px; }
.account-control-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-locale-choice { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; }
.account-locale-choice legend { margin-bottom: 7px; color: var(--ui-dim); font-size: .63rem; font-weight: 800; }
.account-locale-choice > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper-2); }
.account-locale-choice label { min-width: 0; }
.account-locale-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.account-locale-choice label span { min-height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--ui-dim); font-size: .69rem; font-weight: 850; cursor: pointer; }
.account-locale-choice input:checked + span { background: var(--ui-paper); color: var(--ui-ink); box-shadow: 0 4px 12px rgb(30 34 44 / 8%); }
.account-locale-choice input:focus-visible + span { outline: 2px solid var(--my-accent-strong); outline-offset: 1px; }
.account-preference-card .danger-button { margin-top: 6px; justify-self: start; }
.account-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; }
.account-list-board { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--ui-paper); }
.account-list-board > header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--ui-line); }
.account-list-board > header h3 { margin: 3px 0 0; font-size: .85rem; }
.account-list-board > header > b { min-width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 9px; font-size: .65rem; }
.account-list-board > div { padding: 12px; background: var(--ui-paper-2); }
.account-list-card { min-height: 68px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-paper); }
.account-list-card > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--ui-paper-2); color: var(--my-accent-strong); }
.account-list-card .icon { width: 16px; }
.account-list-card > div { display: grid; gap: 4px; }
.account-list-card strong { font-size: .72rem; }
.account-list-card small { color: var(--ui-dim); font-size: .6rem; }
.account-list-empty { min-height: 92px; display: grid; justify-items: center; align-content: center; gap: 7px; color: var(--ui-dim); font-size: .66rem; }
.account-list-empty .icon { width: 18px; }

@media (max-width: 980px) {
  .bookmark-shelf__grid, .profile-studio__grid, .account-control-grid, .account-list-grid { grid-template-columns: 1fr; }
  .creator-journey > div, .account-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-privacy-studio { grid-column: auto; }
  .profile-support-studio > div { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .bookmark-studio__head, .profile-studio__head, .account-center__head { min-height: 0; align-items: flex-start; flex-direction: column; padding: 18px; }
  .bookmark-studio__head > strong { min-width: 72px; justify-self: start; }
  .bookmark-studio__filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .bookmark-studio__filters button { min-width: 0; justify-content: center; gap: 5px; padding-inline: 6px; white-space: nowrap; }
  .profile-public-identity { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 17px 18px 22px; }
  .profile-public-identity__actions { justify-content: start; flex-wrap: wrap; }
  .profile-public-identity__stats { grid-column: auto; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .profile-public-identity__stats > div { border-left: 0; border-top: 1px solid var(--ui-line); }
  .profile-public-identity__stats > div:nth-child(even) { border-left: 1px solid var(--ui-line); }
  .profile-tabs button { min-height: 44px; padding-inline: 10px; font-size: .62rem; }
  .creator-journey > div, .account-overview { grid-template-columns: 1fr; }
  .creator-channel-empty { grid-template-columns: 40px minmax(0, 1fr); }
  .creator-channel-empty > a { grid-column: 1 / -1; justify-content: center; }
  .profile-studio__preview { align-items: flex-start; flex-direction: column; }
  .profile-studio__preview dl { width: 100%; min-width: 0; }
  .profile-privacy-options { grid-template-columns: 1fr; }
  .profile-photo-studio .avatar-settings { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .profile-photo-studio .avatar-settings__controls { justify-items: center; }
  .profile-decoration-studio > header, .profile-support-studio > header { align-items: flex-start; flex-direction: column; }
}

/* Final Games storefront overrides live last so the former dark directory cannot resurface. */
.ui-app .games-discovery {
  width: 100%;
  max-width: none;
  background: #f5f6f9;
  color: #20232a;
  box-shadow: none;
  clip-path: none;
}
.ui-app .games-discovery .games-storefront-hero { min-height: 334px; padding-block: 38px; }
.ui-app .games-discovery .games-storefront-hero__visual { width: min(100%, 520px); aspect-ratio: 1.5; justify-self: end; }
.ui-app .games-discovery .games-card__placeholder { align-content: center; justify-items: center; gap: 11px; padding: 18px; background: #e9ebf0; color: #242834; font-family: var(--sans); letter-spacing: 0; text-align: center; }
.ui-app .games-discovery .games-card__placeholder i { color: rgb(255 255 255 / 78%); font-size: 1.2rem; font-style: normal; }
.ui-app .games-discovery .games-card__placeholder b { color: #222631; font-size: clamp(2rem, 5vw, 4.7rem); font-weight: 950; line-height: .85; letter-spacing: -.08em; }
.ui-app .games-discovery .games-card__placeholder small { color: rgb(29 33 43 / 58%); font-size: .66rem; font-weight: 850; letter-spacing: .06em; }
.ui-app .games-discovery .games-card__placeholder--0 { background: linear-gradient(135deg, #ffe28c, #ffb89f 54%, #cbbcff); }
.ui-app .games-discovery .games-card__placeholder--1 { background: linear-gradient(135deg, #a7dcff, #a8b9ff 54%, #ffb3d2); }
.ui-app .games-discovery .games-card__placeholder--2 { background: linear-gradient(135deg, #f0d29b, #d7d59d 50%, #9fd8c9); }
.ui-app .games-discovery .games-card__placeholder--3 { background: linear-gradient(135deg, #d8c5ff, #a8c1ff 52%, #8ee0da); }
.ui-app .games-discovery .games-storefront-search,
.ui-app .games-discovery .games-storefront-shortcuts { background: #f5f6f9; }
.ui-app .games-discovery .games-storefront-shortcuts { margin: 0; }
.ui-app .games-discovery .games-portal { background: #f5f6f9; }

@media (max-width: 760px) {
  .ui-app .games-discovery .games-storefront-hero { min-height: 0; padding-block: 28px 24px; }
  .ui-app .games-discovery .games-storefront-hero__visual { width: 100%; aspect-ratio: 1.42; }
}

/* Games storefront follows the same PacPik discovery grammar as EmotePack. */
.games-store-nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 58px;
  background: transparent;
}
.games-store-nav button {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--ui-dim);
  font-size: .92rem;
  font-weight: 800;
  cursor: pointer;
}
.games-store-nav button::after {
  content: "";
  position: absolute;
  right: 32%;
  bottom: 0;
  left: 32%;
  height: 2px;
  background: transparent;
  transition: inset .18s ease, background-color .18s ease;
}
.games-store-nav button[aria-pressed="true"] { color: var(--ui-ink); }
.games-store-nav button[aria-pressed="true"]::after { right: 0; left: 0; background: var(--ui-ink); }
.games-store-panel[hidden] { display: none; }
.games-store-panel { display: grid; }
.games-store-masthead {
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-line-strong);
}
.games-store-masthead__brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-ink);
  text-decoration: none;
}
.games-store-masthead__brand > .icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 8px;
  background: var(--ui-ink);
  color: var(--ui-paper);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.games-store-masthead__brand > span { display: flex; align-items: baseline; gap: 7px; line-height: 1; }
.games-store-masthead__brand b { color: var(--ui-dim); font-size: .9rem; font-weight: 750; letter-spacing: 0; }
.games-store-masthead__brand strong { font-family: "Arial Black", var(--sans); font-size: 1.82rem; font-weight: 900; letter-spacing: -.035em; }
.games-store-masthead__apply {
  grid-column: 3;
  justify-self: end;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 8px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: .73rem;
  font-weight: 850;
  text-decoration: none;
}
.games-store-masthead__apply:hover { border-color: var(--ui-ink); background: var(--ui-paper-2); }
:root[data-theme="dark"] .ui-app .games-store-masthead__apply {
  border-color: #464957;
  background: #20272d;
  color: #fff;
}
:root[data-theme="dark"] .ui-app .games-store-masthead__apply:hover {
  border-color: #687080;
  background: #2b333b;
  color: #fff;
}

.ui-app .games-discovery .games-storefront-hero.games-spotlight {
  position: relative;
  min-height: 334px;
  display: block;
  padding: 0;
}
.games-spotlight__viewport {
  min-height: 334px;
  display: flex;
  transform: translate3d(calc(var(--games-slide, 0) * -100%), 0, 0);
  transition: transform .58s cubic-bezier(.22, .72, .18, 1);
  will-change: transform;
}
.games-spotlight__viewport.is-resetting { transition: none; }
.games-spotlight__slide {
  min-width: 100%;
  flex: 0 0 100%;
  min-height: 334px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 74px);
  padding: 38px clamp(36px, 5vw, 66px);
}
.games-spotlight__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}
.games-spotlight__dots button {
  width: 20px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgb(31 35 44 / 18%);
  cursor: pointer;
  transition: width .18s ease, background-color .18s ease;
}
.games-spotlight__dots button[aria-pressed="true"] { width: 34px; background: var(--ui-ink); }
.ui-app .games-discovery .games-storefront-hero__visual > .games-spotlight__pik {
  right: 14px;
  bottom: 14px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-items: initial;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid rgb(33 37 47 / 14%);
  border-radius: 999px;
  background: rgb(255 255 255 / 88%);
  color: var(--ui-ink);
  box-shadow: 0 8px 24px rgb(31 36 48 / 12%);
  backdrop-filter: blur(10px);
}
.games-spotlight__pik .icon { width: 16px; height: 16px; fill: none; stroke: #e15a3d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-app .games-discovery .games-storefront-hero__visual > .games-spotlight__pik small { color: var(--ui-dim); font-size: .58rem; font-weight: 800; letter-spacing: 0; }
.ui-app .games-discovery .games-storefront-hero__visual > .games-spotlight__pik strong { color: var(--ui-ink); font-size: .82rem; }

.games-search-ranking { padding: 0; }
.games-search-ranking .games-module__head { margin-bottom: 10px; }
.games-search-ranking__list { display: grid; gap: 8px; }
.games-rank-item { overflow: hidden; border-radius: 10px; background: #eceef1; }
.games-rank-item__toggle {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 58px 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--ui-ink);
  text-align: left;
  cursor: pointer;
}
.games-rank-item__cover { width: 58px; height: 40px; display: block; overflow: hidden; border-radius: 8px; }
.games-rank-thumb { width: 100%; height: 100%; display: grid; align-content: center; justify-items: center; gap: 1px; overflow: hidden; color: #242834; }
.games-rank-thumb img { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--ui-paper); }
.games-rank-thumb b { font-family: "Arial Black", var(--sans); font-size: .72rem; line-height: 1; letter-spacing: -.04em; }
.games-rank-thumb small { max-width: 92%; overflow: hidden; font-size: .43rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.games-rank-thumb--0 { background: linear-gradient(135deg, #ffe28c, #ffb89f 54%, #cbbcff); }
.games-rank-thumb--1 { background: linear-gradient(135deg, #a7dcff, #a8b9ff 54%, #ffb3d2); }
.games-rank-thumb--2 { background: linear-gradient(135deg, #f0d29b, #d7d59d 50%, #9fd8c9); }
.games-rank-thumb--3 { background: linear-gradient(135deg, #d8c5ff, #a8c1ff 52%, #8ee0da); }
.games-rank-item__toggle > b { color: #e85f42; font-size: .88rem; }
.games-rank-item__toggle > span:nth-of-type(2) { min-width: 0; display: grid; gap: 2px; }
.games-rank-item__toggle strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.games-rank-item__toggle small { color: var(--ui-dim); font-size: .62rem; }
.games-rank-item__chevron { width: 24px; height: 24px; display: grid; place-items: center; color: var(--ui-dim); transition: transform .16s ease; }
.games-rank-item__chevron .icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.games-rank-item__toggle[aria-expanded="true"] .games-rank-item__chevron { transform: rotate(180deg); }
.games-rank-item__detail { padding: 0 10px 10px; }
.games-rank-item__detail[hidden] { display: none; }
.games-rank-item__body {
  min-height: 150px;
  display: grid;
  grid-template-columns: minmax(200px, .55fr) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 12px;
  border-radius: 9px;
  background: var(--ui-paper);
  color: var(--ui-ink);
}
.games-rank-item__visual { height: 130px; display: block; overflow: hidden; border-radius: 8px; }
.games-rank-item__visual .games-card__placeholder { width: 100%; height: 100%; min-height: 0; }
.games-rank-item__copy { min-width: 0; display: grid; align-content: center; justify-items: start; gap: 8px; }
.games-rank-item__copy > strong { font-size: 1.08rem; }
.games-rank-item__copy > small { color: var(--ui-dim); font-size: .74rem; line-height: 1.6; }
.games-rank-item__copy > em { color: #e05b3f; font-size: .64rem; font-style: normal; font-weight: 800; }
.games-rank-item__copy > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.games-rank-item__copy > div > button,
.games-rank-item__copy > div > a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-size: .7rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}
.games-rank-item__copy > div > button[aria-pressed="true"] { border-color: #e05b3f; background: #fff6f3; color: #b9432e; }
.games-rank-item__copy > div > a { border-color: var(--ui-ink); background: var(--ui-ink); color: var(--ui-paper); }
.games-rank-item__copy > p { min-height: 16px; margin: 0; color: var(--ui-dim); font-size: .64rem; }
.games-store-brand {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--ui-ink);
  font-size: .78rem;
  line-height: 1;
  letter-spacing: -.02em;
}
.games-store-brand .icon {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 7px;
  background: var(--ui-ink);
  color: var(--ui-paper);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.games-store-brand b { font-weight: 800; }
.games-store-brand strong { font-weight: 950; letter-spacing: .04em; }

.ui-app .games-discovery .games-storefront-search.header-search {
  width: min(960px, calc(100% - 32px));
  max-width: none;
  height: 58px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 0;
  margin: 24px auto 0;
  padding: 5px;
  border: 1px solid #d8dade;
  border-radius: 999px;
  background: #f1f2f3;
  box-shadow: none;
}
.ui-app .games-discovery .games-storefront-search.header-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-ink);
  font: 700 .78rem/1 var(--sans);
}
.ui-app .games-discovery .games-storefront-search.header-search .search-brand,
.ui-app .games-discovery .games-storefront-search.header-search .search-submit {
  position: relative;
  width: 46px;
  min-width: 46px;
  height: 46px;
}
.ui-app .games-discovery .games-storefront-search.header-search .search-brand .brandmark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-ink);
  color: var(--ui-paper);
}
.ui-app .games-discovery .games-storefront-search.header-search .search-brand .brandmark svg { display: none; }
.ui-app .games-discovery .games-storefront-search.header-search .search-brand .brandmark::before {
  content: "";
  width: 28px;
  height: 28px;
  background: var(--ui-paper);
  -webkit-mask: url("/assets/brand/glyph.svg") center / contain no-repeat;
  mask: url("/assets/brand/glyph.svg") center / contain no-repeat;
}
.ui-app .games-discovery .games-storefront-search.header-search .search-submit {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ui-line-strong);
  border-radius: 50%;
  background: var(--ui-paper);
  color: var(--ui-ink);
}
.ui-app .games-discovery .games-storefront-search.header-search .search-submit .icon { width: 21px; height: 21px; }
.ui-app .games-discovery .games-storefront-search--bottom.header-search { margin: 0 auto 4px; }

.ui-app .games-discovery .games-storefront-shortcuts { gap: clamp(24px, 7vw, 88px); padding: 18px 14px 40px; }
.ui-app .games-discovery .games-storefront-shortcuts a { min-width: 80px; gap: 8px; font-size: .76rem; }
.ui-app .games-discovery .games-storefront-shortcuts span { width: 54px; height: 54px; background: #eef0f2; box-shadow: none; }
.ui-app .games-discovery .games-storefront-shortcuts .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.ui-app .games-discovery .games-library {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ui-app .games-discovery .games-library__head {
  min-height: 74px;
  align-items: end;
  padding: 0 0 17px;
  border-bottom: 1px solid var(--ui-line-strong);
}
.ui-app .games-discovery .games-library__head > div > span { color: var(--ui-dim); font-size: .61rem; letter-spacing: .08em; }
.ui-app .games-discovery .games-library__head h2 { margin: 4px 0 0; font-size: 1.4rem; }
.ui-app .games-discovery .games-library__head p { margin-top: 5px; }
.ui-app .games-discovery .games-library__head > .text-button { min-height: 34px; border: 1px solid var(--ui-line-strong); background: var(--ui-paper); }
.ui-app .games-discovery .games-library__lanes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0 12px;
  border: 0;
}
.ui-app .games-discovery .games-library__lanes button {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 999px;
  background: var(--ui-paper);
  color: var(--ui-dim);
}
.ui-app .games-discovery .games-library__lanes button:first-child,
.ui-app .games-discovery .games-library__lanes button[aria-pressed="true"] { border-color: var(--ui-ink); background: var(--ui-ink); color: var(--ui-paper); }
.ui-app .games-discovery .games-library__lanes button b { font-size: .63rem; }
.ui-app .games-discovery .games-library__controls {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 0 16px;
  border: 0;
  background: transparent;
}
.ui-app .games-discovery .games-library__controls label { gap: 6px; }
.ui-app .games-discovery .games-library__controls select { min-height: 42px; }
.ui-app .games-discovery .games-library__summary { padding: 12px 0; border-top: 1px solid var(--ui-line); }
.ui-app .games-discovery .games-library__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border: 0; }
.ui-app .games-discovery .games-library__grid .games-card { border: 1px solid var(--ui-line-strong); border-radius: 14px; }

@media (min-width: 761px) {
  .ui-app .games-discovery .games-module__head p { max-width: none; white-space: nowrap; }
}

@media (max-width: 760px) {
  .games-store-nav { min-height: 52px; }
  .games-store-masthead { min-height: 60px; grid-template-columns: minmax(0, 1fr) auto; padding: 0 12px; }
  .games-store-masthead > span { display: none; }
  .games-store-masthead__brand { grid-column: 1; justify-self: start; }
  .games-store-masthead__apply { grid-column: 2; min-height: 34px; padding-inline: 10px; }
  .games-spotlight__slide { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 18px 50px; }
  .games-spotlight__viewport { min-height: 0; }
  .games-rank-item__body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ui-app .games-discovery .games-storefront-search.header-search { width: calc(100% - 28px); height: 54px; margin-top: 18px; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .ui-app .games-discovery .games-storefront-search.header-search .search-brand,
  .ui-app .games-discovery .games-storefront-search.header-search .search-submit,
  .ui-app .games-discovery .games-storefront-search.header-search .search-brand .brandmark { width: 42px; min-width: 42px; height: 42px; }
  .ui-app .games-discovery .games-storefront-shortcuts { justify-content: flex-start; gap: 14px; overflow-x: auto; padding: 18px 18px 28px; scrollbar-width: none; }
  .ui-app .games-discovery .games-storefront-shortcuts::-webkit-scrollbar { display: none; }
  .ui-app .games-discovery .games-storefront-shortcuts a { flex: 0 0 78px; }
  .ui-app .games-discovery .games-library__head { align-items: start; }
  .ui-app .games-discovery .games-library__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-app .games-discovery .games-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .ui-app .games-discovery .games-portal { width: calc(100% + 24px); margin-inline: -12px; padding-inline: 12px; }
  .ui-app .games-discovery .games-shelf__grid { grid-auto-columns: min(88vw, 330px); }
}

@media (max-width: 430px) {
  .ui-app .games-discovery .games-library__grid { grid-template-columns: minmax(0, 1fr); }
}

/* One Game Pik control everywhere: the same light pill used in the spotlight. */
.ui-app .games-discovery [data-game-pik],
.ui-app .games-pack-experience [data-game-pik] {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid rgb(33 37 47 / 15%);
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  color: var(--ui-ink);
  box-shadow: 0 6px 18px rgb(31 36 48 / 7%);
}
.ui-app .games-discovery [data-game-pik] .icon,
.ui-app .games-pack-experience [data-game-pik] .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: #e15a3d;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-app .games-discovery [data-game-pik] span,
.ui-app .games-pack-experience [data-game-pik] span { color: var(--ui-dim); font-size: .64rem; font-weight: 800; }
.ui-app .games-discovery [data-game-pik] b,
.ui-app .games-pack-experience [data-game-pik] b { color: var(--ui-ink); font-size: .72rem; }
.ui-app .games-discovery [data-game-pik][aria-pressed="true"],
.ui-app .games-pack-experience [data-game-pik][aria-pressed="true"] {
  border-color: rgb(225 90 61 / 45%);
  background: #fff7f4;
  color: #b9432e;
}
.ui-app .games-pack-experience .game-pack-hero__media .games-card__placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 18px;
  color: #242834;
}
.ui-app .games-pack-experience .game-pack-hero__media .games-card__placeholder i { color: rgb(255 255 255 / 78%); font-style: normal; }
.ui-app .games-pack-experience .game-pack-hero__media .games-card__placeholder b { color: #222631; font-family: "Arial Black", var(--sans); font-size: clamp(2.5rem, 10vw, 5.2rem); line-height: .9; letter-spacing: -.07em; }
.ui-app .games-pack-experience .game-pack-hero__media .games-card__placeholder small { color: rgb(29 33 43 / 58%); font-size: .68rem; font-weight: 850; }
.ui-app .games-pack-experience .game-pack-hero__media .games-card__placeholder--0 { background: linear-gradient(135deg, #ffe28c, #ffb89f 54%, #cbbcff); }
.ui-app .games-pack-experience .game-pack-hero__media .games-card__placeholder--1 { background: linear-gradient(135deg, #a7dcff, #a8b9ff 54%, #ffb3d2); }
.ui-app .games-pack-experience .game-pack-hero__media .games-card__placeholder--2 { background: linear-gradient(135deg, #f0d29b, #d7d59d 50%, #9fd8c9); }
.ui-app .games-pack-experience .game-pack-hero__media .games-card__placeholder--3 { background: linear-gradient(135deg, #d8c5ff, #a8c1ff 52%, #8ee0da); }

/* Games storefront cards use the two assets supplied by the developer: wide art + square icon. */
.ui-app .games-discovery .games-shelf__grid {
  max-width: 100%;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-columns: auto;
  gap: 12px;
  overflow: visible;
}
.ui-app .games-discovery .games-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ui-app .games-discovery .games-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: 16px;
  background: #e9ebf0;
  box-shadow: 0 8px 22px rgb(25 29 38 / 8%);
}
.ui-app .games-discovery .games-card__body,
.ui-app .games-discovery .games-card--compact .games-card__body { padding: 12px 4px 7px; }
.ui-app .games-discovery .games-card__summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(88px, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.ui-app .games-discovery .games-card__icon-link { min-width: 0; display: block; color: inherit; text-decoration: none; }
.ui-app .games-discovery .games-card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: 15px;
  background: var(--ui-paper);
  box-shadow: 0 5px 14px rgb(25 29 38 / 10%);
}
.ui-app .games-discovery .games-card__icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ui-app .games-discovery .games-card__icon b { color: #20242d; font-size: .98rem; font-weight: 950; letter-spacing: -.07em; }
.ui-app .games-discovery .games-card__icon small { display: none; }
.ui-app .games-discovery .games-card__icon--0 { background: linear-gradient(135deg, #ffe28c, #ffb89f 58%, #dfc8ff); }
.ui-app .games-discovery .games-card__icon--1 { background: linear-gradient(135deg, #a7dcff, #a8b9ff 58%, #ffc5dc); }
.ui-app .games-discovery .games-card__icon--2 { background: linear-gradient(135deg, #f0d29b, #d7d59d 55%, #a9dfd2); }
.ui-app .games-discovery .games-card__icon--3 { background: linear-gradient(135deg, #d8c5ff, #a8c1ff 58%, #a1e7e0); }
.ui-app .games-discovery .games-card__identity { min-width: 0; }
.ui-app .games-discovery .games-card__identity h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.ui-app .games-discovery .games-card__identity h3 a { color: var(--ui-ink); }
.ui-app .games-discovery .games-card__identity .games-card__developer { margin-top: 5px; color: var(--ui-dim); font-size: .68rem; }
.ui-app .games-discovery .games-card__actions {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: 0;
}
.ui-app .games-discovery .games-card__actions [data-game-pik],
.ui-app .games-discovery .games-card__actions .games-card__detail {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ui-app .games-discovery .games-card__actions .games-card__detail {
  border-color: var(--ui-line-strong);
  background: var(--ui-paper);
  color: var(--ui-ink);
}
.ui-app .games-discovery .games-card__signals { margin: 12px 0 0; }
.ui-app .games-discovery .games-card__desc { min-height: 0; margin: 9px 0; }
.ui-app .games-discovery .games-card__meta { margin-top: 8px; }

/* The directory is an icon-led compact picker; wide artwork stays in discovery shelves. */
.ui-app .games-discovery .games-library__grid .games-card--browser {
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: 13px;
  background: var(--ui-paper);
}
.ui-app .games-discovery .games-card--browser .games-card__body { padding: 12px; }
.ui-app .games-discovery .games-card--browser .games-card__summary {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
}
.ui-app .games-discovery .games-card--browser .games-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
.ui-app .games-discovery .games-card--browser .games-card__identity h3 { font-size: .83rem; }
.ui-app .games-discovery .games-card--browser .games-card__identity .games-card__developer { margin-top: 3px; font-size: .61rem; }
.ui-app .games-discovery .games-card--browser .games-card__actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  padding-left: 58px;
}
.ui-app .games-discovery .games-card--browser .games-card__actions [data-game-pik],
.ui-app .games-discovery .games-card--browser .games-card__actions .games-card__detail {
  min-height: 32px;
  padding-inline: 9px;
  font-size: .61rem;
}

/* Real square game icons remain fully legible in the ranking list. */
.games-rank-item__toggle { grid-template-columns: 44px 24px minmax(0, 1fr) 24px; }
.games-rank-item__cover { width: 44px; height: 44px; border-radius: 11px; }
.games-rank-thumb img { object-fit: cover; }
.games-rank-item__visual > img { width: 100%; height: 100%; display: block; object-fit: cover; }

.ui-app .games-discovery,
.ui-app .games-discovery .games-storefront-shortcuts { max-width: 100%; }
.ui-app .games-discovery { overflow-x: clip; }
.ui-app .games-discovery .games-storefront-shortcuts { contain: inline-size; }
.ui-app .games-discovery .games-shelf,
.ui-app .games-discovery .games-search-ranking,
.ui-app .games-discovery .games-library { scroll-margin-top: 86px; }

/* Rebuilt Game Pack detail: identity/action board, media showcase, facts, then Community. */
.ui-app .games-pack-experience .game-pack--recomposed { gap: 16px; padding-top: 18px; }
.ui-app .games-pack-experience .game-pack-overview {
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
  align-items: stretch;
  gap: 14px;
}
.ui-app .games-pack-experience .game-pack-overview__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--ui-line-strong);
  border-radius: 18px;
  background: var(--ui-paper);
  box-shadow: 0 12px 30px rgb(28 32 42 / 6%);
}
.ui-app .games-pack-experience .game-pack-overview__identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.ui-app .games-pack-experience .game-pack-overview__icon,
.ui-app .games-pack-experience .game-pack-overview__icon .games-card__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
}
.ui-app .games-pack-experience .game-pack-overview__icon .games-card__icon {
  border: 1px solid var(--ui-line-strong);
  background: linear-gradient(135deg, #ffe28c, #ffb89f 58%, #dfc8ff);
  box-shadow: 0 7px 18px rgb(28 32 42 / 10%);
}
.ui-app .games-pack-experience .game-pack-overview__icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ui-app .games-pack-experience .game-pack-overview__icon b { font-size: 1rem; font-weight: 950; letter-spacing: -.07em; }
.ui-app .games-pack-experience .game-pack-overview__icon small { display: none; }
.ui-app .games-pack-experience .game-pack-overview__identity h1 {
  margin: 5px 0 4px;
  overflow: hidden;
  font-size: clamp(2rem, 3.2vw, 3.45rem);
  line-height: .98;
  letter-spacing: -.055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-app .games-pack-experience .game-pack-overview__identity p,
.ui-app .games-pack-experience .game-pack-overview__developer { margin: 0; color: var(--ui-dim); font-size: .72rem; font-weight: 750; }
.ui-app .games-pack-experience .game-pack-overview__desc { margin: 24px 0 16px; color: var(--ui-dim); font-size: .86rem; line-height: 1.7; word-break: keep-all; }
.ui-app .games-pack-experience .game-pack-overview__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ui-app .games-pack-experience .game-pack-overview__tags span { min-height: 28px; display: inline-flex; align-items: center; padding: 0 9px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-paper-2); color: var(--ui-dim); font-size: .62rem; font-weight: 800; }
.ui-app .games-pack-experience .game-pack-overview__copy .game-pack-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: auto; }
.ui-app .games-pack-experience .game-pack-overview__copy .game-pack-actions .game-pack-actions__primary {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  border-color: var(--ui-ink);
  background: var(--ui-ink);
  color: var(--ui-paper);
}
.ui-app .games-pack-experience .game-pack-overview__copy .game-pack-actions__secondary { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, .72fr)); gap: 7px; }
.ui-app .games-pack-experience .game-pack-overview__copy .game-pack-actions__secondary > * { width: 100%; justify-content: center; }
.ui-app .games-pack-experience .game-pack-overview__media {
  position: relative;
  min-width: 0;
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: 18px;
  background: var(--ui-paper-2);
  box-shadow: 0 16px 36px rgb(28 32 42 / 9%);
}
.ui-app .games-pack-experience .game-pack-overview__media > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ui-app .games-pack-experience .game-pack-overview__media > .games-card__placeholder { width: 100%; height: 100%; min-height: 430px; display: grid; align-content: center; justify-items: center; gap: 9px; padding: 18px; border: 0; color: #242834; font-family: var(--sans); letter-spacing: 0; text-align: center; }
.ui-app .games-pack-experience .game-pack-overview__media > .games-card__placeholder i { color: rgb(255 255 255 / 80%); font-size: 1.25rem; font-style: normal; }
.ui-app .games-pack-experience .game-pack-overview__media > .games-card__placeholder b { color: #222631; font-family: "Arial Black", var(--sans); font-size: clamp(3rem, 8vw, 6rem); line-height: .86; letter-spacing: -.08em; }
.ui-app .games-pack-experience .game-pack-overview__media > .games-card__placeholder small { color: rgb(29 33 43 / 58%); font-size: .68rem; font-weight: 850; }
.ui-app .games-pack-experience .game-pack-overview__media > .games-card__placeholder--0 { background: linear-gradient(135deg, #ffe28c, #ffb89f 54%, #cbbcff); }
.ui-app .games-pack-experience .game-pack-overview__media > .games-card__placeholder--1 { background: linear-gradient(135deg, #a7dcff, #a8b9ff 54%, #ffb3d2); }
.ui-app .games-pack-experience .game-pack-overview__media > .games-card__placeholder--2 { background: linear-gradient(135deg, #f0d29b, #d7d59d 50%, #9fd8c9); }
.ui-app .games-pack-experience .game-pack-overview__media > .games-card__placeholder--3 { background: linear-gradient(135deg, #d8c5ff, #a8c1ff 52%, #8ee0da); }
.ui-app .games-pack-experience .game-pack-overview__media > .game-pack-overview__pik {
  position: absolute;
  right: 16px;
  bottom: 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 999px;
  background: rgb(255 255 255 / 94%);
  color: #20232a;
  box-shadow: 0 9px 22px rgb(25 29 38 / 13%);
  backdrop-filter: blur(8px);
}
.ui-app .games-pack-experience .game-pack-overview__media > .game-pack-overview__pik .icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #f06445; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-app .games-pack-experience .game-pack-overview__media > .game-pack-overview__pik small { color: #747985; font-size: .58rem; font-weight: 850; }
.ui-app .games-pack-experience .game-pack-overview__media > .game-pack-overview__pik b { font-size: .82rem; }
.ui-app .games-pack-experience .game-pack-fact-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.ui-app .games-pack-experience .game-pack-fact-board article { min-width: 0; min-height: 96px; display: grid; align-content: center; gap: 5px; padding: 15px 17px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); }
.ui-app .games-pack-experience .game-pack-fact-board span { color: var(--ui-dim); font-size: .58rem; font-weight: 850; letter-spacing: .04em; }
.ui-app .games-pack-experience .game-pack-fact-board strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.ui-app .games-pack-experience .game-pack-fact-board small { color: var(--ui-dim); font-size: .6rem; }

.ui-app .games-pack-experience .game-pack-community-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: 18px;
  background: var(--ui-paper);
}
.ui-app .games-pack-experience .game-pack-community-board > header { min-height: 126px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; border-bottom: 1px solid var(--ui-line); background: linear-gradient(120deg, var(--ui-paper), var(--ui-paper-2)); }
.ui-app .games-pack-experience .game-pack-community-board > header h2 { margin: 5px 0; font-size: clamp(1.25rem, 2.2vw, 1.72rem); }
.ui-app .games-pack-experience .game-pack-community-board > header p { margin: 0; color: var(--ui-dim); font-size: .72rem; }
.ui-app .games-pack-experience .game-pack-community-board > header > a { flex: 0 0 auto; }
.ui-app .games-pack-experience .game-pack-community-board__layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.ui-app .games-pack-experience .game-pack-community-board__layout > aside { position: static; padding: 20px; border-right: 1px solid var(--ui-line); background: var(--ui-paper-2); }
.ui-app .games-pack-experience .game-pack-community-board__layout > aside > span,
.ui-app .games-pack-experience .game-pack-community-board__layout > div > header > span { color: var(--ui-dim); font-size: .56rem; font-weight: 900; letter-spacing: .1em; }
.ui-app .games-pack-experience .game-pack-community-board__layout h3 { margin: 5px 0 14px; font-size: .92rem; }
.ui-app .games-pack-experience .game-pack-community-board .game-channels { gap: 6px; margin: 0; border: 0; }
.ui-app .games-pack-experience .game-pack-community-board .game-channels a { min-height: 40px; padding: 0 11px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper); font-size: .7rem; }
.ui-app .games-pack-experience .game-pack-community-board__layout > div { min-width: 0; padding: 20px; }
.ui-app .games-pack-experience .game-pack-community-board__layout > div > header { border-bottom: 1px solid var(--ui-line); }
.ui-app .games-pack-experience .game-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border: 0; }
.ui-app .games-pack-experience .game-post { min-width: 0; min-height: 140px; display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper); }
.ui-app .games-pack-experience .game-post footer { margin-top: auto; }
.ui-app .games-pack-experience .game-posts > .games-empty { grid-column: 1 / -1; min-height: 92px; padding: 18px; border: 1px dashed var(--ui-line-strong); border-radius: 12px; }

.ui-app .games-pack-experience .game-pack-link-board { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); }
.ui-app .games-pack-experience .game-pack-link-board > div { display: grid; gap: 5px; }
.ui-app .games-pack-experience .game-pack-link-board > nav { display: flex; flex-wrap: wrap; gap: 7px; }
.ui-app .games-pack-experience .game-pack-link-board a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--ui-line); border-radius: 8px; color: var(--ui-dim); }

/* Keep the product wordmark on the page axis; side actions must not push it off-center. */
.ui-app .games-pack-experience .games-local-header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.ui-app .games-pack-experience .games-local-header .games-wordmark { grid-column: 2; grid-row: 1; justify-self: center; }
.ui-app .games-pack-experience .games-local-header nav { grid-column: 1; grid-row: 1; justify-self: start; }
.ui-app .games-pack-experience .games-local-header .games-local-apply { grid-column: 3; grid-row: 1; justify-self: end; }

@media (max-width: 900px) {
  .ui-app .games-pack-experience .game-pack-overview { grid-template-columns: minmax(0, 1fr); }
  .ui-app .games-pack-experience .game-pack-overview__media { min-height: 0; aspect-ratio: 16 / 9; }
  .ui-app .games-pack-experience .game-pack-overview__media > .games-card__placeholder { min-height: 0; }
  .ui-app .games-pack-experience .game-pack-community-board__layout { grid-template-columns: minmax(0, 1fr); }
  .ui-app .games-pack-experience .game-pack-community-board__layout > aside { border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .ui-app .games-pack-experience .game-pack-community-board .game-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-app .games-pack-experience .game-pack-link-board { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-app .games-pack-experience .game-pack-link-board > nav { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 760px) {
  .ui-app .games-pack-experience .games-local-header { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-app .games-pack-experience .games-local-header .games-wordmark { grid-column: 1; justify-self: start; }
  .ui-app .games-pack-experience .games-local-header .games-local-apply { grid-column: 2; justify-self: end; }
  .ui-app .games-pack-experience .games-local-header nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .ui-app .games-pack-experience .games-local-header nav a { justify-content: center; text-align: center; }
}

@media (max-width: 640px) {
  .ui-app .games-pack-experience .game-pack--recomposed { padding-top: 10px; }
  .ui-app .games-pack-experience .game-pack-overview__copy { padding: 18px; border-radius: 14px; }
  .ui-app .games-pack-experience .game-pack-overview__identity { grid-template-columns: 54px minmax(0, 1fr); gap: 11px; }
  .ui-app .games-pack-experience .game-pack-overview__icon,
  .ui-app .games-pack-experience .game-pack-overview__icon .games-card__icon { width: 54px; height: 54px; border-radius: 13px; }
  .ui-app .games-pack-experience .game-pack-overview__identity h1 { display: -webkit-box; overflow: hidden; font-size: clamp(1.75rem, 9vw, 2.35rem); text-overflow: clip; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ui-app .games-pack-experience .game-pack-overview__desc { margin: 18px 0 14px; }
  .ui-app .games-pack-experience .game-pack-overview__media { border-radius: 14px; }
  .ui-app .games-pack-experience .game-pack-fact-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-app .games-pack-experience .game-pack-fact-board article { min-height: 84px; padding: 12px; }
  .ui-app .games-pack-experience .game-pack-community-board { border-radius: 14px; }
  .ui-app .games-pack-experience .game-pack-community-board > header { min-height: 0; align-items: flex-start; flex-direction: column; padding: 18px; }
  .ui-app .games-pack-experience .game-pack-community-board > header > a { width: 100%; justify-content: center; }
  .ui-app .games-pack-experience .game-pack-community-board__layout > aside,
  .ui-app .games-pack-experience .game-pack-community-board__layout > div { padding: 16px; }
  .ui-app .games-pack-experience .game-posts { grid-template-columns: minmax(0, 1fr); }
  .ui-app .games-pack-experience .game-pack-link-board { grid-template-columns: minmax(0, 1fr); }
  .ui-app .games-pack-experience .game-pack-link-board > nav { grid-column: 1; grid-row: auto; }
  .ui-app .games-pack-experience .game-pack-link-board > button { width: 100%; justify-content: center; }
}

.games-registration-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.games-registration-image-card { display: grid; align-content: start; gap: 13px; padding: 14px; border: 1px solid var(--games-registration-line); background: #fafaf8; }
.games-registration-image-card > header { display: grid; gap: 4px; }
.games-registration-image-card > header b { color: #202327; font-size: 15px; }
.games-registration-image-card > header small { color: #70747a; font-size: 11px; }
.games-registration-image-card .games-upload-surface { min-height: 112px; padding: 16px; grid-template-columns: minmax(0, 1fr); align-content: center; }
.games-registration-image-card .games-upload-surface strong { max-width: none; text-align: left; }
.games-registration-image-card > button { min-height: 42px; border: 1px solid #22262b; background: #22262b; color: #fff; font-weight: 850; }
.games-registration-assets > div > span { display: inline-flex; align-items: center; gap: 8px; }
.games-registration-assets > div > span small { min-width: 50px; color: #8b4a39; font-weight: 850; }

@media (max-width: 1080px) {
  .ui-app .games-discovery .games-card__summary { grid-template-columns: 56px minmax(0, 1fr); }
  .ui-app .games-discovery .games-card__icon { width: 56px; height: 56px; border-radius: 14px; }
  .ui-app .games-discovery .games-card__actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 68px; }
  .ui-app .games-discovery .games-card--browser .games-card__summary { grid-template-columns: 48px minmax(0, 1fr); }
  .ui-app .games-discovery .games-card--browser .games-card__icon { width: 48px; height: 48px; border-radius: 12px; }
  .ui-app .games-discovery .games-card--browser .games-card__actions { padding-left: 58px; }
}

@media (max-width: 760px) {
  .ui-app .games-discovery .games-shelf__grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: min(76vw, 270px);
    overflow-x: auto;
    contain: inline-size;
  }
  .ui-app .games-discovery .games-shelf .games-card { display: block; }
  .ui-app .games-discovery .games-shelf .games-card__media {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-right: 1px solid var(--ui-line-strong);
    border-bottom: 1px solid var(--ui-line-strong);
    border-radius: 13px;
  }
  .ui-app .games-discovery .games-card__body,
  .ui-app .games-discovery .games-card--compact .games-card__body { padding: 10px 2px 6px; }
  .ui-app .games-discovery .games-card__summary { grid-template-columns: 48px minmax(0, 1fr); gap: 9px; }
  .ui-app .games-discovery .games-card__icon { width: 48px; height: 48px; border-radius: 12px; }
  .ui-app .games-discovery .games-card__actions { padding-left: 57px; }
  .ui-app .games-discovery .games-card__actions [data-game-pik],
  .ui-app .games-discovery .games-card__actions .games-card__detail { min-height: 36px; padding-inline: 11px; }
  .ui-app .games-discovery .games-card--browser .games-card__body { padding: 11px; }
  .ui-app .games-discovery .games-card--browser .games-card__actions { padding-left: 57px; }
  .ui-app .games-discovery .games-shelf,
  .ui-app .games-discovery .games-search-ranking,
  .ui-app .games-discovery .games-library { scroll-margin-top: 118px; }
  .games-registration-image-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .ui-app .games-discovery .games-library__grid { grid-template-columns: minmax(0, 1fr); }
}

/* 2026-09-04 regression restoration: quiet rails, one-line game identity, intact media. */
.community-channel-rail {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.community-feed-tabs {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ui-app .community-global-search input {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.post-reading-rail .same-channel-board .community-feed-tabs {
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
}
.post-reading-rail .same-channel-board .community-feed-tabs button,
.post-reading-rail .same-channel-board .community-feed-tabs a {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.post-reading-rail .same-channel-board .community-feed-tabs button[aria-pressed="true"],
.post-reading-rail .same-channel-board .community-feed-tabs a[aria-current="page"] {
  border: 0;
  border-bottom: 2px solid var(--ui-ink);
  background: transparent;
  box-shadow: none;
}
.community-workspace .community-feed {
  overflow: visible;
  border: 0;
  background: transparent;
}
.community-workspace .community-feed > .section-head {
  padding-inline: 0;
  border-bottom: 1px solid var(--ui-line);
  background: transparent;
}
.community-workspace .community-feed > .channel-board { padding-inline: 0; }
.community-workspace .feed-sort__item,
.post-reading-rail .same-channel-board .feed-sort__item,
.community-workspace .feed-sort__item[aria-current="true"],
.community-workspace .feed-sort__item[aria-pressed="true"] {
  padding-inline: 1px;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.community-workspace .feed-sort__item[aria-current="true"],
.community-workspace .feed-sort__item[aria-pressed="true"],
.post-reading-rail .same-channel-board .feed-sort__item[aria-current="true"],
.post-reading-rail .same-channel-board .feed-sort__item[aria-pressed="true"] { border-bottom-color: var(--ui-ink) !important; }
.pager__page.is-current {
  border: 1px solid var(--ui-ink);
  border-radius: 6px;
  background: var(--ui-ink);
  color: var(--ui-paper);
  box-shadow: none;
}
.discovery-toolbar {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.discovery-toolbar form {
  grid-template-columns: minmax(0, 1fr) 46px;
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-paper);
}
.discovery-toolbar form button {
  width: 36px;
  height: 36px;
  align-self: center;
  justify-self: center;
  border: 1px solid var(--ui-ink);
  border-radius: 5px;
  background: var(--ui-ink);
  color: var(--ui-paper);
}
.discovery-toolbar form button:hover { background: color-mix(in srgb, var(--ui-ink) 84%, black); color: var(--ui-paper); }
.discovery-toolbar form:focus-within {
  border-color: var(--ui-line-strong);
  box-shadow: none;
}
.ui-app .discovery-toolbar form input:focus,
.ui-app .discovery-toolbar form input:focus-visible {
  outline: 0;
  box-shadow: none !important;
}
.ui-app .discovery-toolbar form button:focus-visible {
  outline: 2px solid var(--ui-ink);
  outline-offset: -3px;
}
.live-page-controls { grid-template-columns: 28px minmax(52px, auto) 28px; gap: 6px; }
.live-page-controls button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.live-page-controls .mobile-rail-dots { gap: 5px; }
.live-page-controls .mobile-rail-dots i {
  width: 16px;
  height: 2px;
  border-radius: 0;
  background: var(--ui-line-strong);
}
.live-page-controls .mobile-rail-dots i[aria-current="true"],
.live-page-controls .mobile-rail-dots i.is-current { width: 24px; background: var(--ui-ink); }
.ui-app .games-discovery .games-storefront-hero__visual img,
.ui-app .games-pack-experience .game-pack-overview__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.ui-app .games-pack-experience .game-pack-overview__identity > div { min-width: 0; }
.ui-app .games-pack-experience .game-pack-overview__identity h1 {
  display: block;
  overflow: visible;
  max-width: 100%;
  font-size: clamp(1.5rem, 2.45vw, 3rem);
  line-height: 1;
  letter-spacing: -.065em;
  text-overflow: clip;
  white-space: nowrap;
  -webkit-line-clamp: initial;
}
.comment-compose-stack > .emote-picker-slot:not([hidden]) {
  width: min(620px, 100%);
}
.comment-composer .emote-picker__panel { max-height: min(480px, calc(100vh - 190px)); }
.comment-composer .emote-picker__pack-grid {
  max-height: min(380px, calc(100vh - 315px));
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
}

@media (max-width: 620px) {
  .community-workspace .feed-search {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .community-workspace .feed-search select {
    grid-column: 1 / -1;
  }
  .ui-app .games-pack-experience .game-pack-overview__identity h1 {
    display: block;
    overflow: visible;
    font-size: clamp(1.25rem, 6.1vw, 1.85rem);
    white-space: nowrap;
  }
  .comment-compose-stack > .emote-picker-slot:not([hidden]) { width: 100%; max-width: calc(100vw - 24px); }
  .comment-composer .emote-picker__panel { max-height: min(360px, calc(100vh - 180px)); }
  .comment-composer .emote-picker__pack-grid { max-height: min(280px, calc(100vh - 300px)); }
}

/* Final mobile LIVE containment: one swipeable card per screen width. */
@media (max-width: 620px) {
  .live-external-section--priority,
  .live-detail-more,
  .live-detail-more__row { min-width: 0; max-width: 100%; overflow: hidden; }
  .live-external-section--priority .external-live-grid--paged,
  .live-detail-more .external-live-grid {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template: none;
    grid-auto-flow: initial;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .live-external-section--priority .external-live-grid--paged::-webkit-scrollbar,
  .live-detail-more .external-live-grid::-webkit-scrollbar { display: none; }
  .live-external-section--priority .external-live-grid--paged > .external-live-card--compact,
  .live-detail-more .external-live-grid > .external-live-card--compact {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

.profile-picker-pagination {
  grid-column: 1 / -1;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 4px;
}
.profile-picker-pagination > span { min-width: 52px; color: var(--ui-dim); font-size: .75rem; font-weight: 800; text-align: center; }
.profile-picker-pagination .text-button { min-height: 36px; padding-inline: 13px; }
[data-equipment-form] .collection-card--frame { min-height: 104px; }
[data-equipment-form] .collection-emblem--frame {
  width: 72px;
  height: 72px;
  overflow: visible;
  background: transparent;
}
[data-equipment-form] .collection-emblem--frame .profile-medallion { width: 72px; height: 72px; }

@media (max-width: 620px) {
  [data-equipment-form] .collection-card--frame { min-height: 94px; }
  [data-equipment-form] .collection-emblem--frame,
  [data-equipment-form] .collection-emblem--frame .profile-medallion { width: 64px; height: 64px; }
}

@media (max-width: 700px) {
  .post-reading-main .comment-form button { min-height: 44px; }
}

/* 2026-09-09 account, home and profile IA refresh. The route contracts stay
   unchanged; this layer only gives them one predictable visual hierarchy. */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow-y: auto;
  background: color-mix(in srgb, #0c0e12 72%, transparent);
  backdrop-filter: blur(10px);
}
.onboarding-dialog {
  width: min(100%, 460px);
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 18px;
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: 0 28px 90px rgb(0 0 0 / 38%);
}
.onboarding-dialog__head { display: grid; justify-items: center; text-align: center; }
.onboarding-dialog__head { gap: 0; }
.onboarding-dialog__head .profile-medallion__default-symbol { width: 100%; height: 100%; }
.onboarding-dialog__head > span:first-child { margin-bottom: 14px; }
.onboarding-dialog__head .eyebrow { color: var(--ui-signal); }
.onboarding-dialog__head h1 { margin: 8px 0 7px; font-size: clamp(1.55rem, 5vw, 2rem); line-height: 1.14; letter-spacing: -.045em; }
.onboarding-dialog__head p { max-width: 35ch; margin: 0; color: var(--ui-dim); font-size: .76rem; line-height: 1.6; word-break: keep-all; }
.onboarding-dialog .onboarding-form { margin-top: 20px; gap: 13px; }
.onboarding-dialog .connected-provider { min-height: 54px; border-radius: 11px; }
.onboarding-dialog .auth-submit { width: 100%; justify-content: center; border-radius: 11px; }
.onboarding-dialog .auth-check { padding: 11px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-paper-2); }
.onboarding-dialog .auth-terms { line-height: 1.55; }
.onboarding-dialog .onboarding-dialog__avatar { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #101216; }
.onboarding-dialog__avatar .profile-medallion__default-symbol { background: #101216; color: #fff; }

.home-balanced-layout.home-command-deck {
  grid-template-columns: minmax(0, 1.82fr) minmax(290px, .68fr);
  align-items: start;
  gap: 14px;
}
.home-balanced-layout__main,
.home-balanced-layout__rail { min-width: 0; display: grid; align-content: start; gap: 14px; }
.home-balanced-layout__rail { position: sticky; top: calc(var(--ui-header) + 14px); }
.home-balanced-layout__main .home-official-split,
.home-conversation-stage--primary,
.home-conversation-stage--rail,
.home-balanced-layout__rail .home-rank-band { grid-template-columns: minmax(0, 1fr); }
.home-conversation-stage--primary,
.home-conversation-stage--rail { display: grid; overflow: visible; gap: 14px; padding: 0; }
.home-conversation-stage--primary > .signal-section,
.home-conversation-stage--rail > .signal-section { min-width: 0; min-height: 0; }
.home-balanced-layout__main .home-interest-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-balanced-layout__main .home-hub-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-balanced-layout__rail .home-rank-companion { min-height: 168px; padding: 19px; }
.home-balanced-layout__rail .ad-mount:empty { display: none; }
.home-balanced-layout__rail .ad-slot { margin: 0; }

.profile-detail-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 318px; align-items: start; gap: 16px; }
.profile-detail-layout__main { min-width: 0; display: grid; gap: 12px; }
.profile-detail-layout__rail { min-width: 0; position: sticky; top: calc(var(--ui-header) + 14px); display: grid; gap: 12px; }
.profile-detail-layout .profile-public-identity {
  min-height: 142px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 22px 24px 22px 28px;
}
.profile-detail-layout .profile-public-identity__actions { max-width: 330px; flex-wrap: wrap; }
.profile-rail-card { overflow: hidden; padding: 16px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper); }
.profile-rail-card > header { margin-bottom: 12px; }
.profile-rail-card > header h2 { margin: 4px 0 0; font-size: .92rem; letter-spacing: -.025em; }
.profile-rail-card .profile-public-identity__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-rail-card .profile-public-identity__stats > div { min-height: 56px; padding: 9px 10px; border-left: 0; border-top: 1px solid var(--ui-line); }
.profile-rail-card .profile-public-identity__stats > div:nth-child(even) { border-left: 1px solid var(--ui-line); }
.profile-rail-card .profile-public-pik-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; overflow: visible; border: 0; background: transparent; }
.profile-rail-card .profile-public-pik-types span { min-width: 0; justify-content: space-between; background: var(--ui-paper-2); }
.profile-rail-card--tools { display: grid; gap: 7px; }
.profile-rail-link { min-height: 54px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid var(--ui-line); border-radius: 10px; color: var(--ui-ink); }
.profile-rail-link:hover { border-color: var(--ui-line-strong); background: var(--ui-paper-2); }
.profile-rail-link > .icon:first-child { width: 16px; color: var(--ui-signal); }
.profile-rail-link > .icon:last-child { width: 13px; color: var(--ui-dim); }
.profile-rail-link span { min-width: 0; display: grid; gap: 3px; }
.profile-rail-link strong { font-size: .72rem; }
.profile-rail-link small { overflow: hidden; color: var(--ui-dim); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }

.identity-button__name,
.profile-menu__home strong { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.identity-button__name .verification-icon,
.profile-menu__home strong .verification-icon { width: 15px; height: 15px; flex: none; }
.profile-menu__coin { min-height: 52px; display: grid !important; grid-template-columns: 32px minmax(0, 1fr) auto 14px; align-items: center; gap: 10px !important; margin: 8px 0 !important; padding: 7px 10px !important; border: solid var(--ui-line); border-width: 1px 0; border-radius: 0 !important; background: transparent; color: var(--ui-ink) !important; }
.profile-menu__coin-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--ui-paper); }
.profile-menu__coin .icon { width: 16px; color: var(--ui-signal); }
.profile-menu__coin > .icon:last-child { width: 13px; color: var(--ui-dim); }
.profile-menu__coin small { margin: 0; color: var(--ui-dim); font-size: .68rem; font-weight: 800; }
.profile-menu__coin strong { margin: 0; color: var(--ui-ink); font-size: .86rem; font-variant-numeric: tabular-nums; }

.search-masthead--results { min-height: 0; grid-template-columns: minmax(0, 1fr); padding-block: 20px; }
.search-masthead--results h1 { margin: 5px 0 7px; font-size: clamp(1.8rem, 3.2vw, 2.65rem); }
.search-masthead--results p { font-size: .78rem; }
.search-results-foot { margin-top: 6px; }
.search-result-group--packs .discovery-card-grid { grid-template-columns: minmax(0, 1fr); }
.search-result-group--packs .pack-discovery-card { min-height: 0; border-radius: 10px; box-shadow: none; transform: none; }
.search-result-group--packs .pack-discovery-card__main { min-height: 82px; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 13px; padding: 9px 12px; }
.search-result-group--packs .pack-discovery-card__visual { grid-column: 1; width: 64px; min-height: 64px; padding: 7px; border-radius: 9px; }
.search-result-group--packs .pack-discovery-card__visual .entity-icon { width: 50px; height: 50px; }
.search-result-group--packs .pack-discovery-card__copy { grid-column: 2; }
.search-result-group--packs .pack-discovery-card footer { display: none; }

.games-pack-experience .game-pack-hero__copy { min-width: 0; overflow: hidden; }
.games-pack-experience .game-pack-hero h1 {
  max-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 960px) {
  .home-balanced-layout.home-command-deck,
  .profile-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .home-balanced-layout__rail,
  .profile-detail-layout__rail { position: static; }
}

@media (max-width: 620px) {
  .onboarding-overlay { align-items: start; padding: 12px; }
  .onboarding-dialog { max-height: calc(100dvh - 24px); padding: 18px 16px; border-radius: 15px; }
  .onboarding-dialog__head .onboarding-dialog__avatar { width: 58px; height: 58px; }
  .home-balanced-layout__main .home-interest-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-balanced-layout__main .home-hub-rail { grid-template-columns: minmax(0, 1fr); }
  .profile-detail-layout .profile-public-identity { grid-template-columns: minmax(0, 1fr); padding: 18px 17px 18px 22px; }
  .profile-detail-layout .profile-public-identity__actions { max-width: none; justify-content: start; }
  .search-portal { gap: 10px; }
  .search-masthead--results { gap: 0; padding: 16px; border-radius: 10px; }
  .search-masthead--results h1 { font-size: clamp(1.55rem, 7.4vw, 2rem); }
  .search-result-group { gap: 10px; padding: 11px; border-radius: 10px; }
  .search-result-group--packs .pack-discovery-card__main { min-height: 76px; grid-template-columns: 58px minmax(0, 1fr); gap: 11px; padding: 9px 11px; }
  .search-result-group--packs .pack-discovery-card__visual { width: 58px; min-height: 58px; padding: 6px; }
  .search-result-group--packs .pack-discovery-card__visual .entity-icon { width: 46px; height: 46px; }
}

/* Dense home feed and compact information rail. */
.home-conversation-stage--primary .signal-section { min-height: 0; }
.home-conversation-stage--primary .compact-list { display: grid; gap: 0; }
.home-conversation-stage--primary .post-row,
.home-conversation-stage--primary .pick-row { min-height: 56px; border-bottom: 1px solid var(--ui-line); border-radius: 0; }
.home-conversation-stage--primary .post-row:last-child,
.home-conversation-stage--primary .pick-row:last-child { border-bottom: 0; }
.home-conversation-stage--primary .post-row > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.home-conversation-stage--primary .post-row > a small { margin: 0; text-align: right; }
.home-conversation-stage--primary .post-row .pik-score { margin-right: 18px; }
.home-conversation-stage--primary .latest-posts .post-row:has(.post-row__mark) { grid-template-columns: 24px minmax(0, 1fr); }
.home-games-ranking { min-width: 0; padding: 16px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-paper); }
.home-games-ranking > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.home-games-ranking > header h2 { margin: 4px 0 0; font-size: .98rem; }
.home-game-rank-row { border-top: 1px solid var(--ui-line); }
.home-game-rank-row summary { min-height: 58px; display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) 14px; align-items: center; gap: 9px; padding: 7px 2px; cursor: pointer; list-style: none; }
.home-game-rank-row summary::-webkit-details-marker { display: none; }
.home-game-rank-row summary > b { color: var(--ui-signal); font-size: .75rem; text-align: center; }
.home-game-rank-row summary > img,
.home-game-rank-row__fallback { width: 40px; height: 40px; display: grid; place-items: center; object-fit: cover; border-radius: 10px; background: var(--ui-paper-2); }
.home-game-rank-row summary > span { min-width: 0; }
.home-game-rank-row summary strong,
.home-game-rank-row summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-game-rank-row summary strong { font-size: .76rem; }
.home-game-rank-row summary small { margin-top: 3px; color: var(--ui-dim); font-size: .63rem; }
.home-game-rank-row summary > .icon { width: 13px; transition: transform .16s ease; }
.home-game-rank-row[open] summary > .icon { transform: rotate(90deg); }
.home-game-rank-row > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 2px 10px 31px; }
.home-game-rank-row > div > a,
.home-game-rank-row > div > button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-paper-2); color: var(--ui-ink); font-size: .68rem; font-weight: 800; }
.home-game-rank-row > div > button[aria-pressed="true"] { border-color: var(--ui-signal); color: var(--ui-signal); }
.home-game-rank-row > div > .home-game-pik { gap: 6px; border-radius: 999px; background: rgb(255 255 255 / 92%); box-shadow: 0 6px 18px rgb(31 36 48 / 7%); }
.home-game-rank-row > div > .home-game-pik .icon { width: 16px; height: 16px; fill: none; stroke: #e15a3d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-game-rank-row > div > .home-game-pik span { color: var(--ui-dim); font-size: .64rem; font-weight: 800; }
.home-game-rank-row > div > .home-game-pik b { color: var(--ui-ink); font-size: .72rem; }
.home-game-rank-row > div > .home-game-pik[aria-pressed="true"] { border-color: rgb(225 90 61 / 45%); background: #fff7f4; color: #b9432e; }
.home-game-rank-row [data-game-action-status] { grid-column: 1 / -1; margin: 0; color: var(--ui-dim); font-size: .62rem; }
.home-interest-rank-row { min-height: 56px; display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) 14px; align-items: center; gap: 9px; border-top: 1px solid var(--ui-line); }
.home-interest-rank-row > b { color: var(--ui-rank); font-size: .75rem; text-align: center; }
.home-interest-rank-row > .entity-icon { width: 38px; height: 38px; }
.home-interest-rank-row > span { min-width: 0; }
.home-interest-rank-row strong,
.home-interest-rank-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-interest-rank-row strong { font-size: .75rem; }
.home-interest-rank-row small { margin-top: 3px; color: var(--ui-dim); font-size: .62rem; }
.home-interest-rank-row > .icon { width: 13px; color: var(--ui-dim); }

@media (max-width: 620px) {
  .home-balanced-layout.home-command-deck { display: grid; grid-template-columns: minmax(0, 1fr); }
  .home-balanced-layout__main,
  .home-balanced-layout__rail { display: contents; }
  .home-balanced-layout__main > .home-feature-live { order: 1; }
  .home-balanced-layout__rail > .home-coupon-radar { order: 2; }
  .home-balanced-layout__main > .home-conversation-stage--primary { order: 3; }
  .home-balanced-layout__rail > .home-official-radar:not(.home-coupon-radar) { order: 4; }
  .home-balanced-layout__rail > .home-games-ranking { order: 5; }
  .home-balanced-layout__rail > .home-rank-band { order: 6; }
  .home-balanced-layout__main > .home-interest-stage { order: 7; }
  .home-balanced-layout__rail > .ad-mount { order: 8; }
  .home-conversation-stage--primary .post-row > a { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .home-conversation-stage--primary .post-row > a small { text-align: left; }
  .home-conversation-stage--primary .post-row .pik-score { margin-right: 8px; }
}