/* Duel table presentation: gameplay rules stay in cardGame.js. */
:root{--text:#edf5ff;--muted:#a9b9ce;--line:#2d4056}body{font-size:16px}body>header.duelHeader{max-width:1500px;padding:20px 28px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.overline{font-size:12px;letter-spacing:2px;font-weight:750;color:#a5d8f7}.duelHeader h1{margin:3px 0 0;font-family:Georgia,serif;font-size:28px;letter-spacing:0}.headerRight{display:flex;align-items:center;gap:20px}.turnBadge{font-size:14px;color:var(--muted)}.turnBadge strong{color:#b8e4ff}.tools{position:relative}.tools summary,.battleHistory summary{cursor:pointer;font-size:14px;padding:12px;border:1px solid var(--line);border-radius:10px}.toolsContent{position:absolute;right:0;top:48px;background:#101a28;border:1px solid var(--line);border-radius:14px;padding:16px;width:min(460px,90vw);box-shadow:0 15px 60px #000b;display:flex;gap:10px;flex-wrap:wrap;z-index:400}.tools .cheatMenuPanel{width:100%;margin:0}.tools .cheatResults{max-height:220px}.tools .btn{text-decoration:none}.duelLayout{max-width:1500px;margin:auto;padding:0 28px 24px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px}.playSurface{min-width:0}.board{padding:14px 18px;border-radius:20px;background:linear-gradient(130deg,#102235ab,#111824c9);overflow:visible}.board::before{display:none}.duelist{display:flex;gap:12px;align-items:center;position:relative;padding:2px 6px 12px}.duelist.ply{padding:12px 6px 2px}.emblem{height:42px;width:42px;border:1px solid #7296bc;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:22px;background:#172c41;flex-shrink:0}.opp .emblem{background:#342237;border-color:#a46f8f}.duelistLife{width:min(440px,85%)}.duelistName{display:flex;justify-content:space-between;font-size:14px;gap:14px;margin-bottom:3px}.duelistName strong{font-size:19px}.duelistName span{color:var(--muted)}progress{appearance:none;width:100%;height:7px;display:block;border:0;background:#253343;border-radius:8px;overflow:hidden}progress::-webkit-progress-bar{background:#253343}progress::-webkit-progress-value{background:#85ccef;transition:width .3s}progress::-moz-progress-bar{background:#85ccef}.opp progress::-webkit-progress-value{background:#d891b3}.opp progress::-moz-progress-bar{background:#d891b3}.opponentTurn .opp .emblem,body:not(.opponentTurn) .ply .emblem{box-shadow:0 0 0 3px #9ed6f024}.boardArena{padding:10px 4px;gap:8px;border:0;box-shadow:none;border-radius:0;background:transparent}.boardArena::before,.boardArena::after{display:none}.grid{gap:5px}.row{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.rowLabel{text-transform:uppercase;letter-spacing:1.5px;font-size:11px;color:#9eafc3}.battleDivider{height:28px;display:flex;align-items:center;gap:16px;text-align:center;color:#7e94ad;font-size:10px;letter-spacing:3px}.battleDivider::before,.battleDivider::after{content:"";height:1px;flex:1;background:#54708d55}.slot{min-height:148px;height:148px;padding:5px;border-radius:9px;box-shadow:none;border-style:dashed;justify-content:center;background:#08132145}.slot.occupied{border-style:solid;border-color:#55718c;background:#162537;box-shadow:0 4px 12px #0004}.slotPos{display:none}.slotEmpty{font-size:12px;color:#73869c}.supportRow .slot{height:92px;min-height:92px}.slotCardFrame{height:100%;min-height:0}.slotCard{height:100%;aspect-ratio:auto;gap:2px;padding:0;border:0;border-radius:5px;box-shadow:none;background:none;min-width:0;overflow:hidden}.slotCard .miniTop{margin:0;min-height:24px;gap:2px}.slotCard .miniName{font-size:12px;line-height:1.15}.slotCard .miniType{display:none}.slotCard .miniArt{min-height:0;flex:1;border-radius:5px}.slotCard .miniStats{margin:0;gap:4px}.slotCard .miniStat{padding:2px 4px}.slotCard .miniStat .v{font-size:14px}.slotCard .miniStat .l{font-size:10px}.slotCard .miniEffect{display:none}.supportRow .slotCard .miniArt{max-height:48px}.slotActions{position:absolute;left:4px;bottom:23px;right:4px;gap:3px;justify-content:center;z-index:4}.tinyBtn{font-size:12px;padding:4px 7px;background:#091422ed}.slot:focus-within .slotActions{opacity:1;pointer-events:auto;transform:none}.cardState{position:absolute;bottom:3px;left:4px;right:4px;text-align:center;font-size:10px;background:#0b1420df;color:#bdc9d6;border-radius:4px;pointer-events:none}.cardState.ready{color:#b8e3ff}.slot.occupied{padding-bottom:20px}.slot.attackerOption,.slot.targetOption{border-style:solid}.handRail{width:100%;margin-top:14px;gap:6px;padding:14px 16px;border-radius:16px;backdrop-filter:none;background:#111d2ddd;box-shadow:none}.handLabel{align-items:center}.handLabel .meta{font-size:14px;margin:4px 0}.hand{height:auto;display:flex;gap:10px;overflow-x:auto;padding:6px 3px 12px;min-height:184px}.handCard{position:relative;left:auto;bottom:auto;width:140px;min-width:140px;min-height:178px;padding:8px;border-radius:10px;transform:none!important;animation:none!important;box-shadow:none;z-index:auto!important}.handCard:hover,.handCard:focus-visible,.handCard.active{transform:none!important;box-shadow:inset 0 0 0 1px #addfff}.handCard .miniCard{gap:5px}.handCard .miniTop{margin:0}.handCard .miniName{font-size:13px}.handCard .miniArt{height:82px}.handCard .miniEffect{max-height:58px;overflow:hidden}.handCard .miniStat{padding:3px}.handEmpty{position:static;transform:none;max-width:none;width:100%}.actionBar{position:sticky;bottom:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;margin-top:12px;border:1px solid var(--line);border-radius:14px;background:#101c2bf5;backdrop-filter:blur(12px)}#combatStatus{font-size:14px;margin-top:4px;color:#c1d0e1}.turnButtons{display:flex;gap:10px;flex-shrink:0}.btn{font-size:14px;border-radius:9px}.btnAccent{background:#214764;border-color:#82bcdf}.btn:disabled{opacity:.5;cursor:default}.duelSidebar{align-self:start;position:sticky;top:18px}.inspector{padding:18px;background:#101b2beb;border:1px solid var(--line);border-radius:16px;min-height:240px}.inspector h2{font-family:Georgia,serif;font-size:24px;line-height:1.2;margin:16px 0 6px}.inspector p{font-size:14px;color:#c1cede;line-height:1.5}.inspectTypes{font-size:13px;color:#a7d8f4;margin-bottom:12px}.inspectArt{width:100%;height:245px;object-fit:contain;border-radius:10px;background:#07101b;display:block}.inspectNoArt{padding:40px;text-align:center;color:var(--muted)}.inspectStats{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin-top:12px;gap:8px}.inspectStats>div{padding:8px;background:#1c2b3c;border-radius:8px;font-size:12px;color:var(--muted)}.inspectStats strong{display:block;color:var(--text);font-size:22px}.inspectDescription,.inspectEffect p{white-space:pre-wrap;overflow-wrap:anywhere}.inspectEffect{border-top:1px solid var(--line);padding-top:12px}.battleHistory{margin-top:14px;background:#101b2b;border-radius:12px}.battleHistory .combatLog{padding:10px;max-height:250px}.tableHint{color:var(--muted);font-size:14px;line-height:1.5;margin:16px 4px}dialog{color:var(--text);background:#122034;border:1px solid #6386a4;border-radius:18px;padding:24px;width:min(500px,94vw);max-height:90vh;overflow:auto;box-shadow:0 25px 90px #000b}dialog::backdrop{background:#020712bb;backdrop-filter:blur(4px)}.dialogTop,.dialogActions{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialogTop h2{font-size:18px}.dialogActions{margin-top:22px}.dialogTop+div h2{font-family:Georgia,serif;font-size:28px}.dialogTop+div .inspectArt{height:300px}#attackMatchup{font-size:18px;line-height:1.5}#attackOutcome{border-left:3px solid #97d8f1;background:#1d3546;padding:8px 14px;line-height:1.5}#attackOutcome.danger{border-color:#eeacb4;background:#382b3b}.previewNote{color:var(--muted);font-size:14px;line-height:1.5}.floatingDamage{position:fixed;z-index:1000;font-size:24px;font-weight:800;color:#ffb5bf;pointer-events:none;animation:damageRise 1.1s ease-out forwards}@keyframes damageRise{to{transform:translateY(-65px);opacity:0}}.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}:focus-visible{outline:2px solid #b6e4ff;outline-offset:3px}@media(max-width:1050px){.duelLayout{grid-template-columns:minmax(0,1fr) 240px;padding-inline:14px;gap:14px}.board{padding:10px}.inspectArt{height:200px}.slotCard .miniName{font-size:11px}}@media(max-width:800px){.duelLayout{display:block}.duelSidebar{position:static;margin-top:14px}.inspector{display:none}.arenaScroll{overflow-x:auto}.boardArena{min-width:590px}.duelHeader h1{font-size:23px}body>header.duelHeader{padding:16px}.headerRight{gap:10px}.turnBadge{font-size:12px}.handCard{width:130px;min-width:130px}.actionBar{flex-wrap:wrap}.turnButtons{width:100%}.turnButtons .btn{flex:1;justify-content:center}.slotActions{opacity:1;pointer-events:auto;transform:none}.handLabel{gap:10px;align-items:flex-start}.handLabel .btn{font-size:12px}.handLabel .meta{font-size:13px}.tableHint{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.floatingDamage{display:none}}
/* Keep menus above the battlefield and fit more of the duel on a laptop. */
body > header.duelHeader { position:relative; z-index:100; }
.characterRow .slot { height:clamp(110px,13vh,148px); min-height:110px; }
.supportRow .slot { height:clamp(64px,7vh,82px); min-height:64px; }
@media(max-width:800px){ .characterRow .slot{height:130px}.supportRow .slot{height:76px} }
/* Artwork fills deployed cards; names and stats remain legible over it. */
.slotCard { position:relative; display:block; }
.slotCard .miniArt, .supportRow .slotCard .miniArt { position:absolute; inset:0; height:100%; max-height:none; }
.slotCard .miniArt img { object-fit:cover; object-position:center 25%; }
.slotCard .miniTop { position:relative; z-index:1; padding:4px; background:linear-gradient(#06111cf2,#06111c99); }
.slotCard .miniStats { position:absolute; bottom:0; left:0; right:0; z-index:1; background:#06111cd9; }
.slotActions { bottom:auto; top:30px; }
.handCard .miniTop { display:block; text-align:left; }
.handCard .miniName { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.handCard .miniType { display:block; width:fit-content; max-width:100%; font-size:11px; margin-top:3px; white-space:normal; }

/* Portrait slots keep the artwork readable at every screen height. */
.boardArena .row { grid-template-columns:repeat(5,minmax(0,145px)); justify-content:center; gap:12px; }
.boardArena .row .slot { width:100%; height:auto; min-height:0; aspect-ratio:63 / 88; }
.boardArena .supportRow .slot { width:78%; justify-self:center; }
.slotCard .miniArt img { object-fit:contain; object-position:center; }
.boardArena .slotCard .miniTop { min-height:28px; }
.boardArena .slotCard .miniName { font-size:12px; line-height:1.25; }
.cardState { font-size:11px; }
.combatGuide[hidden] { display:none; }
.combatGuide { position:fixed; top:14px; left:50%; transform:translateX(-50%); width:min(680px,calc(100vw - 28px)); z-index:300; border:2px solid #a2ddff; border-radius:16px; padding:14px 18px; background:#112b40; box-shadow:0 12px 55px #000b; }
.combatSteps { display:flex; gap:12px; font-size:12px; color:#a5b8c9; margin-bottom:9px; }
.combatSteps span { padding:3px 8px; border-radius:5px; }
.combatSteps .current { color:#082034; background:#b7e6ff; font-weight:800; }
.guideBody { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#guideTitle { display:block; font-size:19px; line-height:1.3; color:#f1f9ff; }
#guideHint { font-size:14px; line-height:1.4; color:#c6e0f1; margin:5px 0 0; }
#exitCombat { flex-shrink:0; }
.choosingAttacker .slot:not(.attackerOption),.choosingTarget .slot:not(.targetOption):not(.attackerSelected) { opacity:.42; }
.boardArena .slot.attackerOption,.boardArena .slot.targetOption { border:2px solid #b1e5ff; box-shadow:0 0 0 3px #79caff40,0 0 22px #79caff50; }
.boardArena .slot.targetOption { border-color:#ffd59b; box-shadow:0 0 0 3px #ffd59b40,0 0 22px #ffd59b50; }
.cardState.choice { color:#091b2b; background:#b1e5ff; font-weight:800; }
.targetOption .cardState.choice { background:#ffd59b; }
@media(max-width:800px){ .guideBody{align-items:flex-start;gap:8px}#guideTitle{font-size:16px}#guideHint{font-size:13px}.combatGuide{padding:10px 12px}.combatSteps{gap:5px}.boardArena .row{gap:8px} }

/* Each location paints its half of the arena; the masks overlap at midfield. */
.boardArena{isolation:isolate;overflow:hidden;border-radius:14px;}
.locationLayer{position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-position:center;}
.locationLayer[hidden]{display:none;}
.boardArena[data-location-mode="split"] .locationLayer.opp{mask-image:linear-gradient(to bottom,#000 0%,#000 45%,transparent 55%);}
.boardArena[data-location-mode="split"] .locationLayer.ply{mask-image:linear-gradient(to bottom,transparent 45%,#000 55%,#000 100%);}
.locationLabel{margin-left:auto;max-width:40%;font-size:13px;color:#c2d9ec;text-align:right;overflow-wrap:anywhere;}
.boardArena[data-location-mode="shared"] .slot:not(.occupied),.boardArena[data-location-mode="split"] .slot:not(.occupied){background:#07121b66;border-color:#b0cadc55;}
@media(max-width:800px){.duelist{flex-wrap:wrap}.locationLabel{width:100%;max-width:none;text-align:left;margin-left:54px;font-size:12px}}

.miniStat.locationBoosted .v{color:#aaf0c5}.miniStat.locationBoosted{border-color:#84d6a2}.inspectLocationBonus{padding:10px;border:1px solid #84d6a2;border-radius:8px;color:#aaf0c5!important;background:#163528;}

#handRevealDialog{width:min(980px,94vw);padding:24px;}
#handRevealTitle{font-family:Georgia,serif;font-size:28px;margin:8px 0;}
#handRevealSummary{color:#bfdef2;font-size:16px;}
#revealedCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;}
.revealedCard{color:var(--text);font:inherit;text-align:left;cursor:pointer;border:1px solid #6089a7;border-radius:12px;padding:12px;background:#14283d;max-width:230px;width:100%;}
.revealedCard:hover,.revealedCard:focus-visible{border-color:#b7e9ff;background:#1a354d;}
.revealedCard .miniTop{display:block;}.revealedCard .miniName{font-size:16px;line-height:1.3;}.revealedCard .miniType{display:inline-block;font-size:12px;margin-top:5px;white-space:normal;}
.revealedCard .miniArt{height:200px;}.revealedCard .miniArt img{object-fit:contain;}.revealedCard .miniStat .v{font-size:19px;}.revealedCard .miniEffect{font-size:14px;}
#handRevealEmpty{padding:36px 18px;text-align:center;border:1px dashed #6089a7;border-radius:12px;font-size:18px;}
@media(max-width:500px){#handRevealDialog{padding:16px}#revealedCards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.revealedCard{padding:8px}.revealedCard .miniArt{height:145px}.revealedCard .miniName{font-size:14px}.revealedCard .miniStats{gap:4px}.revealedCard .miniStat{padding:5px}#handRevealTitle{font-size:22px}}

#matchResultDialog{width:min(580px,94vw);text-align:center;padding:36px;background:radial-gradient(ellipse at top,#284968,#0e1929 72%);border-color:#93cee9;}
#matchResultDialog[data-outcome="defeat"]{background:radial-gradient(ellipse at top,#563240,#0e1929 72%);border-color:#ce96a9;}
#matchResultDialog[data-outcome="draw"]{background:radial-gradient(ellipse at top,#44435c,#0e1929 72%);}
.resultEmblem{font-size:56px;line-height:1.2;color:#bde8ff;margin-bottom:14px;}#matchResultDialog[data-outcome="defeat"] .resultEmblem{color:#eab6c5;}
#matchResultTitle{font:700 54px/1.1 Georgia,serif;margin:14px 0;}#matchResultMessage{color:#c9d9e9;font-size:17px;line-height:1.5;}
.resultStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0;font-size:13px;color:#bfd0e0;}.resultStats>div{padding:14px 6px;border:1px solid #728da944;border-radius:12px;background:#06111e55}.resultStats strong{display:block;font-size:25px;color:#f0f6ff;margin-top:5px;overflow-wrap:anywhere}
#finishedMatchBanner[hidden]{display:none}#finishedMatchBanner{max-width:1444px;margin:0 auto 16px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #90bed8;border-radius:12px;background:#19334b;color:#e9f7ff;}
@media(max-width:600px){#matchResultDialog{padding:24px 16px}#matchResultTitle{font-size:44px}#matchResultDialog .dialogActions{flex-direction:column-reverse}#matchResultDialog .btn{width:100%;justify-content:center}#finishedMatchBanner{margin:0 14px 14px;font-size:14px}}

#opponentDialog{width:min(480px,calc(100vw - 40px));box-sizing:border-box} #opponentSelect{display:block;width:100%;margin:10px 0 18px;padding:12px;border:1px solid #62869f;border-radius:8px;background:#142435;color:#edf6ff;font:inherit} #opponentDescription{min-height:3em;color:#b6cddd} #opponentDialog .dialogActions{flex-wrap:wrap}

/* Match results stay centered in the viewport, independent of board scroll. */
#matchResultDialog{
  --result-accent:#f4d68b;
  position:fixed;inset:0;margin:auto;box-sizing:border-box;
  width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  overflow:auto;overscroll-behavior:contain;padding:40px 32px;
  border:1px solid var(--result-accent);border-radius:24px;
  background:radial-gradient(ellipse at 50% 0%,#66502b66,transparent 65%),linear-gradient(145deg,#172c43,#0b1322);
  box-shadow:0 30px 100px #000b,0 0 65px #edc77024;
}
#matchResultDialog[data-outcome="defeat"]{--result-accent:#efa1b5;background:radial-gradient(ellipse at top,#583046,#0e1929 75%);box-shadow:0 30px 100px #000b,0 0 65px #e77a9820}
#matchResultDialog[data-outcome="draw"]{--result-accent:#c1b5ef;background:radial-gradient(ellipse at top,#44435c,#0e1929 75%)}
#matchResultDialog::backdrop{background:#030813b8;backdrop-filter:blur(7px)}
#matchResultDialog[open]{animation:resultArrival .32s ease-out}
#matchResultDialog .resultEmblem{display:grid;place-items:center;width:88px;height:88px;margin:0 auto 20px;border:1px solid var(--result-accent);border-radius:50%;color:var(--result-accent);background:#ffffff08;box-shadow:0 0 36px #ffffff10;font-size:58px}
#matchResultDialog .overline{color:var(--result-accent);letter-spacing:4px}
#matchResultTitle{font-size:clamp(44px,8vw,76px);text-shadow:0 3px 25px #0006}
#matchResultDialog .dialogActions{justify-content:center;flex-wrap:wrap;gap:10px}
#matchResultDialog .btnAccent{border-color:var(--result-accent);box-shadow:0 0 20px #ffffff10}
@keyframes resultArrival{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@media(max-width:600px),(max-height:650px){#matchResultDialog{padding:22px 18px}#matchResultDialog .resultEmblem{width:56px;height:56px;font-size:38px;margin-bottom:10px}#matchResultTitle{margin:10px 0;font-size:44px}#matchResultDialog .resultStats{margin:16px 0}}
@media(prefers-reduced-motion:reduce){#matchResultDialog[open]{animation:none}}