.duel-page .scene-image { --active-scene: url('../images/worlds/verdantis-river-valley-1600.webp'); filter: saturate(.8) hue-rotate(18deg); }
.duel-page .scene-vignette { background: radial-gradient(circle at 50% 34%, rgba(19,65,93,.12), transparent 38%), linear-gradient(180deg, rgba(4,9,25,.22), rgba(2,8,21,.72)); }
.duel-main { width: min(1080px, calc(100% - 34px)); }
.duel-intro { max-width: 760px; }
.duel-intro .hunt-eyebrow, .duel-intro h1 em { color: #84bfff; }
.duel-intro .hunt-eyebrow span { background: linear-gradient(90deg, transparent, #84bfff); }

.duel-lobby { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.duel-lobby-card, .duel-room, .duel-rules { border: 1px solid rgba(155,201,255,.18); background: linear-gradient(145deg, rgba(9,30,57,.92), rgba(4,17,35,.88)); box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(24px) saturate(1.12); }
.duel-lobby-card { min-height: 350px; padding: clamp(24px, 4vw, 38px); border-radius: 27px; display: flex; flex-direction: column; align-items: flex-start; }
.duel-lobby-card .duel-card-icon { width: 52px; height: 52px; margin-bottom: 25px; border: 1px solid rgba(132,191,255,.38); border-radius: 17px; display: grid; place-items: center; color: #9bcbff; background: rgba(62,137,220,.11); font-size: 25px; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.duel-lobby-card > small { color: #84bfff; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.duel-lobby-card h2 { margin: 9px 0 11px; color: #f7fbff; font: 500 clamp(25px, 3vw, 33px)/1.15 Georgia, serif; }
.duel-lobby-card > p { margin: 0 0 23px; color: rgba(226,238,252,.68); font-size: 12px; line-height: 1.65; }
.duel-lobby-card > button, .duel-lobby-card form button, .duel-complete button, .duel-complete a { width: 100%; min-height: 54px; margin-top: auto; border: 1px solid rgba(255,255,255,.3); border-radius: 15px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #06172a; background: linear-gradient(135deg, #a8d6ff, #5baaf0); box-shadow: 0 13px 27px rgba(33,112,187,.25), inset 0 1px rgba(255,255,255,.7); cursor: pointer; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-decoration: none; }
.duel-lobby-card > button:hover, .duel-lobby-card form button:hover, .duel-complete button:hover, .duel-complete a:hover { filter: brightness(1.07); transform: translateY(-1px); }
.duel-lobby-card button:disabled { opacity: .5; cursor: wait; }
.duel-create-card { background: radial-gradient(circle at 85% 10%, rgba(61,158,255,.18), transparent 43%), linear-gradient(145deg, rgba(9,42,66,.94), rgba(5,20,39,.9)); }
.duel-lobby-card form { width: 100%; margin-top: auto; }
.duel-lobby-card form label { display: block; margin: 0 0 7px; color: rgba(225,239,255,.58); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.duel-lobby-card form input { width: 100%; height: 58px; margin-bottom: 9px; border: 1px solid rgba(132,191,255,.35); border-radius: 15px; outline: 0; color: #fff; background: rgba(2,13,29,.6); font: 900 24px/1 system-ui, sans-serif; letter-spacing: .22em; text-align: center; text-transform: uppercase; }
.duel-lobby-card form input:focus { border-color: #84bfff; box-shadow: 0 0 0 4px rgba(84,163,240,.12); }
.duel-lobby-feedback { position: absolute; top: calc(100% + 10px); left: 0; right: 0; min-height: 18px; margin: 0; text-align: center; color: var(--muted); font-size: 11px; }
.duel-lobby-feedback.error, .duel-feedback.error { color: #ff91a4; }
.duel-lobby-feedback.notice, .duel-feedback.notice { color: var(--gold); }

.duel-room { overflow: hidden; border-radius: 28px; }
.duel-room-bar { min-height: 76px; padding: 15px 22px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(3,14,31,.42); }
.duel-room-bar > div { display: grid; gap: 3px; }
.duel-room-bar small { color: rgba(220,235,252,.52); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.duel-room-bar strong { color: #fff; font: 700 24px/1 Georgia, serif; letter-spacing: .2em; }
.duel-room-bar button, .duel-waiting button { min-height: 40px; padding: 0 15px; border: 1px solid rgba(132,191,255,.3); border-radius: 12px; color: #cbe6ff; background: rgba(72,147,220,.1); cursor: pointer; font-size: 10px; font-weight: 800; }
.duel-room-bar button i { margin-left: 8px; color: #84bfff; font-size: 15px; font-style: normal; }

.duel-waiting { min-height: 465px; padding: 70px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.duel-orbit { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.duel-orbit i { width: 52px; height: 52px; border: 1px solid rgba(132,191,255,.35); border-radius: 18px; background: linear-gradient(145deg, rgba(79,169,244,.28), rgba(34,88,151,.12)); box-shadow: 0 0 25px rgba(62,146,221,.14); animation: duelWaiting 1.5s ease-in-out infinite alternate; }
.duel-orbit i:last-child { animation-delay: -.75s; }
.duel-orbit b { color: var(--gold); font: 800 13px Georgia, serif; letter-spacing: .12em; }
.duel-waiting > span, .duel-complete > span, .duel-rules > span { color: #84bfff; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.duel-waiting h2, .duel-complete h2 { margin: 10px 0 12px; color: #fff; font: 500 clamp(29px, 4vw, 40px)/1.1 Georgia, serif; }
.duel-waiting p, .duel-complete p { max-width: 490px; margin: 0 0 22px; color: rgba(226,238,252,.68); font: 14px/1.6 Georgia, serif; }

.duel-arena { padding: clamp(16px, 3vw, 28px); }
.duel-scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.duel-player-card { position: relative; min-width: 0; min-height: 100px; padding: 17px 18px 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 4px 10px; background: rgba(3,17,35,.45); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.duel-player-card > small { color: rgba(218,234,252,.48); font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.duel-player-card > strong { min-width: 0; overflow: hidden; color: #f3f8ff; font: 600 17px/1.2 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.duel-player-card > em { grid-column: 1; color: rgba(157,204,255,.72); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.duel-player-card > span { grid-column: 2; grid-row: 1 / span 3; min-width: 62px; display: grid; align-content: center; text-align: center; }
.duel-player-card > span b { color: #9dccff; font: 600 30px/1 Georgia, serif; }
.duel-player-card > span i { margin-top: 3px; color: rgba(218,234,252,.46); font-size: 7px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.duel-player-card .presence-dot { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: #69ebba; box-shadow: 0 0 10px rgba(80,235,179,.75); }
.duel-player-card.is-offline .presence-dot { background: #ffb55d; box-shadow: 0 0 10px rgba(255,174,76,.5); }
.duel-player-card.is-active { border-color: rgba(132,191,255,.62); background: rgba(56,130,204,.13); box-shadow: 0 0 28px rgba(54,139,223,.1), inset 0 1px rgba(255,255,255,.08); }
.duel-player-card.is-active::after { content: "PLAYING"; position: absolute; left: 17px; bottom: -7px; padding: 3px 7px; border-radius: 6px; color: #06213d; background: #84bfff; font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.duel-player-card.is-me { border-style: solid; }
.duel-round-mark { display: grid; place-content: center; gap: 3px; text-align: center; }
.duel-round-mark small, .duel-round-mark span { color: rgba(218,234,252,.52); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.duel-round-mark strong { color: var(--gold); font: 700 23px Georgia, serif; }
.duel-round-banner { margin: 15px 0 -2px; padding: 9px 12px; border: 1px solid rgba(247,199,107,.2); border-radius: 11px; color: #ffd98e; background: rgba(122,82,23,.1); text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .04em; }

.duel-board { margin-top: 18px; padding: clamp(18px, 4vw, 31px); border: 1px solid rgba(132,191,255,.16); border-radius: 24px; background: radial-gradient(circle at 50% 0, rgba(63,151,232,.12), transparent 35%), rgba(2,14,29,.44); text-align: center; }
.duel-turn-row { width: min(420px, 100%); margin: 0 auto; padding: 10px 14px; border: 1px solid rgba(132,191,255,.28); border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(4,19,39,.5); }
.duel-turn-row span { color: #aed7ff; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.duel-turn-row strong { color: #9dceff; font: 700 20px Georgia, serif; letter-spacing: .04em; }
.duel-turn-row.is-warning { border-color: rgba(255,185,90,.48); }.duel-turn-row.is-warning strong { color: var(--gold); }
.duel-turn-row.is-critical { border-color: rgba(255,113,135,.65); animation: huntTimerPulse .8s ease-in-out infinite alternate; }.duel-turn-row.is-critical strong { color: #ff8da0; }
.duel-time-track { width: min(420px, 100%); height: 3px; margin: 5px auto 18px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.duel-time-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ff7187, var(--gold), #84bfff); transition: width .1s linear; }
.duel-board .source-word { margin-top: 8px; color: #f5faff; text-shadow: 0 0 26px rgba(91,170,246,.22); }
.duel-source-tiles button { border-color: rgba(209,235,255,.52); color: #071b30; background: linear-gradient(145deg, #f5fbff, #8bc7ff); }
.duel-counts { width: min(510px, 100%); margin: 18px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.duel-counts span { min-width: 0; padding: 10px 8px; border: 1px solid rgba(132,191,255,.16); border-radius: 13px; display: grid; gap: 2px; background: rgba(64,137,210,.06); }
.duel-counts small { color: rgba(220,235,252,.52); font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.duel-counts strong { color: #fff; font: 600 22px Georgia, serif; }
.duel-counts span:first-child strong { color: var(--gold); }.duel-counts span:last-child strong { color: #9dccff; }
#duelAnswerForm { width: min(500px, 100%); margin: 0 auto; }
#duelAnswerForm > label { display: block; margin-bottom: 7px; color: rgba(225,239,255,.66); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
#duelAnswerForm > p { margin: 8px 0 0; color: rgba(218,234,252,.55); font-size: 9px; line-height: 1.45; }
.duel-page .answer-console input { border-color: rgba(132,191,255,.36); background: rgba(2,13,29,.66); }
.duel-page .answer-console input:focus { border-color: #84bfff; box-shadow: 0 0 0 4px rgba(84,163,240,.1); }
.duel-page .hunt-keyboard { border-color: rgba(132,191,255,.14); background: rgba(3,14,30,.32); }
.duel-page .hunt-keyboard-key { border-color: rgba(132,191,255,.25); color: #e0f0ff; background: linear-gradient(145deg, rgba(42,100,158,.82), rgba(16,49,85,.86)); }
.duel-page .hunt-submit { border-color: rgba(132,191,255,.24); color: #cfe9ff; background: rgba(75,154,229,.09); }
.duel-feedback { min-height: 22px; margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.duel-feedback.success { color: #74edbf; }
.duel-found { min-height: 34px; margin: 8px auto 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.duel-found span { padding: 6px 9px; border: 1px solid rgba(132,191,255,.22); border-radius: 10px; display: grid; gap: 2px; color: #deefff; background: rgba(67,145,220,.07); animation: huntChipIn .3s ease both; }
.duel-found span.is-mine { border-color: rgba(92,235,183,.28); color: #cffff0; background: rgba(68,200,152,.08); }
.duel-found b { font-size: 10px; letter-spacing: .08em; }.duel-found small { opacity: .55; font-size: 6px; letter-spacing: .07em; }

.duel-complete { min-height: 470px; padding: 65px 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.duel-complete > div { width: min(440px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.duel-complete a, .duel-complete button { min-height: 50px; justify-content: center; text-align: center; }
.duel-complete a { color: #dbeeff; background: rgba(80,153,222,.09); box-shadow: none; }
.duel-complete button { color: #06172a; }

.duel-rules { margin: 30px auto 0; padding: 25px; border-radius: 22px; text-align: center; }
.duel-rules h2 { margin: 8px 0 18px; color: #fff; font: 500 27px Georgia, serif; }
.duel-rules > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.duel-rules article { padding: 16px; border: 1px solid rgba(132,191,255,.13); border-radius: 15px; background: rgba(52,126,198,.05); }
.duel-rules article b { width: 27px; height: 27px; margin: 0 auto 9px; border-radius: 50%; display: grid; place-items: center; color: #08213b; background: #84bfff; font-size: 11px; }
.duel-rules h3 { margin: 0 0 6px; color: #f4f9ff; font: 500 17px Georgia, serif; }.duel-rules p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

@keyframes duelWaiting { from { transform: translateY(0); opacity: .58; } to { transform: translateY(-5px); opacity: 1; } }

@media (max-width: 760px) {
    .duel-lobby { grid-template-columns: 1fr; }.duel-lobby-card { min-height: 315px; }
    .duel-scoreboard { grid-template-columns: 1fr 70px 1fr; }.duel-player-card { padding: 14px 12px; }.duel-player-card > strong { font-size: 14px; }.duel-player-card > span { min-width: 49px; }.duel-player-card > span b { font-size: 25px; }
}
@media (max-width: 540px) {
    .duel-main { width: min(100% - 16px, 520px); }.duel-room { border-radius: 22px; }.duel-room-bar { padding: 12px 14px; }.duel-room-bar strong { font-size: 20px; }.duel-room-bar button span { display: none; }.duel-room-bar button i { margin: 0; }
    .duel-arena { padding: 10px; }.duel-scoreboard { grid-template-columns: 1fr 49px 1fr; gap: 5px; }.duel-player-card { min-height: 88px; padding: 12px 8px; grid-template-columns: 1fr; text-align: left; }.duel-player-card > small { padding-right: 31px; font-size: 6px; }.duel-player-card > strong { padding-right: 31px; font-size: 10px; }.duel-player-card > em { padding-right: 29px; font-size: 5px; letter-spacing: .01em; white-space: nowrap; }.duel-player-card > span { position: absolute; top: 29px; right: 7px; bottom: auto; min-width: 27px; display: grid; gap: 1px; }.duel-player-card > span b { font-size: 17px; }.duel-player-card > span i { display: block; margin-top: 0; font-size: 4px; letter-spacing: .02em; }.duel-player-card .presence-dot { top: 7px; right: 7px; }.duel-player-card.is-active::after { left: 50%; bottom: -6px; transform: translateX(-50%); }
    .duel-round-mark small, .duel-round-mark span { font-size: 5px; }.duel-round-mark strong { font-size: 18px; }.duel-board { margin-top: 12px; padding: 15px 8px; border-radius: 18px; }.duel-turn-row { padding: 9px 10px; }.duel-turn-row span { font-size: 7px; letter-spacing: .06em; }.duel-turn-row strong { font-size: 17px; }
    .duel-counts { gap: 4px; }.duel-counts span { padding: 8px 3px; }.duel-counts small { font-size: 6px; letter-spacing: .04em; }.duel-counts strong { font-size: 19px; }.duel-complete > div, .duel-rules > div { grid-template-columns: 1fr; }.duel-rules { padding: 20px 13px; }
}
@media (max-width: 390px) {
    .duel-page .hunt-player > span:last-child { display: none; }.duel-lobby-card { padding: 22px 19px; }.duel-board .source-tiles { gap: 3px; }.duel-board .source-tiles button { width: 34px; height: 44px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .duel-orbit i, .duel-turn-row.is-critical, .duel-found span { animation: none; } }