/* 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{width:24px;height:24px;border:1px solid var(--menu-panel);border-radius:6px;background:#d9cdb0}
.title-tile-faces .npc-face img{width:61px;margin:-2px 0 0 -18px}
.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. */
.setup-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:26px;overflow-y:auto;overscroll-behavior:contain;padding:8px 2px}
.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)}
.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 */
.setup-rules.lobby-rules{max-width:820px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:899px){
  .setup-rules.lobby-rules{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .lobby-rules .rule{padding:8px 4px}
  .lobby-rules .cycle{grid-template-columns:24px minmax(0,1fr) 24px;gap:3px}
  #valuation-app .lobby-rules .cycle-arrow{height:28px;font-size:16px}
  .lobby-rules .cycle-value{font-size:13px}
}
.lobby-rules .rule-button:disabled{opacity:.5;cursor:default}
.lobby-rules .cycle[data-disabled=true] .cycle-arrow{visibility:hidden}
.lobby-head{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
#valuation-app .lobby .room-invite{display:flex;align-items:center;gap:12px;margin:0;padding:0;border:0;background:none;box-shadow:none}
#valuation-app .lobby .room-invite strong{font-family:var(--menu-pixel);font-weight:400;font-size:40px;letter-spacing:.16em;color:var(--menu-text);margin:0;padding:0;border:0;background:none;min-width:0;width:auto}
.lobby .paddles{flex:none;align-items:start}
.lobby-screen{overflow-y:auto;overscroll-behavior:contain}
.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)}
.ban-details{align-self:center;width:min(560px,100%);border:1px solid var(--menu-line);border-radius:10px;background:var(--menu-panel);padding:0 14px}
.ban-details summary{min-height:42px;display:flex;align-items:center;color:var(--menu-muted);font-size:14px;cursor:pointer}
.ban-details[open] summary{color:var(--menu-text)}

/* 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}
  #room-goal-cycle .cycle-value{font-size:11px}
  .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}
  .lobby-head{flex-direction:column;gap:8px}
  #valuation-app .lobby .room-invite strong{font-size:30px}
}
/* 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="4"],[data-player-count="5"],[data-player-count="6"]) .scoreboard{gap:10px}
  .game-app:is([data-player-count="5"],[data-player-count="6"]) .score{padding:10px 10px}
  .game-app:is([data-player-count="5"],[data-player-count="6"]) .score-heading{font-size:15px}
  .game-app:is([data-player-count="5"],[data-player-count="6"]) .score>b{font-size:24px}
}
@media(max-width:899px){
  .game-app:is([data-player-count="4"],[data-player-count="5"],[data-player-count="6"]) .summon-list{display:none}
  .game-app:is([data-player-count="4"],[data-player-count="5"],[data-player-count="6"]) .score>b{font-size:17px}
  .game-app:is([data-player-count="4"],[data-player-count="5"],[data-player-count="6"]) .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}
}
.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}