:root{--ink:#1b1209;--parchment:#f6e7c1;--parchment-dark:#e8d29b;--paper:#fff8e6;--red:#b3261e;--red-dark:#7d1a14;--gold:#f2b705;--gold-dark:#b98a00;--steel:#c9ccd1;--green:#2a8a3e;--muted:#6b5a3e;--outline:3px solid var(--ink);--shadow:0 5px 0 var(--ink);--radius:16px;color:var(--ink);background:var(--parchment);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Nunito,system-ui,sans-serif;font-weight:700}*{box-sizing:border-box}body{background:radial-gradient(circle at 20% 10%, #fff3cf 0, transparent 40%), radial-gradient(circle at 80% 90%, #ecd59e 0, transparent 45%), var(--parchment);min-height:100dvh;margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}h1,h2,.display{letter-spacing:.04em;margin:0;font-family:Bangers,Impact,sans-serif;font-weight:400}#root{max-width:960px;margin:0 auto}.app{flex-direction:column;min-height:100dvh;display:flex}.panel{background:var(--paper);border:var(--outline);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.btn{border:var(--outline);box-shadow:var(--shadow);letter-spacing:.05em;border-radius:14px;padding:12px 20px;font-family:Bangers,sans-serif;font-size:1.5rem;transition:transform 60ms,box-shadow 60ms}.btn:active:not(:disabled),.btn-round:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.btn-big{width:100%;padding:14px 20px;font-size:2.2rem}.btn-primary{background:var(--gold)}.btn-secondary{background:var(--steel)}.btn-fight{background:var(--red);color:#fff;text-shadow:2px 2px 0 var(--ink)}.btn-ghost{box-shadow:none;background:0 0;border-style:dashed;width:100%;font-size:1.3rem}.btn-round{border:var(--outline);width:52px;height:52px;box-shadow:0 4px 0 var(--ink);border-radius:50%;flex-shrink:0;place-items:center;font-size:1.8rem;line-height:1;transition:transform 60ms,box-shadow 60ms;display:grid}.btn-minus{background:#f08a7e}.btn-plus{background:#8fd694}.btn-icon{border:var(--outline);background:var(--paper);border-radius:12px;place-items:center;width:44px;height:44px;font-size:1.3rem;display:grid}.btn-x{border:2px solid var(--ink);background:var(--paper);border-radius:50%;flex-shrink:0;width:32px;height:32px;margin-left:auto;font-size:.9rem}.text-input{border:var(--outline);background:#fff;border-radius:12px;width:100%;min-width:0;padding:10px 12px;font-size:1.1rem}.text-input:focus,.name-input:focus{outline:3px solid var(--gold);outline-offset:2px}.counter{flex-direction:column;align-items:center;gap:6px;display:flex}.counter__label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center;font-size:.85rem}.counter__row{align-items:center;gap:16px;display:flex}.counter__value{text-align:center;min-width:2.2ch;font-family:Bangers,sans-serif;font-size:3rem;line-height:1}.counter--lg .counter__value{color:var(--red);text-shadow:3px 3px 0 var(--ink);font-size:6rem}.counter--lg .btn-round{width:68px;height:68px;font-size:2.4rem}.counter--sm .counter__row{gap:10px}.counter--sm .counter__value{font-size:2rem}.counter--sm .btn-round{width:40px;height:40px;box-shadow:0 3px 0 var(--ink);font-size:1.4rem}.player-icon{border:var(--outline);color:#fff;text-shadow:2px 2px 0 var(--ink);border-radius:50%;flex-shrink:0;place-items:center;font-family:Bangers,sans-serif;display:grid;overflow:hidden}.player-icon img{object-fit:cover;background:var(--paper);width:100%;height:100%}.setup{flex-direction:column;gap:16px;max-width:560px;margin:0 auto;padding:24px 16px 40px;display:flex}.title{text-align:center;color:var(--red);text-shadow:3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);font-size:4rem;line-height:.9;transform:rotate(-2deg)}.title span{color:var(--gold);font-size:1.8rem;display:block}.setup__player{flex-direction:column;gap:12px;display:flex}.setup__player-head{align-items:center;gap:12px;display:flex}.icon-picker{flex-wrap:wrap;gap:8px;display:flex}.icon-picker__btn{background:0 0;border:3px solid #0000;border-radius:50%;padding:2px}.icon-picker__btn.is-selected{border-color:var(--gold);background:var(--gold)}.topbar{z-index:10;height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;background:var(--red);border-bottom:var(--outline);align-items:center;gap:10px;display:flex;position:sticky;top:0}.topbar__slot{flex:1;align-items:center;min-width:0;padding:4px 0;display:flex;position:relative;overflow:hidden}.tabs{gap:8px;padding-bottom:3px;display:flex}.tabs--measure{visibility:hidden;pointer-events:none;width:max-content;position:absolute;top:0;left:0}.btn-menu{box-shadow:0 3px 0 var(--ink);flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:4px;display:flex}.btn-menu span{background:var(--ink);border-radius:2px;width:20px;height:3px;display:block}.tab--current{min-width:0;max-width:100%}.tab--current .tab__name{flex:1;min-width:0;max-width:none}.tab__count{color:var(--muted);padding-left:2px;font-size:.8rem}.tab{border:var(--outline);background:var(--parchment-dark);box-shadow:0 3px 0 var(--ink);white-space:nowrap;border-radius:999px;flex-shrink:0;align-items:center;gap:8px;padding:4px 12px 4px 4px;display:flex}.tab.is-active{background:var(--gold)}.tab__name{text-overflow:ellipsis;max-width:9ch;overflow:hidden}.tab__level{background:var(--ink);color:var(--gold);border-radius:999px;place-items:center;min-width:28px;height:28px;font-family:Bangers,sans-serif;font-size:1.2rem;display:grid}.drawer{z-index:50;position:fixed;inset:0}.drawer__backdrop{background:#1b12098c;animation:.15s ease-out fade;position:absolute;inset:0}.drawer__panel{background:var(--parchment);border-right:var(--outline);width:min(340px,86vw);padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;animation:.2s ease-out slide-in;display:flex;position:absolute;top:0;bottom:0;left:0;overflow-y:auto}.drawer__head{align-items:center;display:flex}.drawer__head h2{color:var(--red);font-size:2rem}.drawer__note{color:var(--muted);margin:0;font-size:.9rem}.drawer__list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.drawer__player{border:var(--outline);background:var(--paper);width:100%;box-shadow:0 3px 0 var(--ink);text-align:left;border-radius:999px;align-items:center;gap:10px;padding:6px 12px 6px 6px;display:flex}.drawer__player.is-active{background:var(--gold)}.drawer__name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:1.1rem;overflow:hidden}.drawer__stats{color:var(--muted);flex-direction:column;align-items:flex-end;font-size:.8rem;line-height:1.2;display:flex}.drawer__player.is-active .drawer__stats{color:var(--ink)}.drawer__settings{margin-top:auto;font-size:1.3rem}@keyframes slide-in{0%{transform:translate(-100%)}}@keyframes fade{0%{opacity:0}}.settings{flex-direction:column;gap:16px;width:100%;max-width:560px;margin:0 auto;padding:20px 16px 32px;display:flex}.settings__head{align-items:center;gap:14px;display:flex}.settings__head h1{color:var(--red);text-shadow:2px 2px 0 var(--ink);font-size:2.6rem}.btn-back{padding:8px 14px;font-size:1.1rem}.settings__row{justify-content:space-between;align-items:center;gap:16px;display:flex}.settings__row--stack{flex-direction:column;align-items:stretch}.settings__row h2{font-size:1.6rem}.settings__row p{color:var(--muted);margin:4px 0 0;font-size:.9rem}.settings__confirm{grid-template-columns:1fr 1fr;gap:10px;display:grid}.settings__confirm .btn,.settings__row--stack>.btn{font-size:1.3rem}.switch{border:var(--outline);background:var(--steel);width:92px;height:46px;box-shadow:0 3px 0 var(--ink);border-radius:999px;flex-shrink:0;transition:background .15s;position:relative}.switch.is-on{background:var(--green)}.switch__knob{border:2px solid var(--ink);background:var(--paper);border-radius:50%;width:32px;height:32px;transition:transform .15s;position:absolute;top:4px;left:4px}.switch.is-on .switch__knob{transform:translate(46px)}.switch__text{letter-spacing:.05em;font-family:Bangers,sans-serif;font-size:1.1rem;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.switch.is-on .switch__text{color:#fff;text-shadow:1px 1px 0 var(--ink);left:12px;right:auto}.dashboard{flex-direction:column;gap:16px;width:100%;max-width:560px;margin:0 auto;padding:20px 16px 32px;display:flex}.dashboard__hero{flex-direction:column;align-items:center;gap:8px;display:flex}.dashboard__hero .player-icon{box-shadow:0 6px 0 var(--ink);border-width:5px}.name-input{text-align:center;letter-spacing:.04em;background:0 0;border:none;border-radius:10px;width:100%;font-family:Bangers,sans-serif;font-size:2.4rem}.level-track{grid-template-columns:repeat(10,1fr);gap:4px;margin-top:14px;display:grid}.level-track span{border:2px solid var(--ink);background:var(--paper);border-radius:4px;height:12px}.level-track span.is-on{background:var(--gold)}.level-track span:last-child{border-color:var(--red)}.power{text-align:center;background:var(--ink);color:var(--gold);border-radius:var(--radius);box-shadow:0 5px 0 var(--red-dark);padding:12px}.power__label{text-transform:uppercase;letter-spacing:.12em;color:var(--parchment);font-size:.85rem}.power__value{font-family:Bangers,sans-serif;font-size:5rem;line-height:1}.fight{flex-direction:column;gap:16px;padding:16px 16px 32px;display:flex}.scoreboard{top:calc(72px + env(safe-area-inset-top));z-index:5;border:var(--outline);border-radius:var(--radius);box-shadow:var(--shadow);color:#fff;text-shadow:2px 2px 0 var(--ink);grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 12px 6px;transition:background .2s;display:grid;position:sticky}.scoreboard.is-winning{background:var(--green)}.scoreboard.is-losing{background:var(--red)}.scoreboard__side{text-align:center}.scoreboard__label{text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}.scoreboard__value{font-family:Bangers,sans-serif;font-size:3.6rem;line-height:1}.scoreboard__vs{color:var(--gold);font-family:Bangers,sans-serif;font-size:1.6rem}.scoreboard__status{text-align:center;letter-spacing:.08em;grid-column:1/-1;font-family:Bangers,sans-serif;font-size:1.4rem}.fight__columns{grid-template-columns:1fr;gap:16px;display:grid}@media (width>=720px){.fight__columns{grid-template-columns:1fr 1fr}}.fight__col{flex-direction:column;gap:12px;display:flex}.col-title{font-size:1.8rem}.card{border:var(--outline);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--paper);flex-direction:column;gap:10px;padding:12px;display:flex}.card--hero{background:#fff3c4}.card--helper{background:#e4f0d8}.card--monster{background:#f6d9d3}.card__head{align-items:center;gap:10px;display:flex}.card__name{font-size:1.15rem}.card__sub{color:var(--muted);font-size:.85rem}.card__counters{flex-wrap:wrap;justify-content:space-around;gap:8px;display:flex}.monster-name{flex:1}.monster-power{text-align:center;min-width:2ch;color:var(--red);font-family:Bangers,sans-serif;font-size:2rem}.helper-select{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);flex-direction:column;gap:6px;font-size:.85rem;display:flex}.helper-select select{text-transform:none;letter-spacing:normal;color:var(--ink)}.fight__outcome{flex-direction:column;gap:14px;display:flex}.fight__buttons{grid-template-columns:1fr 1fr;gap:10px;display:grid}.fight__buttons .btn{flex-direction:column;align-items:center;gap:6px;padding:10px 8px;font-size:1.25rem;display:flex}.btn-art{object-fit:contain;filter:drop-shadow(2px 2px #1b120959);width:72px;height:72px}.btn-primary .btn-art{border:2px solid var(--ink);border-radius:14px}.victory{z-index:100;background:#1b1209cc;place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow:hidden}.victory__card{background:var(--paper);border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);text-align:center;border-radius:24px;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:420px;padding:28px 20px 24px;animation:.5s cubic-bezier(.2,1.6,.4,1) pop;display:flex;position:relative}.victory__crown{z-index:1;margin-bottom:-28px;font-size:3.5rem;animation:1.2s ease-in-out infinite bob}.victory__title{color:var(--red);text-shadow:3px 3px 0 var(--ink);font-size:3rem}.victory__sub{color:var(--muted);margin:0}.victory__buttons{grid-template-columns:1fr 1fr;gap:10px;width:100%;display:grid}.confetti span{border:2px solid var(--ink);background:var(--gold);width:10px;height:16px;animation:linear infinite fall;position:absolute;top:-20px}.confetti span:nth-child(3n){background:var(--red)}.confetti span:nth-child(3n+1){background:var(--steel)}@keyframes fall{to{transform:translateY(110vh)rotate(720deg)}}@keyframes pop{0%{opacity:0;transform:scale(.4)}}@keyframes bob{50%{transform:translateY(-6px)rotate(-6deg)}}@media (width>=768px){.dashboard{grid-template-columns:1fr 1fr;grid-template-areas:"hero level""hero gear""power fight";align-items:stretch;gap:20px;max-width:900px;padding-top:32px;display:grid}.dashboard__hero{grid-area:hero;justify-content:center}.dashboard__hero .player-icon{width:220px!important;height:220px!important}.dashboard .panel--level{grid-area:level}.dashboard .panel--gear{grid-area:gear;place-items:center;display:grid}.dashboard .power{grid-area:power}.dashboard .btn-fight{grid-area:fight;font-size:3rem}.fight{width:100%;max-width:960px;margin:0 auto}.btn-art{width:96px;height:96px}}@media (width<=380px){.topbar{padding-left:10px;padding-right:10px}.counter--lg .counter__value{font-size:4.8rem}.counter--lg .btn-round{width:58px;height:58px}.power__value{font-size:4rem}.scoreboard__value{font-size:2.8rem}.btn-art{width:56px;height:56px}.fight__buttons .btn{font-size:1.05rem}}@media (prefers-reduced-motion:reduce){.drawer__panel,.drawer__backdrop,.confetti,.victory__crown,.victory__card{animation:none}.confetti{display:none}}