/* =========================================================
   CHARACTER CREATOR panel — Bridge Run                  2026-08-06

   📐 Fixed design-space px only. Not one vw/vh — the panel is scaled as a whole
   by the shell's --ui-scale, so anything reading the real viewport gets scaled
   twice (UI Kit/UI-SCALING-STANDARD.md, TRAP #3).
   ========================================================= */

/* ⚠️ THE PANEL SITS LOW ON PURPOSE.
   A dress-up screen where you cannot see who you are dressing is useless. `.sh-ov`
   centres its panel by default, which put it squarely over the character standing on
   the track. Pushing it to the bottom leaves the runner visible above it, so every
   tap on a garment is seen on the actual model rather than guessed at. */
#brStyle{ align-items:flex-end; padding-bottom:56px; }
/* The scrim stays clear while dressing — the whole point is seeing the character. */
#brStyle.show{ background:rgba(20,14,8,.18); }

#brStyle .panel{
  width:340px; flex:none;
  transform: translateY(150px) scale(calc(var(--ui-scale,1) * .98));
  opacity:0;
}
/* Rests AT the card scale — never `transform:none`, which would snap the panel to
   full raw size the instant the animation ended (TRAP #1). */
#brStyle.show .panel{ animation: cr-slideIn .42s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes cr-slideIn{ to{ transform: translateY(0) scale(var(--ui-scale,1)); opacity:1; } }
#brStyle.closing .panel{ animation: cr-slideOut .26s ease-in forwards; }
@keyframes cr-slideOut{
  from{ transform: translateY(0) scale(var(--ui-scale,1)); opacity:1; }
  to  { transform: translateY(170px) scale(calc(var(--ui-scale,1) * .98)); opacity:0; }
}
#brStyle.closing{ background:rgba(20,14,8,0); }

/* ══ CHROME OUT OF THE WAY WHILE DRESSING ═══════════════════════════════════
   The card (HUD row, title, tagline, MORE button) slides UP and the nav slides DOWN,
   so the only things on screen are the character and the picker. Driven by a class on
   <html> that creator.js toggles — the shell's own elements are never edited, so
   shell.css stays byte-identical and everything eases back on close.
   `transform` rather than `display:none` so it animates, and so the shell's own layout
   maths (which measures the nav) is never handed a zero-height element. */
html.br-dressing #gameShell{
  transform:translateY(-46%) !important;
  opacity:0; pointer-events:none;
  transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .28s;
}
html.br-dressing #shNav{
  transform:translateY(120%) !important;
  opacity:0; pointer-events:none;
  transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .28s;
}
/* Coming back: the shell re-applies its own transform on the next layout, so only the
   fade needs a transition here — animating transform back would fight layoutUI(). */
#gameShell, #shNav{ transition:opacity .28s; }

/* ── the slot list ──────────────────────────────────────────────────────────
   Nine slots would make a very tall panel, so the list scrolls INSIDE the card.
   max-height is design-space px (a share of the 800-tall card), never vh. */
#brStyle .cr-slots{
  /* ⚠️ Deliberately short. The panel must occupy roughly the BOTTOM THIRD of the
     800-tall card and no more, because the camera reframes the character into the space
     above it — a taller list would cover the very thing being dressed. Design-space px,
     never vh. */
  /* 157px — 20% shorter than the 196 it started at, on request. With the chrome now
     sliding away there is more character to see, so the picker earns less of the screen. */
  width:300px; max-height:157px; overflow-y:auto; overflow-x:hidden;
  margin:0 auto; padding-right:4px;
  display:flex; flex-direction:column; gap:8px;
}
#brStyle .cr-row{ text-align:left; }
#brStyle .cr-name{
  font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--text);
  opacity:.6; margin:0 0 4px 2px;
}
/* Options wrap rather than scroll sideways: a horizontal scroller inside a vertical
   one is a fight on touch, and no slot has more than seven items. */
#brStyle .cr-opts{ display:flex; flex-wrap:wrap; gap:6px; }

