#duel-hud { position: absolute; z-index: 3; left: 50%; top: calc(1.6rem + var(--sat)); transform: translateX(-50%); width: max-content; max-width: 96vw; }
#duel-hud.hidden, #duel-count.hidden, #duel-result.hidden { display: none; }
body.patch-pending #duel-hud { top: calc(var(--patch-h, 0px) + 1rem + var(--sat)); }
.du-plate { position: relative; display: flex; align-items: stretch; min-width: 44rem; height: 6rem; color: var(--ink); pointer-events: auto;
background: linear-gradient(#22140f, #0d0807); border: 1px solid #000;
box-shadow: inset 0 0 0 1px #5a2418, inset 0 0 0 .25rem #140c0a, inset 0 0 0 calc(.25rem + 1px) rgba(224,96,74,.45), 0 .5rem 1.4rem rgba(0,0,0,.6);
clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0 1.5rem); }
.du-mark { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; width: 7.4rem; padding-left: .8rem; color: #ff9a80;
border-right: 1px solid rgba(224,96,74,.35); background: linear-gradient(90deg, rgba(224,72,48,.18), transparent); }
.du-mark svg { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 0 .4rem rgba(255,110,80,.55)); }
.du-mark small { font: 600 max(10px, 1.2rem)/1 var(--sans); letter-spacing: .12em; color: #ffcbb8; }
.du-main { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: .55rem; padding: 0 1.8rem; min-width: 0; }
.du-vs { display: flex; align-items: baseline; gap: .7rem; white-space: nowrap; overflow: hidden; }
.du-vs i { font: 600 max(10px, 1.2rem)/1 var(--sans); font-style: normal; color: var(--ink3); }
.du-foe { font: 600 max(14px, 2rem)/1 var(--serif); letter-spacing: .03em; color: #ff8f7c; text-shadow: 0 .2rem 0 #000; overflow: hidden; text-overflow: ellipsis; }
.du-bar { display: block; height: .9rem; background: #120807; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(224,96,74,.35); }
.du-bar u { display: block; height: 100%; width: 100%; background: linear-gradient(#ff6a52, #a8261a); transition: width .2s linear; }
.du-time { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; width: 8rem; border-left: 1px solid rgba(224,96,74,.35); }
.du-time b { font: 700 max(16px, 2.3rem)/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 .2rem 0 #000; }
.du-time small { font: 600 max(9px, 1rem)/1 var(--sans); color: var(--ink3); }
#duel-hud.low .du-time b { color: #ff6a52; }
#duel-hud[data-st="wait"] .du-foe, #duel-hud[data-st="count"] .du-foe { color: #ffd6c8; }
#hud .du-leave { flex: none; display: flex; align-items: center; gap: .4rem; padding: 0 1.6rem 0 1rem; font: 600 max(12px, 1.5rem)/1 var(--sans); color: var(--ink2); border-left: 1px solid rgba(224,96,74,.35); white-space: nowrap; }
#hud .du-leave svg { width: 2rem; height: 2rem; }
#hud .du-leave:hover { color: #ffe6dc; background: rgba(224,96,74,.12); }
#hud .du-leave.armed { color: #ffd0c4; background: rgba(200,40,28,.45); }
body.touch .du-plate { min-width: 0; height: 4.8rem; }
body.touch .du-mark { width: 5.6rem; } body.touch .du-time { width: 6.4rem; }
#duel-count { position: absolute; z-index: 4; left: 50%; top: 26%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; pointer-events: none; text-align: center; }
#duel-count small { font: 600 max(12px, 1.6rem)/1.2 var(--sans); letter-spacing: .2em; color: #ffd6c8; text-shadow: 0 1px 2px #000; }
#duel-count b { font: 700 max(48px, 9rem)/1 var(--serif); color: #fff; text-shadow: 0 .4rem 0 #000, 0 0 3rem rgba(255,96,64,.85); }
#duel-count.beat b { animation: du-beat .9s ease-out both; }
#duel-count.go b { color: #ffb08a; animation: du-go 1.2s ease-out both; }
@keyframes du-beat { 0% { opacity: 0; transform: scale(1.6); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: .85; transform: scale(.94); } }
@keyframes du-go { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.15); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
#duel-result { position: absolute; z-index: 5; left: 50%; top: calc(13.4rem + var(--sat)); transform: translateX(-50%); box-sizing: border-box; width: 44rem; max-width: 94vw;
display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.4rem 2.8rem 2rem; pointer-events: auto; text-align: center;
border: 0 solid transparent; border-image: url(../assets/ui/dark/panel.png) 64 / 3.2rem; background: #110b0a url(../assets/ui/dark/panel_fill.png) 0 0 / 25.6rem 25.6rem;
box-shadow: 0 1rem 2.5rem rgba(0,0,0,.6), 0 0 4rem rgba(224,96,74,.22); animation: du-pop .35s ease-out both; }
@keyframes du-pop { from { opacity: 0; transform: translateX(-50%) scale(.9); } }
#duel-result h3 { margin: 0; font: 700 max(26px, 4.4rem)/1.1 var(--serif); letter-spacing: .1em; color: #fff; text-shadow: 0 .3rem 0 #000; }
#duel-result.win h3 { color: #ffd772; text-shadow: 0 .3rem 0 #000, 0 0 2.4rem rgba(255,200,90,.7); }
#duel-result.lost h3 { color: #ff8f7c; text-shadow: 0 .3rem 0 #000, 0 0 2rem rgba(224,72,48,.6); }
#duel-result.draw h3 { color: #d9cfc0; }
#duel-result p { margin: 0; font-size: max(12px, 1.45rem); line-height: 1.5; color: var(--ink2); }
#duel-result .dr-foe b { color: #ffb6a6; }
.dr-nums { display: flex; justify-content: center; gap: 3.2rem; margin: .6rem 0 .2rem; }
.dr-nums span { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.dr-nums small { font: 600 max(10px, 1.15rem)/1 var(--sans); color: var(--ink3); }
.dr-nums b { font: 700 max(16px, 2.4rem)/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; }
#duel-result .dr-back { font-size: max(11px, 1.25rem); color: var(--ink3); }
#duel-result .dr-x { position: absolute; top: 1rem; right: 1.2rem; width: 3rem; height: 3rem; color: var(--ink3); background: none; border: 0; font-size: max(14px, 1.8rem); cursor: pointer; }
#duel-result .dr-x:hover { color: #fff; }
.du-dead { display: block; margin-top: .6rem; font-style: normal; color: #ffcbb8; }
body.touch .du-main { padding: 0 1rem; gap: .4rem; } body.touch .du-foe { font-size: max(12px, 1.6rem); } body.touch #hud .du-leave { padding: 0 1.1rem 0 .8rem; }