:root{font-family:system-ui,'Malgun Gothic',sans-serif;color:#f4efff;background:#111321;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:580px;margin:auto;padding:0 16px}header{height:66px;display:flex;align-items:center;justify-content:space-between}a{color:inherit;text-decoration:none;font-weight:800;font-size:20px}a span{font-size:11px;color:#a7a0c1;font-weight:400}header>div{display:flex;gap:6px}button{font:inherit;cursor:pointer;color:inherit;background:#29283e;border:1px solid #a49bc431;border-radius:11px;padding:10px 14px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover{filter:brightness(1.12)}button:active{transform:translateY(2px)}button:focus-visible{outline:2px solid #f4d79a;outline-offset:3px}button:disabled{opacity:.4;cursor:default}header button{padding:8px 10px;font-size:10px}#arena{height:min(790px,calc(100dvh - 110px));min-height:520px;border:1px solid #68607f60;border-radius:24px;position:relative;overflow:hidden;background:#20223c;box-shadow:0 20px 80px #08091288}canvas{display:block;width:100%;height:100%;touch-action:none}#hud{position:absolute;inset:20px 22px auto;pointer-events:none}.hudrow{display:flex;justify-content:space-between;align-items:center;color:#dfd6ef;font-size:11px;letter-spacing:1px}.hudrow button{pointer-events:auto;background:#201f3888;padding:7px 10px;font-size:10px}.score{display:flex;flex-direction:column;align-items:center;margin-top:8px}.score strong{font:800 58px ui-monospace,monospace;letter-spacing:-3px;text-shadow:0 5px 24px #11102555}.score span{font-size:8px;letter-spacing:5px;color:#c3b9da}.energy{height:6px;border-radius:10px;max-width:260px;background:#0f102c80;margin:15px auto 0;overflow:hidden}.energy i{display:block;height:100%;background:#efd49d;width:100%;border-radius:10px}#status{text-align:center;color:#d0c4e2;font-size:10px;margin-top:8px;line-height:1.6}#cue{text-align:center;font-size:12px;margin-top:12px;color:#fff0bd;font-weight:700;text-shadow:0 2px 10px #141128}#controls{position:absolute;bottom:20px;left:20px;right:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}#controls button{padding:14px 8px 12px;border-radius:18px;user-select:none;touch-action:none;box-shadow:0 6px 0 #111426;min-height:96px;border:1px solid #e9d7ff50}#turn{background:linear-gradient(150deg,#8660ac,#634383)}#climb{background:linear-gradient(150deg,#f2d8aa,#c7a77b);color:#352b3e}#controls b{display:block;font-size:13px}.glyph{font-size:27px;line-height:1.2;display:block}#controls small{display:block;font-size:9px;opacity:.6;margin-top:5px}#overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:3;padding:20px;background:#14112570;backdrop-filter:blur(5px);overflow:auto}#overlay:empty{display:none}.sheet{width:100%;text-align:center;border:1px solid #c9bce74a;border-radius:24px;background:linear-gradient(150deg,#39324cfa,#211f35fa);padding:30px 24px;box-shadow:0 20px 80px #110b2c70}.eyebrow{font-size:9px;color:#d5bddf;letter-spacing:4px}h1{font-size:52px;letter-spacing:-3px;line-height:1.1;margin:18px 0 10px;font-weight:850}h2{font-size:28px;letter-spacing:-1px;margin:14px 0}p{font-size:12px;line-height:1.9;color:#c6bed3}.accent{color:#f5d9a3}.primary{background:#f0d5a4;color:#32293d;border:0;font-weight:800}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}.actions button{min-width:110px;padding:13px 17px}.record{border-top:1px solid #c9bce72a;padding-top:18px;margin-top:24px;color:#a99eba;font-size:10px;line-height:1.9}.instructions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.instructions>div{background:#15152a66;padding:14px 6px;border-radius:13px}.instructions b{display:block;color:#f4dcae;font-size:13px;margin:6px 0}.instructions small{color:#b5aaca;font-size:10px}.example{font-size:22px;letter-spacing:3px}.helptext{text-align:left;font-size:12px;line-height:2}.count{font:800 70px ui-monospace,monospace;color:#f5d9a3}.resultNum{font:800 78px ui-monospace,monospace;margin:14px 0 0;color:#f6dfb2;line-height:1}.cards{display:grid;gap:10px;margin:18px 0}.card{text-align:left;padding:16px}.card b{display:block;font-size:14px;color:#f2d9ac}.card small{display:block;font-size:10px;color:#c8bed7;margin-top:5px}#toast{position:absolute;top:42%;left:0;right:0;pointer-events:none;text-align:center;color:#f9e4ad;font-weight:800;font-size:21px;text-shadow:0 3px 12px #151323;z-index:2}footer{display:flex;justify-content:space-between;font-size:9px;color:#80788f;padding:15px 0;gap:15px}[hidden]{display:none!important}@media(max-width:500px){main{padding:0 8px}header{height:52px;padding:0 6px}#arena{border-radius:18px;height:calc(100dvh - 86px);min-height:480px}footer{font-size:8px;padding:10px 4px}footer span:last-child{display:none}#controls{bottom:max(16px,env(safe-area-inset-bottom));left:14px;right:14px;gap:10px}#controls button{min-height:90px;padding:11px 6px}#controls b{font-size:12px}.sheet{padding:24px 18px}h1{font-size:45px}#hud{inset:16px 16px auto}.score strong{font-size:49px}.instructions{margin-top:16px}.record{margin-top:18px;padding-top:14px}.actions{margin-top:18px}}
#rankDialog{width:min(450px,calc(100vw - 28px));max-height:85dvh;overflow:auto;border:1px solid #b4a6d15a;border-radius:20px;padding:22px;background:#25223a;color:#f4efff;box-shadow:0 20px 80px #0e092b99}#rankDialog::backdrop{background:#0b091dbb;backdrop-filter:blur(4px)}.rankhead{display:flex;align-items:center;justify-content:space-between;gap:12px}.rankhead h2{font-size:21px;margin:0}.rankhead button{font-size:11px}.ranknote{font-size:10px;color:#bfb3d0;line-height:1.8}.ranktabs{display:flex;gap:8px;margin:18px 0}.ranktabs button{flex:1;padding:10px;font-size:12px}.ranktabs button[aria-pressed=true]{background:#e9cfa1;color:#32283e}#rankDate{font-size:10px;color:#a99dbb}#rankLoading{font-size:12px}#rankEntries{list-style:none;padding:0;margin:8px 0}#rankEntries li{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #bfb1dc25;gap:12px;font-size:13px}#rankEntries strong{color:#f0d7a6;text-align:right}#rankEntries small{display:block;font-size:9px;font-weight:400;color:#a99cb9;margin-top:3px}.rankform{text-align:left;display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px}.rankform label{font-size:10px;color:#c4b5d6}.rankform input{display:block;width:100%;min-width:0;background:#151427;border:1px solid #9985b653;border-radius:9px;padding:10px;color:#f6edff;margin-top:5px;font:inherit;font-size:12px}.rankform button{font-size:11px;padding:11px 12px}.rankform small{grid-column:1/-1;font-size:9px;line-height:1.6;color:#a89ab8}#rankSlot{margin-top:16px}header>div{gap:4px}@media(max-width:370px){header button{padding:8px 7px}a{font-size:18px}a span{font-size:10px}}
#controls{grid-template-columns:1fr .8fr 1fr;gap:9px}#jump{background:linear-gradient(150deg,#b6d8e4,#77a6c7);color:#203148}#controls b{font-size:12px}@media(max-width:400px){#controls{left:11px;right:11px;gap:7px}#controls b{font-size:11px}#controls button{min-height:87px}#controls small{font-size:8px}}

.instructions{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.instructions b{font-size:12px}.instructions small{font-size:9px}.jumpWarning{font-size:11px;color:#f0b5b9;margin:15px 0 0;line-height:1.7}@media(max-width:370px){.instructions b{font-size:11px}.instructions small{font-size:8px}.sheet{padding:20px 14px}.sheet h1{margin-top:12px}}