/* The screens in front of a fight: the mode picker, the campaign ladder, and
   the pre-match poster with its corners, kit pickers, preview strips and the
   entrance/exit animations that bookend it. */

/* ---------- mode picker / ladder ---------- */
/* Both are opaque on purpose. The ring is still being simulated behind them
   with nobody driving the fighters, and a man quietly folding onto the canvas
   is not what you want behind a menu.

   The ladder carries its opacity on its two children rather than on itself, the
   way the poster does: the locker's preview strip has to be a genuine hole for
   the canvas to show through it, and a background on the overlay would paint
   over the fighter standing in it. Between them the column and the card still
   cover the whole viewport, so nothing of the ring leaks out. */
#modeSelect{background:var(--dark)}
#campaign{flex-direction:row;background:transparent}
/* The shop carries its opacity the same way the ladder does, and for the same
   reason: its locker strip has to be a real hole for the canvas to show
   through, so the background lives on the two children instead. */
#shop{flex-direction:row;background:transparent}
#modeSelect.off,#campaign.off,#shop.off,#lineup.off{display:none}
.screen-main{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:clamp(16px,3vh,40px);padding:clamp(20px,5vh,70px) 20px;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(242,179,61,.09) 0%,transparent 58%),
    radial-gradient(120% 90% at 50% 0%,rgba(180,39,31,.10) 0%,transparent 64%),
    var(--dark);
}
.screen-kicker{
  margin:0;font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--amber);opacity:.75;
}
.screen-head h1{
  font-family:var(--display);font-size:clamp(38px,min(9vw,11vh),132px);line-height:.86;
  margin:6px 0 0;text-transform:uppercase;letter-spacing:.01em;color:var(--bone);
  text-shadow:0 4px 0 rgba(0,0,0,1), 0 0 34px rgba(242,179,61,.14);
  animation:titleGlow 3.4s ease-in-out infinite;
}
.screen-note{
  margin:0;max-width:48ch;font-size:14px;line-height:1.8;
  color:rgba(232,225,211,.55);
}

.screen-btns{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,2vh,22px);width:min(560px,86vw);
}
.big-btn{
  position:relative;overflow:hidden;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:clamp(12px,2.2vh,24px) clamp(18px,4vw,44px);
  border:2px solid rgba(232,225,211,.20);border-radius:2px;
  background:var(--dark2);color:var(--bone);
  transition:transform .12s,border-color .12s,background-color .12s,box-shadow .12s;
}
.bb-title{
  font-family:var(--display);font-size:clamp(26px,min(5.2vw,6.4vh),58px);line-height:1;
  text-transform:uppercase;letter-spacing:.06em;
}
.bb-sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(232,225,211,.40)}
/* A parked door has to be told twice.

   `hidden` is honoured by the browser's own stylesheet as `[hidden]{display:none}`,
   and an author rule beats the browser's whatever the specificity — so the
   `display:flex` two lines up quietly overrides it and a button marked hidden
   sits there in the menu looking pressable. Anything given the attribute needs
   this. See the spin room's door in index.html. */
.big-btn[hidden]{display:none}
.big-btn:hover{transform:translateY(-3px);border-color:var(--bone);background:rgba(232,225,211,.07)}
.big-btn:active{transform:translateY(1px)}
.big-btn.solo:hover{border-color:var(--blue);box-shadow:0 0 26px rgba(46,94,142,.40)}
.big-btn.lan:hover{border-color:var(--red);box-shadow:0 0 26px rgba(180,39,31,.45)}
/* The shop used to be dashed and dimmed because it went nowhere. It goes
   somewhere now, so it is a slab like the other two — amber rather than red or
   blue, because that is the colour money is in this game. It stays a size down
   on the other two: it is the side door, not the fight. */
.big-btn.shop{padding:clamp(9px,1.6vh,17px) clamp(18px,4vw,44px)}
.big-btn.shop .bb-title{font-size:clamp(20px,min(3.8vw,4.6vh),40px)}
.big-btn.shop:hover{border-color:var(--amber);box-shadow:0 0 26px rgba(242,179,61,.38)}
/* The weapons bout. A full-size door like the two fights above it, because
   that is what it is — steel rather than red or blue, since the corner colours
   are taken and the thing it is about is what is on the floor. */
.big-btn.weapons:hover{border-color:#9aa2a8;box-shadow:0 0 26px rgba(154,162,168,.38)}
/* The fighters switch. A dial rather than a door, so it says what it is set
   to instead of where it goes, and it sits a size down with the side rooms.
   Lit in bone while the real fighters are on, so the setting can be read off
   the menu without reading the words. */
.big-btn.switch{padding:clamp(9px,1.6vh,17px) clamp(18px,4vw,44px)}
.big-btn.switch .bb-title{font-size:clamp(20px,min(3.8vw,4.6vh),40px)}
.big-btn.switch[aria-pressed="true"]{border-color:rgba(232,225,211,.6);background:rgba(232,225,211,.05)}
.big-btn.switch[aria-pressed="true"] .bb-sub{color:rgba(232,225,211,.7)}

/* ---------- the mode picker, which outgrew a single column ---------- */
/*
  The note under the ladder below says the picker "is a title and two buttons
  and can afford to breathe". It was, and it did. It is now eight: three doors
  into a fight, three into a room, and two switches — and stacked full width at
  the old rhythm that came to 1012 px of buttons in a 720 px window, with the
  overlay clipping rather than scrolling. Sparring, Fighters and Blood were
  simply below the fold and unreachable, which is the bug.

  So the eight are grouped by what they actually are, and the grouping is what
  buys the room back. A door into a fight is the width of the screen because
  that is the decision you came here to make. A room is a third of it — there
  are three of them and they are errands, not fights. A switch is a half,
  because the pair of them is one decision about how the game looks and they
  read as a pair sitting side by side.

  Six columns is the smallest number that divides cleanly into thirds and
  halves, which is the whole reason for the count.
*/
#modeSelect .screen-main{
  gap:clamp(8px,1.6vh,28px);
  padding:clamp(10px,2vh,48px) 20px;
  /* The last line of defence. At some window this still will not fit — a short
     laptop, a phone on its side, a browser with three toolbars — and the one
     outcome that is not allowed is an option nobody can reach. */
  overflow-y:auto;
}
#modeSelect .screen-btns{
  display:grid;
  /* Ten, because the rooms went from four to five: it is the smallest count
     that divides into fifths for them and halves for the switches. The count is
     what keeps the rooms on one row — a sixth row of buttons is a row that does
     not fit a laptop with the console open, which is the whole subject of this
     block. */
  grid-template-columns:repeat(10,1fr);
  gap:clamp(8px,1.4vh,18px);
  width:min(640px,92vw);
}
#modeSelect .screen-btns > .big-btn{grid-column:span 10}
#modeSelect .screen-btns > .big-btn.room{
  grid-column:span 2;
  padding:clamp(8px,1.3vh,15px) clamp(4px,0.8vw,10px);
}
#modeSelect .screen-btns > .big-btn.switch{grid-column:span 5}
/* Each row is as tall as the wisest thing in it — Sparring's line runs to two
   and the others do not — so they are stretched to match rather than left
   sitting at three different heights next to each other. */
