:root{--paper:#f4f2e9;--ink:#17362e;--muted:#738079;--line:#d7ddd3;--green:#174d3c;--lime:#d6ef91;--white:#fffef8;--red:#a84436}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,sans-serif}button,input,select{font:inherit}button,.button{cursor:pointer;border:0;border-radius:7px;padding:11px 16px;font-weight:600;transition:background .15s}button:hover,.button:hover{filter:brightness(.95)}button:disabled{opacity:.5;cursor:wait}input,select{border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);padding:11px;max-width:100%}input:focus,select:focus,button:focus-visible{outline:2px solid #7eaa5a;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;padding:22px 4vw;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;gap:10px;align-items:center;font-size:23px;font-weight:850;letter-spacing:-1px;text-decoration:none;color:var(--ink)}.brand small{font-size:9px;letter-spacing:2px;max-width:60px;border-left:1px solid var(--line);padding-left:12px;line-height:1.5}.soft{font-weight:400}nav{display:flex;gap:8px}.nav{background:none;color:var(--muted);font-size:13px}.nav.active{background:#e3e8da;color:var(--green)}.edition,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:750}.edition{color:var(--muted)}main{max-width:1600px;margin:auto;padding:35px 4vw}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:15px 0 34px}h1{font-family:Georgia,serif;font-size:clamp(36px,4vw,59px);font-weight:400;letter-spacing:-2px;margin:10px 0}h2{font-family:Georgia,serif;font-size:27px;font-weight:400;line-height:1.2}p{color:var(--muted)}.intro p{margin:0}.primary{background:var(--green);color:var(--white)}.secondary{background:#e5e9df;color:var(--ink)}.danger{background:#f5dfd8;color:var(--red)}.icon{background:none;padding:4px}.workshop{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px}.toolbar{display:flex;gap:10px}.toolbar input{flex:1;min-width:0}.filterline{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:14px 0 22px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:9px;overflow:hidden;display:flex;flex-direction:column;min-height:260px}.card-art{height:86px;background:radial-gradient(ellipse at 30% 30%,#69977766,transparent 70%),linear-gradient(130deg,#22473a,#152d28);display:flex;align-items:center;justify-content:center;color:#d6ef9166;font-size:49px;position:relative}.card-type{position:absolute;left:12px;top:10px;font-size:8px;letter-spacing:2px;color:#e5ebd6}.cost{position:absolute;top:10px;right:10px;border:1px solid #d6ef9144;border-radius:50%;width:27px;height:27px;text-align:center;font-size:14px;color:#eaf6d1;line-height:25px}.card-body{padding:13px;display:flex;flex-direction:column;flex:1}.card h3{font-family:Georgia,serif;font-size:17px;margin:0 0 7px;line-height:1.2}.card p{font-size:11px;color:#5b6b60;white-space:pre-wrap;line-height:1.45;margin:3px 0 12px}.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:10px;color:var(--muted)}.card-add{padding:5px 11px;background:#e8eddf;border-radius:4px}.deckpanel{background:#e9ecdf;border:1px solid #d6dcc9;border-radius:10px;padding:23px;height:max-content;position:sticky;top:15px}.deck-name{font-family:Georgia,serif;font-size:26px;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;width:100%;border-radius:0}.deck-tools{display:flex;gap:6px;margin:15px 0}.deck-tools select{min-width:0;flex:1;font-size:11px}.deck-tools button{padding:8px}.deck-section{font-size:10px;letter-spacing:1px;color:var(--muted);margin:19px 0 8px;display:flex;justify-content:space-between}.deck-row{display:flex;gap:8px;align-items:center;font-size:12px;border-bottom:1px solid #d9dfcd;padding:7px 0}.deck-row span{flex:1}.deck-row button{padding:0 5px;background:transparent}.pill{border-radius:4px;padding:3px 7px;background:var(--lime);font-size:11px}.deck-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.deck-actions button,.deck-actions .button{font-size:12px;padding:9px 12px}.fine{font-size:11px}#validation{font-size:12px;margin-top:12px}#more{display:block;margin:25px auto}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;max-width:1050px;margin:30px auto}.lobby-card{border:1px solid var(--line);border-radius:12px;background:var(--white);padding:35px}.lobby-card label{display:grid;gap:8px;font-size:12px;margin:20px 0}.lobby-card .primary{width:100%}.accent{background:var(--green);color:var(--white)}.accent p{color:#becfbe}.accent ol{padding-left:20px;font-size:14px;line-height:2.5;margin:35px 0}.big-symbol{font-size:38px;color:#7aa362}.divider{text-align:center;font-size:9px;letter-spacing:2px;margin:24px 0;color:var(--muted)}.joinline{display:flex;gap:10px}.joinline input{min-width:0;flex:1;text-transform:uppercase}.room-top{display:flex;gap:20px;align-items:center;margin-bottom:20px}.room-top>div{margin-right:auto}.room-top h2{margin:5px 0}#connection{font-size:11px;color:var(--muted)}#scoreboard{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:white;padding:16px 24px;border-radius:10px;margin-bottom:20px}.score{display:flex;align-items:center;gap:14px}.score strong{font:35px Georgia,serif;color:var(--lime)}.score small{display:block;font-size:10px;color:#b3c1af}.table-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px}.decision-panel{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:22px;height:max-content;position:sticky;top:12px}.decision-panel h2{font-size:23px;margin:10px 0}.decision-panel p{font-size:12px}#action-search{width:100%;margin-bottom:10px}#choices{max-height:65vh;overflow:auto}.choice{display:block;width:100%;margin-bottom:7px;text-align:left;font-size:12px;line-height:1.5;background:#edf0e6;border:1px solid transparent}.choice.selected{border-color:var(--green);background:var(--lime)}.choice.filtered{display:none}.battlefield{background:#e8ecde;border:1px solid #cdd6bd;border-radius:9px;padding:14px;margin-bottom:14px;min-height:100px}.battlefield>h3{margin:0 0 12px;font-size:11px;letter-spacing:1px}.base{background:#eceee6}.unit-row{display:flex;gap:9px;flex-wrap:wrap}.unit{background:var(--white);padding:10px;border-radius:6px;border-left:3px solid #8da66a;min-width:125px;max-width:200px;font-size:12px}.unit.enemy{border-left-color:#ba7254}.unit.exhausted{opacity:.67}.unit small{display:block;font-size:10px;color:var(--muted)}.hand{display:flex;gap:10px;overflow:auto;padding:7px 0 18px}.hand .card{min-width:165px;max-width:210px;min-height:0}.hand .card-art{height:40px;font-size:24px}.hand .card h3{font-size:14px}.hand-title{font-size:10px;font-weight:700;letter-spacing:2px;margin:20px 0 8px}details{font-size:12px;margin:15px 0}#public-zones{display:flex;gap:20px;flex-wrap:wrap}#notice:not(:empty){background:#e2eacb;border:1px solid #bbcd96;border-radius:6px;padding:12px 18px;margin-bottom:15px;font-size:13px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:25px 4vw;font-size:9px;letter-spacing:1px;color:var(--muted);margin-top:40px}[hidden]{display:none!important}@media(min-width:1400px){.card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1000px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workshop{grid-template-columns:minmax(0,1fr) 290px}.table-layout{grid-template-columns:minmax(0,1fr) 280px}.edition{display:none}}@media(max-width:700px){header{padding:15px;flex-wrap:wrap}.brand small{display:none}nav{margin-left:auto}.nav{font-size:11px;padding:8px}main{padding:20px 15px}.intro{align-items:flex-start;flex-direction:column}.workshop,.lobby-grid,.table-layout{grid-template-columns:1fr}.deckpanel{position:static;grid-row:1}.deckpanel #deck-list{max-height:240px;overflow:auto}.card-grid{gap:10px}.card{min-height:235px}.lobby-card{padding:24px}.room-top{flex-wrap:wrap;gap:10px}.decision-panel{position:static}.toolbar select{max-width:130px}.filterline{font-size:10px}.score strong{font-size:26px}footer{gap:20px}.card p{font-size:11px}#choices{max-height:45vh}} /* Physical cards and the mirrored, two-player black-and-gold playmat. */ .art-button{display:block;padding:0;background:#10181b;width:100%;border-radius:7px 7px 0 0;overflow:hidden}.card-image{display:block;width:100%;aspect-ratio:744/1039;object-fit:contain}.illustrated.card{min-height:0;background:var(--white)}.illustrated .card-body{padding:10px}.illustrated h3{font-size:14px}.illustrated .card-bottom{gap:6px;font-size:10px}.illustrated .card-add{font-size:11px}.hand .illustrated{flex:0 0 155px;min-width:155px}.hand .card-image{aspect-ratio:744/1039}.hand .card-body{padding:8px}.table-layout{grid-template-columns:minmax(0,1fr) 285px;gap:18px}.decision-panel{padding:18px}#battleboard{background:#111414;border:2px solid #ae945b;border-radius:17px;padding:16px;box-shadow:0 12px 32px #0003,inset 0 0 0 5px #141716,inset 0 0 0 6px #6c6245;color:#e2d2a6;position:relative;isolation:isolate}#battleboard::before{content:'';position:absolute;inset:0;border-radius:15px;background-image:url('/playmat.png');background-size:100% 100%;opacity:.75;z-index:-1;pointer-events:none}.physical-mat{padding:10px 2px}.mat-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:10px;letter-spacing:1.5px;color:#d0bc86}.score-track{display:flex;gap:5px}.score-track span{display:grid;place-items:center;border:1px solid #ae945b;border-radius:50%;width:20px;height:20px;font-size:10px;color:#d0bc86}.score-track .scored{background:#e6c878;color:#111;font-weight:800}.mat-heading .score-track{display:none}.mat-grid{display:grid;grid-template-columns:82px 82px minmax(0,1fr) 82px;grid-template-areas:'champion legend base main' 'rune-deck runes runes trash';gap:10px}.opponent-mat .mat-grid{grid-template-columns:82px minmax(0,1fr) 82px 82px;grid-template-areas:'main base legend champion' 'trash runes runes rune-deck'}.opponent-mat .mat-grid .runes-zone,.opponent-mat .mat-grid .rune-deck-zone,.opponent-mat .mat-grid .trash-zone{grid-row:1}.opponent-mat .mat-grid .main-zone,.opponent-mat .mat-grid .base-zone,.opponent-mat .mat-grid .command-zone>div{grid-row:2}.mat-zone{border:1px solid #b9a36799;border-radius:7px;padding:7px;min-width:0;position:relative;background:#0b101133}.mat-zone label{display:block;font-size:8px;letter-spacing:1px;color:#e1ce99;margin:0 0 7px;line-height:1.4}.mat-zone label small{float:right;font-size:7px;color:#baac88}.command-zone{display:contents}.command-zone>div{border:1px solid #b9a36799;border-radius:7px;padding:7px;min-width:0;background:#0b101133}.command-zone>div:first-child{grid-area:legend}.command-zone>div:last-child{grid-area:champion}.base-zone{grid-area:base}.main-zone{grid-area:main}.rune-deck-zone{grid-area:rune-deck}.runes-zone{grid-area:runes}.trash-zone{grid-area:trash}.mat-cards{display:flex;flex-wrap:wrap;gap:10px;min-height:85px}.mat-card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:0;background:none;color:#dfd0a7;border-radius:5px;max-width:70px;width:70px;vertical-align:top;flex-shrink:0}.mat-card img{display:block;width:64px;height:90px;object-fit:contain;border-radius:4px;box-shadow:0 2px 5px #0008;transition:transform .15s}.mat-card:hover img{transform:translateY(-3px) scale(1.06)}.mat-card.exhausted img{transform:rotate(90deg) scale(.78);opacity:.78}.mat-card.exhausted:hover img{transform:rotate(90deg) scale(.85)}.mat-card.enemy .card-state{color:#e6bca2}.card-state{font-size:7px;line-height:1.25;min-height:11px;margin-top:4px;max-width:100%}.rune-row{gap:5px;min-height:70px}.rune-row .mat-card{width:48px;max-width:48px}.rune-row .mat-card img{width:43px;height:60px}.zone-watermark{margin:auto;text-align:center;font-size:38px;line-height:1;color:#a78c4525}.zone-watermark small{display:block;letter-spacing:5px;font-size:12px;margin-top:8px}.empty-slot{display:flex;min-height:92px;align-items:center;justify-content:center;text-align:center;font-size:9px;color:#9e917244}.empty-runes{font-size:10px;color:#9e917255;margin:auto}.deck-stack{height:91px;width:62px;border:1px solid #bda465;border-radius:5px;background:repeating-linear-gradient(45deg,#17242b,#17242b 4px,#1e2e34 4px,#1e2e34 5px);box-shadow:2px 2px #797257,4px 4px #272722;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;color:#e2cd97}.rune-stack{background:repeating-linear-gradient(45deg,#dfdccd,#dfdccd 4px,#d4d0c2 4px,#d4d0c2 5px);color:#4a4c42}.back-crest{font-size:25px}.deck-stack b{font-size:16px;line-height:1}.deck-stack small{font-size:7px;margin-top:5px}.trash-zone>small{display:block;margin-top:6px;font-size:7px;color:#ab9a71}.battlefield-band{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:9px;margin:9px -3px;border-top:2px solid #bca467;border-bottom:2px solid #bca467;padding:6px 0}.shared-field{border:1px solid #bca467;border-radius:6px;padding:9px;background:#060b0d33;min-width:0}.shared-field:nth-child(n+4){grid-column:1/-1}.field-title{font-size:11px;color:#e8d6a4}.field-title small{display:block;font-size:7px;letter-spacing:.5px;color:#b5a277}.field-army{display:flex;flex-wrap:wrap;gap:5px;min-height:40px;align-items:center;justify-content:center}.field-center{display:flex;align-items:center;gap:10px;margin:6px 0}.field-center>span{font-size:9px;letter-spacing:1.5px;color:#a8976b}.field-card{padding:0;max-width:110px;width:50%;background:none}.field-card img{display:block;width:100%;height:68px;object-fit:contain;border-radius:3px}.hidden-slots{display:flex;gap:5px;font-size:7px;color:#b5a277}.hidden-slots .deck-stack{width:34px;height:50px}.hidden-slots .mat-card{width:34px}.hidden-slots .mat-card img{width:32px;height:44px}.central-score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.central-score>span{font-size:8px;letter-spacing:1px}.central-score .score-track{display:grid;grid-template-columns:repeat(3,18px);gap:3px}.central-score .score-track span{width:18px;height:18px;font-size:9px}.opponent-hand{display:flex;justify-content:center;align-items:center;gap:0;margin:4px 0 7px}.opponent-hand small{font-size:9px;margin-left:12px;color:#c7b98f}.hand-back{display:grid;place-items:center;width:25px;height:34px;background:#192b31;border:1px solid #9b874f;border-radius:3px;margin-left:-6px;color:#a58c51}.physical-mat .mat-card{max-width:100%}dialog{border:1px solid #bba264;border-radius:12px;background:#f4f2e9;color:var(--ink);width:min(820px,95vw);max-height:94vh;padding:20px}dialog::backdrop{background:#050c12cf;backdrop-filter:blur(4px)}#close-inspector{float:right}dialog h2{font-size:24px;margin:5px 0 20px}.inspect-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.65fr);gap:24px}.inspect-layout img{width:100%;max-height:75vh;object-fit:contain}.inspect-layout p{white-space:pre-wrap;font-size:14px}.inspect-layout small{color:var(--muted);font-size:11px} @media(min-width:1450px){.mat-grid{grid-template-columns:95px 95px minmax(0,1fr) 95px}.opponent-mat .mat-grid{grid-template-columns:95px minmax(0,1fr) 95px 95px}.mat-card{width:82px;max-width:82px}.mat-card img{width:75px;height:105px}.mat-cards{min-height:112px}} @media(max-width:1050px){.table-layout{grid-template-columns:1fr}.decision-panel{position:static}.mat-grid{grid-template-columns:74px 74px minmax(0,1fr) 74px}.opponent-mat .mat-grid{grid-template-columns:74px minmax(0,1fr) 74px 74px}.decision-panel #choices{max-height:300px}} @media(max-width:600px){#battleboard{padding:9px 5px;border-radius:10px}.mat-grid{grid-template-columns:45px 45px minmax(0,1fr) 45px;gap:4px}.opponent-mat .mat-grid{grid-template-columns:45px minmax(0,1fr) 45px 45px}.mat-zone,.command-zone>div{padding:3px}.mat-zone label{font-size:6px;letter-spacing:0;margin-bottom:4px}.mat-zone label small{display:none}.mat-card{width:39px;max-width:39px}.mat-card img{width:36px;height:51px}.card-state{font-size:6px}.rune-row .mat-card{width:30px;max-width:30px}.rune-row .mat-card img{width:27px;height:39px}.rune-row{gap:2px;min-height:48px}.mat-cards{gap:3px;min-height:61px}.deck-stack{width:34px;height:51px}.back-crest{font-size:14px}.deck-stack b{font-size:11px}.deck-stack small{font-size:5px}.empty-slot{min-height:51px;font-size:6px}.trash-zone>small{font-size:5px}.battlefield-band{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:3px}.shared-field{padding:4px}.field-title{font-size:9px}.field-title small{font-size:6px}.central-score .score-track{grid-template-columns:repeat(3,13px);gap:2px}.central-score .score-track span{width:13px;height:13px;font-size:7px}.central-score>span{font-size:6px}.field-center{gap:3px}.field-center>span{font-size:6px;letter-spacing:0}.field-army{min-height:25px}.field-card img{height:43px}.mat-heading{font-size:8px}.inspect-layout{grid-template-columns:1fr}.inspect-layout img{max-height:56vh}.hand .illustrated{flex-basis:125px;min-width:125px}.illustrated h3{font-size:12px}.card-grid .illustrated .card-body{padding:8px}.illustrated .card-bottom{flex-wrap:wrap}} .table-layout > *{min-width:0}.hand{max-width:100%}@media(max-width:1050px){.table-layout{grid-template-columns:minmax(0,1fr)}} /* Immersive table, with secondary room tools in the pull-out menu. */ #game-hud{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;background:#101b20;color:#e8d6a4;position:sticky;top:0;z-index:12}#turn-status{font-size:12px}#game-hud button{padding:7px 12px;background:#293432;color:#ebdcae} body.immersive{background:#0b1217;color:#e8d6a4}body.immersive>header,body.immersive>footer{display:none}body.immersive main{max-width:none;padding:0}body.immersive .table-layout{display:block}body.immersive #scoreboard{margin:0;border-radius:0;padding:4px 18px}body.immersive .score strong{font-size:22px}body.immersive #battleboard{border-radius:0;margin:0;min-height:60vh}body.immersive .hand-title{margin:4px 12px}body.immersive .hand{padding:8px 12px;margin:0;background:#101b20;min-height:160px}body.immersive .hand .card{flex:0 0 110px;min-width:110px;max-width:110px}body.immersive .hand .card-body{display:none}body.immersive .hand .card-image{max-height:155px;object-fit:contain}body.immersive .decision-panel{display:none;position:fixed;right:0;top:48px;bottom:0;width:min(380px,95vw);height:auto;z-index:20;overflow:auto;box-shadow:-10px 0 40px #0008;color:var(--ink)}body.immersive.actions-open .decision-panel{display:block}body.immersive #notice:not(:empty){position:fixed;bottom:8px;left:12px;max-width:min(520px,90vw);z-index:30;pointer-events:none;font-size:11px;padding:5px 10px;opacity:.93} #table-drawer{position:fixed;inset:0 auto 0 0;margin:0;height:100dvh;max-height:100dvh;width:min(420px,95vw);border-radius:0}#table-drawer .room-top{display:flex;flex-direction:column;align-items:stretch;margin-top:25px}#table-drawer #public-zones{display:block}#drawer-workshop{margin-top:12px}.playable{outline:2px solid #a8f6b5!important;box-shadow:0 0 13px #73ffa766!important;cursor:grab!important;touch-action:none}.drop-legal{outline:3px dashed #ffe29c!important;background-color:#ab8c3444!important}.drag-ghost{position:fixed;width:100px;z-index:100;pointer-events:none;opacity:.85;background:#15251f;transform:rotate(5deg)}.drag-ghost img{width:100%;max-height:150px;object-fit:contain}.drag-ghost .card-body,.drag-ghost .card-state{display:none}#use-art{display:block;margin:12px 0} @media(min-width:900px){body.immersive #battleboard{padding:5px 3vw}body.immersive .mat-cards{min-height:60px}body.immersive .mat-card{width:49px;max-width:49px}body.immersive .mat-card img{width:44px;height:61px}body.immersive .empty-slot{min-height:55px}body.immersive .deck-stack{height:57px;width:42px}body.immersive .mat-zone{padding:4px}body.immersive .field-army{min-height:24px}body.immersive .mat-heading{margin:2px}body.immersive .battlefield-band{margin:4px 0}body.immersive .field-card img{height:45px}} body.immersive #game{min-height:100dvh}body.immersive #game-hud{position:sticky}body.immersive #battleboard{min-height:0}body.immersive #hand{position:sticky;bottom:0;z-index:10}body.immersive .hand-title{background:#101b20} /* Preserve the physical table's proportions instead of stretching its base zones. */ body.immersive #battleboard{width:850px;max-width:none;padding:10px;margin:0 auto;background-size:cover}body.immersive #battleboard::before{background-size:cover}body.immersive #hand{justify-content:center}body.immersive #scoreboard{max-width:1000px;margin:auto}body.immersive #table-guide{max-width:1000px;margin:auto;padding:8px 16px;text-align:center;color:#eddba7;font-size:12px;background:#16252b;min-height:36px}body.immersive .hand-title{text-align:center} #move-tray{position:fixed;z-index:18;left:50%;bottom:175px;transform:translateX(-50%);width:min(750px,94vw);max-height:58vh;overflow:auto;padding:16px;border:1px solid #c3ac6c;border-radius:12px;background:#122126f5;box-shadow:0 8px 45px #000b;color:#eddbab}#tray-title{margin:0 55px 10px 0;font-size:15px}#close-tray{float:right;padding:5px 9px}#visual-choices{display:flex;gap:10px;overflow:auto;padding:5px 3px 12px}.visual-choice{flex:0 0 155px;white-space:normal;font-size:11px;padding:7px;background:#26373b;color:#fff3d4;border:2px solid transparent;touch-action:none}.visual-choice img{display:block;width:100%;height:170px;object-fit:contain;margin-bottom:6px}.visual-choice span{display:block}.visual-choice.selected{border-color:#a9f6b3;background:#355640}.visual-choice.hint-choice{border-color:#ffe286;box-shadow:0 0 10px #ffe28699}#choice-drop{padding:16px;border:2px dashed #bba66b;text-align:center;border-radius:8px;margin:5px 0;color:#f2d99b}#confirm-visual{margin-top:8px}.mat-zone.drop-legal::after,.shared-field.drop-legal::after{content:'DROP HERE';display:block;color:#ffe59f;text-align:center;font-size:11px;font-weight:bold;pointer-events:none}.mat-zone,.shared-field{position:relative}.mat-zone.drop-legal::after,.shared-field.drop-legal::after{position:absolute;bottom:2px;left:0;right:0;background:#17231be0}#game-hud{flex-wrap:wrap}#game-hud #move-hint{background:#385245} @media(max-width:600px){#game-hud{gap:4px}#game-hud button{font-size:11px;padding:6px}#turn-status{font-size:10px}#move-tray{bottom:170px}.visual-choice{flex-basis:125px}.visual-choice img{height:140px}} @media(min-width:1000px){#move-tray.priority-tray{left:auto;right:8px;top:110px;bottom:auto;transform:none;width:255px;max-height:65vh}#move-tray.priority-tray #visual-choices{flex-direction:column}#move-tray.priority-tray .visual-choice{flex:auto}#move-tray.priority-tray .visual-choice img{height:85px}} .choice-card{outline:2px solid #9ce6ec;cursor:grab;touch-action:none}body.immersive #notice{color:#17362e} /* Expanded cards already contain their title and rules. */ #card-inspector{width:fit-content;max-width:96vw;padding:12px;background:#101b20;border-color:#857449}#card-inspector .inspect-layout{display:flex;flex-direction:column;gap:10px;clear:both}#card-inspector #inspect-image{display:block;width:auto;max-width:88vw;height:auto;max-height:76dvh;object-fit:contain}#card-inspector #close-inspector{float:none;display:block;margin:0 0 10px auto;padding:6px 12px}#card-inspector .inspect-controls{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}#card-inspector #use-art{margin:0}#card-inspector .inspect-controls:not(:has(:not([hidden]))){display:none} /* Use the table width for legible card faces, without stretching the images. */ body.immersive #battleboard{width:100%;max-width:1800px;padding:10px 16px;margin:auto}body.immersive #scoreboard,body.immersive #table-guide{max-width:none}body.immersive .mat-grid{grid-template-columns:110px 110px minmax(0,1fr) 110px}body.immersive .opponent-mat .mat-grid{grid-template-columns:110px minmax(0,1fr) 110px 110px}body.immersive .mat-card{width:100px;max-width:100px;padding:0;background:transparent;touch-action:none}body.immersive .mat-card img{width:100%;height:auto;display:block;object-fit:contain}body.immersive .rune-row .mat-card{width:70px;max-width:70px}body.immersive .mat-cards{min-height:100px;gap:12px}body.immersive .mat-zone{padding:6px}body.immersive .card-state{font-size:9px}body.immersive .field-card{width:190px;max-width:35%;padding:0}body.immersive .field-card img{width:100%;height:auto}body.immersive .field-center>span{display:none}body.immersive .field-army{min-height:40px;gap:12px}body.immersive .hidden-slots{min-height:0;justify-content:center}body.immersive .hidden-slots:empty{display:none}body.immersive .hidden-slots .mat-card{width:85px;max-width:85px}body.immersive .hidden-slots .deck-stack{width:65px;height:90px;margin:8px}body.immersive .opponent-hidden{border-bottom:1px dashed #aa986655}body.immersive .own-hidden{border-top:1px dashed #aa986655}body.immersive .hand .card{flex:0 0 150px;min-width:150px;max-width:150px}body.immersive .hand .card-image{max-height:none;width:100%;height:auto}body.immersive .hand .art-button{width:100%;padding:0}body.immersive .deck-stack{width:65px;height:90px} #move-tray.art-only{width:min(1050px,96vw)}#move-tray.art-only #visual-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#move-tray.art-only .visual-choice{padding:0;background:transparent;min-width:0;border-radius:8px;overflow:hidden}#move-tray.art-only .visual-choice img{width:100%;height:auto;margin:0}#move-tray.art-only .visual-choice span{display:none}.visual-choice img{pointer-events:none}.drag-ghost{padding:0!important;border:3px solid #c6ffe1!important;border-radius:10px;box-shadow:0 0 28px #83ffc7bb,0 18px 50px #000b!important;opacity:1!important;transform:rotate(2deg)!important;overflow:hidden;pointer-events:none}.drag-ghost img{display:block;width:100%;height:auto;max-height:none!important;object-fit:contain}.art-button,.mat-card{user-select:none;-webkit-user-select:none}body.immersive [data-trash-player].drop-legal::after{content:'DROP TO DISCARD'} @media(max-width:800px){body.immersive #battleboard{padding:6px}body.immersive .mat-grid{grid-template-columns:56px 56px minmax(0,1fr) 56px}body.immersive .opponent-mat .mat-grid{grid-template-columns:56px minmax(0,1fr) 56px 56px}body.immersive .mat-card{width:52px;max-width:52px}body.immersive .rune-row .mat-card{width:40px;max-width:40px}body.immersive .mat-cards{min-height:70px;gap:6px}body.immersive .deck-stack{width:40px;height:60px}body.immersive .hand .card{flex-basis:125px;min-width:125px;max-width:125px}#move-tray.art-only #visual-choices{grid-template-columns:repeat(2,minmax(0,1fr))}} #move-tray .visual-choice.image-choice{padding:0;background:transparent;overflow:hidden}#move-tray .visual-choice.image-choice img{display:block;width:100%;height:auto;max-height:none;margin:0}#move-tray .visual-choice.image-choice span{display:none} /* Binary decisions are deliberate buttons, never drag targets. */ #move-tray.binary-choice{width:min(520px,94vw);padding:24px;background:linear-gradient(145deg,#183035,#0b171e);border:1px solid #d7bb70;box-shadow:0 12px 50px #0009}#move-tray.binary-choice #tray-title{font-size:20px;margin:0 0 18px;color:#f3e2b0}#move-tray.binary-choice #visual-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0}#move-tray.binary-choice .visual-choice{min-height:76px;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;font-size:19px;letter-spacing:.5px;border:1px solid #6e8e8b;border-radius:10px;background:linear-gradient(145deg,#304a50,#1a2e35);box-shadow:inset 0 1px #ffffff20,0 5px 0 #071217;cursor:pointer;touch-action:manipulation;transition:transform .15s,box-shadow .15s,border-color .15s}#move-tray.binary-choice .visual-choice:first-child{background:linear-gradient(145deg,#3c795e,#214b3d);border-color:#8ed1a9}#move-tray.binary-choice .visual-choice:first-child::before{content:'\2713';font-size:26px;color:#bdffd4}#move-tray.binary-choice .visual-choice:last-child::before{content:'\00d7';font-size:29px;color:#d0dce1}#move-tray.binary-choice .visual-choice:hover{transform:translateY(-3px);border-color:#ffe2a0;box-shadow:inset 0 1px #ffffff30,0 8px 20px #0007}#move-tray.binary-choice .visual-choice:active{transform:translateY(2px);box-shadow:none}#move-tray.binary-choice .visual-choice:focus-visible{outline:3px solid #ffe2a0;outline-offset:4px} /* The hand floats over the mat; only the cards intercept pointer input. */ #mat-surface{position:relative;max-width:1800px;margin:auto}body.immersive #mat-surface #battleboard{padding-bottom:245px}#hand-layer{position:sticky;bottom:0;height:240px;margin-top:-240px;z-index:11;pointer-events:none;display:flex;align-items:flex-end;justify-content:center}body.immersive #hand-layer #hand{position:static;background:transparent;border:0;box-shadow:none;min-height:0;margin:0;padding:14px 12px 10px;max-width:calc(100% - 230px);width:max-content;justify-content:safe center;pointer-events:none}#hand-layer .card{pointer-events:auto;box-shadow:0 5px 15px #0008}#hand-layer .hand-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#hand-layer .card:hover{z-index:2;filter:brightness(1.08)}@media(max-width:800px){body.immersive #hand-layer #hand{max-width:100%}#hand-layer{height:205px;margin-top:-205px}body.immersive #mat-surface #battleboard{padding-bottom:210px}} /* Score rails sit at the outside edges; the two fields share the center evenly. */ body.immersive #mat-surface #battleboard{padding-left:44px;padding-right:44px}.battlefield-row{position:relative}.battlefield-row .battlefield-band{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}.battlefield-row .shared-field:nth-child(n){grid-column:auto}.edge-score{position:absolute;top:50%;transform:translateY(-50%);width:30px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#eddbab}.left-score{left:-36px}.right-score{right:-36px}.edge-score>small{font-size:8px;letter-spacing:.5px}.edge-score .score-track{display:flex;flex-direction:column;gap:4px}.edge-score .score-track span{width:23px;height:23px;font-size:11px;display:grid;place-items:center}.edge-score .score-track .scored{box-shadow:0 0 9px #f4d38288}@media(max-width:800px){body.immersive #mat-surface #battleboard{padding-left:32px;padding-right:32px}.left-score{left:-29px}.right-score{right:-29px}.edge-score{width:26px}.edge-score .score-track{gap:2px}.edge-score .score-track span{width:18px;height:18px;font-size:9px}.battlefield-row .battlefield-band{gap:5px}} /* Keep the score rails outside the mat artwork, in dedicated page gutters. */ body.immersive #mat-surface{width:calc(100% - 144px);max-width:1800px;overflow:visible}body.immersive #mat-surface #battleboard{padding-left:16px;padding-right:16px}.edge-score{width:52px;gap:10px}.left-score{left:-80px}.right-score{right:-80px}.edge-score>small{font-size:11px;font-weight:750;letter-spacing:1px}.edge-score .score-track{gap:7px}.edge-score .score-track span{width:36px;height:36px;font-size:18px;border-width:2px;background:#101b20}.edge-score .score-track .scored{background:#f4d382;color:#17231c;box-shadow:0 0 14px #f4d38266}@media(max-width:800px){body.immersive #mat-surface{width:calc(100% - 88px)}body.immersive #mat-surface #battleboard{padding-left:6px;padding-right:6px}.edge-score{width:36px;gap:7px}.left-score{left:-46px}.right-score{right:-46px}.edge-score>small{font-size:9px}.edge-score .score-track{gap:4px}.edge-score .score-track span{width:28px;height:28px;font-size:14px}} /* A single compact control strip; detailed player stats live in the menu. */ body.immersive #game-hud{position:sticky;top:8px;z-index:25;display:flex;flex-wrap:nowrap;align-items:center;justify-content:initial;gap:6px;width:fit-content;max-width:calc(100% - 24px);margin:8px auto 12px;padding:6px;border:1px solid #a9905055;border-radius:14px;background:linear-gradient(135deg,#1b211fef,#101616f5);box-shadow:0 6px 22px #0007;backdrop-filter:blur(12px)}body.immersive #game-hud button{flex-shrink:0;border:1px solid transparent;border-radius:9px;padding:9px 13px;color:#d9d5c8;background:transparent;font-size:12px;font-weight:650;line-height:1.3}body.immersive #game-hud button:hover{background:#ffffff0c;border-color:#b7a26655}body.immersive #game-hud #table-menu{border-right:1px solid #b7a26633;border-radius:8px 0 0 8px}body.immersive #game-hud #move-hint{background:#ad935b18;color:#e3c888;border-color:#ad935b38}body.immersive #game-hud #quick-pass{background:#335a45;color:#e2f3dc;border-color:#63947055}body.immersive #turn-status{padding:0 14px;min-width:170px;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b3b9b5;font-size:12px;letter-spacing:.15px}body.immersive #turn-status.your-move{color:#ecd6a1}body.immersive #turn-status.your-move::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#a9dbac;box-shadow:0 0 8px #a9dbac55}#table-drawer #scoreboard{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin:18px 0;padding:16px;border-radius:9px;background:#182420;color:#ecdfb9}#table-drawer #scoreboard>.eyebrow{display:none}#table-drawer .score small{font-size:11px;line-height:1.8}#table-drawer .score strong{font-size:28px}@media(max-width:650px){body.immersive #game-hud{flex-wrap:wrap;max-width:calc(100% - 12px);gap:3px;padding:5px;border-radius:10px}body.immersive #turn-status{flex:1;min-width:130px;max-width:calc(100% - 70px);padding:0 8px}body.immersive #game-hud button{font-size:11px;padding:8px 10px}} #game-hud #music-controls{position:relative;margin:0;font-size:12px;color:#e3c888}#music-controls summary{cursor:pointer;list-style:none;padding:9px 12px;border-radius:9px;border:1px solid #ad935b38}#music-controls summary::-webkit-details-marker{display:none}#music-controls[open] summary{background:#ad935b20}.music-popover{position:absolute;right:0;top:calc(100% + 12px);width:260px;padding:16px;border:1px solid #ad935b88;border-radius:12px;background:#16201f;box-shadow:0 10px 30px #0009;display:grid;gap:12px;color:#eee1ba}.music-buttons{display:flex;gap:8px}.music-popover label{display:flex;justify-content:space-between;font-size:12px}.music-popover input[type=range]{width:100%;padding:0;accent-color:#d6bb78}.music-popover #music-track{font-size:13px}body.immersive #game-hud .music-buttons button{background:#33483d;border-color:#7a9e6c44}#music-controls audio{display:none}@media(max-width:650px){.music-popover{position:fixed;top:100px;right:12px;width:min(280px,calc(100vw - 24px))}} /* Runes use the same readable card size as other permanents. */ body.immersive .rune-row .mat-card{width:100px;max-width:100px;flex:0 0 100px}body.immersive .rune-row{gap:16px;flex-wrap:wrap;align-items:center}body.immersive .rune-row .mat-card img{width:100%;height:auto;object-fit:contain}@media(max-width:800px){body.immersive .rune-row .mat-card{width:64px;max-width:64px;flex-basis:64px}body.immersive .rune-row{gap:10px}} /* Draw piles match the size of board cards; hidden-card markers keep their own sizing. */ body.immersive .main-zone .deck-stack,body.immersive .rune-deck-zone .deck-stack{width:100px;max-width:100%;height:auto;aspect-ratio:5/7;margin:4px auto 8px}body.immersive .main-zone .back-crest,body.immersive .rune-deck-zone .back-crest{font-size:34px}body.immersive .main-zone .deck-stack b,body.immersive .rune-deck-zone .deck-stack b{font-size:24px}body.immersive .main-zone .deck-stack small,body.immersive .rune-deck-zone .deck-stack small{font-size:10px;margin-top:8px}@media(max-width:800px){body.immersive .main-zone .deck-stack,body.immersive .rune-deck-zone .deck-stack{width:52px;margin:3px auto 5px}body.immersive .main-zone .back-crest,body.immersive .rune-deck-zone .back-crest{font-size:22px}body.immersive .main-zone .deck-stack b,body.immersive .rune-deck-zone .deck-stack b{font-size:16px}body.immersive .main-zone .deck-stack small,body.immersive .rune-deck-zone .deck-stack small{font-size:7px;margin-top:4px}} #spell-drop{position:fixed;left:50%;bottom:270px;transform:translateX(-50%);z-index:19;width:min(310px,80vw);min-height:135px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;border:2px dashed #c4f9e2;border-radius:15px;background:radial-gradient(ellipse,#284d46ee,#102825f5);box-shadow:0 0 25px #90e8c34d,inset 0 0 20px #90e8c322;color:#e6fff3;pointer-events:auto}#spell-drop strong{font-size:23px}#spell-drop small{font-size:12px;text-align:center;color:#b9e7d1}@media(max-width:800px){#spell-drop{bottom:230px;min-height:110px}} /* Compact table: prioritize card faces over empty zone height. */ @media(min-width:1100px){ body.immersive #mat-surface{--table-card:clamp(112px,8.4vw,160px);--hand-card:clamp(165px,10vw,200px);max-width:2200px} body.immersive #mat-surface #battleboard{padding:10px 14px calc(var(--hand-card)*1.4 + 24px)} body.immersive .physical-mat{padding:4px 0} body.immersive .mat-heading{margin:2px 0 5px;font-size:10px} body.immersive .mat-grid,body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(2,calc(var(--table-card) + 12px)) minmax(150px,.85fr) minmax(180px,1.15fr) repeat(3,calc(var(--table-card) + 12px));grid-template-areas:'legend champion runes base main rune-deck trash';gap:6px;align-items:stretch} body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(3,calc(var(--table-card) + 12px)) minmax(180px,1.15fr) minmax(150px,.85fr) repeat(2,calc(var(--table-card) + 12px));grid-template-areas:'trash rune-deck main base runes champion legend'} body.immersive .opponent-mat .mat-grid .mat-zone,body.immersive .opponent-mat .mat-grid .command-zone>div{grid-row:1} body.immersive .mat-card,body.immersive .rune-row .mat-card{width:var(--table-card);max-width:var(--table-card);flex:0 0 var(--table-card)} body.immersive .mat-card img{width:100%;height:auto} body.immersive .mat-zone,body.immersive .command-zone>div{padding:5px;background:#09131470} body.immersive .mat-zone label{font-size:9px;margin-bottom:5px} body.immersive .mat-zone label small{display:none} body.immersive .mat-cards{min-height:0;flex-wrap:nowrap;overflow-x:auto;align-items:center;gap:10px;padding:6px 4px 14px;scrollbar-width:thin;scrollbar-color:#9b8449 #17211e} body.immersive .rune-row .mat-card{margin-right:calc(var(--table-card)*-.35)} body.immersive .rune-row .mat-card:last-child{margin-right:0} body.immersive .rune-row .mat-card:hover,body.immersive .rune-row .mat-card:focus-visible{z-index:3} body.immersive .mat-card.exhausted{margin-left:14px;margin-right:14px} body.immersive .base-zone .zone-watermark,body.immersive .empty-runes{min-height:calc(var(--table-card)*1.3);display:grid;place-content:center} body.immersive .main-zone .deck-stack,body.immersive .rune-deck-zone .deck-stack{width:var(--table-card);height:auto;aspect-ratio:5/7;margin:6px auto} body.immersive .empty-slot{min-height:calc(var(--table-card)*1.3)} body.immersive .shared-field{display:grid;grid-template-columns:minmax(120px,.6fr) minmax(0,1.4fr);grid-template-rows:auto auto minmax(40px,1fr) minmax(40px,1fr) auto;gap:6px 14px;padding:10px;min-height:190px;background:#09131480} body.immersive .field-title{grid-column:1/-1;grid-row:1;font-size:12px} body.immersive .field-center{grid-column:1;grid-row:2/6;align-self:center;justify-content:center;margin:0} body.immersive .field-card{width:100%;max-width:230px} body.immersive .field-army{grid-column:2;grid-row:4;flex-wrap:nowrap;justify-content:safe center;overflow-x:auto;min-height:40px;padding:6px 10px;scrollbar-width:thin} body.immersive .field-army.enemy-army{grid-row:3} body.immersive .opponent-hidden{grid-column:2;grid-row:2} body.immersive .own-hidden{grid-column:2;grid-row:5} body.immersive .hidden-slots .mat-card{width:var(--table-card);max-width:var(--table-card)} body.immersive #hand-layer{height:calc(var(--hand-card)*1.4 + 24px);margin-top:calc((var(--hand-card)*1.4 + 24px)*-1)} body.immersive #hand-layer .card{width:var(--hand-card);min-width:var(--hand-card);max-width:var(--hand-card);flex:0 0 var(--hand-card)} body.immersive #hand-layer #hand{max-width:calc(100% - 24px)} } @media(min-width:1100px) and (max-width:1350px){ body.immersive #mat-surface{--table-card:108px} body.immersive .mat-grid,body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(2,120px) minmax(120px,.85fr) minmax(150px,1.15fr) repeat(3,100px)} body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(3,100px) minmax(150px,1.15fr) minmax(120px,.85fr) repeat(2,120px)} } /* Give the base the central row and runes a dedicated row underneath. */ @media(min-width:1100px){ body.immersive .mat-grid,body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(2,calc(var(--table-card) + 12px)) minmax(0,1fr) repeat(3,calc(var(--table-card) + 12px));grid-template-areas:'legend champion base main rune-deck trash' 'runes runes runes runes runes runes';gap:8px} body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(3,calc(var(--table-card) + 12px)) minmax(0,1fr) repeat(2,calc(var(--table-card) + 12px));grid-template-areas:'trash rune-deck main base champion legend' 'runes runes runes runes runes runes'} body.immersive .opponent-mat .mat-grid .runes-zone{grid-row:2} body.immersive .rune-row .mat-card{margin-right:0} body.immersive .rune-row{gap:12px;padding:6px 12px 14px} body.immersive .empty-runes{min-height:40px} } body.immersive #mat-surface{--hand-card:88px}body.immersive #mat-surface #battleboard{padding-bottom:145px}body.immersive #hand-layer{height:140px;margin-top:-140px}body.immersive #hand-layer .card{width:88px;min-width:88px;max-width:88px;flex:0 0 88px}body.immersive #hand-layer #hand{padding:8px 12px;gap:7px}#hand-hover-preview{position:fixed;z-index:35;width:min(265px,44vw);pointer-events:none;border:2px solid #dcc98d;border-radius:10px;overflow:hidden;background:#0d1718;box-shadow:0 8px 35px #000c,0 0 14px #d8c68e44}#hand-hover-preview img{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain}body.immersive #hand-layer .card:hover{outline:2px solid #eddbab;filter:none}@media(max-width:800px){body.immersive #hand-layer .card{width:76px;min-width:76px;max-width:76px;flex-basis:76px}body.immersive #hand-layer{height:125px;margin-top:-125px}body.immersive #mat-surface #battleboard{padding-bottom:130px}} #table-chat{position:fixed;right:16px;bottom:16px;z-index:40;width:min(360px,calc(100vw - 24px));max-height:75dvh;display:flex;flex-direction:column;background:#14201ff5;color:#eedeb7;border:1px solid #a9905077;border-radius:14px;box-shadow:0 12px 40px #0009;overflow:hidden}.chat-heading{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #a9905033}.chat-heading button,#chat-send{background:#334f40;color:#efdfb4;padding:8px 12px;font-size:12px}#chat-messages{height:300px;min-height:80px;overflow:auto;padding:12px;overscroll-behavior:contain}#chat-messages:empty::before{content:'Say hello to your opponent.';color:#9faeaa;font-size:13px}.chat-message{padding:10px;margin-bottom:8px;border-radius:8px;background:#ffffff08;overflow-wrap:anywhere}.own-message{background:#9fd3ac12}.chat-message strong{font-size:12px}.chat-message time{float:right;font-size:10px;color:#a7b3ac}.chat-message p{margin:5px 0 0;color:#e2e6dc;font-size:13px;white-space:pre-wrap}#chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;border-top:1px solid #a9905033}.chat-label{grid-column:1/-1;font-size:11px}#chat-input{min-width:0;resize:vertical;max-height:120px;background:#0c1716;color:#e2e6dc;border:1px solid #617669;border-radius:7px;padding:8px;font:13px system-ui}#chat-status{grid-column:1/-1;font-size:12px;color:#f4baab}#chat-unread{display:inline-grid;place-items:center;background:#d8bd77;color:#17251f;min-width:18px;height:18px;border-radius:12px;font-size:10px;margin-left:4px} #voice-controls{display:flex;flex-wrap:wrap;gap:7px;padding:12px;border-bottom:1px solid #a9905033}#voice-controls button{padding:7px 10px;background:#335844;color:#eedeb7;font-size:12px}#voice-status{flex-basis:100%;color:#b8cbbb;font-size:11px}#voice-audio{display:none} #deck-picker{margin:18px 0 28px;padding:24px;background:#e8ecdf;border:1px solid #cdd5c2;border-radius:14px}.picker-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.picker-heading h2{margin:0 0 8px}.picker-heading p{margin:0;font-size:13px}#player-record{padding:12px 0;font-size:12px}#player-record>div{display:flex;gap:18px;flex-wrap:wrap}#picked-deck{display:flex;gap:24px;align-items:center;padding:18px;background:#17372e;border-radius:12px;color:#f0e6c7;margin:8px 0 20px}#picked-deck p{color:#cbd7c2;font-size:13px}#picked-deck h3{font:24px Georgia,serif;margin:8px 0}.picked-art{display:flex;gap:12px;flex-shrink:0}.picker-card{padding:0;background:transparent;color:#dcd8bb;width:120px}.picker-card img{display:block;width:100%;aspect-ratio:744/1039;object-fit:contain;border-radius:7px}.picker-card small{display:block;padding-top:6px;font-size:10px}#deck-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;max-height:590px;overflow:auto;padding:4px}.deck-tile{display:flex;flex-direction:column;gap:5px;align-items:stretch;text-align:left;padding:12px;border:2px solid transparent;background:#fffdf3;color:#193c30;border-radius:10px}.deck-tile.picked{border-color:#45836a;box-shadow:0 0 0 2px #45836a25}.deck-tile .tile-art{display:flex;justify-content:center;gap:8px}.tile-art img{width:calc(50% - 4px);aspect-ratio:744/1039;object-fit:contain;border-radius:5px}.deck-tile>small{font-size:10px;color:#647363;margin-top:6px}.deck-tile>strong{font-size:14px}.deck-tile>span:not(.tile-art){font-size:10px;color:#677564}.deck-tile:disabled{opacity:.7;cursor:default}#room-deck-picker #deck-picker{margin-top:0}#waiting{max-width:none}.picker-missing{font-size:12px;width:120px}@media(max-width:650px){#deck-picker{padding:12px}.picker-heading{align-items:flex-start;flex-direction:column}#picked-deck{flex-direction:column;align-items:flex-start;padding:14px;gap:10px}.picker-card{width:110px}#deck-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.deck-tile{padding:7px}.deck-tile>strong{font-size:12px}} /* RiftBonk: shared black-and-gold palette across workshop, lobby and table. */ :root{color-scheme:dark;--paper:#0c0c0b;--ink:#eee6d5;--muted:#b0a796;--line:#493e29;--green:#d6b76c;--lime:#d6b76c;--white:#191815;--red:#e6a18e;--gold:#d6b76c;--panel:#171613} body,body.immersive{background:#0c0c0b;color:var(--ink)}body:not(.immersive){background:radial-gradient(ellipse at 85% 0%,#9c783015,transparent 50%),#0c0c0b}header{background:#11110fe8;border-color:#514125}.brand{color:#e8c77c}.brand .soft{color:#f0e5cc}.brand small,.edition,.eyebrow{color:#c4a465}h1,h2{color:#f0e2c4}.nav{color:#bfb39b}.nav.active{background:#b38b2921;color:#f0d99e;box-shadow:inset 0 0 0 1px #9e804655}input,select,textarea{background:#11110f;color:#eee6d5;border-color:#54452d}input::placeholder,textarea::placeholder{color:#958b78}input:focus,select:focus,button:focus-visible,textarea:focus{outline-color:#e3c174}input[type=checkbox],input[type=range]{accent-color:#d6b76c}.primary{background:linear-gradient(145deg,#efd393,#bf9850);color:#17130b;box-shadow:inset 0 1px #fff4cf80,0 3px 10px #0003}.secondary,.button.secondary,.card-add{background:#282319;color:#e9d4a0;border:1px solid #695434}.danger{background:#381c17;color:#f3b1a0;border:1px solid #774032}.icon{color:#e0c185}.deckpanel{background:#191713;border-color:#554428}.deck-name{color:#f2dfb2}.deck-row{border-color:#3e3526}.deck-row button{color:#e6d5ad}.deck-section,.filterline,.fine{color:#b7aa92}.pill{background:#3d3119;color:#efce85;border:1px solid #7e6333}.card,.illustrated.card{background:#1b1915;border-color:#4e412b}.card h3{color:#efdfba}.card p,.card-bottom{color:#b7ab95}.art-button{background:#100f0d}.lobby-card{background:#181612;border-color:#56452c}.lobby-card.accent{background:radial-gradient(ellipse at top right,#6c52202b,transparent 80%),#191610;color:#eee0c2}.accent p{color:#bfb196}.big-symbol{color:#d6b76c}.divider{color:#b9a274}.joinline input{background:#10100e}#notice:not(:empty),body.immersive #notice:not(:empty){background:#2c2516;color:#f0d89f;border-color:#8b6f37}footer{border-color:#3f3422;color:#ac9b7e} #deck-picker{background:#171511;border-color:#5f4c2d}#player-record{color:#cbbb9a}#player-record strong{color:#edd39a}#picked-deck{background:linear-gradient(120deg,#312716,#181611);color:#f0deb4;border:1px solid #70572d}#picked-deck p{color:#c6b799}#picked-deck h3{color:#eed8a8}.picker-card{color:#c5ae7f}.deck-tile{background:#211d16;color:#ebd6ac;border-color:#4c3d25}.deck-tile:hover{background:#302718;border-color:#ad8747}.deck-tile.picked{border-color:#e0bb6c;box-shadow:0 0 0 2px #c7a05833;background:#302717}.deck-tile>small,.deck-tile>span:not(.tile-art){color:#bfb092}.deck-tile>strong{color:#f1ddb3} body.immersive .decision-panel{background:#191713;border-color:#705a31;color:#eddfc4}.decision-panel p{color:#b8ab91}.choice{background:#282217;color:#ecdbb4;border-color:#5a4729}.choice.selected{background:#513e1b;border-color:#dbb569;color:#ffedbc}#card-inspector,#table-drawer{background:#141310;color:#eddfc2;border-color:#9a7b43}#table-drawer #scoreboard{background:#252015;color:#efdbac}#table-drawer .score small{color:#bbab8c}dialog::backdrop{background:#080704d9}#hand-hover-preview{background:#12110e}#move-tray,#move-tray.binary-choice{background:linear-gradient(140deg,#252016f7,#11100ef7);border-color:#ac8b4d;color:#efdbab}.visual-choice{background:#322919;color:#f3dfac;border-color:#6b542e}.visual-choice.selected{background:#55411b;border-color:#ebc574}#move-tray.binary-choice .visual-choice{background:linear-gradient(145deg,#3e3423,#241f16);border-color:#927340}#move-tray.binary-choice .visual-choice:first-child{background:linear-gradient(145deg,#d6b873,#9e783b);border-color:#edce85;color:#171208}#move-tray.binary-choice .visual-choice:first-child::before{color:#221b0d}#move-tray.binary-choice .visual-choice:last-child::before{color:#e8d3a7}#choice-drop{border-color:#c7a45f;color:#f0d797} body.immersive #game-hud{background:linear-gradient(135deg,#242016f5,#11100ef5);border-color:#94733c66}body.immersive #game-hud button{color:#e3d2ae}body.immersive #game-hud #quick-pass{background:#b8944e;color:#151108;border-color:#dec482}body.immersive #turn-status{color:#c2b59b}body.immersive #turn-status.your-move::before{background:#e8c578;box-shadow:0 0 8px #e8c57866}body.immersive #table-guide{background:#19160f;color:#c8b489}.edge-score .score-track span{background:#16130e}.edge-score .score-track .scored{background:#e8c578;color:#17120a}.playable{outline-color:#ebce87!important;box-shadow:0 0 13px #dfb85666!important}.choice-card{outline-color:#e5c781}.drop-legal{outline-color:#ffe2a0!important;background-color:#b8923744!important}.drag-ghost{border-color:#ffe4a6!important;box-shadow:0 0 28px #d5ac59aa,0 18px 50px #000b!important}#spell-drop{background:radial-gradient(ellipse,#59411bef,#20190ff5);border-color:#f1d28b;color:#fff0c6;box-shadow:0 0 25px #d9b26466}#spell-drop small{color:#e5cc99} #table-chat,.music-popover{background:#191610f7;border-color:#9e7d43;color:#ecd9b2}.chat-heading,.chat-form,#voice-controls{border-color:#6b532d66}.chat-message{background:#c6a05b0c}.own-message{background:#c6a05b1c}.chat-message p{color:#e5dac4}.chat-message time,#voice-status{color:#b8a681}.chat-heading button,#chat-send,#voice-controls button,body.immersive #game-hud .music-buttons button{background:#49381b;color:#f3dba6;border:1px solid #8b6a35}#chat-input{background:#100f0c;color:#eaddc2;border-color:#74603c}#chat-messages:empty::before{color:#b7a78a}.music-popover input[type=range]{accent-color:#e2bf72}#chat-unread{background:#dec17c;color:#181209} /* Arena layout: opposing player benches, two broad shared lanes, and a compact hand. */ body.immersive #mat-surface #battleboard{background:#100e0b;border:1px solid #94713f;border-radius:16px;box-shadow:inset 0 0 70px #0008,0 16px 55px #0008}body.immersive #battleboard::before{opacity:.38;background-size:cover}body.immersive .mat-zone,body.immersive .command-zone>div{background:#17130cad;border-color:#8f744044;border-radius:10px}body.immersive .physical-mat{position:relative}.player-resources{display:flex;gap:14px;color:#cebd96;font-size:11px;margin:4px 0 8px}.player-resources b{display:inline-block;min-width:30px;padding:3px 8px;text-align:center;background:#080806bb;border:1px solid #82653655;border-radius:5px;color:#efcf8b;font-size:16px}body.immersive .opponent-mat .player-resources{justify-content:flex-end}body.immersive .mat-zone label{color:#b7a379;font-size:8px;letter-spacing:1.2px}body.immersive .field-title{color:#dbc38a}body.immersive .shared-field{background:linear-gradient(#1e181272,#100d0988);border-color:#8d713644;border-radius:14px}body.immersive .battlefield-row .battlefield-band{border-color:#b38b43;gap:12px;padding:8px 0}body.immersive .field-army{border-radius:8px;background:#00000018}.player-resources span{white-space:nowrap} @media(min-width:1100px){ body.immersive #mat-surface{--table-card:clamp(105px,7.5vw,145px)} body.immersive #mat-surface #battleboard{padding-top:10px;padding-bottom:165px} body.immersive .opponent-hand{height:94px;align-items:flex-start;padding-top:4px;margin:0 0 8px} body.immersive .opponent-hand .hand-back{width:62px;height:86px;border-radius:7px;margin-left:-14px;background:linear-gradient(145deg,#302615,#0b0b09);box-shadow:0 4px 10px #0005;font-size:25px} body.immersive .opponent-hand small{align-self:center} body.immersive .mat-grid{grid-template-columns:calc(var(--table-card) + 12px) minmax(170px,.8fr) minmax(230px,1.3fr) repeat(2,calc(var(--table-card) + 12px));grid-template-areas:'rune-deck runes base legend champion';gap:8px} body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(2,calc(var(--table-card) + 12px)) minmax(230px,1.3fr) minmax(170px,.8fr) calc(var(--table-card) + 12px);grid-template-areas:'legend champion base runes rune-deck'} body.immersive .opponent-mat .mat-grid .runes-zone{grid-row:1} body.immersive .physical-mat .main-zone,body.immersive .physical-mat .trash-zone{position:absolute;top:calc(100% + 8px);width:calc(var(--table-card) + 12px);grid-area:auto;z-index:2;min-height:115px} body.immersive .physical-mat .main-zone{right:0} body.immersive .physical-mat .trash-zone{right:calc(var(--table-card) + 22px)} body.immersive .opponent-mat .main-zone,body.immersive .opponent-mat .trash-zone{top:auto;bottom:calc(100% + 10px);right:auto;width:82px} body.immersive .opponent-mat .main-zone{left:0} body.immersive .opponent-mat .trash-zone{left:92px} body.immersive .opponent-mat .main-zone .deck-stack,body.immersive .opponent-mat .trash-zone .mat-card{width:62px;max-width:62px;min-height:0} body.immersive .opponent-mat .trash-zone .empty-slot{min-height:65px} body.immersive .shared-field{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(55px,1fr) 64px minmax(55px,1fr) auto;gap:4px;min-height:265px;padding:10px} body.immersive .field-title{grid-column:1;grid-row:1;display:flex;justify-content:space-between;align-items:center;gap:8px} body.immersive .field-title small{font-size:8px} body.immersive .field-center{grid-column:1;grid-row:4;justify-content:center;z-index:2} body.immersive .field-card{width:165px;max-width:35%;filter:drop-shadow(0 5px 10px #0009)} body.immersive .field-army{grid-column:1;grid-row:5;justify-content:safe center;min-height:55px} body.immersive .field-army.enemy-army{grid-row:3} body.immersive .opponent-hidden{grid-column:1;grid-row:2} body.immersive .own-hidden{grid-column:1;grid-row:6} body.immersive #hand-layer{height:150px;margin-top:-150px} body.immersive #hand-layer #hand{max-width:calc(100% - 360px);padding:24px 20px 14px;gap:0;overflow-x:auto} body.immersive #hand-layer .card{transform:translateY(var(--fan-lift,0px)) rotate(var(--fan-angle,0deg));transform-origin:center bottom;margin-left:-24px;transition:filter .12s} body.immersive #hand-layer .card:first-child{margin-left:0} body.immersive #hand-layer .card:hover{z-index:5} body.immersive .base-zone .zone-watermark,body.immersive .empty-runes{min-height:calc(var(--table-card)*1.2)} body.immersive .rune-row .mat-card{margin-right:-30px} body.immersive .rune-row .mat-card:last-child{margin-right:0} } @media(min-width:1100px){body.immersive .opponent-hand{height:145px}body.immersive .opponent-mat .main-zone,body.immersive .opponent-mat .trash-zone{top:-140px;bottom:auto}body.immersive #mat-surface #battleboard{padding-bottom:calc(var(--table-card)*1.4 + 65px)}} #move-tray.target-picker{width:min(650px,94vw);max-height:75vh;top:90px;bottom:auto;right:12px;left:auto;transform:none}#move-tray.target-picker #visual-choices{display:flex;flex-direction:column;gap:15px}.target-group h4{font-size:14px;margin:0 0 8px;color:#ead092}.target-group>div{display:flex;gap:10px;overflow-x:auto;padding:4px}.target-choice{flex:0 0 120px;width:120px;padding:4px;background:#211b12;color:#e9d5ac;border:2px solid #63502c;border-radius:8px}.target-choice img{width:100%;height:auto;display:block;border-radius:4px}.target-choice span{display:block;font-size:10px;margin-top:5px}.target-choice.selected{border-color:#ffe19c;box-shadow:0 0 12px #e6bb5266;background:#493719}.target-choice:disabled{opacity:.35}#confirm-return-targets{align-self:stretch} /* Viewport-sized table: only crowded card lanes scroll, never the whole match. */ body.immersive{height:100dvh;overflow:hidden}body.immersive main,body.immersive #play,body.immersive #room{height:100%;min-height:0}body.immersive #game{height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:0}body.immersive #game-hud{position:relative;top:auto;margin:5px auto;flex-shrink:0}body.immersive .table-layout{height:100%;min-height:0;display:block}body.immersive .table-layout>div{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}body.immersive #mat-surface{width:calc(100% - 112px);max-width:none;height:100%;min-height:0;--table-card:clamp(52px,calc((100dvh - 220px)/7),118px)}body.immersive #mat-surface #battleboard{width:100%;height:100%;max-width:none;min-height:0;padding:5px 8px;display:grid;grid-template-rows:30px minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr) 98px;gap:4px}body.immersive #table-guide{padding:3px 12px;min-height:0;max-height:30px;overflow:auto;font-size:10px}body.immersive .opponent-hand{height:auto;min-height:0;margin:0;padding:0;align-items:center}body.immersive .opponent-hand .hand-back{width:22px;height:28px;font-size:12px;margin-left:-6px}body.immersive .physical-mat{min-height:0;padding:0;display:grid;grid-template-rows:16px 22px minmax(0,1fr)}body.immersive .mat-heading{font-size:8px;margin:0;line-height:16px}body.immersive .player-resources{margin:0;font-size:9px;gap:10px;align-items:center}body.immersive .player-resources b{font-size:11px;padding:0 5px;min-width:22px} body.immersive .mat-grid,body.immersive .opponent-mat .mat-grid{min-height:0;grid-template-rows:minmax(0,1fr);grid-template-columns:calc(var(--table-card) + 10px) minmax(80px,.8fr) minmax(110px,1.4fr) repeat(4,calc(var(--table-card) + 10px));grid-template-areas:'rune-deck runes base legend champion main trash';gap:5px}body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(4,calc(var(--table-card) + 10px)) minmax(110px,1.4fr) minmax(80px,.8fr) calc(var(--table-card) + 10px);grid-template-areas:'trash main legend champion base runes rune-deck'}body.immersive .physical-mat .main-zone,body.immersive .physical-mat .trash-zone{position:relative;inset:auto;width:auto;min-height:0;z-index:auto}body.immersive .physical-mat .main-zone{grid-area:main}body.immersive .physical-mat .trash-zone{grid-area:trash}body.immersive .mat-zone,body.immersive .command-zone>div{padding:3px;min-height:0;overflow:auto;scrollbar-width:thin}body.immersive .mat-zone label{font-size:7px;margin:0 0 3px;line-height:10px}body.immersive .mat-zone label small{display:none}body.immersive .mat-cards,body.immersive .rune-row{min-height:0;height:calc(100% - 15px);padding:3px 6px;flex-wrap:nowrap;gap:8px;align-items:center;overflow:auto}body.immersive .mat-card,body.immersive .rune-row .mat-card,body.immersive .opponent-mat .trash-zone .mat-card{width:var(--table-card);max-width:var(--table-card);flex:0 0 var(--table-card)}body.immersive .rune-row .mat-card{margin-right:0}body.immersive .mat-card img{width:100%;height:auto}body.immersive .card-state{font-size:7px}body.immersive .empty-slot,body.immersive .opponent-mat .trash-zone .empty-slot,body.immersive .base-zone .zone-watermark,body.immersive .empty-runes{min-height:0;font-size:8px}body.immersive .main-zone .deck-stack,body.immersive .rune-deck-zone .deck-stack,body.immersive .opponent-mat .main-zone .deck-stack{width:var(--table-card);height:auto;max-height:calc(100% - 16px);aspect-ratio:5/7;margin:0 auto}body.immersive .deck-stack .back-crest{font-size:20px}body.immersive .deck-stack b{font-size:18px}body.immersive .deck-stack small{font-size:7px;margin:2px 0} body.immersive .battlefield-row{min-height:0}body.immersive .battlefield-row .battlefield-band{height:100%;min-height:0;margin:0;padding:3px 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body.immersive .shared-field{min-height:0;overflow:hidden;padding:5px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:14px minmax(0,1fr) 36px minmax(0,1fr);gap:2px;position:relative}body.immersive .field-title{grid-row:1;grid-column:1;font-size:9px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}body.immersive .field-title small{font-size:6px}body.immersive .field-center{grid-row:3;grid-column:1;justify-content:center;min-height:0;margin:0;align-self:center}body.immersive .field-card{width:85px;max-width:25%}body.immersive .field-card img{width:100%;height:46px;object-fit:contain}body.immersive .field-army,body.immersive .field-army.enemy-army{grid-column:1;grid-row:4;min-height:0;overflow:auto;flex-wrap:nowrap;padding:2px 8px;justify-content:safe center;align-items:center;margin-right:55px}body.immersive .field-army.enemy-army{grid-row:2}body.immersive .field-army .mat-card{width:min(var(--table-card),10vh);max-width:min(var(--table-card),10vh);flex-basis:min(var(--table-card),10vh)}body.immersive .hidden-slots{position:absolute;right:4px;width:48px;max-height:42%;overflow:auto;display:flex;border:0;margin:0}body.immersive .opponent-hidden{top:20px}body.immersive .own-hidden{bottom:4px}body.immersive .hidden-slots .mat-card{width:42px;max-width:42px;flex-basis:42px}body.immersive .hidden-slots .deck-stack{width:34px;height:48px;flex:0 0 34px;margin:2px}body.immersive .hidden-slots .deck-stack small{font-size:5px} body.immersive #hand-layer{position:absolute;bottom:5px;height:96px;margin:0;left:0;right:0}body.immersive #hand-layer #hand{max-width:calc(100% - 16px);padding:12px 18px 3px;max-height:112px;min-height:0;overflow:auto}body.immersive #hand-layer .card{width:60px;min-width:60px;max-width:60px;flex-basis:60px;margin-left:-12px}body.immersive .left-score{left:-53px}body.immersive .right-score{right:-53px}body.immersive .edge-score{width:42px}body.immersive .edge-score .score-track{gap:3px}body.immersive .edge-score .score-track span{width:clamp(18px,3vh,30px);height:clamp(18px,3vh,30px);font-size:13px} @media(max-width:800px){body.immersive #mat-surface{width:calc(100% - 56px);--table-card:42px}body.immersive .left-score{left:-29px}body.immersive .right-score{right:-29px}body.immersive .edge-score{width:24px}body.immersive .edge-score .score-track span{width:18px;height:18px;font-size:10px}body.immersive .mat-grid,body.immersive .opponent-mat .mat-grid{grid-template-columns:42px minmax(0,1fr) minmax(0,1fr) 42px 42px;grid-template-areas:'legend champion base main trash' 'rune-deck runes runes runes runes';grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:2px}body.immersive .opponent-mat .mat-grid .runes-zone,body.immersive .opponent-mat .mat-grid .rune-deck-zone{grid-row:2}body.immersive .mat-zone{padding:2px}body.immersive .mat-zone label{font-size:5px}body.immersive .field-title small{display:none}body.immersive .field-army,body.immersive .field-army.enemy-army{margin-right:0;padding:2px;justify-content:flex-start}body.immersive .hidden-slots{width:27px;z-index:3}body.immersive .hidden-slots .mat-card{width:25px;max-width:25px}body.immersive .field-army .mat-card{width:42px;max-width:42px;flex-basis:42px}body.immersive .deck-stack .back-crest{font-size:12px}body.immersive .deck-stack b{font-size:12px}body.immersive #game-hud{max-width:calc(100% - 8px)}body.immersive #game-hud button{padding:6px}body.immersive #mat-surface #battleboard{padding:3px;grid-template-rows:24px minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr) 88px}} body.immersive #mat-surface{--table-card:clamp(48px,calc((100dvh - 280px)/7),118px)}body.immersive .shared-field{grid-template-rows:14px minmax(0,1fr) 58px minmax(0,1fr)}body.immersive .field-card{width:125px}body.immersive .field-card img{height:62px}@media(max-width:800px){body.immersive #mat-surface{--table-card:42px}body.immersive .shared-field{grid-template-rows:14px minmax(0,1fr) 36px minmax(0,1fr)}body.immersive .field-card{width:80px;max-width:65%}body.immersive .field-card img{height:40px}} /* Fill two rune rows before extending horizontally. */ body.immersive .rune-row{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:minmax(64px,var(--table-card));gap:6px 10px;align-items:stretch;justify-content:start;height:calc(100% - 15px);min-height:0;overflow-x:auto;overflow-y:hidden;padding:3px 5px;box-sizing:border-box}body.immersive .rune-row .mat-card,body.immersive .rune-row .mat-card.exhausted{display:flex;flex-direction:column;width:100%;max-width:100%;height:100%;min-height:0;margin:0;padding:0;overflow:visible}body.immersive .rune-row .mat-card img{width:100%;height:calc(100% - 12px);min-height:0;object-fit:contain;flex:1 1 0}body.immersive .rune-row .card-state{flex:0 0 10px;line-height:10px;font-size:6px;white-space:nowrap}body.immersive .rune-row .empty-runes{grid-row:1/-1;align-self:center;min-height:0}@media(max-width:800px){body.immersive .rune-row{grid-auto-columns:48px;gap:3px 6px;padding:1px 3px}body.immersive .rune-row .card-state{font-size:5px;line-height:7px;flex-basis:7px}body.immersive .rune-row .mat-card img{height:calc(100% - 8px)}} /* Battlefield artwork stays readable instead of shrinking into a thumbnail. */ body.immersive .shared-field{--battlefield-card-width:clamp(150px,22vh,240px);grid-template-rows:14px minmax(0,1fr) calc(var(--battlefield-card-width) * .716) minmax(0,1fr)} body.immersive .field-center{width:100%;height:100%;min-width:0;display:flex;align-items:center;justify-content:center} body.immersive .field-card{width:var(--battlefield-card-width);max-width:100%;height:100%;padding:0;flex:0 1 var(--battlefield-card-width)} body.immersive .field-card img{display:block;width:100%;height:100%;object-fit:contain} @media(max-width:800px){body.immersive .shared-field{--battlefield-card-width:110px;grid-template-rows:14px minmax(0,1fr) 79px minmax(0,1fr)}} .ai-search-control{margin:16px 0;padding:14px;border:1px solid #66522c;border-radius:10px;background:#17140f}.ai-search-control label{display:flex;align-items:center;justify-content:space-between;gap:12px}.ai-search-control output{color:#edcf87;font-weight:700}.ai-search-control input[type=range]{width:100%;padding:0;margin:14px 0 6px;accent-color:#d8b35b;cursor:pointer}.depth-endpoints{display:flex;justify-content:space-between;color:#b9aa8b;font-size:11px}.ai-search-control .fine{margin-bottom:0} /* Readable match information without changing the card art's aspect ratio. */ #match-info{position:fixed;right:8px;top:55px;z-index:16;width:min(290px,34vw);max-height:45vh;overflow:auto;background:#15120eea;border:1px solid #9b7a3e;border-radius:9px;padding:8px;color:#f1ddb0;font-size:12px}#match-info summary{cursor:pointer;padding:5px;font-weight:bold}#live-chain>div{padding:7px;border-bottom:1px solid #66522c}#live-chain small{display:block}#activity-log{padding-left:20px;max-height:25vh;overflow:auto}#activity-log li{margin:6px 0}.browse-trash{font-size:10px;padding:3px;width:100%;color:#ffe2a0;background:#292116} #trash-gallery{width:min(1000px,95vw);max-height:90dvh;background:#15120e;color:#f1ddb0;border:1px solid #b8924b}#trash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}#trash-cards img{width:100%;height:310px;object-fit:contain}#trash-cards strong{display:block;text-align:center} body.immersive .card-state{display:block;font-size:10px;line-height:1.25;white-space:normal;color:#fff1c6;background:#16120eea;padding:2px}body.immersive .mat-card{align-self:center}body.immersive .mat-card img{max-height:calc((100dvh - 280px)/5.5);object-fit:contain}body.immersive .mat-card.exhausted{margin:0 5px}body.immersive .field-army{align-items:flex-start}body.immersive .battlefield-band{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)} @media(max-width:800px){#match-info{width:190px;font-size:10px;max-height:30vh}body.immersive .card-state{font-size:8px}} #hand-reveal{width:min(1100px,96vw);max-height:92dvh;overflow:auto;background:#17130e;color:#f5dfae;border:2px solid #c6a258;border-radius:12px}#hand-reveal::backdrop{background:#000b}#revealed-cards{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}#revealed-cards article{width:220px}#revealed-cards img{width:100%;height:310px;object-fit:contain}#revealed-cards strong{display:block;text-align:center}#ack-reveal{position:sticky;bottom:0;display:block;margin:20px auto 0;background:#e2bd68;color:#17130e} .player-resources .xp-resource{color:#ffe2a0;font-weight:700}.player-resources .xp-resource b{border-color:#bd974f;background:#302411} /* Bottom-right action dock; preserve the board's full viewport height. */ #action-dock{display:none} body.immersive #action-dock{display:flex;flex-direction:column;gap:6px;position:fixed;right:52px;bottom:34px;width:min(350px,32vw);max-height:58dvh;overflow:auto;z-index:20;scrollbar-width:thin} body.immersive #action-dock #match-info,body.immersive #action-dock .decision-panel,body.immersive #action-dock #move-tray{position:relative;inset:auto;transform:none;width:100%;max-width:100%;height:auto;min-height:0;margin:0;box-sizing:border-box;flex-shrink:0} body.immersive #action-dock #match-info{max-height:20dvh} body.immersive #action-dock .decision-panel,body.immersive #action-dock #move-tray{max-height:36dvh;overflow:auto;border:1px solid #ac8b4d;border-radius:10px;padding:12px;background:#19150ff5} body.immersive #action-dock .decision-panel h2,body.immersive #action-dock #tray-title{font-size:16px;margin:4px 0 8px} body.immersive #action-dock .decision-panel .eyebrow{display:none} body.immersive #action-dock #visual-choices{gap:6px} body.immersive #mat-surface{width:calc(100% - 88px)} body.immersive .left-score{left:-42px}body.immersive .right-score{right:-42px}body.immersive .edge-score{width:36px} body.immersive #hand-layer{right:min(370px,34vw)} @media(max-width:800px){body.immersive #mat-surface{width:calc(100% - 52px)}body.immersive .left-score{left:-26px}body.immersive .right-score{right:-26px}body.immersive .edge-score{width:24px}body.immersive #action-dock{right:29px;bottom:30px;width:min(290px,60vw);max-height:48dvh}body.immersive #hand-layer{right:0}body.immersive #action-dock #match-info{max-height:14dvh}} /* Keep card areas scrollable without drawing scrollbars over the artwork. */ #game :is(.card,.mat-card,.mat-zone,.command-zone>div,.mat-cards,.rune-row,.field-army,.hidden-slots,#hand), #action-dock :is(.visual-choice,.target-choice,.target-group>div,#visual-choices){scrollbar-width:none;-ms-overflow-style:none} #game :is(.card,.mat-card,.mat-zone,.command-zone>div,.mat-cards,.rune-row,.field-army,.hidden-slots,#hand)::-webkit-scrollbar, #action-dock :is(.visual-choice,.target-choice,.target-group>div,#visual-choices)::-webkit-scrollbar{display:none;width:0;height:0} /* Current Might on the card; detailed state belongs to its inspection preview. */ .mat-card{position:relative} .might-badge{position:absolute;right:2px;bottom:2px;z-index:2;display:grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border:1px solid #ffe4a4;border-radius:7px;background:#171109f2;color:#ffe4a4;font-size:17px;font-weight:800;line-height:1;box-shadow:0 2px 5px #000b;pointer-events:none} #battleboard .mat-card .might-badge{top:2px;left:auto;right:2px;bottom:auto;transform:none} #battleboard .mat-card.exhausted .might-badge{top:auto;bottom:2px} #hand-hover-preview.with-status img{max-height:48vh} .preview-status{padding:10px;background:#19140f;color:#f4dfb2;font-size:12px;line-height:1.4} .preview-status strong{display:block;margin-bottom:7px}.preview-status>div{display:flex;flex-wrap:wrap;gap:5px}.preview-status span{padding:3px 7px;background:#352919;border:1px solid #816638;border-radius:5px} @media(max-width:800px){.might-badge{min-width:18px;height:18px;font-size:13px}.preview-status{font-size:11px;padding:7px}} /* Chain and activity stay above the right edge; choices remain in the lower dock. */ body:not(.immersive) #match-info{display:none} body.immersive #match-info{position:fixed;top:55px;right:52px;bottom:auto;width:min(290px,32vw);max-height:40dvh;z-index:16} @media(max-width:800px){body.immersive #match-info{right:29px;width:min(220px,60vw);max-height:28dvh}} /* Battlefield cards rest across the upper border, leaving the combat lanes clear. */ body.immersive .battlefield-band{--edge-field-width:clamp(145px,20vh,220px);--edge-field-height:calc(var(--edge-field-width)*.716);padding-top:calc(var(--edge-field-height)*.25 + 4px)!important;overflow:visible} body.immersive .shared-field{overflow:visible;grid-template-rows:calc(var(--edge-field-height)*.75 + 18px) minmax(0,1fr) minmax(0,1fr);gap:5px} body.immersive .field-center{position:absolute;grid-area:auto;top:0;left:50%;transform:translate(-50%,-25%);width:var(--edge-field-width);height:var(--edge-field-height);z-index:4;margin:0;pointer-events:none} body.immersive .field-center .field-card{width:100%;height:100%;max-width:none;flex:none;pointer-events:auto;border-radius:7px;filter:drop-shadow(0 6px 7px #000b);background:#0b0907} body.immersive .field-center .field-card img{width:100%;height:100%;object-fit:contain;border-radius:6px} body.immersive .field-center>span{display:none} body.immersive .field-title{grid-row:1;align-self:end;justify-content:center;text-align:center} body.immersive .field-army.enemy-army{grid-row:2} body.immersive .field-army:not(.enemy-army){grid-row:3} body.immersive .field-army{position:relative;z-index:1} body.immersive .opponent-hidden{top:calc(var(--edge-field-height)*.75 + 22px)} @media(max-width:800px){body.immersive .battlefield-band{--edge-field-width:100px}body.immersive .field-title{font-size:8px}} #trash-cards .trash-art{padding:0;background:transparent;width:100%;display:block}#trash-cards .trash-playable{border:2px solid #ebce87;border-radius:9px;padding:6px;box-shadow:0 0 14px #dfb85655}#trash-cards article>button.primary{display:block;width:100%;margin-top:8px}#trash-cards article>small{display:block;text-align:center;color:#bdad8b;margin-top:8px} /* Battlefield setup is a central choice; other actions stay in the corner dock. */ body.immersive #action-dock #move-tray:is(.art-only,.mulligan-choice){position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(750px,94vw);max-width:94vw;max-height:80dvh;z-index:24;padding:18px} /* Size battlefield units to the actual lane, including the corner Might badge. */ body.immersive #mat-surface #battleboard{grid-template-rows:30px minmax(0,1fr) minmax(0,2.4fr) minmax(0,1fr) 98px} body.immersive .field-army,body.immersive .field-army.enemy-army{container-type:size;align-items:center;padding:5px 8px;overflow-x:auto;overflow-y:hidden} body.immersive .field-army .mat-card{width:min(var(--table-card),calc((100cqh - 10px)*.716));max-width:none;flex:0 0 min(var(--table-card),calc((100cqh - 10px)*.716));height:calc(100cqh - 10px);min-height:0;max-height:100%;padding:0;margin:0 3px;overflow:visible;align-self:center} body.immersive .field-army .mat-card img{width:100%;height:100%;max-height:100%;object-fit:contain} body.immersive .field-army .mat-card.exhausted{width:min(calc(var(--table-card)*1.397),calc(100cqh*1.397 - 14px));flex-basis:min(calc(var(--table-card)*1.397),calc(100cqh*1.397 - 14px))} body.immersive .field-army .mat-card.exhausted img,body.immersive .field-army .mat-card.exhausted:hover img{position:absolute;left:50%;top:50%;width:71.6%;height:139.7%;max-height:none;transform:translate(-50%,-50%) rotate(90deg);object-fit:contain} body.immersive .field-army .might-badge{right:2px;bottom:2px;min-width:22px;height:22px;font-size:16px;z-index:5} @media(max-width:800px){body.immersive #mat-surface #battleboard{grid-template-rows:24px minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr) 88px}body.immersive .field-army .might-badge{min-width:18px;height:18px;font-size:13px}} /* Each battlefield has two player sides, from the viewing player's perspective. */ body.immersive .shared-field{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:calc(var(--edge-field-height)*.75 + 18px) minmax(0,1fr)} body.immersive .field-title{grid-column:1 / -1} body.immersive .field-army:not(.enemy-army){grid-column:1;grid-row:2} body.immersive .field-army.enemy-army{grid-column:2;grid-row:2;border-left:1px solid #ac8b4d55} body.immersive .field-army,body.immersive .field-army.enemy-army{margin:0;min-width:0;gap:8px;padding:20px 8px 6px;justify-content:flex-start;align-items:center} body.immersive .field-army::before{content:'YOU';position:absolute;top:3px;left:8px;font-size:8px;letter-spacing:1px;color:#cbb785;pointer-events:none} body.immersive .field-army.enemy-army::before{content:'OPPONENT'} body.immersive .field-army .mat-card{--lane-card:min(var(--table-card),calc((100cqh - 12px)*.716),calc((100cqw - 16px)/1.397));width:var(--lane-card);flex:0 0 var(--lane-card);height:calc(var(--lane-card)*1.397);margin:0;max-height:none} body.immersive .field-army .mat-card.exhausted{width:calc(var(--lane-card)*1.397);flex-basis:calc(var(--lane-card)*1.397);height:var(--lane-card)} body.immersive .own-hidden{left:5px;right:auto;bottom:4px;top:auto} body.immersive .opponent-hidden{right:5px;left:auto;bottom:4px;top:auto} body.immersive .shared-field:has(.hidden-slots:not(:empty)) .field-army{padding-bottom:52px} @media(max-width:800px){body.immersive .field-army,body.immersive .field-army.enemy-army{padding-left:3px;padding-right:3px;gap:5px}body.immersive .field-army::before{font-size:6px;left:3px}} #chain-builder{width:min(1000px,96vw);max-height:90dvh;overflow:auto;background:#17130f;color:#f1dcaf;border:1px solid #c19a52;border-radius:12px}#chain-builder::backdrop{background:#000b}.builder-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.builder-tabs{display:flex;gap:8px}.builder-tabs .selected{background:#d8b366;color:#16110a}#chain-builder p{color:#cebd9a}#builder-collection{display:flex;gap:10px;overflow:auto;padding:6px}.builder-card{flex:0 0 110px;width:110px;padding:4px;background:#292116;color:#f0d6a0;cursor:grab}.builder-card img{width:100%;height:145px;object-fit:contain;pointer-events:none}.builder-card span,.builder-card small{display:block;font-size:11px}#builder-queue{min-height:100px;border:2px dashed #b58e45;border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px}.builder-entry{padding:9px;background:#302619;border:1px solid #806332;border-radius:6px;cursor:grab}.builder-entry select{display:block;width:100%;margin:6px 0}.builder-entry button{padding:5px 9px;margin-right:5px}#submit-builder{margin-top:12px}#builder-location-label{display:block;margin-top:12px}#builder-location{max-width:100%} #builder-location-label[hidden]{display:none} .builder-entry-card{display:flex;align-items:center;gap:12px}.builder-entry-card img{width:55px;height:77px;object-fit:contain;pointer-events:none}.builder-entry-card{cursor:grab} body.immersive #action-dock #move-tray.brush-choice{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(650px,94vw);max-width:94vw;max-height:80dvh;z-index:24;padding:22px;box-shadow:0 20px 90px #000} #move-tray.brush-choice .visual-choice{flex:1;min-height:65px;font-size:15px;border:1px solid #bd984f} #move-tray.brush-choice .visual-choice:first-child{background:#725421;color:#fff0c2} /* Totals use current unit Might; cards retain the battlefield's printed name. */ body.immersive .field-army::before{display:none} .lane-total{position:absolute;top:3px;left:8px;right:4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:9px;line-height:12px;color:#d9bc7d;pointer-events:none} .lane-total span{font-size:11px;color:#efe0b8}.lane-total b{color:#ffe3a0} .board-unit-total{color:#ecd59b} body.immersive .player-resources{flex-wrap:wrap} @media(max-width:800px){.lane-total{left:3px;gap:3px;font-size:7px}.lane-total span{font-size:8px}body.immersive .field-army,body.immersive .field-army.enemy-army{padding-top:30px}body.immersive .board-unit-total{font-size:8px}} #action-story{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);width:min(550px,85vw);max-height:32dvh;overflow:auto;z-index:30;padding:14px 18px;border:1px solid #cda658;border-radius:10px;background:#17120af5;color:#f6dfae;box-shadow:0 10px 40px #000b;pointer-events:auto} #action-story[hidden]{display:none}#action-story strong{font-size:16px}#action-story p{margin:5px 0;font-size:12px}#action-story small{color:#ad986e}.action-card-flight{position:fixed;z-index:29;pointer-events:none;object-fit:contain;border-radius:7px;filter:drop-shadow(0 0 12px #edc96d)} @media(prefers-reduced-motion:reduce){.action-card-flight{display:none}} .card-vfx{position:fixed;z-index:28;pointer-events:none;transform:translate(-50%,-50%);object-fit:contain;mix-blend-mode:screen;opacity:.75} .lightning-burst{position:fixed;z-index:28;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:screen;filter:drop-shadow(0 0 13px #32b9ff) drop-shadow(0 0 32px #7b59ff);animation:lightning-flash 1.05s ease-out both} .lightning-burst::before{content:'';position:absolute;inset:39%;border:3px solid #e9ffff;border-radius:50%;box-shadow:0 0 20px 8px #5dccff,0 0 50px 15px #6958ff;animation:lightning-core .55s ease-out both} .lightning-bolt{position:absolute;top:50%;left:calc(50% - 10px);width:20px;height:48%;transform-origin:50% 0;transform:rotate(var(--bolt-rotation));background:#d8ffff;clip-path:polygon(42% 0,100% 7%,58% 26%,92% 35%,47% 51%,100% 66%,52% 78%,69% 100%,0 82%,30% 65%,0 49%,35% 33%,7% 19%);box-shadow:0 0 9px 4px #eaffff,0 0 20px 7px #43bfff;animation:lightning-bolt .48s steps(2,end) var(--bolt-delay) both} @keyframes lightning-flash{0%{opacity:0;scale:.56}8%{opacity:1;scale:1.05}68%{opacity:.9;scale:1}100%{opacity:0;scale:1.08}} @keyframes lightning-core{0%{opacity:0;scale:.2}22%{opacity:1;scale:1.2}100%{opacity:0;scale:1.55}} @keyframes lightning-bolt{0%{opacity:0;scaleY(.1)}32%{opacity:1;scaleY(1)}70%{opacity:.85;scaleY(.94)}100%{opacity:0;scaleY(.82)}} .mat-card.barrier-active{z-index:2;filter:drop-shadow(0 0 7px #f2c85acc);animation:barrier-breathe 1.8s ease-in-out infinite} .mat-card.barrier-active::before{content:'';position:absolute;z-index:1;inset:-6px -5px;border:2px solid #f5d373;border-radius:7px;clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%);background:#f0b92816;box-shadow:inset 0 0 10px #ffd76b77,0 0 13px #e4ad3e99;pointer-events:none;animation:barrier-surface 1.8s ease-in-out infinite} .barrier-marker{position:absolute;z-index:2;right:-5px;top:-6px;min-width:19px;height:19px;padding:0 3px;display:grid;place-items:center;border:1px solid #fff0a3;background:#6a4817;color:#fff9de;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);font-size:10px;font-weight:bold;box-shadow:0 0 9px #eec55d} .barrier-form{position:fixed;z-index:30;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:screen;filter:drop-shadow(0 0 12px #ffe28a) drop-shadow(0 0 22px #cf8f24);animation:barrier-form-fade .7s ease-out both}.barrier-form svg{display:block;width:100%;height:100%;overflow:visible}.barrier-form :is(.ward-outer,.ward-inner,.ward-core){fill:#f5bd3b22;stroke:#fff2aa;stroke-width:2.5;vector-effect:non-scaling-stroke}.barrier-form .ward-outer{stroke-width:3.5;stroke-dasharray:9 5;animation:ward-draw .58s ease-out both}.barrier-form .ward-inner{stroke:#f3be4f;stroke-width:2;animation:ward-pulse .52s ease-out both}.barrier-form .ward-core{fill:#fff4bb88;stroke:#fffce4;animation:barrier-form-core .4s ease-out both}.barrier-form .ward-nodes circle{fill:#fff6c6;stroke:#d08d25;stroke-width:1.5;vector-effect:non-scaling-stroke;animation:ward-node .54s ease-out both} .barrier-shatter{position:fixed;z-index:30;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:screen;filter:drop-shadow(0 0 10px #ffe394) drop-shadow(0 0 19px #d8912d);animation:barrier-break .58s ease-out both}.barrier-shatter::before{content:'';position:absolute;inset:39%;border:3px solid #fff5c2;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);box-shadow:0 0 20px 7px #f4c250;animation:barrier-core .3s ease-out both}.barrier-shatter i{position:absolute;left:calc(50% - 4px);top:50%;width:8px;height:42%;transform-origin:50% 0;transform:rotate(var(--shard-rotation));background:#fff3bd;clip-path:polygon(50% 0,100% 55%,58% 100%,0 68%);box-shadow:0 0 8px 3px #e8b64e;animation:barrier-shard .46s ease-out both} @keyframes barrier-breathe{50%{filter:drop-shadow(0 0 11px #ffe899)}}@keyframes barrier-surface{50%{opacity:.82;transform:scale(1.025)}}@keyframes barrier-form-fade{0%{opacity:0;scale:.45}14%{opacity:1;scale:1.04}70%{opacity:.78;scale:1}100%{opacity:0;scale:1.08}}@keyframes barrier-form-core{0%{opacity:0;scale:.2}30%{opacity:1;scale:1.18}100%{opacity:0;scale:1.48}}@keyframes ward-draw{0%{opacity:0;stroke-dashoffset:60;scale:.55}35%{opacity:1;stroke-dashoffset:0;scale:1}100%{opacity:.7;scale:1.08}}@keyframes ward-pulse{0%{opacity:0;scale:.35}38%{opacity:1;scale:1}100%{opacity:.35;scale:1.18}}@keyframes ward-node{0%,18%{opacity:0;scale:.1}42%{opacity:1;scale:1.35}100%{opacity:.4;scale:1}}@keyframes barrier-break{0%{opacity:1;scale:.62}100%{opacity:0;scale:1.15}}@keyframes barrier-core{0%{opacity:1;scale:.42}100%{opacity:0;scale:1.36}}@keyframes barrier-shard{0%{opacity:0;scaleY(.15)}25%{opacity:1;scaleY(1)}100%{opacity:0;scaleY(1.18)}} .mat-card.card-selection-aura{position:relative;z-index:3;outline:2px solid #9e8cff;outline-offset:2px;filter:drop-shadow(0 0 7px #9e8cffbb) drop-shadow(0 0 16px #4ed7ffaa);animation:card-selection-breath 1.5s ease-in-out infinite} .mat-card.card-selection-aura::after{content:'';position:absolute;inset:-8px;border:1px solid #c1b6ffcc;border-radius:10px;box-shadow:0 0 14px #8e7dff88,inset 0 0 10px #55d9ff44;pointer-events:none;animation:card-selection-ring 1.5s ease-in-out infinite} @keyframes card-selection-breath{50%{filter:drop-shadow(0 0 12px #b0a4ffff) drop-shadow(0 0 24px #47d8ffff)}} @keyframes card-selection-ring{0%{opacity:.42;transform:scale(.94)}50%{opacity:1;transform:scale(1.05)}100%{opacity:.42;transform:scale(.94)}} @media(prefers-reduced-motion:reduce){.card-vfx,.lightning-burst{display:none}} @media(prefers-reduced-motion:reduce){.mat-card.card-selection-aura,.mat-card.card-selection-aura::after{animation:none}} .mat-card.barrier-active::before{inset:1px;border:3px solid #ffe49a;border-radius:22% 22% 28% 28%;clip-path:none;background:transparent;box-shadow:inset 0 0 12px #ffd76b99,0 0 9px #e4ad3e88;animation:barrier-rest 2s ease-in-out infinite} @keyframes barrier-rest{50%{border-color:#fff3c4;box-shadow:inset 0 0 16px #ffd76bbb,0 0 12px #e4ad3eaa}} @media(prefers-reduced-motion:reduce){.mat-card.barrier-active,.mat-card.barrier-active::before{animation:none}} .mat-card.barrier-active::before{display:none} .barrier-shell{position:absolute;inset:-3px;z-index:1;pointer-events:none;filter:drop-shadow(0 0 4px #ffdd70) drop-shadow(0 0 8px #dba130);animation:barrier-shell-pulse 2.6s ease-in-out infinite} .barrier-shell svg{width:100%;height:100%;overflow:visible;display:block} .barrier-glass{fill:#ffd66b16;stroke:#eeb342;stroke-width:7;stroke-opacity:.45} .barrier-rim{fill:none;stroke:#ffe798;stroke-width:2.3} .barrier-current{fill:none;stroke:#fffbe0;stroke-width:3;stroke-linecap:round;stroke-dasharray:12 95 3 72;animation:barrier-flow 4s linear infinite} @keyframes barrier-shell-pulse{0%,100%{opacity:.85;filter:drop-shadow(0 0 4px #ffdd70) drop-shadow(0 0 8px #dba130)}50%{opacity:1;filter:drop-shadow(0 0 6px #ffe998) drop-shadow(0 0 12px #eab342)}} @keyframes barrier-flow{to{stroke-dashoffset:-364}} @media(prefers-reduced-motion:reduce){.barrier-shell,.barrier-current{animation:none}} #inspect-errata{max-width:580px;padding:12px;background:#231c10;border:1px solid #99783b;border-radius:8px;color:#f0ddb6}#inspect-errata[hidden]{display:none}#inspect-errata p{white-space:pre-wrap;line-height:1.5;margin:8px 0 0;font-size:14px}#card-inspector.has-errata #inspect-image{max-height:55dvh}.errata-hint{padding:8px;font-size:12px;color:#ffe1a0;background:#22190f} #builder-destinations{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px} #chain-builder .builder-destination{min-width:0;padding:8px;background:#18140e;border:2px solid #615035;border-radius:9px;color:#d5c29a;text-align:center} #chain-builder .builder-destination:disabled{opacity:1;cursor:default;border-color:#514837;color:#9f947f} .builder-destination img,.builder-base-art{display:block;width:100%;height:140px;object-fit:contain;margin-bottom:8px;border-radius:6px} .builder-base-art{display:grid;place-items:center;font-size:64px;background:radial-gradient(ellipse,#564122,#17120c);color:#d4af67} .builder-destination strong,.builder-destination small{display:block}.builder-destination small{margin-top:6px;font-size:11px} #chain-builder .builder-destination.legal-destination{border-color:#d0ad62;box-shadow:0 0 12px #d0ad6225;cursor:pointer} #chain-builder .builder-destination[aria-pressed=true]{border-color:#f7df98;background:#47351a;box-shadow:0 0 18px #e7c36970} #chain-builder .builder-destination:focus-visible{outline:3px solid #fff1c1;outline-offset:2px} body.immersive .custom-panel-position{position:fixed!important;left:var(--panel-left,8px)!important;top:var(--panel-top,8px)!important;right:auto!important;bottom:auto!important;transform:none!important;margin:0!important;max-width:calc(100vw - 16px)!important} body.immersive #game-hud.custom-panel-position{width:max-content;z-index:20} #hud-layout-space{pointer-events:none;min-height:0}#hud-layout-space[hidden]{display:none} #game-hud .panel-drag-handle,#match-info .panel-drag-handle{touch-action:none;user-select:none;cursor:grab;padding:3px 8px;background:#282010;color:#dabc78;border:1px solid #8d6e37;line-height:20px;font-size:20px;flex:0 0 auto} #match-info>.panel-drag-handle{float:right;margin:0 0 3px 6px} .panel-moving{z-index:40!important;box-shadow:0 0 20px #dbb96d66!important}.panel-moving .panel-drag-handle{cursor:grabbing!important} .panel-drag-handle:focus-visible{outline:2px solid #ffe3a0;outline-offset:2px} /* Timeline occupies the bottom edge without adding page scroll. */ #replay-bar{display:none;position:fixed;bottom:5px;left:50%;transform:translateX(-50%);z-index:35;width:min(940px,calc(100vw - 24px));align-items:center;gap:8px;padding:6px 10px;background:rgba(18,16,10,.96);border:1px solid #a78b45;border-radius:10px;box-shadow:0 3px 18px #000;color:#edd593;font-size:12px} body.immersive #replay-bar{display:flex} #replay-bar button{padding:5px 10px;min-height:30px} #replay-range{flex:1;min-width:60px;accent-color:#dabb66;cursor:ew-resize} #replay-label{min-width:38px;max-width:260px} #replay-bar label{display:flex;align-items:center;gap:5px;white-space:nowrap} #replay-speed{padding:4px;width:66px} #replay-live.active{background:#dabb66;color:#171309} #replay-log{display:none;position:fixed;left:16px;bottom:84px;z-index:35;box-sizing:border-box;width:min(360px,calc(100vw - 32px));height:min(440px,55dvh);flex-direction:column;overflow:hidden;background:#171613;border:1px solid #6e6040;border-radius:14px;box-shadow:0 12px 36px #0008;color:#eee9dd} body.immersive.replaying #replay-log:not([hidden]){display:flex} .replay-log-header{flex:none;display:flex;flex-direction:column;gap:6px;padding:18px 20px 16px;border-bottom:1px solid #ffffff14;background:#201e18} .replay-log-eyebrow{color:#d8bc77;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase} #replay-log-title{color:#fff4da;font-size:18px;font-weight:650;line-height:1.3} .replay-log-hint{color:#aaa596;font-size:11px} #replay-log-entries{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#746442 #171613;scrollbar-gutter:stable;margin:0;padding:10px 12px;list-style:none;line-height:1.55;overflow-wrap:anywhere} #replay-log-entries li{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:7px;font-size:13px} #replay-log-entries li+li{margin-top:3px;border-top:1px solid #ffffff0d} #replay-log-entries li:first-child:not(.replay-log-empty){background:#d8bc7710;box-shadow:inset 2px 0 #d8bc77} .replay-log-turn{color:#c6ad73;font-size:10px;font-weight:650;letter-spacing:.4px} .replay-log-message{white-space:pre-wrap} #replay-log-entries:focus-visible{outline:2px solid #d8bc77;outline-offset:-3px} #replay-log-entries .replay-log-empty{color:#aaa596} @media(max-width:650px){#replay-log{left:12px;bottom:84px;width:min(320px,calc(100vw - 24px));height:min(360px,45dvh)}.replay-log-header{padding:12px 16px}#replay-log-title{font-size:16px}#replay-log-entries li{padding:9px 10px}} body.replaying #action-dock,body.replaying #build-chain,body.replaying #quick-pass,body.replaying #action-story{display:none!important} body.replaying #game .playable{box-shadow:none!important} body.immersive #hand-layer{bottom:50px} @media(max-width:650px){#replay-bar{gap:4px;font-size:10px}#replay-label{max-width:115px}#replay-bar button{padding:4px 6px}} /* Keep both complete point tracks beside, and within the height of, the fields. */ body.immersive .battlefield-row>.edge-score{top:0;bottom:0;transform:none;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);justify-items:center;gap:4px;z-index:4} body.immersive .battlefield-row>.edge-score>small{font-size:9px;line-height:1.2;text-align:center;letter-spacing:.5px} body.immersive .battlefield-row>.edge-score .score-track{height:100%;min-height:0;width:100%;display:grid;grid-template-rows:repeat(9,minmax(0,1fr));justify-items:center;align-items:center;gap:2px} body.immersive .battlefield-row>.edge-score .score-track span{height:100%;max-height:34px;width:auto;max-width:100%;aspect-ratio:1;min-height:0;font-size:clamp(10px,1.6vh,17px);line-height:1;border-width:1px} body.immersive .battlefield-row>.edge-score .score-track{grid-template-columns:minmax(0,1fr);min-width:0} @media(max-width:800px){body.immersive .battlefield-row>.edge-score .score-track span{max-height:24px;max-width:24px}} /* Compact toolbar, optional activity, and base-mounted chain workspace. */ body.immersive #match-info{display:none!important} body.immersive.show-match-info #match-info{display:block!important} #game-hud>.panel-drag-handle{display:none} #hud-more{position:relative;color:#e9d49b} #hud-more>summary{cursor:pointer;padding:8px 14px;list-style:none;font-weight:650} #hud-more-items{position:absolute;right:0;top:100%;width:210px;display:grid;gap:5px;padding:10px;background:#17130ff5;border:1px solid #a88b4d;border-radius:10px;box-shadow:0 8px 25px #000b;z-index:45} #hud-more:not([open])>#hud-more-items{display:none} #hud-more-items #turn-status{font-size:11px;white-space:normal} body.immersive .base-zone{position:relative} body.immersive #build-chain{position:absolute;top:4px;right:6px;z-index:7;padding:5px 10px;background:#302719;color:#f3d58c;border:1px solid #aa8748;font-size:11px} body.immersive #chain-builder{position:absolute;inset:34px 4px 4px;margin:0;width:auto;max-width:none;max-height:none;padding:8px;background:#15120bf5;border:1px solid #b39352;border-radius:8px;z-index:8;overflow:auto;color:#efd59b} #chain-builder[hidden]{display:none!important} #chain-builder .builder-heading h2,#chain-builder>h3,#chain-builder #builder-location-label,#chain-builder #builder-collection{display:none} #chain-builder .builder-heading{float:right}#chain-builder .builder-heading button{padding:3px 7px} #chain-builder .builder-tabs button{padding:4px 8px;font-size:11px} #chain-builder #builder-help,#chain-builder #builder-message{font-size:11px;margin:4px 0} #chain-builder #builder-queue{display:flex;gap:6px;min-height:75px;overflow:auto;padding:5px} #chain-builder #builder-queue:empty::before{content:'Drag highlighted cards here';align-self:center;color:#d1ba87} #chain-builder .builder-entry{flex:0 0 145px;padding:5px;display:block} #chain-builder .builder-entry-card img{height:64px;width:46px;object-fit:contain} #chain-builder .builder-entry-card b{font-size:10px} #chain-builder .builder-entry button,#chain-builder select{font-size:10px;padding:3px} #chain-builder #submit-builder,#drag-built-group{font-size:11px;padding:5px 8px} #chain-builder #drag-built-group{touch-action:none;cursor:grab;background:#18433d;color:#b9ffdf} #drag-built-group.dragging-group{outline:2px solid #6de6c3;cursor:grabbing} body.immersive .chain-unit-ready{outline:2px solid #53d5ba!important;box-shadow:0 0 9px #53d5ba55!important} body.immersive .chain-spell-ready{outline:2px solid #bd8eff!important;box-shadow:0 0 9px #bd8eff55!important} body.immersive .base-zone:has(#chain-builder:not([hidden]))>.mat-cards{width:48%;justify-content:flex-start} body.immersive .base-zone #chain-builder{left:49%} body.immersive #chain-builder .builder-entry{flex-basis:112px} body.immersive #chain-builder #builder-help{max-height:30px;overflow:auto} /* Reveal replay/speed controls from a small bottom-edge handle. */ body.immersive #replay-bar{bottom:0;transform:translate(-50%,calc(100% - 12px));transition:transform .2s ease;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-top:16px} body.immersive #replay-bar::before{content:'';position:absolute;top:4px;left:calc(50% - 28px);width:56px;height:3px;background:#c4a65e;border-radius:3px;pointer-events:none} body.immersive #replay-bar:hover,body.immersive #replay-bar:focus-within{transform:translate(-50%,0)} body.immersive.replaying #replay-bar{transform:translate(-50%,0)} @media(prefers-reduced-motion:reduce){body.immersive #replay-bar{transition:none}} /* Compact, draggable updates; the latest summary stays available on hover. */ body.immersive #action-story{left:8px;top:38%;right:auto;bottom:auto;transform:none;width:min(360px,calc(100vw - 16px));max-height:40dvh;padding:7px 10px;overflow:auto;font-size:12px} #action-story .story-tab{font-size:12px;font-weight:650;color:#e4c680;margin:0 8px} /* Tutorial action explanations are already shown in the blue coaching panel. */ body:has(#battleboard .turn-guide.with-coach) #action-story{display:none!important} #action-story .panel-drag-handle,#pin-updates{padding:3px 7px;font-size:11px;display:inline-block} #action-story #pin-updates{float:right} #action-story #story-content{display:none;clear:both;padding-top:4px} #action-story:is(:hover,:focus-within,.pinned,.panel-moving) #story-content{display:block} #action-story:not(:hover):not(:focus-within):not(.pinned):not(.panel-moving):not(.announcing-spell){width:150px} #action-story #story-content p{font-size:12px;line-height:1.35;margin:4px 0;overflow-wrap:anywhere;color:#e4d7bb} #move-tray>.panel-drag-handle{display:block;touch-action:none;cursor:grab;padding:3px 10px;margin-bottom:4px} /* Draft cards sit directly on the table as an overlapping hand. */ body.immersive .base-zone:has(#chain-builder:not([hidden]))>.mat-cards{width:100%} body.immersive .base-zone #chain-builder{inset:auto 8px 2px auto;width:min(58%,520px);max-height:none;overflow:visible;padding:0;background:none;border:0;box-shadow:none;pointer-events:none} body.immersive #chain-builder .builder-heading,body.immersive #chain-builder .builder-tabs,body.immersive #chain-builder #builder-help{display:none} body.immersive #chain-builder #builder-queue{pointer-events:auto;display:flex;align-items:flex-end;justify-content:center;min-height:70px;padding:8px 12px 3px;overflow:visible;border:0;background:none;gap:0} body.immersive #chain-builder #builder-queue>p{margin:0;padding:12px 18px;border:1px dashed #ad945677;border-radius:40px;color:#c9b780;font-size:11px;background:#17130b44} body.immersive #chain-builder .builder-entry{position:relative;display:block;flex:0 0 82px;width:82px;padding:0;margin:0 0 0 -26px;border:0;border-radius:6px;background:none;transform:rotate(var(--draft-angle));transform-origin:50% 100%;transition:transform .15s;box-shadow:0 3px 10px #0009;cursor:grab} body.immersive #chain-builder .builder-entry:first-child{margin-left:0} body.immersive #chain-builder .builder-entry:is(:hover,:focus-within){z-index:15;transform:translateY(-30px) scale(1.65);outline:1px solid #e5c879} body.immersive #chain-builder .builder-entry-card{display:block;padding:0} body.immersive #chain-builder .builder-entry-card img{display:block;width:100%;height:auto;aspect-ratio:744/1039;object-fit:contain;border-radius:5px} body.immersive #chain-builder .builder-entry-card b{display:none} body.immersive #chain-builder .builder-entry>div:last-of-type,body.immersive #chain-builder .builder-entry>select{display:none;position:absolute;bottom:0;left:0;right:0;background:#17130ff5;max-width:100%;font-size:8px} body.immersive #chain-builder .builder-entry:is(:hover,:focus-within)>div:last-of-type{display:flex;flex-wrap:wrap} body.immersive #chain-builder .builder-entry>select{display:block;bottom:22px;width:100%;font-size:8px} body.immersive #chain-builder #builder-message{pointer-events:auto;margin:2px 0;text-align:center;font-size:10px;background:#17130bcc;border-radius:5px} body.immersive #chain-builder #builder-message:empty{display:none} body.immersive #chain-builder #submit-builder,body.immersive #chain-builder #drag-built-group{pointer-events:auto;display:block;margin:3px auto;padding:4px 12px;border-radius:20px} body.immersive #chain-builder #submit-builder[hidden],body.immersive #chain-builder #drag-built-group[hidden]{display:none} @media(max-width:800px){body.immersive #chain-builder .builder-entry{flex-basis:52px;width:52px;margin-left:-22px}} /* Utility menu opens upward from the bottom-left corner. */ body>#hud-more{display:none;position:fixed;left:12px;bottom:16px;z-index:42;color:#eed7a1} body.immersive>#hud-more{display:block} body>#hud-more>summary{padding:10px 18px;border:1px solid #9c8046;border-radius:10px;background:#1b170ff5;box-shadow:0 4px 18px #0008;font-size:13px} body>#hud-more[open]>summary{background:#362b18;border-color:#d1ad60} body>#hud-more #hud-more-items{left:0;right:auto;top:auto;bottom:calc(100% + 8px);width:min(260px,calc(100vw - 24px));max-height:calc(100dvh - 90px);overflow:auto;gap:3px;padding:10px;background:#17140ffb;border:1px solid #907542;border-radius:12px} #hud-more-items .more-heading{padding:5px 10px 9px;color:#a9956a;font-size:10px;text-transform:uppercase;letter-spacing:1.4px;border-bottom:1px solid #a68a4533;margin-bottom:4px} #hud-more-items>button,#hud-more-items #music-controls>summary{display:block;width:100%;text-align:left;padding:10px 12px;margin:0;border:0;border-radius:7px;background:transparent;color:#ead7ad;font-size:13px;font-weight:500;line-height:1.4} #hud-more-items>button:hover,#hud-more-items #music-controls>summary:hover{background:#b3914222} #hud-more-items>button:disabled{cursor:default;opacity:.45} #hud-more-items #music-controls{border:0;padding:0;background:transparent} #hud-more-items #music-controls .music-popover{position:static;width:100%;min-width:0;box-shadow:none;margin:4px 0;padding:10px;background:#0e0c09;border:1px solid #94733c44;border-radius:8px} #hud-more-items #build-chain{display:none!important} body.immersive #game-hud:not(:has(#quick-pass:not([hidden]))){visibility:hidden;padding:0;border:0;margin:0;min-height:0} /* Compact two-by-four point tracks, both beside the left battlefield. */ body.immersive .battlefield-row>.edge-score{width:112px;height:auto;bottom:auto;left:-126px;right:auto;transform:none;grid-template-rows:auto auto;gap:4px} body.immersive .battlefield-row>.left-score{top:calc(50% - 116px)} body.immersive .battlefield-row>.right-score{top:calc(50% + 8px)} body.immersive .battlefield-row>.edge-score .score-track{height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,24px);gap:4px} body.immersive .battlefield-row>.edge-score .score-track span{width:24px;height:24px;max-width:24px;max-height:24px;font-size:13px} body.immersive .battlefield-row>.edge-score .score-track span:first-child{grid-column:1/-1;justify-self:center} body.immersive #mat-surface{width:calc(100% - 164px);margin-left:144px;margin-right:20px} @media(max-width:800px){body.immersive #mat-surface{width:calc(100% - 112px);margin-left:104px;margin-right:8px}body.immersive .battlefield-row>.edge-score{left:-99px;width:88px}body.immersive .battlefield-row>.edge-score .score-track{grid-template-rows:repeat(3,19px);gap:3px}body.immersive .battlefield-row>.edge-score .score-track span{width:19px;height:19px;max-width:19px;max-height:19px;font-size:11px}body.immersive .battlefield-row>.left-score{top:calc(50% - 102px)}} #match-end{width:min(520px,92vw);padding:38px 28px;text-align:center;background:radial-gradient(ellipse at top,#493719,#14110c 70%);color:#efd8a0;border:1px solid #c7a459;border-radius:18px;box-shadow:0 25px 100px #000c} #match-end::backdrop{background:#080704d9;backdrop-filter:blur(7px)} #match-end .end-emblem{font-size:58px;color:#e9c46a}#match-end h2{font-size:46px;margin:12px 0}#match-end p{color:#cbbc9b}#match-end .end-buttons{display:flex;justify-content:center;gap:12px;margin-top:26px}#match-end button{min-width:130px}#match-end #end-rematch{background:#d2ae62;color:#171109}#end-wait{font-size:12px;min-height:18px} /* Point tokens on the felt, alongside each battlefield's title card. */ body.immersive #mat-surface{width:calc(100% - 32px);margin-left:16px;margin-right:16px} body.immersive .shared-field>.edge-score{position:relative;grid-column:1;grid-row:1;align-self:start;justify-self:start;left:auto;right:auto;top:auto;bottom:auto;transform:none;box-sizing:border-box;width:min(100%,clamp(100px,10vw,154px));height:auto;z-index:5;padding:6px 8px;display:grid;grid-template-rows:auto auto;gap:3px;border:1px solid #bd985344;border-radius:13px;background:linear-gradient(145deg,#272014de,#100e0bd9);box-shadow:inset 0 1px 0 #f7d88c15,0 5px 15px #0004} body.immersive .shared-field>.edge-score>small{font-size:10px;line-height:1.2;text-align:center;letter-spacing:1px;color:#e5c780} body.immersive .shared-field>.edge-score .score-track{display:grid;width:100%;height:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;gap:5px;justify-items:center} body.immersive .shared-field>.edge-score .score-track span{display:grid;place-items:center;box-sizing:border-box;width:100%;height:auto;max-width:26px;max-height:none;aspect-ratio:1;border:1px solid #b99750;border-radius:50%;background:radial-gradient(circle at 35% 25%,#302719,#15110c);color:#ddc58e;font-size:clamp(11px,1vw,15px);line-height:1;box-shadow:inset 0 1px 2px #ffe4a01a,0 2px 3px #0005} body.immersive .shared-field>.edge-score .score-track span:first-child{grid-column:1/-1;width:32px;max-width:28%;justify-self:center} body.immersive .shared-field>.edge-score .score-track span.scored{background:radial-gradient(circle at 35% 25%,#fff0b7,#d6aa4c);border-color:#fbe5a6;color:#201609;font-weight:800;box-shadow:0 0 12px #e6bb5966,inset 0 1px 2px #fff5cb} @media(max-width:800px){body.immersive #mat-surface{width:calc(100% - 12px);margin-left:6px;margin-right:6px}body.immersive .shared-field>.edge-score{left:4px;top:4px;width:84px;padding:4px;gap:3px;border-radius:8px}body.immersive .shared-field>.edge-score>small{font-size:8px}body.immersive .shared-field>.edge-score .score-track{gap:3px}body.immersive .shared-field>.edge-score .score-track span{font-size:10px}} /* Large click-only battlefield selection and a scene reveal beneath the cards. */ body.immersive #action-dock #move-tray.art-only{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(1260px,96vw);max-width:96vw;padding:24px;background:#17130ff5;border:1px solid #c8a45a;box-shadow:0 25px 90px #000b} #move-tray.art-only>.panel-drag-handle{display:none} body.immersive #move-tray.art-only #visual-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-height:70dvh;overflow:auto} body.immersive #move-tray.art-only .visual-choice{width:100%;min-width:0;max-width:none;padding:0;background:none;border:1px solid #b79a5555;border-radius:10px;overflow:hidden;cursor:pointer;transform:none!important;transition:border-color .15s} body.immersive #move-tray.art-only .visual-choice:hover{transform:none!important;border-color:#f2d08a;filter:none;box-shadow:0 0 18px #dbb35e33} body.immersive #move-tray.art-only .visual-choice img{width:100%;height:auto;max-height:none;aspect-ratio:1039/744;object-fit:contain;transform:none!important} body.immersive #move-tray.art-only .visual-choice>span{display:none} body.immersive .shared-field .battlefield-scene{position:absolute;inset:0;z-index:0;border-radius:inherit;background-size:cover;background-position:center;pointer-events:none} body.immersive .shared-field:has(.battlefield-scene)>.field-army{position:relative;z-index:1;background:#08070520} body.immersive .shared-field:has(.battlefield-scene) .lane-total{text-shadow:0 1px 4px #000,0 0 8px #000;background:#100c0877;border-radius:4px;padding:3px 6px} .battlefield-landing{position:fixed;z-index:50;pointer-events:none;object-fit:contain;border-radius:7px;filter:drop-shadow(0 12px 18px #000b)} @media(max-width:650px){body.immersive #move-tray.art-only #visual-choices{grid-template-columns:1fr;gap:12px}body.immersive #move-tray.art-only .visual-choice{max-width:380px;margin:auto}} /* Keep the score panel in the header's layout, above both combat lanes. */ body.immersive .shared-field{grid-template-rows:minmax(calc(var(--edge-field-height)*.75 + 18px),max-content) minmax(0,1fr)} body.immersive .shared-field>.edge-score .score-track span:first-child{width:26px} @media(max-width:1100px){ body.immersive .shared-field>.field-center{left:auto;right:4px;transform:translateY(-25%);width:min(var(--edge-field-width),calc(100% - 112px))} } @media(max-width:800px){ body.immersive .shared-field>.edge-score{left:auto;top:auto;margin:0;width:min(84px,100%)} body.immersive .shared-field>.field-center{width:min(var(--edge-field-width),calc(100% - 96px))} } /* Opening hands face each other, with a clear click-to-replace choice. */ body.immersive #action-dock #move-tray.mulligan-choice{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(1120px,96vw);max-width:96vw;max-height:94dvh;padding:20px;overflow:auto;text-align:center;background:radial-gradient(ellipse at 50% 40%,#302516f7,#100e0bf7 75%);border:1px solid #c4a05b;box-shadow:0 0 0 100vmax #050403b8,0 24px 80px #000b;} #move-tray.mulligan-choice>.panel-drag-handle{display:none} #mulligan-opponent:not([hidden]){display:flex;justify-content:center;gap:clamp(6px,1.5vw,20px);margin:0 auto 16px;overflow:hidden} .opening-card-back{flex:0 1 170px;min-width:0;height:clamp(72px,22dvh,220px);max-width:calc(22dvh * .716);border:1px solid #c7a260;border-radius:7px;outline:1px solid #806437;outline-offset:-7px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;background:repeating-linear-gradient(45deg,#17140f,#17140f 4px,#1d1912 5px);box-shadow:0 5px 12px #0008;color:#d7b877} .opening-card-back span{font-size:clamp(24px,4vh,45px)} .opening-card-back b{font-size:clamp(7px,1vw,13px);letter-spacing:2px} #move-tray.mulligan-choice #tray-title{margin:12px 0 18px;padding:10px;border-top:1px solid #bd96544d;border-bottom:1px solid #bd96544d;font-size:clamp(13px,1.5vw,19px);color:#f3d995} #move-tray.mulligan-choice #visual-choices{display:flex;justify-content:center;gap:clamp(6px,1.5vw,20px);padding:5px 3px 12px;overflow:visible} #move-tray.mulligan-choice .visual-choice{flex:0 1 220px;min-width:0;max-width:calc(37dvh * .716);padding:0;border:2px solid #91703d;border-radius:9px;background:#16120e;position:relative;overflow:hidden;transition:border-color .15s,box-shadow .15s} #move-tray.mulligan-choice .visual-choice img{width:100%;height:auto;max-height:37dvh;object-fit:contain;margin:0} #move-tray.mulligan-choice .visual-choice>span{padding:6px;font-size:12px;color:#d7c59f} #move-tray.mulligan-choice .visual-choice.selected{border-color:#ffe3a2;box-shadow:0 0 18px #edbe5466} #move-tray.mulligan-choice .visual-choice.selected>span{background:#dfbb6c;color:#21170c;font-weight:800} #move-tray.mulligan-choice #confirm-visual{display:block;margin:8px auto 0;min-width:180px;padding:12px 24px;background:linear-gradient(#e1c17b,#b89248);border:1px solid #f3d796;color:#21190e;font-weight:800} @media(max-width:600px){body.immersive #action-dock #move-tray.mulligan-choice{padding:12px}#move-tray.mulligan-choice #visual-choices{gap:5px}.opening-card-back b{letter-spacing:0}#move-tray.mulligan-choice .visual-choice>span{font-size:10px;padding:5px 0}} #move-tray.discard-payment #visual-choices{align-items:center;gap:14px} #move-tray.discard-payment .visual-choice.image-choice{flex-basis:175px;padding:6px;border:1px solid #a38549;background:#1d1810} #move-tray.discard-payment .visual-choice.image-choice img{height:220px;max-height:35dvh} #move-tray.discard-payment .visual-choice.image-choice span{padding:8px 3px;line-height:1.4;color:#f0d99f} #move-tray.discard-payment .visual-choice:not(.image-choice){flex:0 0 110px;border:1px solid #7b6a4a;background:#181510;min-height:44px} /* Ordinary action choices stay compact even after being dragged out of the dock. */ body.immersive #action-dock #move-tray:not(.art-only):not(.mulligan-choice){box-sizing:border-box;width:min(var(--action-panel-width,640px),calc(100vw - 24px))!important;height:var(--action-panel-height,auto);min-width:min(300px,calc(100vw - 24px));min-height:160px;max-height:calc(100dvh - 24px);overflow:auto;padding:14px 14px 28px} #move-tray:not(.art-only):not(.mulligan-choice) #visual-choices{flex-wrap:wrap;max-height:48dvh;overflow:auto} #move-tray .action-panel-resize{display:block;position:sticky;bottom:-24px;float:right;margin:0 -10px -24px 0;padding:4px 8px;cursor:nwse-resize;touch-action:none;background:#302718;color:#e2c27e;font-size:18px} #move-tray .action-panel-compact{position:absolute;right:14px;top:12px;padding:4px 8px;font-size:11px} #move-tray:is(.art-only,.mulligan-choice) :is(.action-panel-resize,.action-panel-compact){display:none} #move-tray:not(.art-only):not(.mulligan-choice) #tray-title{padding-top:4px} /* Target cards wrap into rows; column wrapping pushed entire columns off-panel. */ body.immersive #action-dock #move-tray.target-picker #visual-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));grid-auto-flow:row;align-items:start;align-content:start;gap:12px;min-width:0;max-height:58dvh;overflow-x:hidden;overflow-y:auto;padding:4px} #move-tray.target-picker #visual-choices>p,#move-tray.target-picker #reset-targets,#move-tray.target-picker .target-group,#move-tray.target-picker #confirm-return-targets,#move-tray.target-picker [data-final-target]{grid-column:1/-1;min-width:0;white-space:normal;overflow-wrap:anywhere} #move-tray.target-picker #visual-choices>p{margin:0 0 2px;font-size:12px} #move-tray.target-picker #reset-targets{justify-self:start;width:auto;padding:6px 12px;font-size:12px} #move-tray.target-picker .target-choice{box-sizing:border-box;width:100%;min-width:0;max-width:none;margin:0;white-space:normal} #move-tray.target-picker .target-choice img{width:100%;max-height:240px;object-fit:contain} #move-tray.target-picker .target-choice span{line-height:1.35;overflow-wrap:anywhere} #move-tray.target-picker .target-group>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:10px;overflow:visible} /* The floating turn action must never add a row or spacer above the board. */ body.immersive #game{grid-template-rows:minmax(0,1fr)} body.immersive #game>.table-layout{grid-row:1;grid-column:1} body.immersive #hud-layout-space{display:none!important} body.immersive #game-hud{position:fixed;top:8px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);margin:0;z-index:25} /* Compact hand leaves more vertical space for the base. */ body.immersive #mat-surface{--visible-hand-card:clamp(68px,8dvh,96px);--visible-hand-height:calc(var(--visible-hand-card)*1.397 + 44px)} body.immersive #hand-layer{height:var(--visible-hand-height);bottom:20px} body.immersive #hand-layer #hand{max-height:none;padding:12px 20px 24px;gap:0} body.immersive #hand-layer .card{width:var(--visible-hand-card);min-width:var(--visible-hand-card);max-width:var(--visible-hand-card);flex-basis:var(--visible-hand-card);margin-left:calc(var(--visible-hand-card)*-.28)} body.immersive #hand-layer .card:first-child{margin-left:0} body.immersive #mat-surface #battleboard{grid-template-rows:30px minmax(0,1fr) minmax(0,2.4fr) minmax(0,1fr) calc(var(--visible-hand-height) + 20px)} @media(max-width:800px){body.immersive #mat-surface{--visible-hand-card:clamp(60px,8dvh,76px)}body.immersive #mat-surface #battleboard{grid-template-rows:24px minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr) calc(var(--visible-hand-height) + 20px)}} /* Horizontal black-and-gold point track beside the battlefield card. */ body.immersive .shared-field>.edge-score{ grid-column:1/-1;grid-row:1;width:calc(100% - var(--edge-field-width) - 20px); min-width:0;align-self:center;display:grid;grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto;gap:10px;padding:8px 6px 16px; border:0;border-radius:0;background:none;box-shadow:none; } body.immersive .shared-field>.edge-score>small{ grid-column:1;grid-row:1;text-align:left;padding:0 4px;font-size:9px;letter-spacing:1.5px; } body.immersive .shared-field>.edge-score>small br{display:none} body.immersive .shared-field>.edge-score .score-track{ display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:auto; align-items:center;gap:clamp(3px,.65vw,12px);width:100%;padding:4px 0 10px; } body.immersive .shared-field>.edge-score .score-track span{ position:relative;isolation:isolate;grid-column:auto;grid-row:1;justify-self:center; width:100%;height:auto;max-width:48px;max-height:none;aspect-ratio:1; border:1px solid #786033;border-radius:50%; background:radial-gradient(circle at 40% 30%,#202019,#080908 75%); color:#c2a362;font:800 clamp(11px,1.7vw,27px)/1 system-ui,sans-serif; box-shadow:inset 0 0 0 3px #080908,inset 0 0 0 4px #b18a3b30,0 3px 8px #0008; } body.immersive .shared-field>.edge-score .score-track span:first-child{ grid-column:auto;grid-row:1;width:100%;max-width:48px; } body.immersive .shared-field>.edge-score .score-track span:nth-child(even){transform:translateY(10px)} body.immersive .shared-field>.edge-score .score-track span.scored{ color:#ffe4a0;border-color:#f0c66c;background:radial-gradient(circle at 40% 30%,#30291a,#090a08 75%); outline:1px solid #b88d3e;outline-offset:3px; box-shadow:inset 0 0 0 3px #090a08,inset 0 0 0 4px #d6ac5566,0 0 14px #e1b75455; } body.immersive .shared-field>.field-center{ left:auto;right:4px;transform:translateY(-25%);width:var(--edge-field-width); } @media(max-width:800px){ body.immersive .shared-field>.edge-score{width:calc(100% - var(--edge-field-width) - 12px);padding:6px 3px 12px;gap:5px} body.immersive .shared-field>.edge-score .score-track{gap:3px} body.immersive .shared-field>.edge-score .score-track span{font-size:clamp(8px,1.7vw,14px)} body.immersive .shared-field>.edge-score .score-track span:nth-child(even){transform:translateY(6px)} } @media(max-width:540px){ body.immersive .shared-field>.edge-score{width:100%;align-self:end;padding-top:calc(var(--edge-field-height)*.75 + 8px)} } /* Separate grips move controls without activating their primary action. */ .panel-drag-handle{opacity:0;pointer-events:none} :hover>.panel-drag-handle,.panel-drag-handle:focus-visible,.panel-moving .panel-drag-handle{opacity:1;pointer-events:auto} body.immersive #game-hud>.panel-drag-handle{display:block;cursor:grab;touch-action:none;padding:4px 7px;color:#dabc78;background:#302719;border:1px solid #8d6e3755} body>#hud-more>summary{display:flex;align-items:center;gap:7px} #hud-more .panel-drag-handle{cursor:grab;touch-action:none;padding:3px 6px;margin:0;background:#302719;color:#dabc78;border:1px solid #8d6e3755;font-size:18px;line-height:20px} body>#hud-more>summary{position:relative;gap:0;min-height:44px;box-sizing:border-box;justify-content:center} body>#hud-more>summary>.panel-drag-handle{position:absolute;left:calc(100% - 2px);top:50%;transform:translateY(-50%);width:28px;min-width:0;padding:3px 6px;border-width:1px;margin:0;box-sizing:border-box;opacity:0;pointer-events:none} body>#hud-more>summary:is(:hover,:focus-within)>.panel-drag-handle, body>#hud-more:is([open],.panel-moving)>summary>.panel-drag-handle{opacity:1;pointer-events:auto} /* Crowded armies fan across the lane, with each exposed edge available to inspect. */ body.immersive .field-army.stacked-units{flex-wrap:nowrap;gap:0} body.immersive .field-army.stacked-units>.mat-card{z-index:var(--stack-index,1);transition:filter .12s} body.immersive .field-army.stacked-units>.mat-card:is(:hover,:focus-visible){z-index:40;filter:brightness(1.08)} body.immersive .field-army.stacked-units>.mat-card .might-badge{right:auto;left:2px;bottom:2px;min-width:20px;font-size:14px} #series-score{position:fixed;top:6px;right:12px;z-index:12;padding:5px 10px;background:#17130ee8;border:1px solid #8e723e;border-radius:7px;font-size:11px;color:#e2c98c;pointer-events:none} #sideboard-screen,#sideboard-view{background:#15120e;color:#ead8ad;border:1px solid #ba9752;color-scheme:dark} #sideboard-screen{width:min(1200px,96vw);max-height:94dvh;padding:24px} #sideboard-screen p,#sideboard-view p{color:#c6b799} #sideboard-screen .eyebrow{color:#e2c98c} #sideboard-screen .side-rule{color:#baaa8a} #sideboard-screen button:not(.side-art),#sideboard-view button:not(.side-art){background:#322919;color:#f3dfac;border:1px solid #80673a} #sideboard-screen button.primary{background:#d6b76c;color:#191815;border-color:#edce85} #sideboard-screen button:not(.side-art):hover:not(:disabled),#sideboard-view button:not(.side-art):hover:not(:disabled){background:#49391e;filter:none} #sideboard-screen button.primary:hover:not(:disabled){background:#e8c77c} #sideboard-screen button:focus-visible,#sideboard-view button:focus-visible{outline-color:#ebce87} #sideboard-screen button:disabled{background:#27231b;color:#a99c82;border-color:#51452f;opacity:1;cursor:default} #sideboard-screen .side-footer p{color:#ebce87} #sideboard-view .side-cards{margin:16px 0} #sideboard-screen h2{margin-bottom:8px}#sideboard-screen p{font-size:13px}.side-rule{color:#baaa8a}.side-summary{display:flex;gap:24px;flex-wrap:wrap;padding:12px 0;border-block:1px solid #80673a66} .side-columns{display:grid;grid-template-columns:2fr 1fr;gap:22px}.side-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px}.side-card{min-width:0;padding:6px;background:#211b12;border:1px solid #7d6438;border-radius:8px}.side-card .side-art{display:block;width:100%;padding:0;background:none}.side-card img{display:block;width:100%;height:180px;object-fit:contain}.side-card strong{display:block;font-size:11px;margin:6px 0;overflow-wrap:anywhere}.side-card>button:not(.side-art){width:100%;font-size:11px;padding:7px;margin-top:4px}.side-champion{width:140px;margin:14px 0}.side-champion img{height:130px}.side-footer{position:sticky;bottom:-24px;background:#15120ef5;border-top:1px solid #947640;padding:12px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.side-footer p{flex:1;min-width:170px;color:#ebce87} @media(max-width:700px){.side-columns{grid-template-columns:1fr}.side-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.side-card img{height:130px}#sideboard-screen{padding:14px}.side-footer{bottom:-14px}#series-score{top:4px;font-size:9px;max-width:48vw}} /* Separate close-packed piles for ready and exhausted units on each player's side. */ body.immersive .field-army{flex-wrap:nowrap;gap:14px} body.immersive .field-army .unit-stack{display:flex;flex:1 1 0;min-width:0;height:100%;position:relative;align-items:center;gap:0;container-type:inline-size} .stack-label{position:absolute;top:2px;left:0;color:#e4cc97;font-size:9px;letter-spacing:.3px;pointer-events:none} body.immersive .unit-stack>.mat-card{z-index:var(--stack-index,1)} body.immersive .unit-stack>.mat-card:is(:hover,:focus-visible){z-index:40;filter:brightness(1.08)} body.immersive .unit-stack>.mat-card .might-badge{right:auto;left:2px;bottom:2px;min-width:20px;font-size:14px} body.immersive .unit-stack:has(.mat-card:hover),body.immersive .unit-stack:focus-within{z-index:5} @media(max-width:800px){body.immersive .field-army{gap:8px}.stack-label{font-size:7px}} /* Uniform rows in More, including the expandable Music entry. */ body>#hud-more #hud-more-items{gap:2px;align-content:start;grid-auto-rows:auto} #hud-more-items>button,#hud-more-items #music-controls>summary{box-sizing:border-box;min-height:40px;padding:10px 12px;line-height:20px;font-size:13px;font-weight:500;margin:0} #hud-more-items #music-controls{margin:0;min-height:0;align-self:start} /* Between-game sideboarding: compact, paired deck lists. */ #sideboard-screen{width:min(1000px,96vw);max-height:94dvh;padding:18px;background:linear-gradient(135deg,#14213a,#0c1526);color:#e1e8ef;border:1px solid #536178;border-radius:0;overflow:auto} #sideboard-screen::backdrop{background:#030915b8} #sideboard-screen .side-heading{display:block;text-align:center;margin-bottom:12px;padding:0;background:none;border:0} #sideboard-screen h2{display:inline-block;min-width:250px;margin:0 0 8px;padding:12px 24px;border:1px solid #9c8c64;background:#0b162a;color:#dfd0ac;text-transform:uppercase;font-size:13px;letter-spacing:2px} #sideboard-screen p{color:#a8bacb;font-size:12px;margin:6px 0} #sideboard-screen .side-rule{text-align:center} #sideboard-screen .side-champion{width:auto;max-width:470px;margin:12px auto} #sideboard-screen .side-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px} #sideboard-screen .side-columns>section{min-width:0;background:#0a121ecc;border:1px solid #334055;min-height:280px} #sideboard-screen h3{display:flex;align-items:center;justify-content:space-between;margin:0;padding:8px 13px;border-bottom:1px solid #29364b;color:#91aabd;font-size:11px;text-transform:uppercase;letter-spacing:1.5px} #sideboard-screen .side-count{padding:6px 8px;border:1px solid #38485d;color:#b5c6d3;letter-spacing:0;font-variant-numeric:tabular-nums} #sideboard-screen .side-count.valid{color:#88d9c3;border-color:#35675f;background:#142c30} #sideboard-screen .side-count.invalid{color:#ffb3a7;border-color:#ae625c;background:#3a2329} #sideboard-screen .side-list{display:flex;flex-direction:column;gap:4px;padding:6px} #sideboard-screen .side-row{display:grid;grid-template-columns:40px 38px minmax(0,1fr) 28px;align-items:center;gap:9px;min-height:40px;padding:5px 8px;border:1px solid #293246;background:#0e1623;border-radius:2px} #sideboard-screen .side-quantity{border:1px solid #4b5e78;background:#1b2a40;font-size:12px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums} #sideboard-screen .side-row strong{font-size:12px;line-height:1.3;overflow-wrap:anywhere} #sideboard-screen .side-row .side-art{display:block;width:38px;height:28px;padding:0;border:0;border-radius:0;background:none;overflow:hidden} #sideboard-screen .side-row img{width:100%;height:100%;object-fit:cover;object-position:center 30%} #sideboard-screen .side-row small{color:#9aaec2;font-size:10px} #sideboard-screen .side-champion .side-row{grid-template-columns:40px 38px minmax(0,1fr) 65px} #sideboard-screen button:not(.side-art){background:#0b1422;color:#b5c8d6;border:1px solid #4d5f79;border-radius:0} #sideboard-screen .side-row .side-transfer{width:28px;height:28px;padding:0;color:#d4c493;border-color:#776c4c;background:#29271f;font-size:17px} #sideboard-screen .side-row-in{grid-template-columns:28px 40px 38px minmax(0,1fr)} #sideboard-screen .side-row-in .side-transfer{grid-column:1;grid-row:1;color:#9bd7c7;border-color:#3b6b65;background:#172c30} #sideboard-screen .side-row-in .side-quantity{grid-column:2;grid-row:1} #sideboard-screen .side-row-in .side-art{grid-column:3;grid-row:1} #sideboard-screen .side-row-in strong{grid-column:4;grid-row:1} #sideboard-screen .side-row .side-choose{grid-column:3/-1;justify-self:start;font-size:10px;padding:3px 7px} #sideboard-screen .side-empty{padding:12px;line-height:1.6} #sideboard-screen .side-footer{position:sticky;bottom:-18px;margin-top:10px;padding:12px;background:#09111bf5;border:1px solid #334055;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap} #sideboard-screen .side-footer p{flex:1 0 100%;min-width:0;margin:0;color:#e0c798} #sideboard-screen .side-footer p:empty{display:none} #sideboard-screen .side-footer button{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:11px 14px} #sideboard-screen .side-footer #side-leave{margin-right:auto} #sideboard-screen button.primary{background:linear-gradient(#355880,#1c3452);border-color:#c4b28d;color:#f0e6cd} #sideboard-screen button:not(.side-art):hover:not(:disabled){background:#304764;color:#fff} #sideboard-screen button:disabled{opacity:.5;cursor:default} #sideboard-screen button:focus-visible{outline:2px solid #e6cf98;outline-offset:2px} @media(max-width:600px){#sideboard-screen{padding:10px}#sideboard-screen .side-columns{gap:8px}#sideboard-screen .side-row{gap:5px;padding:5px;grid-template-columns:28px minmax(0,1fr) 26px}#sideboard-screen .side-row .side-art{display:none}#sideboard-screen .side-row-in{grid-template-columns:26px 28px minmax(0,1fr)}#sideboard-screen .side-row-in strong{grid-column:3}#sideboard-screen .side-row strong{font-size:11px}#sideboard-screen .side-row .side-choose{grid-column:2/-1}#sideboard-screen .side-champion .side-row{grid-template-columns:28px minmax(0,1fr) 65px}#sideboard-screen .side-footer{bottom:-10px}#sideboard-screen .side-footer button{padding:10px;font-size:10px}} /* Rune cards sit directly on the playmat without a surrounding panel. */ .runes-zone,body.immersive .mat-zone.runes-zone{border:0;background:transparent;box-shadow:none;border-radius:0} /* The base is a drop region on the artwork, not a painted panel. */ body.immersive .mat-zone.base-zone{background:transparent;border-color:transparent;box-shadow:none} .rune-row .mat-card img{box-shadow:none;filter:drop-shadow(0 2px 3px #0008)} .sleeve-editor{margin:18px 0;padding:14px;border:1px solid #bca57966;border-radius:10px}.sleeve-editor h3{margin:0 0 12px}.sleeve-layout{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px}.sleeve-layout label{display:block;font-size:12px;margin-bottom:5px}.sleeve-layout select{width:100%;margin-bottom:12px}.sleeve-sample{width:76px;aspect-ratio:5/7;display:grid;place-items:center;border:1px solid #c7a260;border-radius:7px;background:repeating-linear-gradient(45deg,#17140f,#17140f 4px,#1d1912 5px);color:#d7b877;font-size:32px;box-shadow:0 4px 10px #0004}#sleeve-status{font-size:12px;margin:8px 0 0}#sleeve-status:empty{display:none} [data-sleeve="ember"]{background:radial-gradient(ellipse at 50% 30%,#dd863b,#6d241d 48%,#1e0e16)!important;color:#ffe2aa!important} [data-sleeve="ocean"]{background:repeating-linear-gradient(135deg,#102e49 0 12px,#164859 12px 24px)!important;color:#aff5ed!important} [data-sleeve="void"]{background:radial-gradient(ellipse at 50% 50%,#a36dde,#402264 45%,#140e25 80%)!important;color:#edd8ff!important} /* Hand cards can be arranged even when they have no legal game action. */ #hand [data-oid]{cursor:grab;touch-action:none;user-select:none} #hand.reordering{outline:1px dashed #e2bd68;outline-offset:-3px} #hand .hand-drag-source{opacity:.4} #hand .hand-insert-before{box-shadow:-5px 0 0 #e2bd68} #hand .hand-insert-after{box-shadow:5px 0 0 #e2bd68} #hand [data-oid]:focus-visible{outline:3px solid #e2bd68;outline-offset:2px} /* Champion art stays behind cards and never captures drag/drop or pointer input. */ .physical-mat[data-champion-playmat]{isolation:isolate;position:relative} .champion-mat-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:10px;filter:brightness(.42) saturate(.7);z-index:-1;pointer-events:none;user-select:none} .physical-mat:not(.opponent-mat)>.player-section-art{border-radius:0 0 12px 12px} #match-playmat-picker{padding:12px 0 18px;border-bottom:1px solid #89703c77;margin-bottom:16px} #match-playmat-picker .playmat-options{max-width:720px} #playmat-editor{margin:18px 0;padding-top:14px;border-top:1px solid #89703c55} #playmat-editor h3{font-size:15px;margin:0 0 8px} .playmat-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} .playmat-preview{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border:1px solid #89703c77;border-radius:7px;margin:0 0 9px} .playmat-option{min-width:0;padding:3px;border:2px solid transparent;border-radius:7px;background:#15181e;color:#d9c896;overflow:hidden;text-align:center} .playmat-option img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:3px} .playmat-option span{display:block;padding:7px 0;font-size:11px} .playmat-option[aria-pressed=true]{border-color:#d5b666;background:#302919} .playmat-option:focus-visible{outline:3px solid #e5cb84;outline-offset:3px} .playmat-option:hover{border-color:#998254} /* A quiet, tactile hand: composited motion leaves the fan and hitboxes stable. */ #hand{position:relative} #hand.reordering{outline:none} #hand .hand-drag-source{opacity:.16;filter:saturate(.6);outline-color:transparent!important;box-shadow:none!important} #hand [data-oid]{transition:opacity .18s ease,filter .18s ease;will-change:translate} .drag-ghost.hand-float{transform:none!important;scale:1.06;transform-origin:center;will-change:translate,rotate;opacity:1!important;border:1px solid #f4dba888!important;border-radius:9px;box-shadow:0 24px 44px #0008,0 5px 12px #0006,0 0 0 1px #ffe9bd22!important;background:#161510} #hand-sounds{font:inherit;font-size:9px;letter-spacing:.5px;padding:2px 7px;margin-left:10px;background:#252018;color:#d5bc88;border:1px solid #b8995b44;border-radius:20px;vertical-align:middle;pointer-events:auto} #hand-sounds[aria-pressed=false]{opacity:.55} @media(prefers-reduced-motion:reduce){#hand [data-oid]{transition:none}.drag-ghost.hand-float{scale:1}} .sleeve-layout input{max-width:100%;font-size:11px} [data-local-sleeve]{position:relative;isolation:isolate;overflow:hidden} [data-local-sleeve]>.local-sleeve-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:-1;border-radius:inherit} [data-local-sleeve]>.back-crest,[data-local-sleeve].sleeve-sample>span{visibility:hidden} .deck-stack[data-local-sleeve]>b,.deck-stack[data-local-sleeve]>small{background:#100d0bdd;color:#fff;border-radius:3px;padding:2px 4px} /* Compact match setup: deck first, then one clear way to play. */ #play:not([hidden]){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start} #play>#deck-picker{margin:0} #play>#room{grid-column:1/-1} #play:has(>#room:not([hidden])){grid-template-columns:1fr} #lobby{padding:26px;border:1px solid #5f4c2d;border-radius:14px;background:radial-gradient(ellipse at top right,#6c522021,transparent 75%),#171511;min-width:0} #deck-picker{min-width:0} #deck-picker .eyebrow,#lobby .eyebrow{margin-bottom:10px} #picked-deck{flex-direction:column;align-items:stretch;gap:16px;margin:22px 0} #picked-deck .picked-art{justify-content:center;gap:20px} #picked-deck .picker-card{width:clamp(100px,10vw,150px)} #picked-deck h3{font-size:25px;overflow-wrap:anywhere} #picked-deck p{margin:6px 0 12px} #deck-library,.record-details{border-top:1px solid var(--line);padding:16px 0 0;margin-top:16px} #deck-picker summary,.ai-search-control summary{cursor:pointer;color:#e8ce93;font-size:14px;font-weight:650} #deck-picker summary:focus-visible,.ai-search-control summary:focus-visible{outline:2px solid #e3c174;outline-offset:5px;border-radius:3px} #deck-library summary span{font-size:12px;font-weight:400;color:var(--muted);margin-left:10px} .deck-search-label{display:block;margin-top:18px;font-size:12px;margin-bottom:6px} #deck-search{width:100%;margin-bottom:14px} #deck-tiles{grid-template-columns:repeat(2,minmax(0,1fr));max-height:420px;gap:10px} #deck-tiles .tile-art{justify-content:flex-start} #deck-tiles .tile-art img{width:52px;height:73px} #deck-tiles .deck-tile{padding:12px} #deck-tiles .deck-tile[hidden]{display:none} #deck-tiles .deck-tile>strong{overflow-wrap:anywhere} #player-record>div{flex-direction:column;gap:8px} .play-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:5px;border:1px solid var(--line);border-radius:10px;margin:24px 0;background:#100f0d} .play-modes button{padding:12px 6px;background:transparent;color:#c5b99f;font-size:12px} .play-modes button[aria-pressed=true]{background:#3b301b;color:#f5d995;box-shadow:inset 0 0 0 1px #96783c} .match-settings{display:grid;grid-template-columns:1fr 1fr;gap:14px} .match-settings label,.play-panel label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600} .match-settings input,.match-settings select,.play-panel select{width:100%;min-width:0;font-size:14px} .match-settings>*,#format-setting{min-width:0} .play-panel{border-top:1px solid var(--line);margin-top:22px;padding-top:20px} .play-panel h3{font:24px/1.25 Georgia,serif;color:#efdfba;margin:0 0 10px} .play-panel p{font-size:13px;margin:0 0 20px} .play-panel .fine{font-size:12px;margin:10px 0 0} .play-panel>.primary{width:100%;margin-top:24px;padding:14px} .play-panel ol{padding-left:20px;color:var(--muted);font-size:14px;line-height:2} .play-panel .joinline{margin-top:8px;display:flex;gap:10px} .play-panel .joinline input{width:0;flex:1;min-width:0;text-transform:uppercase;letter-spacing:2px} .play-panel .ai-search-control{margin-top:20px} .play-panel .ai-search-control label{margin-top:14px} .lobby-footer{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)} .lobby-footer strong{display:block;color:#e8d3a7;overflow-wrap:anywhere} .lobby-footer button{font-size:12px} #lobby>.fine{font-size:11px;margin-bottom:0} @media(max-width:950px){#play:not([hidden]){grid-template-columns:1fr}#picked-deck{flex-direction:row;align-items:center}#picked-deck .picker-card{width:100px}} @media(max-width:540px){#lobby{padding:18px}#picked-deck{flex-direction:column;align-items:stretch}#picked-deck .picker-card{width:115px}.match-settings{grid-template-columns:1fr}#deck-library summary span{display:block;margin:5px 0 0 18px}.play-modes button{font-size:11px}#deck-tiles .tile-art img{width:43px;height:60px}} #hand-layer .hand-title{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);width:auto;height:auto;margin:0;padding:1px 8px;overflow:visible;clip-path:none;white-space:nowrap;font-size:9px;letter-spacing:1.6px;color:#c5ad7d;background:transparent;pointer-events:none} .deck-paste{margin-top:16px}.deck-paste label{display:block;margin:12px 0 8px}.deck-paste textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;margin-bottom:12px;font:13px/1.5 monospace} .turn-guide{position:relative;z-index:5;min-width:0;padding:7px 10px;background:#0d1925f5;border:1px solid #43536a;border-radius:8px;color:#e5edf5;font:12px/1.4 system-ui;text-align:left} .phase-heading{display:flex;justify-content:space-between;gap:8px;font-size:11px}.phase-heading>span{color:#b6c6d6;font-size:10px} .phase-track{height:4px;background:#303e50;border-radius:4px;margin:5px 0;overflow:hidden}.phase-track>span{display:block;height:100%;background:var(--phase-color);transition:width .35s,background .35s} .phase-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.phase-step{margin:0;border:0;padding:0;min-width:0}.phase-step summary{padding:3px;border-radius:4px;cursor:pointer;list-style:none;font-size:11px;color:#b6c6d6}.phase-step summary small{display:block;font-size:8px;font-weight:400}.phase-step.active summary{background:var(--phase-color);color:#0b1925;font-weight:750}.phase-step.complete summary{color:var(--phase-color)}.phase-step>p{position:absolute;left:0;right:0;top:100%;margin:3px 0;padding:12px;background:#102335;border:1px solid #7897af;border-radius:6px;box-shadow:0 8px 20px #0009;z-index:20;font-size:13px}.phase-step summary:focus-visible{outline:2px solid white;outline-offset:2px} #tutorial-coach{display:flex;align-items:center;gap:12px;border-top:1px solid #43536a;margin-top:7px;padding-top:7px;max-height:105px;overflow:auto}#tutorial-coach strong{color:#b2eee4;font-size:12px}#tutorial-coach p{margin:3px 0;font-size:12px;line-height:1.45;color:#e1e9f2}#tutorial-coach button{flex-shrink:0;background:#a6e7dc;color:#10232b;font-size:12px;padding:9px} body.immersive #mat-surface #battleboard{grid-template-rows:30px minmax(70px,1fr) 88px minmax(120px,2.4fr) minmax(var(--base-row-height),1.35fr) calc(var(--visible-hand-height) + 20px)} body.immersive #mat-surface #battleboard:has(.with-coach){grid-template-rows:30px minmax(70px,1fr) 190px minmax(120px,2.4fr) minmax(var(--base-row-height),1.35fr) calc(var(--visible-hand-height) + 20px);min-height:800px} .play-mode-sections{display:grid;gap:14px;margin:24px 0} .play-mode-section{padding:16px;border:1px solid var(--line);border-radius:10px;background:#100f0d} .play-mode-section h3{margin:0 0 5px;font-size:16px;color:#ecd7a6} .play-mode-section>p{margin:0;font-size:12px;color:#bfb39b;line-height:1.5} .play-mode-section .play-modes{grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0 0;padding:0;border:0;background:transparent;gap:8px} .play-mode-section .play-modes button{min-height:44px;border:1px solid #51452c;border-radius:7px} .play-mode-section:has(button[aria-pressed=true]){border-color:#a88b49} @media(max-width:800px){.phase-heading>span{display:none}.phase-step summary{font-size:10px}.phase-step summary small{font-size:7px}#tutorial-coach{gap:6px}#tutorial-coach p{font-size:11px}#tutorial-coach button{font-size:10px;padding:6px}body.immersive #mat-surface #battleboard{grid-template-rows:24px minmax(65px,1fr) 88px minmax(120px,2.2fr) minmax(var(--base-row-height),1.35fr) calc(var(--visible-hand-height) + 20px);min-height:680px}} @media(prefers-reduced-motion:reduce){.phase-track>span{transition:none}} .turn-guide.own-turn{--phase-color:#65d9d0}.turn-guide.other-turn{--phase-color:#f0ae71} .phase-track>span{width:0}.phase-index-0 .phase-track>span{width:16.667%}.phase-index-1 .phase-track>span{width:33.333%;filter:hue-rotate(8deg)}.phase-index-2 .phase-track>span{width:50%;filter:hue-rotate(16deg)}.phase-index-3 .phase-track>span{width:66.667%;filter:hue-rotate(24deg)}.phase-index-4 .phase-track>span{width:83.333%;filter:hue-rotate(32deg)}.phase-index-5 .phase-track>span{width:100%;filter:hue-rotate(40deg)} body.immersive .table-layout>div:has(.with-coach){overflow-y:auto;grid-template-rows:minmax(800px,1fr) auto} .turn-guide .phase-step summary{font-family:system-ui;font-size:12px}.turn-guide .phase-step summary small{font-size:9px}#tutorial-coach p{font-size:14px}#tutorial-coach strong{font-size:13px} @media(max-width:800px){.turn-guide .phase-step summary{font-size:9px}.turn-guide .phase-step summary small{font-size:8px}#tutorial-coach p{font-size:12px}#tutorial-coach strong{font-size:12px}} @media(max-width:800px),(max-height:750px){body.immersive .table-layout>div{overflow-y:auto;grid-template-rows:minmax(680px,1fr) auto}body.immersive .table-layout>div:has(.with-coach){grid-template-rows:minmax(800px,1fr) auto}} @media(max-width:540px){.phase-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.turn-guide .phase-step summary{font-size:11px}.turn-guide .phase-step summary small{display:none}.phase-heading{font-size:10px}body.immersive #mat-surface #battleboard:has(.with-coach){grid-template-rows:24px minmax(65px,1fr) 220px minmax(120px,2.2fr) minmax(var(--base-row-height),1.35fr) calc(var(--visible-hand-height) + 20px)}} /* On wide tables the helper lives in the opponent's central base, not a full-width row. */ @media(min-width:1100px){ body.immersive #mat-surface #battleboard:has(.opponent-mat .turn-guide){grid-template-rows:30px minmax(155px,1fr) minmax(160px,2.4fr) minmax(var(--base-row-height),1.35fr) calc(var(--visible-hand-height) + 20px);min-height:700px} body.immersive #mat-surface #battleboard:has(.opponent-mat .with-coach){grid-template-rows:30px minmax(240px,1.25fr) minmax(160px,2.4fr) minmax(var(--base-row-height),1.35fr) calc(var(--visible-hand-height) + 20px);min-height:800px} body.immersive .opponent-mat .base-zone:has(.turn-guide){display:flex;flex-direction:column;gap:5px;container-type:inline-size} .opponent-mat .turn-guide{width:100%;max-width:960px;box-sizing:border-box;flex-shrink:0;margin:0 auto;padding:6px 8px} body.immersive .opponent-mat .base-zone:has(.turn-guide)>.mat-cards{height:auto;min-height:55px;flex:1;overflow:auto} .opponent-mat #tutorial-coach{max-height:100px;align-items:flex-start;gap:8px} .opponent-mat #tutorial-coach>div{min-width:0;flex:1} .opponent-mat #tutorial-coach p{font-size:12px;line-height:1.4;margin:3px 0} .opponent-mat #tutorial-coach strong{font-size:11px} .opponent-mat #tutorial-coach button{min-width:65px;position:sticky;top:0} .opponent-mat .phase-step summary{font-size:10px} .opponent-mat .phase-step summary small{font-size:8px} @container(max-width:650px){.opponent-mat .phase-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.opponent-mat .phase-step summary small{display:none}.opponent-mat .phase-heading>span{display:none}} } #tutorial-next:disabled{opacity:.6;cursor:wait} #move-tray.trigger-order{width:min(760px,94vw);max-height:78dvh;overflow:auto} #move-tray.trigger-order #visual-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;padding:6px} #move-tray.trigger-order .trigger-card{display:flex;flex-direction:column;align-items:stretch;width:100%;min-width:0;max-width:none;padding:10px;border:2px solid #77613b;border-radius:9px;background:#171c23;text-align:left;color:#f3ead6;gap:8px;position:relative} #move-tray.trigger-order .trigger-card.selected{border-color:#80ded0;background:#193430} #move-tray.trigger-order .trigger-card img{display:block;width:100%;height:180px;object-fit:contain;border-radius:6px} #move-tray.trigger-order .trigger-card strong{font-size:14px;line-height:1.35} #move-tray.trigger-order .trigger-card .trigger-effect{font-size:13px;line-height:1.5;white-space:normal} #move-tray.trigger-order .trigger-card .trigger-rank{font-size:13px;font-weight:700;color:#b9eee5} .trigger-no-art{height:90px;display:grid;place-items:center;font-size:40px;color:#d8bb79} #move-tray.trigger-order #choice-drop{text-align:left;cursor:default;border-style:solid;padding:12px;font-size:14px} #move-tray.trigger-order #choice-drop p{margin:0 0 10px;line-height:1.5} .trigger-sequence{padding-left:25px;margin:10px 0;line-height:1.6} #confirm-visual:disabled{opacity:.5;cursor:not-allowed} body.immersive #action-dock #move-tray.trigger-order:not(.art-only):not(.mulligan-choice){position:fixed;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(760px,94vw)!important;height:auto!important;max-height:90dvh!important;padding:18px;overflow:auto} #move-tray.trigger-order :is(.action-panel-resize,.action-panel-compact,.panel-drag-handle){display:none} #move-tray.trigger-order:not(.art-only):not(.mulligan-choice) #visual-choices{max-height:none;overflow:visible;align-items:start} body.immersive #action-dock #move-tray.trigger-order{background:#171611;box-shadow:0 16px 60px #000b} @media(min-width:1100px){ body.immersive .opponent-mat .base-zone:has(.turn-guide){margin-top:-38px} } .turn-guide .phase-heading{font-size:14px;line-height:1.4} .turn-guide .phase-heading>span{font-size:12px} .turn-guide .phase-step summary{font-size:13px;line-height:1.4} .turn-guide .phase-step summary small{font-size:11px} .turn-guide #tutorial-coach{max-height:125px} .turn-guide #tutorial-coach strong{font-size:16px;line-height:1.4} .turn-guide #tutorial-coach p{font-size:15px;line-height:1.5} .turn-guide #tutorial-coach button{font-size:14px;min-height:40px} @media(max-width:800px){.turn-guide .phase-heading{font-size:12px}.turn-guide .phase-step summary{font-size:12px}.turn-guide #tutorial-coach strong{font-size:15px}.turn-guide #tutorial-coach p{font-size:14px}} .turn-controls{display:none} .turn-controls:has(#quick-pass:not([hidden])){display:flex;justify-content:flex-end;border-top:1px solid #43536a;padding-top:7px;margin-top:7px} .turn-controls #quick-pass{position:static;min-height:40px;min-width:120px;margin:0;padding:9px 18px;border:1px solid #cfb064;border-radius:7px;background:#c4a050;color:#17130d;font-size:13px;font-weight:700;box-shadow:none;transform:none} .turn-controls #quick-pass:hover{background:#e2c57e} .turn-controls #quick-pass:focus-visible{outline:2px solid #fff;outline-offset:3px} body.immersive #mat-surface #battleboard:has(>.turn-guide){grid-template-rows:30px minmax(70px,1fr) auto minmax(160px,2.4fr) minmax(var(--base-row-height),1.35fr) calc(var(--visible-hand-height) + 20px)} @media(min-width:1100px){ body.immersive #mat-surface #battleboard:has(.opponent-mat .turn-guide){grid-template-rows:30px minmax(225px,1fr) minmax(160px,2.4fr) minmax(var(--base-row-height),1.35fr) calc(var(--visible-hand-height) + 20px)} body.immersive #mat-surface #battleboard:has(.opponent-mat .with-coach){grid-template-rows:30px minmax(325px,1.4fr) minmax(160px,2.4fr) minmax(var(--base-row-height),1.35fr) calc(var(--visible-hand-height) + 20px)} } /* Float drafts above the mat so base overflow cannot crop cards or controls. */ body.immersive > #chain-builder{position:fixed;inset:auto;margin:0;box-sizing:border-box;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:10px;border:1px solid #a78b50;border-radius:12px;background:#18160ff5;box-shadow:0 10px 32px #0009;z-index:25;overflow:auto;pointer-events:auto;color:#efd59b} body.immersive > #chain-builder .builder-heading{display:flex;float:none;justify-content:flex-end} body.immersive > #chain-builder.has-draft #builder-order-title{display:block;margin:0 0 6px;font-size:15px} body.immersive > #chain-builder.has-draft #builder-help{display:block;max-height:none;margin:5px 0 10px;font-size:12px} body.immersive > #chain-builder #builder-queue{display:flex;align-items:stretch;justify-content:flex-start;gap:10px;padding:3px;min-height:0;overflow-x:auto;overflow-y:hidden} body.immersive > #chain-builder #builder-queue>p{width:100%;box-sizing:border-box;margin:0;padding:12px;border-radius:8px;font-size:12px;text-align:center} body.immersive > #chain-builder .builder-entry{flex:0 0 150px;width:150px;box-sizing:border-box;margin:0;padding:5px;border:1px solid #635334;background:#242016;border-radius:8px;transform:none;box-shadow:none;transition:none} body.immersive > #chain-builder .builder-entry:is(:hover,:focus-within){transform:none;outline:1px solid #e5c879} body.immersive > #chain-builder .builder-entry-card img{width:100%;height:195px;object-fit:contain;border-radius:5px} body.immersive > #chain-builder .builder-entry-card b{display:block;font-size:12px;line-height:1.35;margin:6px 0;overflow-wrap:anywhere} body.immersive > #chain-builder .builder-entry>div:last-of-type{display:flex;position:static;flex-wrap:wrap;gap:3px;background:none} body.immersive > #chain-builder .builder-entry>select{display:block;position:static;width:100%;margin:5px 0;font-size:12px} body.immersive > #chain-builder .builder-entry button{font-size:11px;min-height:28px;padding:4px 6px} body.immersive > #chain-builder #builder-message{font-size:12px;background:none} body.immersive > #chain-builder #submit-builder,body.immersive > #chain-builder #drag-built-group{font-size:13px;min-height:34px;padding:7px 16px;margin:8px auto 0} body.immersive > #chain-builder:not(.has-draft) #submit-builder{display:none} @media(max-width:600px){body.immersive > #chain-builder .builder-entry{flex-basis:130px;width:130px}body.immersive > #chain-builder .builder-entry-card img{height:165px}} body.immersive > #chain-builder #builder-queue{flex-direction:row;flex-wrap:nowrap} /* Drafts begin on the table; only the selected cards float above the base. */ #build-chain{display:none!important} .saved-chains{display:flex;gap:14px;align-items:center;flex-wrap:wrap;position:relative;z-index:3} .saved-chain{display:flex;position:relative;align-items:center;padding:8px 10px 24px;background:#171d2088;border:1px solid #82c8b866;border-radius:10px;cursor:grab;touch-action:none;max-width:100%;overflow:hidden} .saved-chain img{width:64px;aspect-ratio:744/1039;object-fit:contain;margin-left:-27px;pointer-events:none;filter:drop-shadow(0 4px 5px #0009)} .saved-chain img:first-child{margin-left:0} .saved-chain span{position:absolute;bottom:4px;left:0;right:0;font-size:10px;color:#e1e9d4;text-align:center} .in-saved-chain{display:none!important} body.immersive > #chain-builder{background:linear-gradient(0deg,#121916ed,transparent 90%);border:0;box-shadow:none;overflow:visible;pointer-events:none} body.immersive > #chain-builder .builder-heading,body.immersive > #chain-builder #builder-help,body.immersive > #chain-builder #builder-order-title,body.immersive > #chain-builder #builder-message,body.immersive > #chain-builder button,body.immersive > #chain-builder select{pointer-events:auto} body.immersive > #chain-builder #builder-queue{padding:18px 10px;gap:12px;pointer-events:auto} body.immersive > #chain-builder .builder-entry{background:transparent;border:0;padding:0;touch-action:none;filter:drop-shadow(0 12px 8px #0009)} body.immersive > #chain-builder .builder-entry-card img{border-radius:9px} body.immersive > #chain-builder .builder-entry-card b{color:#f7eed7;text-shadow:0 2px 4px #000} body.immersive > #chain-builder .builder-entry:is(:hover,:focus-within){outline:0} body.immersive > #chain-builder .builder-entry button{background:#162623e8;border:1px solid #87c5b76b} .chain-drag-ghost{position:fixed;z-index:10000;display:flex;pointer-events:none;max-width:70vw;filter:drop-shadow(0 15px 15px #000a)} .chain-drag-ghost .builder-entry{width:95px;flex:0 0 95px;margin-left:-35px;padding:0;border:0;background:none;transform:rotate(-5deg)} .chain-drag-ghost .builder-entry-card img{width:95px;height:133px;object-fit:contain} .chain-drag-ghost b,.chain-drag-ghost button,.chain-drag-ghost select{display:none} body.immersive .base-zone>label::after{content:' ยท Drag cards together';font-size:9px;letter-spacing:0;color:#b9cebf} body.immersive .opponent-mat .base-zone>label::after{content:none} @media(max-width:600px){.saved-chain img{width:46px;margin-left:-22px}body.immersive > #chain-builder #builder-queue{gap:8px;padding:12px 5px}} /* Reserve a full base card and fit crowded/short lanes without cropping artwork. */ body.immersive #mat-surface{--base-row-height:calc(var(--table-card)*1.397 + 68px)} body.immersive .base-zone>.mat-cards{container-type:size;box-sizing:border-box;align-items:safe center;padding:8px;overflow-x:auto;overflow-y:auto} body.immersive .base-zone>.mat-cards>.mat-card{--base-card:min(var(--table-card),calc((100cqh - 10px)*.716));width:var(--base-card);max-width:var(--base-card);flex:0 0 var(--base-card);height:calc(var(--base-card)*1.397);min-height:0;align-self:safe center} body.immersive .base-zone>.mat-cards>.mat-card img{width:100%;height:100%;max-height:100%;object-fit:contain;flex-shrink:0} @media(max-width:800px){body.immersive #mat-surface{--base-row-height:200px}} #move-tray .visual-choice.target-preview{flex:0 0 165px;padding:6px;border:1px solid #a38549;border-radius:8px;background:#211b11} #move-tray .visual-choice.target-preview img{width:100%;height:210px;max-height:35dvh;object-fit:contain} #move-tray .visual-choice.target-preview span{display:block;padding:7px 3px;line-height:1.4;font-size:12px;color:#f0d99f} /* Use the same readable card choices for final play/mode confirmations. */ body.immersive #move-tray #visual-choices .confirmation-choice{display:flex;flex-direction:column;align-items:center;flex:0 0 185px;width:185px;max-width:100%;padding:8px;gap:8px;border:1px solid #a38549;border-radius:9px;background:#211b11;white-space:normal} body.immersive #move-tray #visual-choices .confirmation-choice img{display:block;width:150px;height:210px;max-height:32dvh;object-fit:contain;margin:0} body.immersive #move-tray #visual-choices .confirmation-choice span{display:block;font-size:12px;line-height:1.4;color:#f0d99f;overflow-wrap:anywhere} /* Scenic battlefield: opponent above, shared totals, your army below. */ body.immersive .battlefield-row .battlefield-band{gap:12px} body.immersive .shared-field{--score-rail:46px;min-height:340px;isolation:isolate;display:grid;grid-template-columns:var(--score-rail) minmax(0,1fr);grid-template-rows:minmax(120px,1fr) 58px minmax(120px,1fr);gap:8px;padding:10px;border:1px solid #9e803e;border-radius:12px;background:#081729;overflow:visible} body.immersive .shared-field .battlefield-scene{background-position:center;opacity:1} body.immersive .shared-field>.edge-score{position:relative;grid-column:1;grid-row:1/-1;align-self:stretch;justify-self:stretch;width:100%;height:100%;padding:8px 4px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;border:1px solid #b49245;border-radius:18px 18px 12px 12px;background:linear-gradient(90deg,#07101bef,#132537e8,#070f1bec);box-shadow:inset 0 0 0 3px #0005} body.immersive .shared-field>.edge-score>small{padding:0;font-size:9px;letter-spacing:0;text-align:center;color:#ffe397} body.immersive .shared-field>.edge-score .score-track{display:grid;flex:1;grid-template-columns:1fr;grid-template-rows:repeat(9,minmax(0,1fr));gap:5px;padding:0;justify-items:center;align-items:center;background:linear-gradient(#b59349,#b59349) center/1px 95% no-repeat} body.immersive .shared-field>.edge-score .score-track span,body.immersive .shared-field>.edge-score .score-track span:first-child{grid-column:1;grid-row:auto;width:auto;height:100%;max-height:38px;max-width:100%;aspect-ratio:1;transform:none;font-size:clamp(12px,1.2vw,22px);border-color:#dbb759;color:#f5d77f} body.immersive .shared-field>.field-center{position:absolute;inset:10px 10px auto auto;transform:none;width:clamp(90px,12vw,200px);height:auto;aspect-ratio:1.397;z-index:3;margin:0} body.immersive .shared-field>.field-center>span{display:none} body.immersive .shared-field>.field-center .field-card{width:100%;height:100%;border:1px solid #b99b59;border-radius:8px;box-shadow:0 5px 16px #000b} body.immersive .shared-field>.field-army,body.immersive .shared-field>.field-army.enemy-army{position:relative;grid-column:2;grid-row:3;display:flex;min-width:0;min-height:0;margin:0;padding:4px 8px;gap:18px;align-items:center;justify-content:center;overflow:visible;border:0;background:transparent;z-index:2} body.immersive .shared-field>.field-army.enemy-army{grid-row:1;padding-right:clamp(100px,13vw,212px)} body.immersive .shared-field>.field-army::before{display:none} body.immersive .shared-field .field-army .mat-card{--lane-card:clamp(55px,8vh,110px);max-width:none} body.immersive .shared-field .field-army .unit-stack{height:100%;min-height:95px;max-width:420px;border-bottom:2px solid #62bfff;border-radius:8px;box-shadow:0 5px 8px -6px #68caff;padding-bottom:6px} body.immersive .shared-field .stack-label{display:none} body.immersive .shared-field>.battlefield-totals{grid-column:2;grid-row:2;align-self:center;display:grid;gap:5px;z-index:2;pointer-events:none} body.immersive .shared-field .battlefield-totals .lane-total{position:static;display:flex;align-items:center;gap:14px;margin:0;padding:5px 12px;border:1px solid #bd9c56;border-radius:5px 14px;background:linear-gradient(90deg,#061426ef,#102841d9);font-size:12px;line-height:1.2;color:#ffe29a;text-shadow:0 1px 3px #000;white-space:nowrap} body.immersive .shared-field .battlefield-totals .lane-total span{color:#fff0c7} body.immersive .shared-field>.hidden-slots{z-index:4;right:6px;left:auto;width:42px} body.immersive .shared-field>.opponent-hidden{top:calc(clamp(90px,12vw,200px)*.716 + 16px);bottom:auto} body.immersive .shared-field>.own-hidden{bottom:6px;top:auto} @media(max-width:800px){ body.immersive .battlefield-row .battlefield-band{grid-template-columns:1fr;height:auto} body.immersive .shared-field{min-height:350px;--score-rail:40px} body.immersive .shared-field>.field-center{width:105px} body.immersive .shared-field>.field-army.enemy-army{padding-right:110px} body.immersive .shared-field .field-army .mat-card{--lane-card:64px} body.immersive .shared-field .battlefield-totals .lane-total{font-size:11px;padding:5px 7px;gap:8px} body.immersive .battlefield-row{overflow:visible} } body.immersive .shared-field>.edge-score .score-track span:nth-child(even){transform:none} body.immersive .battlefield-row .battlefield-band{padding-top:0!important;grid-auto-flow:row} @media(max-width:800px){ body.immersive #mat-surface #battleboard:has(.shared-field){height:auto;min-height:100dvh;max-height:none;grid-template-rows:24px 220px auto minmax(730px,auto) 220px 120px} body.immersive #mat-surface #battleboard:has(.shared-field)>.opponent-hand{grid-row:1} body.immersive #mat-surface #battleboard:has(.shared-field)>.opponent-mat{grid-row:2} body.immersive #mat-surface #battleboard:has(.shared-field)>.turn-guide{grid-row:3} body.immersive #mat-surface #battleboard:has(.shared-field)>.battlefield-row{grid-row:4} body.immersive #mat-surface #battleboard:has(.shared-field)>.physical-mat:not(.opponent-mat){grid-row:5} body.immersive .battlefield-row .battlefield-band{grid-template-columns:minmax(0,1fr);grid-auto-columns:auto;grid-auto-flow:row} } /* Card-sized command/deck zones, with matching card backs on either side. */ body.immersive .physical-mat .command-zone>div, body.immersive .physical-mat .main-zone, body.immersive .physical-mat .rune-deck-zone, body.immersive .physical-mat .trash-zone{align-self:start;height:max-content;min-height:0;box-sizing:border-box} body.immersive .physical-mat .command-zone>div .mat-card{display:flex;width:100%;max-width:var(--table-card);margin:0 auto} body.immersive .physical-mat .command-zone>div .mat-card img{width:100%;height:auto;max-height:none;aspect-ratio:744/1039;object-fit:contain} body.immersive .physical-mat .main-zone .deck-stack, body.immersive .physical-mat .rune-deck-zone .deck-stack{box-sizing:border-box;width:100%;max-width:var(--table-card);height:auto;min-height:0;max-height:none;aspect-ratio:744/1039;margin:0 auto} body.immersive .shared-field>.edge-score .score-track{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:5px;min-height:0} body.immersive .shared-field>.edge-score .score-track span, body.immersive .shared-field>.edge-score .score-track span:first-child, body.immersive .shared-field>.edge-score .score-track span:nth-child(even){flex:0 1 30px;width:30px;height:30px;min-height:0;max-width:100%;max-height:30px;transform:none;margin:0} body.immersive .physical-mat .main-zone,body.immersive .physical-mat .rune-deck-zone,body.immersive .physical-mat .command-zone>div{padding:3px} /* Highlight the current point with a solid, high-contrast gold fill. */ body.immersive .shared-field>.edge-score .score-track span.scored{background:#e5bd58;color:#171109;border-color:#ffe7a3;font-weight:900;outline:2px solid #ffe7a3;outline-offset:2px;box-shadow:0 0 12px #e5bd5866} /* Mirror the left field: scores meet inside, battlefield cards sit outside. */ body.immersive .battlefield-band>.shared-field:first-child{grid-template-columns:minmax(0,1fr) var(--score-rail)} body.immersive .battlefield-band>.shared-field:first-child>.edge-score{grid-column:2} body.immersive .battlefield-band>.shared-field:first-child>.field-army, body.immersive .battlefield-band>.shared-field:first-child>.battlefield-totals{grid-column:1} body.immersive .battlefield-band>.shared-field:first-child>.field-center{left:10px;right:auto} body.immersive .battlefield-band>.shared-field:first-child>.field-army.enemy-army{padding-left:clamp(100px,13vw,212px);padding-right:8px;flex-direction:row-reverse} body.immersive .battlefield-band>.shared-field:first-child>.hidden-slots{left:6px;right:auto} @media(max-width:800px){body.immersive .battlefield-band>.shared-field:first-child>.field-army.enemy-army{padding-left:110px}} /* Keep instructions and the differences between action variants easy to scan. */ #effect-play-help{font-size:13px;line-height:1.5;color:#e6d3ac;margin:8px 0 14px;max-width:72ch} .choice-action{display:block;font-size:13px;line-height:1.45;font-weight:700;white-space:normal;overflow-wrap:anywhere} .choice-detail{display:block;margin-top:5px;font-size:12px;line-height:1.45;color:#e9cf96;white-space:normal;overflow-wrap:anywhere} #move-tray.priority-tray .visual-choice{align-self:start} /* Match results: sculpted metal over the battlefield. */ #match-end{--end-highlight:#fff0b5;--end-metal:#b99550;--end-shadow:#332719;--end-glow:66,199,255;width:min(760px,96vw);max-height:96dvh;padding:54px 38px 24px;overflow:auto;text-align:center;color:#f3e8ca;background:transparent;border:0;border-radius:0;box-shadow:none;isolation:isolate} #match-end[data-outcome="defeat"]{--end-highlight:#f5c1a1;--end-metal:#a55644;--end-shadow:#331313;--end-glow:229,48,48} #match-end[data-outcome="draw"]{--end-highlight:#e4eaf6;--end-metal:#8b9eb6;--end-shadow:#202937;--end-glow:145,167,205} #match-end::backdrop{background:radial-gradient(ellipse at 50% 42%,#040c1399,#02060de8);backdrop-filter:blur(3px)} #match-end .end-aura{position:absolute;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(ellipse at 50% 35%,rgba(var(--end-glow),.3),transparent 57%)} #match-end .end-aura::before,#match-end .end-aura::after{content:'';position:absolute;left:50%;top:34%;width:240px;height:240px;border:1px solid rgba(var(--end-glow),.42);box-shadow:0 0 35px rgba(var(--end-glow),.2),inset 0 0 35px rgba(var(--end-glow),.15);transform:translate(-50%,-50%) rotate(45deg)} #match-end .end-aura::after{width:285px;height:285px;transform:translate(-50%,-50%) rotate(30deg);opacity:.35} #match-end .end-kicker{margin:0 0 18px;color:#cccfce;font-size:10px;font-weight:600;letter-spacing:.38em} #match-end .end-crest{position:relative;width:100%;filter:drop-shadow(0 0 18px rgba(var(--end-glow),.5)) drop-shadow(0 12px 18px #000)} #match-end .end-frame{display:block;width:100%;height:auto} #match-end h2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding-bottom:5px;color:var(--end-highlight);font:700 clamp(36px,8vw,78px)/1 Georgia,'Times New Roman',serif;letter-spacing:.075em;text-transform:uppercase;text-shadow:0 2px 0 var(--end-metal),0 4px 2px #000,0 0 25px rgba(var(--end-glow),.3)} #match-end .end-summary{width:min(390px,100%);margin:30px auto 0} #match-end #end-score-label{margin:0;color:#b9b9b6;font-size:10px;letter-spacing:.24em} #match-end #end-score{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;gap:12px;margin:14px 0 0} #match-end .end-player{display:flex;flex-direction:column;min-width:0;gap:3px} #match-end .end-player-name{color:#d3d6d7;font-size:13px;overflow-wrap:anywhere} #match-end .end-player strong{color:#aab2bc;font:400 40px/1.2 Georgia,serif;font-variant-numeric:tabular-nums} #match-end .end-player.is-winner strong{color:var(--end-highlight);text-shadow:0 0 20px rgba(var(--end-glow),.4)} #match-end .end-score-divider{color:#72818b;font-size:20px} #match-end #end-detail{margin:18px 0 0;color:#b8c1c9;font-size:13px;line-height:1.6} #match-end .end-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px} #match-end button{min-width:155px;padding:12px 22px;border:1px solid #65727c;border-radius:2px;background:#101a22;color:#d5dde1;font-size:12px;letter-spacing:.06em;transition:filter .2s,box-shadow .2s} #match-end #end-rematch{border-color:var(--end-metal);background:linear-gradient(#39404a,#121c26);color:var(--end-highlight);box-shadow:inset 0 0 0 2px #10161e,0 0 20px rgba(var(--end-glow),.12)} #match-end button:hover:not(:disabled){filter:brightness(1.25);box-shadow:0 0 22px rgba(var(--end-glow),.25)} #match-end button:focus-visible{outline:2px solid var(--end-highlight);outline-offset:4px} #match-end #end-wait{font-size:12px;color:#bdc8d2;min-height:18px;margin:18px 0 0} #match-end[open] .end-crest{animation:end-reveal .7s cubic-bezier(.16,1,.3,1) both} #match-end[open] .end-summary,#match-end[open] .end-buttons{animation:end-reveal .65s .15s both} @keyframes end-reveal{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}} @media(max-width:480px){#match-end{padding:42px 8px 18px}#match-end h2{font-size:clamp(28px,9vw,43px)}#match-end .end-summary{padding:0 20px;margin-top:24px}#match-end .end-buttons{gap:10px}#match-end button{min-width:135px;padding:12px}#match-end .end-aura::before{width:175px;height:175px}#match-end .end-aura::after{width:205px;height:205px}} @media(prefers-reduced-motion:reduce){#match-end[open] .end-crest,#match-end[open] .end-summary,#match-end[open] .end-buttons{animation:none}} /* Spatial action guidance: the board stays visible while the player chooses. */ #board-guide-layer{position:fixed;inset:0;z-index:65;pointer-events:none} #board-guide-layer>svg{position:absolute;width:100%;height:100%;overflow:visible} #board-guide-layer>svg>path{fill:none;stroke:#6bffe4;stroke-width:3;stroke-dasharray:8 5;filter:drop-shadow(0 1px 3px #000);opacity:.8} #board-guide-layer>svg>path.picked-arrow{stroke:#ffe291;stroke-dasharray:none} .board-guide-target{outline:4px solid #6bffe4!important;outline-offset:4px;box-shadow:0 0 22px #41ead477!important;cursor:pointer!important} .board-guide-picked{outline:4px solid #ffe291!important;outline-offset:4px;box-shadow:0 0 24px #ffe29166!important} .board-guide-source{outline:3px solid #fff!important;outline-offset:3px} .board-guide-badge{position:fixed;pointer-events:auto;width:max-content;max-width:180px;padding:6px 9px;border:2px solid #6bffe4;background:#072d2b;color:#fff;border-radius:7px;font-size:12px;line-height:1.3;box-shadow:0 2px 8px #000;white-space:normal} .board-guide-badge:disabled{opacity:1;border-color:#ffe291;background:#33280e;color:#ffe291;pointer-events:none} #board-guide-bar{position:fixed;z-index:66;left:50%;bottom:12px;transform:translateX(-50%);width:min(760px,calc(100vw - 24px));max-height:28dvh;overflow:auto;padding:12px 16px;border:2px solid #6bffe4;border-radius:12px;background:#101d1ef5;color:#fff;box-shadow:0 4px 24px #0009} #board-guide-bar[hidden]{display:none} .board-guide-heading{display:flex;align-items:center;gap:8px}.board-guide-heading strong{flex:1;font-size:16px} #board-guide-bar p{font-size:13px;line-height:1.4;margin:7px 0;color:#d4eee8} #board-guide-bar button{font-size:12px;padding:7px 10px;white-space:normal} .board-guide-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.board-guide-controls .primary{flex:1 1 240px} #board-guide-bar details{font-size:12px;margin:5px 0} #board-guide-bar button:focus-visible,.board-guide-badge:focus-visible{outline:3px solid white;outline-offset:3px} @media(max-width:600px){#board-guide-bar{bottom:6px;padding:9px;max-height:25dvh}.board-guide-heading strong{font-size:14px}.board-guide-badge{font-size:11px;max-width:155px}.board-guide-controls button{min-height:40px}} /* Compact turn info leaves the opponent's base available for cards. */ .turn-guide .turn-guide-toggle{float:right;margin:0 0 4px 8px;padding:4px 9px;min-height:28px;border:1px solid #73869b;border-radius:5px;background:#233448;color:#e5edf5;font:12px/1.4 system-ui;cursor:pointer} .turn-guide .turn-guide-toggle:hover{background:#354e68} .turn-guide .turn-guide-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px} .turn-guide.is-compact{display:flow-root;padding:5px 8px} .turn-guide.is-compact .phase-heading{display:block;font-size:12px;line-height:28px} .turn-guide.is-compact .phase-heading>span, .turn-guide.is-compact .phase-track, .turn-guide.is-compact .phase-steps, .turn-guide.is-compact #tutorial-coach p{display:none} .turn-guide.is-compact #tutorial-coach{clear:both;margin:3px 0 0;padding:4px 0;max-height:none} .turn-guide.is-compact #tutorial-coach strong{font-size:12px} .turn-guide.is-compact #tutorial-coach button{min-height:28px;padding:4px 8px;font-size:12px} .turn-guide.is-compact .turn-controls:has(#quick-pass:not([hidden])){clear:both;margin-top:3px;padding-top:3px} .turn-guide.is-compact .turn-controls #quick-pass{min-height:28px;padding:4px 12px} #board-guide-info{position:fixed;right:16px;top:160px;z-index:67;padding:8px 12px;border:1px solid #6bffe4;border-radius:8px;background:#102928;color:white} #board-guide-info[hidden]{display:none} #board-guide-bar{left:auto;right:16px;top:205px;bottom:auto;transform:none;width:min(380px,calc(100vw - 32px));max-height:40dvh} .board-guide-inline{max-width:195px;font-size:11px} .board-guide-choice-tray{position:fixed;pointer-events:auto;left:12px;bottom:12px;width:min(720px,calc(100vw - 24px));max-height:34dvh;box-sizing:border-box;overflow:auto;padding:12px;border:2px solid #6bffe4;border-radius:12px;background:#101d1ef5;color:#fff;box-shadow:0 4px 24px #0009} .board-guide-choice-tray>p{margin:0 0 10px;font-size:13px;line-height:1.4;overflow-wrap:anywhere} .board-guide-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:8px} .board-guide-choice-grid>button{position:static;width:100%;max-width:none;min-width:0;min-height:44px;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.4} @media(max-width:600px){#board-guide-info{right:8px;top:85px}#board-guide-bar{right:8px;top:130px;bottom:auto;max-height:32dvh}} .board-selection-confirm{position:fixed;pointer-events:auto;right:16px;top:110px;max-width:220px;padding:10px 14px;border:2px solid #6bffe4;border-radius:8px;background:#102928;color:#fff;z-index:66} @media(max-width:600px){.board-selection-confirm{top:36px;right:8px;font-size:12px}} /* Responsive table sizing. The scroll surface owns overflow; rows keep enough space for their cards, including on short laptops and zoomed browsers. */ body.immersive main,body.immersive #play,body.immersive #room,body.immersive #game,body.immersive .table-layout,body.immersive .table-layout>div{min-width:0;max-width:100%;box-sizing:border-box} body.immersive .table-layout>div, body.immersive .table-layout>div:has(.with-coach){display:block;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding:16px} body.immersive #mat-surface{width:calc(100% - 24px);max-width:2400px;margin:0 auto;height:auto;min-height:100%;--table-card:clamp(58px,min(6vw,9dvh),108px);--zone-height:calc(var(--table-card)*1.397 + 34px);--visible-hand-card:clamp(64px,8dvh,96px)} body.immersive #mat-surface #battleboard, body.immersive #mat-surface #battleboard:has(.shared-field), body.immersive #mat-surface #battleboard:has(.turn-guide){display:flex;flex-direction:column;gap:10px;height:auto;min-height:calc(100dvh - 24px);max-height:none;padding:10px 10px calc(var(--visible-hand-height) + 20px);box-sizing:border-box} body.immersive #battleboard>.opponent-hand{flex:0 0 28px} body.immersive #battleboard>.physical-mat{flex:none;grid-template-rows:auto auto auto;gap:5px;width:100%;min-width:0} body.immersive .mat-heading{font-size:10px;line-height:1.4;overflow-wrap:anywhere} body.immersive .player-resources{flex-wrap:wrap;gap:5px 12px;min-width:0;font-size:11px;line-height:1.5} body.immersive .player-resources b{font-size:12px} body.immersive .mat-grid,body.immersive .opponent-mat .mat-grid{height:auto;min-width:0;grid-template-rows:var(--zone-height)} body.immersive .mat-grid>*{min-width:0} body.immersive .mat-grid .command-zone>div:first-child{grid-area:legend} body.immersive .mat-grid .command-zone>div:last-child{grid-area:champion} body.immersive .mat-grid .base-zone{grid-area:base} body.immersive .mat-grid .main-zone{grid-area:main} body.immersive .mat-grid .trash-zone{grid-area:trash} body.immersive .mat-zone label{font-size:9px;line-height:1.3;letter-spacing:.04em;overflow-wrap:anywhere} body.immersive .mat-zone .browse-trash{max-width:100%;white-space:normal;overflow-wrap:anywhere} body.immersive .base-zone>.mat-cards{height:calc(100% - 20px);justify-content:safe center} body.immersive .rune-row{grid-auto-columns:clamp(42px,4vw,64px)} body.immersive #battleboard>.turn-guide{flex:none;width:100%;box-sizing:border-box;max-width:none;min-height:0} body.immersive .battlefield-row{flex:1 0 auto;min-width:0;overflow:visible} body.immersive .battlefield-row .battlefield-band{height:auto;min-height:360px;align-items:stretch} body.immersive .shared-field{min-width:0;min-height:360px} body.immersive .shared-field>.field-army, body.immersive .shared-field>.field-army.enemy-army{overflow:auto;justify-content:safe center;gap:12px} body.immersive .shared-field .field-army .unit-stack{min-width:calc(var(--table-card)*1.5);flex:1 0 calc(var(--table-card)*1.5)} body.immersive .shared-field .battlefield-totals .lane-total{white-space:normal;flex-wrap:wrap;gap:3px 10px;overflow-wrap:anywhere} body.immersive #hand-layer{position:sticky;bottom:8px;height:var(--visible-hand-height);margin-top:calc(-1*var(--visible-hand-height) - 12px);margin-bottom:12px} body.immersive #hand-layer #hand{width:100%;max-width:100%;box-sizing:border-box;justify-content:safe center;overflow-x:auto;overflow-y:hidden;container-type:inline-size} body.immersive #hand-layer .card:not(:first-child){margin-left:clamp(calc(24px - var(--visible-hand-card)),calc((100cqw - var(--visible-hand-card) - 16px)/max(1,var(--hand-count,1) - 1) - var(--visible-hand-card)),calc(var(--visible-hand-card)*-.28))} body.immersive #table-guide{height:auto;max-height:none;padding:6px 12px 12px} dialog{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto} body.immersive :is(#game-hud,#match-info,#action-story,#move-tray).custom-panel-position{box-sizing:border-box;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto} @media(max-width:1099px){ body.immersive .mat-grid,body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:'legend champion main trash' 'base base runes rune-deck';grid-template-rows:var(--zone-height) var(--zone-height);gap:6px} body.immersive .opponent-mat .mat-grid .runes-zone,body.immersive .opponent-mat .mat-grid .rune-deck-zone{grid-row:2} body.immersive .battlefield-row .battlefield-band{grid-template-columns:minmax(0,1fr);gap:12px} body.immersive .shared-field>.field-center{width:105px} body.immersive .shared-field>.field-army.enemy-army{padding-right:116px} body.immersive .battlefield-band>.shared-field:first-child>.field-army.enemy-army{padding-left:116px;padding-right:8px} body.immersive .shared-field>.opponent-hidden{top:96px} body.immersive .shared-field .field-army .mat-card{--lane-card:64px} } /* Smaller tutorial battlefield cards leave the army and totals unobstructed. */ body.immersive:has(#battleboard .with-coach) .shared-field{--tutorial-field-card:clamp(64px,7vw,100px)} body.immersive:has(#battleboard .with-coach) .shared-field>.field-center{width:var(--tutorial-field-card);height:calc(var(--tutorial-field-card)*.716);max-height:80px} body.immersive:has(#battleboard .with-coach) .shared-field>.field-army.enemy-army{padding-right:calc(var(--tutorial-field-card) + 20px)} body.immersive:has(#battleboard .with-coach) .battlefield-band>.shared-field:first-child>.field-army.enemy-army{padding-left:calc(var(--tutorial-field-card) + 20px);padding-right:8px} body.immersive:has(#battleboard .with-coach) .shared-field>.opponent-hidden{top:calc(var(--tutorial-field-card)*.716 + 20px)} /* Extra battlefields share the left lane instead of adding another table row. */ body.immersive .battlefield-band>.shared-field:first-child, body.immersive .battlefield-band>.extra-battlefield{grid-column:1;grid-row:1} body.immersive .battlefield-band>.shared-field:nth-child(2){grid-column:2;grid-row:1} /* Retain the covered field's dimensions so revealing an overlay never shifts the table. */ body.immersive .battlefield-band>.shared-field:first-child[hidden]{display:grid!important;visibility:hidden;pointer-events:none} body.immersive .battlefield-band>.extra-battlefield{grid-template-columns:minmax(0,1fr);border:2px solid #bd91e9;box-shadow:0 0 18px #9f65cf33} body.immersive .battlefield-band>.extra-battlefield>.field-army, body.immersive .battlefield-band>.extra-battlefield>.battlefield-totals{grid-column:1} #extra-battlefield-controls{position:fixed;left:12px;bottom:70px;z-index:41;display:flex;flex-direction:column;gap:6px;max-width:min(220px,calc(100vw - 24px));max-height:35dvh;overflow:auto} #extra-battlefield-controls button{min-height:42px;padding:9px 13px;border:1px solid #b595d2;border-radius:8px;background:#22182ff5;color:#f0ddff;font-size:12px;white-space:normal;overflow-wrap:anywhere;box-shadow:0 3px 12px #0008} #extra-battlefield-controls button[aria-expanded=true]{background:#634181;border-color:#e2bdff} #extra-battlefield-controls button:focus-visible{outline:2px solid #fff;outline-offset:2px} body:not(.immersive)>#extra-battlefield-controls{display:none} @media(max-width:1099px){body.immersive .battlefield-band>.shared-field:nth-child(2){grid-column:1;grid-row:2}} @media(max-width:540px){ body.immersive #mat-surface{width:calc(100% - 12px);--table-card:52px;--zone-height:112px} body.immersive #mat-surface #battleboard:has(.shared-field){padding-left:6px;padding-right:6px;gap:12px} body.immersive .mat-grid,body.immersive .opponent-mat .mat-grid{grid-template-areas:'legend champion main trash' 'base base base base' 'rune-deck runes runes runes';grid-template-rows:112px 118px 108px} body.immersive .opponent-mat .mat-grid .runes-zone,body.immersive .opponent-mat .mat-grid .rune-deck-zone{grid-row:3} body.immersive .player-resources,body.immersive .opponent-mat .player-resources{justify-content:flex-start;font-size:10px;gap:4px 8px} body.immersive .shared-field{--score-rail:34px;padding:6px;gap:6px} body.immersive .shared-field>.field-center{width:86px;top:8px} body.immersive .shared-field>.field-army.enemy-army{padding-right:92px} body.immersive .battlefield-band>.shared-field:first-child>.field-army.enemy-army{padding-left:92px} body.immersive .shared-field .field-army .unit-stack{min-width:74px;flex-basis:74px} body.immersive .shared-field .field-army .mat-card{--lane-card:52px} body.immersive .shared-field>.edge-score{padding:6px 2px} body.immersive .shared-field>.edge-score .score-track span{width:26px;height:26px;font-size:14px} body.immersive .shared-field>.edge-score>small{font-size:8px;overflow-wrap:anywhere} .phase-steps{grid-template-columns:repeat(3,minmax(0,1fr))} .turn-guide .phase-heading{overflow-wrap:anywhere} #tutorial-coach{flex-wrap:wrap;max-height:none} #tutorial-coach>div{min-width:0;flex:1 1 180px} .board-guide-heading{flex-wrap:wrap} body:not(.immersive)>header{flex-wrap:wrap;gap:10px} body:not(.immersive) main{padding:12px} .workshop,.toolbar,.deck-tools{min-width:0} .toolbar{flex-wrap:wrap} .toolbar input,.toolbar select,.deck-tools select{min-width:0;max-width:100%} } /* Keep one-step undo alongside the live turn action, including response choices. */ .turn-controls:has(#undo-action:not([hidden])){display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #43536a;padding-top:7px;margin-top:7px} .turn-controls #undo-action{min-height:40px;margin:0;padding:9px 16px;border:1px solid #8b805e;border-radius:7px;background:#29271f;color:#e3d2ae;font-size:13px;font-weight:700} .turn-controls #undo-action:hover:not(:disabled){background:#403a29} .turn-controls #undo-action:disabled{opacity:.4;cursor:not-allowed} .turn-controls #undo-action:focus-visible{outline:2px solid #fff;outline-offset:3px} .turn-guide.is-compact .turn-controls #undo-action{min-height:28px;padding:4px 12px} .turn-guide.is-compact{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px} .turn-guide.is-compact .phase-heading{flex:1;min-width:180px;order:0} .turn-guide.is-compact .turn-guide-toggle{float:none;margin:0;order:2} .turn-guide.is-compact .turn-controls{order:1;gap:8px;border-top:0;margin:0;padding:0} .turn-guide.is-compact #tutorial-coach{order:3;flex-basis:100%} body.replaying #undo-action{display:none!important} /* Give the battlefields the room released by minimizing tutorial info. */ body.immersive #battleboard:has(>.turn-guide.with-coach.is-compact)>.battlefield-row{display:flex;flex-direction:column;--compact-field-height:460px} body.immersive #battleboard:has(>.turn-guide.with-coach.is-compact)>.battlefield-row>.battlefield-band{flex:1;min-height:var(--compact-field-height)} body.immersive #battleboard:has(>.turn-guide.with-coach.is-compact) .shared-field{min-height:var(--compact-field-height)} @media(max-width:1099px){ body.immersive #battleboard:has(>.turn-guide.with-coach.is-compact)>.battlefield-row{--compact-field-height:410px} } #replay-restore{border-color:#bf955a;background:#553b22;color:#ffdfaa;font-weight:700} #replay-restore:hover:not(:disabled){background:#71502e} #replay-restore:disabled{opacity:.45;cursor:not-allowed} #replay-restore-note{max-width:160px;font-size:10px;line-height:1.3;color:#e0bc86} @media(max-width:650px){#replay-bar:has(#replay-restore:not([hidden])){flex-wrap:wrap}#replay-restore-note{max-width:none;flex-basis:100%;text-align:center}} /* Both bases fill their lanes, including full-size sideways exhausted cards. */ body.immersive .base-zone>.mat-cards>.mat-card{--base-card:calc((100cqh - 10px)*.716)} body.immersive .base-zone>.mat-cards>.mat-card.exhausted{--base-card:calc(100cqh - 10px);width:calc(var(--base-card)*1.397);max-width:none;flex-basis:calc(var(--base-card)*1.397);height:var(--base-card)} body.immersive .base-zone>.mat-cards>.mat-card.exhausted img{position:absolute;left:50%;top:50%;width:var(--base-card);height:calc(var(--base-card)*1.397);max-height:none;transform:translate(-50%,-50%) rotate(90deg)} /* Fill each column two high, then shrink columns to fit the current rune count. */ body.immersive .rune-row{--rune-gap:6px;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:min(calc((100% - (var(--rune-columns,1) - 1)*var(--rune-gap))/var(--rune-columns,1)),calc((var(--zone-height) - 40px)*.6985));gap:var(--rune-gap);padding:5px;align-items:stretch} body.immersive .rune-row .mat-card{container-type:size;min-width:0} body.immersive .rune-row .mat-card img{width:100%;height:100%;max-height:none;flex:none;object-fit:contain} body.immersive .rune-row .mat-card.exhausted img{position:absolute;left:50%;top:50%;width:min(100cqh,71.6cqw);height:min(139.7cqh,100cqw);transform:translate(-50%,-50%) rotate(90deg)} /* Desktop tables fit as one surface. Width-only breakpoints must not stack battlefields when OS scaling reduces the browser's CSS pixel width. */ @media(min-width:700px){ body.immersive .table-layout>div,body.immersive .table-layout>div:has(.with-coach){overflow:hidden} body.immersive #mat-surface{min-height:0;max-width:none;height:auto;--table-card:clamp(58px,7dvh,100px);--zone-height:calc(var(--table-card)*3.074 + 34px);--visible-hand-card:clamp(64px,8dvh,96px)} body.immersive #mat-surface #battleboard, body.immersive #mat-surface #battleboard:has(.shared-field), body.immersive #mat-surface #battleboard:has(.turn-guide){min-height:0;height:var(--fitted-table-height,auto)} body.immersive #battleboard>.battlefield-row{display:flex;flex-direction:column} body.immersive #battleboard>.battlefield-row>.battlefield-band{flex:1} body.immersive .mat-grid,body.immersive .opponent-mat .mat-grid{grid-template-columns:calc(var(--table-card) + 10px) minmax(80px,.8fr) minmax(110px,1.4fr) repeat(4,calc(var(--table-card) + 10px));grid-template-areas:'rune-deck runes base legend champion main trash';grid-template-rows:var(--zone-height)} body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(4,calc(var(--table-card) + 10px)) minmax(110px,1.4fr) minmax(80px,.8fr) calc(var(--table-card) + 10px);grid-template-areas:'trash main legend champion base runes rune-deck'} body.immersive .opponent-mat .mat-grid .runes-zone,body.immersive .opponent-mat .mat-grid .rune-deck-zone{grid-row:1} body.immersive .battlefield-row .battlefield-band{grid-template-columns:repeat(2,minmax(0,1fr));min-height:320px;height:auto} body.immersive .battlefield-band>.shared-field:nth-child(2){grid-column:2;grid-row:1} body.immersive .shared-field{min-height:320px} body.immersive #battleboard:has(>.turn-guide.with-coach.is-compact)>.battlefield-row{--compact-field-height:320px} body.immersive #hand-layer{position:absolute;bottom:8px;margin:0} body.immersive #table-guide:empty{display:none} } /* Turn actions share the top of your base instead of a separate table row. */ #battleboard .base-zone>.turn-controls{display:none;position:absolute;top:0;right:8px;left:8px;justify-content:center;align-items:center;gap:8px;margin:0;padding:0;border:0;z-index:4;background:transparent} #battleboard .base-zone>.turn-controls:has(button:not([hidden])){display:flex} #battleboard .base-zone:has(>.turn-controls button:not([hidden]))>label{min-height:44px;box-sizing:border-box;padding-right:70%;margin:0} body.immersive #battleboard .base-zone:has(>.turn-controls button:not([hidden]))>.mat-cards{height:calc(100% - 44px)} /* Larger command cards in a two-by-two block on your playmat. */ body.immersive .physical-mat:not(.opponent-mat) .mat-grid{--command-card:calc(var(--table-card)*1.215);grid-template-columns:calc(var(--table-card) + 10px) minmax(80px,.8fr) minmax(110px,1.4fr) repeat(2,calc(var(--command-card) + 10px));grid-template-areas:'rune-deck runes base legend champion' 'rune-deck runes base main trash';grid-template-rows:repeat(2,auto);gap:8px} body.immersive .physical-mat .command-zone>div .mat-card,body.immersive .physical-mat .main-zone .deck-stack,body.immersive .physical-mat .trash-zone .mat-card{width:100%;max-width:var(--command-card);margin:0 auto} body.immersive .physical-mat .trash-zone .mat-card img{width:100%;height:auto;aspect-ratio:744/1039;object-fit:contain} body.immersive .physical-mat .trash-zone,body.immersive .physical-mat .command-zone>div,body.immersive .physical-mat .main-zone{align-self:stretch;padding:5px} body.immersive .physical-mat .trash-zone .empty-slot,body.immersive .physical-mat .command-zone .empty-slot{width:100%;aspect-ratio:744/1039;min-height:0} .trash-zone{display:block;text-align:left;cursor:pointer;color:inherit;font:inherit} .trash-zone:hover{border-color:#ffe2a0;background:#29211688} .trash-zone:focus-visible{outline:2px solid #ffe2a0;outline-offset:3px} .trash-zone label{cursor:inherit;pointer-events:none} @media(max-width:1099px){ body.immersive .physical-mat:not(.opponent-mat) .mat-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'legend champion' 'main trash' 'base base' 'rune-deck runes';grid-template-rows:auto auto minmax(118px,auto) auto} } /* Mirror the command block and give both bases the same usable height. */ body.immersive .opponent-mat .mat-grid{--command-card:calc(var(--table-card)*1.215);grid-template-columns:repeat(2,calc(var(--command-card) + 10px)) minmax(110px,1.4fr) minmax(80px,.8fr) calc(var(--table-card) + 10px);grid-template-areas:'trash main base runes rune-deck' 'champion legend base runes rune-deck';gap:8px} body.immersive .physical-mat:not(.opponent-mat) .mat-grid,body.immersive .opponent-mat .mat-grid{grid-template-rows:repeat(2,calc(var(--command-card)*1.397 + 36px))} body.immersive .opponent-mat .mat-grid .command-zone>div:first-child{grid-area:legend} body.immersive .opponent-mat .mat-grid .command-zone>div:last-child{grid-area:champion} body.immersive .opponent-mat .mat-grid .main-zone{grid-area:main} body.immersive .opponent-mat .mat-grid .trash-zone{grid-area:trash} body.immersive .opponent-mat .mat-grid .base-zone{grid-area:base} body.immersive .physical-mat .mat-grid .runes-zone{grid-area:runes} body.immersive .physical-mat .mat-grid .rune-deck-zone{grid-area:rune-deck} @media(max-width:1099px){ body.immersive .opponent-mat .mat-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'trash main' 'champion legend' 'base base' 'runes rune-deck'} body.immersive .physical-mat:not(.opponent-mat) .mat-grid,body.immersive .opponent-mat .mat-grid{grid-template-rows:repeat(2,calc(var(--command-card)*1.397 + 36px)) minmax(162px,auto) auto} } /* Base rows shrink with population and overlap without hiding card controls. */ body.immersive .base-zone>.mat-cards{gap:0;justify-content:safe center;isolation:isolate} body.immersive .base-zone>.mat-cards>.mat-card, body.immersive .base-zone>.mat-cards>.mat-card.exhausted{--base-card:var(--fitted-base-card,80px);z-index:var(--stack-index,1)} body.immersive .base-zone>.mat-cards>.mat-card:is(:hover,:focus-visible){z-index:50;filter:brightness(1.08)} /* Battlefield cards use their army row before shrinking or overlapping. */ body.immersive .shared-field .field-army .unit-stack{max-width:none;min-width:0;min-height:0;flex:1 1 0;box-sizing:border-box} body.immersive .shared-field .field-army .unit-stack>.mat-card{--lane-card:var(--fitted-lane-card,64px)} /* Transfer ten percent of both two-row playmats to the battlefields. */ @media(min-width:1100px){ body.immersive #battleboard{--battlefield-space-bonus:calc(var(--table-card)*.75438 + 16px)} body.immersive #battleboard>.battlefield-row>.battlefield-band, body.immersive #battleboard .shared-field{min-height:calc(406px + var(--battlefield-space-bonus))} body.immersive #battleboard:has(>.turn-guide.with-coach.is-compact)>.battlefield-row{--compact-field-height:calc(406px + var(--battlefield-space-bonus))} } /* Opponent hand count shares the top of their base. */ body.immersive #battleboard .base-zone>.opponent-hand{position:absolute;top:-24px;left:8px;right:8px;display:flex;align-items:center;justify-content:center;height:40px;min-height:0;margin:0;padding:0;z-index:4;pointer-events:none} body.immersive #battleboard .base-zone>.opponent-hand .hand-back{width:22px;height:28px;font-size:12px;margin-left:-6px} body.immersive #battleboard .base-zone:has(>.opponent-hand)>label{min-height:44px;box-sizing:border-box;margin:0} body.immersive #battleboard .base-zone:has(>.opponent-hand)>.mat-cards{height:calc(100% - 44px)} body.immersive #battleboard .base-zone:has(>.opponent-hand){overflow:visible} body.immersive #battleboard .base-zone>.opponent-hand small{font-size:18px;line-height:1.4;font-weight:600;color:#f3dea4;margin-left:12px} /* Recycle selections need room for full card faces and a persistent confirmation. */ body.immersive #action-dock #move-tray.recycle-choice:not(.art-only):not(.mulligan-choice){position:fixed!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;display:flex;flex-direction:column;gap:12px;width:min(880px,calc(100vw - 24px))!important;height:auto!important;min-height:0;max-height:calc(100dvh - 24px)!important;padding:20px;overflow:hidden;background:#191611;color:#fff1d0;border:1px solid #c4a05b;box-shadow:0 0 0 100vmax #05040399,0 20px 70px #000c;z-index:24} #move-tray.recycle-choice :is(.action-panel-resize,.action-panel-compact,.panel-drag-handle){display:none} #move-tray.recycle-choice #tray-title{flex:none;margin:0;padding:0;font-size:20px;line-height:1.3} #move-tray.recycle-choice #effect-play-help{flex:none;margin:0;color:#eadbbf;font-size:14px} #move-tray.recycle-choice:not(.art-only):not(.mulligan-choice) #visual-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,180px));justify-content:center;align-content:start;align-items:start;gap:12px;min-height:0;flex:0 1 auto;max-height:none;overflow-x:hidden;overflow-y:auto;padding:4px;touch-action:pan-y} #move-tray.recycle-choice .visual-choice.image-choice{position:relative;width:100%;min-width:0;max-width:none;margin:0;padding:4px;border:2px solid #79653d;border-radius:9px;background:#252018;touch-action:pan-y} #move-tray.recycle-choice .visual-choice.image-choice img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:5px} #move-tray.recycle-choice .visual-choice.image-choice.selected{border-color:#a9f6b3;background:#355640;box-shadow:0 0 0 2px #a9f6b344} #move-tray.recycle-choice .visual-choice.image-choice.selected::after{content:'Selected';position:absolute;bottom:8px;left:8px;right:8px;padding:4px;border-radius:4px;background:#c7f6cf;color:#153620;font-size:12px;font-weight:800;text-align:center} #move-tray.recycle-choice #confirm-visual{flex:none;align-self:center;min-width:200px;max-width:100%;margin:0;padding:12px 20px;background:#dfbd74;color:#21190e} @media(max-width:600px){body.immersive #action-dock #move-tray.recycle-choice:not(.art-only):not(.mulligan-choice){padding:14px;gap:10px}#move-tray.recycle-choice #tray-title{font-size:17px}#move-tray.recycle-choice:not(.art-only):not(.mulligan-choice) #visual-choices{grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:8px}} /* Action choices stay attached to the card they describe. */ .board-guide-card-actions{position:fixed;pointer-events:auto;display:flex;flex-direction:column;gap:12px;width:min(340px,calc(100vw - 16px));max-height:calc(100dvh - 32px);padding:14px;border:2px solid #8bf5df;border-radius:12px;background:#101e21;color:#fff;box-shadow:0 12px 36px #000d;z-index:2} .board-guide-card-actions>strong{font-size:16px;line-height:1.35;color:#ffe6a2;overflow-wrap:anywhere} .board-guide-card-options{display:grid;gap:10px;min-height:0;overflow:auto;padding:3px} .board-guide-card-options>.board-guide-inline{position:static;display:block;width:100%;max-width:none;min-height:48px;padding:12px;text-align:left;font-size:14px;line-height:1.45;border-color:#70cbbb;background:#173c3b;color:#fff;box-shadow:none;overflow-wrap:anywhere;flex-shrink:0} .board-guide-card-options>.board-guide-inline:hover{background:#245651} .board-guide-card-actions::after{content:'';position:absolute;left:var(--card-pointer-x,50%);bottom:-9px;width:14px;height:14px;background:#101e21;border-right:2px solid #8bf5df;border-bottom:2px solid #8bf5df;transform:translateX(-50%) rotate(45deg)} .board-guide-card-actions.below-card::after{bottom:auto;top:-9px;transform:translateX(-50%) rotate(225deg)} .board-guide-action-cards{display:flex;justify-content:center;align-items:start;flex-wrap:wrap;gap:10px;margin-bottom:10px} .board-guide-action-card{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 1 100px;min-width:0;text-align:center;font-size:12px;line-height:1.25;color:#fff1ca} .board-guide-action-card img{display:block;width:100%;height:140px;object-fit:contain;border-radius:5px} .board-guide-action-caption{display:block} /* Riot's attachment layout: the unit covers the gear except its lower effect/Might box. Render only the exposed bands so gear can never obscure the unit, even when focused. */ #battleboard .equipment-stack{--equipment-card-size:var(--fitted-base-card,80px);--equipment-card-height:calc(var(--equipment-card-size)*1.397);--equipment-band:calc(var(--equipment-card-size)*.4);--equipment-tail:calc(var(--equipment-band)*var(--equipment-count));position:relative;isolation:isolate;flex:0 0 var(--equipment-card-size);width:var(--equipment-card-size);height:calc(var(--equipment-card-height) + var(--equipment-tail));margin:0;align-self:safe center;z-index:var(--stack-index,1)} #battleboard .unit-stack>.equipment-stack{--equipment-card-size:var(--fitted-lane-card,64px)} #battleboard .equipment-stack.exhausted{width:calc(var(--equipment-card-height) + var(--equipment-tail));flex-basis:calc(var(--equipment-card-height) + var(--equipment-tail));height:var(--equipment-card-size)} #battleboard .equipment-stack>.mat-card{position:absolute;inset:0 auto auto 0;width:var(--equipment-card-size);max-width:none;height:var(--equipment-card-height);max-height:none;min-height:0;margin:0;padding:0;background:#121212;overflow:visible;transform:none;z-index:2} #battleboard .equipment-stack>.mat-card img{position:static;width:100%;height:100%;max-height:none;object-fit:contain;transform:none;border-radius:6px;opacity:1} #battleboard .equipment-stack.exhausted>.mat-card{left:var(--equipment-tail);width:var(--equipment-card-height);height:var(--equipment-card-size)} #battleboard .equipment-stack.exhausted>.mat-card img{position:absolute;left:50%;top:50%;width:var(--equipment-card-size);height:var(--equipment-card-height);transform:translate(-50%,-50%) rotate(90deg)} #battleboard .equipment-underlay{position:absolute;left:0;top:calc(var(--equipment-card-height) + var(--equipment-band)*var(--equipment-index));width:var(--equipment-card-size);height:var(--equipment-band);z-index:1} #battleboard .equipment-stack>.equipment-underlay>.mat-card{position:absolute;inset:0;width:100%;max-width:none;height:100%;max-height:none;min-height:0;margin:0;padding:0;overflow:hidden;transform:none;background:#171611;border:0;border-radius:0 0 5px 5px;z-index:1;box-shadow:0 2px 4px #0008} #battleboard .equipment-underlay>.mat-card img{position:absolute;inset:auto auto 0 0;width:var(--equipment-card-size);height:var(--equipment-card-height);max-height:none;object-fit:fill;transform:none;opacity:1;border-radius:0} #battleboard .equipment-stack.exhausted>.equipment-underlay{left:calc(var(--equipment-tail) - var(--equipment-band)*(var(--equipment-index) + 1));top:0;width:var(--equipment-band);height:var(--equipment-card-size)} #battleboard .equipment-stack.exhausted>.equipment-underlay>.mat-card{border-radius:5px 0 0 5px} #battleboard .equipment-stack.exhausted>.equipment-underlay>.mat-card img{inset:auto;left:calc(var(--equipment-card-height)*.5);top:50%;width:var(--equipment-card-size);height:var(--equipment-card-height);transform:translate(-50%,-50%) rotate(90deg)} #battleboard .equipment-stack:is(:hover,:focus-within){z-index:50} /* Hovering a carrier reveals its full equipment without disturbing the board stack. */ #hand-hover-preview{z-index:90;max-height:calc(100dvh - 24px)} #hand-hover-preview.with-equipment{pointer-events:auto;overflow:auto} .preview-equipment-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;padding:12px} .preview-equipment-gallery figure{margin:0;min-width:0;text-align:center} #hand-hover-preview.with-equipment .preview-equipment-gallery img{width:100%;height:min(36dvh,280px);max-height:none;object-fit:contain;transform:none} .preview-equipment-gallery figcaption{margin-top:6px;color:#f8e8c3;font-size:13px;line-height:1.35;font-weight:700} #name-card-picker{width:min(820px,94vw);max-height:90dvh;box-sizing:border-box;padding:20px;color:#f8e8c3;background:#171a19;border:1px solid #d8b96e;border-radius:12px;color-scheme:dark} #name-card-picker::backdrop{background:#000b} #name-card-picker[open]{display:flex;flex-direction:column;gap:10px} #name-card-picker h2,#name-card-picker p{margin:0} #name-card-search{box-sizing:border-box;width:100%;min-height:44px;padding:10px;font-size:16px} #name-card-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;overflow:auto;min-height:0;max-height:55dvh} #name-card-options button{display:flex;flex-direction:column;gap:6px;align-items:center;padding:8px;min-height:44px} #name-card-options img{width:100%;height:140px;object-fit:contain;pointer-events:none} #name-card-options button[aria-pressed=true]{border-color:#6bffe4;box-shadow:inset 0 0 0 2px #6bffe4} #name-card-confirm{flex:none;min-height:44px} /* Keep hidden responses beside the board; card art must never size the dialog. */ .hidden-response-dialog{position:fixed;inset:12px 12px auto auto;margin:0;width:380px;max-width:calc(100vw - 24px);max-height:min(600px,calc(100dvh - 24px));padding:16px;overflow:hidden;background:#171a19;color:#f8e8c3;border:1px solid #d8b96e;color-scheme:dark;box-shadow:0 8px 28px #0008} .hidden-response-dialog[open]{display:flex;flex-direction:column;gap:12px} .hidden-response-dialog::backdrop{background:transparent;backdrop-filter:none} .hidden-response-dialog h2{font-size:18px;line-height:1.25;margin:0} .hidden-response-dialog p{font-size:13px;line-height:1.4;margin:0;overflow-wrap:anywhere} .hidden-response-context{color:#ffe2a0} .hidden-response-dialog #hidden-response-help{color:#c6bea9} .hidden-response-cards{min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:14px} .hidden-response-cards section{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 12px;align-items:start} .hidden-response-cards img{grid-column:1;grid-row:1 / span 2;width:64px;height:90px;object-fit:contain;border-radius:4px} .hidden-response-cards strong,.hidden-response-cards section>div{grid-column:2;min-width:0} .hidden-response-cards section>div{display:grid;gap:6px} .hidden-response-dialog button{margin:0;min-height:40px;padding:8px;font-size:12px;line-height:1.35;white-space:normal;overflow-wrap:anywhere} .hidden-response-cards button{text-align:left} .hidden-response-dialog footer{display:flex;gap:8px;flex-shrink:0;margin:0;padding-top:10px;border-top:1px solid #665c42} .hidden-response-dialog footer button{flex:1} /* Absolute card children must stay anchored to the stack, including in flex rows. */ #battleboard .equipment-stack>.mat-card{align-self:flex-start;box-sizing:border-box} #battleboard .equipment-stack>.mat-card>img{display:block;min-height:0;flex-shrink:0} #battleboard .equipment-indicator{position:absolute;left:2px;top:2px;z-index:3;display:grid;place-items:center;min-width:46px;min-height:24px;padding:3px 7px;border:1px solid #ffe09a;border-radius:5px;background:#4b3510;color:#fff2c7;font:bold 12px/1.2 system-ui,sans-serif;box-shadow:0 2px 5px #0009;pointer-events:none} /* Cover the printed Might circle, following its position when the art rotates. */ #battleboard .mat-card .might-badge{min-width:34px;height:34px;padding:0 6px;font-size:24px;border-width:2px;border-radius:8px;top:calc(7.5% - 17px);left:calc(10.5% - 17px);right:auto;z-index:6} #battleboard .mat-card.exhausted .might-badge{top:calc(10.5% - 17px);left:auto;right:calc(7.5% - 17px);bottom:auto} @media(max-width:800px){#battleboard .mat-card .might-badge{min-width:30px;height:30px;font-size:21px}} #battleboard .equipment-indicator{left:auto;right:2px} #battleboard .equipment-stack.exhausted .equipment-indicator{top:auto;bottom:2px} /* Spell announcements open themselves while the server holds the current play. */ body.immersive #action-story.announcing-spell{width:min(400px,calc(100vw - 16px));max-height:60dvh;border-color:#e8c578;box-shadow:0 6px 28px #000b} #action-story.announcing-spell #story-content{display:block} .spell-announcement{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid #8c7447} .spell-announcement img{width:96px;height:134px;object-fit:contain;border-radius:6px} .spell-announcement strong{display:block;color:#ffe5a5;font-size:16px;line-height:1.3} #action-story .spell-announcement p{font-size:13px;line-height:1.45;white-space:pre-wrap} /* Keep the action controls fixed while the full match history scrolls. */ body.immersive #action-story{max-height:70dvh;overflow:hidden} #action-story #story-content{max-height:42dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b49655 #17130c} #action-story #story-content:empty::before{content:'Major actions will appear here.';display:block;padding:12px 0;color:#c8b990} #action-story .action-history-entry{padding:9px 4px;border-bottom:1px solid #a88b4638} #action-story .action-history-entry small{font-size:10px;color:#c7aa68;font-weight:700} #action-story .action-history-entry p{font-size:13px;line-height:1.45;margin:3px 0} #current-spell-story{display:none;clear:both;max-height:28dvh;overflow:auto} #action-story.announcing-spell #current-spell-story{display:block} #action-story.announcing-spell #story-content{max-height:25dvh} body.immersive #action-story.announcing-spell{max-height:78dvh} #action-story.announcing-spell #current-spell-story{max-height:none;overflow:visible} #current-spell-story .spell-details{max-height:27dvh;overflow:auto;overscroll-behavior:contain} #next-ai-spell{display:block;width:100%;min-height:44px;margin:6px 0;background:#e7c36d;color:#20170a;font-size:15px} #action-story .spell-next-help{font-size:12px;line-height:1.35;color:#ead8ad;margin:7px 0} #action-story.announcing-spell #story-content{max-height:20dvh} .spell-outcome{padding:10px 0;border-bottom:1px solid #8c7447;color:#ffe5a5} /* The gear label belongs on the exposed equipment, away from the unit's Might. */ #battleboard .equipment-stack>.equipment-indicator{top:auto;bottom:2px;left:auto;right:2px;max-width:calc(100% - 4px);min-width:0;padding:3px 5px} #battleboard .equipment-stack.exhausted>.equipment-indicator{left:2px;right:auto} /* Public committed spell targets; never intercept board or Next clicks. */ #spell-target-arrows{position:fixed;inset:0;width:100%;height:100%;z-index:64;pointer-events:none;overflow:hidden} #spell-target-arrows .spell-target-line{fill:none;stroke:#ffe291;stroke-width:3;filter:drop-shadow(0 1px 3px #000)} #spell-target-arrows .spell-target-ring{fill:none;stroke:#ffe291;stroke-width:3;filter:drop-shadow(0 1px 3px #000)} .hidden-response-dialog{z-index:70} .hidden-other-responses{display:flex;flex-direction:column;gap:8px;min-height:0;max-height:180px;overflow:auto;flex-shrink:0} .hidden-other-responses h3{margin:0;font-size:14px;color:#ffe291} .hidden-other-responses button{flex-shrink:0;text-align:left}