@font-face{font-family:Montserrat;src:url(/duel/fonts/Montserrat-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Montserrat;src:url(/duel/fonts/Montserrat-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Montserrat;src:url(/duel/fonts/Montserrat-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}:root{--bg: #001F3F;--surface: #001a33;--border: rgba(255, 133, 27, .15);--text: #F5F5F5;--muted: #9CA3AF;--accent: #FF851B;--accent-hover: #ff9a45;--accent-dim: rgba(255, 133, 27, .15);--gold: #d4a017;--green: #27ae60;--blue: #2980b9;--hp-green: #2ecc71;--hp-red: #e74c3c;--advantage: #f39c12;--disadvantage: #8e44ad}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Montserrat,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center}.screen{display:none;width:100%;max-width:800px;padding:2rem 1rem}.screen.active{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.title{font-size:3rem;letter-spacing:.05em;color:var(--gold);text-align:center}.subtitle{color:var(--muted);text-align:center;font-style:italic}.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.5rem;width:100%;max-width:400px;display:flex;flex-direction:column;gap:.75rem}.card h2{font-size:1.1rem;color:var(--gold)}input[type=text]{background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:.6rem .75rem;font-size:1rem;width:100%}input[type=text]:focus{outline:none;border-color:var(--accent)}button{background:var(--accent);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.65rem 1.2rem;transition:background .15s}button:hover{background:var(--accent-hover)}button:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}.muted{color:var(--muted);font-size:.9rem}.share-box{display:flex;gap:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.75rem;width:100%;max-width:500px;align-items:center}.share-box span{flex:1;font-family:monospace;font-size:.9rem;word-break:break-all}#btn-copy{flex-shrink:0;padding:.4rem .8rem;font-size:.85rem}#screen-game{gap:1rem;padding:1rem;max-width:860px}.status-bar{display:flex;justify-content:space-between;align-items:center;width:100%;gap:1rem}.player-status{flex:1;display:flex;flex-direction:column;gap:.3rem}.player-status.opponent{align-items:flex-end}.player-name{font-weight:700;font-size:1rem}.hp-bar{width:100%;height:10px;background:var(--border);border-radius:5px;overflow:hidden}.hp-fill{height:100%;background:var(--hp-green);transition:width .5s ease,background .3s;border-radius:5px}.hp-fill.critical{background:var(--hp-red);animation:pulse-hp 1s ease infinite}@keyframes pulse-hp{0%,to{opacity:1}50%{opacity:.6}}.hp-text{font-size:.8rem;color:var(--muted)}.badge{font-size:.7rem;font-weight:700;padding:.15rem .4rem;border-radius:3px;letter-spacing:.05em}.badge.advantage{background:var(--advantage);color:#000}.badge.disadvantage{background:var(--disadvantage);color:#fff}.round-display{text-align:center;flex-shrink:0}.round-num{font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}.arena{display:flex;justify-content:space-between;align-items:flex-end;width:100%;padding:1rem 0;min-height:140px;position:relative}.arena:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--border),transparent)}.arena:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px);pointer-events:none;z-index:1}.fighter{width:80px;height:120px;overflow:visible}.fighter.flipped{transform:scaleX(-1)}.stick-body{stroke:var(--text);stroke-width:2.5;stroke-linecap:round;fill:none}.stick-sword{stroke:#aaa;stroke-width:3;stroke-linecap:round;fill:none}.arena-center{flex:1;display:flex;justify-content:center;align-items:center;min-height:100px}.outcome-display{text-align:center;font-size:.95rem;line-height:1.5;color:var(--text);padding:0 1rem;opacity:0;transition:opacity .3s}.outcome-display.visible{opacity:1}.turn-state{text-align:center;font-size:.9rem;color:var(--muted);min-height:1.4em}#action-area{width:100%;display:flex;flex-direction:column;gap:.75rem}.action-category h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.5rem}.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.action-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.6rem;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;text-align:center;-webkit-user-select:none;user-select:none}.action-card:hover:not(.disabled){border-color:var(--accent);background:#ff851b14;box-shadow:0 0 20px #ff851b66}.action-card.selected{border-color:var(--accent);background:#ff851b1f}.action-card.disabled{opacity:.4;cursor:not-allowed}.action-icon{width:32px;height:32px;display:block;margin:0 auto .25rem}.action-name{font-size:.8rem;font-weight:600;display:block}.action-desc{font-size:.68rem;color:var(--muted);display:block;margin-top:.2rem;line-height:1.3}#btn-confirm{align-self:center;padding:.75rem 2rem;font-size:1.05rem;margin-top:.25rem}.history-panel{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.75rem;font-size:.85rem}.history-panel summary{cursor:pointer;color:var(--muted);-webkit-user-select:none;user-select:none}#history-log{margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem}.history-entry{padding:.5rem;border-left:3px solid var(--border);line-height:1.5}.history-entry .round-label{color:var(--muted);font-size:.75rem}.history-entry .outcome{color:var(--text)}.history-entry .hp-delta-neg{color:var(--hp-red)}.history-entry .hp-delta-pos{color:var(--hp-green)}#screen-over{text-align:center}#over-headline{font-size:2.5rem;color:var(--gold)}#over-subtext{color:var(--muted);margin-top:.5rem;line-height:1.8}.over-finisher{font-size:.85rem;color:var(--muted);font-style:italic}.over-finisher strong{color:var(--text);font-style:normal}#btn-new-game{margin-top:1.5rem}.stale-badge{display:block;font-size:.6rem;font-weight:700;color:var(--advantage);margin-top:.15rem;letter-spacing:.03em}@keyframes anim-lunge{0%{transform:translate(0)}35%{transform:translate(28px)}60%{transform:translate(25px)}to{transform:translate(0)}}@keyframes anim-slash{0%{transform:rotate(0) translate(0)}25%{transform:rotate(-15deg) translate(-5px)}65%{transform:rotate(10deg) translate(10px)}to{transform:rotate(0) translate(0)}}@keyframes anim-feint{0%{transform:translate(0)}20%{transform:translate(12px)}40%{transform:translate(-5px)}65%{transform:translate(18px)}to{transform:translate(0)}}@keyframes anim-riposte{0%{transform:translate(0) rotate(0)}20%{transform:translate(-8px) rotate(-8deg)}60%{transform:translate(22px) rotate(5deg)}to{transform:translate(0) rotate(0)}}@keyframes anim-parry{0%{transform:rotate(0)}30%{transform:rotate(-30deg) translate(-5px)}60%{transform:rotate(5deg) translate(2px)}to{transform:rotate(0)}}@keyframes anim-dodge{0%{transform:translateY(0) translate(0)}35%{transform:translateY(-22px) translate(-12px)}65%{transform:translateY(-18px) translate(-10px)}to{transform:translateY(0) translate(0)}}@keyframes anim-guard{0%{transform:rotate(0)}40%{transform:rotate(-8deg) translate(-4px)}to{transform:rotate(0)}}@keyframes anim-retreat{0%{transform:translate(0)}50%{transform:translate(-25px)}to{transform:translate(0)}}@keyframes anim-measure{0%{transform:translate(0) scale(1)}30%{transform:translate(6px) scale(1.02)}60%{transform:translate(4px) scale(1.02)}to{transform:translate(0) scale(1)}}@keyframes anim-bind{0%{transform:translate(0)}40%{transform:translate(15px) rotate(5deg)}70%{transform:translate(12px) rotate(3deg)}to{transform:translate(0) rotate(0)}}@keyframes anim-provoke{0%{transform:translate(0)}25%{transform:translate(8px) rotate(3deg)}50%{transform:translate(6px) rotate(-2deg)}75%{transform:translate(8px) rotate(2deg)}to{transform:translate(0) rotate(0)}}@keyframes anim-first-aid{0%{transform:translate(0)}30%{transform:translate(-15px) translateY(-5px)}70%{transform:translate(-14px) translateY(-5px)}to{transform:translate(0)}}@keyframes anim-take-hit{0%{filter:brightness(1);transform:translate(0)}15%{filter:brightness(4) sepia(1) hue-rotate(300deg);transform:translate(-18px)}40%{filter:brightness(2) sepia(.5) hue-rotate(300deg);transform:translate(-12px)}to{filter:brightness(1);transform:translate(0)}}.fighter.anim-lunge{animation:anim-lunge .55s ease-in-out}.fighter.anim-slash{animation:anim-slash .55s ease-in-out}.fighter.anim-feint{animation:anim-feint .65s ease-in-out}.fighter.anim-riposte{animation:anim-riposte .6s ease-in-out}.fighter.anim-parry{animation:anim-parry .5s ease-in-out}.fighter.anim-dodge{animation:anim-dodge .55s ease-in-out}.fighter.anim-guard{animation:anim-guard .45s ease-in-out}.fighter.anim-retreat{animation:anim-retreat .55s ease-in-out}.fighter.anim-measure{animation:anim-measure .6s ease-in-out}.fighter.anim-bind{animation:anim-bind .6s ease-in-out}.fighter.anim-provoke{animation:anim-provoke .65s ease-in-out}.fighter.anim-first-aid{animation:anim-first-aid .7s ease-in-out}.fighter.anim-take-hit{animation:anim-take-hit .6s ease-out}@media (max-width: 600px){.screen{padding:1rem .75rem}button{min-height:44px}.title{font-size:2rem}.card{max-width:100%;padding:1rem}input[type=text]{font-size:1rem}.share-box span{font-size:.8rem}.status-bar{gap:.5rem}.hp-bar{height:8px}.player-name{font-size:.9rem}.badge{font-size:.65rem}#screen-game{padding:.75rem .5rem}.arena{min-height:100px}.fighter{width:60px;height:88px}#action-area{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}#btn-confirm{grid-column:1 / -1}.action-category h3{font-size:.65rem;margin-bottom:.25rem}.action-grid{display:flex;flex-direction:column;gap:.25rem}.action-card{min-height:44px;padding:.4rem .25rem}.action-icon{width:24px;height:24px}.action-name{font-size:.7rem}.action-desc{display:none}.history-panel{font-size:.8rem}.history-panel summary{min-height:44px;display:flex;align-items:center}.history-entry{font-size:.78rem}#over-headline{font-size:1.75rem}}
