/* Rattletrap Derby UI (SPEC §9 global UI style, §10.2 palettes). The DOM HUD (#ui) is laid out in LOGICAL px:
   main.js sizes it to the canvas's logical W × H and CSS-scales it by k/dpr, so DOM and canvas share one coordinate
   system (at 390 × 664 CSS, DPR 1–3, 1 logical px = 1 CSS px). Brand fills (tomato / sky / sunflower) carry INK text
   for contrast (PROGRESS Decisions); light text on the world/dark carries the chunky ink drop shadow. */
:root{
  /* UI palette (§10.2) */
  --ink:#2a1408; --cream:#fff4dc; --cream-a:rgba(255,244,220,.96); --cream-shade:#f0dcb0; --bevel:#e8b070;
  --tomato:#ff5a3c; --tomato-hi:#ff8a6e; --tomato-lo:#c43a20; --sky:#3ab0ff; --sky-hi:#8ad0ff; --sky-lo:#1a78c0;
  --sun:#ffc83a; --sprout:#4fd66b; --danger:#d01a34; --amber:#ffae1a; --felt:#2f8a4a; --rivet:#a3adbd; --rivet-lo:#5a6272;
  --light:#fff8ec; --dim:#6e5236; --dim-on-dark:#f0dcb0;
  /* seats (§7.8; colour always travels with a glyph) */
  --s1:#ff5a3c; --s2:#ffc83a; --s3:#4fd66b; --s4:#3ab0ff; --ghost:#d8e6ff;
  /* 4 px pixel-stepped corners */
  --corners: polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,
    100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,
    4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));
  --drop: 0 2px 0 #2a1408;
  /* riveted corners: 4 × 4 rivet dots drawn with radial gradients (§9) */
  --rivets: radial-gradient(circle at 2px 2px,#dde4ee 0 1px,var(--rivet) 1px 2px,var(--rivet-lo) 2px 2.5px,transparent 2.6px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;
  background:#7cc4f8;background:linear-gradient(#4aa8f0 0%,#7cc4f8 30%,#b0dcfa 62%,#ffe8c0 86%,#ffd08a 100%);
  color:var(--ink);font:700 16px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.5px;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none}
