:root{--night: #14182a;--indigo: #2a2f55;--lacquer: #9b2436;--cedar: #6a3f24;--gold: #e2b34a;--ivory: #f3e6c8;--mist: #b8adc4;--safe: env(safe-area-inset-bottom, 0px);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(52% 36% at 50% 0%,rgba(226,179,74,.18),transparent 58%),radial-gradient(70% 50% at 8% 92%,rgba(155,36,54,.28),transparent 55%),radial-gradient(80% 60% at 100% 100%,#0c0e1a 0%,transparent 52%),linear-gradient(180deg,#1c2040 0%,var(--night) 48%,#0f101c 100%);color:var(--ivory);font-family:Zen Maru Gothic,Hiragino Maru Gothic ProN,sans-serif}body{min-height:100dvh}#app{width:min(520px,100%);margin:0 auto;min-height:100dvh;min-height:100svh;padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(12px + var(--safe));display:grid;grid-template-rows:auto auto auto 1fr auto auto;gap:7px}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.top{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px 10px}.brand h1{margin:0;font-family:Yuji Syuku,Yu Mincho,serif;font-weight:400;font-size:clamp(26px,7vw,40px);letter-spacing:.12em;line-height:1.1}.eyebrow,.ver{margin:0;font-size:11px;letter-spacing:.2em;color:var(--mist)}.ver{font-family:Share Tech Mono,ui-monospace,monospace;letter-spacing:.08em;color:var(--gold)}.pills{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.pill{min-width:64px;padding:6px 8px 5px;border:1px solid rgba(226,179,74,.32);background:#14182ab8;text-align:center}.pill b{display:block;font-family:Share Tech Mono,ui-monospace,monospace;font-size:15px;line-height:1.1}.pill span{font-size:10px;letter-spacing:.12em;color:var(--mist)}.how{margin:0;font-size:12px;line-height:1.55;color:var(--mist)}.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.diff{min-height:40px;border:1px solid rgba(226,179,74,.28);background:#14182a8c;letter-spacing:.08em}.diff.is-on{background:linear-gradient(180deg,#c43a48,#8a1e2c);color:var(--ivory);border-color:transparent;font-weight:700}.stage-wrap{position:relative;min-height:0;display:grid;place-items:center}.yard{position:relative;width:min(100%,96dvw,92dvh);height:100%;min-height:210px;max-height:420px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 10px 10px;background:radial-gradient(42% 28% at 50% 8%,rgba(243,230,200,.16),transparent 62%),linear-gradient(180deg,rgba(42,47,85,.35),transparent 36%),linear-gradient(180deg,#1a1e38,#161428 62%,#3a1a20);border:2px solid #7a4e22;box-shadow:inset 0 0 0 1px #e2b34a38,0 10px #0a0c16;overflow:hidden}.yard:before{content:"";position:absolute;left:8%;right:8%;bottom:18%;height:18%;background:linear-gradient(180deg,#7a2230,#4a141c);border-top:3px solid #c43a48;box-shadow:0 -2px #e2b34a59;pointer-events:none}.peg{position:relative;z-index:1;display:grid;grid-template-rows:1fr auto;min-width:0;min-height:0;align-items:end;padding:0 2px 2px}.peg.is-held{background:#e2b34a14}.peg.is-goal .rod{background:linear-gradient(180deg,#f3e6c8,#c9a24a 18%,#8a6a28)}.peg.is-flash{animation:peg-flash .28s ease}.shaft{position:relative;height:100%;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.rod{position:absolute;left:50%;bottom:8%;width:10px;height:78%;translate:-50% 0;background:linear-gradient(180deg,#d8b06a,var(--cedar) 16%,#3d2414);border-radius:6px 6px 0 0;box-shadow:inset 1px 0 #f3e6c847;pointer-events:none}.stack{position:relative;z-index:1;width:100%;display:flex;flex-direction:column-reverse;align-items:center;gap:3px;padding-bottom:10%}.disk{--w: 42%;width:var(--w);height:clamp(14px,4.2vmin,22px);border-radius:999px;background:radial-gradient(120% 80% at 50% 0%,rgba(255,244,214,.55),transparent 46%),var(--disk, #c43a48);box-shadow:inset 0 2px #fff4d673,inset 0 -3px #14100c47,0 2px #0c0a1059;border:1px solid rgba(20,16,12,.28)}.disk:after{content:"";display:block;width:46%;height:35%;margin:18% auto 0;border-radius:999px;border:1px solid rgba(243,230,200,.35)}.disk.is-held{translate:0 -28px;box-shadow:inset 0 2px #fff4d68c,0 0 0 3px #e2b34ad9,0 14px 22px #e2b34a66}.peg-name{position:relative;z-index:1;font-size:11px;letter-spacing:.18em;color:var(--mist);padding-bottom:2px}.hud{display:flex;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--mist)}.hud b{color:var(--gold);font-family:Share Tech Mono,ui-monospace,monospace;font-weight:500}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.brass,.ghost{min-height:44px;padding:0 8px;letter-spacing:.08em}.brass{background:linear-gradient(180deg,#e2b34a,#b8892c);color:#1a1420;font-weight:700;box-shadow:0 3px #7a5a1c}.brass:active{transform:translateY(2px);box-shadow:0 1px #7a5a1c}.brass:disabled,.ghost:disabled{opacity:.4}.ghost{border:1px solid rgba(226,179,74,.35);background:#14182a99;color:var(--ivory)}.ghost.is-on{background:var(--indigo)}.toast,.sheet{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none;z-index:3}.toast p,.sheet .panel{margin:0;padding:14px 18px;background:#0e101cf0;border:2px solid var(--gold);color:var(--ivory);text-align:center;letter-spacing:.08em}.toast[hidden],.sheet[hidden]{display:none}.sheet{pointer-events:auto;background:#0a0c1685}.sheet .panel{width:min(90%,320px);display:grid;gap:10px}.sheet h2{margin:0;font-family:Yuji Syuku,Yu Mincho,serif;font-weight:400;letter-spacing:.16em}.sheet .meta{margin:0;color:var(--mist);font-size:13px}.sheet .burst{height:8px;background:radial-gradient(circle,var(--gold) 0 2px,transparent 3px) 10% 50% / 8px 8px no-repeat,radial-gradient(circle,#c43a48 0 2px,transparent 3px) 50% 40% / 8px 8px no-repeat,radial-gradient(circle,var(--ivory) 0 2px,transparent 3px) 86% 60% / 8px 8px no-repeat;animation:burst 1.2s ease}@keyframes peg-flash{0%,to{background:transparent}20%,55%{background:#c43a4894;box-shadow:inset 0 0 0 2px #e25a5acc}}@keyframes burst{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.15)}to{opacity:.7;transform:scale(1)}}@media(max-width:420px){.top{grid-template-columns:1fr}.pills{justify-content:flex-start}}@media(max-height:700px){.how{display:none}.ghost,.brass,.diff{min-height:40px}.yard{min-height:180px;padding-top:8px}}@media(max-height:560px){.brand h1{font-size:24px}.disk{height:13px}.yard{min-height:150px}}@media(prefers-reduced-motion:reduce){.disk,.brass,.peg.is-flash,.sheet .burst{animation:none;transition:none}}