/* wgf-dressing-room - the /dressing-room/ CHARACTER CREATION stage.
 *
 * Owner ruling 2026-08-05 (with a screenshot of retail's charcreate screen): the room is not a
 * boxed .wgf-window on a normal page, it is the screen. Everything below builds that one layout:
 *
 *   .wgf-cc              the stage: full viewport width, viewport height minus the site topbar
 *   .wgf-cc__scene       the fixed art layer + its legibility scrim (first-party loading screen)
 *   .wgf-cc-rail         the two edge rails of round race portraits (blue left, red right)
 *   .wgf-cc-sex          the top-centre body toggle
 *   .wgf-cc-stage        the WebGL canvas, centred, the character standing over the scene
 *   .wgf-cc-slots        the bottom-centre round-icon bar (the game's class bar = our slots)
 *   .wgf-cc-btn          the two big red plate buttons (Back / Customize)
 *   .wgf-cc-panel        the Customize slide-in: set picker, outfit list, a11y selects
 *
 * The kit still supplies the paint: .wgf-btn-red (wgf-chrome.css) is the red plate, .wgf-input
 * the fields. Nothing here re-implements a kit component; it only places them on a stage the kit
 * has no opinion about.
 *
 * SELECTED = a bright yellow ring, exactly the game's affordance, on both the race portraits and
 * the sex toggle. UNAVAILABLE = desaturated + dimmed, never hidden: the page tells the truth
 * about what this server can draw.
 */

/* ── un-box the shell ──────────────────────────────────────────────────────────────────── */
/* Same idiom body.wgf-ah-page already uses: the page opts into a surface swap, no other page
   changes. The main column loses its 1220px cage and its padding so the stage is full bleed. */
body.wgf-cc-page .wgf-shell-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
body.wgf-cc-page .wgf-site-footer { position: relative; z-index: 2; }

/* ── the stage ─────────────────────────────────────────────────────────────────────────── */
/* OWNER DENY 2026-08-05 (annotated screenshot): "title collides with the rails". The first cut
   placed the chrome, the rails, the stage and the foot as four ABSOLUTE boxes over one another
   and hoped their pixel values never met. Two things made them meet:
     1. .wgf-shell-page h1 (wgf-site-shell.css) is specificity 0,1,1 and beat the plain
        .wgf-cc__h1 (0,1,0), so the title rendered at clamp(34px, 6vw, 68px) -> 68px at desktop
        instead of the intended ~16px. It plus its margin ran to about y=131.
     2. .wgf-seo-breadcrumb ships max-width:1180px + padding + a bottom border, none of which a
        14px-wide corner label wants, so the crumb was a full-width ruled strip.
   The rail heads start at the top of the rails, which sat at y=64. 131 > 64 = collision.
   The fix is STRUCTURAL, not another magic number: the stage is now a 3x3 grid and the chrome,
   the two rails, the character and the foot each own a CELL. Two things in different grid cells
   cannot overlap at any viewport, so the faction headers are safe by construction rather than
   by arithmetic. The title's size is then re-won on specificity (body.wgf-cc-page .wgf-cc__h1,
   0,2,1) so no shell rule can inflate it again. */

.wgf-cc {
  /* The two numbers the whole layout is built from. Rail width fits two 54px portrait columns
     (2x54 + 7 gap = 115) inside 148 - 16 padding = 132. Top band fits the crumb + the small
     title (about 35px) and the 50px sex toggle with room to spare. */
  --cc-rail-w: 148px;
  --cc-top-h: 66px;

  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: var(--cc-rail-w) minmax(0, 1fr) var(--cc-rail-w);
  grid-template-rows: var(--cc-top-h) minmax(0, 1fr) auto;
  grid-template-areas:
    "cc-top   cc-top    cc-top"
    "cc-left  cc-stage  cc-right"
    "cc-foot  cc-foot   cc-foot";
  /* The topbar is sticky and roughly 58px; leave it above the stage and take the rest.
     DEFINITE height, not min-height: a `1fr` row inside an auto-height grid resolves against
     its CONTENT, and MEASURED at 1280x800 that made the rail track 887px tall (14 portraits
     stacked, no room to wrap) and pushed the foot off the bottom of the window. A definite
     height is also what lets .wgf-cc-rail__list's max-height:100% mean "the rail", which is
     what wraps a 14-race faction into two columns instead of one long scroll. */
  height: calc(100vh - 58px);
  height: calc(100svh - 58px);
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background: #07060a;
  color: #e8ddc7;
}

