/* Duels: the challenge, the stake screen (the trade panel's layout), the
   banner while a duel lasts, its countdown and the outcome. Bronze and
   charcoal, the Colosseum's colours, flat and matte. */
.duel-invitation { padding-top: 24px; }
.duel-invitation .wilderness-swords { position: absolute; top: -15px; left: 50%; width: 30px; height: 30px; transform: translateX(-50%); filter: drop-shadow(0 2px 3px #0006); }
.duel-invitation.is-stake { border-color: #b08a43; background: #e6d6b2f2; }
.duel-banner { position: absolute; top: 16px; left: 50%; z-index: 9; transform: translateX(-50%); width: min(330px, calc(100vw - 32px)); box-sizing: border-box; padding: 9px 12px 10px; color: #f2e6cc; font: 11px Georgia, serif; text-shadow: 0 1px 3px #120c08; background: linear-gradient(135deg, #3b2f22f2, #1e1812f2); border: 1px solid #c39a5a8c; box-shadow: 0 6px 18px #120c0850, inset 0 0 0 2px #f2c77a0d; pointer-events: auto; }
.duel-banner[hidden], .duel-countdown[hidden], .duel-result[hidden], .duel-banner .duel-warning[hidden] { display: none; }
.duel-banner-head { display: flex; align-items: center; gap: 9px; }
.duel-banner-head .wilderness-swords { width: 24px; height: 24px; flex: none; filter: drop-shadow(0 1px 2px #0008); }
.duel-banner-head > div { flex: 1; min-width: 0; }
.duel-banner small { display: block; font: 9px ui-sans-serif, sans-serif; letter-spacing: 1.4px; color: #d9b67c; }
.duel-banner strong { display: block; margin-top: 2px; font-weight: 400; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-banner strong b { color: #ffd38a; font-weight: 700; }
.duel-forfeit { flex: none; padding: 6px 10px; color: #f6e3c4; font: 11px Georgia, serif; background: #5a2b20cc; border: 1px solid #c56b508c; cursor: pointer; }
.duel-forfeit:hover, .duel-forfeit:focus-visible { background: #77372a; }
.duel-forfeit.is-confirming { background: #a5412d; border-color: #ffb08a; }
.duel-health { height: 6px; margin: 9px 0 7px; background: #120d0acc; border: 1px solid #8d6a3f80; }
.duel-health i { display: block; height: 100%; width: 100%; background: linear-gradient(#e2b25f, #b07c33); transition: width .25s; }
.duel-banner p { margin: 0; font: italic 11px Georgia, serif; color: #dfcca8; }
.duel-banner .duel-warning { margin-top: 6px; padding: 5px 8px; font-style: normal; color: #ffe1c8; background: #8c3323d9; border: 1px solid #ff9a7a80; }
.duel-banner.is-outside { border-color: #ff8a6acc; }
/* 3 · 2 · 1 · Fight! above the fighters. */
.duel-countdown { position: absolute; top: 30%; left: 50%; z-index: 9; transform: translate(-50%, -50%); pointer-events: none; color: #ffe4a8; font: 400 76px Greenvale Serif, Georgia, serif; text-shadow: 0 4px 0 #6b4520, 0 8px 24px #0009; animation: duel-count .95s ease-out both; }
.duel-countdown.is-fight { color: #ffb37a; font-size: 64px; letter-spacing: 2px; }
@keyframes duel-count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); } }
/* The outcome, in the region banner's place. */
#hud:has(.duel-result:not([hidden])) .region-reveal { visibility: hidden; }
.duel-result { position: absolute; top: calc(23% + 12px); left: 50%; z-index: 9; width: min(380px, calc(100vw - 32px)); box-sizing: border-box; padding: 16px 24px 14px; text-align: center; pointer-events: none; color: #f6e8c8; text-shadow: 0 2px 6px #120c08; background: linear-gradient(160deg, #3f3122f0, #1f1913f0); border: 1px solid #c79d5a8c; box-shadow: 0 14px 40px #0d080550, inset 0 0 0 3px #f2c77a0e; animation: duel-result 4.2s ease both; }
.duel-result.is-lost { background: linear-gradient(160deg, #3a2420f0, #1d1412f0); border-color: #b0675080; }
.duel-result .wilderness-swords { display: block; width: 36px; height: 36px; margin: -34px auto 8px; filter: drop-shadow(0 3px 5px #0009); }
.duel-result small { font: 9px ui-sans-serif, sans-serif; letter-spacing: 3px; color: #dcb377; }
.duel-result h2 { margin: 6px 0 6px; font: 400 30px Greenvale Serif, Georgia, serif; letter-spacing: 1.5px; color: #ffd890; }
.duel-result.is-lost h2 { color: #f0b49a; }
.duel-result p { margin: 0; font: italic 13px Georgia, serif; color: #ecd6b6; }
@keyframes duel-result { 0% { opacity: 0; transform: translate(-50%, 10px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
/* The stake screen: the trade panel, with the duel's rules and the pot. */
#hud .duel-rules { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 12px; color: #6e5233; }
#hud .duel-rules li::before { content: '◆'; margin-right: 6px; font-size: 8px; color: #a07a42; }
#hud .duel-pot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; padding: 9px; font-size: 13px; background: #c6a95430; border: 1px solid #9d865440; }
#hud .duel-pot .wilderness-swords { width: 20px; height: 20px; }
@media (max-width: 820px) { .duel-banner { top: 10px; padding: 7px 10px 8px; } .duel-countdown { font-size: 58px; } .duel-countdown.is-fight { font-size: 48px; } .duel-result h2 { font-size: 24px; } }
.remote-player-label .remote-duel { display: block; align-self: center; width: 18px; height: 18px; margin: -1px 0 1px; filter: drop-shadow(0 2px 3px #000a); }
/* Compact enough that the stake screen's buttons fit an 800 px window. */
#hud .duel-stake-panel .trade-intro { margin-bottom: 8px; }
#hud .duel-stake-panel .trade-steps { padding-bottom: 10px; }
#hud .duel-stake-panel .trade-items { min-height: 52px; }
#hud .duel-stake-panel .duel-pot { margin-top: 10px; padding: 6px; }
#hud .duel-stake-panel .trade-feedback { margin: 10px 0; }