#brStyle .cr-opt{
  min-width:62px; height:34px; padding:0 10px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:800; color:var(--text);
  border:3px solid var(--ink); border-radius:12px;
  background:linear-gradient(180deg, var(--gh-1), var(--gh-2));
  box-shadow:0 3px 0 var(--gh-3);
  transition:transform .1s;
}
#brStyle .cr-opt:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--gh-3); }
/* Selected uses the ACTION ramp, the same colour the play button and the active nav
   tab use — one "this is chosen/pressable" colour across the whole UI. */
#brStyle .cr-opt.on{
  background:linear-gradient(180deg, var(--pri-1), var(--pri-2));
  box-shadow:0 3px 0 var(--pri-3);
  color:var(--pri-ink);
}

/* Skin swatches. Round so they read as colour rather than as another garment button,
   and the same ink outline so they sit in the shell's language. */
#brStyle .cr-swatch{
  width:34px; height:34px; padding:0; cursor:pointer; border-radius:50%;
  border:3px solid var(--ink); box-shadow:0 3px 0 var(--gh-3);
  transition:transform .1s;
}
#brStyle .cr-swatch:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--gh-3); }
#brStyle .cr-swatch.on{
  box-shadow:0 0 0 3px var(--gold), 0 3px 0 var(--gh-3);
  border-color:var(--gold-dk);
}

#brStyle .row2{ margin-top:10px; }
/* Three across now (roll for gems · roll for an ad · done), so they are shorter and the
   text smaller than the two-button version. */
#brStyle .row2 .btn{ flex:1 1 0; min-width:0; height:46px; border-radius:16px; font-size:14px; }
#brStyle .cr-cost{ display:flex; align-items:center; justify-content:center; gap:5px; }
#brStyle .cr-cost img{ width:19px; height:19px; object-fit:contain; }
#brStyle .btn[disabled]{ filter:grayscale(.85) brightness(.97); cursor:default; }

/* ── locked garments ────────────────────────────────────────────────────────
   Dimmed and struck with a padlock rather than hidden: you cannot want what you cannot
   see, and the whole point of a gacha is that the closet shows what is still out there. */
#brStyle .cr-opt.locked{ opacity:.45; }
#brStyle .cr-opt.locked .cr-lbl{ opacity:.5; }
#brStyle .cr-opt.locked::after{
  content:''; position:absolute; right:5px; top:4px; width:9px; height:7px;
  border-radius:1px; background:var(--ink);
  box-shadow:0 -4px 0 -1px transparent, inset 0 0 0 9px var(--ink);
}
#brStyle .cr-opt.locked::before{
  content:''; position:absolute; right:7px; top:1px; width:5px; height:5px;
  border:2px solid var(--ink); border-bottom:0; border-radius:3px 3px 0 0;
}
#brStyle .cr-opt{ position:relative; }
/* The unlock reveal — brief, gold, and it does not move the button (a jumping list under
   a thumb is worse than no animation). */
#brStyle .cr-opt.won{ animation:cr-won .9s ease-out; }
@keyframes cr-won{
  0%{ box-shadow:0 3px 0 var(--gh-3); }
  25%{ box-shadow:0 0 0 4px var(--gold), 0 3px 0 var(--gh-3); }
  100%{ box-shadow:0 3px 0 var(--gh-3); }
}

/* The nav tab's drawn icon — a shirt. Sized by the shell; this only colours it so it
   sits in the same visual language as the other tabs. */
#shNav .tabb[data-t="style"] svg{ width:44px; height:44px; display:block;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)); pointer-events:none; }
#shNav .tabb.on[data-t="style"] svg{ width:46px; height:46px; }

/* ══ PEOPLE PANEL — ready-made characters ═══════════════════════════════════
   Shares the dresser's geometry (bottom-anchored, slides up, chrome moves away)
   because the reframing work is identical; only the contents differ.
   📐 Fixed design-space px throughout — no vw/vh (UI-SCALING-STANDARD TRAP #3). */