/* iOS long-press: no callout / magnifier / image-save sheet on game UI (inputs stay selectable) */
img,canvas,svg{-webkit-touch-callout:none;-webkit-user-drag:none;user-drag:none}
input,textarea{-webkit-touch-callout:default}
body{display:flex;align-items:center;justify-content:center}
#stage{position:relative;flex:none;transform-origin:center center}
#game{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#ui{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;pointer-events:none}
#ui > *{pointer-events:auto}
#ui .pass-through{pointer-events:none}
#ui .pass-through > *{pointer-events:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.noscript{padding:24px}
h1,h2,h3,p{margin:0}
h1{font-size:28px} h2{font-size:22px} h3{font-size:18px}
.on-dark,.shadow{color:var(--light);text-shadow:var(--drop)}
.dim{color:var(--dim)} .ok{color:#1f7a3a} .bad{color:var(--danger)}
small,.small{font-size:16px;font-weight:600}
img.glyph{width:18px;height:18px;image-rendering:pixelated;vertical-align:-3px}
img.pix,canvas.pix{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none}
.screen > *{pointer-events:auto}
.screen.full{pointer-events:auto}
.center{align-items:center;justify-content:center;text-align:center}
.pad{padding:12px}
.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.screen.scroll > *{flex-shrink:0}
.row{display:flex;gap:8px;align-items:center}
.col{display:flex;flex-direction:column;gap:8px}
.wrap{flex-wrap:wrap}
.spacer{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}

/* ---------- riveted cream panels (§9: cream 96%, 3 px ink border, 2 px bevel, rivets in the corners) ---------- */
.panel{position:relative;background:var(--cream-a);border:3px solid var(--ink);clip-path:var(--corners);padding:12px 14px;
  box-shadow:inset 0 0 0 2px var(--bevel),inset 0 -4px 0 2px rgba(240,220,176,.9);
  background-image:var(--rivets),var(--rivets),var(--rivets),var(--rivets);
  background-size:4px 4px;background-repeat:no-repeat;background-position:4px 4px,calc(100% - 4px) 4px,4px calc(100% - 4px),calc(100% - 4px) calc(100% - 4px)}
.panel.tight{padding:8px 10px}
.panel h2,.panel h3{color:var(--ink)}
.panel.dark{background-color:rgba(42,20,8,.88);color:var(--light);text-shadow:var(--drop);box-shadow:inset 0 0 0 2px #5a3a1c}
.plank{display:inline-block;padding:4px 12px;background:#c08040;color:var(--light);text-shadow:var(--drop);border:3px solid var(--ink);clip-path:var(--corners);
  box-shadow:inset 0 2px 0 #e8b070,inset 0 -3px 0 #8a5a2b}

/* ---------- buttons (§9: ≥ 44 × 44, tomato primary / sky secondary / cream tertiary; pressed = down 2 px, no bottom shadow) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:8px 14px;
  font:inherit;letter-spacing:.5px;color:var(--ink);background:var(--cream);border:3px solid var(--ink);clip-path:var(--corners);cursor:pointer;
  box-shadow:inset 0 -3px 0 var(--cream-shade),inset 0 2px 0 #ffffff;touch-action:manipulation;transition:transform 40ms steps(1)}
.btn,.btn *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.btn.pressed,.btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(0,0,0,.12)}
.btn.tapflash{filter:brightness(1.12)}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 6px var(--sun)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:default;transform:none;filter:saturate(.4)}
.btn.primary{background:var(--tomato);box-shadow:inset 0 -3px 0 var(--tomato-lo),inset 0 2px 0 var(--tomato-hi)}
.btn.secondary{background:var(--sky);box-shadow:inset 0 -3px 0 var(--sky-lo),inset 0 2px 0 var(--sky-hi)}
.btn.sun{background:var(--sun);box-shadow:inset 0 -3px 0 #c8961e,inset 0 2px 0 #ffe08a}
.btn.primary.pressed,.btn.primary:active,.btn.secondary.pressed,.btn.secondary:active,.btn.sun.pressed,.btn.sun:active{box-shadow:inset 0 2px 0 rgba(0,0,0,.15)}
.btn.danger{background:var(--danger);color:var(--light);text-shadow:var(--drop);box-shadow:inset 0 -3px 0 #8a1020}
.btn.big{min-height:56px;font-size:20px}
.btn.huge{min-height:64px;font-size:24px}
.btn.wide{width:100%}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost.pressed,.btn.ghost:active{background:rgba(42,20,8,.08)}
.btn.iconbtn{min-width:44px;min-height:44px;padding:0 8px;font-size:18px}
.btn .sub{display:block;font-size:14px;font-weight:600}
.btn[aria-pressed="true"]{background:var(--sun);box-shadow:inset 0 -3px 0 #c8961e,inset 0 2px 0 #ffe08a}

/* ---------- form bits ---------- */
.field{font:inherit;color:var(--ink);background:#ffffff;border:3px solid var(--ink);padding:8px 10px;min-height:44px;width:100%;min-width:0;
  clip-path:var(--corners);letter-spacing:1px;-webkit-user-select:text;user-select:text;box-shadow:inset 0 2px 0 var(--cream-shade)}
.field:focus{outline:none;border-color:var(--sky-lo);box-shadow:inset 0 0 0 2px var(--sky)}
.field.bad{border-color:var(--danger);box-shadow:inset 0 0 0 2px var(--danger)}
.field.good{border-color:var(--felt);box-shadow:inset 0 0 0 2px var(--sprout)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.toggle > span{flex:1}
.seg{display:inline-flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.seg .btn{padding:4px 9px}
.chip{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:2px 8px;border:2px solid var(--ink);background:var(--cream);clip-path:var(--corners);font-size:16px;white-space:nowrap}
.badge{display:inline-block;font-size:13px;padding:1px 6px;background:var(--ink);color:var(--sun);clip-path:var(--corners)}

/* ---------- title (S1) ---------- */
.title-menu{position:absolute;left:0;right:0;bottom:0;padding:12px 16px 14px;display:flex;flex-direction:column;gap:8px}
.title-menu .grid2 .btn{min-height:52px}
.footer{font-size:16px;font-weight:600;color:var(--light);text-align:center;text-shadow:var(--drop)}
.wordmark-dom{position:absolute;left:0;right:0;top:7%;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.wordmark-dom .line{display:flex;gap:3px}
.wordmark-dom .line span{display:inline-block;width:26px;height:34px;line-height:30px;text-align:center;font-size:24px;color:var(--light);text-shadow:var(--drop);
  background:#c08040;border:3px solid var(--ink);box-shadow:inset 0 2px 0 #e8b070,inset 0 -3px 0 #8a5a2b}
.trophy{position:absolute;right:12px;top:12px}

/* ---------- garage (S2) ---------- */
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tabs .btn{flex:none;padding:4px 10px;min-height:44px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:96px;padding:6px 4px;font-size:14px;text-align:center}
.tile .nm{font-size:15px;line-height:1.1}
.tile .lockb{font-size:13px;color:var(--dim)}
.tile.locked{background:#e8d8b8}
.tile.locked img,.tile.locked canvas{filter:brightness(0) opacity(.35)}
.tile.equipped{background:var(--sun)}
.tile.fresh{animation:sparkle 1.2s steps(3) infinite}
@keyframes sparkle{50%{filter:brightness(1.15);box-shadow:inset 0 0 0 3px var(--sun),inset 0 -3px 0 #c8961e}}
.xpbar{height:14px;background:#fff;border:3px solid var(--ink);overflow:hidden;width:100%}
.xpbar i{display:block;height:100%;background:var(--sun);box-shadow:inset 0 -3px 0 #c8961e;transition:width 1.2s steps(12)}
.turntable{display:flex;align-items:center;justify-content:center;height:150px;background:repeating-linear-gradient(90deg,#c08040 0 16px,#b07034 16px 32px);border:3px solid var(--ink);clip-path:var(--corners)}
.facestrip{display:flex;gap:2px;flex-wrap:wrap;font-size:12px}
.facestrip span{display:inline-block;min-width:30px;padding:1px 3px;background:#fff;border:2px solid var(--ink);text-align:center}
.statgrid{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:16px}

/* ---------- seat entry (S5) ---------- */
.seatrow{display:flex;gap:6px;align-items:center;padding:4px;border:3px solid var(--ink);background:#fff;clip-path:var(--corners);box-shadow:inset 6px 0 0 var(--seat,#ccc)}
.seatrow .gl{width:28px;height:28px;flex:none;image-rendering:pixelated;margin-left:6px}
.seatrow .drv{flex:none;min-width:84px;padding:2px 6px;flex-direction:column;gap:0;font-size:14px;line-height:1.1}
.seatrow .drv img,.seatrow .drv canvas{width:28px;height:28px;image-rendering:pixelated}
.seatrow .pers{flex:1;min-width:0}
.dicepick{display:flex;gap:4px;flex-wrap:wrap}
.dicepick .btn{flex-direction:column;gap:0;padding:2px 6px;min-width:58px;font-size:13px}
.err{color:var(--danger);font-size:16px;min-height:0}

/* ---------- how to play (S19) ---------- */
.rulecard{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.rulecard canvas{image-rendering:pixelated;border:3px solid var(--ink);background:#7cc4f8}
.rulecard p{font-size:18px;line-height:1.3;max-width:320px}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:12px;height:12px;border:2px solid var(--ink);background:#fff}
.dots i.on{background:var(--tomato)}

/* ---------- unlock card (S3) + overlays ---------- */
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:10px;background:rgba(42,20,8,.55)}
.unlockcard{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:240px;max-width:320px;text-align:center;animation:flipIn .3s steps(4) both}
@keyframes flipIn{from{transform:perspective(600px) rotateY(75deg)}to{transform:none}}
.unlockcard .big{font-size:40px;line-height:1.05}
.unlockcard canvas,.unlockcard img{image-rendering:pixelated}

/* ---------- stubs + system cards ---------- */
.stub{margin:auto 16px;display:flex;flex-direction:column;gap:12px;text-align:left}
.stub .meta{font:600 16px/1.4 ui-monospace,monospace;color:var(--dim);white-space:pre-wrap}
#rotate{position:fixed;inset:0;z-index:90;background:#4aa8f0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}

/* ---------- toasts ---------- */
#toasts{position:fixed;left:0;right:0;top:max(10px,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:6px;z-index:100;pointer-events:none}
.toast{background:var(--cream-a);border:3px solid var(--ink);color:var(--ink);padding:8px 14px;max-width:min(92vw,420px);text-align:center;
  clip-path:var(--corners);box-shadow:inset 0 0 0 2px var(--sun);animation:toastIn .18s steps(3)}
@keyframes toastIn{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion: reduce){
  .toast,.unlockcard,.tile.fresh{animation:none}
  .xpbar i{transition:none}
}
:root[data-motion="reduced"] .toast,:root[data-motion="reduced"] .unlockcard,:root[data-motion="reduced"] .tile.fresh{animation:none}

/* ---------- tip jar (DEV/tip-jar.md): small and quiet, never a big button (same pieces as Cracktile / Lot Luck) ---------- */
.tiplink{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:4px 10px;background:transparent;border:0;
  font:inherit;font-size:16px;font-weight:700;color:var(--sun);text-shadow:var(--drop);cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px}
.tiplink:active,.tiplink.pressed{transform:translateY(2px);filter:brightness(1.2)}
.tiplink:focus-visible,.tipx:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}
.tipline{display:flex;align-items:center;justify-content:center;gap:2px}
.tipline .tiplink{color:var(--dim);font-weight:600;text-decoration:none;text-shadow:none}
.tipx{min-width:44px;min-height:44px;background:transparent;border:0;color:var(--dim);font:700 22px/1 inherit;font-family:inherit;cursor:pointer}
.tipx:active{transform:translateY(2px)}
.tipsupport{margin-top:12px}
.tipsupport p{color:var(--ink);font-weight:600}
.tipfoot{margin:-6px 0 -8px}