:root{--red:#c8102e;--dred:#8e0b20;--gold:#f5c04a;--cream:#fff7ec;--ink:#2a1a1a;--mut:#7a6564;--card:#fff;--line:#f0dfcf;--ok:#1b7f4b;--r:16px}
@media(prefers-color-scheme:dark){:root{--cream:#1d1214;--ink:#f6e9e2;--mut:#b49c98;--card:#2a1a1d;--line:#432a2d;--ok:#4cc98a}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:linear-gradient(var(--red),var(--dred));color:#fff}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;letter-spacing:.2px}
.pill{border:0;border-radius:99px;padding:7px 14px;background:rgba(255,255,255,.18);color:#fff;font:700 15px inherit;font-family:inherit}
main{max-width:520px;margin:0 auto;padding:16px}
h1{font-size:24px;margin:6px 0 4px;line-height:1.2}h2{font-size:18px;margin:0 0 8px}
.muted{color:var(--mut)}.center{text-align:center}.small{font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:14px 0;box-shadow:0 1px 0 rgba(0,0,0,.03)}
label{display:block;font-weight:600;font-size:14px;margin:12px 0 4px}
input,textarea,select{width:100%;font:inherit;color:inherit;background:var(--cream);border:1.5px solid var(--line);border-radius:12px;padding:12px;min-height:46px}
input:focus,textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
textarea{resize:vertical;min-height:70px;word-break:break-all}
button{font:inherit;cursor:pointer}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px 16px;background:var(--red);color:#fff;font-weight:800;font-size:17px;min-height:50px;text-align:center;text-decoration:none}
.btn:active{transform:translateY(1px)}.btn[disabled]{opacity:.55;cursor:default}
.btn.gold{background:var(--gold);color:#4a1b00}.btn.ghost{background:transparent;color:var(--red);border:2px solid var(--red)}
@media(prefers-color-scheme:dark){.btn.ghost{color:var(--gold);border-color:var(--gold)}}
.btn.sm{display:inline-block;width:auto;padding:8px 14px;font-size:15px;min-height:40px;border-radius:12px}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.row>.fix{flex:0 0 auto}
.seg{display:flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{flex:1;border:0;background:transparent;color:inherit;padding:11px 8px;font-weight:700;min-height:46px}
.seg button[aria-pressed=true]{background:var(--red);color:#fff}
.step{display:flex;align-items:center;gap:8px}.step button{flex:0 0 46px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--cream);color:inherit;font-size:22px;font-weight:700}
.step input{text-align:center;font-weight:700}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:6}
.tabs button{flex:1;border:0;background:none;color:var(--mut);padding:14px 4px;font-weight:700;font-size:15px;min-height:56px}
.tabs button[aria-current=page]{color:var(--red);box-shadow:inset 0 3px 0 var(--red)}
@media(prefers-color-scheme:dark){.tabs button[aria-current=page]{color:var(--gold);box-shadow:inset 0 3px 0 var(--gold)}}
.chip{display:inline-block;border-radius:99px;padding:2px 10px;font-size:13px;font-weight:700;background:var(--line);color:var(--ink)}
.chip.wait{background:#ffe9b3;color:#6a4300}.chip.open{background:#cdeedd;color:#0d5a34}.chip.back{background:#e3e3ee;color:#37375a}
.env-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.env-row:first-child{border-top:0}
.env-row .amt{font-weight:800;font-size:18px;min-width:64px}.env-row .grow{flex:1;min-width:0}
.crown{color:var(--gold);font-weight:800}
.stats{display:flex;gap:8px;margin:10px 0}.stats>div{flex:1;background:var(--cream);border-radius:12px;padding:10px;text-align:center}.stats b{display:block;font-size:20px}
.hero{text-align:center;padding:8px 0 0}
.env{width:min(78vw,300px);height:auto;margin:-34px auto 0;display:block;overflow:visible}
.env .body{fill:var(--red)}.env .pocket{fill:var(--dred)}.env .flap{fill:#d71f3c;transform-origin:120px 30px;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.env .seal{fill:var(--gold)}.env text{font:800 26px system-ui;fill:#7a3a00}
.env .card-in{fill:#fffdf5;transition:transform .8s .25s cubic-bezier(.3,1.3,.5,1);transform:translateY(0)}
.env.opened .flap{transform:scaleY(-1)}.env.opened .card-in{transform:translateY(-62px)}.env.opened .seal,.env.opened text{opacity:0;transition:opacity .2s}
.env.shake{animation:shake .5s}
@keyframes shake{20%{transform:rotate(-3deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}
.big{font-size:56px;font-weight:900;line-height:1;margin:10px 0 2px;color:var(--red)}
@media(prefers-color-scheme:dark){.big{color:var(--gold)}}
.pop{animation:pop .6s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.quote{font-style:italic;margin:8px 0}
.warn{border-left:4px solid var(--gold);padding:8px 12px;background:var(--cream);border-radius:8px;font-size:14px}
.err{border-left:4px solid var(--red);padding:8px 12px;background:var(--cream);border-radius:8px;color:var(--red)}
@media(prefers-color-scheme:dark){.err{color:#ff9aa8}}
#toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,20px);background:#222;color:#fff;border-radius:12px;padding:10px 16px;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;z-index:9;font-size:15px}
#toast.show{opacity:1;transform:translate(-50%,0)}
a{color:var(--red)}@media(prefers-color-scheme:dark){a{color:var(--gold)}}
details summary{cursor:pointer;font-weight:700;padding:6px 0}
code,.mono{font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all}
.steps{counter-reset:s;list-style:none;padding:0;margin:8px 0}.steps li{counter-increment:s;padding:6px 0 6px 38px;position:relative}
.steps li:before{content:counter(s);position:absolute;left:0;top:5px;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px}

[hidden]{display:none!important}
.linkbtn{background:none;border:0;padding:0;color:var(--red);font:inherit;text-decoration:underline;cursor:pointer;min-height:32px}
@media(prefers-color-scheme:dark){.linkbtn{color:#ff8a98}}
.warnbox{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--card))}
.words{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;padding-left:28px;margin:8px 0;font-size:17px}
.words li{padding:4px 0}
.wordcheck{width:100%}
.lockline{margin-top:2px}
details>summary{cursor:pointer;min-height:32px}
details.adv{margin-top:12px}
details.adv summary{cursor:pointer;font-size:.9rem;opacity:.8}

.stack{display:grid;gap:10px;margin-top:14px}.stack .btn.sm{display:block;width:100%;text-align:center}
.landing h1{margin-bottom:6px}.landing .env{margin-top:-52px;margin-bottom:-24px;width:min(52vw,190px)}
.warnbox.slim{display:flex;gap:12px;align-items:center;padding:10px 14px;margin-top:10px}.warnbox.slim .grow{flex:1;min-width:0}.warnbox.slim .btn{flex:0 0 auto}
.env-row{flex-wrap:wrap}.env-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}.env-row .amt{min-width:0}
.env-act{display:flex;gap:8px;align-items:center;width:100%}.label-in{flex:1;min-width:0;padding:8px 10px;font-size:15px;min-height:40px}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.confetti i{position:absolute;top:38%;width:9px;height:14px;border-radius:2px;animation:conf 1.6s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes conf{to{transform:translate(var(--x),55vh) rotate(var(--r));opacity:0}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}}