/* Brass, ink and leather framing for both commanders, kept above the battlefield. */
.duel-banner{flex-shrink:0;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch;gap:12px;padding:14px 24px 15px;background:radial-gradient(ellipse at 12% 0%,#47737780,transparent 60%),radial-gradient(ellipse at 88% 0%,#89534866,transparent 60%),linear-gradient(105deg,#203f46,#202d32 48%,#463330);border-block:2px solid #b28b50;box-shadow:inset 0 3px #e5c99024,inset 0 -5px 12px #090f18a0,0 3px 8px #080e1799;color:#f5e3bb}
.duel-banner:before{content:'';position:absolute;inset:5px;z-index:-1;border:1px solid #d4b47559;clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));pointer-events:none}
.duel-commander{display:flex;align-items:center;gap:12px;min-width:0;--team:#9bdcf2;--dark:#254c61;--heart:#7acbfa}
.duel-enemy{flex-direction:row-reverse;text-align:right;--team:#ffc4a4;--dark:#713f39;--heart:#ff997e}
.duel-avatar{flex:none;position:relative;display:grid;place-items:center;width:58px;height:64px;border:2px solid #d1af70;border-radius:42% 42% 45% 45%;background:radial-gradient(circle at 35% 25%,#ffffff24,transparent 50%),var(--dark);box-shadow:0 0 0 3px #1b2228,0 0 0 4px #947044,inset 0 0 0 3px #e6c98b35,inset 0 -10px 16px #07142277,0 5px 8px #0005;color:var(--team);font:700 29px Georgia,serif;text-shadow:0 2px 2px #07111f}
.duel-avatar:after{content:'◆';position:absolute;bottom:-10px;font-size:16px;color:#dfbc79;text-shadow:0 2px #342c29}
.duel-identity{min-width:0;line-height:1.25}
.duel-side{display:block;font:600 9px Georgia,serif;letter-spacing:2px;color:var(--team);margin-bottom:3px}
.duel-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 clamp(14px,2.6vw,21px) Georgia,serif;text-shadow:0 2px 2px #050e18;max-width:100%}
.duel-rank{display:block;margin-top:3px;font:11px Georgia,serif;color:#d6bd8d;letter-spacing:.4px}
.duel-rank>span[aria-hidden]{color:#e8cc91;margin-right:3px}/* the ◇ only: the title plaque keeps its own ink (RD-244) */
.duel-hearts{margin-top:5px;font-size:19px;letter-spacing:3px;color:var(--heart);line-height:1;text-shadow:0 2px #101e27,0 0 6px #0005}
.duel-hearts .heart-empty{opacity:.28;text-shadow:none}
.duel-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-inline:1px solid #c3a16940;color:#cfac70;position:relative}
.duel-divider small{font:9px Georgia,serif;letter-spacing:1px;margin-top:1px}
.duel-divider strong{font:700 27px Georgia,serif;color:#f8e7bf;text-shadow:0 2px 2px #080d17}
.duel-divider>span{font-size:10px;line-height:1}
@media(max-width:480px){.duel-banner{padding:12px 12px 13px;gap:7px;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)}.duel-commander{gap:8px}.duel-avatar{width:32px;height:40px;font-size:20px}.duel-side{font-size:7px;letter-spacing:1px}.duel-name{font-size:13px}.duel-rank{font-size:9px;letter-spacing:0}.duel-hearts{font-size:15px;letter-spacing:1px}.duel-divider strong{font-size:22px}.duel-divider small{font-size:7px}}

.duel-avatar.avatar-art{overflow:visible}
/* Take the canvas out of grid sizing: its DPR backing height must never grow its own container. */
.duel-avatar canvas{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;border-radius:inherit;clip-path:inset(0 round 42% 42% 45% 45%)}
/* Battle bar reskin (owner request, RD-195: "I want the player avatar and frame to be larger and the emote button doesn't
   look right where it's at"): bigger commander portraits (and so bigger frames), and the emote control as a gold pill on
   the hearts row instead of a bubble stuck to the avatar. */
.duel-banner{padding:16px 24px 17px}
.duel-avatar{width:78px;height:86px}
.duel-status{position:relative;display:flex;align-items:center;gap:10px;margin-top:5px}
.duel-enemy .duel-status{justify-content:flex-end}
.duel-status .duel-hearts{margin-top:0}
.duel-banner .duel-emote-button{position:static;display:inline-flex;align-items:center;gap:5px;width:auto;height:26px;padding:0 11px 0 8px;border-radius:13px;border:1px solid #d1af70;background:linear-gradient(180deg,#3b4f53,#22323a);color:#f3e2b8;font:700 11px Georgia,serif;letter-spacing:.5px;box-shadow:0 2px 6px #0007,inset 0 1px #ffffff22;cursor:pointer}
.duel-banner .duel-emote-button:hover,.duel-banner .duel-emote-button[aria-expanded="true"]{filter:brightness(1.18);border-color:#f0d08c}
.duel-banner .duel-emote-button .ico{width:16px;height:16px}
.duel-status .emote-menu{top:calc(100% + 8px);left:0}
@media(max-width:480px){.duel-banner{padding:12px 10px 13px}.duel-avatar{width:48px;height:54px;font-size:24px}.duel-status{gap:6px;margin-top:3px}.duel-banner .duel-emote-button{height:24px;padding:0 6px}.duel-banner .duel-emote-button span{display:none}.duel-banner .duel-emote-button .ico{width:15px;height:15px}}
/* Short screens keep a compact bar (styles.css), still with a bigger portrait than the 34 px it had. */
@media(max-height:900px) and (min-width:481px){.match-window .duel-banner{padding:8px 16px 9px}.match-window .duel-avatar{width:58px;height:64px}.match-window .duel-status{margin-top:2px}}