.summoners-player {container: summoners-player / inline-size;min-width:0;width:100%;font-family:var(--control-font);--control-font:Arial,Helvetica,sans-serif;--cream:#f5e6d3;--muted:#b8a68d;--gold:#dbbd73;}
.summoners-player *,.summoners-player *::before,.summoners-player *::after {box-sizing:border-box;}
.summoners-player [hidden] {display:none!important;}
.summoners-player button {color:inherit;font:inherit;cursor:pointer;}
.summoners-player .spell-art {position:static;top:auto;left:auto;transform:none;}
.summoners-player button:focus-visible,.summoners-player a:focus-visible {outline:2px solid #f8d98c;outline-offset:4px;}
/* Original 96px panels are nine-sliced at source resolution; their corners stay fixed. */
.summoners-player .battle-player { --accent:#88dded; position:relative; border:32px solid transparent; border-image:url('ui/panel-scroll.png') 32 fill stretch; image-rendering:pixelated; isolation:isolate; filter:drop-shadow(0 18px 24px #0008); }.summoners-player .battle-player[data-kind="magic"] { --accent:#cfabff; }.summoners-player .player-inner { position:relative; image-rendering:auto; }.summoners-player .player-heading { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:46px; margin-top:-12px; padding:0 0 10px; gap:8px; }.summoners-player .player-heading h3 { margin:0; font:22px Georgia,serif; font-weight:normal; line-height:1.1; }.summoners-player .player-tools { display:flex; gap:4px; flex:none; }.summoners-player .utility { border:0; background:transparent; width:36px; height:36px; padding:2px; display:grid; place-items:center; position:relative; }.summoners-player .utility img { width:32px; height:32px; image-rendering:pixelated; }.summoners-player .utility.reset:hover img { content:url('ui/undo-hover.png'); }.summoners-player .utility.info { background:url('ui/frame-slot.png') center/32px 32px no-repeat; image-rendering:pixelated; font:600 19px var(--control-font); }
.summoners-player .player-core { position:relative; }.summoners-player .battlefield { position:relative; aspect-ratio:4/3; background:#232725; overflow:hidden; box-shadow:0 0 0 1px #c4b38645,0 0 0 4px #14151b; }.summoners-player .battlefield .planning-still { position:absolute; inset:0 auto 0 -33.3333%; width:133.3333%; height:100%; max-width:none; image-rendering:auto; }.summoners-player .battlefield::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 50px #080e1590; z-index:1; }.summoners-player .battlefield video { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; z-index:4; background:#0b1012; }
.summoners-player .faction { position:absolute; z-index:2; display:flex; align-items:center; gap:4px; height:40px; }.summoners-player .faction.enemy { left:8px; top:8px; }.summoners-player .faction.ally { bottom:8px; right:8px; }.summoners-player .crest { display:block; border:8px solid transparent; border-image:url('ui/frame-slot.png') 8 fill; width:40px; height:40px; }.summoners-player .crest img { width:24px; height:24px; object-fit:cover; }.summoners-player .faction .gem { image-rendering:pixelated; width:20px; height:20px; object-fit:contain; }.summoners-player .threat { width:38px; height:38px; position:relative; padding:3px; margin-left:4px; background:#271617d9; border:1px solid #cd8066; }.summoners-player .threat .spell-art { transform:scale(.5); transform-origin:top left; position:absolute; left:3px; top:3px; }.summoners-player .threat::after { content:"!"; position:absolute; bottom:-4px; right:-4px; background:#6e3427; border:1px solid #efb391; color:#ffecbf; border-radius:50%; width:14px; height:14px; font:bold 10px Arial; text-align:center; }
.summoners-player .spell-art { display:block; width:58px; height:58px; background-image:url('../assets/spell-cards.png'); background-repeat:no-repeat; image-rendering:pixelated; }.summoners-player .spell-art.barrier { background-position:-421px -630px; }.summoners-player .spell-art.fireball { background-position:-328px -35px; }
.summoners-player .targets { position:absolute; inset:0; z-index:3; }.summoners-player .target { position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; width:116px; height:58px; border:1px dashed var(--accent); border-radius:4px; background:#5dceea12; padding:0; color:var(--accent); display:grid; place-items:center; box-shadow:0 0 16px #57cef21a,inset 0 0 15px #57cef20c; transition:background .2s,box-shadow .2s; }.summoners-player .target .target-rune { image-rendering:pixelated; width:32px; height:32px; opacity:.8; }.summoners-player .target .ghosts { display:flex; gap:3px; opacity:0; position:absolute; transition:opacity .2s; }.summoners-player .ghosts img { width:24px; height:24px; image-rendering:pixelated; filter:brightness(1.7) sepia(1) saturate(.6); }.summoners-player .target::after { content:""; position:absolute; inset:4px; border:1px solid var(--accent); opacity:.15; border-radius:2px; }.summoners-player .target:hover,.summoners-player .target:focus-visible,.summoners-player .target[aria-pressed="true"] { background:#6fccda35; box-shadow:0 0 20px #4bb0da60; border-style:solid; }.summoners-player .battle-player[data-picked="true"] .target .ghosts { opacity:.66; }.summoners-player .battle-player[data-picked="true"] .target .target-rune { opacity:0; }.summoners-player .target[aria-pressed="true"] .ghosts { opacity:1; }.summoners-player .target[aria-pressed="true"]::before { content:"✓"; position:absolute; top:-9px; right:-8px; color:#10151a; background:var(--accent); font:bold 12px Arial; width:20px; height:20px; border-radius:50%; line-height:20px; }
.summoners-player .battle-player[data-kind="magic"] .target { width:84px; height:72px; border-radius:50%; background:#8753c817; border-color:#d1b2fb; }.summoners-player .battle-player[data-kind="magic"] .target::after { border-radius:50%; }.summoners-player .barrier-ghost { position:absolute; width:58px; height:58px; border:2px solid #dbbaff; border-radius:50% 50% 40% 40%; background:radial-gradient(ellipse at 35% 25%,#fff7,transparent 28%),radial-gradient(ellipse at bottom,#cfabff60,#844abc05 75%); opacity:.45; box-shadow:inset 0 -5px 10px #9c65df66; }.summoners-player .target:hover .barrier-ghost,.summoners-player .target[aria-pressed="true"] .barrier-ghost { opacity:1; }.summoners-player .target-hint { position:absolute; inset:0; border:1px solid var(--accent); border-radius:inherit; opacity:0; animation:invite 3s ease-out infinite; pointer-events:none; }.summoners-player .target:nth-child(2) .target-hint { animation-delay:.75s; }.summoners-player .target:nth-child(3) .target-hint { animation-delay:1.5s; }.summoners-player .battle-player[data-touched="true"] .target-hint { animation:none; }.summoners-player .target-legend { position:absolute; top:calc(100% + 7px); left:50%; translate:-50%; font-size:9px; white-space:nowrap; opacity:0; background:#10121de8; color:#f5e6d3; padding:4px 6px; pointer-events:none; }.summoners-player .target:hover .target-legend,.summoners-player .target:focus-visible .target-legend { opacity:1; }.summoners-player .target:last-child .target-legend { top:auto; bottom:calc(100% + 7px); }
@keyframes invite { 0%,45% { opacity:0; scale:.85; }55% { opacity:.8; }100% { opacity:0; scale:1.18; } }
.summoners-player .command-dock { position:relative; display:flex; align-items:center; gap:12px; min-height:110px; padding:20px 0 0; }.summoners-player .choices { display:flex; gap:12px; flex:1; align-items:center; }.summoners-player .choice { display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:transparent; padding:0; position:relative; min-width:72px; }.summoners-player .choice-art { width:64px; height:64px; border:8px solid transparent; border-image:url('ui/frame-slot.png') 8 fill; display:grid; place-items:center; position:relative; image-rendering:pixelated; transition:translate .18s,filter .18s; }.summoners-player .choice-art>img { width:48px; height:48px; object-fit:cover; image-rendering:auto; }.summoners-player .choice-art .spell-art { position:absolute; top:0; left:0; width:48px; height:48px; background-position:-426px -635px; }.summoners-player .choice .choice-label { font-size:11px; color:#d6c6b1; }.summoners-player .choice:hover .choice-art,.summoners-player .choice:focus-visible .choice-art { translate:0 -4px; filter:brightness(1.2); }.summoners-player .choice[aria-pressed="true"] .choice-art { outline:2px solid var(--accent); outline-offset:2px; filter:drop-shadow(0 0 8px #6caad96b); }.summoners-player .choice[aria-pressed="true"] .choice-label { color:var(--cream); }.summoners-player .choice[aria-pressed="true"]::after { content:""; width:6px; height:6px; rotate:45deg; background:var(--accent); position:absolute; top:-10px; left:calc(50% - 3px); }.summoners-player .choice[data-choice="barrier"] { min-width:90px; }
.summoners-player .play-button { --button:url('ui/button-primary.png'); position:relative; width:172px; height:54px; padding:0 12px; border:solid transparent; border-width:16px 32px; border-image:var(--button) 8 16 fill stretch; display:flex; justify-content:center; align-items:center; gap:8px; flex:none; white-space:nowrap; font:600 15px/1.2 var(--control-font); background:transparent; image-rendering:pixelated; }.summoners-player .play-button svg { width:16px; height:16px; fill:currentColor; flex:none; }.summoners-player .play-button:hover { --button:url('ui/button-primary-hover.png'); color:#261d1d; }.summoners-player .play-button[aria-disabled="true"] { opacity:.6; }.summoners-player .play-button.ready { filter:drop-shadow(0 0 6px #d7ae4955); }.summoners-player .player-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.summoners-player .helper { position:absolute; inset:45px 0 auto; z-index:9; border:24px solid transparent; border-image:url('ui/panel-inset.png') 16 fill; padding:4px; box-shadow:0 16px 32px #000b; font-size:13px; line-height:1.7; }.summoners-player .helper h4 { font:22px Georgia; margin:0 0 10px; }.summoners-player .helper p { margin:0 0 12px; color:#dbceb9; }.summoners-player .helper p:last-child { font-size:10px; color:#b5a897; margin:0; }.summoners-player .helper .close-help { float:right; margin:-16px -16px 0 8px; }.summoners-player .inline-tip { position:absolute; z-index:10; left:8px; right:8px; bottom:112px; width:max-content; max-width:calc(100% - 16px); margin:0 auto; padding:8px 12px; background:#191923f5; color:#eee1d1; border:1px solid #bba780; font-size:11px; box-shadow:0 8px 22px #0006; pointer-events:none; }
.summoners-player .progress { height:3px; position:absolute; left:0; right:0; bottom:0; z-index:5; background:#1118; }.summoners-player .progress>span { display:block; width:var(--progress,0%); height:100%; background:#e2ba71; }.summoners-player .time { position:absolute; z-index:5; top:10px; right:10px; font-size:10px; background:#151823d9; padding:5px 8px; }.summoners-player .result-overlay { position:absolute; z-index:6; left:20px; right:20px; bottom:20px; padding:14px; background:#12131fed; border:1px solid #bca16c; text-align:center; }.summoners-player .result-overlay strong { display:block; font:700 30px var(--control-font); color:#e0c77e; margin-bottom:4px; }.summoners-player .result-overlay p { margin:0; font-size:12px; line-height:1.5; }.summoners-player .media-error { position:absolute; z-index:6; inset:0; background:#0d1020df; padding:24px; display:grid; place-content:center; text-align:center; }.summoners-player .media-error p { font-size:13px; }.summoners-player .media-error button { margin:8px auto; }.summoners-player .battle-player[data-stage="playing"] .choices,.summoners-player .battle-player[data-stage="result"] .choices { opacity:.5; }.summoners-player .battle-player[data-stage="playing"] .targets,.summoners-player .battle-player[data-stage="result"] .targets,.summoners-player .battle-player[data-stage="playing"] .faction,.summoners-player .battle-player[data-stage="result"] .faction { display:none; }
/* Full portrait cards, physically gathered in one inset hand. */
.summoners-player[data-direction="hand"] .battle-player { border-image-source:url('ui/panel-scroll.png'); }
.summoners-player[data-direction="hand"] .command-dock { padding-top:24px; min-height:168px; align-items:center; }
.summoners-player[data-direction="hand"] .choices { gap:16px; }.summoners-player .battle-player .card-detail { display:none; }
.summoners-player[data-direction="hand"] .choice { width:96px; min-width:0; padding:8px 8px 10px; border:8px solid transparent; border-image:url('ui/frame-slot.png') 8 fill; background:#1d1b28; }
.summoners-player[data-direction="hand"] .choice-art { border:0; width:64px; height:64px; margin:auto; }
.summoners-player[data-direction="hand"] .choice-art>img { width:64px; height:64px; }.summoners-player[data-direction="hand"] .choice-art .spell-art { top:3px; left:3px; width:58px; height:58px; background-position:-421px -630px; }
.summoners-player[data-direction="hand"] .choice-label { font:500 14px var(--control-font); }.summoners-player[data-direction="hand"] .card-detail { display:flex; justify-content:center; align-items:center; gap:4px; font-size:10px; color:#e8c365; }.summoners-player[data-direction="hand"] .card-detail img { width:16px; height:16px; image-rendering:pixelated; }
.summoners-player[data-direction="hand"] .choice[aria-pressed="true"] { translate:0 -8px; filter:drop-shadow(0 0 7px #abc5ff44); }.summoners-player[data-direction="hand"] .choice[aria-pressed="true"] .choice-art { outline:0; }.summoners-player[data-direction="hand"] .choice[aria-pressed="true"] { outline:1px solid var(--accent); outline-offset:2px; }.summoners-player[data-direction="hand"] .inline-tip { bottom:180px; }
@container summoners-player (max-width:1120px) {.summoners-player .battle-player { border-width:24px; border-image-slice:24; }.summoners-player .player-heading h3 { font-size:19px; }.summoners-player .play-button { width:144px; font-size:14px; }.summoners-player .choices { gap:8px; }.summoners-player .choice { min-width:60px; }.summoners-player .target { width:88px; height:52px; }.summoners-player[data-direction="hand"] .choices { gap:8px; }.summoners-player[data-direction="hand"] .choice { width:80px; }.summoners-player[data-direction="hand"] .play-button { width:140px; } }
@container summoners-player (max-width:740px) {.summoners-player .battle-player { border-width:32px; border-image-slice:32; } }
@container summoners-player (max-width:500px) {.summoners-player .battle-player { border-width:16px; border-image-slice:16; }.summoners-player .player-heading { min-height:48px; margin:0; padding:0 0 12px; }.summoners-player .player-heading h3 { font-size:17px; max-width:190px; }.summoners-player .player-tools { gap:0; }.summoners-player .utility { width:32px; height:32px; }.summoners-player .target { width:68px; height:44px; }.summoners-player .target .target-rune { width:32px; height:32px; }.summoners-player .ghosts { gap:0!important; }.summoners-player .ghosts img { width:12px; height:12px; }.summoners-player .battle-player[data-kind="magic"] .target { width:52px; height:52px; }.summoners-player .barrier-ghost { width:42px; height:42px; }.summoners-player .faction { height:24px; }.summoners-player .faction.enemy { top:4px; left:4px; }.summoners-player .faction.ally { bottom:4px; right:4px; }.summoners-player .crest { width:24px; height:24px; border-width:4px; border-image-slice:4; }.summoners-player .crest img { width:16px; height:16px; }.summoners-player .faction .gem { width:12px; height:12px; }.summoners-player .threat { width:26px; height:26px; margin-left:0; }.summoners-player .threat .spell-art { transform:scale(.333333); }.summoners-player .command-dock { gap:8px; padding:16px 0 0; min-height:94px; }.summoners-player .choices { gap:8px; }.summoners-player .choice { min-width:44px; gap:5px; }.summoners-player .choice-art { width:48px; height:48px; }.summoners-player .choice-art>img { width:32px; height:32px; }.summoners-player .choice-art .spell-art { transform:scale(.5); transform-origin:top left; width:58px; height:58px; left:2px; top:2px; background-position:-421px -630px; }.summoners-player .choice .choice-label { font-size:9px; }.summoners-player .choice[data-choice="barrier"] { min-width:70px; }.summoners-player .play-button { width:124px; height:54px; padding:0; font-size:17px; gap:6px; }.summoners-player .play-button svg { width:12px; height:12px; }.summoners-player .helper { inset:40px 0 auto; border-width:16px; font-size:11px; }.summoners-player .helper h4 { font-size:18px; }.summoners-player .helper p { margin:0 0 8px; }.summoners-player .inline-tip { bottom:102px; font-size:10px; }.summoners-player .result-overlay { bottom:10px; left:10px; right:10px; padding:10px; }.summoners-player .result-overlay strong { font-size:24px; }.summoners-player .result-overlay p { font-size:10px; }
.summoners-player[data-direction="hand"] .command-dock { min-height:140px; padding-top:20px; gap:8px; }.summoners-player[data-direction="hand"] .choice { width:64px; padding:2px 0 5px; border-width:8px; gap:4px; }.summoners-player[data-direction="hand"] .choice-art { width:48px; height:48px; }.summoners-player[data-direction="hand"] .choice-art>img { width:48px; height:48px; }.summoners-player[data-direction="hand"] .choice-art .spell-art { transform:scale(.5); left:10px; top:10px; }.summoners-player[data-direction="hand"] .choice-label { font-size:10px; }.summoners-player[data-direction="hand"] .play-button { width:116px; }.summoners-player[data-direction="hand"] .card-detail { font-size:9px; }.summoners-player[data-direction="hand"] .inline-tip { bottom:150px; }
}

/* Invitation and previews use the source game's art, with no invented frame artwork. */
.summoners-player .target-plus { font:24px Arial,sans-serif; opacity:.8; }.summoners-player .battle-player[data-picked="true"] .target-plus,.summoners-player .battle-player[data-kind="magic"] .target-plus { opacity:0; }
.summoners-player .barrier-ghost { width:160px; height:144px; background:url('ui/barrier-dome.png') -960px -144px; border:0; border-radius:0; box-shadow:none; opacity:.55; image-rendering:pixelated; pointer-events:none; }
.summoners-player .battle-player[data-picked="false"] .choice-art { animation:card-invitation 3.6s ease-in-out infinite; }.summoners-player .battle-player[data-picked="false"] .choice:nth-child(2) .choice-art { animation-delay:1.8s; }
@keyframes card-invitation { 0%,60%,100% { filter:brightness(1); }75% { filter:brightness(1.3) drop-shadow(0 0 7px #d5b16e80); } }
@container summoners-player (max-width:500px) {
  .summoners-player .barrier-ghost { transform:scale(.5); }
}
@media(prefers-reduced-motion:reduce) { .summoners-player .battle-player[data-picked="false"] .choice-art { animation:none; } }

/* Badges sit in unused corners instead of covering the enemy formation. */
.summoners-player .faction.enemy { left:auto; right:8px; }
.summoners-player[data-direction="hand"] .choice-label { min-height:28px; line-height:14px; display:grid; place-items:center; }
@container summoners-player (max-width:500px) { .summoners-player .faction.enemy { right:4px; }.summoners-player[data-direction="hand"] .choice-label { min-height:24px; line-height:12px; } }

/* Shared refinements: outcomes and optional details remain within the arena. */
.summoners-player .encounter-title,.summoners-player .gold-bank,.summoners-player .enemy-tint { display:none; }
.summoners-player .inline-tip { line-height:1.55; padding:12px 16px; }
.summoners-player .inline-tip strong { display:block; margin-bottom:4px; color:#f1d99b; font:18px Georgia,serif; }
.summoners-player .battle-announcement,.summoners-player .result-overlay { position:absolute; inset:0; z-index:6; border:0; padding:0; margin:0; display:grid; place-items:center; background:#0b101854; }
.summoners-player .battle-announcement { pointer-events:none; }
.summoners-player .result-overlay { background:radial-gradient(ellipse,#101321a6, #10132138); }
.summoners-player .result-content { width:100%; display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:32px; animation:result-arrive .4s ease-out both; }
.summoners-player .battle-banner { position:relative; display:grid; place-items:center; width:min(340px,calc(100% - 24px)); height:70px; border:solid transparent; border-width:0 72px; border-image:url('../assets/war-banner.png') 0 72 fill / 0 72px / 0 stretch; image-rendering:pixelated; filter:drop-shadow(0 6px 12px #0008); }
.summoners-player .battle-banner strong,.summoners-player .result-overlay .battle-banner strong { position:absolute; inset:0; margin:0; display:grid; place-items:center; color:#fceacd; font:700 38px/1.1 var(--control-font); text-shadow:0 4px #401312; white-space:nowrap; }
.summoners-player .battle-banner img { position:absolute; width:96px; height:auto; top:-51px; left:50%; translate:-50%; z-index:-1; image-rendering:pixelated; }
.summoners-player .battle-announcement .battle-banner { animation:result-arrive .3s ease-out both; }
.summoners-player .result-overlay .play-now { width:180px; font-size:15px; padding:0 4px; }
.summoners-player .result-overlay[data-victory="true"] .result-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:center; max-width:380px; gap:16px 12px; }
.summoners-player .result-overlay[data-victory="true"] .battle-banner { grid-column:1 / -1; justify-self:center; }
.summoners-player .result-overlay[data-victory="true"] .play-now { width:100%; }
.summoners-player .result-overlay[data-victory="true"] .try-again { min-width:0; min-height:54px; padding:8px; gap:8px; }
.summoners-player .try-again { display:flex; align-items:center; justify-content:center; gap:12px; border:0; background:#201c27e8; box-shadow:0 4px 20px #0006; padding:8px 16px; font:600 14px/1.3 var(--control-font); min-height:44px; color:#f5e6d3; }
.summoners-player .try-again img { width:32px; height:32px; image-rendering:pixelated; }
.summoners-player .try-again:hover img { content:url('ui/undo-hover.png'); }
@keyframes result-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* The selected direction places the familiar game HUD directly over the arena. */
.summoners-player[data-direction="hand"] .encounter-title { display:block; margin:0 4px 20px; color:#f4dfb8; font:bold clamp(27px,3vw,42px)/1.12 Georgia,serif; letter-spacing:-1px; text-shadow:0 2px 0 #281b20,0 4px 18px #0007; }
.summoners-player[data-direction="hand"] .encounter-title em { font-weight:normal; color:#e5bd77; }
.summoners-player[data-direction="hand"] .battle-player { border:12px solid transparent; border-image:url('ui/panel-scroll.png') 12 fill stretch; }
.summoners-player[data-direction="hand"] .player-inner { background:#343b33; padding:0; }
.summoners-player[data-direction="hand"] .player-heading { position:absolute; z-index:8; inset:0 0 auto; min-height:0; margin:0; padding:0; display:grid; grid-template-columns:1fr auto 1fr; pointer-events:none; }
.summoners-player[data-direction="hand"] .player-heading button { pointer-events:auto; }
.summoners-player[data-direction="hand"] .player-heading h3 { display:none; }
.summoners-player[data-direction="hand"] .player-heading>.battle { grid-column:2; grid-row:1; width:122px; height:44px; margin:0; padding:0; border:0; background:none; color:#fff; font:600 14px/1.2 var(--control-font); filter:none; }
.summoners-player[data-direction="hand"] .player-tools { display:contents; }
.summoners-player[data-direction="hand"] .player-heading>.battle { grid-row:1; }
.summoners-player[data-direction="hand"] .player-tools .reset { grid-column:1; grid-row:1; justify-self:start; }
.summoners-player[data-direction="hand"] .player-tools .info { grid-column:3; grid-row:1; justify-self:end; }
.summoners-player[data-direction="hand"] .utility { width:44px; height:44px; }
.summoners-player[data-direction="hand"] .battlefield { box-shadow:none; overflow:clip; }
.summoners-player[data-direction="hand"] .command-dock { position:absolute; left:0; right:auto; bottom:0; z-index:7; min-height:0; padding:0; display:flex; flex-direction:column; gap:0; align-items:stretch; border:4px solid transparent; border-image:url('ui/frame-slot.png') 4 fill stretch; background:#2c2330; box-shadow:4px -4px 16px #10121b66; transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s; }
.summoners-player[data-direction="hand"] .battle-player[data-stage="playing"] .command-dock,.summoners-player[data-direction="hand"] .battle-player[data-stage="result"] .command-dock { transform:translateY(calc(100% + 24px)); opacity:0; pointer-events:none; }
.summoners-player[data-direction="hand"] .choices { flex:0; margin:0; padding:0; justify-content:flex-start; align-items:center; gap:0; }
.summoners-player[data-direction="hand"] .choice { width:104px; min-width:104px; height:152px; padding:4px; gap:4px; border:8px solid transparent; border-image:url('ui/frame-slot.png') 8 fill; background:#2c2130; translate:none; transition:box-shadow .2s, outline-color .2s; }
.summoners-player[data-direction="hand"] .choice-art { flex:none; width:80px; height:80px; border:8px solid transparent; border-image:url('ui/frame-slot.png') 8 fill; margin:0; display:grid; place-items:center; overflow:hidden; background:#141b1b; translate:none; filter:none; animation:none!important; }
.summoners-player[data-direction="hand"] .choice-art>img { display:block; width:64px; height:64px; object-fit:cover; object-position:center; }
.summoners-player[data-direction="hand"] .choice-art .spell-art { position:absolute; left:50%; top:50%; translate:-50% -50%; width:58px; height:58px; background-position:-421px -630px; transform:none; transform-origin:center; }
.summoners-player[data-direction="hand"] .choice .choice-label { font:500 13px/16px var(--control-font); min-height:16px; display:flex; align-items:center; white-space:nowrap; }
.summoners-player[data-direction="hand"] .choice[data-choice="barrier"] .choice-label { font-size:12px; }
.summoners-player[data-direction="hand"] .card-detail { display:flex; height:16px; margin-top:2px; font-size:11px; }
.summoners-player[data-direction="hand"] .card-detail img { width:16px; height:16px; }
.summoners-player[data-direction="hand"] .choice::after { display:none; }
.summoners-player[data-direction="hand"] .choice::before { content:""; position:absolute; inset:-3px; border:1px solid #efd495; pointer-events:none; opacity:0; box-shadow:0 0 12px #f2c87377, inset 0 0 8px #f2c87333; transition:opacity .2s; }
.summoners-player[data-direction="hand"] .battle-player[data-picked="false"] .choice::before { animation:invite-card 3.4s ease-in-out infinite; }
.summoners-player[data-direction="hand"] .battle-player[data-picked="false"] .choice:nth-child(2)::before { animation-delay:1.7s; }
.summoners-player[data-direction="hand"] .choice:hover::before,.summoners-player[data-direction="hand"] .choice:focus-visible::before { opacity:1; animation:none!important; }
.summoners-player[data-direction="hand"] .choice:hover .choice-art,.summoners-player[data-direction="hand"] .choice:focus-visible .choice-art { translate:none; filter:none; }
.summoners-player[data-direction="hand"] .choice[aria-pressed="true"] { translate:none; filter:none; outline:1px solid var(--accent); outline-offset:3px; box-shadow:0 0 18px #a5cfff30; }
.summoners-player[data-direction="hand"] .choice[aria-pressed="true"] .choice-art { outline:0; }
.summoners-player[data-direction="hand"] .choice[aria-pressed="true"]::before { opacity:.5; border-color:var(--accent); }
.summoners-player[data-direction="hand"] .gold-bank { display:flex; position:relative; align-items:center; gap:8px; padding:5px 8px; min-width:0; justify-content:center; background:#362b36; border:0; border-bottom:1px solid #b08c5066; box-shadow:none; }
.summoners-player .bank-coin { width:16px; height:16px; image-rendering:pixelated; filter:drop-shadow(0 3px 0 #18131c); }
.summoners-player .bank-label { display:none; font:9px/1 Arial,sans-serif; letter-spacing:1.6px; color:#dfbf7f; }
.summoners-player .gold-available { display:inline-block; font:600 22px/1 var(--control-font); color:#ffe5a3; font-variant-numeric:tabular-nums; min-width:50px; }
.summoners-player .bank-spent { display:inline-block; margin-left:10px; color:#c6b7a5; font:10px/1.4 Arial,sans-serif; font-variant-numeric:tabular-nums; }
.summoners-player .gold-change { position:absolute; left:16px; top:16px; opacity:0; font:600 18px var(--control-font); color:#ffdf87; text-shadow:0 2px 3px #221710; pointer-events:none; }
.summoners-player[data-direction="hand"] .inline-tip { left:12px; right:auto; bottom:216px; width:310px; max-width:calc(100% - 24px); margin:0; font-size:12px; background:#29232bf5; border-color:#b79866; }
.summoners-player[data-direction="hand"] .helper { inset:64px 8px auto; }
.summoners-player[data-direction="hand"] .enemy-tint { position:absolute; display:block; inset:0; z-index:2; pointer-events:none; mix-blend-mode:color; }
.summoners-player .enemy-tint span { position:absolute; top:5.28%; height:8.89%; border-radius:6px; background:#ff3030; opacity:.38; box-shadow:0 0 4px 1px #e7353520; }
.summoners-player .enemy-tint span:first-child { left:17.5%; width:13.333%; }
.summoners-player [data-kind="magic"] .enemy-tint span:first-child { left:10.833%; }
.summoners-player .enemy-tint span:last-child { left:44.167%; width:26.667%; }
.summoners-player[data-direction="hand"] .battle-player[data-stage="playing"] .enemy-tint,.summoners-player[data-direction="hand"] .battle-player[data-stage="result"] .enemy-tint { display:none; }
.summoners-player[data-direction="hand"] .battle-player[data-stage="playing"] .choices,.summoners-player[data-direction="hand"] .battle-player[data-stage="result"] .choices { opacity:1; }
@keyframes invite-card { 0%,45%,100% { opacity:0; } 62%,76% { opacity:.85; } }

@container summoners-player (max-width:500px) {
  .summoners-player[data-direction="hand"] .encounter-title { margin:0 4px 20px; font-size:27px; max-width:350px; letter-spacing:-.7px; }
  .summoners-player[data-direction="hand"] .player-heading { min-height:0; gap:0; padding:0; }
  .summoners-player[data-direction="hand"] .player-tools { gap:0; }
  .summoners-player[data-direction="hand"] .utility { width:44px; height:44px; padding:0; }
  .summoners-player[data-direction="hand"] .utility img { width:32px; height:32px; }
  .summoners-player[data-direction="hand"] .utility.info { background-size:32px 32px; font-size:18px; }
  .summoners-player[data-direction="hand"] .command-dock { left:0; right:auto; bottom:0; gap:0; }
  .summoners-player[data-direction="hand"] .choices { gap:0; }
  .summoners-player[data-direction="hand"] .gold-bank { min-width:0; padding:4px 8px; gap:4px; }
  .summoners-player[data-direction="hand"] .bank-coin { width:16px; height:16px; }
  .summoners-player[data-direction="hand"] .gold-available { font-size:20px; min-width:28px; }

  .summoners-player[data-direction="hand"] .bank-spent { font-size:9px; }
  .summoners-player[data-direction="hand"] .inline-tip strong { font-size:16px; }
  .summoners-player .battle-banner strong,.summoners-player .result-overlay .battle-banner strong { font-size:30px; }
  .summoners-player .result-content { gap:10px; padding-top:26px; }
  .summoners-player .battle-banner img { width:64px; top:-32px; }
  .summoners-player .result-overlay .play-now { width:160px; height:44px; border-width:8px 16px; font-size:14px; }
  .summoners-player .try-again { font-size:13px; padding:4px 12px; }
  .summoners-player .result-overlay[data-victory="true"] .result-content { max-width:calc(100% - 16px); gap:10px 8px; }
  .summoners-player .result-overlay[data-victory="true"] .battle-banner { height:54px; }
  .summoners-player .result-overlay[data-victory="true"] .try-again { min-height:44px; padding:4px 6px; gap:6px; font-size:12px; }
  .summoners-player .result-overlay[data-victory="true"] .try-again img { width:24px; height:24px; }
  .summoners-player[data-direction="hand"] .choice { width:64px; min-width:64px; height:100px; border-width:6px; border-image-slice:6; gap:3px; padding:0; }
  .summoners-player[data-direction="hand"] .choice-art { width:48px; height:48px; border-width:4px; border-image-slice:4; }
  .summoners-player[data-direction="hand"] .choice-art>img { width:40px; height:40px; }
  .summoners-player[data-direction="hand"] .choice-art .spell-art { scale:.625; }
  .summoners-player[data-direction="hand"] .choice .choice-label { font-size:10px; line-height:12px; min-height:12px; }
  .summoners-player[data-direction="hand"] .choice[data-choice="barrier"] .choice-label { font-size:9px; white-space:normal; text-align:center; min-height:24px; }
  .summoners-player[data-direction="hand"] .card-detail { margin:0; height:14px; font-size:9px; }
  .summoners-player[data-direction="hand"] .card-detail img { width:12px; height:12px; }
  .summoners-player[data-direction="hand"] .inline-tip { top:8px; bottom:auto; }
}
@container summoners-player (max-width:360px) {
  .summoners-player[data-direction="hand"] .player-heading { grid-template-columns:1fr auto 1fr; }

  .summoners-player[data-direction="hand"] .gold-bank { min-width:0; padding:4px 8px; }
  .summoners-player[data-direction="hand"] .command-dock { gap:0; }
  .summoners-player[data-direction="hand"] .choices { gap:0; }
}


.summoners-player .inline-tip[data-anchor="top"] { top:64px; bottom:auto; }

/* Planning controls withdraw together; a small transport remains available for playback. */
.summoners-player[data-direction="hand"] .player-heading { transition:top .4s cubic-bezier(.4,0,.2,1),opacity .3s; }
.summoners-player[data-direction="hand"] .battle-player[data-stage="playing"] .player-heading,
.summoners-player[data-direction="hand"] .battle-player[data-stage="result"] .player-heading { top:-70px; opacity:0; }
.summoners-player .transport { position:absolute; top:8px; right:8px; z-index:8; width:44px; height:44px; background:url('ui/frame-slot.png') center/32px 32px no-repeat; }
.summoners-player .transport svg { width:16px; height:16px; fill:#f7e5bf; }
.summoners-player[data-direction="hand"] .time { right:56px; top:16px; }
@media(prefers-reduced-motion:reduce) { .summoners-player[data-direction="hand"] .player-heading { transition:none; } }

/* The BattleHUD frame retains crisp slices while its label shares the website UI font. */
.summoners-player[data-direction="hand"] .player-heading>.battle::before { content:""; box-sizing:border-box; position:absolute; inset:0 0 auto; height:30px; border:10px solid transparent; border-image:url('ui/button-ready.png') 10 fill stretch; pointer-events:none; }
.summoners-player[data-direction="hand"] .player-heading>.battle:hover::before { border-image-source:url('ui/button-ready-hover.png'); }
.summoners-player[data-direction="hand"] .player-heading>.battle span { position:absolute; inset:0 0 auto; height:30px; display:grid; place-items:center; }
.summoners-player[data-direction="hand"] .player-heading>.battle svg { display:none; }
.summoners-player[data-direction="hand"] .player-heading>.battle:hover { color:#fff; }
.summoners-player[data-direction="hand"] .player-heading>.battle[aria-disabled="true"] { opacity:1; color:#c5bdaf; }
.summoners-player[data-direction="hand"] .player-heading>.battle.ready::before { filter:drop-shadow(0 2px 6px #edc26c70); }

/* Narrow screens need a few pixels of actual arena floor above the first rank.
   Only the empty floor is extended; map, targets and video retain the original full-width 16:9 geometry. */
.summoners-player[data-direction="hand"] .battlefield { aspect-ratio:auto; padding-top:max(0px,calc(32px - 2.97%)); }
.summoners-player .arena-view { position:relative; width:100%; aspect-ratio:16/9; }
.summoners-player[data-direction="hand"] .arena-view .planning-still { left:0; width:100%; }
.summoners-player .arena-canopy { position:absolute; inset:0 0 auto; height:32px; overflow:hidden; pointer-events:none; }
.summoners-player .arena-canopy img { position:absolute; top:0; left:0; width:100%; height:auto; max-width:none; transform:translateY(-35.5556%); }
.summoners-player .threat { position:absolute; top:8px; right:8px; z-index:3; }
.summoners-player[data-direction="hand"] .threat { top:4px; right:52px; }
@container summoners-player (max-width:500px) { .summoners-player[data-direction="hand"] .threat { right:48px; } }

.summoners-player .battle-player[data-stage="playing"] .threat,.summoners-player .battle-player[data-stage="result"] .threat { display:none; }

/* One corner-mounted inventory: bank and cards share a continuous game frame. */
.summoners-player[data-direction="hand"] .enemy-tint span:first-child { left:38.125%; width:10%; }
.summoners-player[data-direction="hand"] [data-kind="magic"] .enemy-tint span:first-child { left:33.125%; }
.summoners-player[data-direction="hand"] .enemy-tint span:last-child { left:58.125%; width:20%; }
.summoners-player[data-direction="hand"] .gold-change { left:50%; top:4px; }
.summoners-player[data-direction="hand"] .player-heading>.battle.ready::before { animation:start-invitation 2.6s ease-in-out infinite; }
.summoners-player[data-direction="hand"] .player-heading>.battle.ready span { color:#fff3c6; text-shadow:0 0 8px #f9bc4470; }
.summoners-player[data-direction="hand"] .player-heading>.battle.ready:hover::before,
.summoners-player[data-direction="hand"] .player-heading>.battle.ready:focus-visible::before { animation:none; filter:brightness(1.15) drop-shadow(0 0 7px #f5c15ca0); }
@keyframes start-invitation { 0%,100% { filter:brightness(1) drop-shadow(0 0 3px #e4ab3e50); } 50% { filter:brightness(1.4) drop-shadow(0 0 10px #ffd277c0); } }
@container summoners-player (max-width:740px) {
  .summoners-player[data-direction="hand"] .choices { flex-direction:column; }
  .summoners-player[data-direction="hand"] .choice { width:64px; min-width:64px; height:84px; border-width:4px; border-image-slice:4; padding:0; gap:2px; }
  .summoners-player[data-direction="hand"] .choice-art { width:48px; height:48px; border-width:4px; border-image-slice:4; }
  .summoners-player[data-direction="hand"] .choice-art>img { width:40px; height:40px; }
  .summoners-player[data-direction="hand"] .choice-art .spell-art { scale:.625; }
  .summoners-player[data-direction="hand"] .choice .choice-label { font-size:10px; line-height:12px; min-height:12px; }
  .summoners-player[data-direction="hand"] .choice[data-choice="barrier"] { height:100px; }
  .summoners-player[data-direction="hand"] .choice[data-choice="barrier"] .choice-label { font-size:9px; min-height:24px; white-space:normal; text-align:center; }
  .summoners-player[data-direction="hand"] .card-detail { margin:0; height:12px; font-size:9px; }
  .summoners-player[data-direction="hand"] .card-detail img { width:12px; height:12px; }
  .summoners-player[data-direction="hand"] .gold-bank { flex-wrap:wrap; width:64px; gap:0 4px; padding:3px 2px; }
  .summoners-player[data-direction="hand"] .gold-bank>div { display:contents; }
  .summoners-player[data-direction="hand"] .gold-available { font-size:19px; min-width:28px; }
  .summoners-player[data-direction="hand"] .bank-spent { margin:0; flex-basis:100%; text-align:center; font-size:8px; line-height:10px; }
  .summoners-player[data-direction="hand"] .inline-tip { top:48px; bottom:auto; left:88px; right:8px; width:auto; max-width:none; font-size:11px; padding:8px 10px; line-height:1.35; }
  .summoners-player[data-direction="hand"] .inline-tip strong { font-size:14px; }
}
@container summoners-player (max-width:360px) {
  .summoners-player[data-direction="hand"] .choice { width:56px; min-width:56px; height:68px; gap:1px; }
  .summoners-player[data-direction="hand"] .choice-art { width:36px; height:36px; border-width:2px; border-image-slice:2; }
  .summoners-player[data-direction="hand"] .choice-art>img { width:32px; height:32px; }
  .summoners-player[data-direction="hand"] .choice-art .spell-art { scale:.5; }
  .summoners-player[data-direction="hand"] .choice .choice-label { font-size:9px; line-height:10px; min-height:10px; }
  .summoners-player[data-direction="hand"] .choice[data-choice="barrier"] { height:82px; }
  .summoners-player[data-direction="hand"] .gold-bank { width:56px; }
  .summoners-player[data-direction="hand"] .inline-tip { left:76px; font-size:10px; padding:6px 8px; line-height:1.3; }
}

@container summoners-player (max-width:740px) {
  .summoners-player[data-direction="hand"] .player-tools .reset { position:absolute; right:0; top:44px; }
}
@container summoners-player (max-width:360px) {
  .summoners-player[data-direction="hand"] .gold-bank { padding:1px 2px; }
  .summoners-player[data-direction="hand"] .inline-tip { top:8px; }
}

/* The single spell card and its bank have exactly the same width. */
.summoners-player[data-direction="hand"] [data-kind="magic"] .gold-bank { width:104px; flex-wrap:wrap; gap:0 4px; padding:3px 2px; }
.summoners-player[data-direction="hand"] [data-kind="magic"] .gold-bank>div { display:contents; }
.summoners-player[data-direction="hand"] [data-kind="magic"] .gold-available { min-width:28px; }
.summoners-player[data-direction="hand"] [data-kind="magic"] .bank-spent { margin:0; flex-basis:100%; text-align:center; font-size:9px; line-height:10px; }
@container summoners-player (max-width:740px) { .summoners-player[data-direction="hand"] [data-kind="magic"] .gold-bank { width:64px; } }
@container summoners-player (max-width:360px) { .summoners-player[data-direction="hand"] [data-kind="magic"] .gold-bank { width:56px; padding:1px 2px; } }

.summoners-player[data-kind="magic"] .encounter-title em {color:#ceabea;}
@media(prefers-reduced-motion:reduce) {.summoners-player *,.summoners-player *::before,.summoners-player *::after {animation:none!important;transition:none!important;}}

/* Keep small-screen placement hit areas inside the battlefield's lower edge. */
@container summoners-player (max-width:500px) {
  .summoners-player[data-direction="hand"] .target { top:clamp(22px,var(--y),calc(100% - 22px)); }
  .summoners-player[data-direction="hand"] .battle-player[data-kind="magic"] .target { top:clamp(26px,var(--y),calc(100% - 26px)); }
  .summoners-player[data-direction="hand"] .helper { inset:8px; overflow:auto; }
}