/* Title menu, mode choice, setup, lobby and sheets.
   Structure after Slay the Spire and Balatro: few large entries, chunky
   colour-coded buttons, ‹ value › cycles, back bottom-left, confirm bottom-right.
   Colours stay low in saturation so the screen is calm to look at. */
.game-app{
  --menu-text:#ece4d2;--menu-muted:#a9aea6;--menu-faint:#7b847e;
  --menu-panel:rgba(14,21,23,.82);--menu-panel-hover:rgba(24,34,36,.9);
  --menu-line:rgba(236,228,210,.14);--menu-line-strong:rgba(236,228,210,.28);
  --menu-gold:#c9a25a;--menu-gold-shadow:#7c5d27;--menu-gold-ink:#1d160b;
  --menu-teal:#3f7d76;--menu-teal-shadow:#244c48;
  --menu-copper:#a65b45;--menu-copper-shadow:#663426;
  --menu-slate:#56636d;--menu-slate-shadow:#333c44;
  --menu-light-ink:#f3eee4;--menu-focus:#f0d595;
  --menu-pixel:var(--pixel-font,AuctionPixel),"MiSans","PingFang SC","Microsoft YaHei",sans-serif;
  --menu-sans:"MiSans","PingFang SC","Microsoft YaHei",sans-serif;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The menu owns the whole screen: no top bar, a dimmed entrance behind it. */
.game-app:is(:has(#setup:not([hidden])),:has(#online-lobby:not([hidden]))) .topbar{display:none}
.game-app[data-theme]:is(:has(#setup:not([hidden])),:has(#online-lobby:not([hidden])))::after{background:rgba(10,15,17,.78)}
.game-app[data-theme][data-menu=title]:has(#setup:not([hidden]))::after{background:radial-gradient(ellipse 70% 60% at 50% 38%,rgba(10,15,17,.2),rgba(10,15,17,.72) 70%),linear-gradient(180deg,transparent 55%,rgba(10,15,17,.85))}

.menu{position:relative;flex:1;width:100%;min-height:0;display:flex;color:var(--menu-text);font-family:var(--menu-sans);font-size:15px;line-height:1.5}
.menu-screen{position:relative;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:18px;padding:6px 0 4px}
.menu-screen[data-enter=forward]{animation:menu-in .22s ease-out}
.menu-screen[data-enter=back]{animation:menu-back .22s ease-out}
@keyframes menu-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes menu-back{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
#valuation-app .menu :focus-visible,#valuation-app .sheet :focus-visible{outline:3px solid var(--menu-focus);outline-offset:3px}

.menu-head{display:flex;flex-direction:column;gap:2px}
.menu-head h2{margin:0;font-family:var(--menu-pixel);font-weight:400;font-size:30px;line-height:1.15;letter-spacing:.06em;color:var(--menu-text);text-shadow:0 3px 0 rgba(0,0,0,.45)}
.menu-hint{margin:0;color:var(--menu-muted);font-size:14px}
.menu-status{margin:0;text-align:center;color:var(--menu-muted);font-size:15px}
.menu-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:8px}
.menu-foot>:last-child:not(:first-child){margin-left:auto}

/* Goal seal: the chosen goal's name and slogan, stamped beside the setup title. */
.setup-head{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px}
/* Both goals share one seal: same size, same tilt, same two-line slogan box; only the ink colour differs. */
.goal-seal{--seal:var(--menu-gold);--seal-width:210px;flex:none;box-sizing:border-box;width:var(--seal-width);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 14px 9px;border:2px solid var(--seal);border-radius:10px;box-shadow:inset 0 0 0 3px rgba(10,15,17,.85),inset 0 0 0 4px color-mix(in srgb,var(--seal) 55%,transparent);background:rgba(10,15,17,.55);color:var(--seal);text-align:center;transform:rotate(-2.5deg)}
.goal-seal[data-goal=lowest]{--seal:#c98a6f}
.goal-seal b{font-family:var(--menu-pixel);font-weight:400;font-size:24px;line-height:1.1;letter-spacing:.12em}
.goal-seal span{display:flex;align-items:center;justify-content:center;min-height:calc(2 * 1.35em);font-size:12px;letter-spacing:.06em;text-wrap:balance;color:color-mix(in srgb,var(--seal) 70%,var(--menu-text));line-height:1.35}
.setup-head .menu-hint{text-wrap:pretty}
.goal-seal.stamped{animation:seal-stamp .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes seal-stamp{0%{opacity:0;transform:scale(1.5) rotate(-8deg)}70%{opacity:1;transform:scale(.94) rotate(-2.5deg)}100%{transform:rotate(-2.5deg)}}

/* Chunky buttons: each colour means one thing — gold goes forward, copper goes back. */
#valuation-app .chunky{--bg:var(--menu-slate);--shadow:var(--menu-slate-shadow);--ink:var(--menu-light-ink);
  position:relative;min-height:52px;padding:0 22px;border:0;border-radius:10px;background:var(--bg);color:var(--ink);
  font-family:var(--menu-pixel);font-size:20px;font-weight:400;letter-spacing:.06em;text-indent:0;text-shadow:0 2px 0 rgba(0,0,0,.25);
  outline:none;box-shadow:0 5px 0 var(--shadow),0 9px 18px rgba(0,0,0,.28);transform:none;transition:transform .08s,box-shadow .08s,filter .15s;cursor:pointer}
#valuation-app .chunky.gold{--bg:var(--menu-gold);--shadow:var(--menu-gold-shadow);--ink:var(--menu-gold-ink);text-shadow:0 1px 0 rgba(255,240,200,.35)}
#valuation-app .chunky.teal{--bg:var(--menu-teal);--shadow:var(--menu-teal-shadow)}
#valuation-app .chunky.copper{--bg:var(--menu-copper);--shadow:var(--menu-copper-shadow)}
#valuation-app .chunky.slate{--bg:var(--menu-slate);--shadow:var(--menu-slate-shadow)}
#valuation-app .chunky.big{min-height:64px;padding:0 34px;font-size:26px}
#valuation-app .chunky.small{min-height:34px;padding:0 12px;font-size:15px;box-shadow:0 3px 0 var(--shadow)}
#valuation-app .chunky:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 0 var(--shadow),0 11px 20px rgba(0,0,0,.3)}
#valuation-app .chunky:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--shadow),0 3px 8px rgba(0,0,0,.25)}
#valuation-app .chunky:disabled{filter:grayscale(.55) brightness(.72);cursor:default}
#valuation-app .chunky:focus-visible{outline:3px solid var(--menu-focus);outline-offset:4px}

/* Title: logo and a floating coffer in the middle, the menu along the bottom. */
.title-screen{align-items:center}
.title-stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
#valuation-app .title-chest{padding:0;border:0;background:none;cursor:pointer;line-height:0}
.title-chest img{width:clamp(110px,20vh,210px);height:auto;image-rendering:pixelated;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));animation:chest-float 4.5s ease-in-out infinite}
.title-chest[data-open=true] img{animation:chest-pop .35s ease-out}
@keyframes chest-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes chest-pop{0%{transform:scale(1)}40%{transform:scale(1.12,.9)}100%{transform:scale(1)}}
.menu-logo{margin:4px 0 0;font-family:var(--menu-pixel);font-weight:400;font-size:clamp(52px,10vw,104px);line-height:1;letter-spacing:.08em;color:#f3e4bf;text-shadow:0 5px 0 #3b2a12,0 0 30px rgba(228,183,91,.22)}
.menu-tagline{margin:0;color:var(--menu-muted);font-size:clamp(14px,1.6vw,17px);letter-spacing:.1em}
/* Two tiers, like Balatro's title: big coloured buttons to play, a quieter row of
   panel tiles to look things up. The collector's badge waits in the top-left corner. */
.title-menu{width:min(560px,100%);display:flex;flex-direction:column;align-items:stretch;gap:14px;padding-bottom:10px}
.title-primary{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px}
.title-primary .chunky{min-width:0}
#valuation-app .title-event{display:flex;align-items:center;justify-content:center;text-decoration:none}
/* A sticker on the corner marks the new mode, the way Balatro tags new cards. */
.title-tag{position:absolute;top:-9px;right:-6px;padding:1px 8px;border-radius:6px;background:var(--menu-light-ink);color:var(--menu-teal-shadow);font-family:var(--menu-sans);font-size:11px;font-weight:700;letter-spacing:.1em;line-height:18px;text-shadow:none;box-shadow:0 2px 0 rgba(0,0,0,.35);transform:rotate(4deg);pointer-events:none}
.title-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#valuation-app .title-tile{min-width:0;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;border:1px solid var(--menu-line);border-radius:12px;background:var(--menu-panel);color:var(--menu-text);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
#valuation-app .title-tile:hover{transform:translateY(-2px);border-color:var(--menu-gold);background:var(--menu-panel-hover)}
#valuation-app .title-tile:active{transform:translateY(1px)}
.title-tile>span:last-child{white-space:nowrap}
.title-tile-icon{flex:none;width:34px;height:34px;object-fit:contain}
svg.title-tile-icon{width:24px;height:24px;fill:none;stroke:var(--menu-muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.title-tile-faces{display:flex;flex:none}
.title-tile-faces .npc-face{--face-box:24px;border:1px solid var(--menu-panel);border-radius:6px;background:#d9cdb0}
.title-tile-faces .npc-face+.npc-face{margin-left:-8px}
.game-app[data-motion=reduced] .title-tile{transition:none}
#valuation-app .profile-badge{position:absolute;left:0;top:4px;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid var(--menu-line);border-radius:12px;background:var(--menu-panel);color:var(--menu-text);font:inherit;text-align:left;cursor:pointer}
#valuation-app .profile-badge:hover{border-color:var(--menu-line-strong);background:var(--menu-panel-hover)}
.badge-paddle{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--menu-gold);color:var(--menu-gold-ink);font-family:var(--menu-pixel);font-size:14px;box-shadow:0 3px 0 var(--menu-gold-shadow)}
.badge-text{display:flex;flex-direction:column;line-height:1.2}
.badge-text b{font-size:14px;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge-text small{font-size:11px;color:var(--menu-muted)}

/* Mode choice: three tall panels, lifted on hover like Slay the Spire's. */
.mode-panels{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,290px));gap:24px;justify-content:center;align-content:center}
#valuation-app .mode-panel{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:330px;padding:26px 20px 22px;border:2px solid var(--menu-line);border-radius:16px;background:var(--menu-panel);color:var(--menu-text);font:inherit;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
#valuation-app .mode-panel:hover,#valuation-app .mode-panel:focus-visible{transform:translateY(-8px);border-color:var(--menu-gold);box-shadow:0 0 0 2px rgba(201,162,90,.25),0 20px 34px rgba(0,0,0,.4)}
.mode-panel b{font-family:var(--menu-pixel);font-weight:400;font-size:28px;letter-spacing:.06em}
.mode-panel span{color:var(--menu-muted);font-size:15px}
.mode-panel small{margin-top:auto;padding:3px 10px;border-radius:999px;background:rgba(236,228,210,.08);color:var(--menu-muted);font-size:12px}
.mode-art{width:min(168px,66%);height:auto;aspect-ratio:1;margin:0 0 6px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));transition:transform .15s}
#valuation-app .mode-panel:hover .mode-art,#valuation-app .mode-panel:focus-visible .mode-art{transform:scale(1.06) rotate(-2deg)}

/* Setup: the paddles in the middle, options below, cycled in place. */
/* Auto margins centre the content when it fits; when it is taller it scrolls
   from the top instead of being clipped (which justify-content:center does). */
.setup-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:20px;overflow-y:auto;overscroll-behavior:contain;padding:8px 2px}
.setup-body>:first-child{margin-top:auto}.setup-body>:last-child{margin-bottom:auto}
.paddles{list-style:none;margin:0;padding:12px 0 0;display:flex;justify-content:center;gap:18px}
.paddle{position:relative;width:168px;min-height:206px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 12px 12px;border:2px solid var(--menu-line);border-radius:16px;background:var(--menu-panel);text-align:center}
.paddle.you{border-color:rgba(201,162,90,.7)}
.paddle-num{position:absolute;top:8px;left:12px;font-family:var(--menu-pixel);font-size:13px;color:var(--menu-faint)}
.paddle.you .paddle-num{color:var(--menu-gold)}
.paddle-icon{width:58px;height:58px;margin:4px 0 6px;fill:var(--menu-slate);filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.paddle.you .paddle-icon{fill:var(--menu-gold)}
.paddle.ai .paddle-icon{fill:#8d9ba6}
.paddle:is(.local,.friend) .paddle-icon{fill:#6fa79f}
.paddle.open .paddle-icon{fill:none;stroke:var(--menu-line-strong);stroke-width:.6;stroke-dasharray:1.2 1}
.paddle.open{border-style:dashed;background:rgba(14,21,23,.55)}
.paddle-name{font-size:18px;font-weight:600;line-height:1.2}
.paddle-sub{font-size:12px;color:var(--menu-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paddle-status{font-size:12px;color:var(--menu-gold)}
.paddle.open .paddle-status{color:var(--menu-muted)}
.paddle-cycle{width:100%;margin-top:auto;padding-top:8px}
#valuation-app .paddle-remove{position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--menu-faint);font-size:20px;line-height:1;cursor:pointer}
#valuation-app .paddle-remove:hover:not(:disabled){background:rgba(236,228,210,.1);color:var(--menu-text)}
.paddle.add{padding:0;border:0;background:none}
#valuation-app .paddle-add{width:100%;height:100%;min-height:206px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed var(--menu-line-strong);border-radius:16px;background:rgba(14,21,23,.4);color:var(--menu-muted);font:inherit;cursor:pointer}
#valuation-app .paddle-add:hover:not(:disabled){color:var(--menu-text);border-color:var(--menu-gold);background:var(--menu-panel)}
.paddle-plus{font-family:var(--menu-pixel);font-size:34px;line-height:1}

.setup-rules{width:100%;max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rule{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;border:1px solid var(--menu-line);border-radius:12px;background:var(--menu-panel);min-width:0}
.rule-label{font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--menu-muted)}
.rule-hint{font-size:11px;color:var(--menu-faint);text-align:center}
#valuation-app .rule-button{width:100%;max-width:240px;min-height:36px;border:1px solid var(--menu-line-strong);border-radius:8px;background:rgba(236,228,210,.05);color:var(--menu-text);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
#valuation-app .rule-button:hover:not(:disabled){border-color:var(--menu-gold)}

/* ‹ value › cycle: red-brown arrows, the value and a row of position dots. */
.cycle{width:100%;max-width:240px;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:6px}
#valuation-app .cycle-arrow{height:34px;min-width:0;min-height:0;padding:0;border:0;border-radius:8px;background:var(--menu-copper);color:var(--menu-light-ink);font-family:var(--menu-pixel);font-size:20px;line-height:1;box-shadow:0 3px 0 var(--menu-copper-shadow);cursor:pointer;transition:transform .06s,box-shadow .06s}
#valuation-app .cycle-arrow:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--menu-copper-shadow)}
#valuation-app .cycle-arrow:disabled{opacity:.35;cursor:default}
.cycle-body{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.cycle-value{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cycle-dots{display:flex;gap:4px}
.cycle-dots i{width:6px;height:6px;border-radius:2px;background:rgba(236,228,210,.2)}
.cycle-dots i.on{background:var(--menu-gold)}

/* Tabs, Balatro style: the chosen tab is the gold one. */
.menu-tabs{display:flex;justify-content:center;gap:10px}
#valuation-app .menu-tabs [role=tab]{min-height:40px;padding:0 22px;border:0;border-radius:10px;background:var(--menu-slate);color:var(--menu-light-ink);font-family:var(--menu-pixel);font-size:17px;box-shadow:0 4px 0 var(--menu-slate-shadow);cursor:pointer}
#valuation-app .menu-tabs [role=tab][aria-selected=true]{background:var(--menu-gold);color:var(--menu-gold-ink);box-shadow:0 4px 0 var(--menu-gold-shadow)}
/* Game picker: the first and largest choice on the setup screen and in the room. */
.game-tabs{flex:none;width:100%;max-width:560px;margin:0 auto}
#valuation-app .game-tabs [role=tab]{flex:1;min-height:48px;padding:0 12px;font-size:19px;letter-spacing:.06em}
#valuation-app .game-tabs [role=tab]:disabled{opacity:.45;cursor:default}
#valuation-app .game-tabs [role=tab]:not([aria-selected=true]):not(:disabled):hover{filter:brightness(1.15)}
.code-entry{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 auto}
#valuation-app .code-entry input{width:min(440px,100%);height:84px;padding:0 0 0 .4em;border:2px dashed var(--menu-line-strong);border-radius:14px;background:var(--menu-panel);color:var(--menu-text);font-family:var(--menu-pixel);font-size:46px;letter-spacing:.4em;text-align:center;text-transform:uppercase}
#valuation-app .code-entry input::placeholder{color:var(--menu-faint)}
#join-panel .menu-hint{text-align:center}

/* Online entry: open a room at once, or join one with a code. */
.online-choices{flex-direction:row;align-items:stretch;justify-content:center;gap:24px}
.online-card{flex:0 1 380px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;padding:24px 22px;border:2px solid var(--menu-line);border-radius:16px;background:var(--menu-panel);text-align:center}
.online-card>b{font-family:var(--menu-pixel);font-weight:400;font-size:26px;letter-spacing:.06em}
.online-card>span{color:var(--menu-muted);font-size:14px;line-height:1.6}
.online-card .mode-art{width:min(120px,40%);margin:0}
#valuation-app .online-card .code-entry input{width:100%;height:72px;font-size:38px}
.online-card .chunky{width:100%}

/* Lobby: laid out like the setup screen — title on the left, the room's goal seal
   top right, seats and four rule cards in the middle, leave and ready in the footer.
   The room code sits under the title as a small ticket. */
.lobby-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:8px;align-items:start}
.lobby-title{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.lobby-head .goal-seal{grid-column:2;grid-row:1 / 3}
#valuation-app .lobby .room-invite{grid-column:1;grid-row:2;justify-self:start;display:flex;align-items:center;gap:10px;margin:0;padding:5px 6px 5px 12px;border:1px dashed var(--menu-line-strong);border-radius:10px;background:var(--menu-panel);box-shadow:none}
#valuation-app .lobby .room-invite strong{font-family:var(--menu-pixel);font-weight:400;font-size:26px;line-height:1.1;letter-spacing:.16em;color:var(--menu-gold);margin:0;padding:0;border:0;background:none;min-width:0;width:auto}
.lobby-rules .rule-button:disabled{opacity:.5;cursor:default}
.lobby-rules .cycle[data-disabled=true] .cycle-arrow{visibility:hidden}
.lobby .paddles{flex:none;align-items:start}
.lobby .paddle-cycle .cycle{max-width:none}
#valuation-app .lobby .room-share-link{width:100%;min-height:40px;padding:6px 8px;border:1px solid var(--menu-line-strong);border-radius:8px;background:var(--menu-panel);color:var(--menu-text);font-size:13px}
.lobby .room-opening-word{text-align:center;color:var(--menu-text)}
#room-bans-dialog .ban-fields{padding:0}
#room-bans-dialog #room-ban-union{max-height:none}

/* Sheets */
.sheet{width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;padding:0;border:2px solid var(--menu-line-strong);border-radius:16px;background:#141d1f;color:var(--menu-text);font-family:var(--menu-sans);font-size:15px;line-height:1.5;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.sheet::backdrop{background:rgba(6,10,11,.62)}
.sheet[open]{animation:sheet-pop .2s ease-out}
@keyframes sheet-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.sheet-body{display:flex;flex-direction:column;gap:16px;padding:20px 22px 24px}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{margin:0;font-family:var(--menu-pixel);font-weight:400;font-size:24px;letter-spacing:.06em}
.sheet-head h2 small{margin-left:8px;font-family:var(--menu-sans);font-size:13px;color:var(--menu-muted)}
#valuation-app .sheet-close{width:34px;height:34px;min-width:0;min-height:0;padding:0;border:0;border-radius:8px;background:none;color:var(--menu-muted);font-size:22px;line-height:1;cursor:pointer}
#valuation-app .sheet-close:hover{background:rgba(236,228,210,.08);color:var(--menu-text)}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.sheet-foot-center{justify-content:center}
.sheet-hint{margin:0;color:var(--menu-muted);font-size:13px}
.sheet .ban-fields,.lobby .ban-fields{display:flex;flex-direction:column;gap:10px;padding:0 0 12px}
.sheet .ban-fields{padding:0}
#valuation-app .sheet .ban-fields label,#valuation-app .lobby .ban-fields label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--menu-muted)}
#valuation-app .sheet textarea,#valuation-app .lobby textarea{width:100%;height:auto;min-height:44px;resize:vertical;padding:8px 10px;border:1px solid var(--menu-line-strong);border-radius:8px;background:rgba(236,228,210,.06);color:var(--menu-text);font:inherit;font-size:15px;line-height:1.4}
#valuation-app .sheet textarea::placeholder,#valuation-app .lobby textarea::placeholder{color:var(--menu-faint);font-size:14px}
.settings-panel{display:flex;flex-direction:column;gap:6px}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--menu-line)}
.setting-row:last-child{border-bottom:0}
.setting-row>span:first-child{display:flex;flex-direction:column;min-width:0}
.setting-row small{color:var(--menu-muted);font-size:12px}
.setting-row .cycle{max-width:200px}
.range-wrap{display:flex;align-items:center;gap:10px;flex:1;max-width:240px}
.range-wrap input{flex:1;min-width:0;accent-color:var(--menu-gold)}
.range-wrap output{width:40px;text-align:right;color:var(--menu-muted);font-size:13px}
/* Toggles carry their state in aria-pressed; their own text is for screen readers. */
#valuation-app .switch{appearance:none;flex:none;position:relative;width:46px;height:26px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:13px;background:rgba(236,228,210,.22);color:transparent;font-size:0;text-shadow:none;overflow:hidden;cursor:pointer;transition:background .15s}
#valuation-app .switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#f3eee4;transition:transform .15s}
#valuation-app .switch[aria-pressed=true]{background:var(--menu-gold)}
#valuation-app .switch[aria-pressed=true]::after{transform:translateX(20px)}
#valuation-app .switch>*{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* In-game top bar: a quiet gear beside the collector paddle. */
.settings-button{display:grid;place-items:center}
.settings-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Reduced motion: no floating, sliding or popping. */
.game-app[data-motion=reduced] :is(.title-chest img,.menu-screen,.sheet[open]){animation:none!important}
.game-app[data-motion=reduced] :is(.chunky,.mode-panel,.cycle-arrow){transition:none!important}
@media(prefers-reduced-motion:reduce){.title-chest img,.menu-screen,.sheet[open]{animation:none!important}}

/* Desktop: the menu spans the whole grid, feedback sits beneath it. */
@media(min-width:900px){
  .game-app:is(:has(#setup:not([hidden])),:has(#online-lobby:not([hidden]))) .main{grid-column:1 / -1;grid-row:1 / -1;align-items:stretch;justify-content:stretch}
  /* Messages appear between the back and confirm buttons. */
  .game-app:is(:has(#setup:not([hidden])),:has(#online-lobby:not([hidden]))) .feedback-row{grid-column:2;grid-row:4;align-self:center;justify-self:center;z-index:2;pointer-events:none}
  .game-app:is(:has(#setup:not([hidden])),:has(#online-lobby:not([hidden]))) .feedback-row button{pointer-events:auto}
  .menu-screen{padding:14px 8px 8px}
}
/* Phones: stacked panels, three paddles to a row, the footer kept in reach. */
@media(max-width:899px){
  .menu-head h2{font-size:24px}
  /* An add tile that starts a new row becomes a slim full-width bar. */
  .paddles>.paddle.add:nth-child(3n+1){grid-column:1 / -1;min-height:0}
  #valuation-app .paddles>.paddle.add:nth-child(3n+1) .paddle-add{min-height:48px;flex-direction:row;gap:8px}
  .paddles>.paddle.add:nth-child(3n+1) .paddle-plus{font-size:22px}
  .online-choices{flex-direction:column;justify-content:flex-start;gap:12px}
  .online-card{flex:none;padding:16px 14px;gap:8px}
  .online-card .mode-art{display:none}
  .online-card>b{font-size:20px}
  #valuation-app .online-card .code-entry input{height:58px;font-size:30px}
  .goal-seal{--seal-width:156px;padding:6px 10px 7px}
  .goal-seal b{font-size:18px;letter-spacing:.08em}
  .goal-seal span{font-size:11px}
  /* Phones: play buttons stacked full width; the three tiles put the icon above the label. */
  .title-menu{width:100%;gap:12px}
  .title-primary{grid-template-columns:minmax(0,1fr);gap:12px}
  #valuation-app .title-tile{min-height:64px;flex-direction:column;gap:3px;padding:6px 4px;font-size:14px}
  .rule .cycle-value{font-size:15px}
  .mode-panels{grid-template-columns:1fr;gap:12px;align-content:center}
  #valuation-app .mode-panel{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:2px;align-items:center;min-height:0;padding:14px;text-align:left}
  #valuation-app .mode-panel:hover,#valuation-app .mode-panel:focus-visible{transform:none}
  .mode-art{grid-row:1 / 4;width:96px;margin:0}
  .mode-panel b{font-size:22px}
  .mode-panel small{margin:2px 0 0;justify-self:start}
  .paddles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .paddle{width:auto;min-height:168px;padding:14px 6px 8px}
  .paddle-icon{width:40px;height:40px}
  .paddle-name{font-size:15px}
  #valuation-app .paddle-add{min-height:168px}
  .paddle .cycle{grid-template-columns:26px minmax(0,1fr) 26px;gap:3px}
  #valuation-app .paddle .cycle-arrow{height:28px;font-size:16px}
  .paddle .cycle-value{font-size:13px}
  .setup-rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rule{padding:10px 6px}
  .setup-body{justify-content:flex-start;gap:16px}
  #valuation-app .chunky.big{min-height:56px;padding:0 20px;font-size:22px}
  .menu-foot .chunky:first-child{padding:0 14px;font-size:17px}
  #valuation-app .code-entry input{height:70px;font-size:34px}
  /* The room code ticket takes the full width under the title and seal. */
  #valuation-app .lobby .room-invite{grid-column:1 / -1;grid-row:3;justify-self:stretch}
  #valuation-app .lobby .room-invite strong{font-size:24px;flex:1}
  .lobby-head .goal-seal{grid-row:1}
}
/* Four to six seats: one row of cards on desktop, two rows of three on phones,
   where each card keeps only the name, the total and the rank. */
@media(min-width:900px){
  .game-app[data-player-count="4"] .scoreboard{grid-template-columns:repeat(4,minmax(0,1fr))}
  .game-app[data-player-count="5"] .scoreboard{grid-template-columns:repeat(5,minmax(0,1fr))}
  .game-app[data-player-count="6"] .scoreboard{grid-template-columns:repeat(6,minmax(0,1fr))}
  .game-app:is([data-player-count="7"],[data-player-count="8"]) .scoreboard{grid-template-columns:repeat(4,minmax(0,1fr))}
  .game-app:is([data-player-count="4"],[data-player-count="5"],[data-player-count="6"],[data-player-count="7"],[data-player-count="8"]) .scoreboard{gap:10px}
  .game-app:is([data-player-count="5"],[data-player-count="6"],[data-player-count="7"],[data-player-count="8"]) .score{padding:10px 10px}
  .game-app:is([data-player-count="5"],[data-player-count="6"],[data-player-count="7"],[data-player-count="8"]) .score-heading{font-size:15px}
  .game-app:is([data-player-count="5"],[data-player-count="6"],[data-player-count="7"],[data-player-count="8"]) .score>b{font-size:24px}
}
@media(max-width:899px){
  /* Seven or eight seats: two rows of four. */
  .game-app:is([data-player-count="7"],[data-player-count="8"]) .scoreboard{grid-template-columns:repeat(4,minmax(0,1fr))}
  .game-app:is([data-player-count="4"],[data-player-count="5"],[data-player-count="6"],[data-player-count="7"],[data-player-count="8"]) .summon-list{display:none}
  .game-app:is([data-player-count="4"],[data-player-count="5"],[data-player-count="6"],[data-player-count="7"],[data-player-count="8"]) .score>b{font-size:17px}
  .game-app:is([data-player-count="4"],[data-player-count="5"],[data-player-count="6"],[data-player-count="7"],[data-player-count="8"]) .score{padding:5px 6px;gap:0}
}
/* Rooms of four to six: smaller paddles so every seat fits without scrolling. */
.paddles:has(>:nth-child(5)){gap:12px}
.paddles:has(>:nth-child(5)) .paddle{width:136px;min-height:150px;padding:12px 8px 10px}
.paddles:has(>:nth-child(5)) .paddle-icon{width:40px;height:40px;margin:2px 0 4px}
#valuation-app .paddles:has(>:nth-child(5)) .paddle-add{min-height:150px}
.setup-body,.menu-screen{scrollbar-width:thin;scrollbar-color:rgba(236,228,210,.25) transparent}
@media(max-width:899px){
  .paddles:has(>:nth-child(5)) .paddle{width:auto;min-height:104px;padding:10px 4px 6px}
  .paddles:has(>:nth-child(5)) .paddle-icon{width:28px;height:28px;margin:0 0 2px}
  .paddles:has(>:nth-child(5)) .paddle-name{font-size:14px}
  .paddles:has(>:nth-child(5)) .paddle-sub{font-size:11px}
  #valuation-app .paddles:has(>:nth-child(5)) .paddle-add{min-height:104px}
}
/* Seven or eight seats: two rows of four, so a 2v2v2v2 room reads as four pairs. */
.paddles:has(>:nth-child(7)){display:grid;grid-template-columns:repeat(4,136px);justify-content:center}
@media(max-width:899px){.paddles:has(>:nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}}

/* Teams: each team keeps one colour on its lobby seats and its score cards. */
:is(.paddle,.score,#result-rankings li)[data-team]{--team:#e4b75b}
:is(.paddle,.score,#result-rankings li)[data-team=B]{--team:#4fb3a6}
:is(.paddle,.score,#result-rankings li)[data-team=C]{--team:#d9674c}
:is(.paddle,.score,#result-rankings li)[data-team=D]{--team:#a68ad8}
.paddle[data-team]{border-color:color-mix(in srgb,var(--team) 70%,transparent);box-shadow:inset 0 4px 0 var(--team)}
.paddle[data-team].open{border-color:color-mix(in srgb,var(--team) 45%,transparent)}
.paddle[data-team] .paddle-sub{color:var(--team);font-weight:600}
#valuation-app .paddle-sit{margin-top:auto;min-height:30px;padding:0 10px;font-size:13px}
.score[data-team]{box-shadow:inset 4px 0 0 var(--team)}
.score[data-team] .score-caption{color:var(--team)}
#result-rankings li[data-team]{border-left:4px solid var(--team);padding-left:8px}
.team-chip[data-team]{--team:#e4b75b}.team-chip[data-team=B]{--team:#4fb3a6}.team-chip[data-team=C]{--team:#d9674c}.team-chip[data-team=D]{--team:#a68ad8}
#valuation-app .score[data-team] .score-heading [id$="-name"]{color:var(--team)}
/* The standings strip sits first: across the top on phones, atop the rail on desktop. */
.team-strip{order:-1;grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px}
.team-chip{display:flex;align-items:baseline;gap:4px;min-width:0;padding:3px 6px;border:1px solid color-mix(in srgb,var(--team) 55%,transparent);border-left:4px solid var(--team);border-radius:4px;background:#0d1a1ccc;color:#f2e2b9;font-size:12px;line-height:1.3;white-space:nowrap}
.team-chip.own{background:color-mix(in srgb,var(--team) 22%,#0d1a1c)}
.team-chip-rank{font-family:var(--menu-pixel,inherit);color:var(--team)}
.team-chip-name{color:var(--team);font-weight:700}
.team-chip-total{margin-left:auto;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.team-strip[hidden]{display:none}
@media(max-width:899px){.team-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.team-chip{font-size:11px;padding:2px 5px}}
@media(min-width:900px){.game-app:has(#play:not([hidden])) .team-strip{flex:none;grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Whole-category bans: toggle chips, pressed when that category is closed. */
.rule-wide{grid-column:span 2}
.category-bans{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
#valuation-app .category-chip{min-height:32px;padding:0 12px;border:1px solid var(--menu-line-strong);border-radius:999px;background:rgba(236,228,210,.05);color:var(--menu-muted);font:inherit;font-size:14px;cursor:pointer}
#valuation-app .category-chip:hover:not(:disabled){border-color:var(--menu-gold);color:var(--menu-text)}
#valuation-app .category-chip[aria-pressed=true]{border-color:#c2412d;background:#c2412d;color:#fff1d6;text-decoration:line-through;text-decoration-thickness:1px}
#valuation-app .category-chip:disabled{cursor:default}
#valuation-app .category-chip:disabled:not([aria-pressed=true]){opacity:.55}

.compact .menu-logo{font-size:44px}
.compact .title-chest img{width:96px}
.compact .paddle{min-height:140px}
.compact .paddle-icon{width:32px;height:32px;margin:0}

/* Leaving for the collection page: a short fade instead of a hard page switch. */
body.leaving .game-app{opacity:0;transition:opacity .17s ease-in}

#idiom-game:not([hidden]){position:fixed;inset:0;z-index:100;overflow:auto;overscroll-behavior:contain;background:#102b30}

/* 万象台选玩法页右下角：成语词库入口（只在万象台出现） */
.mode-library{display:none}
#valuation-app[data-goal="idiom"] .mode-library{display:inline-flex;align-items:center;text-decoration:none}