#modeSelect .screen-btns{align-items:stretch}
#modeSelect .screen-btns > .big-btn{justify-content:center}
/* A switch has half the width a full-width button had and the same words in
   it, so it takes a smaller size: at the old one "Fighters: Classic" broke
   across two lines and the pair stopped reading as a pair. */
#modeSelect .big-btn.switch .bb-title{font-size:clamp(16px,min(2.6vw,3.1vh),27px)}
#modeSelect .big-btn.switch .bb-sub{font-size:clamp(9px,1.2vh,12px)}
/* At a third of 620 px a room has about 190 px to say its name in, so the name
   is what it gets; the line underneath is a nicety and goes first. */
/* A fifth of 640 px is about 115 px to say a name in, so the ceiling comes down
   two points from the four-room layout's: at 19 px "The Bag Room" and "The
   Line-Up" both broke across two lines and the row of errands stopped reading
   as a row. */
#modeSelect .big-btn.room .bb-title{font-size:clamp(13px,min(2vw,2.5vh),17px)}
#modeSelect .big-btn.room .bb-sub{font-size:clamp(9px,1.2vh,12px);opacity:.75}
@media (max-width:560px),(max-height:620px){
  #modeSelect .big-btn.room .bb-sub{display:none}
}
/* A window this short is a laptop with the console open or a phone on its side.
   The title is the thing on this screen that is decoration rather than a choice,
   so it is what gives way — the alternative is eight options behind a scroll
   nobody knows is there, which is the complaint this whole block exists to
   answer. */
@media (max-height:460px){
  #modeSelect .screen-head h1{font-size:clamp(24px,7vh,44px)}
  #modeSelect .screen-kicker{display:none}
  #modeSelect .big-btn .bb-sub{display:none}
}
/* Refused out loud — the same shove a locked rung gives. Nothing on the mode
   picker uses this any more; the shop's GET button does. */
.big-btn.refused{animation:rungRefuse .3s cubic-bezier(.36,.07,.19,.97)}

/* ---------- the corner way out ---------- */
/* Top-left on every screen that has one, which is where every other piece of
   software puts it. It carries its own plate because on the poster it sits over
   the preview strip, and the thing behind it there is a moving fighter. */
.nav-back{
  position:absolute;left:clamp(10px,1.6vw,22px);top:clamp(10px,1.6vh,20px);z-index:3;
  display:flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border:1px solid rgba(232,225,211,.18);border-radius:2px;
  background:rgba(16,14,12,.78);color:#a2957f;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:transform .12s,border-color .12s,color .12s,background-color .12s;
}
.nav-arrow{
  width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .12s;
}
.nav-back:hover{border-color:var(--bone);color:var(--bone);background:rgba(232,225,211,.09);transform:translateX(-3px)}
.nav-back:hover .nav-arrow{transform:rotate(45deg) translate(2px,-2px)}
.nav-back:active{transform:translateX(0)}
.nav-back.committed{animation:btnCommit .42s cubic-bezier(.2,1.2,.35,1) forwards}
#campaign.arriving .nav-back,#poster.arriving .nav-back{animation:footUp .5s ease-out both .36s}
/* The same highlight that sweeps a kit chip when it is picked, running on a
   loop here so the eye is told there is something to press. */
.big-btn::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;left:-60%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-22deg);animation:bbSheen 4.6s ease-in-out infinite;
}
.big-btn.solo::after{animation-delay:.5s}
@keyframes bbSheen{0%{left:-60%}40%,100%{left:130%}}
/* Committing reuses the FIGHT button's kick, so every choice in the game lands
   with the same beat. */
.big-btn.committed{animation:btnCommit .42s cubic-bezier(.2,1.2,.35,1) forwards}
.big-btn.committed::after{animation:none;opacity:0}

#modeSelect.arriving .screen-head h1,
#shop.arriving .screen-head h1,
#campaign.arriving .screen-head h1{animation:titleSlam .8s cubic-bezier(.16,1.02,.3,1) both}
#modeSelect.arriving .screen-kicker,
#shop.arriving .screen-head .screen-kicker,
#campaign.arriving .screen-kicker{animation:footUp .5s ease-out both .1s}
#campaign.arriving .screen-note,
#shop.arriving .screen-note{animation:footUp .5s ease-out both .26s}
#shop.arriving .shelves{animation:footUp .5s ease-out both .18s}
/* The buttons are lifted in as a group rather than one at a time. Animating
   each .big-btn would win on specificity over .big-btn.committed and eat the
   kick of anything pressed inside the first second. */
#modeSelect.arriving .screen-btns,
#campaign.arriving .screen-btns{animation:footUp .5s ease-out both .3s}
#campaign.arriving .ladder{animation:footUp .5s ease-out both .18s}

/* ---------- the ladder ---------- */
/* The mode picker is a title and two buttons and can afford to breathe. This
   screen carries ten more rows than that, so it takes back the difference from
   its own gaps and padding rather than letting the bottom of the card fall off
   the window. */
#campaign .screen-main{
  gap:clamp(6px,1.25vh,22px);
  padding:clamp(8px,1.8vh,40px) 20px;
  position:relative;overflow:hidden;
}
/* The card is a narrow list down the middle of a wide screen, and the room
   either side of it was doing nothing. This is the wall of the venue behind it:
   a halftone print grid over a raked hatch, and two slow bars of gel light
   crossing it.

   Both layers are masked away from the centre, so the detail lives entirely in
   the space the ladder does not use and never competes with the ten rows for
   attention. Painted, not drawn — no element, no cost per frame beyond the two
   gradients the compositor already has. */
#campaign .screen-main > *{position:relative;z-index:1}
#campaign .screen-main::before,
#campaign .screen-main::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(74% 58% at 50% 50%,transparent 38%,#000 100%);
  mask-image:radial-gradient(74% 58% at 50% 50%,transparent 38%,#000 100%);
}
#campaign .screen-main::before{
  inset:0;
  background:
    radial-gradient(rgba(232,225,211,.10) 1px,transparent 1.6px),
    repeating-linear-gradient(64deg,rgba(232,225,211,.05) 0 2px,transparent 2px 11px);
  background-size:15px 15px,auto;
}
/* Oversized and drifting: the bars have to leave the frame at both ends of the
   travel or you see them stop. */
