:root{--font: ui-monospace, "Cascadia Mono", "Consolas", "Menlo", monospace;--radius: 2px;--gap: 12px;--tap: 44px}[data-mood=grim]{--bg: #14110f;--bg2: #221c18;--panel: #2b231e;--border: #4a3a2e;--text: #d9cfc1;--muted: #a89b8a;--accent: #e8705f;--accent2: #c98a2b;--good: #6f9a4a;--bad: #e5675a;--on-accent: #14110f}[data-mood=cozy]{--bg: #f3e9c9;--bg2: #e6d6a8;--panel: #fff8e1;--border: #8a6d3b;--text: #3b2f1e;--muted: #6a5a3f;--accent: #356b26;--accent2: #7a4f0c;--good: #2f6b20;--bad: #a33a28;--on-accent: #ffffff}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);font-size:15px;-webkit-tap-highlight-color:transparent;background:#14110f}.app{min-height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--text)}.app[data-mood=grim]{background:radial-gradient(ellipse at 50% 30%,#2a211b 0%,var(--bg) 70%)}.app-main{flex:1;width:100%;max-width:480px;margin:0 auto;padding:16px 16px 88px}@media(orientation:landscape)and (min-width:800px){.app-main{max-width:960px}}h1,h2,h3{margin:0 0 8px;letter-spacing:.02em}.stack{display:flex;flex-direction:column;gap:var(--gap)}.row{display:flex;align-items:center;gap:8px;min-height:var(--tap)}.panel{background:var(--panel);border:2px solid var(--border);box-shadow:0 2px 0 var(--border);padding:12px;border-radius:var(--radius)}.btn{min-height:var(--tap);padding:8px 16px;font:inherit;font-weight:700;color:var(--text);background:var(--bg2);border:2px solid var(--border);box-shadow:0 3px 0 var(--border);border-radius:var(--radius);cursor:pointer}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--border)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--on-accent)}.btn-ghost{background:transparent}.btn-danger{background:var(--bad);color:var(--on-accent)}textarea,input[type=text]{font:inherit;width:100%;padding:8px;background:var(--bg2);color:var(--text);border:2px solid var(--border)}.error{color:var(--bad)}.muted{color:var(--muted)}.title-screen{display:flex;flex-direction:column;justify-content:center;min-height:80vh;gap:24px;text-align:center}.title-logo{font-size:40px;color:var(--accent2);text-shadow:3px 3px 0 #000}.title-logo span{display:block;font-size:18px;color:var(--muted);letter-spacing:.4em}.subtitle{color:var(--muted);margin:0}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;background:var(--panel);border-top:2px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{flex:1;max-width:96px;min-height:56px;font:inherit;font-size:14px;background:none;border:none;color:var(--muted)}.bottom-nav button.active{color:var(--accent);font-weight:700}.callout{border-color:var(--accent2)}.rarity-magic{box-shadow:0 0 8px var(--accent2)}.rarity-rare{box-shadow:0 0 12px var(--bad)}.burst{display:inline-block;font-weight:700;animation:burst .9s ease-out 1}@keyframes burst{0%{transform:scale(.4);opacity:0;text-shadow:0 0 0 var(--good)}50%{transform:scale(1.35);opacity:1;text-shadow:0 0 14px var(--good)}to{transform:scale(1);text-shadow:0 0 4px var(--good)}}.shake{animation:shake .3s linear 1}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px)}}@media(orientation:landscape)and (min-width:700px){.app-main>.stack{display:grid;grid-template-columns:1fr 1fr;align-items:start;column-gap:16px}.app-main>.stack>h1,.app-main>.stack>h2,.app-main>.stack>.span-all,.app-main>.stack>canvas{grid-column:1 / -1}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.app[data-reduced=true] *{transition:none!important;animation:none!important}input[type=checkbox]{width:24px;height:24px}small{font-size:14px}select,option,input,button{font-family:inherit;font-size:14px}