/* Art layer. The source is a 16:9 extracted loading screen whose top and bottom ~15% are the
   client's letterbox bars; insetting the art box 26% past the stage on every side makes `cover`
   scale past them so only the painted middle is ever visible, at any viewport aspect. */
.wgf-cc__scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }

.wgf-cc__art {
  position: absolute;
  inset: -26%;
  display: block;
  background-image: var(--wgf-cc-art);
  background-position: center 46%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(0.92) brightness(0.78);
}

/* The legibility floor: darker at the edges where the rails and the button plates sit, open in
   the middle where the character stands. */
.wgf-cc__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 62% at 50% 44%, rgba(6, 5, 8, 0) 0%, rgba(6, 5, 8, 0.55) 78%, rgba(5, 4, 7, 0.88) 100%),
    linear-gradient(180deg, rgba(8, 6, 10, 0.78) 0%, rgba(8, 6, 10, 0.12) 26%, rgba(6, 5, 8, 0.14) 56%, rgba(5, 4, 7, 0.92) 100%);
}

/* ── page chrome that still has to exist (breadcrumb + h1) ─────────────────────────────── */
/* It lives in the TOP BAND now, left corner, as the small gold label the in-game screens use.
   The band is its own grid row, so nothing here can ever reach the rail heads below it. */

.wgf-cc__chrome {
  grid-area: cc-top;
  align-self: center;
  justify-self: start;
  z-index: 3;
  min-width: 0;
  padding-left: 14px;
  /* The sex toggle is centred in this same band and is 112px wide (2x50 + 12 gap), so it spans
     the middle 56px either side of centre. Stopping the chrome 96px short of the centre line
     leaves a 40px gutter at every width, so the two never touch either. */
  max-width: calc(50% - 96px);
  pointer-events: auto;
}

/* The shared crumb component ships page furniture (1180px cage, padding, a ruled bottom edge)
   that a corner label does not want. Strip it HERE only, never in the shared file. */
body.wgf-cc-page .wgf-cc__chrome .wgf-seo-breadcrumb {
  max-width: none;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}
body.wgf-cc-page .wgf-cc__chrome .wgf-seo-breadcrumb ol {
  flex-wrap: nowrap;
  font-size: .66rem;
  letter-spacing: .05em;
  opacity: .76;
}
body.wgf-cc-page .wgf-cc__chrome .wgf-seo-breadcrumb li {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Specificity 0,2,1 so .wgf-shell-page h1 (0,1,1) cannot inflate it back to 68px. This is the
   small gold title the game's own screens carry, not a hero headline. */
body.wgf-cc-page .wgf-cc__h1 {
  margin: 1px 0 0;
  color: #f0c744;
  font-family: var(--font-game, var(--font-display, inherit));
  font-size: .92rem;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .85);
}

/* ── faction rails ─────────────────────────────────────────────────────────────────────── */

/* Each rail is a grid CELL, so its head can never be covered by the title band above it.
   Inside, `auto minmax(0,1fr)` gives the head its natural height and hands the list exactly the
   remaining space, which is what makes the list's max-height:100% mean the right thing. */
.wgf-cc-rail {
  grid-area: cc-left;
  z-index: 3;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 4px 8px 10px;
  overflow: hidden;
  scrollbar-width: thin;
}
.wgf-cc-rail--alliance { grid-area: cc-left; justify-items: start; }
.wgf-cc-rail--horde { grid-area: cc-right; justify-items: end; }

.wgf-cc-rail__head {
  margin: 0;
  color: #f0c744;
  font-family: var(--font-game, inherit);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9);
}