#campaign .screen-main::after{
  inset:-25% -35%;
  background:
    linear-gradient(102deg,transparent 16%,rgba(242,179,61,.075) 25%,transparent 33%),
    linear-gradient(102deg,transparent 58%,rgba(180,39,31,.085) 68%,transparent 76%);
  animation:campGel 26s ease-in-out infinite alternate;
}
@keyframes campGel{
  0%{transform:translateX(-6%)}
  100%{transform:translateX(6%)}
}
/* The title and the two buttons are scaled down here too. On the mode picker
   they are the whole screen and should be enormous; on this one the card is the
   screen, and a pair of slabs the size of the mode picker's is what pushes BACK
   off the bottom of a short laptop window. */
#campaign .screen-head h1{font-size:clamp(30px,min(7vw,8vh),96px)}
#campaign .big-btn{padding:clamp(7px,1.3vh,18px) clamp(18px,4vw,44px)}
#campaign .bb-title{font-size:clamp(22px,min(4.2vw,4.6vh),44px)}
/* Ten rows and both buttons have to be on screen at once without a scrollbar —
   the whole point of the card is that you can measure the climb in one look.
   Everything vertical is therefore in vh: each rung is a slice of the viewport
   rather than a fixed height, so the card shrinks with the window instead of
   spilling off the bottom of it. */
.ladder{
  width:min(720px,92vw);display:flex;flex-direction:column;gap:clamp(2px,.45vh,5px);
  border-top:1px solid rgba(232,225,211,.10);
  border-bottom:1px solid rgba(232,225,211,.10);
  padding:clamp(2px,.7vh,8px) 0;
}
.rung{
  display:flex;align-items:center;gap:clamp(8px,1.6vw,18px);
  width:100%;padding:clamp(3px,.85vh,9px) clamp(10px,2vw,18px);
  border:1px solid transparent;border-left:3px solid rgba(232,225,211,.12);
  border-radius:2px;background:var(--dark2);color:var(--bone);text-align:left;
  transition:transform .12s,border-color .12s,background-color .12s,opacity .12s;
}
.rung-n{
  flex:0 0 auto;font-family:var(--display);font-size:clamp(15px,1.9vh,22px);
  letter-spacing:.06em;color:rgba(232,225,211,.30);
}
.rung-who{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:10px}
.rung-name{
  font-family:var(--display);font-size:clamp(15px,2.1vh,25px);letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rung-tag{
  flex:0 1 auto;min-width:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(232,225,211,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Five pips always, so the row is a scale and not a bar chart with no axis. An
   unfilled pip is drawn faintly rather than skipped — that empty space is the
   part that tells you how much ladder is left above this man. */
.rung-pips{flex:0 0 auto;display:flex;gap:4px}
.rung-pips i{
  width:clamp(5px,.75vh,8px);height:clamp(5px,.75vh,8px);
  border:1px solid rgba(232,225,211,.22);border-radius:50%;background:transparent;
}
.rung-pips i.on{background:var(--amber);border-color:var(--amber)}
.rung-mark{
  flex:0 0 1.2em;text-align:right;font-size:clamp(12px,1.6vh,17px);color:var(--amber);
}

.rung:hover{border-color:rgba(232,225,211,.35);background:rgba(232,225,211,.06)}
.rung:active{transform:translateY(1px)}

/* Beaten: struck through and dimmed, but still legible. You are meant to be
   able to read your own record off the card. */
.rung.beaten{opacity:.45;border-left-color:var(--rope)}
.rung.beaten .rung-name{text-decoration:line-through;text-decoration-thickness:2px}
.rung.beaten .rung-pips i.on{background:var(--rope);border-color:var(--rope)}

/* The next man up is the one thing on this screen that moves. */
.rung.next{border-left-color:var(--amber)}
.rung.next .rung-name{color:var(--amber)}
.rung.next .rung-n{color:rgba(242,179,61,.55);animation:rungPulse 2.4s ease-in-out infinite}
@keyframes rungPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* Locked rows are deliberately flat: no hover lift, no colour. Nothing above
   the line you have reached is worth looking at yet. */
.rung.locked{opacity:.30;border-left-color:transparent;background:transparent}
.rung.locked .rung-name{color:rgba(232,225,211,.45);letter-spacing:.18em}
.rung.locked:hover{border-color:transparent;background:rgba(232,225,211,.03)}

/* Picked reads as selected rather than as pressed — the STEP IN button below is
   what actually commits, and this row has to keep saying so while you look at
   it. */
.rung.picked{border-color:var(--bone);background:rgba(232,225,211,.09);opacity:1}
.rung.picked .rung-n{color:var(--bone)}

/* A click on a locked row is refused out loud. A dead button reads as a broken
   one, so the row shoves back rather than doing nothing. */
.rung.refused{animation:rungRefuse .3s cubic-bezier(.36,.07,.19,.97)}
@keyframes rungRefuse{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  45%{transform:translateX(5px)}
  70%{transform:translateX(-3px)}
}

/* ---------- the ladder's locker column ---------- */
/* The preview on top, the picker under it. Both are sized in percentages of the
   column rather than in pixels: the ten rungs next door already own the height
   of this screen, and a fixed-height preview is what would push the picker off
   the bottom of a laptop window. */
/* Transparent, and deliberately so: an opaque column would paint behind the
   preview strip and there would be nothing to see through the hole. The strip
   is covered every frame by the scissored render, and the picker below carries
   its own background, so the column is still solid to look at. */
/* Wider and given over mostly to the fighter. This is the screen where a player
   is actually dressing himself — the ladder next door is ten rows of text — so
   the man gets the room and the chips get what is left. */
#campLocker{
  flex:0 0 clamp(268px,27vw,420px);min-width:0;display:flex;flex-direction:column;
  background:transparent;border-right:1px solid rgba(232,225,211,.10);
}
/* The picker is exactly seven closed rows tall now and never changes height,
   so it is sized to its content and the fighter simply takes whatever is left.
   On a tall window that is most of the column; on a short one the rows still
   all fit, which is the part a percentage split kept getting wrong. */
#campLocker .preview-strip{flex:1 1 auto;min-height:180px}
/* The caption is in the flow here rather than floating over the fighter. It
   still carries the same plate as the strip above it so the seam between the
   hole in the overlay and the picker below reads as one column. */
.prev-cap.solo{
  position:static;flex:0 0 auto;padding:10px 12px 12px;background:var(--dark);
  border-top:1px solid rgba(232,225,211,.10);
}
/* No scrollport here any more, and that is deliberate: the chips float over the
   rows below rather than pushing them, so seven closed rows is the whole height
   this column ever needs. A live scrolling box sat next to the hole in the
   overlay also cost the fighter the top two-thirds of himself in Chromium � the
   canvas behind simply stopped being painted above the scroller. */
#campLocker .kit{
  flex:0 0 auto;
  background:var(--dark);
  padding:clamp(10px,1.6vh,18px) clamp(10px,1.2vw,16px) clamp(12px,2vh,20px);
  gap:clamp(8px,1.2vh,14px);border-top:1px solid rgba(232,225,211,.10);
}
/* This column is a third the width of a poster corner, so the chips come down a
   size and the closed readout gives up its name when there is no room for it —
   the dot alone still says which colour is on him. */
#campLocker .kit-val{font-size:11px}
#campLocker .sw.color{width:24px;height:24px}
#campLocker .sw{padding:4px 9px;font-size:11px}
#campLocker .kit-row.open .swatches{max-height:32vh}

#campaign.arriving #campLocker{animation:cornerInL .55s cubic-bezier(.2,.8,.25,1) both .12s}

/* ---------- the gear shop ---------- */
/* Same two-column shape as the ladder — a man on the left, the thing you came
   for on the right — so the three menu screens feel like one building. The
   difference is what the right-hand column is: the ladder is ten rows you must
   see all of at once, and this is a storefront you walk along, so this one
   scrolls and that one never may. */
#shop .screen-main{
  gap:clamp(6px,1.2vh,20px);
  padding:clamp(8px,1.8vh,36px) clamp(14px,2.4vw,34px);
  justify-content:flex-start;position:relative;overflow:hidden;
}
#shop .screen-head h1{font-size:clamp(28px,min(6.4vw,7.4vh),88px)}
#shop .screen-note{margin-bottom:2px}
/* The tiles' item models, drawn by src/kit/thumbs.js. One canvas over the whole
   painted half, never interactive: the tiles underneath it are the buttons, and
   a canvas that swallowed a pointer would swallow the hover that dresses the
   fighter. It is sized by CSS and read back in JS, so the drawing buffer follows
   the layout rather than the other way round.

   It sits *above* the tiles rather than behind them, which is the whole trick:
   the tile is an opaque card, so a model drawn underneath one would be a model
   inside a box nobody can see into. Over the top, the canvas is transparent
   everywhere except the few hundred pixels where an item is, and the tile shows
   through around it. */
