@font-face{font-family:"Caveat";src:url("/fonts/caveat-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--ink:#1f1a2e;--cream:#fffaf2;--accent:#ff5c39;--green:#5ac84a;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#6cc04a;color:var(--ink);font:800 15px "Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
.screen{position:fixed;inset:0}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.btn{font:900 17px "Nunito",system-ui,sans-serif;border:3px solid var(--ink);border-radius:14px;padding:10px 18px;background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ink);position:relative;top:0;transition:transform .12s}
.btn:active{top:3px;box-shadow:0 1px 0 var(--ink)}
.btn.big{background:var(--accent);color:#fff;font-size:22px;padding:12px 18px;width:100%}
.btn.small{font-size:14px;padding:6px 11px;box-shadow:0 3px 0 var(--ink);border-radius:10px}
.btn.ghost{background:#f3e7d3}
.btn:disabled{opacity:.5}
.panel{background:var(--cream);border:3px solid var(--ink);border-radius:20px;box-shadow:0 7px 0 var(--ink)}
.err{color:#c0281a;min-height:1.2em;text-align:center;font-size:15px}

/* ---------- menu ---------- */
#menuBg{position:absolute;inset:0;width:100%;height:100%}
.yen-home{position:absolute;top:calc(12px + var(--safe-t));left:14px;z-index:2;color:var(--ink);text-decoration:none;font-weight:900;font-size:14px;padding:7px 13px;border:3px solid var(--ink);border-radius:999px;background:#fff;box-shadow:0 3px 0 var(--ink)}
.menu-wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px}
.logo{margin:0;font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-weight:700;font-size:clamp(70px,15vw,130px);line-height:.9;color:#fff;
  text-shadow:4px 4px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),0 9px 0 rgba(31,26,46,.35);transform:rotate(-3deg)}
.tag{margin:10px 0 18px;font-size:17px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:5px 16px;box-shadow:0 3px 0 var(--ink);text-align:center}
.menu-panel{width:min(360px,100%);padding:16px;display:flex;flex-direction:column;gap:12px}
.mechip{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 12px 6px 6px}
.mechip canvas{width:40px;height:40px;border-radius:10px;background:#f3e7d3;border:2px solid var(--ink)}
.mechip small{display:block;font-size:12px;color:#6a5f7a}
.mechip b{font-size:18px}
.join-row{display:flex;gap:8px}
.btn.big.pub{background:#3aa0ff;display:flex;align-items:center;justify-content:center;gap:8px}
.btn.big.pub small{font-size:13px;opacity:.85}
.join-row input{flex:1;min-width:0;font:900 22px "Nunito",system-ui,sans-serif;letter-spacing:.3em;text-align:center;text-transform:uppercase;border:3px solid var(--ink);border-radius:14px;padding:8px;background:#fff;color:var(--ink)}
.join-row input::placeholder{letter-spacing:.1em;color:#b0a8bc}

/* ---------- park HUD ---------- */
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#hud{position:absolute;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
#topL{position:absolute;top:calc(10px + var(--safe-t));left:10px;display:flex;gap:8px;align-items:center}
#topR{position:absolute;top:calc(10px + var(--safe-t));right:10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:70vw}
.chip{font:900 14px "Nunito",system-ui,sans-serif;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 13px;box-shadow:0 3px 0 var(--ink);white-space:nowrap}
.chip b{letter-spacing:.12em;color:var(--accent)}
.chip.dim{background:rgba(255,250,242,.9);font-size:13px;pointer-events:none}
.ibtn{width:44px;height:44px;border:3px solid var(--ink);border-radius:12px;background:#fff;box-shadow:0 3px 0 var(--ink);font-size:20px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.ibtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.pop{position:absolute;top:calc(66px + var(--safe-t));right:10px;display:flex;gap:6px;flex-wrap:wrap;max-width:300px;background:var(--cream);border:3px solid var(--ink);border-radius:16px;padding:8px;box-shadow:0 5px 0 var(--ink);z-index:5}
.emo{width:52px;height:52px;border:2px solid #e0d3bd;border-radius:12px;background:#fff;font-size:26px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.emo:hover{border-color:var(--ink)}
.emo.wx{width:62px;font-size:22px}
.emo small{font:800 10px "Nunito",system-ui,sans-serif;color:#6a5f7a}
#score{position:absolute;top:calc(64px + var(--safe-t));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 14px;box-shadow:0 3px 0 var(--ink);font-size:12px;color:#6a5f7a;pointer-events:none}
#score b{font-size:20px;color:var(--ink)}
#banner{position:absolute;top:24%;left:50%;transform:translate(-50%,-20px) scale(.9);opacity:0;transition:all .25s cubic-bezier(.3,1.6,.6,1);pointer-events:none;
  background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:0 6px 0 var(--ink);padding:12px 22px;font:900 26px "Nunito",system-ui,sans-serif;text-align:center;max-width:90vw}
#banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
#banner .sub{display:block;font-size:14px;color:#6a5f7a;margin-top:2px}
.toasts{position:absolute;left:50%;bottom:calc(110px + var(--safe-b));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:6;width:min(92vw,520px)}
.toast{background:var(--ink);color:#fff;border-radius:999px;padding:8px 16px;font-size:14px;text-align:center;animation:tin .2s}
.toast.bad{background:#c0281a}.toast.good{background:#1a8a40}.toast.blue{background:#2a6ad8}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
#prompt{position:absolute;left:50%;bottom:calc(64px + var(--safe-b));transform:translateX(-50%);background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 16px;box-shadow:0 3px 0 var(--ink);font-size:16px;white-space:nowrap;pointer-events:none}
#prompt b{display:inline-block;background:var(--ink);color:#fff;border-radius:7px;padding:1px 7px;margin-right:6px;font-size:13px}
#chatLog{position:absolute;left:10px;bottom:calc(44px + var(--safe-b));width:min(360px,60vw);display:flex;flex-direction:column;gap:3px;pointer-events:none}
.cl{background:rgba(31,26,46,.72);color:#fff;border-radius:10px;padding:3px 10px;font-size:13px;width:fit-content;max-width:100%;overflow-wrap:anywhere;transition:opacity 1s}
.cl b{color:#ffd23a}
.cl.sys{background:rgba(31,26,46,.45);font-style:italic;font-weight:700}
.cl.old{opacity:0}
#chatIn{position:absolute;left:10px;bottom:calc(10px + var(--safe-b));width:min(420px,calc(100vw - 20px));font:800 16px "Nunito",system-ui,sans-serif;border:3px solid var(--ink);border-radius:12px;padding:8px 12px;background:#fff;color:var(--ink)}
#help{position:absolute;left:50%;bottom:calc(12px + var(--safe-b));transform:translateX(-50%);font-size:12px;color:rgba(31,26,46,.8);background:rgba(255,250,242,.75);border-radius:999px;padding:3px 12px;white-space:nowrap;pointer-events:none}
.touch #help{display:none}
#pads{position:absolute;inset:0;pointer-events:none;display:none}
.touch #pads{display:block}
#stick{position:absolute;left:calc(26px + env(safe-area-inset-left,0px));bottom:calc(26px + var(--safe-b));width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.22);border:3px solid rgba(31,26,46,.35)}
#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:rgba(255,255,255,.8);border:3px solid var(--ink)}
#btns{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(24px + var(--safe-b));display:flex;align-items:flex-end;gap:12px;pointer-events:none}
.pbtn{pointer-events:auto;width:74px;height:74px;border-radius:50%;border:3px solid var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink);font:900 13px "Nunito",system-ui,sans-serif;padding:0;touch-action:manipulation}
.pbtn.use{width:88px;height:88px;background:#ffd23a}
.pbtn.use.lit{background:var(--accent);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.touch #prompt{bottom:calc(140px + var(--safe-b))}
.touch #chatLog{bottom:calc(170px + var(--safe-b))}
.touch .toasts{bottom:calc(200px + var(--safe-b))}
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(18,12,28,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.ov-panel{width:min(460px,100%);max-height:92vh;overflow:auto;padding:16px 18px}
.ov-panel h2{margin:0 0 10px;font-family:"Caveat","Segoe Print",cursive;font-weight:700;font-size:40px;line-height:1}
.ov-panel h3{margin:16px 0 8px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:#6a5f7a}
.pl{display:flex;align-items:center;gap:10px;padding:6px 8px;border:2px solid #e3d6c0;border-radius:12px;background:#fff;margin-bottom:6px}
.pl canvas{width:30px;height:30px;border-radius:8px;background:#f3e7d3}
.pl .nm{flex:1;min-width:0;font-size:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pl .nm .me{color:var(--accent)}
.pl.away{opacity:.55}
.crown{color:#e0a010}
.tagadm{font:900 10px "Nunito",system-ui,sans-serif;letter-spacing:.6px;padding:1px 6px;border-radius:999px;border:2px solid var(--ink);background:#ffd23a}
.tagadm.dev{background:linear-gradient(90deg,#ff5c5c,#ffb13b,#ffe14d,#5fd36b,#4aa8ff,#a46bff);color:#fff;text-shadow:0 1px 0 var(--ink)}
.tagadm.vip{border-color:#d08aff;color:#fff;background:linear-gradient(90deg,#9a5ad0,#e04ab8)}
.mini{font:800 12px "Nunito",system-ui,sans-serif;border:2px solid var(--ink);border-radius:8px;background:#ffe4e0;color:#b0201a;padding:3px 8px}
#inviteBox{display:flex;gap:6px;flex-wrap:wrap}
#inviteBox input,#inviteBox select{flex:1;min-width:140px;font:700 13px "Nunito",system-ui,sans-serif;border:2px solid var(--ink);border-radius:10px;padding:6px 8px;background:#fff;color:var(--ink)}
.ov-btns{display:flex;gap:8px;margin-top:16px}
.ov-btns .btn{flex:1}
.qr-panel{padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:92vw}
#qrCv{width:min(300px,80vw);height:auto;background:#fff}
#qrTxt{font-size:12px;overflow-wrap:anywhere;text-align:center;max-width:300px}
#qrCode{font-size:30px;letter-spacing:.2em;color:var(--accent)}
@media (max-width:700px){
  .ibtn{width:40px;height:40px;font-size:18px;border-radius:10px}
  #topR{top:calc(56px + var(--safe-t));left:10px;right:auto;max-width:calc(100vw - 20px);justify-content:flex-start;gap:5px}
  .pop{top:calc(104px + var(--safe-t));right:auto;left:10px}
  #score{top:calc(106px + var(--safe-t))}
  #banner{font-size:20px;top:30%}
  #banner .sub{font-size:13px}
}
/* icons (shared/icons.js) */
.ibtn .yi{width:22px;height:22px}
.emo .yi{width:28px;height:28px}
.emo.wx .yi{width:24px;height:24px}
.crown .yi{width:15px;height:15px;vertical-align:-2px;color:#e0a010}
.yen-home .yi{width:15px;height:15px;vertical-align:-2px}