#brPeople{ align-items:flex-end; padding-bottom:56px; }
#brPeople.show{ background:rgba(20,14,8,.18); }
#brPeople .panel{
  width:340px; flex:none;
  transform:translateY(150px) scale(calc(var(--ui-scale,1) * .98)); opacity:0;
}
#brPeople.show .panel{ animation:cr-slideIn .42s cubic-bezier(.22,1,.36,1) forwards; }
#brPeople.closing .panel{ animation:cr-slideOut .26s ease-in forwards; }
#brPeople.closing{ background:rgba(20,14,8,0); }

/* Male / Female switch. Two tabs rather than a dropdown: with only two values a
   dropdown hides half the answer behind a tap. */
#brPeople .pp-sex{ display:flex; gap:8px; justify-content:center; margin-bottom:10px; }
#brPeople .pp-tab{
  min-width:96px; height:32px; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--text);
  border:3px solid var(--ink); border-radius:14px;
  background:linear-gradient(180deg, var(--gh-1), var(--gh-2));
  box-shadow:0 3px 0 var(--gh-3);
}
#brPeople .pp-tab.on{
  background:linear-gradient(180deg, var(--pri-1), var(--pri-2));
  box-shadow:0 3px 0 var(--pri-3); color:var(--pri-ink);
}

/* 8 per sex — a 4x2 grid fits without scrolling, so the whole roster is visible at
   once. A gacha that needs scrolling to see what you might win sells itself badly. */
#brPeople .pp-grid{
  display:grid; grid-template-columns:repeat(4, 68px); gap:8px;
  justify-content:center;
}
#brPeople .pp-tile{
  width:68px; height:58px; padding:0 4px; cursor:pointer; position:relative;
  font-family:inherit; font-size:11px; font-weight:800; color:var(--text);
  border:3px solid var(--ink); border-radius:16px;
  background:linear-gradient(180deg, var(--gh-1), var(--gh-2));
  box-shadow:0 3px 0 var(--gh-3);
  display:flex; align-items:center; justify-content:center; text-align:center;
  transition:transform .1s;
}
#brPeople .pp-tile:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--gh-3); }
#brPeople .pp-tile.on{
  background:linear-gradient(180deg, var(--pri-1), var(--pri-2));
  box-shadow:0 3px 0 var(--pri-3); color:var(--pri-ink);
}
/* Locked shows the accent ramp and a "?" — the prize, not furniture. Same reasoning
   as the skins grid: you cannot want what you cannot see. */
#brPeople .pp-tile.locked{
  background:linear-gradient(180deg, var(--accent-lt), var(--accent));
  box-shadow:0 3px 0 var(--accent-base); color:var(--pri-ink);
}
#brPeople .pp-tile.locked .pp-lbl{ font-size:22px; }
#brPeople .pp-tile.won{ animation:cr-won .9s ease-out; }

#brPeople .pp-name{
  font-size:12px; font-weight:700; color:var(--text); opacity:.72;
  text-align:center; margin-top:9px; min-height:15px;
}
#brPeople .row2{ margin-top:10px; }
#brPeople .row2 .btn{ flex:1 1 0; min-width:0; height:46px; border-radius:16px; font-size:14px; }
#brPeople .pp-cost{ display:flex; align-items:center; justify-content:center; gap:5px; }
#brPeople .pp-cost img{ width:19px; height:19px; object-fit:contain; }
#brPeople .btn[disabled]{ filter:grayscale(.85) brightness(.97); cursor:default; }

#shNav .tabb[data-t="people"] svg{ width:44px; height:44px; display:block;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)); pointer-events:none; }
#shNav .tabb.on[data-t="people"] svg{ width:46px; height:46px; }

/* Skin swatches in the People panel. Round so they read as colour rather than as
   another character tile, gold ring on the chosen one. */
#brPeople .pp-skin{ display:flex; gap:7px; justify-content:center; margin-top:10px; }
#brPeople .pp-swatch{
  width:30px; height:30px; padding:0; cursor:pointer; border-radius:50%;
  border:3px solid var(--ink); box-shadow:0 3px 0 var(--gh-3); transition:transform .1s;
}
#brPeople .pp-swatch:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--gh-3); }
#brPeople .pp-swatch.on{ box-shadow:0 0 0 3px var(--gold), 0 3px 0 var(--gh-3); border-color:var(--gold-dk); }