.thumbs{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:4;
}
#shop .screen-head,#shop .screen-note,#shop .shelves{position:relative;z-index:2}

/* The shelves are the one scrolling region in the project. Seven categories of
   up to thirteen tiles will not fit any window, and the alternative — folding
   categories away behind headers — is the locker room's picker, which is the
   thing this screen exists to not be.

   If the fighter in the column ever goes missing above this box, look here
   first: a live scroller beside the hole in the overlay is exactly what cost
   the ladder's locker its fighter in Chromium once already. That one was in the
   same column as the strip; this one is in the next column over, which is why
   it is allowed. */
.shelves{
  width:100%;max-width:1040px;min-height:0;flex:1 1 auto;
  overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:clamp(12px,2vh,26px);
  padding:clamp(6px,1.2vh,14px) clamp(4px,1vw,14px) clamp(14px,3vh,34px);
  border-top:1px solid rgba(232,225,211,.10);
  scrollbar-width:thin;scrollbar-color:var(--rope) transparent;
}
.shelves::-webkit-scrollbar{width:9px}
.shelves::-webkit-scrollbar-thumb{background:var(--rope);border-radius:0}
.shelves::-webkit-scrollbar-track{background:rgba(232,225,211,.05)}

.shelf{display:flex;flex-direction:column;gap:clamp(6px,1vh,12px)}
/* The section header is the mode picker's kicker, left-aligned and given a rule
   that runs out to the edge of the shelf — it reads as a shelf edge rather than
   as a heading floating over some boxes. */
.shelf-head{
  display:flex;align-items:center;gap:12px;text-align:left;
  color:var(--amber);opacity:.8;
}
.shelf-head::after{
  content:"";flex:1 1 auto;height:1px;background:rgba(232,225,211,.13);
}

.tiles{
  display:grid;gap:clamp(6px,.9vw,11px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(96px,10vw,132px),1fr));
}
/* A tile is a button, so the pixel dissolve comes for free. The skin is the
   rung's, not a new one: dark card, hairline border, brightens and lifts. */
.tile{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:clamp(8px,1.2vh,13px) 8px clamp(7px,1vh,11px);
  border:1px solid rgba(232,225,211,.12);border-radius:2px;
  background:var(--dark2);color:var(--bone);
  transition:transform .12s,border-color .12s,background-color .12s;
}
/* Hovering a tile is not decoration here — it is what puts the thing on the man
   in the column — so the lift is a shade stronger than the ladder's and the
   amber says which one he is wearing. */
.tile:hover{
  transform:translateY(-3px);border-color:var(--amber);
  background:rgba(242,179,61,.07);
}
.tile:active{transform:translateY(1px)}

/* The thumbnail box is empty on purpose. src/kit/thumbs.js draws the item's
   model into this rectangle from the canvas above — every item, including the
   three that are a colour and nothing else, because a turning glove says
   "glove" and a circle of paint says "colour". All this has to do is hold the
   space and sit a shade darker than the tile, so a pale item has something to
   be pale against. */
.tile-thumb{
  display:block;flex:0 0 auto;
  width:clamp(44px,4.6vw,60px);height:clamp(44px,4.6vw,60px);
  border-radius:2px;background:rgba(0,0,0,.30);
  box-shadow:inset 0 0 0 1px rgba(232,225,211,.09);
}
.tile:hover .tile-thumb{background:rgba(0,0,0,.40);box-shadow:inset 0 0 0 1px rgba(242,179,61,.28)}

/* Not enough money. A shove and a red edge, and nothing written anywhere — the
   same refusal a locked rung gives, in the colour the game uses for damage. The
   shake is the ladder's keyframe; only the glow is new, and it is on the tile
   rather than on the thumbnail so the whole card reads as rejecting the press. */
.tile.broke{
  animation:tileBroke .34s cubic-bezier(.36,.07,.19,.97);
  border-color:var(--red);
}
@keyframes tileBroke{
  0%,100%{transform:translateX(0);box-shadow:0 0 0 rgba(180,39,31,0)}
  15%{transform:translateX(-5px);box-shadow:0 0 22px rgba(180,39,31,.55)}
  40%{transform:translateX(4px);box-shadow:0 0 26px rgba(180,39,31,.62)}
  65%{transform:translateX(-3px);box-shadow:0 0 20px rgba(180,39,31,.45)}
  85%{transform:translateX(2px);box-shadow:0 0 12px rgba(180,39,31,.25)}
}
/* ---------- the holder's tile ---------- */

