/* Monster Truck Crush on the web: light, sunny and round, as the app's Design/Theme.swift.
   Loaded after kit.css and re-skins its shared pieces (cards, toast, rows) from the lacquer look. */
:root{
  --ink:#1F2A44;--ink-soft:#4A5878;--ink-dim:#6B7A99;--paper:#F3F8FF;--card:#fff;--edge:#D6E4F5;
  --go:#23A845;--go-hi:#6EE07F;--star:#FFC22E;--star-edge:#E09400;--berry:#E8455A;--blue:#2F80ED;--lock:#A9B6C9;
  --lacquer:#F3F8FF;--lacquer-hi:#FFFFFF;--hair:#D6E4F5;--brass:#2F80ED;--brass-hi:#2F80ED;--jade:#23A845;
  --round:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --tap:64px;
}
html,body{height:100%}
body{font:700 18px/1.35 var(--round);color:var(--ink);background:linear-gradient(#4FB3FF,#BDE8FF);
  touch-action:manipulation;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
button:focus-visible,.hw-arcade:focus-visible{outline:4px solid var(--blue);outline-offset:3px}

/* ------------------------------------------------------------------ cards and rows (kit.css, re-skinned) */
.veil{background:rgba(14,24,48,.45);z-index:60}
.card{background:#fff;color:var(--ink);border:3px solid var(--edge);border-radius:28px;box-shadow:0 18px 50px rgba(15,30,60,.35);
  width:min(24em,100%);padding:1.2em 1.1em 1.1em;animation:cardin .28s cubic-bezier(.3,1.5,.5,1)}
.card h2{font:900 1.45em/1.1 var(--round);font-style:normal;color:var(--ink);margin:0 0 .6em;padding:0 2em}
.card .x{width:48px;height:48px;right:.5em;top:.5em;border:2px solid var(--edge);background:#fff;color:var(--ink)}
.card .x svg{stroke:var(--ink);width:1.2em;height:1.2em}
.card .actions{flex-direction:row;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:1em}
.row{background:var(--paper);border:2px solid var(--edge);color:var(--ink);min-height:var(--tap);font-weight:800;text-decoration:none}
.row small{color:var(--ink-soft)}
.toggle{width:68px;height:40px;background:var(--lock);border:0}
.toggle::after{top:5px;left:5px;width:30px;height:30px;background:#fff}
.toggle[aria-pressed=true]{background:var(--go)}
.toggle[aria-pressed=true]::after{left:33px;background:#fff}
.note{color:var(--ink-soft);font-size:.9em;text-align:center;font-weight:700}
.toast{background:var(--ink);color:#fff;border:0}
@keyframes cardin{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}

/* ------------------------------------------------------------------ buttons */
.bigbtn{width:76px;height:76px;border-radius:50%;border:4px solid #fff;display:grid;place-items:center;padding:0;color:#fff;
  background:linear-gradient(180deg,#6aa9f7,var(--blue));box-shadow:0 5px 0 rgba(15,40,90,.28),0 10px 18px rgba(15,40,90,.22);
  transition:transform .12s}
.bigbtn:active{transform:scale(.9)}
.bigbtn svg{width:42px;height:42px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.bigbtn.go{background:linear-gradient(180deg,var(--go-hi),var(--go))}
.bigbtn.grey{background:linear-gradient(180deg,#c2cde0,#8d9bb5)}
.bigbtn.go svg.fill,.bigbtn svg.fill{fill:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.round{width:var(--tap);height:var(--tap);border-radius:50%;border:3px solid var(--edge);background:#fff;display:grid;place-items:center;padding:0;
  box-shadow:0 4px 0 rgba(15,40,90,.18),0 8px 14px rgba(15,40,90,.16);transition:transform .12s}
.round:active{transform:scale(.9)}
.round svg{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------------ home */
#home{align-items:center;justify-content:flex-start;gap:12px;padding:16px 16px max(16px,env(safe-area-inset-bottom));text-align:center;
  overflow-y:auto;overflow-x:hidden;background:linear-gradient(#4FB3FF 0%,#8fd3ff 45%,#BDE8FF 70%,#9AD68F 70.1%,#62BF66 100%)}
#home .cloud{position:absolute;height:34px;width:96px;border-radius:40px;background:#fff;opacity:.9;animation:drift 38s linear infinite;pointer-events:none}
#home .cloud::before,#home .cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
#home .cloud::before{width:46px;height:46px;left:14px;top:-22px}
#home .cloud::after{width:34px;height:34px;left:50px;top:-14px}
@keyframes drift{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 140px))}}
#home>*{position:relative;z-index:1;flex:none}
#home>.hero{margin-top:auto}
#home>.dock{margin-bottom:auto}
#home>.cloud{position:absolute;z-index:0}
.hero{width:min(340px,92vw,calc(26vh * 1.619));height:auto;min-height:0;aspect-ratio:340/210;display:block;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.play{width:132px;height:132px;border-radius:50%;border:6px solid #fff;display:grid;place-items:center;padding:0;
  background:radial-gradient(circle at 50% 30%,var(--go-hi),var(--go) 70%);box-shadow:0 8px 0 #167a30,0 16px 26px rgba(15,60,30,.35);
  animation:pulse 1.8s ease-in-out infinite}
.play:active{transform:scale(.92);animation:none}
.play svg{width:68px;height:68px;fill:#fff;stroke:#fff;stroke-width:3;stroke-linejoin:round;margin-left:8px}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12) saturate(1.1)}}
.courses{display:flex;gap:4px;justify-content:center;flex-wrap:nowrap;width:100%}
.course{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:0;flex:0 1 68px;min-width:0}
.bubble{--b:min(64px,calc((100vw - 48px) / 5));width:var(--b);height:var(--b);border-radius:50%;border:4px solid #fff;display:grid;place-items:center;color:#fff;font:900 30px/1 var(--round);
  text-shadow:0 2px 0 rgba(0,0,0,.28);box-shadow:0 4px 0 rgba(15,40,90,.28),0 8px 14px rgba(15,40,90,.2);position:relative;transition:transform .12s}
.course:active .bubble{transform:scale(.9)}
.course[aria-disabled=true] .bubble{background:var(--lock)!important;text-shadow:none}
.course[aria-disabled=true] .bubble span{display:none}
.bubble .lock{width:30px;height:30px;fill:#fff;display:none}
.course[aria-disabled=true] .bubble .lock{display:block}
.mini{display:flex;gap:1px;height:18px}
.mini svg{width:20px;height:18px;fill:rgba(255,255,255,.7);stroke:rgba(31,42,68,.35);stroke-width:2;stroke-linejoin:round}
.mini svg.on{fill:var(--star);stroke:var(--star-edge)}
.course.shake .bubble{animation:wobble .35s}
@keyframes wobble{0%,100%{transform:none}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.dock{display:flex;gap:16px;align-items:center;justify-content:center}
.dock .round{width:72px;height:72px}
.dock .round.small{width:48px;height:48px;background:#e8eef7;border-color:#cfd9e8;box-shadow:none}
.dock .round.small svg{width:26px;height:26px;stroke:#7d8aa3}
.dock .gift.ready{animation:pulse 1.2s ease-in-out infinite;background:#fff6d6;border-color:var(--star)}
.dock .badge{position:relative}
.swatchdot{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--ink)}
.dock .round svg.big{width:44px;height:44px}

/* ------------------------------------------------------------------ game */
#game{background:#8fd3ff;overflow:hidden;touch-action:none}
#game canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-tap-highlight-color:transparent;outline:none}
.hud{position:absolute;inset:0;pointer-events:none;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left))}
.hud>*{pointer-events:auto}
.hud .back{position:absolute;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top))}
.hud .again{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top))}
.hud .mid{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.hud .stars{display:flex;gap:4px;background:rgba(255,255,255,.55);border-radius:999px;padding:4px 10px}
.hud .stars svg{width:34px;height:34px;fill:rgba(255,255,255,.7);stroke:rgba(31,42,68,.35);stroke-width:2;stroke-linejoin:round}
.hud .stars svg.on{fill:var(--star);stroke:var(--star-edge);animation:starpop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes starpop{0%{transform:scale(.3)}100%{transform:scale(1)}}
.hud .count{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--edge);border-radius:999px;padding:2px 16px 2px 8px;
  font:900 30px/1.2 var(--round);font-variant-numeric:tabular-nums}
.hud .count.bump{animation:starpop .25s}
.carico{width:52px;height:29px;background:url(art/cars.webp) 0 0/366px 87px no-repeat;display:block;flex:none}
@media (max-width:420px){.hud .stars svg{width:28px;height:28px}.carico{width:44px;height:25px;background-size:308px 75px}.hud .count{font-size:26px}
  .round{--tap:56px}.hud .round{width:56px;height:56px}}

/* ------------------------------------------------------------------ result, garage, gate */
.stars3{display:flex;gap:6px;justify-content:center;margin:.2em 0 .6em}
.stars3 svg{width:78px;height:78px;fill:#dfe7f3;stroke:#c3cfe2;stroke-width:2;stroke-linejoin:round}
.stars3 svg.on{fill:var(--star);stroke:var(--star-edge);animation:starpop .6s cubic-bezier(.3,1.8,.5,1) both}
.stars3 svg.on:nth-child(2){animation-delay:.25s}.stars3 svg.on:nth-child(3){animation-delay:.5s}
.stars3 svg:nth-child(2){transform:translateY(-10px)}
.tally{display:flex;align-items:center;justify-content:center;gap:12px;font:900 44px/1 var(--round);margin:.1em 0 .3em}
.tally .carico{width:88px;height:49px;background-size:616px 147px}
.newrow{display:flex;gap:12px;justify-content:center;align-items:center;margin:.4em 0}
.newrow .swatch,.newrow .bubble{animation:starpop .6s cubic-bezier(.3,1.8,.5,1) both .7s}
.swatch{width:var(--tap);height:var(--tap);border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 3px var(--edge);padding:0;position:relative;display:grid;place-items:center}
.swatch[aria-pressed=true]{box-shadow:0 0 0 5px var(--ink)}
.swatch.locked{background:var(--lock)!important}
.swatch svg{width:28px;height:28px;fill:#fff}
.swatch small{position:absolute;bottom:-4px;right:-6px;background:#fff;border-radius:999px;border:2px solid var(--edge);font:900 13px/1 var(--round);padding:2px 5px;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px;justify-items:center;margin:.6em 0}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px;justify-items:center;margin:.6em 0}
.stick{width:var(--tap);height:var(--tap);border-radius:18px;border:3px solid var(--edge);background:var(--paper);padding:0;position:relative;display:grid;place-items:center}
.stick[aria-pressed=true]{border-color:var(--ink);background:#fff}
.stick i{width:48px;height:48px;background:url(art/stickers.webp) 0 0/288px 48px no-repeat;display:block}
.stick.locked i{filter:grayscale(1) brightness(1.5);opacity:.35}
.stick svg{position:absolute;width:24px;height:24px;fill:var(--ink-dim);right:2px;bottom:2px}
.preview{display:block;margin:0 auto;width:min(260px,70vw);height:auto;aspect-ratio:260/170}
.gift i{display:block;width:120px;height:120px;margin:.4em auto;background:url(art/stickers.webp) 0 0/720px 120px no-repeat;animation:starpop .7s cubic-bezier(.3,1.8,.5,1)}
.hold{width:132px;height:132px;border-radius:50%;border:0;padding:0;margin:.4em auto;display:grid;place-items:center;position:relative;background:var(--paper);
  box-shadow:0 0 0 3px var(--edge);touch-action:none;-webkit-touch-callout:none}
.hold svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hold svg.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.hold svg.ring .bg{stroke:var(--edge)}
.hold svg.ring .fg{stroke:var(--go);stroke-dasharray:352;stroke-dashoffset:352}
.hold svg.hand{width:60px;height:60px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;position:relative}
.hold.on{background:#e8f7ec}
.sum{font:900 52px/1.1 var(--round);text-align:center;margin:.1em 0 .4em;font-variant-numeric:tabular-nums}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.answers button{min-height:72px;border-radius:22px;border:3px solid var(--edge);background:var(--paper);font:900 34px/1 var(--round)}
.answers button:active{background:#e0ecfb}
.gate.shake{animation:wobble .35s}
.card .rows{margin-top:.4em}
.card a.row{display:flex}
.row.danger{border-color:var(--berry)}
.lifted{display:grid;place-items:center;height:100%;padding:24px;text-align:center}
.lifted button{margin-top:16px;min-height:var(--tap);padding:0 28px;border-radius:999px;border:0;background:var(--blue);color:#fff;font:900 22px var(--round)}
@media (prefers-reduced-motion:reduce){.play,.gift.ready,#home .cloud{animation:none}.card{animation:none}}
.mini-truck{width:60px;height:49px;display:block;pointer-events:none}