/* Two staggered columns per side, like the screenshot: the list wraps into a fixed-height
   column flow so a 15-race faction fills two columns instead of scrolling forever. If a very
   short viewport forces a third column the list scrolls rather than clipping the portraits. */
.wgf-cc-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  gap: 7px;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
  scrollbar-width: thin;
}
.wgf-cc-rail--horde .wgf-cc-rail__head { text-align: right; }
.wgf-cc-rail--horde .wgf-cc-rail__list { align-content: flex-end; }

.wgf-cc-race__btn {
  display: block;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 2px solid var(--cc-ring, #4a4133);
  border-radius: 50%;
  background: #0d0b09;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), 0 3px 10px rgba(0, 0, 0, .6);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.wgf-cc-rail--alliance .wgf-cc-race__btn { --cc-ring: #3d7fd6; }
.wgf-cc-rail--horde .wgf-cc-race__btn { --cc-ring: #b32d2d; }

.wgf-cc-race__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wgf-cc-race__btn:hover,
.wgf-cc-race__btn:focus-visible {
  outline: none;
  border-color: #ffe08a;
  transform: scale(1.06);
}

/* THE selected affordance: the bright yellow ring + glow the client uses. */
.wgf-cc-race.is-selected .wgf-cc-race__btn {
  border-color: #ffd94a;
  box-shadow: 0 0 0 2px rgba(255, 217, 74, .38), 0 0 16px 3px rgba(255, 200, 60, .5);
  transform: scale(1.08);
}

/* Honest, not hidden: no baked body on this host = greyed out, with the reason on the button. */
.wgf-cc-race.is-unbaked .wgf-cc-race__btn {
  filter: grayscale(1) brightness(0.52);
  border-color: #3a342b;
  cursor: not-allowed;
}
.wgf-cc-race.is-unbaked .wgf-cc-race__btn:hover { transform: none; border-color: #524a3c; }

/* ── sex toggle ────────────────────────────────────────────────────────────────────────── */

/* Centred in the SAME top band as the chrome. Both are grid items in the cc-top area; the
   chrome is justify-self:start and capped short of centre, this one is justify-self:center. */
.wgf-cc-sex {
  grid-area: cc-top;
  align-self: center;
  justify-self: center;
  z-index: 3;
  display: flex;
  gap: 12px;
}

.wgf-cc-sex__btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 2px solid #6a5b3a;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #241d14, #0c0a08 78%);
  color: #c9b47e;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wgf-cc-sex__glyph { width: 26px; height: 26px; fill: #c9b47e; }
.wgf-cc-sex__btn:hover { border-color: #ffe08a; }
.wgf-cc-sex__btn:focus-visible { outline: none; border-color: #ffe08a; }
.wgf-cc-sex__btn.is-selected {
  border-color: #ffd94a;
  box-shadow: 0 0 0 2px rgba(255, 217, 74, .34), 0 0 14px 3px rgba(255, 200, 60, .45);
}
.wgf-cc-sex__btn.is-selected .wgf-cc-sex__glyph { fill: #ffd94a; }

/* ── the character ─────────────────────────────────────────────────────────────────────── */

/* The middle cell, between the two rails. The canvas is taken out of flow so it can never feed
   its own height back into the grid track (a 100%-height canvas inside an auto track grows
   without bound); the track is minmax(0,1fr) and the canvas simply fills the cell. */
.wgf-cc-stage {
  grid-area: cc-stage;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.wgf-cc-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.wgf-cc-stage--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: #cbbfa4;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9);
}

/* ── the foot: Back | caption + slot bar | set name + Customize ────────────────────────── */

.wgf-cc__foot {
  grid-area: cc-foot;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: end;
  gap: 14px;
  padding: 6px 18px 16px;
}

.wgf-cc__footmid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wgf-cc__footright { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.wgf-cc-caption {
  margin: 0;
  color: #d6c9ae;
  font-size: .74rem;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .95);
}

.wgf-cc-setname {
  margin: 0;
  color: #f0c744;
  font-family: var(--font-game, inherit);
  font-size: .8rem;
  letter-spacing: .04em;
  text-align: right;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .95);
}

/* The two big red plate buttons. The plate itself is .wgf-btn-red from the kit; all this does
   is scale it up to the charcreate size (the cap padding MUST track the height, see the kit). */
.wgf-cc-btn.wgf-btn-red {
  --wgf-btn-h: 46px;
  --wgf-btn-cap: 20px;
  min-width: 176px;
  font-size: 1rem;
  letter-spacing: .04em;
}
.wgf-cc-btn--back { justify-self: start; }
.wgf-cc-btn--next { justify-self: end; }

/* ── the slot bar (the game's class bar) ───────────────────────────────────────────────── */

.wgf-cc-slots {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(106, 91, 58, .55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(14, 11, 8, .72), rgba(8, 7, 6, .86));
  box-shadow: 0 -2px 18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  max-width: min(940px, 88vw);
}

.wgf-cc-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; }

.wgf-cc-slot__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid #4a4133;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #1c1710, #0a0907 80%);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.wgf-cc-slot__icon { display: block; width: 100%; height: 100%; object-fit: cover; }
span.wgf-cc-slot__icon { background: transparent; }

.wgf-cc-slot__label {
  color: #c9b47e;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
}

/* The name + reason still ship on every slot for assistive tech and for the tooltip; the
   VISIBLE copy of the honest state lives in the Customize panel's outfit list. */
.wgf-cc-slot__name,
.wgf-cc-slot__note,
.wgf-cc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A slot the pipeline CAN draw is live gold and takes clicks. */
.wgf-cc-slot--placed .wgf-cc-slot__btn { border-color: #8a7440; }
.wgf-cc-slot--placed .wgf-cc-slot__btn:hover,
.wgf-cc-slot--placed .wgf-cc-slot__btn:focus-visible {
  outline: none;
  border-color: #ffd94a;
  box-shadow: 0 0 12px 2px rgba(255, 200, 60, .42);
  transform: scale(1.06);
}
.wgf-cc-slot--placed .wgf-cc-slot__label { color: #f0c744; }

/* Filled but undrawable: desaturated, with the reason in the tooltip. Never a lie.
   `untextured` joined this set 2026-08-05: the bake exists but carries no image, so drawing it
   would put a white blob on the character. Held back and named, exactly like the rest. */
.wgf-cc-slot--composite .wgf-cc-slot__btn,
.wgf-cc-slot--unbaked .wgf-cc-slot__btn,
.wgf-cc-slot--untextured .wgf-cc-slot__btn,
.wgf-cc-slot--unplaceable .wgf-cc-slot__btn,
.wgf-cc-slot--no_appearance .wgf-cc-slot__btn {
  filter: grayscale(1) brightness(0.62);
  cursor: help;
}
.wgf-cc-slot--composite .wgf-cc-slot__label,
.wgf-cc-slot--unbaked .wgf-cc-slot__label,
.wgf-cc-slot--untextured .wgf-cc-slot__label,
.wgf-cc-slot--unplaceable .wgf-cc-slot__label,
.wgf-cc-slot--no_appearance .wgf-cc-slot__label { color: #8d836c; }

/* Empty = a dark socket. */
.wgf-cc-slot--empty .wgf-cc-slot__btn { opacity: .42; cursor: default; }
.wgf-cc-slot--empty .wgf-cc-slot__label { color: #6f6754; }

.wgf-cc-slot.is-hidden .wgf-cc-slot__btn { opacity: .3; border-style: dashed; }

/* ── the Customize panel ───────────────────────────────────────────────────────────────── */

.wgf-cc-panel {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  border-left: 1px solid #6a5b3a;
  background: linear-gradient(180deg, rgba(13, 11, 9, .97), rgba(8, 7, 6, .98));
  box-shadow: -14px 0 40px rgba(0, 0, 0, .6);
  transform: translateX(0);
  transition: transform 180ms ease;
}
.wgf-cc-panel[hidden] { display: flex; transform: translateX(101%); visibility: hidden; }

.wgf-cc-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #3a332a;
}

.wgf-cc-panel__title {
  margin: 0;
  color: #f0c744;
  font-family: var(--font-game, inherit);
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wgf-cc-panel__close {
  border: 1px solid #4a4133;
  border-radius: 4px;
  background: rgba(10, 9, 7, .8);
  color: #c9b47e;
  font: inherit;
  line-height: 1;
  padding: 5px 9px;
  cursor: pointer;
}
.wgf-cc-panel__close:hover { color: #ffe08a; border-color: #6a6153; }

.wgf-cc-panel__body { padding: 12px; overflow-y: auto; flex: 1 1 auto; }

.wgf-cc-label {
  margin: 14px 0 5px;
  color: #c9b47e;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wgf-cc-panel__body > .wgf-cc-label:first-child { margin-top: 0; }

.wgf-cc-micro { margin: 5px 0 0; color: #8d836c; font-size: .72rem; }
.wgf-cc-input,
.wgf-cc-select { width: 100%; margin-bottom: 6px; }

.wgf-cc-check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 8px;
  color: #a99e86;
  font-size: .74rem;
  cursor: pointer;
}

/* The outfit list: this is where the honest per-piece states are VISIBLE. */
.wgf-cc-pieces { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.wgf-cc-piece {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 2px 8px;
  padding: 5px 7px;
  border: 1px solid #3a332a;
  border-radius: 5px;
  background: rgba(14, 12, 10, .6);
}
.wgf-cc-piece__label { color: #7d7460; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }
.wgf-cc-piece__name { color: #e8ddc7; font-size: .8rem; overflow-wrap: anywhere; }
.wgf-cc-piece__note { grid-column: 2; color: #7d7460; font-size: .68rem; }
.wgf-cc-piece__note:empty { display: none; }

.wgf-cc-piece--placed { border-color: #6a5b3a; }
.wgf-cc-piece--placed .wgf-cc-piece__name { color: #f0c744; }
.wgf-cc-piece--composite,
.wgf-cc-piece--unbaked,
.wgf-cc-piece--untextured,
.wgf-cc-piece--unplaceable,
.wgf-cc-piece--no_appearance { opacity: .68; }

/* ── the WARDROBE popup (owner ruling 2026-08-05) ──────────────────────────────────────── */
/* "Think in-game transmog system but better." The client's wardrobe is a gold-trimmed floating
   frame over the scene with a square icon grid inside it, so that is what this is: NOT a second
   full-height rail (the Customize panel already owns the right edge) but a window that floats
   over the stage, anchored to the slot bar it was opened from.

   It sits in the STAGE's coordinate space (.wgf-cc is position:relative) rather than in a grid
   cell on purpose: a floating window is allowed to overlap the character, which is exactly what
   the game does, and it is dismissible, which is what makes that safe. Everything the grid rule
   about "regions own their own cell" protects (the title, the rails, the foot) stays untouched
   because this layer is above all of them and closes on Escape. */

.wgf-cc-wardrobe {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 148px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  max-height: min(58vh, 520px);
  display: flex;
  flex-direction: column;
  border: 1px solid #8a7440;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(16, 13, 10, .97), rgba(9, 8, 7, .98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 224, 138, .14);
}
.wgf-cc-wardrobe[hidden] { display: none; }

.wgf-cc-wardrobe__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #3a332a;
}

.wgf-cc-wardrobe__title {
  margin: 0;
  color: #f0c744;
  font-family: var(--font-game, inherit);
  font-size: .92rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wgf-cc-wardrobe__tools { padding: 10px 12px 0; }
.wgf-cc-wardrobe__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 2px;
}
.wgf-cc-wardrobe__row .wgf-cc-check { margin: 0; }

.wgf-cc-wardrobe__btn {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid #6a5b3a;
  border-radius: 4px;
  background: rgba(10, 9, 7, .8);
  color: #c9b47e;
  font: inherit;
  font-size: .74rem;
  cursor: pointer;
}
.wgf-cc-wardrobe__btn:hover { color: #ffe08a; border-color: #8a7440; }

.wgf-cc-wardrobe__hint { padding: 0 12px; }
.wgf-cc-wardrobe__set { padding: 8px 12px 0; border-bottom: 1px solid #2b261f; }
.wgf-cc-wardrobe__set .wgf-cc-label { margin-top: 4px; }
.wgf-cc-wardrobe__set[hidden] { display: none; }

/* The grid: square icon tiles, the wardrobe's whole visual language. auto-fill keeps the
   column count honest at every width instead of breaking at hardcoded stops. */
.wgf-cc-wardrobe__grid {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 10px 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.wgf-cc-wardrobe__grid--set { max-height: 122px; padding-top: 6px; }

.wgf-cc-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }

/* Quality colour: the tile carries the site's q-* class, which sets `color` from _tokens.css,
   and the frame simply borrows it. ONE home for the palette, no second table here. */
.wgf-cc-tile__btn {
  display: grid;
  place-items: center;
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 6px;
  background: #0d0b09;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .55);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.wgf-cc-tile__icon { display: block; width: 100%; height: 100%; object-fit: cover; }
span.wgf-cc-tile__icon { background: radial-gradient(circle at 50% 32%, #1c1710, #0a0907 80%); }

.wgf-cc-tile__btn:hover,
.wgf-cc-tile__btn:focus-visible {
  outline: none;
  transform: scale(1.07);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), 0 0 14px 2px rgba(255, 200, 60, .5);
}
.wgf-cc-tile.is-active .wgf-cc-tile__btn {
  box-shadow: 0 0 0 2px rgba(255, 217, 74, .55), 0 0 16px 3px rgba(255, 200, 60, .5);
}

/* The 3D badge: small, gold, and only on tiles this host can genuinely draw. */
.wgf-cc-tile__3d {
  position: absolute;
  right: 1px;
  bottom: 1px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(8, 7, 6, .86);
  color: #ffd94a;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
}

.wgf-cc-tile__name {
  width: 100%;
  color: #a99e86;
  font-size: .58rem;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Honest, never hidden: a tile the pipeline cannot draw is desaturated, exactly like the slot
   bar. It is still the right appearance to plan an outfit around, so it stays on the grid. */
.wgf-cc-tile--composite .wgf-cc-tile__icon,
.wgf-cc-tile--unbaked .wgf-cc-tile__icon,
.wgf-cc-tile--untextured .wgf-cc-tile__icon,
.wgf-cc-tile--unplaceable .wgf-cc-tile__icon,
.wgf-cc-tile--no_appearance .wgf-cc-tile__icon { filter: saturate(.55) brightness(.82); }

.wgf-cc-wardrobe__status { padding: 0 12px 6px; margin: 0; }

.wgf-cc-wardrobe__more {
  margin: 0 12px 12px;
  padding: 7px 0;
  border: 1px solid #6a5b3a;
  border-radius: 5px;
  background: rgba(10, 9, 7, .8);
  color: #c9b47e;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.wgf-cc-wardrobe__more:hover { color: #ffe08a; border-color: #8a7440; }
.wgf-cc-wardrobe__more[hidden] { display: none; }

/* ── narrow ────────────────────────────────────────────────────────────────────────────── */
/* Only the two layout variables move: the grid keeps every region in its own cell, so a narrow
   viewport shrinks the rails instead of sliding anything on top of anything else. */

@media (max-width: 1279px) {
  .wgf-cc { --cc-rail-w: 136px; }
  /* Give the middle column back the width the two plate buttons were reserving, so the 14-slot
     bar stays one row here too (MEASURED: it wrapped and pushed a slot off-screen at 1200px). */
  .wgf-cc__foot { grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); padding: 6px 12px 14px; }
}

@media (max-width: 1080px) {
  .wgf-cc { --cc-rail-w: 78px; }
  .wgf-cc-btn.wgf-btn-red { --wgf-btn-h: 40px; --wgf-btn-cap: 17px; min-width: 132px; font-size: .86rem; }
}

/* The slot bar and the rails compete for the same vertical budget. MEASURED at 1280x800: the
   14-slot bar wrapped to two rows, the foot grew to 217px, the rails were left 420px and a
   15-race faction needed a THIRD portrait column it had no width for. Two rules keep that from
   happening: hold the bar to one row below 1440px, and scale the portraits with the viewport
   height so two columns always swallow a full faction. */
@media (max-width: 1440px) {
  .wgf-cc-slots { gap: 8px; padding: 6px 10px; }
  .wgf-cc-slot { width: 50px; }
  .wgf-cc-slot__btn { width: 42px; height: 42px; }
}

@media (max-height: 940px) {
  .wgf-cc-race__btn { width: 46px; height: 46px; }
  .wgf-cc-rail__list { gap: 6px; }
}

@media (max-height: 780px) {
  .wgf-cc-race__btn { width: 40px; height: 40px; }
  .wgf-cc-rail__list { gap: 5px; }
}

/* Phone: the rails stop being edges and become horizontal strips, Alliance under the title and
   Horde above the character, so both are reachable with a thumb and neither covers the model.
   Still cells, still no overlap: the grid just becomes a single column of five rows. */
@media (max-width: 700px) {
  .wgf-cc {
    --cc-top-h: auto;
    /* Phone stacks five rows, so the stage takes a share of the screen and the page is allowed
       to be as tall as it needs; the desktop definite height would squash the strips. */
    height: auto;
    min-height: calc(100vh - 52px);
    min-height: calc(100svh - 52px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "cc-top"
      "cc-left"
      "cc-right"
      "cc-stage"
      "cc-foot";
  }

  .wgf-cc-rail {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    background: linear-gradient(180deg, rgba(8, 7, 6, .82), rgba(8, 7, 6, .5));
  }
  .wgf-cc-rail__head { flex: 0 0 auto; font-size: .64rem; letter-spacing: .1em; }
  .wgf-cc-rail--horde .wgf-cc-rail__head { text-align: left; }
  .wgf-cc-rail__list { flex-flow: row nowrap; max-height: none; overflow: visible; gap: 6px; }
  .wgf-cc-race__btn { width: 42px; height: 42px; }

  /* One band, chrome hard left and the toggle hard right: still two cells' worth of gutter. */
  .wgf-cc__chrome { max-width: calc(100% - 130px); padding: 6px 0 4px 10px; }
  .wgf-cc-sex { justify-self: end; padding: 6px 10px 4px 0; }
  .wgf-cc-sex__btn { width: 40px; height: 40px; }
  .wgf-cc-sex__glyph { width: 21px; height: 21px; }

  .wgf-cc-stage { min-height: 46vh; }

  .wgf-cc__foot {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px 10px 12px;
  }
  .wgf-cc__footmid { grid-column: 1 / -1; order: -1; }
  .wgf-cc-slots { gap: 6px; padding: 6px 8px; max-width: 96vw; }
  .wgf-cc-slot { width: 44px; }
  .wgf-cc-slot__btn { width: 36px; height: 36px; }
  .wgf-cc-slot__label { font-size: .5rem; }
  .wgf-cc-btn.wgf-btn-red { min-width: 0; width: 100%; }
  .wgf-cc-setname { font-size: .72rem; }

  /* Phone: the wardrobe stops floating and becomes a sheet pinned to the bottom, above the slot
     bar, so a thumb reaches the grid and the character is still visible above it. */
  .wgf-cc-wardrobe {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 66vh;
    transform: none;
    border-radius: 10px 10px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .wgf-cc-wardrobe__grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
  .wgf-cc-tile__btn { width: 46px; height: 46px; }
}

/* A short viewport cannot spare 520px of wardrobe over a 148px foot: shrink the window, never
   let it run off the top of the stage. */
@media (max-height: 860px) {
  .wgf-cc-wardrobe { bottom: 132px; max-height: min(50vh, 400px); }
}

@media (prefers-reduced-motion: reduce) {
  .wgf-cc-panel,
  .wgf-cc-race__btn,
  .wgf-cc-slot__btn,
  .wgf-cc-tile__btn,
  .wgf-cc-sex__btn { transition: none; }
}