.duel-panel{max-width:470px}.duel-emblem{font-size:42px;color:#e7c889;margin:5px 0 12px;text-shadow:0 0 32px #f7bb5450}.duel-rules{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:12px 0 20px}.duel-rules span{padding:7px 10px;background:#b9994820;border:1px solid #ac97693b;border-radius:20px;font-size:11px;color:#e4cf9f}.duel-panel input,.duel-panel select{width:100%;min-height:47px;border:1px solid #b3a17668;border-radius:7px;background:#121d18;color:#f0dfbd;font:16px Georgia,serif;padding:12px;box-sizing:border-box}.duel-panel label{display:block;text-align:left;margin:14px 0 7px;color:#d1c3a5;font-size:11px;letter-spacing:1px}.duel-panel .duel-code-input{text-transform:uppercase;text-align:center;font-size:24px;letter-spacing:6px}.duel-panel .duel-spells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:left}.duel-panel .duel-spells select{font-size:13px;padding:11px 4px;border-color:var(--school)}.duel-combination{color:#ead4a0;margin:14px 0 20px;font-size:13px}.duel-combination strong{display:block;margin:5px;font-size:19px;font-weight:400}.duel-divider{border-top:1px solid #b09a6138;margin-top:20px;padding-top:15px}.duel-error{color:#ffbb9e;font:13px/1.5 Georgia,serif;min-height:18px}.duel-room-code{display:block;font-size:36px;letter-spacing:8px;color:#ffe3a5;padding:17px 0;font-variant-numeric:tabular-nums;user-select:text;-webkit-user-select:text}.duel-countdown{font-size:60px;color:#f7d48a;text-align:center;min-height:90px;line-height:90px}.duel-result-grid{width:100%;border-collapse:collapse;text-align:right;margin:20px 0;color:#d7caae}.duel-result-grid th,.duel-result-grid td{padding:12px 6px;border-bottom:1px solid #b09a6133;font-size:13px;font-weight:400}.duel-result-grid th:first-child,.duel-result-grid td:first-child{text-align:left;color:#bdb399}.duel-result-grid thead th{color:#e8d2a2;max-width:120px;word-break:break-word}.duel-result-grid tbody tr:first-child td{font-size:19px;color:#f0dfb5}.duel-note{font-size:12px;color:#c5bca6;line-height:1.6}.duel-panel .primary:disabled,.duel-panel .secondary:disabled{opacity:.5;cursor:wait}.duel-state-dot{height:7px;width:7px;background:#c5dca8;border-radius:50%;display:inline-block;box-shadow:0 0 9px #b9d69c;animation:duel-pulse 2s infinite;margin-right:6px}@keyframes duel-pulse{50%{opacity:.35}}@media(max-width:350px){.duel-panel .duel-spells select{font-size:11px}.duel-room-code{font-size:30px;letter-spacing:6px}}

/* Two quiet display alcoves: read-only outfits, with room for the whole broom. */
.duel-entrants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 14px}
.duel-entrant{min-width:0;overflow:hidden;text-align:center;padding:0 8px 12px;border:1px solid #aa92614c;border-radius:48% 48% 8px 8px / 13% 13% 8px 8px;background:var(--hide),radial-gradient(ellipse at 50% 32%,#6b78533d,transparent 65%),linear-gradient(#202d23,#141e18);box-shadow:inset 0 0 0 3px #09130c55}
.duel-self{border-color:#bca56c88}
.duel-portrait-stage{margin:0 -8px 4px;position:relative;background:radial-gradient(ellipse at 50% 90%,#d1b46a20,transparent 65%)}
.duel-portrait{display:block;width:100%;height:auto;aspect-ratio:320/304;touch-action:pan-y;filter:drop-shadow(0 8px 6px #0005)}
.duel-empty-portrait{aspect-ratio:320/304;display:grid;place-items:center;font:58px Georgia,serif;color:#bea96d77;text-shadow:0 0 30px #dece8944}
.duel-seat-label{display:block;font-size:8px;letter-spacing:1.1px;color:#b5b49b;margin:3px 0 7px}
.duel-entrant strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:#f1dfb6;font-weight:400}
.duel-entrant small{display:block;margin:5px 0 9px;color:#bcb59e;font-size:10px;line-height:1.4;min-height:14px}
.duel-ready{display:block;font-size:9px;letter-spacing:1px;color:#c6d6aa}
.duel-wait-note{font-size:12px;line-height:1.5;color:#d5c29c;padding:10px 4px;border-block:1px solid #b09a6138}
.duel-wait-note>span:last-child{display:block;font-size:11px;color:#b9b6a3;margin-top:3px;font-variant-numeric:tabular-nums}
/* Use the existing 100px / 91px header, never the arena or the catch controls. */
.duel-mode header{padding:7px 12px 5px;overflow:hidden}
.duel-mode .hud-top{height:36px;gap:9px}
.duel-mode .floor-block{min-width:0}
.duel-mode .eyebrow{font-size:8px;letter-spacing:1.2px}
.duel-mode .floor-name{font-size:16px;line-height:19px;margin-top:1px;font-variant-numeric:tabular-nums}
.duel-mode header .progress-row,.duel-mode header .score-row{display:none}
.duel-live{display:flex;align-items:center;gap:9px;height:45px;margin-top:3px;padding-top:4px;border-top:1px solid #b49e6238;pointer-events:none}
.duel-live[hidden]{display:none}
#duel-opponent-portrait{flex:none;width:38px;height:38px;border:1px solid #b7a16a66;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#687052,#17231c);box-shadow:inset 0 0 8px #0005}
.duel-rival-copy{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.duel-rival-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:13px/15px var(--book);color:#eddbb4}
.duel-rival-copy span{display:block;white-space:nowrap;font:9px/12px Georgia,serif;color:#c5c3ad}
#duel-opponent-health{color:#dfb5aa;letter-spacing:.8px;font-size:10px}
.duel-clock-wrap{flex:none;text-align:right;min-width:66px}
.duel-live small{display:block;font:7px/10px Georgia,serif;letter-spacing:.2px;color:#bdbca2}
.duel-clock{font:23px/26px Georgia,serif;color:#f3dfb0;font-variant-numeric:tabular-nums}
.duel-mode #boss-hud{display:none!important}
.duel-mode #toast{top:10px!important}
@media(max-height:740px){.duel-mode header{padding-top:4px;padding-bottom:3px}.duel-mode .hud-top{height:34px}.duel-live{height:44px;margin-top:2px;padding-top:3px}.duel-mode #pause{height:34px;width:38px}}
@media(max-width:350px){.duel-entrants{gap:8px}.duel-entrant strong{font-size:13px}.duel-entrant small{font-size:9px}.duel-seat-label{font-size:7px;letter-spacing:.5px}.duel-mode header{padding-inline:10px}.duel-live{gap:6px}.duel-rival-copy strong{font-size:12px}.duel-clock-wrap{min-width:62px}}

.duel-rival-build{padding:12px 0;color:#c9c4ad;text-align:left;border-top:1px solid #b09a6138;font:12px/1.6 Georgia,serif;touch-action:pan-y}.duel-rival-build summary{min-height:30px;cursor:pointer}.duel-rival-build p{margin:5px 0}
.duel-ready-footer{position:sticky;bottom:-1px;z-index:3;margin:10px -8px -1px;padding:10px 8px max(10px,env(safe-area-inset-bottom));background:linear-gradient(#1a2418f5,#111a12);border-top:1px solid #cfaf6c88;box-shadow:0 -10px 24px #111a12b3}
#duel-ready-countdown{margin:0 0 9px;color:#d7c8a2;font:11px/1.5 Georgia,serif;font-variant-numeric:tabular-nums;min-height:17px}#duel-ready-countdown.duel-clock-urgent{color:#ffd394}.duel-ready-footer .primary{min-height:52px;font-size:11px;letter-spacing:1.2px;touch-action:pan-y}
.duel-final-perks{font:12px/1.6 Georgia,serif;color:#c5c4aa}.duel-final-perks strong{display:block;color:#e1cea1;margin-bottom:4px}
@media(prefers-reduced-motion:reduce){#duel-menu-portrait{animation:none}}

/* Shared elemental glyphs, including inside the touch-friendly spell picker. */
/* A build is chosen before the duel; the lobby is for a quick swap and Ready. */
#app #overlay.duel-overlay{display:block;padding:18px 20px max(24px,env(safe-area-inset-bottom));background:var(--hide),radial-gradient(ellipse at 80% 0%,#4b465536,transparent 65%),linear-gradient(155deg,#192923,#101a20 65%,#101a17);backdrop-filter:none;-webkit-backdrop-filter:none;overflow-x:hidden;touch-action:pan-x pan-y}
.duel-overlay .duel-panel{margin:0 auto;--duel-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.duel-overlay .duel-build-flow{font-family:var(--duel-ui)}
.duel-build-flow .duel-emblem{font-size:25px;margin:3px 0 8px}
.duel-build-flow>.kicker{font-size:8px;letter-spacing:2.6px}
.duel-build-flow>h2{font:400 30px/1.15 var(--book);margin:10px 0 15px;color:#f1dfb6}
.duel-build-flow .duel-rules{margin:8px 0 17px}
.duel-build-flow .duel-rules span{font-size:10px;padding:5px 10px}
.duel-build-flow button,.duel-build-flow summary{touch-action:pan-x pan-y}
.duel-build-flow button:focus-visible,.duel-build-flow summary:focus-visible,.duel-build-deck:focus-visible{outline:2px solid #f1d89e;outline-offset:3px}
.duel-build-flow select{border-radius:10px;background:#14211d;font-family:var(--book)}
.duel-build-summary{margin-top:14px;padding:16px 14px 0;border:1px solid #bda47770;border-radius:18px;background:var(--hide),radial-gradient(ellipse at 25% 0%,#a78c3821,transparent 55%),linear-gradient(135deg,#25362d,#182624 60%,#19252b);box-shadow:inset 0 1px #ead5a91a,0 12px 30px #0002;text-align:left;overflow:hidden}
.duel-build-title{display:flex;align-items:center;gap:12px;min-height:66px;margin-bottom:16px}
.duel-build-title>div:last-child{min-width:0;flex:1}
.duel-overline{font:9px/1.4 var(--duel-ui);letter-spacing:1.7px;color:#bdbba4}
.duel-build-title h3{font:400 24px/1.15 var(--book);color:#f3dfb5;margin:6px 0 8px;overflow-wrap:anywhere}
.duel-build-valid{font:10px/1.5 var(--duel-ui);color:#cccfb4}
.duel-build-portrait{position:relative;flex:none;width:112px;height:112px;margin:-7px -7px -7px -12px;background:radial-gradient(ellipse,#d3b1721c,transparent 70%)}
.duel-build-portrait #duel-menu-portrait{height:112px;width:112px;animation:duel-broom-float 5s ease-in-out infinite;filter:drop-shadow(0 6px 5px #0006);touch-action:pan-y}
.duel-build-spells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.duel-build-spell{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 4px 9px;border:1px solid color-mix(in srgb,var(--school) 32%,#21302b);border-radius:12px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--school) 14%,transparent),transparent 90%),#0e1b1b80;text-align:center}
.duel-build-spell>small{font:8px/1.2 var(--duel-ui);letter-spacing:1.5px;color:#bdb9a5}
.duel-build-spell>span{font:15px/1.2 var(--book);color:#e9dcc1}
.duel-build-spell svg{width:34px;height:34px;fill:none;stroke:var(--school);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--school) 30%,transparent))}
.duel-build-ultimate{display:flex;align-items:center;flex-direction:column;gap:5px;margin:15px 0 16px;text-align:center}
.duel-build-ultimate small{font:8px var(--duel-ui);letter-spacing:1.8px;color:#b5b5a1}
.duel-build-ultimate strong{font:400 19px/1.2 var(--book);color:#eed6a2;overflow-wrap:anywhere}
.duel-build-ultimate>span{font:10px/1.4 var(--duel-ui);color:#bcbda9}
.duel-build-perks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.duel-build-perk{min-width:0;display:flex;align-items:center;flex-direction:column;gap:6px;text-align:center;color:#c6c9b7}
.duel-build-perk>svg,.duel-build-perk>.spell-icon{width:30px;height:30px;flex:none;padding:3px;color:var(--school);fill:none;stroke:var(--school);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;border:1px solid #b9a67538;border-radius:8px;background:#0c191b66}
.duel-build-perk>.spell-icon svg{display:block;width:100%;height:100%}
.duel-build-perk>span:last-child{font:9px/1.35 var(--duel-ui);overflow-wrap:anywhere}
.duel-build-effects{margin:10px 0 0;font:11px/1.5 var(--duel-ui);color:#babdaa}
.duel-build-effects summary{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;color:#d1c09a}
.duel-build-effects summary::after{content:'⌄';font-size:15px}.duel-build-effects[open] summary::after{content:'⌃'}
.duel-build-effects p{margin:0 0 12px}.duel-build-effects strong{display:block;color:#ead6ad;font-weight:500}
.duel-change-build{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;width:calc(100% + 28px);margin:0 -14px;padding:12px 16px;border:0;border-top:1px solid #b99f674a;background:#bac69c0d;color:#e6d2a6;font:13px var(--duel-ui);text-align:left}
.duel-change-build>span{font-size:22px;color:#dfc58b}.duel-change-build:disabled{color:#aab19e;background:#07141344}.duel-change-build:disabled>span{display:none}
.duel-customize{width:100%;border:0;background:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 5px;min-height:48px;color:#d3c29e;font:11px/1.5 var(--duel-ui);text-align:left}.duel-customize>span{font-size:18px}
.duel-match-actions{border-top:1px solid #b6a1713b;padding-top:17px;margin-top:3px}
.duel-build-flow .primary{font-size:13px;min-height:56px;letter-spacing:1.8px;border-radius:12px}
.duel-build-flow .secondary{min-height:50px;font-size:11px;letter-spacing:1.4px;border-radius:12px}
.duel-match-actions>.duel-note{font:10px/1.5 var(--duel-ui);margin:9px 12px 8px}
.duel-join{margin-top:10px}.duel-join summary,.duel-computer-options summary{min-height:44px;padding:13px 3px;cursor:pointer;font:12px/1.5 var(--duel-ui);color:#cbbd9f}
.duel-build-flow .duel-error:empty{display:none}
.duel-build-flow>.duel-note{font:11px/1.6 var(--duel-ui);margin:18px 10px 4px}
.duel-build-picker{text-align:left;margin:16px 0 8px;scroll-margin-block:155px 16px}
.duel-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.duel-picker-heading h3{font:400 21px/1.2 var(--book);color:#ebd7ad;margin:0}.duel-picker-heading p{font:10px/1.5 var(--duel-ui);color:#b7bba9;margin:5px 0 12px}.duel-picker-heading>button{min-width:44px;min-height:44px;border:0;background:transparent;color:#d9c79f;font-size:24px}
.duel-build-deck{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:3px;padding:3px 3px 10px;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#a18b59 #15221d}
.duel-build-card{position:relative;display:flex;flex-direction:column;flex:0 0 calc(100% - 26px);min-width:0;gap:16px;scroll-snap-align:start;scroll-margin-block:150px 20px;padding:15px 13px 17px;border:1px solid #88988370;border-radius:15px;background:var(--hide),linear-gradient(150deg,#2c3b37,#15232d);color:#d8caa9;text-align:left;box-shadow:inset 0 0 0 3px #101d1844;touch-action:pan-x pan-y}
.duel-build-card:nth-child(2){background:var(--hide),linear-gradient(150deg,#343443,#1b2630)}.duel-build-card:nth-child(3){background:var(--hide),linear-gradient(150deg,#3b3730,#202a26)}
.duel-build-card.is-selected{border:2px solid #dec18a;padding:14px 12px 16px;box-shadow:inset 0 0 0 3px #dec18a15,0 0 12px #dfb95a14}
.duel-card-top{display:flex;justify-content:space-between;gap:8px;font:8px/1.4 var(--duel-ui);letter-spacing:1.2px;color:#b8bdac}.is-selected .duel-card-top>span:last-child{color:#f4d99d}
.duel-card-name{display:block;font:400 22px/1.2 var(--book);color:#efdbb5;overflow-wrap:anywhere}
.duel-build-card .duel-build-spell{padding:9px 2px;gap:5px}.duel-build-card .duel-build-spell svg{height:28px;width:28px}.duel-build-card .duel-build-spell>span{font-size:13px}
.duel-build-card .duel-build-perks{gap:5px}.duel-build-card .duel-build-perk>span:last-child{font-size:8px}
.duel-build-card.is-empty{justify-content:space-between;border-style:dashed}.duel-empty-rune{text-align:center;font:70px/1.4 var(--book);color:#bba77277}.duel-card-empty-copy{display:block;font:12px/1.6 var(--duel-ui);color:#b8bcaa;text-align:center;margin-bottom:10px}
.duel-build-card:disabled{cursor:default}.duel-build-card:active:not(:disabled){filter:brightness(1.15)}
.duel-deck-nav{display:flex;justify-content:center;gap:8px;margin-top:6px}.duel-deck-nav button{min-width:44px;min-height:44px;border:1px solid #bba47344;border-radius:50%;color:#dfc898;background:#26352a66;font:16px var(--book)}
.duel-starter{display:block;width:100%;min-height:44px;margin-top:6px;color:#d5c79f;font:11px var(--duel-ui)}
.duel-build-picker>.duel-note{font:10px/1.5 var(--duel-ui);text-align:center;margin:0 5px 12px}
.duel-build-flow .duel-entrants{gap:10px;margin:13px 0 10px}.duel-build-flow .duel-portrait-stage{max-height:139px}.duel-build-flow .duel-portrait,.duel-build-flow .duel-empty-portrait{height:139px;aspect-ratio:auto;object-fit:contain}.duel-build-flow .duel-entrant{padding-bottom:10px}.duel-build-flow .duel-entrant small{font-family:var(--duel-ui);font-size:9px;margin:5px 0 7px}.duel-build-flow .duel-entrant strong{font-family:var(--book)}
.duel-build-flow .duel-ready-footer{position:sticky;top:58px;bottom:auto;z-index:5;margin:0 -5px 12px;padding:10px 5px 8px;border-top:0;border-bottom:1px solid #bfa57055;background:#172720f5;box-shadow:0 8px 18px #0c181b99;border-radius:0 0 10px 10px}
.duel-build-flow #duel-ready-countdown{margin:7px 0 0;font:10px/1.4 var(--duel-ui);color:#c5c9b5}
.duel-build-flow .duel-ready-footer .secondary{margin-top:0;min-height:56px;border-color:#cdb77c99;background:#344431;color:#e8d5a8}
.duel-invite{display:flex;align-items:center;gap:8px;justify-content:space-between;border:1px solid #a99a6644;border-radius:10px;padding:0 10px}.duel-invite>span{font:8px/1.5 var(--duel-ui);letter-spacing:1px;max-width:65px;text-align:left}.duel-invite .duel-room-code{font-size:22px;letter-spacing:3px;padding:12px 0}.duel-invite>.quiet{font-size:10px;padding:10px 2px;min-height:44px}
.duel-computer-options{border-top:1px solid #b5a1713b;margin-top:15px;padding:4px 0 10px}
@media(max-width:350px){#app #overlay.duel-overlay{padding-inline:14px}.duel-build-title h3{font-size:21px}.duel-build-title{gap:7px}.duel-build-portrait,.duel-build-portrait #duel-menu-portrait{width:92px;height:108px}.duel-build-summary{padding-inline:11px}.duel-change-build{width:calc(100% + 22px);margin-inline:-11px}.duel-build-perks{gap:4px}.duel-build-perk>span:last-child{font-size:8px}.duel-build-flow>h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){.duel-build-portrait #duel-menu-portrait{animation:none}.duel-state-dot{animation:none}}

@keyframes duel-broom-float{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}