:root{--bg: #161222;--bg-deep: #100d1c;--ink: #0c0914;--panel: #2b2346;--panel-2: #241c3c;--cream: #f6efe2;--cream-dim: #d9ccb6;--muted: #c4b7d6;--gold: #f2c14e;--gold-ink: #2a1c08;--line: #4a3d68;--hp: #8fde86;--hp-low: #ef7d78;--danger: #ffb0aa;--frame: #f3e6cf;--display: "Silkscreen", "Courier New", monospace;--sans: "Outfit", "Segoe UI", sans-serif;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background-color:var(--bg);background-image:radial-gradient(#f6efe214 1px,transparent 1px);background-size:8px 8px;color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.5}img{display:block;max-width:100%}button,input,select{font:inherit;color:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0}a{color:var(--cream);text-decoration-thickness:2px;text-underline-offset:4px}a:hover{color:var(--gold)}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}::selection{background:var(--gold);color:var(--gold-ink)}.skip{position:absolute;left:12px;top:-40px;background:var(--gold);color:var(--gold-ink);padding:8px 12px;z-index:40}.skip:focus{top:12px}.kicker{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}.lede{color:var(--cream-dim);max-width:58ch}.fine{color:var(--muted);font-size:14px;max-width:52ch}.topbar{position:sticky;top:0;z-index:20;background:#141022;border-bottom:4px solid var(--frame);box-shadow:0 4px 0 var(--ink)}.topbar-inner{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:14px;letter-spacing:.04em;margin-right:auto}.mark{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}nav{display:flex;gap:18px}nav a{text-decoration:none;font-weight:600}.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}main{max-width:1120px;margin:0 auto;padding:48px 20px 72px}.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:40px;align-items:center}.hero-copy{display:flex;flex-direction:column;gap:16px}h1{font-size:clamp(36px,5vw,58px);line-height:1.02;letter-spacing:-.035em;font-weight:700}h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1.1}.hero-connected,.wallet-block{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.wallet-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,520px)}.wallet-btn,.btn,.session,.card,.stage,.steps li,.inset,.locked,.add-tile,.dialog,.pit{border:4px solid var(--ink)}.wallet-btn{display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel);padding:8px 12px 8px 8px;box-shadow:4px 4px 0 var(--ink);min-height:72px}.wallet-btn:hover:not(:disabled){background:#352b58}.wallet-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.wallet-btn:disabled{cursor:wait;opacity:.72}.wallet-btn img,.session img{width:48px;height:48px;object-fit:cover;border:2px solid var(--ink);flex:none}.wallet-btn strong,.session strong{display:block;font-size:16px}.wallet-btn small,.session small{display:block;color:var(--muted);font-size:13px}.btn{background:var(--panel);color:var(--cream);box-shadow:4px 4px 0 var(--ink);padding:12px 16px;font-weight:700}.btn:hover:not(:disabled){background:#352b58}.btn:active:not(:disabled){transform:translate(4px,4px);box-shadow:none}.btn:disabled{cursor:not-allowed;opacity:.55}.btn.gold{background:var(--gold);color:var(--gold-ink)}.btn.gold:hover:not(:disabled){background:#ffd36a}.btn.slim,.btn.compact{padding:8px 12px;box-shadow:3px 3px 0 var(--ink);font-size:14px}.session{display:flex;align-items:center;gap:10px;background:var(--panel-2);padding:8px;box-shadow:4px 4px 0 var(--ink)}.notice{margin:0;padding:10px 12px;background:var(--bg-deep);border:3px solid var(--ink);box-shadow:inset 4px 0 0 var(--gold);color:var(--cream);font-size:14px;max-width:520px}.stage{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:8px;min-height:420px;padding:36px 20px 46px;background:#1c1630;box-shadow:0 0 0 4px var(--frame),8px 8px 0 var(--ink)}.stage:after{content:"";position:absolute;left:28px;right:28px;bottom:22px;height:12px;background:#4a3420;box-shadow:0 4px #24160e}.tilt,.vs{position:relative;z-index:1}.tilt-left{transform:rotate(-6deg);transform-origin:50% 100%}.tilt-right{transform:rotate(6deg);transform-origin:50% 100%}.vs{align-self:center;width:64px;height:64px;display:grid;place-items:center;margin-bottom:36px;background:var(--gold);color:var(--gold-ink);font-family:var(--display);font-size:16px;border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);flex:none}.card{width:210px;background:var(--panel);box-shadow:0 0 0 3px var(--frame),6px 6px 0 var(--ink);padding:12px;display:flex;flex-direction:column;gap:10px;position:relative}.card.fresh{box-shadow:0 0 0 3px var(--gold),6px 6px 0 var(--ink)}.card.fainted{opacity:.55}.card.shake{animation:nudge .18s steps(2,end)}@keyframes nudge{50%{transform:translate(-6px)}}.card-top,.move-row,.hp-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-top h3{font-size:18px;letter-spacing:-.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.type{font-family:var(--display);font-size:10px;line-height:1;padding:5px 6px;border:2px solid var(--ink);flex:none}.type.fire{background:#ffb087;color:#3a140c}.type.water{background:#9ad7ff;color:#062033}.type.grass{background:#b6e7a1;color:#10240c}.type.electric{background:#ffe56a;color:#2a2208}.type.psychic{background:#e7b6ff;color:#2a1038}.art{height:158px;background:#100c18;border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--line);display:grid;place-items:center;overflow:hidden}.art img{height:142px;width:auto;max-width:100%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}.crest span{font-family:var(--display);font-size:42px;color:var(--gold)}.hp-row{font-size:13px;font-weight:700}.hp-bar{display:flex;gap:3px;flex:1}.hp-bar i{flex:1;height:10px;max-width:14px;background:#3a314c;display:block}.hp-bar i.on{background:var(--hp)}.hp-bar.low i.on{background:var(--hp-low)}.move-row{background:var(--bg-deep);border:3px solid var(--ink);padding:8px}.move-row small{display:block;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.move-row strong{font-size:20px}.stamp{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-12deg);border:4px solid var(--hp-low);color:var(--hp-low);font-family:var(--display);font-size:14px;padding:6px 8px;background:#100c18ee}.text-btn{background:transparent;border:0;color:var(--muted);padding:0;font-size:13px;font-weight:600;text-align:left;box-shadow:none}.text-btn:hover{color:var(--danger)}.section{margin-top:88px}.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;max-width:68ch}.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.steps li{background:var(--panel);box-shadow:0 0 0 3px var(--frame),6px 6px 0 var(--ink);padding:16px;display:flex;flex-direction:column;gap:8px;min-height:210px}.steps span{font-family:var(--display);color:var(--gold);font-size:12px}.steps h3,.inset h3,.locked h3{font-size:20px;letter-spacing:-.02em}.steps p,.inset p,.locked p{color:var(--cream-dim);font-size:15px}.manual{margin-top:22px;display:grid;grid-template-columns:1.05fr .95fr;gap:18px}.inset,.locked{background:var(--panel-2);box-shadow:6px 6px 0 var(--ink);padding:18px}.chart table{width:100%;border-collapse:collapse;margin-top:14px}.chart th,.chart td{text-align:left;padding:8px 6px;border-bottom:2px solid #3a3158;font-size:15px}.chart th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}.modifiers{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;color:var(--cream-dim);font-size:15px}.formula{margin-top:12px;font-weight:700;color:var(--cream)}.transcript{margin-top:14px;background:var(--bg-deep);border:3px solid var(--ink);padding:12px;display:flex;flex-direction:column;gap:8px}.transcript p{color:var(--cream)}.example>p:last-child{margin-top:14px}.pit{background:#1c1630;box-shadow:0 0 0 4px var(--frame),8px 8px 0 var(--ink);padding:22px;display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:18px;align-items:center;justify-content:center}.fighter{display:flex;flex-direction:column;gap:8px;align-items:center}.side{font-family:var(--display);font-size:12px;color:var(--gold)}.console{display:flex;flex-direction:column;gap:12px;min-width:0}.log{background:var(--bg-deep);border:3px solid var(--ink);min-height:168px;max-height:220px;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.log p{font-size:15px}.console-actions{display:flex;flex-wrap:wrap;gap:10px}.binder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,240px));gap:22px;align-items:start}.binder-grid .card,.binder-grid .add-tile{width:100%}.add-tile{min-height:360px;background:transparent;color:var(--cream);border-style:dashed;border-color:var(--gold);box-shadow:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:18px;text-align:left}.add-tile:hover:not(:disabled){background:#241c3c}.plus{font-family:var(--display);font-size:28px;color:var(--gold)}.add-tile small,.dialog-actions p{color:var(--muted);font-size:14px;font-weight:500}.locked{max-width:640px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}.footer{border-top:4px solid var(--ink);background:#120e1c;padding:22px 20px 32px}.footer p{max-width:1120px;margin:0 auto;color:var(--muted);font-size:14px}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%);z-index:25;width:min(520px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:16px;background:#241c3c;color:var(--cream);border:4px solid var(--ink);box-shadow:0 0 0 3px var(--frame),6px 6px 0 var(--ink);padding:12px 14px}.toast p{margin:0;font-size:14px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#0c0914cc;display:grid;place-items:center;padding:20px}.dialog{width:min(560px,100%);max-height:min(92vh,820px);overflow:auto;background:#241c3c;box-shadow:0 0 0 4px var(--frame),8px 8px #000;padding:18px}.dialog-top{display:flex;align-items:flex-end;gap:12px}.dialog-top h2{margin-right:auto}.dialog .lede{margin:10px 0 16px}.card-form{display:flex;flex-direction:column;gap:14px}.card-form label,.card-form legend{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}.card-form input,.card-form select{background:var(--bg-deep);border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--line);padding:10px 12px;border-radius:0}.card-form em{color:var(--danger);font-style:normal;font-weight:600;font-size:13px}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}fieldset{border:0;margin:0;padding:0}.portraits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.portrait-pick{position:relative;background:var(--bg-deep);border:3px solid var(--ink);padding:8px;gap:8px;cursor:pointer}.portrait-pick input{position:absolute;opacity:0;pointer-events:none}.portrait-pick .art{height:92px}.portrait-pick .art img{height:80px}.portrait-pick span{font-size:13px}.portrait-pick:has(input:checked){box-shadow:0 0 0 3px var(--gold)}.dialog-actions{display:flex;align-items:center;gap:12px}.dialog-actions p{margin:0}@media(max-width:980px){.hero,.manual,.steps,.pit{grid-template-columns:1fr}.hero{gap:28px}h1{max-width:16ch}.stage{min-height:0}.pit{justify-items:center}.console{width:min(100%,460px)}.steps li{min-height:0}}@media(max-width:640px){.wallet-row,.split,.portraits,.dialog-actions{grid-template-columns:1fr}.dialog-actions{display:flex;flex-direction:column;align-items:stretch}.stage{flex-direction:column;align-items:center;padding-top:28px}.tilt-left,.tilt-right{transform:none}.vs{margin:0}.topbar-inner{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 12px}.brand{margin-right:0}nav{justify-self:end;gap:14px}.top-actions{grid-column:1 / -1;width:100%;flex-wrap:nowrap}.session{flex:1;min-width:0;width:auto;padding:6px;flex-wrap:nowrap}.session>span{min-width:0}.session .btn.slim{padding:6px 8px;font-size:13px}.session img{width:36px;height:36px}.copy-btn{display:none}.top-actions .btn.compact{flex:none;padding:10px 12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card.shake,.wallet-btn,.btn{animation:none;transition:none}}
