body{background:#0d172b;color:#edf6ff}.duel-shell{max-width:1200px;padding:0 26px 30px}.duel-header{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #ffffff20;font-size:13px}.duel-header a{color:#d3eaff;text-decoration:none}.duel-header b{font-size:12px;color:#89d9b5}.duel-intro{padding:40px 0 24px}.duel-intro small{color:#9ad9ff;letter-spacing:2px}.duel-intro h1{margin:12px 0 18px}.duel-intro em{font-style:normal;color:#ff7776}.duel-intro p,.duel-hint{color:#afc3dd;line-height:1.8}.duel-lobby-grid{display:grid;grid-template-columns:330px 1fr;gap:28px}.duel-create,.duel-rooms,.duel-seat{background:#182840;border:1px solid #53718e66;border-radius:24px;padding:24px}.duel-create{text-align:center}.duel-create svg{width:160px;height:180px}.duel-create p{color:#a9bed5;font-size:13px;line-height:1.8}.duel-create .primary{width:100%}.duel-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.duel-section-title h2{font-size:21px}.duel-shell .pill{background:#263f5d;color:#f0f7ff;border-color:#567088}.room-entry{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid #587b96;border-radius:17px;background:#223c58;color:white;padding:22px;margin:16px 0;text-align:left;font-size:17px}.room-entry small{display:block;color:#b8d2e7;font-size:12px;margin-top:7px}.room-entry:disabled{opacity:.5}.room-empty{padding:48px 12px;text-align:center;color:#abc5dc;line-height:1.9}.duel-roster{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0 28px}.duel-seat{text-align:center;min-height:270px}.duel-seat svg{height:175px;width:170px}.duel-seat span{display:block;color:#9cd6f1;margin-top:10px}.duel-score{display:grid;grid-template-columns:1fr 100px 1fr;align-items:center;margin:20px 0 16px}.duel-score>div:last-child{text-align:right}.duel-score b{font-size:15px;display:block}.duel-score span{display:block;font-size:25px;letter-spacing:2px;color:#ff6a6b;margin-top:5px}.duel-score strong{text-align:center;font-size:32px}.duel-arena{position:relative;border:2px solid #4b6680;border-radius:24px;overflow:hidden;background:#152139}.duel-arena canvas{display:block;width:100%;aspect-ratio:2/1;touch-action:none}.duel-controls{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:18px;margin-top:18px}.duel-controls button{min-height:76px;touch-action:none;font-size:18px}.duel-controls small{display:block;font-size:11px;margin-top:7px}#duel-banner{position:absolute;top:15%;left:10%;width:80%;text-align:center;font-size:clamp(19px,4vw,40px);font-weight:900;color:#fff4c2;pointer-events:none;text-shadow:0 3px 15px #000}#duel-error{min-height:28px;color:#ffc4c4;line-height:1.6}#duel-result{text-align:center;padding:50px 0}#waiting>.primary{margin-right:15px}html.game-active,html.game-active body{touch-action:none}#battle .duel-hint{font-size:12px;margin:12px 0}#leave-battle{font-size:11px;padding:8px 14px}
@media(max-width:700px){.duel-shell{padding:0 12px 20px}.duel-header{font-size:10px;min-height:62px}.duel-header>span{display:none}.duel-lobby-grid{grid-template-columns:1fr}.duel-intro{padding-top:24px}.duel-intro h1{font-size:36px}.duel-create{display:grid;grid-template-columns:100px 1fr;padding:14px;gap:4px 15px}.duel-create svg{width:95px;height:115px}.duel-create #my-portrait{grid-row:span 3}.duel-create h2{font-size:18px}.duel-create p{margin:0}.duel-create button{grid-column:span 2}.duel-roster{gap:10px}.duel-seat{padding:12px;min-height:220px}.duel-seat svg{width:125px;height:140px}.duel-score{grid-template-columns:1fr 54px 1fr}.duel-score b{font-size:11px}.duel-score span{font-size:15px;letter-spacing:0}.duel-score strong{font-size:25px}.duel-controls{gap:8px}.duel-controls button{font-size:13px;min-height:66px;padding:10px}.duel-controls small{font-size:9px}.duel-arena{border-radius:15px}}@media(max-height:820px) and (min-width:701px){.duel-header{min-height:54px}.duel-score{margin:10px 0}.duel-arena{max-height:calc(100dvh - 255px)}.duel-arena canvas{max-height:calc(100dvh - 255px);object-fit:contain}.duel-controls button{min-height:62px}}

.duel-controls .secondary{color:#1b3552;border-radius:16px}.duel-controls .power{color:#523f12;border-radius:16px}

.duel-hero-picker{margin:20px 0}.duel-hero-picker h2{font-size:17px}.duel-hero-options{display:flex;overflow-x:auto;gap:10px;padding:7px 4px 15px;scroll-snap-type:x mandatory;touch-action:pan-x pan-y}.duel-hero-options button{flex:0 0 102px;border:2px solid #47617b;border-radius:16px;background:#1c3047;color:#e6f2fc;padding:5px;scroll-snap-align:center}.duel-hero-options button.selected{border-color:#ffe37c;background:#3c4350;box-shadow:0 0 0 3px #ffd35a22}.duel-hero-options svg{width:84px;height:106px}.duel-hero-options span{font-size:10px;display:block}#start-duel{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:#288561;min-width:230px;min-height:86px}#start-duel svg{width:57px;height:48px}#start-duel:disabled{background:#527b6f;opacity:.65}@media(max-width:700px){.duel-hero-options button{flex-basis:82px}.duel-hero-options svg{width:66px;height:85px}}

.duel-score i{display:block;color:#ffe288;font-style:normal;font-size:20px;letter-spacing:5px}#danger-overlay{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0;background:radial-gradient(ellipse,transparent 40%,#f02c3b36);box-shadow:inset 0 0 70px #ef27382b}.danger-active #danger-overlay{animation:duel-heartbeat 1.8s ease-in-out infinite}@keyframes duel-heartbeat{0%,45%,100%{opacity:.2}15%,32%{opacity:.85}23%{opacity:.4}}@media(prefers-reduced-motion:reduce){.danger-active #danger-overlay{animation:none;opacity:.4}}

.duel-controls{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr)}.duel-controls button{min-width:0}#duel-super{font-variant-numeric:tabular-nums;transition:transform .16s;contain:layout}#duel-result{position:relative;isolation:isolate;overflow:hidden;min-height:570px;border-radius:28px;margin-top:24px}#duel-result[data-outcome="win"]{background:radial-gradient(ellipse at 50% 35%,#68521a,#11233b 70%)}#duel-result[data-outcome="lose"]{background:radial-gradient(ellipse at 50% 20%,#344359,#101723 70%)}#result-title{font-size:clamp(64px,12vw,120px);letter-spacing:8px;margin:0;color:#ffe595;text-shadow:0 5px 0 #775928,0 0 38px #ffd55e77}#result-symbol{font-size:72px;position:relative;z-index:1}#result-art svg{height:180px;width:175px}#duel-result .duel-intro{padding:10px 16px 20px}#duel-result[data-outcome="lose"] #result-title{color:#9fb6ce;text-shadow:0 4px 0 #182333}#duel-result[data-outcome="lose"] #result-art{filter:grayscale(.7);transform:rotate(-10deg);opacity:.8}#result-particles{position:absolute;inset:0;pointer-events:none;z-index:-1}#result-particles i{position:absolute;left:var(--x);top:-15%;width:12px;height:22px;background:hsl(var(--hue) 85% 68%);animation:duel-confetti 3.6s var(--delay) linear infinite}#duel-result[data-outcome="lose"] #result-particles i{width:2px;height:32px;background:#afc6df66;animation:duel-rain 2s var(--delay) linear infinite}#duel-result[data-outcome="draw"] #result-particles{display:none}@keyframes duel-confetti{to{transform:translate(var(--drift),780px) rotate(600deg)}}@keyframes duel-rain{to{transform:translate(-55px,780px)}}@media(prefers-reduced-motion:reduce){#result-particles i{animation:none;top:var(--x);transform:rotate(35deg)}}
@media(max-height:820px) and (min-width:701px){.duel-arena,.duel-arena canvas{max-height:calc(100dvh - 300px)}.duel-score i{font-size:15px}.duel-controls{margin-top:10px}}

#duel-banner{top:50%;left:0;width:100%;transform:translateY(-50%);font-size:clamp(64px,12vw,150px);font-weight:1000;letter-spacing:2px;color:#fff4bb;line-height:1.2;text-shadow:0 5px 0 #705728,0 0 35px #ffc66288;padding:25px 10px;background:linear-gradient(90deg,transparent,#071123b8 25%,#071123b8 75%,transparent)}#duel-banner:empty{display:none}#duel-banner.count-pop{animation:duel-count-pop .25s ease-out}@keyframes duel-count-pop{from{opacity:.5;transform:translateY(-50%) scale(1.18)}to{opacity:1;transform:translateY(-50%) scale(1)}}@media(prefers-reduced-motion:reduce){#duel-banner.count-pop{animation:none}}

.duel-hero-picker{min-width:0;max-width:100%}.duel-hero-picker h2{display:flex;align-items:center;justify-content:space-between;gap:12px}.hero-scroll-nav{display:flex;gap:8px}.hero-scroll-nav button{width:48px;height:44px;border:1px solid #7ea8c6;border-radius:12px;background:#284761;color:#f5faff;font-size:20px}.duel-hero-options{width:100%;max-width:100%;min-width:0;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;cursor:grab;scrollbar-width:thin;scrollbar-color:#86b5d7 #183047}.duel-hero-options:active{cursor:grabbing}.duel-hero-options button{flex-shrink:0}

.hero-battle-stats{display:block;color:#b9dceb;font-size:9px;line-height:1.6;padding:4px 0;white-space:normal}

#duel-super{font-size:clamp(11px,1.5vw,17px);line-height:1.5;overflow-wrap:anywhere}

body.duel-playing{height:100dvh;overflow:hidden;overscroll-behavior:none}.duel-playing .duel-shell{height:100dvh;max-width:none;margin:0;padding:0 max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:6px}.duel-playing .duel-header{flex:0 0 46px;min-height:46px;padding-top:env(safe-area-inset-top)}.duel-playing #battle{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.duel-playing .duel-score{flex:0 0 auto;margin:0;min-height:67px}.duel-playing .duel-score span{font-size:clamp(13px,2.3vw,24px);margin-top:2px}.duel-playing .duel-score i{font-size:15px;line-height:1.1}.duel-playing .duel-arena{flex:1;min-height:0;max-height:none;width:100%;display:flex;align-items:center;justify-content:center}.duel-playing .duel-arena canvas{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}.duel-playing .duel-controls{flex:0 0 auto;margin:0;gap:10px}.duel-playing .duel-controls button{min-height:66px;max-height:84px;padding:12px 8px}.duel-playing #duel-tip,.duel-playing #duel-error,.duel-playing #leave-battle{display:none}.duel-playing .duel-header a{min-height:40px;display:flex;align-items:center}@media(max-height:500px){.duel-playing .duel-header{flex-basis:38px;min-height:38px}.duel-playing .duel-score{min-height:46px}.duel-playing .duel-score b{font-size:10px}.duel-playing .duel-score span{font-size:14px}.duel-playing .duel-score i{font-size:12px}.duel-playing .duel-controls button{min-height:48px;padding:6px}.duel-playing .duel-controls small{display:none}}

#duel-banner.notice{font-size:clamp(18px,4vw,42px);letter-spacing:0}

.matchup-trait{display:flex!important;align-items:center;justify-content:center;gap:4px;color:#88e5ff;font-size:11px}.matchup-trait svg{width:26px!important;height:26px!important;flex:none}.matchup-help{color:#b9dce9;font-size:12px;text-align:center;padding:8px}