/* Not for sale at any price, so it is the one card on these shelves that is not
   the same as its neighbours at rest. Locked it is cold and half-lit: a cyan
   edge and a cyan word where the number goes, saying there is a condition
   rather than a cost. Unlocked it turns the light on — the same colour, at full
   strength, with the glow the mythic model in the thumbnail already has. */
.tile.holder{
  border-color:rgba(43,232,255,.30);
  background:linear-gradient(180deg,rgba(43,232,255,.05),transparent 70%),var(--dark2);
}
.tile.holder:hover{border-color:var(--glass);background:rgba(43,232,255,.09)}
.tile.holder .tile-thumb{box-shadow:inset 0 0 0 1px rgba(43,232,255,.18)}
.tile.holder:hover .tile-thumb{box-shadow:inset 0 0 0 1px rgba(43,232,255,.40)}
.tile.holder.on{
  border-color:var(--glass);
  box-shadow:0 0 18px rgba(43,232,255,.16),inset 0 0 22px rgba(43,232,255,.06);
}
.holder-price{
  color:var(--glass);opacity:.62;
  font-weight:600;
}
.tile.holder.on .holder-price{opacity:1}

/* The refusal, in the token's colour rather than the red one. A shelf has two
   different noes on it now and they mean opposite things — the red shake means
   go and earn some, and this one means earning some will not help. Colder and
   slower than tileBroke on purpose: a locked door rather than a slammed one. */
.tile.locked{
  animation:tileLocked .42s ease-out;
  border-color:var(--glass);
}
@keyframes tileLocked{
  0%{transform:scale(1);box-shadow:0 0 0 rgba(43,232,255,0)}
  22%{transform:scale(.965);box-shadow:0 0 30px rgba(43,232,255,.45)}
  55%{transform:scale(1.008);box-shadow:0 0 20px rgba(43,232,255,.26)}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(43,232,255,0)}
}

.tile-name{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;
  line-height:1.3;color:rgba(232,225,211,.82);
}
.tile-price{
  display:flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.1em;
  color:var(--amber);opacity:.85;
}

/* The coin. A small round span filled with the amber, the way .dot is a small
   round span filled with a kit colour — there is no image file in this project
   and this is not where one starts. */
.coin{
  flex:0 0 auto;display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--amber);box-shadow:inset -1px -1px 0 rgba(0,0,0,.35);
}

/* ---------- the shop's locker column ---------- */
/* The ladder's column, without the picker: there is nothing to pick here, the
   shelves next door are the picker. */
#shopLocker{
  flex:0 0 clamp(248px,24vw,380px);min-width:0;display:flex;flex-direction:column;
  background:transparent;border-right:1px solid rgba(232,225,211,.10);
}
#shopLocker .preview-strip{flex:1 1 auto;min-height:180px}
/* The wallet line, under the caption and carrying the same plate, so the bottom
   of the column reads as one piece. It is the only place on the screen that
   says the money is not real yet before you press anything. */
.shop-wallet{
  flex:0 0 auto;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:0 12px clamp(14px,2.4vh,22px);background:var(--dark);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(232,225,211,.38);
}
.shop-wallet i{font-style:normal}
#shop.arriving #shopLocker{animation:cornerInL .55s cubic-bezier(.2,.8,.25,1) both .12s}

/* ---------- poster / pre-match ---------- */
#poster{flex-direction:row;background:transparent;
  transition:opacity .45s ease, transform .45s ease}
#poster.gone{opacity:0;transform:scale(1.06);pointer-events:none}
.poster-main{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% 0%,#241d18 0%,var(--dark) 60%),
    var(--dark);
}

/* The two preview columns are holes in the overlay: the WebGL canvas behind
   is rendered straight into these rectangles, so the fighter you are dressing
   is the real thing, not a picture of one. Wider than they were — the
   fighter is the main event of this screen now that the wall of instruction
   text has gone. */
