/* Layout: one phone screen — slim HUD on top, a tall physics board (the canvas) taking most of it, and a short vertical tube between two sloped roofs at the bottom, boosters on the houses either side */
/* Fonts are served from this site (subset to the characters the game uses) so nothing loads from Google or a CDN. Rebuild with fonts/subset.sh after changing any on-screen text. */
@font-face{font-family:"ZCOOL KuaiLe";src:url("fonts/zcool-kuaile.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Baloo 2";src:url("fonts/baloo2-800.woff2") format("woff2");font-weight:700 800;font-display:swap}
:root{
  --page:#ecd6ab;
  --board:#fff3d3; --board-stripe:#fbe8bd;
  --tube-edge:#d6b277;
  --ink:#5b3a2b; --ink-soft:#8a6450; --paper:#fffaf0;
  --title:#3f72e2; --go:#4fbf5f; --go-hi:#86de8f; --go-edge:#2e9442;
  --gold:#ffb81f; --danger:#e5484d;
  --font-display:"ZCOOL KuaiLe","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-num:"Baloo 2","ZCOOL KuaiLe",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --hud:52px;
  color-scheme:light;
}
html{height:100%;box-sizing:border-box;background:var(--page)}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
body{height:100%;margin:0;background:var(--page);color:var(--ink);font-family:var(--font-body);overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--title);outline-offset:2px}

#game{position:relative;height:100%;max-width:480px;margin:0 auto;overflow:hidden;touch-action:none;
  background:var(--board) repeating-linear-gradient(90deg,transparent 0 30px,var(--board-stripe) 30px 33px);
  box-shadow:0 0 0 1px rgba(91,58,43,.08),0 10px 40px rgba(91,58,43,.18)}
#cv{position:absolute;left:0;top:var(--hud);width:100%;height:calc(100% - var(--hud));display:block;touch-action:none}

/* HUD */
.hud{position:absolute;left:0;right:0;top:0;height:var(--hud);display:flex;align-items:center;justify-content:space-between;gap:8px;padding-inline:16px;z-index:6;
  background:linear-gradient(var(--board) 70%,rgba(255,243,211,0))}
.iconbtn{width:40px;height:40px;border:0;border-radius:13px;background:var(--paper);display:grid;place-items:center;flex:none;
  box-shadow:0 3px 0 var(--tube-edge),inset 0 0 0 2px var(--tube-edge)}
.iconbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tube-edge),inset 0 0 0 2px var(--tube-edge)}
.iconbtn svg{width:21px;height:21px}
.lvl{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1.05;pointer-events:none}
.lvl b{font-family:var(--font-display);font-weight:400;font-size:26px;color:var(--title);letter-spacing:.04em;white-space:nowrap;
  text-shadow:2px 0 #fff,-2px 0 #fff,0 2px #fff,0 -2px #fff,1.5px 1.5px #fff,-1.5px -1.5px #fff,1.5px -1.5px #fff,-1.5px 1.5px #fff,0 4px 0 rgba(63,114,226,.35)}
.lvl small{font-size:11px;color:var(--ink-soft);letter-spacing:.12em;margin-top:1px}
.hud-r{display:flex;align-items:center;gap:10px}
.left{display:flex;flex-direction:column;align-items:center;line-height:1}
.left small{font-family:var(--font-display);font-size:12px;letter-spacing:.1em}
.left b{font-family:var(--font-num);font-weight:800;font-size:22px;color:var(--gold);font-variant-numeric:tabular-nums;
  text-shadow:1.5px 0 var(--ink),-1.5px 0 var(--ink),0 1.5px var(--ink),0 -1.5px var(--ink),1px 1px var(--ink),-1px -1px var(--ink),1px -1px var(--ink),-1px 1px var(--ink),0 3px 0 var(--ink)}

/* Boosters (top is set from the tray position in JS) */
.boost{position:absolute;left:8px;top:0;z-index:5;width:56px;height:56px;border:0;border-radius:18px;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:linear-gradient(var(--go-hi),var(--go));color:#fff;font-family:var(--font-display);font-size:13px;letter-spacing:.06em;
  box-shadow:0 4px 0 var(--go-edge),inset 0 2px 0 rgba(255,255,255,.55);text-shadow:0 1px 0 rgba(0,0,0,.2)}
.boost:active{transform:translateY(3px);box-shadow:0 1px 0 var(--go-edge),inset 0 2px 0 rgba(255,255,255,.55)}
.boost svg{width:22px;height:22px}
.boost .n{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding-inline:5px;border-radius:11px;border:2px solid #fff;
  background:var(--danger);font:800 12px/17px var(--font-num);font-style:normal;text-align:center;text-shadow:none}
.boost.off{filter:grayscale(.85);opacity:.65}

/* Messages */
#toast{position:absolute;left:16px;right:16px;z-index:8;margin:0 auto;max-width:360px;padding:9px 14px;border-radius:14px;
  background:rgba(91,58,43,.88);color:#fff;font-size:14px;line-height:1.45;text-align:center;pointer-events:none}
#banner{position:absolute;left:0;right:0;top:var(--hud);z-index:7;display:grid;place-items:center;pointer-events:none}
#banner > div{opacity:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 30px;border-radius:24px;background:rgba(255,250,240,.94);box-shadow:0 6px 0 var(--tube-edge)}
#banner b{font-family:var(--font-display);font-weight:400;font-size:40px;color:var(--title)}
#banner span{font-size:14px;color:var(--ink-soft);letter-spacing:.08em}

.modal{position:absolute;inset:0;z-index:50;display:grid;place-items:center;padding-inline:16px;background:rgba(70,40,28,.45)}
.card{width:min(100%,340px);max-height:88%;overflow:auto;background:var(--paper);border-radius:24px;padding:22px 20px 20px;text-align:center;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 0 var(--tube-edge),0 20px 44px rgba(60,30,20,.3)}
.card h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:30px;color:var(--title);text-wrap:balance}
.card h3{margin:6px 0 0;font-family:var(--font-display);font-weight:400;font-size:17px;color:var(--ink-soft);letter-spacing:.1em}
.card p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.55}
.acts{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.btn{border:0;border-radius:999px;padding:12px 18px;font-family:var(--font-display);font-size:20px;letter-spacing:.08em;color:#fff;
  background:linear-gradient(var(--go-hi),var(--go));box-shadow:0 4px 0 var(--go-edge),inset 0 2px 0 rgba(255,255,255,.5);text-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn.alt{background:#fff;color:var(--ink);text-shadow:none;box-shadow:0 4px 0 var(--tube-edge),inset 0 0 0 2px var(--tube-edge)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--go-edge)}
.btn.alt:active{box-shadow:0 1px 0 var(--tube-edge),inset 0 0 0 2px var(--tube-edge)}
.stars{display:flex;justify-content:center;gap:8px;font-size:44px;line-height:1}
.stars i{font-style:normal;color:#e8d6b0;text-shadow:0 3px 0 rgba(91,58,43,.15)}
.stars i.on{color:var(--gold);animation:star .45s cubic-bezier(.3,1.6,.5,1) both}
.stars i.on:nth-child(2){animation-delay:.15s}.stars i.on:nth-child(3){animation-delay:.3s}
@keyframes star{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1)}}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.lv{aspect-ratio:1;border:0;border-radius:14px;padding:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-shadow:0 3px 0 var(--tube-edge),inset 0 0 0 2px var(--tube-edge)}
.lv b{font:800 20px/1 var(--font-num)}
.lv small{font-size:9px;color:var(--gold);letter-spacing:-.05em;min-height:10px}
.lv.cur{background:var(--title);color:#fff;box-shadow:0 3px 0 #2a54b0}
.lv:disabled{background:#f1e6cf;color:#bda57c;box-shadow:none;cursor:default}
.lv:disabled svg{width:16px;height:16px}
.setrow{display:flex;justify-content:space-between;align-items:center;padding:4px 2px;font-size:15px}
.switch{border:0;border-radius:999px;padding:6px 14px;background:#f1e6cf;font-family:var(--font-display);font-size:15px}
.switch.on{background:var(--go);color:#fff}

@media (prefers-reduced-motion: reduce){ .stars i.on{animation:none} }