/* Local fonts (Latin subsets from Google Fonts; Nunito is one variable file covering 700-900). */
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/lilita-one-400.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700 900;font-display:swap;src:url(../assets/fonts/nunito-700-900.woff2) format('woff2')}

/* Layout: one full-bleed 3D yard; thin HUD along the top; cards float over the lawn. Single look, so no dark theme. */
:root{
  --ink:#23304a; --paper:#fff8e8; --glass:#bfe9ff; --brick:#d9503f; --gold:#ffc53a; --lawn:#5da845;
  --display:"Lilita One","Trebuchet MS",sans-serif; --body:"Nunito","Trebuchet MS",sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:#8fd0ee;font-family:var(--body);color:var(--ink);-webkit-user-select:none;user-select:none}
#stage{position:fixed;inset:0;overflow:hidden}
#gl,#fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#gl{touch-action:none;cursor:crosshair}
#fx{pointer-events:none}
.hud{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:10px;pointer-events:none}
.tag{background:var(--ink);color:var(--paper);font-family:var(--display);font-size:17px;padding:7px 13px;border-radius:10px;white-space:nowrap}
.tag small{font-family:var(--body);font-weight:900;font-size:12px;color:var(--glass);margin-right:7px}
#balls{display:flex;gap:4px;align-items:center;background:rgba(35,48,74,.85);padding:7px 10px;border-radius:10px}
#balls i{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#23304a 0 28%,#fff 30%);box-shadow:inset 0 0 0 1px #9aa7bd;display:block}
#balls i.used{opacity:.22}
.spacer{flex:1}
#gear{pointer-events:auto;width:40px;height:40px;border:0;border-radius:10px;background:var(--ink);color:var(--paper);font-size:20px;cursor:pointer}
#gear:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#panel{position:absolute;top:calc(60px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));width:min(290px,calc(100vw - 24px));max-height:calc(100% - 80px);overflow:auto;background:var(--paper);border-radius:12px;padding:12px 14px;box-shadow:0 8px 0 rgba(35,48,74,.25);font-size:13px;display:grid;gap:8px}
#panel h4{margin:0;font-family:var(--display);font-weight:400;font-size:16px}
#panel label{display:grid;grid-template-columns:1fr 44px;gap:0 6px;font-weight:700;align-items:center}
#panel label input{grid-column:1/3;width:100%;accent-color:var(--brick)}
#panel output{text-align:right;font-variant-numeric:tabular-nums}
.row{display:flex;gap:6px;flex-wrap:wrap}
.chip{flex:1;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:8px;padding:5px 6px;font:900 12px var(--body);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--ink);color:var(--paper)}
#copyBox{width:100%;box-sizing:border-box;height:58px;font:11px monospace}
.pop{position:absolute;font-family:var(--display);color:#fff;font-size:clamp(38px,8vw,84px);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);pointer-events:none;transform:translate(-50%,-50%);animation:pop .95s cubic-bezier(.2,1.5,.4,1) forwards;white-space:nowrap}
.pop.small{font-size:clamp(24px,4.6vw,46px);color:var(--gold);-webkit-text-stroke:2px var(--ink);text-shadow:0 3px 0 var(--ink)}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.2) rotate(-14deg);opacity:0}16%{transform:translate(-50%,-50%) scale(1.15) rotate(-6deg);opacity:1}70%{transform:translate(-50%,-70%) scale(1) rotate(-5deg);opacity:1}100%{transform:translate(-50%,-105%) scale(.92) rotate(-5deg);opacity:0}}
#bubble{position:absolute;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:6px 14px;font-family:var(--display);font-size:clamp(22px,4vw,38px);color:var(--brick);transform:translate(-50%,-100%);pointer-events:none}
#bubble::after{content:"";position:absolute;left:50%;bottom:-13px;margin-left:-8px;border:8px solid transparent;border-top:12px solid var(--ink);border-bottom:0}
#card{position:absolute;left:50%;bottom:calc(12% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--paper);border-radius:16px;padding:16px 26px;text-align:center;box-shadow:0 8px 0 rgba(35,48,74,.3);animation:rise .28s cubic-bezier(.2,1.4,.4,1);width:min(300px,calc(100vw - 32px));box-sizing:border-box}
@keyframes rise{from{transform:translate(-50%,40px);opacity:0}}
#card h2{margin:0;font:400 28px var(--display);text-wrap:balance}
#stars{font-size:38px;line-height:1.15;letter-spacing:4px;color:#d9d0b8}
#stars b{color:var(--gold);font-weight:400;-webkit-text-stroke:1px #c8901a}
#card p{margin:0 0 10px;font-weight:700;font-size:14px}
#next{border:0;background:var(--brick);color:#fff;font:400 20px var(--display);padding:10px 26px;border-radius:10px;cursor:pointer;box-shadow:0 4px 0 #9d3226}
#toast{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(28px,6vw,54px);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;pointer-events:none;white-space:nowrap}
#hint{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.9);border:3px solid var(--ink);pointer-events:none;animation:swipe 1.5s ease-in-out infinite}
@keyframes swipe{0%{transform:translate(var(--x0),var(--y0)) scale(1.1);opacity:0}15%{transform:translate(var(--x0),var(--y0)) scale(.85);opacity:1}72%{transform:translate(var(--x1),var(--y1)) scale(.85);opacity:1}100%{transform:translate(var(--x1),var(--y1)) scale(1.1);opacity:0}}
#hintText{position:absolute;left:50%;bottom:calc(25% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-family:var(--display);font-size:clamp(18px,3.4vw,26px);color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;pointer-events:none;white-space:nowrap}
@media (prefers-reduced-motion:reduce){#hint{animation-duration:3s}}