/* The two combatants share one arena on phones and desktop. */
.combat-arena{max-width:900px;margin:0 auto;border:1px solid #b59a5c66;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#253729e8,#0b160ff5);box-shadow:0 14px 45px #0003}
.combat-heading{display:flex;flex-direction:column;gap:6px;text-align:center;padding:18px 12px;border-bottom:1px solid #b49a6529}
.combat-heading>span,.combat-role{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#d4c39e}
.combat-heading>strong{font-family:var(--font-display);font-size:clamp(19px,3vw,26px);color:#edd6a2}
.combat-pair{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:18px}
.combatant{min-width:0}.combat-portrait{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/5;border:1px solid #c9b07366;border-radius:10px;background:#102016}
.combat-portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#08140bf5,transparent 35%,transparent 75%,#08140b99)}
.combat-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.combat-role{position:absolute;top:10px;left:10px;right:8px;z-index:1;font-size:10px}
.combat-level{position:absolute;bottom:10px;left:10px;z-index:1;color:#efdbb0;font-size:clamp(13px,2.5vw,17px);font-weight:600}
.combat-versus{position:absolute;left:50%;top:25%;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;border:1px solid #b6985d;border-radius:50%;width:40px;height:40px;background:#142217;box-shadow:0 3px 16px #0009;color:#e4c383;font:600 16px var(--font-display)}
.combatant h3{font:600 clamp(15px,2.5vw,24px)/1.3 var(--font-display);color:#e8dfc7;overflow-wrap:anywhere;margin:12px 0;min-height:2.6em}
.combat-health{display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px;font-size:12px;color:#bfc9b5}.combat-health strong{color:#dddcc8;font-variant-numeric:tabular-nums}
.combat-hp{appearance:none;width:100%;height:7px;border:0;display:block;margin:7px 0 12px;background:#07100b;border-radius:4px;overflow:hidden;color:#87a56c}
.combat-hp::-webkit-progress-bar{background:#07100b}.combat-hp::-webkit-progress-value{background:#87a56c;transition:width .35s ease}.combat-hp::-moz-progress-bar{background:#87a56c}
.combatant-b .combat-hp{color:#b0795c}.combatant-b .combat-hp::-webkit-progress-value{background:#b0795c}.combatant-b .combat-hp::-moz-progress-bar{background:#b0795c}
.combat-stats{margin:0}.combat-stats>div{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 0;border-bottom:1px solid #a4b8971f;font-size:13px}.combat-stats dt{color:#bfc7b2;overflow-wrap:anywhere}.combat-stats dd{margin:0;color:#f0dfb3;font-weight:600;font-variant-numeric:tabular-nums}
.combat-footer{text-align:center;padding:16px 18px 20px;border-top:1px solid #b49a6529}.combat-footer p{font-size:13px;color:#b9c4ad;line-height:1.5;margin:10px 0}.combat-footer [role=status]{font-size:23px;color:#e8c889;font-family:var(--font-display)}
.combat-footer .countdown{display:block;margin:4px 0 10px;font:600 34px/1.1 var(--font-display);color:#e6c78c}.combat-clock-label{font-size:12px;color:#b7c3a8}
.combat-footer #mission-progress{display:block;width:100%;height:3px;opacity:.65}.combat-footer button{min-height:44px;padding:10px 14px;font-size:13px;box-shadow:none}.combat-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.combat-waiting .claim-button:disabled{display:none}
.combat-effects{min-height:20px}.combat-damage{position:absolute;left:50%;top:45%;z-index:4;transform:translateX(-50%);font:bold 28px var(--font-display);color:#fff0d8;text-shadow:0 2px 5px #000,0 0 10px #5c130a;animation:combat-number .6s ease-out both}.combat-damage small{display:block;font:600 11px var(--font-body);text-align:center}.combat-critical{color:#ffd583}
.combat-swing.first .combat-portrait img{animation:combat-lunge-a .45s ease-in-out}.combat-swing.second .combat-portrait img{animation:combat-lunge-a .45s .16s ease-in-out}.combatant-b.combat-swing.first .combat-portrait img{animation-name:combat-lunge-b}.combatant-b.combat-swing.second .combat-portrait img{animation-name:combat-lunge-b}.combat-impact{animation:combat-hit .45s ease-out}.combat-fallen .combat-portrait img{filter:grayscale(.65) brightness(.65)}
@keyframes combat-lunge-a{35%{transform:translateX(7%) scale(1.055)}}@keyframes combat-lunge-b{35%{transform:translateX(-7%) scale(1.055)}}@keyframes combat-hit{40%{box-shadow:inset 0 0 30px #dc6a4977;border-color:#d38a61}}@keyframes combat-number{from{opacity:0;transform:translate(-50%,12px) scale(.85)}35%{opacity:1}to{opacity:1;transform:translate(-50%,-10px)}}
@media(min-width:721px){.combat-pair{padding:24px 36px;gap:64px}.combat-portrait{max-height:330px;aspect-ratio:5/4}.combat-versus{width:50px;height:50px;font-size:20px}}
@media(max-width:359px){.combat-pair{gap:14px;padding:12px 10px}.combat-heading{padding:14px 8px}.combat-stats>div{font-size:11px;gap:3px}.combat-health{font-size:10px}.combat-versus{width:30px;height:30px;font-size:12px}.combat-role{font-size:9px;left:7px}.combat-level{left:7px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.combat-arena *{animation:none!important;transition:none!important}}

.combat-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#d4c39e}.combat-topline .countdown{font:600 24px/1 var(--font-display);color:#e6c78c;letter-spacing:0;margin:0}.combat-heading:has(.combat-topline .countdown)>strong{font-size:clamp(17px,3vw,23px)}

/* M49: keyboard- and touch-accessible mixer in the existing menu. */
.audio-settings{padding:0 0 22px;margin:0 0 20px;border-bottom:1px solid #af956144;display:grid;gap:14px;min-width:0}
.audio-settings h2,.audio-settings p{margin:0}.audio-settings .muted{font-size:13px;line-height:1.5;color:#b5bda8}
.audio-slider{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;text-align:left}
.audio-slider output{font-variant-numeric:tabular-nums;color:#dbc28e}
.audio-slider input[type=range]{grid-column:1/-1;width:100%;min-width:0;min-height:44px;padding:0;margin:0;accent-color:#d4b478;cursor:pointer;background:transparent;box-shadow:none;border:0}
.audio-slider input:focus-visible{outline:2px solid #d4b478;outline-offset:2px}
#account-dialog:has(.audio-settings){max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}

.audio-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.audio-heading h2{min-width:0;font-size:clamp(20px,5vw,26px)}.audio-heading button{flex:0 0 44px;min-height:44px;padding:0;font:26px/1 system-ui,sans-serif}

/* M55: location scenery and footsteps until the server clock reaches zero. */
.journey{background:#14251b;overflow:hidden}
.journey-view{height:clamp(250px,58vw,400px);position:relative;overflow:hidden;isolation:isolate;background:#14251b}
.journey-camera{position:absolute;inset:0;animation:journey-stride 1.8s ease-in-out infinite}
.journey-landscape{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:journey-drift 28s ease-in-out infinite}
.journey-shade{position:absolute;inset:0;background:linear-gradient(180deg,#07130b08,#101c1633 45%,#14251b 100%)}
.journey-horizon{position:absolute;inset:0;box-shadow:inset 0 0 70px #08110b66;pointer-events:none}
.journey-tracks{position:absolute;bottom:12px;left:50%;width:56px;height:110px;transform:translateX(-50%)}
.journey-foot{position:absolute;width:10px;height:22px;left:9px;bottom:12px;transform:rotate(-9deg);opacity:.35;animation:journey-step 1.8s linear infinite}
.journey-foot::before,.journey-foot::after{content:"";position:absolute;background:#e1c68c;border-radius:5px;inset:0 0 8px}
.journey-foot::after{inset:auto 1px 0;height:5px;border-radius:2px}
.journey-foot-1{left:30px;bottom:34px;transform:rotate(9deg) scale(.88);animation-delay:-.9s}
.journey-foot-2{bottom:56px;transform:rotate(-9deg) scale(.76);animation-delay:-1.8s}
.journey-foot-3{left:30px;bottom:78px;transform:rotate(9deg) scale(.64);animation-delay:-2.7s}
.journey-copy{position:relative;padding:4px clamp(16px,4vw,30px) 24px;text-align:center}
.journey-copy .eyebrow{color:#dbc28e;font-size:11px;letter-spacing:2px}
.journey-copy h2{font:500 clamp(23px,5vw,32px)/1.25 var(--font-display);margin:10px 0;color:#e8dfc7;overflow-wrap:anywhere}
.journey-copy p{font-size:13px;line-height:1.5;color:#b9c4ad;max-width:430px;margin:10px auto 16px}
.journey-time{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#b9c4ad;font-size:13px}
.journey-time strong{font:500 32px/1.2 var(--font-display);font-variant-numeric:tabular-nums;color:#e6c78c}
.journey #mission-progress{display:block;width:100%;height:3px;margin:12px 0 0;accent-color:#d5b778}
.journey .claim-button{margin-top:16px;min-height:44px;font-size:14px;padding:10px 16px}
.journey-arrived .journey-camera,.journey-arrived .journey-landscape,.journey-arrived .journey-foot,.journey-paused *{animation-play-state:paused}
@keyframes journey-drift{0%,100%{transform:scale(1.06) translateX(-.5%)}50%{transform:scale(1.18) translateX(.5%)}}
@keyframes journey-stride{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(2px)}}
@keyframes journey-step{0%,100%{opacity:.65}50%{opacity:.15}}