.preview-strip{
  flex:0 0 clamp(190px,22vw,360px);position:relative;pointer-events:none;
  background:transparent;overflow:hidden;
}
.preview-strip.red{border-right:1px solid #2a231d}
.preview-strip.blue{border-left:1px solid #2a231d}
.prev-cap{
  position:absolute;left:0;right:0;bottom:26px;text-align:center;
  font-family:var(--display);font-size:clamp(17px,1.7vw,24px);letter-spacing:.12em;text-transform:uppercase;
  color:#8d8171;text-shadow:0 2px 0 rgba(0,0,0,.8);
  transition:opacity .2s ease;
}
/* A caption that changes should read as a change, not a swap. */
.prev-cap.pop{animation:capPop .5s cubic-bezier(.16,1.05,.3,1)}
@keyframes capPop{
  0%{opacity:0;transform:translateY(9px) scale(.9);letter-spacing:.32em}
  55%{opacity:1;transform:translateY(0) scale(1.04)}
  100%{opacity:1;transform:none;letter-spacing:.12em}
}
/* Sat below the back button rather than beside it. The tag is centred in a
   column that narrows to 190px, and the button owns the top-left corner of both
   screens — at that width the two meet. Dropping both tags keeps the red and
   blue corners level with each other, which matters more than the 36px. */
.prev-tag{
  position:absolute;left:0;right:0;top:62px;text-align:center;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:#7b7061;
}
.preview-strip.red .prev-cap,#campLocker .prev-cap,#shopLocker .prev-cap{color:#c9584d}
.preview-strip.blue .prev-cap{color:#6c9cca}

.poster-head{text-align:center;padding:clamp(16px,4vh,56px) 16px clamp(6px,1.4vh,18px);flex:0 0 auto}
.poster-head h1{
  font-family:var(--display);font-size:clamp(46px,min(11vw,13vh),178px);line-height:.82;margin:0;
  letter-spacing:.01em;color:var(--bone);text-transform:uppercase;
  text-shadow:0 4px 0 #000, 0 0 34px rgba(242,179,61,.14);
}

.corners{flex:1 1 auto;display:flex;gap:0;min-height:0;align-items:center}
/* overflow is visible so an open row's chips can hang past the corner. They are
   a floating panel now rather than part of the column � see .swatches. */
.corner{
  flex:1 1 0;min-width:0;padding:clamp(12px,2vh,26px) clamp(14px,2.2vw,34px);
  display:flex;flex-direction:column;gap:clamp(10px,1.6vh,20px);
  align-self:stretch;justify-content:center;
}
.corner.red{border-top:3px solid var(--red);background:linear-gradient(180deg,rgba(180,39,31,.10),transparent 42%)}
.corner.blue{border-top:3px solid var(--blue);background:linear-gradient(180deg,rgba(46,94,142,.10),transparent 42%);text-align:right}
/* The blue corner is a mirror of the red one, so its rows read outward from the
   right-hand edge: caret, readout, label. */
.corner.blue .swatches{justify-content:flex-end}
.corner.blue .kit-head{flex-direction:row-reverse}
.corner.blue .kit-val{justify-content:flex-start}
.corner h2{
  font-family:var(--display);font-size:clamp(24px,min(3.6vw,4.4vh),44px);
  margin:0 0 4px;line-height:1;text-transform:uppercase;letter-spacing:.03em;
}
.corner.red h2{color:#e2685c}
.corner.blue h2{color:#79aede}
/* Sits under the header with real air around it — the label and the chips
   below it should never read as one crowded block. */
.corner .who{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8d8171;
  margin:0 0 clamp(4px,1.2vh,14px);
}

/* Seven slots of up to twelve options each is eighty-odd chips, and laid out
   flat that is a wall rather than a wardrobe. So each row is a closed header —
   slot, what he is wearing, a caret — and the chips are folded underneath it
   until the pointer arrives.

   The chips hang over the rows below rather than pushing them down, and that is
   the whole reason this picker behaves now. An in-flow panel moves every row
   under it by about a hundred pixels, so opening one row slides a different row
   under a cursor that has not moved � and those two take turns opening until
   you give up and leave. Nothing moves any more, so there is nothing to argue
   with. It is also what lets the ladder's copy stop being a scrolling column,
   which was costing the fighter next to it most of his body. */
.kit{display:flex;flex-direction:column;gap:clamp(6px,1vh,12px)}
.kit-row{
  position:relative;
  display:flex;flex-direction:column;
  border:1px solid rgba(232,225,211,.10);border-radius:2px;background:rgba(0,0,0,.22);
  transition:border-color .15s,background-color .15s;
}
.kit-head{
  display:flex;align-items:center;gap:clamp(8px,1vw,14px);
  padding:clamp(6px,.9vh,10px) clamp(9px,1vw,13px);cursor:pointer;
}
.kit-lbl{
  flex:0 0 auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#8d8171;line-height:1.2;
}
/* The readout for a closed row. Without it, hover-to-open turns a glance at the
   kit into a hunt through it. A colour shows its dot, everything else its name
   — the same rule the chips themselves follow. */
.kit-val{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;
  gap:7px;font-size:12px;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kit-val .dot{
  flex:0 0 auto;display:block;width:13px;height:13px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.7);
}
/* A chevron drawn from a rotated corner rather than a glyph, so it turns. */
.kit-caret{
  flex:0 0 auto;width:7px;height:7px;margin-bottom:3px;
  border-right:2px solid #6b5f50;border-bottom:2px solid #6b5f50;
  transform:rotate(45deg);transition:transform .18s ease,border-color .18s;
}
/* Open is a class, not `:hover`. src/ui/menu.js owns it, and the note above
   setOpen() there says why � between them, a row that opens because the layout
   moved under a still cursor, and a row that stays open because a swatch was
   clicked, were the two ways this picker misbehaved. The hover feedback on the
   header stays on :hover, because that one is just paint. */
.kit-row:hover{border-color:rgba(232,225,211,.20)}
.kit-row.open{border-color:rgba(232,225,211,.28);background:rgba(232,225,211,.05);z-index:7}
.kit-row.open .kit-caret{
  transform:rotate(225deg) translate(-2px,-2px);border-color:var(--bone);
}

/* Hung off the row rather than sitting inside the column. Opaque, because it
   now covers whatever is under it, and shadowed so it reads as being in front
   rather than as the row having grown. */
.swatches{
  position:absolute;top:calc(100% - 1px);left:-1px;right:-1px;z-index:6;
  display:flex;flex-wrap:wrap;gap:6px;min-width:0;
  max-height:0;opacity:0;overflow:hidden;padding:0 clamp(9px,1vw,13px);
  background:#15120f;border:1px solid transparent;border-top:none;
  border-radius:0 0 2px 2px;
  transition:max-height .22s ease,opacity .18s ease,padding .22s ease;
}
/* Dropped upward instead, for a row with no room under it. src/ui/menu.js
   measures and sets this as it opens: the bottom slots of a locker column
   always need it, and how many of them depends on the window. */
.kit-row.up .swatches{
  top:auto;bottom:calc(100% - 1px);
  border-top:1px solid transparent;border-bottom:none;border-radius:2px 2px 0 0;
}
.kit-row.open .swatches{
  max-height:46vh;opacity:1;padding-bottom:clamp(8px,1.1vh,12px);
  border-color:rgba(232,225,211,.28);
  box-shadow:0 16px 30px rgba(0,0,0,.6);
}
.kit-row.open.up .swatches{
  padding-top:clamp(8px,1.1vh,12px);padding-bottom:0;
  box-shadow:0 -16px 30px rgba(0,0,0,.6);
}

.sw{
  border:1px solid #3a332c;border-radius:2px;padding:5px 11px;font-size:12px;color:#cdc2b0;
  background:#191512;position:relative;overflow:hidden;
  transition:border-color .12s,color .12s,background-color .12s,transform .12s;
}
/* A colour is its own label. The name shows up on the fighter's caption when
   you pick it, so printing it next to the dot as well was just noise. */
.sw.color{
  padding:0;width:clamp(24px,2.2vw,30px);height:clamp(24px,2.2vw,30px);border-radius:50%;
  border-width:2px;border-color:#3a332c;background:transparent;
}
.sw.color .dot{
  display:block;width:100%;height:100%;margin:0;border-radius:50%;border:none;
}
.sw:hover{border-color:#6b5f50;color:var(--bone);transform:translateY(-2px)}
.sw.color:hover{border-color:#9d8f7c}
.sw[aria-pressed="true"]{border-color:var(--bone);color:var(--dark);background:var(--bone)}
.sw.color[aria-pressed="true"]{
  background:transparent;border-color:var(--bone);
  box-shadow:0 0 0 2px rgba(16,14,12,.9), 0 0 0 4px var(--bone), 0 0 14px rgba(242,179,61,.4);
}
/* A selection should land, not fade. The chip kicks, and a highlight sweeps
   across it once — the same beat a fighting game gives a character pick. */
.sw.picked{animation:swPick .34s cubic-bezier(.2,1.3,.4,1)}
@keyframes swPick{0%{transform:scale(1)}38%{transform:scale(1.16)}100%{transform:scale(1)}}
.sw::after{
  content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-22deg);opacity:0;pointer-events:none;
}
.sw.picked::after{animation:swSheen .45s ease-out}
@keyframes swSheen{0%{left:-60%;opacity:.9}100%{left:120%;opacity:0}}

.poster-foot{flex:0 0 auto;padding:clamp(14px,3vh,38px) 16px clamp(18px,3.8vh,46px);text-align:center;border-top:1px solid #241f1a;background:rgba(0,0,0,.25)}
#fightBtn{
  font-family:var(--display);font-size:clamp(32px,min(6.5vw,8vh),80px);text-transform:uppercase;letter-spacing:.08em;
  background:var(--red);color:var(--bone);padding:.14em 1.1em .2em;border-radius:2px;line-height:1;
  box-shadow:0 6px 0 #6d1611;transition:transform .1s,box-shadow .1s;
}
#fightBtn:hover{transform:translateY(3px);box-shadow:0 3px 0 #6d1611}
#fightBtn:active{transform:translateY(6px);box-shadow:0 0 0 #6d1611}
/* Pressing it should feel like the bell going. */
#fightBtn.committed{animation:btnCommit .42s cubic-bezier(.2,1.2,.35,1) forwards}
@keyframes btnCommit{
  0%{transform:translateY(6px) scale(1)}
  35%{transform:translateY(0) scale(1.14);background:var(--amber);color:var(--dark)}
  100%{transform:translateY(0) scale(1);background:var(--amber);color:var(--dark)}
}

/* Leaving the menu should feel like being thrown into the ring: the poster
   rushes at the camera and blurs out rather than politely fading. */
#poster.launching{animation:posterLaunch .5s cubic-bezier(.45,0,.75,.2) forwards}
@keyframes posterLaunch{
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{opacity:0;transform:scale(1.35);filter:blur(14px)}
}

/* ---------- menu entrance ---------- */
#poster.arriving .poster-head h1{animation:titleSlam .8s cubic-bezier(.16,1.02,.3,1) both}
#poster.arriving .corner.red{animation:cornerInL .55s cubic-bezier(.2,.8,.25,1) both .12s}
#poster.arriving .corner.blue{animation:cornerInR .55s cubic-bezier(.2,.8,.25,1) both .12s}
#poster.arriving .poster-foot{animation:footUp .5s ease-out both .3s}
@keyframes titleSlam{
  0%{opacity:0;transform:scale(2.6) rotate(-6deg);filter:blur(7px)}
  70%{opacity:1;transform:scale(.97) rotate(0);filter:blur(0)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes cornerInL{0%{opacity:0;transform:translateX(-9vw) skewX(6deg)}100%{opacity:1;transform:none}}
@keyframes cornerInR{0%{opacity:0;transform:translateX(9vw) skewX(-6deg)}100%{opacity:1;transform:none}}
@keyframes footUp{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:none}}

/* The title keeps a slow pulse once it has landed, and the FIGHT button
   breathes so the eye knows where to go. */
.poster-head h1{animation:titleGlow 3.4s ease-in-out infinite}
@keyframes titleGlow{
  0%,100%{text-shadow:0 3px 0 #000,0 0 34px rgba(242,179,61,.14)}
  50%{text-shadow:0 3px 0 #000,0 0 60px rgba(242,179,61,.45)}
}
#fightBtn{animation:btnPulse 1.5s ease-in-out infinite}
@keyframes btnPulse{
  0%,100%{box-shadow:0 4px 0 #6d1611, 0 0 0 rgba(242,179,61,0)}
  50%{box-shadow:0 4px 0 #6d1611, 0 0 26px rgba(242,179,61,.45)}
}
#fightBtn:hover,#fightBtn:active{animation:none}

/* ---------- the wallet badge ---------- */
/* Top-right on the three screens where money means something, mirroring the
   .nav-back plate in the opposite corner so the two read as a pair of chrome
   rather than as two unrelated boxes. It carries its own plate for the same
   reason that one does: on the shop it sits over a column with a moving
   fighter in it.

   It is off by default and match.js turns it on per screen — during a fight
   there is nothing to spend money on and a balance in the corner would be one
   more thing on a HUD that has deliberately almost nothing on it. */
#wallet{
  position:fixed;right:clamp(10px,1.6vw,22px);top:clamp(10px,1.6vh,20px);z-index:24;
  display:none;align-items:center;gap:8px;
  padding:7px 14px;border:1px solid rgba(242,179,61,.28);border-radius:2px;
  background:rgba(16,14,12,.80);
  font-family:var(--display);font-size:19px;letter-spacing:.06em;color:var(--coin);
  pointer-events:none;
}
#wallet.on{display:flex}
#wallet i{font-style:normal}
#wallet .coin{width:11px;height:11px}
/* The balance kicks when it changes — a purchase, or a purse landing. It is the
   same pop the purse total uses, because they are the same event seen from two
   places. */
#wallet.bump{animation:pursePop .42s cubic-bezier(.2,1.3,.4,1)}
/* Refused: the shove a locked rung gives, so "you cannot afford that" is the
   same gesture everywhere in the game. */
#wallet.short{animation:rungRefuse .3s cubic-bezier(.36,.07,.19,.97)}

/* The shop's own copy, in the locker column under the caption. Same animations,
   because it is the same number. */
/* The class lands on the figure itself rather than on the paragraph, because
   that is the element src/ui/purse.js holds a handle to — dom.js exports the
   thing with the id on it, and the id is on the number. */
.shop-wallet i{
  color:var(--coin);font-family:var(--display);font-size:16px;letter-spacing:.05em;
  display:inline-block;
}
#shopWallet.bump{animation:pursePop .42s cubic-bezier(.2,1.3,.4,1)}
#shopWallet.short{animation:rungRefuse .3s cubic-bezier(.36,.07,.19,.97)}

/* A chip for something he does not own is not in the wardrobe. Hidden rather
   than dimmed: the shop next door is where you look at things you have not
   bought, and a locker room full of greyed-out chips would be a worse copy of
   it. See syncOwned in src/ui/menu.js for the one exception — whatever he is
   currently wearing is always shown, owned or not. */
.sw.unowned{display:none}


/* ---------- the controls screen ---------- */
/* Two columns that scroll on their own. The list is twenty rows per corner and
   there is no arrangement of twenty rows that fits a short laptop, so the one
   thing it must do is scroll rather than clip — the same rule the mode picker
   is now held to. */
/* Hidden when it is off. `.off` carries no display rule of its own — each
   overlay names itself in the list above — and a screen that forgets to say so
   is a screen that sits over the fight, empty, for the rest of the session. */
#controlsScreen.off{display:none}
#controlsScreen .screen-main{gap:clamp(6px,1.2vh,18px);padding:clamp(10px,2vh,36px) 20px;overflow:hidden}
.ctl-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,28px);
  width:min(900px,94vw);min-height:0;flex:1 1 auto;
}
.ctl-col{overflow-y:auto;min-height:0;padding-right:4px;text-align:left}
.ctl-head{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid rgba(232,225,211,.18);padding-bottom:4px;margin-bottom:6px}
.ctl-head b{font-family:var(--display);font-size:20px;letter-spacing:.04em;color:var(--bone)}
.ctl-pad{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);opacity:.8}
.ctl-presets{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.ctl-preset{
  font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 7px;border:1px solid rgba(232,225,211,.22);background:var(--dark2);color:var(--bone);
}
.ctl-preset:hover{border-color:var(--amber);color:var(--amber)}
.ctl-group{
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);
  opacity:.7;margin:9px 0 3px;
}
.ctl-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:5px 7px;border:1px solid transparent;background:rgba(232,225,211,.03);
  color:var(--bone);font-family:var(--ui);font-size:12px;margin-bottom:2px;text-align:left;
}
.ctl-row:hover{border-color:rgba(232,225,211,.3);background:rgba(232,225,211,.07)}
.ctl-row.listening{border-color:var(--amber);background:rgba(242,179,61,.12)}
.ctl-row.listening .ctl-label{color:var(--amber)}
.ctl-keys{display:flex;gap:3px;flex:0 0 auto}
.ctl-keys kbd{
  font-family:var(--ui);font-size:10px;padding:2px 5px;border:1px solid rgba(232,225,211,.3);
  border-radius:2px;background:var(--dark);color:var(--bone);white-space:nowrap;
}
.ctl-keys kbd.none{opacity:.4;border-style:dashed}
.ctl-note{margin:0;font-size:11px;letter-spacing:.08em;color:rgba(232,225,211,.7);min-height:1.2em}
.ctl-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(460px,88vw)}
.ctl-foot .big-btn{padding:clamp(7px,1.1vh,12px) 10px}
.ctl-foot .bb-title{font-size:clamp(14px,2vh,20px)}


/* ---------- the line-up ---------- */
/*
  The one screen in the game with no background anywhere on it.

  Every tile's middle is a hole for the fight canvas, which src/ui/lineup.js
  clears to var(--dark) and then scissors each figure into — so the flat colour
  behind the whole screen is the canvas doing the panel's job, and anything
  painted here would paint over a man. That is why .lu-main drops the gradient
  .screen-main carries and why a tile is a border with nothing inside it.

  Hidden when it is off in the list at the top of this file, with the rest of
  the overlays. An overlay that forgets to say so is a screen that sits over the
  fight, empty, for the rest of the session.
*/
#lineup{background:transparent}
#lineup .screen-main{
  background:none;
  gap:clamp(6px,1.2vh,16px);padding:clamp(10px,2vh,32px) 20px;overflow:hidden;
}
/* Which corner the picks are landing in. Two people share this keyboard, so it
   is a pair of buttons rather than a note about player one. */
.lu-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.lu-who-lbl{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(232,225,211,.5)}
.lu-corner{
  font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border:1px solid rgba(232,225,211,.22);background:var(--dark2);color:rgba(232,225,211,.65);
}
.lu-corner:hover{color:var(--bone)}
.lu-corner.red[aria-pressed="true"]{border-color:#c9584d;color:#c9584d;background:rgba(180,39,31,.14)}
.lu-corner.blue[aria-pressed="true"]{border-color:#6c9cca;color:#6c9cca;background:rgba(46,94,142,.16)}

/* Six men, and as many across as the window will take. min-height:0 with the
   overflow is the pair that lets the wall scroll on a short screen instead of
   pushing the DONE button off the bottom of it. */
.lu-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(92px,13vw,186px),1fr));
  gap:clamp(6px,1vw,14px);
  width:min(1180px,94vw);min-height:0;flex:0 1 auto;overflow-y:auto;
}
.lu-tile{
  position:relative;aspect-ratio:3/4;padding:0;
  border:1px solid rgba(232,225,211,.16);border-radius:2px;
  background:none;                       /* a hole. see the note above */
  transition:border-color .12s,transform .12s;
}
.lu-tile:hover{transform:translateY(-2px);border-color:rgba(232,225,211,.5)}
.lu-tile.chosen{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.lu-stage{position:absolute;inset:0;pointer-events:none}
/* The name sits over his boots, the way a preview caption does. */
.lu-name{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;pointer-events:none;
  font-family:var(--display);font-size:clamp(12px,1.25vw,17px);letter-spacing:.1em;
  text-transform:uppercase;color:#a2957f;text-shadow:0 2px 0 rgba(0,0,0,.9);
}
.lu-tile.chosen .lu-name{color:var(--amber)}
/* What is still on its way. Empty once he is standing there — see paintTiles. */
.lu-load{
  position:absolute;left:0;right:0;top:46%;text-align:center;pointer-events:none;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(232,225,211,.34);
}
/* Who is actually in each corner, which on the ladder is not always who the
   player picked — the card puts its own man in the blue one. */
.lu-badge{position:absolute;left:4px;top:4px;display:flex;gap:3px;pointer-events:none}
.lu-pip{
  font-style:normal;font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 5px;border-radius:2px;color:#0d0b0a;
}
.lu-pip.red{background:#c9584d}
.lu-pip.blue{background:#6c9cca}

.lu-note{margin:0;font-size:11px;letter-spacing:.08em;color:rgba(232,225,211,.7);min-height:1.2em}
.lu-foot{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;width:min(640px,92vw)}
.lu-foot .big-btn{padding:clamp(7px,1.1vh,12px) 10px}
.lu-foot .bb-title{font-size:clamp(13px,1.9vh,19px)}
.lu-foot .big-btn[aria-pressed="true"]{border-color:var(--amber);color:var(--amber)}
/* The feel dial, above the bindings. */
.ctl-feel{width:min(900px,94vw);text-align:left}
.ctl-feel label{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ctl-feel label b{font-family:var(--display);font-size:17px;letter-spacing:.04em;color:var(--bone)}
.ctl-feel label span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.ctl-feel input[type=range]{width:100%;margin:5px 0 2px;accent-color:var(--amber)}
.ctl-feelnote{margin:0;font-size:10px;letter-spacing:.06em;color:rgba(232,225,211,.55)}