:root{--bg:#0d0b14;--panel:#1a1626;--panel2:#241f35;--orange:#ff6a1a;--purple:#9b4dff;--lime:#b6ff3b;--text:#f4f1ff;--muted:#a59fbf;--red:#ff4d6d}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 20% 0%,#2a1550 0,transparent 45%),radial-gradient(circle at 100% 100%,#3a1a08 0,transparent 40%),var(--bg)}
#app{flex:1;width:100%;max-width:480px;margin:0 auto;padding:16px}
button{font:inherit;cursor:pointer;border:0;color:inherit}
.screen{display:none;animation:fadeIn .35s ease}.screen.active{display:flex;flex-direction:column;align-items:stretch;gap:14px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#title{text-align:center;padding-top:28px}
.logo{font-size:64px;animation:bob 2s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-8px) rotate(-6deg)}}
h1{font-size:46px;line-height:.95;margin:0;letter-spacing:-1px;text-transform:uppercase}
h1 span{color:var(--orange);text-shadow:0 0 24px #ff6a1a88}
.tag{color:var(--muted);margin:0}
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.diff{background:var(--panel);border:2px solid var(--panel2);border-radius:14px;padding:12px 4px;font-weight:700;display:flex;flex-direction:column;gap:2px}
.diff small{color:var(--muted);font-weight:500}.diff.sel{border-color:var(--purple);box-shadow:0 0 0 3px #9b4dff44}.diff.sel small{color:var(--lime)}
.big{background:linear-gradient(135deg,var(--orange),#ff3d7f);padding:16px;border-radius:16px;font-size:20px;font-weight:800;box-shadow:0 6px 0 #a2380a;transition:transform .1s}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 #a2380a}
.ghost{background:transparent;border:2px solid var(--purple);padding:12px;border-radius:14px;font-weight:700;color:var(--text)}
.best{color:var(--lime);min-height:1em;margin:0;font-weight:600}
.how{background:var(--panel);border-radius:12px;padding:10px 14px;text-align:left;color:var(--muted)}.how summary{color:var(--text);font-weight:700}
.hud{display:grid;grid-template-columns:1.1fr .7fr 1.2fr auto;gap:8px;align-items:center;background:var(--panel);border-radius:16px;padding:10px 12px;position:sticky;top:8px;z-index:2}
.stat label{display:block;font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:1px}
.stat b{font-size:22px}#money{color:var(--lime)}#money.low{color:var(--red)}
.bar{height:10px;background:var(--panel2);border-radius:6px;overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--lime));transition:width .4s}
.stat small{color:var(--muted);font-size:12px}
.icon{background:var(--panel2);border-radius:10px;width:40px;height:40px;font-size:18px}
.track{display:grid;grid-template-columns:repeat(14,1fr);gap:3px}.track i{height:8px;border-radius:4px;background:var(--panel2)}.track i.done{background:var(--purple)}.track i.now{background:var(--orange);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.5}}
.bills{display:flex;flex-direction:column;gap:6px}.bill{background:#ff4d6d22;border:1px solid var(--red);border-radius:12px;padding:8px 12px;display:flex;justify-content:space-between;animation:slide .4s ease}
@keyframes slide{from{opacity:0;transform:translateX(-20px)}}
.card{background:var(--panel);border-radius:20px;padding:20px;border:2px solid var(--panel2);box-shadow:0 10px 30px #0008;animation:flip .45s ease}
@keyframes flip{from{opacity:0;transform:perspective(600px) rotateY(-25deg) scale(.95)}}
.card .em{font-size:52px;text-align:center}.card h3{margin:6px 0 2px;font-size:22px;text-align:center}.card p{color:var(--muted);text-align:center;margin:0 0 14px}
.card .count{font-size:12px;color:var(--purple);text-align:center;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.choice{width:100%;background:var(--panel2);border-radius:14px;padding:14px;margin-top:8px;text-align:left;display:flex;justify-content:space-between;gap:8px;align-items:center;border:2px solid transparent;transition:border-color .15s,transform .1s}
.choice:hover{border-color:var(--purple)}.choice:active{transform:scale(.98)}
.fx{display:flex;flex-direction:column;align-items:flex-end;font-size:13px;font-weight:700;white-space:nowrap}.pos{color:var(--lime)}.neg{color:var(--red)}.neu{color:var(--muted)}
.next{margin-top:4px}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--panel2);border:2px solid var(--lime);padding:10px 16px;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}.toast.show{opacity:1;animation:pop .3s}
@keyframes pop{from{transform:translateX(-50%) scale(.8)}}
.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#end{text-align:center}#end h2{margin:8px 0 0;font-size:30px}
.grade{font-size:64px;font-weight:900;color:var(--lime);text-shadow:0 0 30px #b6ff3b66;animation:pop2 .6s ease}@keyframes pop2{from{transform:scale(0) rotate(-20deg)}}
canvas{width:100%;border-radius:18px;box-shadow:0 10px 30px #0009}
.summary{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.summary li{background:var(--panel);border-radius:12px;padding:10px}.summary b{display:block;font-size:20px}.summary span{font-size:12px;color:var(--muted)}
.row{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.cta{display:block;text-decoration:none;color:var(--text);background:linear-gradient(135deg,#9b4dff33,#b6ff3b22);border:2px solid var(--lime);border-radius:16px;padding:14px}.cta b{display:block;font-size:17px;color:var(--lime)}.cta span{font-size:13px;color:var(--muted)}
footer{text-align:center;padding:14px;color:var(--muted);font-size:13px}footer a{color:var(--orange);text-decoration:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.card h2{margin:0;text-align:center}.center{text-align:center}.muted{color:var(--muted)}.small{font-size:12px}
.note{font-size:12px;color:var(--muted);text-align:center;margin:0}
input[type=range]{width:100%;accent-color:var(--orange);height:34px}
input[type=number],input[type=text]{width:100%;font:inherit;font-size:24px;font-weight:800;padding:10px 12px;border-radius:12px;border:2px solid var(--panel2);background:var(--panel2);color:var(--text);text-align:center}
.foot2{display:block;margin-top:4px;font-size:12px}
.board{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;width:min(100%,320px);margin:4px auto}
.brow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.brow.bad{animation:shake .4s}
.tile{aspect-ratio:1;border:2px solid var(--panel2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;text-transform:uppercase;background:var(--panel)}
.tile.typed{border-color:var(--purple);animation:pop2 .12s}
.tile.hit,.k.hit{background:var(--lime);border-color:var(--lime);color:#122}.tile.near,.k.near{background:var(--orange);border-color:var(--orange);color:#fff}
.tile.miss{background:#2a2535;border-color:#2a2535;color:var(--muted)}.k.miss{background:#16131f;color:#5d5672}
.tile.reveal{animation:flipT .45s ease both}@keyframes flipT{0%{transform:rotateX(90deg)}100%{transform:none}}
.tile.dance{animation:bob .6s ease}
.kb{display:flex;flex-direction:column;gap:6px;margin-top:4px}.krow{display:flex;gap:5px;justify-content:center}
.k{flex:1;max-width:36px;height:52px;border-radius:8px;background:var(--panel2);font-weight:800;font-size:15px;padding:0}.k.wide{max-width:58px;flex:1.6;font-size:12px}
.def{text-align:center}.def p{margin:6px 0 0!important;color:var(--text)!important;font-size:16px}
.dist{display:flex;flex-direction:column;gap:4px}.dist div{display:flex;align-items:center;gap:6px;font-size:13px}.dist i{display:block;background:var(--purple);border-radius:4px;padding:2px 6px;font-style:normal;font-weight:800;min-width:22px;text-align:right}.dist i.me{background:var(--lime);color:#122}
/* Stone Leaf site copy: inline style="" attributes moved here (CSP-friendly) */
html body .sl-i1{color:var(--lime)}
html body .sl-i2{color:var(--orange)}
html body .sl-i3{grid-template-columns:1fr 1fr auto}
html body .sl-i4{color:var(--lime)}