:root{font-family:"Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;color:#e8e5d9;background:#101c23;font-synthesis:none;--ink:#e8e5d9;--muted:#a7b4b7;--line:#a9b2a32b;--gold:#c9ad72;--paper:#1c2b33;--card-width:154px}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 45%,#29434c60,transparent 70%),#101c23}button,input,select{font:inherit}button,select,summary{cursor:pointer}button{border:1px solid #9aa99d45;border-radius:7px;background:#26383f;padding:9px 13px;color:var(--ink);font-weight:650;transition:background .15s,box-shadow .15s}button:hover:not(:disabled){background:#354c54}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #e4c785;outline-offset:3px}button.primary{background:#c7ad75;border-color:#c7ad75;color:#17252c}button.primary:hover:not(:disabled){background:#e1c790}a{color:inherit}h1,h2,h3,p{margin-top:0}h2{font-size:16px;margin-bottom:10px}h3{font-size:14px}.subtle{font-size:12px;line-height:1.7;color:var(--muted)}.panel{border:1px solid var(--line);border-radius:12px;background:#1a2b32c9}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
.site-header{max-width:1480px;margin:auto;padding:16px 26px;display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:16px;letter-spacing:.08em;font-weight:750}.brand-mark{font-size:32px;color:var(--gold)}.brand small{display:block;font-size:8px;letter-spacing:.15em;margin-top:4px;color:var(--muted);font-weight:500}.header-tools{display:flex;gap:8px;align-items:center}.header-tools>button,.utility>summary{font-size:12px;padding:8px 11px;background:transparent;border:1px solid var(--line);border-radius:7px;list-style:none}.utility{position:relative}.utility>summary::-webkit-details-marker{display:none}.utility[open]>summary{color:var(--gold);border-color:var(--gold)}.utility-content{position:absolute;right:0;top:calc(100% + 12px);width:330px;max-width:calc(100vw - 28px);max-height:75vh;overflow:auto;padding:20px;z-index:20;background:#18282ff5;border:1px solid #b6b5944d;border-radius:12px;box-shadow:0 16px 45px #0008}.quick-rules p{font-size:12px;line-height:1.85;color:#c2ccc9;margin-bottom:12px}.utility-content>button{width:100%;font-size:12px}.music-volume{display:flex;align-items:center;gap:10px;font-size:12px}.music-volume input{min-width:0;width:100%;accent-color:var(--gold)}.music-volume output{min-width:32px}.music-credit{font-size:11px;margin-top:18px;color:var(--muted)}.music-credit p{line-height:1.8;margin:8px 0 0}.ai-controls{border-top:1px solid var(--line);margin-top:18px;padding-top:15px;display:grid;gap:12px}.ai-controls label{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:12px}.ai-controls input{accent-color:var(--gold)}.ai-controls select{width:auto;padding:6px}.download{width:100%;font-size:11px;margin-top:12px}audio{display:none}
main{max-width:1480px;margin:auto;padding:18px 26px 30px}.setup{padding:16px 20px;margin-bottom:16px}.setup>summary{font-size:14px;font-weight:700;list-style:none}.setup:not([open]){display:none}.setup[open]>summary{margin-bottom:20px}.deck-selects{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 160px;gap:15px;align-items:end}.setup label{font-size:12px;color:var(--muted);display:grid;gap:8px}.setup-vs{text-align:center;color:var(--gold);font-family:Georgia,serif;padding-bottom:12px;font-size:13px}select,input[type=number]{width:100%;min-width:0;border:1px solid #c4c6aa36;border-radius:7px;background:#14242c;color:var(--ink);padding:10px;font-size:13px}.advanced-setup{margin-top:18px;font-size:11px;color:var(--muted)}.advanced-setup>div{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px;max-width:600px}.advanced-setup .subtle{margin:10px 0 0}.setup-note{font-size:12px;color:var(--muted);margin:16px 0 0}body:not(.has-game) .setup{max-width:880px;margin:9vh auto 20px;padding:28px}body:not(.has-game) .setup>summary{font-size:24px;margin-bottom:30px}body:not(.has-game) .replay-lab{max-width:880px;margin:20px auto}#error{padding:12px 16px;font-size:13px;border:1px solid #c38a72;border-radius:8px;background:#442d29;color:#ffe0d0;margin-bottom:16px}
.battle-table{border:1px solid #b1b9a229;border-radius:18px;padding:18px 20px 20px;background:radial-gradient(ellipse at 50% 40%,#34545c55,#14262d55 75%);box-shadow:inset 0 0 100px #0002,0 18px 40px #0002;display:grid;gap:16px}.opponent-row{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.4fr);gap:24px;align-items:start;min-height:223px}.opponent-zone{padding:12px 8px}.zone-heading,.play-strip-heading,.hand-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.zone-heading h2,.hand-heading h2{font-size:13px;margin:0;font-weight:650}.zone-heading>span,.hand-heading>span{font-size:11px;color:var(--muted)}.opponent-hand{margin-top:18px}.card-backs{display:flex;align-items:center;overflow-x:auto;padding:8px 3px 12px;scrollbar-width:thin;scrollbar-color:#ad99644d transparent}.card-back{display:block;position:relative;flex:0 0 76px;aspect-ratio:63/88;overflow:hidden;border:1px solid #c0a67066;border-radius:6px;box-shadow:-3px 4px 7px #0006;background:#17232b}.card-back+.card-back{margin-left:-47px}.card-back img{position:absolute;width:109.5238%;height:106.8182%;left:-4.7619%;top:-3.4091%;max-width:none}.hand-caption{display:block;font-size:11px;color:var(--muted);margin-top:6px}.empty-zone{font-size:12px;color:#8da1a4;line-height:1.7}.played-panel{min-width:0;border-left:1px solid var(--line);padding-left:22px}.play-tabs{display:flex;gap:3px}.play-tabs button{padding:6px 9px;font-size:11px;border:0;background:transparent;color:var(--muted)}.play-tabs button[aria-pressed=true]{color:#f0ddb1;background:#b99b6333}.play-strip-heading{min-height:31px}.play-strip-heading>.subtle{font-size:10px;margin:0;white-space:nowrap}.play-strip{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;list-style:none;margin:9px 0 0;padding:4px 3px 8px;scrollbar-width:thin;scrollbar-color:#a9956d66 transparent;min-width:0;min-height:169px}.played-slot{flex:0 0 104px;min-width:0}.played-slot .card{width:104px}.play-order{font-size:9px;color:var(--muted);margin-bottom:5px}.latest-play .card-image{box-shadow:0 0 0 2px #d9ba7d,0 0 18px #d9ba7d35}.latest-play .play-order{color:#e4c994}.strip-empty{display:flex;align-items:center;justify-content:center;min-height:145px;width:100%;font-size:12px;color:#8ca0a1}.play-strip-controls{display:flex;align-items:center;gap:7px;margin-top:0}.play-strip-controls>span{flex:1;font-size:10px}.play-strip-controls>button{font-size:10px;padding:3px 8px;border-color:transparent;background:transparent;color:var(--muted)}
.health-hub{display:grid;grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr);align-items:start;gap:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 4px;min-height:118px}.player-snapshot{min-width:0}.health-line{display:flex;align-items:center;justify-content:space-between;gap:12px}.player-identity{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700}.player-identity small{font-size:10px;color:var(--muted);font-weight:500}.hp{display:flex;align-items:baseline;gap:4px;color:#f5dfbe;font-size:34px;font-weight:750;line-height:1}.hp>span{font-size:15px;color:#ce9188;margin-right:3px}.hp small{font-size:12px;color:var(--muted);font-weight:500}.hp.low-hp{color:#f4a794}.vitals{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.vital-tag{display:inline-flex;align-items:center;gap:4px;border-radius:4px;padding:3px 6px;background:#6aaeb51b;color:#b9dbdf;font-size:10px}.vital-tag.ongoing{color:#e2d5ae;background:#c6ae7521}.round-callout{text-align:center;align-self:center;min-width:0}.round-callout .turn-number{font-size:10px;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}.status-title{font-size:18px;font-weight:700;color:#e8d6ac}.round-callout .subtle{margin:5px 0;font-size:11px}.round-callout button{padding:7px 10px;font-size:12px;margin-top:6px}.board{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.board-card{display:flex;align-items:center;gap:5px;background:#091b2344;border:1px solid var(--line);border-radius:5px;padding:4px 6px;max-width:100%;font-size:10px}.board-card .board-preview{padding:0;background:transparent;border:0;display:flex;align-items:center;gap:6px;min-width:0;text-align:left}.board-preview img{width:23px;aspect-ratio:63/88;object-fit:contain;border-radius:2px}.board-preview span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;max-width:105px}.shield-point{font-size:16px;color:#b8d8dc;font-weight:700}.board-order{font-size:8px;color:var(--muted)}
.hand-zone{min-width:0}.hand-heading{margin-bottom:10px}.hand-heading .flow-legend{display:flex;gap:12px;font-size:10px;color:var(--muted)}.legend-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#d5b375;margin-right:4px}.legend-dot.blue{background:#80badb}.hand-grid{display:flex;gap:13px;overflow-x:auto;align-items:start;padding:7px 4px 12px;scrollbar-width:thin;scrollbar-color:#a9956d66 transparent;min-height:240px}.card{position:relative;flex:0 0 var(--card-width);width:var(--card-width);min-width:0;display:flex;flex-direction:column;gap:8px}.card-image{position:relative;display:block;width:100%;padding:0;border:0;border-radius:8px;background:#101b20;aspect-ratio:63/88;box-shadow:0 4px 10px #0005;overflow:hidden}.card-image img{width:100%;height:100%;object-fit:contain;display:block}.card-image:hover:not(:disabled){background:transparent;box-shadow:0 0 0 2px #c3bea1,0 7px 18px #0005}.ends-turn-card .card-image{box-shadow:0 0 0 2px #d6b478,0 0 18px #cfaa6240;animation:closing-glow 3s ease-in-out infinite}.continues-card .card-image{box-shadow:0 0 0 2px #7bb8d9,0 0 15px #7bb8d92b}.flow-tag{position:absolute;right:5px;top:5px;padding:3px 5px;border-radius:3px;font-size:9px;background:#15242ee8;color:#f0d6a0;pointer-events:none}.flow-continuing{color:#bde5ff}.card-buttons{display:flex;gap:5px}.card-buttons button{font-size:11px;flex:1;padding:7px 5px}.card-buttons .discard{flex:0 0 auto;color:var(--muted);background:transparent;border-color:transparent;padding:7px 3px}.blocked-reason{font-size:10px;line-height:1.5;color:var(--muted);margin:0;text-align:center}.candidate-note{font-size:10px;color:#e9cd88;margin:0}.hand-empty{width:100%;padding:45px;text-align:center;font-size:12px;color:var(--muted)}.pick-status{font-size:11px;text-align:center;color:var(--gold);padding:8px}.symbol{display:inline-block;background:#c4b48516;padding:5px 7px;border-radius:4px;font-size:12px;margin:3px}.symbol-or{font-size:12px;margin:0 4px;color:var(--muted)}
.draft-panel{padding:20px 4px}.draft-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.draft-heading h2{font-size:19px;margin:0}.draft-heading p{margin:0;font-size:12px;color:var(--muted)}.draft-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;justify-items:center}.draft-grid .card{width:100%;max-width:180px}.draft-picks{display:flex;gap:20px;font-size:12px;color:var(--muted);margin-top:18px}.draft-picks strong{color:#d4c399;font-weight:500}.decision{padding:16px;background:#b4995121;border:1px solid #d0b57e73;border-radius:9px}.decision h2{font-size:15px;color:#eddbad;margin:0 0 6px}.decision>p{font-size:12px;line-height:1.7;color:#bcc7c5;margin:0}.choice-grid{display:flex;gap:12px;overflow-x:auto;padding:12px 3px 10px}.choice-grid .card{flex-basis:130px;width:130px}.selected-cost{display:flex;align-items:center;gap:5px;font-size:11px}.selected-cost input{accent-color:var(--gold);width:17px;height:17px}.cost-confirm{font-size:12px;margin-top:10px}.end-state{padding:15px 20px;margin-bottom:14px;border-color:var(--gold);display:flex;justify-content:space-between;align-items:center;gap:12px}.end-state h2{font-size:23px;margin:0;color:#f1d49b}.end-state p{font-size:12px;color:var(--muted);margin:5px 0 0}
.support-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.support{padding:12px 15px;font-size:12px}.support>summary{font-size:11px;color:var(--muted);font-weight:600}.support[open]>summary{margin-bottom:15px}.replay-lab{margin-top:12px}.replay-lab>.subtle{margin:10px 0}.case-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}.case-card{padding:13px;display:flex;flex-direction:column;gap:9px}.case-card h3{margin:0;font-size:12px}.case-card p{margin:0;flex:1;font-size:11px}.case-card button{font-size:11px}.case-card .number{font-size:9px;color:var(--gold)}.zone-details{display:grid;gap:8px;margin-bottom:15px}.zone-details h3{margin:0;color:#ded1b1}.zone-stats{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.zone-details details>summary{cursor:pointer;font-size:11px}.zone-list{max-height:160px;overflow:auto;line-height:1.9;padding:8px 0}.history-heading{display:flex;justify-content:space-between;font-size:11px;margin-bottom:8px}.history-list{max-height:300px;overflow:auto}.history-entry{border-bottom:1px solid var(--line);padding:9px 0;display:grid;gap:4px}.who,.result{font-size:10px;color:var(--muted)}.what{font-size:12px}.replay-controls{padding:16px;margin-bottom:14px}.replay-controls .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.replay-controls h2{margin:0}.replay-controls p{font-size:12px;line-height:1.7;color:var(--muted);margin:10px 0}.replay-controls button{font-size:11px}.replay-controls input{width:100%;accent-color:var(--gold);margin:12px 0}
#card-dialog{border:1px solid #c6b78877;border-radius:14px;background:#18272f;color:var(--ink);padding:28px;max-width:780px;width:calc(100% - 30px);max-height:94vh;overflow:auto;box-shadow:0 20px 70px #0009}#card-dialog::backdrop{background:#071218c9;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:10px;top:10px;z-index:2;font-size:13px;padding:6px 9px}.card-dialog-layout{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:25px;align-items:center}.card-dialog-layout>img{display:block;width:100%;border-radius:10px;box-shadow:0 5px 20px #0005}.card-dialog-copy h2{font-size:25px;margin:12px 0}.card-dialog-copy .card-effect{font-size:14px;line-height:1.9;margin:16px 0;color:#ced5cc}.card-dialog-copy .card-buttons{margin-top:20px}.card-dialog-copy .card-buttons button{font-size:13px;padding:12px}.card-dialog-copy .subtle{margin-bottom:0}.dialog-flow{font-size:12px;color:var(--gold);line-height:1.7}.busy button[data-action]{cursor:wait}
@keyframes closing-glow{0%,100%{box-shadow:0 0 0 2px #d6b478,0 0 13px #cfaa6230}50%{box-shadow:0 0 0 2px #e4c88e,0 0 22px #cfaa6266}}
@media(min-width:1450px){:root{--card-width:170px}.opponent-row{min-height:235px}.played-slot,.played-slot .card{width:112px;flex-basis:112px}}
@media(max-width:1050px){:root{--card-width:139px}.site-header{padding:14px 20px}main{padding:15px 20px}.battle-table{padding:16px}.opponent-row{grid-template-columns:minmax(180px,.75fr) minmax(0,1.25fr);gap:15px}.played-panel{padding-left:15px}.health-hub{grid-template-columns:minmax(0,1fr) 175px minmax(0,1fr);gap:15px}.card-back{flex-basis:65px}.card-back+.card-back{margin-left:-41px}.hand-grid{gap:11px}.draft-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px}.draft-grid .card{max-width:165px}}
@media(max-width:650px){:root{--card-width:128px}.site-header{padding:12px 14px}.brand{font-size:14px;gap:7px}.brand small{font-size:6px}.brand-mark{font-size:25px}.header-tools{gap:4px}.header-tools>button,.utility>summary{font-size:10px;padding:7px 8px}main{padding:12px 10px}.battle-table{padding:12px 10px;border-radius:13px;gap:12px}.opponent-row{grid-template-columns:minmax(110px,.65fr) minmax(0,1.35fr);gap:10px;min-height:204px}.opponent-zone{padding:6px 0}.zone-heading{flex-wrap:wrap;gap:4px}.zone-heading h2{font-size:11px}.zone-heading>span{font-size:10px}.opponent-hand{margin-top:10px}.card-back{flex-basis:45px;border-radius:4px}.card-back+.card-back{margin-left:-31px}.card-backs{padding-bottom:9px}.hand-caption{font-size:10px}.played-panel{padding-left:9px}.play-tabs{gap:0}.play-tabs button{font-size:9px;padding:5px}.play-strip-heading{flex-wrap:wrap;gap:4px}.play-strip-heading>.subtle{font-size:9px}.played-slot,.played-slot .card{width:85px;flex-basis:85px}.play-strip{gap:8px;min-height:147px;margin-top:5px}.strip-empty{min-height:125px;font-size:10px}.play-strip-controls{gap:2px}.play-strip-controls>span{display:none}.play-strip-controls>button{font-size:9px;padding:3px 6px}.health-hub{grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);gap:8px;padding:12px 0}.health-line{flex-direction:column;align-items:center;gap:8px}.player-identity{text-align:center;font-size:12px}.player-identity small{font-size:8px}.hp{font-size:30px}.hp small{font-size:10px}.hp>span{font-size:12px}.vitals{justify-content:center}.vital-tag{font-size:9px;padding:3px 4px}.status-title{font-size:14px}.round-callout .subtle{font-size:9px}.round-callout .turn-number{font-size:9px}.board{justify-content:center;gap:4px}.board-card{padding:3px 4px}.board-preview img{width:18px}.board-preview span{max-width:49px;font-size:8px}.board-order{display:none}.shield-point{font-size:13px}.hand-heading h2{font-size:12px}.hand-heading>span{font-size:10px}.hand-heading .flow-legend{gap:7px;font-size:9px}.hand-grid{gap:10px;min-height:215px}.card-buttons button{font-size:10px;padding:7px 3px}.setup{padding:15px}body:not(.has-game) .setup{margin:5vh auto 15px;padding:20px}body:not(.has-game) .setup>summary{font-size:20px;margin-bottom:22px}.deck-selects{grid-template-columns:1fr 22px 1fr;gap:9px}.deck-selects #start-game{grid-column:1/4;width:100%;margin-top:5px}.setup label{font-size:11px}.setup select{font-size:12px}.advanced-setup>div{grid-template-columns:1fr}.draft-panel{padding:10px 1px}.draft-heading{align-items:start;margin-bottom:15px;gap:8px}.draft-heading h2{font-size:15px;white-space:nowrap}.draft-heading p{font-size:10px;text-align:right}.draft-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.draft-picks{font-size:10px;gap:12px;flex-wrap:wrap}.draft-grid .card-buttons button{font-size:9px}.support-panels{grid-template-columns:1fr}.case-grid{grid-template-columns:1fr 1fr}.support{padding:11px 13px}.decision{padding:12px}.decision h2{font-size:13px}.decision>p{font-size:11px}.choice-grid .card{width:112px;flex-basis:112px}.card-dialog-layout{grid-template-columns:1fr;gap:12px}.card-dialog-layout>img{max-width:280px;margin:auto}#card-dialog{padding:30px 20px 20px}.card-dialog-copy h2{font-size:22px}.card-dialog-copy .card-effect{font-size:13px;margin:10px 0}.card-dialog-copy .card-buttons{margin-top:12px}.end-state{padding:13px}.end-state h2{font-size:19px}.end-state p{font-size:11px}.end-state button{font-size:11px}}
@media(prefers-reduced-motion:reduce){*:not(.draft-coin),*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Beast Seal cover and four-deck single-player entrance. */
img{height:auto}
/* Size the image slots themselves: HTML intrinsic sizes cannot expand rows. */
.board{align-items:flex-start;max-height:88px;overflow-y:auto;overscroll-behavior:contain}
.board-card{height:42px;max-height:42px;flex:0 0 auto;align-self:flex-start}
.board-preview img{width:23px;height:32.12px;flex:0 0 23px;object-fit:contain}
.health-hub{height:auto;grid-auto-rows:auto}
.critical-health::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;box-shadow:inset 0 0 85px 24px #e32d3b70;border:3px solid #f5526280;animation:health-alarm 1.8s ease-in-out infinite}
.health-warning{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:31;max-width:calc(100vw - 24px);padding:9px 20px;border:1px solid #ff858f;border-radius:30px;background:#631e2aee;color:#fff0ec;box-shadow:0 4px 24px #2f000077;font-size:14px;font-weight:750;pointer-events:none;white-space:nowrap}
@keyframes health-alarm{0%,100%{opacity:.35}50%{opacity:1}}
.result-dialog{width:min(480px,calc(100% - 30px));max-width:none;max-height:92vh;overflow:auto;padding:0;border:1px solid #d8be7d;border-radius:22px;background:radial-gradient(ellipse at 50% 15%,#74623a55,transparent 70%),#142931;color:var(--ink);box-shadow:0 20px 100px #000b;text-align:center}
.result-dialog::backdrop{background:#061017d9;backdrop-filter:blur(7px)}
.match-result{padding:34px 38px}.match-result .eyebrow{margin:0;color:#bfb08a;letter-spacing:.2em}.result-seal{font-size:78px;line-height:1.3;color:#f3d28c;text-shadow:0 0 35px #dbac5e66}.match-result h1{font-size:64px;line-height:1.1;letter-spacing:.16em;margin:5px 0 22px;padding-left:.16em;color:#ffe7af}.match-result>p:not(.eyebrow){font-size:14px;color:#cfddd9;line-height:1.8}.match-result.defeat h1,.match-result.defeat .result-seal{color:#f3a69f}.match-result.draw h1,.match-result.draw .result-seal{color:#b3d9e8}.result-score{display:flex;justify-content:center;gap:40px;margin:24px 0;padding:18px 0;border-block:1px solid var(--line);color:var(--muted);font-size:12px}.result-score strong{display:block;font-size:26px;color:#eadcc3;margin-top:7px}.result-options{display:grid;gap:10px;margin-top:22px}.result-options button{padding:13px}.match-result .result-note{font-size:12px!important}
.atlas-dialog{width:min(1080px,calc(100% - 28px));max-width:none;max-height:90vh;padding:24px;border:1px solid #c9ad7277;border-radius:17px;background:#14262efc;color:var(--ink);box-shadow:0 20px 80px #000a}.atlas-dialog::backdrop{background:#061218d9;backdrop-filter:blur(5px)}.atlas-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.atlas-heading h2{font-size:26px;margin:0}.atlas-heading .eyebrow{margin:0 0 7px}.atlas-search{display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:12px;color:var(--muted)}.atlas-search input{width:100%;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:#0c1c24;color:var(--ink)}.atlas-filters{display:flex;gap:7px;flex-wrap:wrap;margin:17px 0 12px}.atlas-filters button{font-size:12px;padding:7px 12px}.atlas-filters button[aria-pressed=true]{background:var(--gold);color:#17252c;border-color:var(--gold)}.atlas-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px 14px}.atlas-card{padding:0;border:0;background:transparent;min-width:0;display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:500}.atlas-card:hover:not(:disabled){background:transparent;color:#f1d69d}.atlas-card img{display:block;width:100%;height:auto;aspect-ratio:744/1039;object-fit:contain;border-radius:8px;box-shadow:0 5px 12px #0005}.atlas-card span{align-self:center}
@media(max-width:650px){.health-warning{top:66px;font-size:12px;padding:8px 13px}.critical-health::after{box-shadow:inset 0 0 45px 12px #e32d3b70}.match-result{padding:26px 24px}.match-result h1{font-size:52px}.result-seal{font-size:66px}.atlas-dialog{padding:17px}.atlas-heading h2{font-size:22px}.atlas-cards{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:15px 10px}.header-tools{flex-wrap:wrap;justify-content:flex-end}}
.health-values{display:flex;align-items:center;gap:15px;flex-shrink:0;white-space:nowrap}
.shield-total{display:flex;align-items:center;gap:5px;color:#b9deeb;font-size:25px;font-weight:750;line-height:1}
.shield-total .primer-icon{width:24px;height:24px;flex:none}
.draw-feedback{position:fixed;z-index:45;top:38%;bottom:auto;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);padding:13px 23px;border:1px solid #d8bf7e;border-radius:12px;background:#122e36f5;box-shadow:0 8px 35px #0009;pointer-events:none;animation:draw-notice-in .35s ease-out}
.draw-feedback[hidden]{display:none}
.exchange-feedback{position:fixed;z-index:55;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 36px));box-sizing:border-box;padding:24px 28px;text-align:center;border:2px solid #d8bf7e;border-radius:16px;background:#162932f5;box-shadow:0 12px 60px #000a;pointer-events:none}
.exchange-feedback[hidden]{display:none}
.exchange-feedback strong{display:block;color:#ffe2a8;font-size:23px;margin-bottom:10px}
.exchange-feedback p{margin:0;color:#edf4f6;font-size:17px;line-height:1.7}
.exchange-feedback small{display:block;color:#b9cfd5;margin-top:12px;font-size:13px}
.draw-feedback strong{display:block;color:#f5dfac;font-size:20px;white-space:nowrap}
.draw-feedback small{display:block;color:#c5dce0;font-size:12px;margin-top:4px}
.draw-notice-cards{position:relative;width:42px;height:49px;flex:none}
.draw-notice-cards img{position:absolute;left:0;top:5px;width:28px;height:39px;object-fit:cover;border:1px solid #dfc58e;border-radius:3px;animation:draw-card-in .45s ease-out}
.draw-notice-cards img+img{left:13px;top:0;animation-delay:.1s;animation-fill-mode:backwards}
.card-image.just-drawn{outline:3px solid #9de5eb;outline-offset:3px;animation:draw-hand-in .6s ease-out}
@keyframes draw-notice-in{from{opacity:0;transform:translate(-50%,calc(-50% + 10px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes draw-card-in{from{opacity:0;transform:translate(-20px,-10px) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes draw-hand-in{from{opacity:.5;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:650px){.health-values{gap:7px;justify-content:center}.health-values .hp{font-size:26px}.health-values .hp small{display:none}.shield-total{font-size:21px;gap:3px}.shield-total .primer-icon{width:18px;height:18px}.draw-feedback{padding:10px 17px;gap:12px}.draw-feedback strong{font-size:17px}}
@media(max-width:360px){.health-hub{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)}.health-values{gap:5px}.health-values .hp{font-size:22px}.shield-total{font-size:19px}.shield-total .primer-icon{width:16px;height:16px}}
.card-image{aspect-ratio:744/1039;min-height:0;flex:none}
.card-image img{position:absolute;inset:0}
.enlarged-face{position:relative;width:100%;aspect-ratio:744/1039;align-self:start;overflow:hidden;border-radius:10px;box-shadow:0 5px 20px #0005}
.enlarged-face img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.card-back{border:2px solid #dfc58e;box-shadow:-2px 0 0 #13232c,-4px 4px 7px #0008}
.card-back img{position:static;width:100%;height:100%;object-fit:cover}
.played-slot{--played-width:104px}
.effect-stack{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:36px;padding-bottom:calc(var(--played-width)*1039/744 - 24px);max-height:238px;overflow-y:auto;overflow-x:clip;isolation:isolate;scrollbar-width:thin}
.stack-layer{position:relative;min-width:0;height:calc(var(--played-width)*1039/744 + 12px)}
.stack-layer .card{gap:0;padding-top:12px}
.stack-layer+.stack-layer .card-image{box-shadow:0 -2px 0 #cbb27b,0 -4px 8px #0009}
.stack-label{position:absolute;top:0;left:0;width:100%;height:12px;min-height:0;line-height:10px;overflow:hidden;white-space:nowrap;text-align:left;background:#10242df2;color:#f3dba4;border:0;border-radius:3px;padding:1px 3px;font-size:7px}
body:not(.on-cover){isolation:isolate;background:#101d24}
body:not(.on-cover)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#0c1d24ed,#0c1d24f5),url('/cards/cover.png') center/cover}
.battle-table{background:linear-gradient(135deg,#1d343bed,#14272eee);border-color:#c9ad7240}
@media(min-width:1051px){.played-slot{--played-width:94px}}
@media(max-width:650px){.board{max-height:76px}.board-card{height:36px;max-height:36px}.board-preview img{width:18px;height:25.14px;flex-basis:18px}.enlarged-face{max-width:280px;margin:auto}.played-slot{--played-width:85px}.effect-stack{max-height:200px;grid-auto-rows:32px;padding-bottom:calc(var(--played-width)*1039/744 - 20px)}}
body.on-cover main{max-width:none;padding:0}
body.on-cover .site-header{position:absolute;left:0;right:0;top:0;z-index:5;border:0}
body.on-cover #new-match,body.on-cover .replay-lab{display:none}
.cover-screen{position:relative;min-height:100svh;overflow:hidden;background:#101b25}
.cover-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,#08151bd9 0%,#0e1c2759 39%,transparent 64%)}
.cover-copy{position:relative;min-height:100svh;width:51%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:90px 0 70px clamp(32px,6vw,100px)}
.cover-kicker{font-size:12px;letter-spacing:.4em;color:#c3b393;margin-bottom:20px}
.cover-copy h1{font-family:"Noto Serif TC","PMingLiU",serif;font-size:clamp(44px,6.2vw,94px);font-weight:700;letter-spacing:.1em;white-space:nowrap;color:#e1c897;text-shadow:0 3px 18px #0009;margin:0}
.cover-author{font-size:15px;letter-spacing:.2em;color:#c5b99c;margin:22px 0 46px}
.cover-copy #continue-game{margin-top:12px;min-width:200px;background:#15242b99;font-size:13px;padding:11px 22px}
.deck-screen{padding:20px 0}
.deck-screen-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}
.deck-screen-heading h1{font-family:"PMingLiU",serif;font-size:32px;margin:0 0 12px;letter-spacing:.1em;color:#e2cc9e}
.deck-screen-heading p{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:0}
.deck-screen-heading .eyebrow{font-size:10px;letter-spacing:.2em;margin-bottom:10px;color:#c3ad82}
.deck-screen-heading button{font-size:12px}
.deck-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.deck-choice{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;border:1px solid #a491664d;border-radius:12px;background:#1a2a31;transition:transform .18s,border-color .18s}
.deck-choice:hover:not(:disabled){transform:translateY(-5px);border-color:#cfb67e;background:#21343c}
.deck-choice.orange{--sigil-tint:#86300f;--sigil-metal:#edbf74}
.deck-choice.blue{--sigil-tint:#26466d;--sigil-metal:#c3d8ec}
.deck-choice.green{--sigil-tint:#34532b;--sigil-metal:#d2bb73}
.deck-choice.purple{--sigil-tint:#513975;--sigil-metal:#ccb5ef}
.deck-sigil-art{position:relative;display:flex;justify-content:center;width:100%;padding:28px 22px 20px;background:radial-gradient(ellipse at 50% 55%,var(--sigil-tint),#101b24 78%);border-bottom:1px solid var(--line)}
.deck-sigil-art img{display:block;width:100%;max-width:180px;height:auto;aspect-ratio:1;border-radius:13px;box-shadow:0 10px 24px #0006}
.deck-seal-number{position:absolute;left:15px;top:13px;color:var(--sigil-metal);font:11px Georgia,serif;letter-spacing:.15em;opacity:.7}
.deck-keywords{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 14px}
.deck-keywords>span{font-size:10px;line-height:1.5;padding:3px 5px;color:var(--sigil-metal);background:#080f1740;border:1px solid #b9c8b92b;border-radius:4px;font-weight:500}
.setup-progress{display:flex;align-items:center;gap:24px;padding:0;margin:0 0 26px;list-style:none;font-size:12px;color:var(--muted)}
.setup-progress li{display:flex;align-items:center;gap:7px}
.setup-progress li>span{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--line);border-radius:50%;font-size:10px}
.setup-progress li[aria-current=step]{color:#f1d7a6}
.setup-progress li[aria-current=step]>span{background:#c7ad75;color:#15242b;border-color:#c7ad75}
.setup-progress li.complete{color:#b4cbbd}
.resolution-feedback{font-size:10px;line-height:1.7;color:#d2decd;margin:8px 0 0;text-wrap:balance}
.ends-turn-card .card-image{animation:none}
.ends-turn-card .card-image:hover,.ends-turn-card .card-image:focus-visible{box-shadow:0 0 0 3px #efd39a,0 0 22px #cfaa6266}
.deck-choice-copy{padding:20px;display:flex;flex-direction:column;flex:1}
.deck-choice-copy h2{font-family:"PMingLiU",serif;font-size:27px;letter-spacing:.12em;color:#e1ca99;margin:0 0 6px}
.deck-choice-theme{font-size:11px;color:#b7c4bf;letter-spacing:.12em;margin-bottom:14px}
.deck-choice-description{font-size:12px;line-height:1.9;color:#aebdbc;font-weight:400;flex:1;margin:0 0 22px}
.deck-choice-cta{font-size:12px;color:#e4cc96;display:flex;justify-content:space-between}
.zone-card-link{font-size:11px;padding:4px 7px;background:transparent;border-color:transparent}
.draft-matchup{font-size:12px;line-height:1.7;color:#c8d1c7;margin-bottom:20px}
@media(min-width:1051px){:root{--card-width:140px}.battle-table{padding:14px 18px;gap:12px}.opponent-row{min-height:204px}.played-slot,.played-slot .card{width:94px;flex-basis:94px}.play-strip{min-height:152px}.health-hub{min-height:96px;padding:11px 4px}.hand-grid{min-height:227px}}
@media(max-width:1050px){.deck-options{gap:12px}.deck-choice-copy{padding:14px}.deck-choice-description{font-size:11px}.cover-copy{width:55%;padding-left:38px}.cover-copy h1{font-size:64px}}
@media(max-width:750px){.deck-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.deck-choice-copy{padding:15px}.deck-choice-copy h2{font-size:24px}.deck-choice-description{font-size:12px}.cover-copy{width:100%;justify-content:flex-end;align-items:center;text-align:center;padding:100px 24px 10vh}.cover-copy h1{font-size:clamp(44px,11vw,72px)}.cover-art{object-position:73% center}.cover-shade{background:linear-gradient(0deg,#09171af5 4%,#0d1b2499 44%,transparent 75%)}.cover-author{margin:15px 0 30px}.cover-kicker{margin-bottom:12px}.deck-screen{padding-top:14px}.deck-screen-heading{align-items:start;margin-bottom:20px}.deck-screen-heading h1{font-size:27px}.deck-screen-heading p{font-size:11px}.deck-screen-heading button{font-size:10px;padding:8px;white-space:nowrap}}
@media(max-width:380px){.deck-choice-copy{padding:12px}.deck-choice-description{font-size:11px;line-height:1.8}.deck-choice-copy h2{font-size:22px}}
@media(max-width:750px){.deck-sigil-art{padding:25px 14px 18px}.deck-sigil-art img{max-width:135px}.deck-seal-number{left:10px;top:9px;font-size:9px}.deck-keywords{gap:4px;margin-bottom:10px}.deck-keywords>span{font-size:9px}.setup-progress{gap:16px;font-size:11px;margin-bottom:20px}.resolution-feedback{font-size:9px}}

/* Three real player turns, with a compact instruction above the familiar table. */
.sound-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sound-controls button{min-height:38px}
.music-volume{white-space:nowrap}.music-volume input{flex:1;width:0}
.cover-modes{display:grid;gap:10px;width:min(340px,100%)}
.cover-copy .cover-modes>button{display:flex;align-items:center;justify-content:center;margin:0;width:100%;min-width:0;min-height:52px;padding:14px 20px;background:#15242bd9;border:1px solid #c9ad7277;color:#e1ceab;font-size:16px;line-height:1.4;letter-spacing:.12em;text-indent:.12em;text-align:center}
.cover-copy .cover-modes>button:hover:not(:disabled){background:#30464de8;border-color:#d2b77f}
.header-tools>.home-link{font-size:12px;padding:8px 11px;border:1px solid var(--line);border-radius:7px;text-decoration:none;white-space:nowrap}
@media(max-width:650px){.header-tools>.home-link{font-size:10px;padding:7px 8px}.cover-modes{width:min(340px,100%)}.game-portal .cover-copy{padding-bottom:7vh}}
.tutorial-coach{position:sticky;top:8px;z-index:6;padding:14px 20px;margin-bottom:14px;border:1px solid #c9ad7288;border-radius:12px;background:#172931f7;box-shadow:0 8px 26px #0005;backdrop-filter:blur(8px)}
.tutorial-coach-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.tutorial-coach-heading>button{font-size:11px;background:transparent;white-space:nowrap;min-height:36px}
.tutorial-progress{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0;font-size:11px;color:var(--muted)}
.tutorial-progress li{display:flex;align-items:center;gap:6px}
.tutorial-progress li>span{display:grid;place-items:center;border:1px solid var(--line);width:22px;height:22px;border-radius:50%;font-size:10px}
.tutorial-progress li[aria-current=step]{color:#f3d9a4}
.tutorial-progress li[aria-current=step]>span{color:#17252b;background:#c7ad75;border-color:#c7ad75}
.tutorial-progress li.complete{color:#b1d2b8}
.tutorial-coach h2{font-size:16px;color:#f0d6a2;margin:0 0 7px}
.tutorial-coach p{font-size:13px;line-height:1.85;max-width:1000px;margin:0;color:#d7e0d6}
.tutorial-coach small{display:block;color:var(--muted);font-size:10px;line-height:1.6;margin-top:7px}
.tutorial-focus .card-image{outline:3px solid #fff0b7;outline-offset:3px;box-shadow:0 0 25px #e7c97855}
.tutorial-card-tag{position:absolute;left:4px;bottom:5px;color:#ffecbb;background:#10232ef5;font-size:10px;padding:4px 7px;border-radius:4px;pointer-events:none}
.in-tutorial .hand-grid{padding:8px 7px 12px}
.in-tutorial .card-buttons button,.in-tutorial .decision button{min-height:44px}
.in-tutorial .decision,.in-tutorial .tutorial-focus .card-buttons{scroll-margin-top:175px}
.tutorial-complete{max-width:720px;margin:6vh auto;padding:34px;border-color:#c9ad7288}
.tutorial-complete .eyebrow{font-size:11px;letter-spacing:.18em;color:var(--muted)}
.tutorial-complete h1{font-family:"PMingLiU",serif;font-size:30px;letter-spacing:.08em;color:#e9d0a0;margin-bottom:24px}
.tutorial-complete ul{padding-left:22px;color:#cad7cc;font-size:14px;line-height:1.9}
.tutorial-complete li{padding:4px 0}
.battle-table{grid-template-columns:minmax(0,1fr)}
.decision{min-width:0}
.tutorial-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.tutorial-buttons button{min-height:44px;font-size:13px}
@media(max-width:650px){.tutorial-coach{top:4px;padding:12px;margin-bottom:10px;border-radius:9px}.tutorial-coach-heading{gap:7px;align-items:start}.tutorial-coach-heading>button{font-size:10px;padding:6px;min-height:44px}.tutorial-progress{gap:9px;flex-wrap:wrap;font-size:9px;line-height:1.4}.tutorial-progress li{gap:4px}.tutorial-progress li>span{width:18px;height:18px;font-size:9px}.tutorial-coach h2{font-size:14px}.tutorial-coach p{font-size:12px;line-height:1.8}.tutorial-complete{padding:24px 20px;margin:3vh auto}.tutorial-complete h1{font-size:25px}.tutorial-complete ul{font-size:13px}}
@media(max-width:650px){.in-tutorial .decision,.in-tutorial .tutorial-focus .card-buttons{scroll-margin-top:230px}}

/* Friend rooms share the printed deck sigils and the existing battle table. */
.friend-entrance{max-width:560px;margin:8vh auto;padding:32px}.friend-entrance h1,.friend-heading h1{font-family:"PMingLiU",serif;color:#ead1a0;font-size:30px;margin:8px 0 16px}.friend-entrance p,.friend-heading p{line-height:1.8;color:#c7d4cd}.friend-entrance>button{min-height:48px;margin:12px 0 24px;width:100%}.friend-entrance form{border-top:1px solid var(--line);padding-top:22px}.friend-entrance label{display:block;font-size:14px;margin-bottom:10px}.friend-join-row{display:flex;gap:10px}.friend-join-row input{min-width:0;flex:1;font-size:20px;letter-spacing:.15em}.friend-join-row button{min-height:48px}
.friend-room-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:12px 18px;border:1px solid var(--line);border-radius:10px;margin:14px 0 22px;font-size:12px;background:#17272eee}.friend-room-bar strong{letter-spacing:.13em;font-size:18px;color:#edce96}.friend-room-bar [role=status]{color:var(--muted);flex:1}.friend-room-bar button{font-size:12px;min-height:40px}.friend-room-bar input{max-width:100%;width:330px;font-size:12px;letter-spacing:0}
.friend-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.friend-heading h1{margin-bottom:8px}.friend-heading .eyebrow{font-size:11px;letter-spacing:.2em;color:var(--muted)}.friend-heading button{min-height:44px}.friend-players{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.friend-player{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:18px;border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--muted)}.friend-player strong{color:#e3d2b0}.friend-player.ready{border-color:#bfa66a;color:#e8d0a0}.friend-player span:last-child{margin-left:auto}.friend-lobby .deck-choice[aria-pressed=true]{border-color:#f4d99b;box-shadow:0 0 0 2px #e9c47666}.friend-lobby .deck-choice:disabled{opacity:.55}.friend-lobby .deck-choice[aria-pressed=true]:disabled{opacity:1}.friend-ready{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:20px 0 30px}.friend-ready button{min-height:48px;min-width:160px}.friend-speed{display:grid;gap:10px}
@media(max-width:650px){.friend-entrance{padding:24px 18px;margin:4vh auto}.friend-entrance h1,.friend-heading h1{font-size:25px}.friend-room-bar{gap:9px 12px;padding:10px 12px}.friend-room-bar [role=status]{flex-basis:45%;font-size:11px}.friend-players{gap:8px}.friend-player{padding:12px;gap:8px;font-size:12px}.friend-player span:last-child{margin-left:0;width:100%}.friend-ready{flex-direction:column;align-items:stretch}.friend-ready p{margin-bottom:0}.friend-heading button{font-size:12px}.friend-lobby .deck-options{gap:12px}}

/* Read the real card face before starting the three guided turns. */
.card-primer{max-width:1020px;margin:22px auto;padding:24px 30px;background:#17272ef5;border-color:#c9ad7255}
.primer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.primer-heading>button{min-height:44px;font-size:12px;background:transparent}
.primer-progress{display:flex;flex-wrap:wrap;gap:24px;list-style:none;margin:0;padding:0;font-size:12px;color:var(--muted)}
.primer-progress li{display:flex;align-items:center;gap:7px}.primer-progress li>span{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);border-radius:50%}
.primer-progress li[aria-current=step]{color:#f0d8a5}.primer-progress li[aria-current=step]>span{background:#c7ad75;color:#17252b;border-color:#c7ad75}
.card-primer>.eyebrow{font-size:11px;color:var(--muted);margin:0 0 8px}.card-primer h1{font-size:27px;letter-spacing:.04em;color:#f0d8a5;margin:0 0 10px}
.primer-intro{font-size:14px;line-height:1.85;color:#cad7cc;margin:0 0 22px;max-width:760px}
.primer-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:34px;align-items:start}.primer-figure{margin:0;min-width:0}
.primer-card{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;border-radius:10px;box-shadow:0 8px 24px #0006}
.primer-card img{display:block;width:100%;height:auto;aspect-ratio:744/1039;object-fit:contain;border-radius:10px}.primer-figure figcaption{text-align:center;color:var(--muted);font-size:11px;line-height:1.7;margin-top:12px}
.primer-pin{position:absolute;left:1%;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid #fff4cf;background:#1b3339;color:#fff1c8;font-size:13px;font-weight:700;box-shadow:0 2px 5px #0008;pointer-events:none}
.primer-pin-0{top:7%}.primer-pin-1{top:36%}.primer-pin-2{top:69%}.primer-pin-3{top:85%}
.primer-eye-spot,.primer-summary-spot{position:absolute;border:2px solid #ffefa8;box-shadow:0 0 0 2px #18282faa,0 0 14px #ffefa866;pointer-events:none}
.primer-eye-spot{right:6%;top:5%;width:13%;aspect-ratio:1;border-radius:50%}.primer-summary-spot{left:5.5%;right:5.5%;top:69%;height:8%;border-radius:5px}
.primer-copy{min-width:0}.primer-parts{list-style:none;margin:0;padding:0;display:grid;gap:17px}.primer-parts li{display:flex;align-items:start;gap:12px}.primer-parts li>span{display:grid;place-items:center;flex:0 0 27px;height:27px;border:1px solid #c7ad7588;border-radius:50%;color:#ead5aa;font-size:12px}
.primer-parts h3{font-size:15px;margin:0 0 4px;color:#e5d6b6}.primer-parts p{font-size:13px;line-height:1.85;color:#c5d2cb;margin:0}
.primer-topics{display:grid;gap:10px}.primer-topics button{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px;align-items:start;text-align:left;padding:13px 14px;background:#0c1d2544;border-color:var(--line);min-height:70px}
.primer-topics button[aria-pressed=true]{border-color:#d0b47b;background:#c7ad7514;box-shadow:inset 3px 0 #d0b47b}.primer-icon{width:44px;height:44px;flex:none}.symbol{display:inline-flex;align-items:center;gap:4px}.symbol .primer-icon{width:18px;height:18px}
.primer-topics strong{display:block;font-size:14px;line-height:1.6;color:#f0dfbd}.primer-topics button>span>span{display:block;font-size:12px;line-height:1.8;margin-top:3px;color:#bfcec8}
.primer-example{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}.primer-example strong{font-size:13px;color:#dfcdab}.primer-example p{font-size:13px;color:#cbd8ce;line-height:1.85;margin:7px 0 0}
.primer-footer{display:flex;justify-content:space-between;gap:12px;margin-top:25px;padding-top:18px;border-top:1px solid var(--line)}.primer-footer button{min-height:44px;font-size:13px}
.card-primer :focus-visible{outline:2px solid #ffe8ad;outline-offset:4px}
@media(max-width:650px){.card-primer{padding:18px 16px;margin:10px auto}.primer-heading{gap:8px;margin-bottom:20px}.primer-heading>button{padding:8px;font-size:11px}.primer-progress{gap:9px;font-size:10px}.primer-progress li{gap:4px}.primer-progress li>span{width:19px;height:19px}.card-primer h1{font-size:22px}.primer-intro{font-size:13px;margin-bottom:18px}.primer-layout{grid-template-columns:minmax(0,1fr);gap:20px}.primer-figure{width:170px;justify-self:center}.primer-figure figcaption{font-size:10px;margin-top:8px}.primer-pin{width:22px;height:22px;font-size:11px}.primer-parts{gap:14px}.primer-topics button{padding:12px;gap:10px}.primer-topics strong{font-size:14px}.primer-topics button>span>span{font-size:13px}.primer-example p,.primer-parts p{font-size:13px}.primer-footer{position:sticky;bottom:0;padding:12px 0 4px;background:#17272ef5;margin-top:18px;z-index:2}.primer-footer button{font-size:12px;padding:10px 12px}}

/* First interaction polish: a stable hub, one choice surface, readable cards. */
.health-hub{grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr);align-items:start;min-height:134px;gap:20px}
.health-hub .player-snapshot{min-width:0}
.health-hub .vitals{height:44px;overflow:auto;align-content:start}
.round-callout{align-self:start;min-height:100px;padding:8px 10px;border-radius:10px;background:#07151c55}
.round-callout.my-action{background:#c9ac7310;box-shadow:inset 0 0 0 1px #d4b67c55}
.round-callout .status-title{font-size:17px;line-height:1.5;color:#ebdfc4}
.round-callout .plays-count{font-size:32px;line-height:1.25;font-variant-numeric:tabular-nums;color:#ffe0a4}
.round-callout .subtle{margin:5px 0;font-size:12px}
.board-lanes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:8px 0;border-bottom:1px solid var(--line)}
.board-lane{display:flex;gap:10px;align-items:center;min-width:0;height:52px}
.board-caption{flex:none;font-size:11px;color:#92a7ad}
.board-lane .board{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;min-width:0;height:52px;max-height:52px;overflow-x:auto;overflow-y:hidden}
.board-lane .board-card{flex:0 0 auto;height:42px}
.table-feedback{height:24px;line-height:24px;margin:0;font-size:12px;color:#c9b98f;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hand-zone{min-height:300px;scroll-margin-top:20px}
.reading-tip{font-size:11px;color:#92a7ad;margin:0 0 8px}
.card-buttons button,.choice-grid>button,.choice-grid .card>button.primary,.selected-cost{min-height:44px;min-width:44px}
.card-buttons .discard{border:1px solid #8c9fa055;background:#17232a;color:#c0cbcc}
.card-buttons .primary{font-weight:700}
.hand-zone .decision{margin:0;padding:14px;border:1px solid #d3b37388;box-shadow:inset 3px 0 #d3b373}
.decision>p{font-size:13px;line-height:1.7;margin:6px 0 12px}
.decision .choice-grid{padding:5px 3px 12px;min-width:0;align-items:start}
.decision .card{box-shadow:0 0 0 1px #d3b37355;border-radius:8px;padding:4px}
.decision .card:has(input:checked){box-shadow:0 0 0 3px #e6c681;background:#ddbc7830}
.selected-cost{padding:8px 3px;cursor:pointer;font-size:12px}
.selected-cost input{width:18px;height:18px;accent-color:#d4b67c}
#cost-progress{color:#ffe0a4;min-height:22px}
#card-hover-preview{position:fixed;z-index:90;pointer-events:none;width:460px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:hidden;display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;padding:14px;background:#14242dfc;border:1px solid #cdb078;border-radius:12px;box-shadow:0 16px 55px #000b;color:#e7e5db}
#card-hover-preview[hidden]{display:none}
#card-hover-preview>img{width:100%;height:auto;aspect-ratio:744/1039;object-fit:contain;border-radius:8px}
#card-hover-preview strong{display:block;font-size:19px;margin:8px 0 12px}
#card-hover-preview p{font-size:14px;line-height:1.8}
#card-hover-preview small{font-size:11px;color:#91a4aa}
#card-hover-preview .symbols{gap:7px;font-size:12px}
#card-dialog .card-buttons{gap:10px;margin-top:18px}
#card-dialog .card-buttons button{font-size:15px;padding:12px 18px}
#card-dialog .card-effect{font-size:16px;line-height:1.9}
#close-card-dialog{width:44px;height:44px;z-index:2}
@media(max-width:650px){
  .health-hub{grid-template-columns:minmax(0,1fr) 132px minmax(0,1fr);gap:7px;padding:12px 0;min-height:151px}
  .round-callout{padding:7px 4px;min-height:105px}
  .round-callout .status-title{font-size:14px}.round-callout .plays-count{font-size:28px}
  .round-callout .subtle{font-size:11px;line-height:1.5}.turn-number{font-size:10px}
  .health-hub .hp{font-size:28px}.health-hub .hp small{font-size:10px}
  .health-hub .health-values{gap:5px}.health-hub .shield-total{font-size:18px;gap:3px}
  .health-hub .shield-total .primer-icon{width:18px;height:18px}
  .health-hub .vitals{height:36px}.health-hub .vital-tag{font-size:9px}
  .board-lanes{gap:12px}.board-lane{gap:5px}.board-caption{font-size:10px;writing-mode:vertical-rl}
  .board-preview span{max-width:65px}.table-feedback{font-size:11px}
  .desktop-reading-tip{display:none}
  .hand-zone .decision{padding:10px}.decision>p{font-size:13px}
  #card-dialog{inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:88dvh;border-radius:18px 18px 0 0;padding:48px 20px max(24px,env(safe-area-inset-bottom));box-sizing:border-box}
  #card-dialog .card-dialog-layout{display:flex;flex-direction:column;gap:18px}
  #card-dialog .enlarged-face{width:min(230px,65vw);max-width:none;flex:none;align-self:center}
  #card-dialog .card-dialog-copy{width:100%}
  #card-dialog .card-dialog-copy h2{font-size:23px}
  #card-dialog .card-effect{font-size:16px}
  #card-dialog .card-buttons{position:sticky;bottom:-24px;background:#16262ef5;padding:12px 0;margin-bottom:0}
  #card-dialog .card-buttons button{flex:1}
  #close-card-dialog{position:sticky;top:-48px;float:right;margin-top:-44px;margin-right:-12px;background:#233640}
}
@media(max-width:360px){.health-hub{grid-template-columns:minmax(0,1fr) 118px minmax(0,1fr)}.health-hub .health-values{flex-wrap:wrap}.round-callout .status-title{font-size:13px}}

/* Resolved effects never change the size of the central information bar. */
.player-snapshot{position:relative}
.settlement-floats{position:absolute;z-index:5;left:0;right:0;top:50px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:5px;pointer-events:none}
.settlement-chip{display:inline-block;padding:5px 9px;border:1px solid #b7ced666;border-radius:6px;background:#12232af5;color:#d5e3eb;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 4px 14px #0005;animation:settlement-rise 1600ms ease-out both}
.settlement-chip.damage{color:#ffb0a5;border-color:#d7756d}.settlement-chip.heal{color:#b0f4ca;border-color:#74c998}.settlement-chip.shield{color:#aedaff;border-color:#76b5db}.settlement-chip.break{color:#f2d8a2;border-color:#cbb382}
@keyframes settlement-rise{0%{opacity:0;transform:translateY(8px)}15%,80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10px)}}
.effect-notes{height:56px;overflow-y:auto;margin-top:6px;padding:4px 7px;border-left:2px solid #c3a87166;background:#07161c33;scrollbar-width:thin}
.effect-notes p{margin:0 0 4px;font-size:11px;line-height:1.6;color:#bdcbd0}
.effect-notes button{display:inline;padding:0 2px;background:none;border:0;color:#e0ca9c;border-radius:2px;font-size:inherit;text-decoration:underline;text-decoration-color:#e0ca9c55;text-underline-offset:3px}
.effect-notes button:hover{color:#fff0cd;background:#d8c09122}
@media(max-width:650px){.settlement-floats{top:72px;justify-content:center;gap:3px}.settlement-chip{font-size:11px;padding:4px 5px}.effect-notes{height:62px;padding:4px}.effect-notes p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.settlement-chip{animation:none}}

/* Shared bronze trim: faction accents belong to the table, not action meanings. */
:root{--gold:#cdb17b;--line:#c1a77533;--radius-panel:14px;--radius-control:8px;--radius-card:8px;--faction:#cdb17b}
body[data-player-deck=orange]{--faction:#df9b70}
body[data-player-deck=blue]{--faction:#91bddf}
body[data-player-deck=green]{--faction:#9fc48b}
body[data-player-deck=purple]{--faction:#c1a0df}
body.has-game{background:radial-gradient(ellipse at 50% 0,#283b412e,transparent 65%),#101b22}
.battle-table{border-color:var(--line);border-radius:var(--radius-panel);background:linear-gradient(145deg,#1b2d34f5,#15262df5);box-shadow:inset 0 1px #e3c48b12,0 18px 40px #0003}
.panel,.utility-content,.deck-choice,.friend-entrance{border-radius:var(--radius-panel)}
button,select,input[type=number],.utility>summary{border-radius:var(--radius-control)}
button.primary{background:linear-gradient(#cfb47f,#b89a63);border-color:#e3c791;color:#19252b;box-shadow:inset 0 1px #fff3;}
button.primary:hover:not(:disabled){background:linear-gradient(#e3c791,#cfb47f)}
.card-image,.card-image img,.card-back,.primer-card,.primer-card img{border-radius:var(--radius-card)}
.card-back{border:2px solid #cdb17b;box-shadow:-3px 4px 7px #0007}
.hand-heading{border-bottom:1px solid var(--line);padding-bottom:10px}
.hand-heading h2{border-left:3px solid var(--faction);padding-left:9px;color:#eee3cf}
.player-snapshot:last-child .player-identity{color:var(--faction)}
.legendary-card:not(.ends-turn-card):not(.continues-card) .card-image{box-shadow:0 0 0 1px #dac394,0 5px 15px #0007}
.legendary-card .card-image::after{content:"";position:absolute;pointer-events:none;inset:0;border:1px solid #f3daa033;border-radius:inherit}
.play-tabs button[aria-pressed=true],.atlas-filters button[aria-pressed=true]{background:#cdb17b20;color:#efd9ad;box-shadow:inset 0 -2px #cdb17b}
.draw-feedback{border-color:#cdb17b88;background:#182a31f5}
.result-dialog{border:1px solid #cdb17b99;box-shadow:0 0 0 5px #cdb17b12,0 24px 90px #000b}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid #f0d59e;outline-offset:3px}
@media(max-width:650px){.battle-table{border-radius:12px}.card-back{border-radius:5px}}
@media(prefers-reduced-motion:reduce){.deck-choice{transition:none}.deck-choice:hover:not(:disabled){transform:none}}

/* Equal visual weight for health/shields and clearer readable effect summaries. */
.health-values .hp>.primer-icon,.health-values .shield-total>.primer-icon{width:24px;height:24px;flex:none;align-self:center}
.symbols .symbol{font-size:13px;gap:6px}
.symbols .symbol .primer-icon{width:23px;height:23px}
#card-hover-preview p{font-size:15px}
#card-dialog .card-effect{font-size:17px}
@media(max-width:650px){.health-values .hp>.primer-icon,.health-values .shield-total>.primer-icon{width:20px;height:20px}.health-hub .health-values{gap:4px}}

/* Desktop battle layout: spend vertical space on cards, not empty panel rows.
   Intrinsic rows still grow for long labels; never clip the page to the viewport. */
@media(min-width:901px){
  body.has-game:not(.in-tutorial) .site-header{padding:5px 20px}
  body.has-game:not(.in-tutorial) .brand-mark{font-size:24px}
  body.has-game:not(.in-tutorial) main{padding:8px 20px 20px}
  body.has-game:not(.in-tutorial) .battle-table:has(.health-hub){grid-template-columns:minmax(0,1fr) minmax(180px,220px) minmax(0,1fr);gap:4px 14px;padding:7px 14px}
  body.has-game:not(.in-tutorial) .opponent-row{grid-column:1/-1;grid-row:1;min-height:0;grid-template-columns:minmax(210px,.8fr) minmax(0,1.4fr);grid-template-rows:auto auto auto;gap:3px 22px}
  body.has-game:not(.in-tutorial) .opponent-zone{grid-column:1;grid-row:1/3;padding:4px 0}
  body.has-game:not(.in-tutorial) .opponent-hand{margin-top:8px}
  body.has-game:not(.in-tutorial) .card-backs{padding:4px 3px 6px}
  body.has-game:not(.in-tutorial) .card-back{flex-basis:62px}
  body.has-game:not(.in-tutorial) .card-back+.card-back{margin-left:-36px}
  body.has-game:not(.in-tutorial) .hand-caption{margin-top:2px}
  body.has-game:not(.in-tutorial) .played-panel{display:contents}
  body.has-game:not(.in-tutorial) .play-strip-heading{grid-column:2;grid-row:1;min-height:26px;padding-right:68px}
  body.has-game:not(.in-tutorial) .play-strip{grid-column:2;grid-row:2;min-height:0;margin:0;padding:3px 3px 5px}
  body.has-game:not(.in-tutorial) .play-strip-controls{grid-column:2;grid-row:1;justify-self:end;align-self:center;width:60px}
  body.has-game:not(.in-tutorial) .play-strip-controls>span{display:none}
  body.has-game:not(.in-tutorial) .effect-notes{grid-column:1;grid-row:2;align-self:end;height:24px;margin:0;padding:2px 6px}
  body.has-game:not(.in-tutorial) .effect-notes:has(>.subtle:only-child){visibility:hidden}
  body.has-game:not(.in-tutorial) .played-slot{--played-width:clamp(104px,14vh,132px);flex-basis:var(--played-width);width:var(--played-width)}
  body.has-game:not(.in-tutorial) .played-slot .card{width:var(--played-width)}
  body.has-game:not(.in-tutorial) .effect-stack{grid-auto-rows:28px;padding-bottom:calc(var(--played-width)*1039/744 - 16px);max-height:calc(var(--played-width)*1039/744 + 32px)}
  body.has-game:not(.in-tutorial) .strip-empty{min-height:calc(clamp(104px,14vh,132px)*1039/744 + 28px)}
  body.has-game:not(.in-tutorial) .health-hub,body.has-game:not(.in-tutorial) .board-lanes{display:contents}
  body.has-game:not(.in-tutorial) .player-snapshot{grid-row:2;padding-top:4px;border-top:1px solid var(--line)}
  body.has-game:not(.in-tutorial) .player-snapshot:first-child{grid-column:1}
  body.has-game:not(.in-tutorial) .player-snapshot:last-child{grid-column:3}
  body.has-game:not(.in-tutorial) .health-hub .vitals{height:auto;max-height:20px;margin-top:2px;flex-wrap:nowrap;overflow:auto}
  body.has-game:not(.in-tutorial) .vitals:empty{display:none}
  body.has-game:not(.in-tutorial) .vital-tag{flex:none;padding:0 5px}
  body.has-game:not(.in-tutorial) .hp{font-size:30px}
  body.has-game:not(.in-tutorial) .round-callout{grid-column:2;grid-row:2/4;min-height:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:5px 8px}
  body.has-game:not(.in-tutorial) .round-callout .turn-number{margin-bottom:1px}
  body.has-game:not(.in-tutorial) .round-callout .plays-count{font-size:26px;line-height:1.1}
  body.has-game:not(.in-tutorial) .round-callout .subtle{margin:2px 0;font-size:11px;line-height:1.5}
  body.has-game:not(.in-tutorial) .round-callout button{margin-top:3px;padding:5px 10px}
  body.has-game:not(.in-tutorial) .board-lane{grid-row:3;height:30px;gap:7px}
  body.has-game:not(.in-tutorial) .board-lane:first-child{grid-column:1}
  body.has-game:not(.in-tutorial) .board-lane:last-child{grid-column:3}
  body.has-game:not(.in-tutorial) .board-lane .board{height:30px;max-height:30px}
  body.has-game:not(.in-tutorial) .board-lane .board-card{height:28px;padding:1px 5px}
  body.has-game:not(.in-tutorial) .board-preview img{width:18px;height:25.14px;flex-basis:18px}
  body.has-game:not(.in-tutorial) .settlement-floats{top:35px}
  body.has-game:not(.in-tutorial) .table-feedback{grid-column:1/-1;grid-row:4;height:18px;line-height:18px}
  body.has-game:not(.in-tutorial) .table-feedback:empty{display:none}
  body.has-game:not(.in-tutorial) .hand-zone{--card-width:clamp(124px,19vh,160px);grid-column:1/-1;grid-row:5;min-height:0}
  body.has-game:not(.in-tutorial) .hand-heading{margin-bottom:4px;padding-bottom:4px}
  body.has-game:not(.in-tutorial) .reading-tip{display:none}
  body.has-game:not(.in-tutorial) .hand-grid{min-height:0;padding:4px 3px 8px;gap:12px}
  body.has-game:not(.in-tutorial) .hand-grid .card{gap:5px}
  body.has-game:not(.in-tutorial) .hand-zone .card-buttons button{min-height:32px;padding:5px}
  body.has-game:not(.in-tutorial) .hand-zone .decision{padding:8px 10px}
  body.has-game:not(.in-tutorial) .decision>p{margin:3px 0 6px}
  body.has-game:not(.in-tutorial) .decision .choice-grid{padding-bottom:5px}
  body.has-game:not(.in-tutorial) .friend-room-bar{margin:0 0 6px;padding:4px 12px;gap:8px 18px}
  body.has-game:not(.in-tutorial) .friend-room-bar button{min-height:30px;padding:5px 10px}
  body.has-game:not(.in-tutorial) .support-panels{margin-top:8px}
}
@media(min-width:901px) and (max-height:700px){
  body.has-game:not(.in-tutorial) .site-header{padding-top:3px;padding-bottom:3px}
  body.has-game:not(.in-tutorial) main{padding-top:4px}
  body.has-game:not(.in-tutorial) .battle-table:has(.health-hub){padding-top:5px;padding-bottom:5px}
  body.has-game:not(.in-tutorial) .played-slot{--played-width:100px}
  body.has-game:not(.in-tutorial) .effect-stack{max-height:calc(var(--played-width)*1039/744 + 24px)}
  body.has-game:not(.in-tutorial) .hand-zone{--card-width:116px}
}

/* Keep both vital totals equally prominent, with a compact one-line identity. */
body .health-hub .health-values .hp,body .health-hub .health-values .shield-total{font-size:30px;font-variant-numeric:tabular-nums}
.player-snapshot .player-identity{display:block;white-space:nowrap;font-size:16px;line-height:1.3}
.player-snapshot .player-identity small{font-size:inherit;font-weight:500}
@media(max-width:650px){
  body .health-hub .health-values .hp,body .health-hub .health-values .shield-total{font-size:26px}
  .player-snapshot .player-identity{font-size:13px}
  .player-snapshot .health-values{max-width:100%;flex-wrap:wrap;row-gap:4px}
}
@media(max-width:420px){
  .health-hub{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr)}
  body .health-hub .health-values .hp,body .health-hub .health-values .shield-total{font-size:24px}
}
@media(max-width:360px){
  .health-hub{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)}
  body .health-hub .health-values .hp,body .health-hub .health-values .shield-total{font-size:22px}
  .player-snapshot .player-identity{font-size:12px}
}

/* Rebuilding a turn must not make the browser anchor to the moving hand. */
#game{overflow-anchor:none}

/* Public room discovery and password-protected invitations. */
/* Match the initial shell to the route before the state request completes. */
html:not([data-mode]) #start-friends{display:none!important}
html[data-mode="friends"]:not([data-ui-ready]) #cover-screen,
html[data-mode="single"]:not([data-ui-ready]) #cover-screen,
html[data-mode="tutorial"]:not([data-ui-ready]) #cover-screen{display:none}
.friend-entrance{max-width:700px;margin:3vh auto}
.friend-entrance form,.public-rooms{padding:20px 0;border-top:1px solid var(--line)}
.friend-entrance form h2,.public-rooms h2{font-size:18px;color:var(--gold)}
.friend-entrance form input,.friend-entrance form select{display:block;width:100%;min-height:42px;margin-bottom:14px;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:#14242c;color:var(--ink)}
.friend-entrance form button{min-height:44px;width:100%}
.public-room{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--line);border-radius:9px;padding:12px 16px;margin:8px 0;background:#14242c}
.public-room strong{letter-spacing:.12em}.public-room small{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.public-room button{min-width:80px;min-height:42px}

.friend-nickname-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;font-size:14px}
.draft-coin-intro{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:28px}
.draft-coin-intro h2,.draft-coin-intro p{margin:0}.draft-coin-intro p,.draft-coin-result{color:#e1c58b}.draft-coin-intro small{color:var(--muted)}
.draft-coin-stage{width:144px;height:142px;display:grid;place-items:center;padding-top:16px;perspective:800px}
.draft-coin{position:relative;width:110px;height:110px;transform-style:preserve-3d;animation:draft-coin-spin 1450ms linear both;--coin-end:1800deg;--coin-gentle-end:1440deg}
.draft-coin.land-back{--coin-end:1980deg;--coin-gentle-end:1620deg}
.draft-coin-intro.is-revealed .draft-coin{animation:none;transform:rotateY(var(--coin-end))}
.coin-face{position:absolute;inset:0;display:block;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.coin-front{transform:translateZ(3px)}.coin-back{transform:rotateY(180deg) translateZ(3px)}
.coin-rim{position:absolute;inset:2%;border-radius:50%;background:#ae8247;border:1px solid #d4b078}
.coin-pair-legend{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--muted)}
.coin-pair-legend span{display:flex;align-items:center;gap:7px}.coin-pair-legend img{width:32px;height:32px}
.draft-coin-result img{width:30px;height:30px;vertical-align:middle;margin-right:8px}
.draft-coin-intro h2{min-height:1.4em;font-size:23px;letter-spacing:.08em}.draft-coin-intro.is-revealed h2{color:#f2d79c}
.draft-coin-result{text-align:center;margin:0 0 12px;font-size:16px}
@keyframes draft-coin-spin{0%{transform:rotateY(0deg);animation-timing-function:ease-in}13.79%{transform:rotateY(120deg)}58.62%{transform:rotateY(calc(var(--coin-end) - 360deg));animation-timing-function:cubic-bezier(.2,.6,.4,1)}100%{transform:rotateY(var(--coin-end))}}
@keyframes draft-coin-gentle-spin{0%{transform:rotateY(0deg);animation-timing-function:ease-in}13.79%{transform:rotateY(90deg)}58.62%{transform:rotateY(calc(var(--coin-gentle-end) - 360deg));animation-timing-function:cubic-bezier(.2,.6,.4,1)}100%{transform:rotateY(var(--coin-gentle-end))}}
@media(prefers-reduced-motion:reduce){.draft-coin{animation-name:draft-coin-gentle-spin}}
.player-snapshot .player-identity{min-width:0;overflow:hidden;text-overflow:ellipsis}
.health-values{flex-shrink:0}.battle-nickname{color:var(--ink)}

.friend-selection-error{position:fixed;z-index:60;top:38%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100vw - 32px);margin:0;padding:18px 24px;border:1px solid #e1bd80;border-radius:12px;background:#302c24f5;box-shadow:0 10px 40px #0009;color:#ffe3ab;font-size:18px;text-align:center;pointer-events:none}

/* Larger previous-turn faces remain horizontally scrollable. */
@media(min-width:651px) and (max-width:900px){.played-slot{--played-width:124px}.played-slot,.played-slot .card{width:var(--played-width);flex-basis:var(--played-width)}}
@media(max-width:650px){.played-slot{--played-width:104px}.played-slot,.played-slot .card{width:var(--played-width);flex-basis:var(--played-width)}}
/* BEGIN GENERATED V27 THEME */
/* V27: warm paper, ink, champagne trim. Loaded after legacy layout rules.
   Game mechanics and presentation timing stay in table.js / sound.js. */
:root{color-scheme:light;color:#29413D;background:#F2F0E7;--ink:#29413D;--muted:#65756E;--line:#CFCBB9;--gold:#957540;--paper:#FFFCF3;--faction:#957540;--radius-panel:16px;--radius-control:9px}
body,body.has-game,body:not(.on-cover){background:radial-gradient(ellipse at 80% 0,#E4EADC 0,transparent 65%),#F2F0E7;color:var(--ink)}
body:not(.on-cover)::before{display:none}
body[data-player-deck=orange]{--faction:#AD5937}body[data-player-deck=blue]{--faction:#416B87}body[data-player-deck=green]{--faction:#456F56}body[data-player-deck=purple]{--faction:#735A92}
button,select,input[type=number],input[type=search]{background:#FFFCF3;color:var(--ink);border-color:#CFCBB9;box-shadow:none}
button:hover:not(:disabled){background:#E8ECDD;border-color:#9B9D83}
button.primary{background:#2C514A;border-color:#2C514A;color:#FFF7E4;box-shadow:inset 0 1px #FFFFFF15}
button.primary:hover:not(:disabled){background:#3E6758;border-color:#3E6758}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #A7762F;outline-offset:3px}
.panel,.utility-content,.deck-choice,.friend-entrance{background:#FFFCF3;border-color:var(--line);box-shadow:0 5px 18px #263B3310}
.site-header{max-width:1440px;padding:16px 32px;border-color:var(--line)}
.brand{color:#2C514A}.brand small{font-size:9px;letter-spacing:.08em}.brand-mark{color:#99763A}
.header-tools>button,.utility>summary,.header-tools>.home-link{background:#FFFCF370;border-color:#BDBEAA;color:#38564B}
.utility[open]>summary{color:#795C2E;border-color:#9E8251}
.utility-content{background:#FFFCF9;box-shadow:0 15px 45px #22382B22}.quick-rules p{color:#4D6057}
.utility-content h2{color:#29483D}.ai-controls select{background:#F4F3EA}.music-volume input{accent-color:#416452}
main{max-width:1440px;padding:18px 32px 30px}

/* Home: the actual collectible art replaces the cinematic landscape. */
body.on-cover .site-header{position:absolute;max-width:none;padding:22px 38px;background:transparent}
.cover-screen{min-height:100svh;background:#F3F1E7;isolation:isolate}
.cover-art{width:76%;height:100%;inset:0 0 0 auto;object-fit:cover;opacity:.8}
.cover-shade{background:linear-gradient(90deg,#F3F1E7 0%,#F3F1E7DD 36%,#F3F1E700 72%)}
.cover-copy{min-height:100svh;width:46%;padding:105px 0 70px clamp(32px,7vw,110px);z-index:2}
.cover-kicker{font-size:12px;letter-spacing:.24em;color:#7D754F;margin:0 0 18px}
.cover-copy h1{font-size:clamp(42px,5.3vw,78px);color:#294D43;text-shadow:none;letter-spacing:.09em;line-height:1.2}
.cover-intro{font-size:16px;line-height:1.9;color:#5F7166;margin:24px 0 0}
.cover-author{font-size:12px;letter-spacing:.15em;color:#7C7B64;margin:16px 0 30px}
.cover-modes{width:min(290px,100%);gap:10px}
.cover-copy .cover-modes>button{background:#FFFCF3EB;border:1px solid #AEA98D;min-height:51px;color:#335447;border-radius:10px;box-shadow:0 3px 0 #D6D4BF66;font-size:16px;letter-spacing:.16em}
.cover-copy .cover-modes>button:hover:not(:disabled){background:#2C514A;color:#FFF7E4;border-color:#2C514A;transform:translateY(-1px)}
.cover-copy #continue-game{background:transparent;color:#547363;border-color:#BCC4B1;min-width:0;width:min(290px,100%)}
.cover-gallery{position:absolute;left:48%;right:4%;top:20%;bottom:14%;z-index:1;pointer-events:none}
.cover-card{position:absolute;width:36%;max-width:230px;aspect-ratio:744/1039;filter:drop-shadow(0 14px 13px #27433727)}
.cover-card img{display:block;width:100%;height:auto;border-radius:12px}
.cover-card-0{left:0;top:11%;transform:rotate(-15deg)}
.cover-card-1{left:21%;top:0;transform:rotate(-5deg)}
.cover-card-2{left:43%;top:0;transform:rotate(6deg)}
.cover-card-3{left:64%;top:12%;transform:rotate(17deg)}
.cover-factions{display:flex;justify-content:center;gap:14px;position:absolute;bottom:0;left:0;right:0;color:#3C574A;font-size:13px;letter-spacing:.08em}
.cover-factions span{display:flex;align-items:center;gap:6px}.cover-factions img{width:30px;height:30px;border-radius:50%}

/* Faction choices: broad colour planes and the same four seals as the back. */
.deck-screen{max-width:1180px;margin:auto;padding:12px 0}
.deck-screen-heading h1,.deck-choice-copy h2{font-family:"Microsoft JhengHei",sans-serif;color:#2C514A;letter-spacing:.08em}
.deck-screen-heading h1{font-size:32px}.deck-screen-heading p,.deck-choice-theme{color:#647565}.deck-screen-heading .eyebrow,.eyebrow{color:#8C713E}
.deck-choice{border:1px solid #CDCDB8;border-radius:16px;background:#FFFCF3;box-shadow:0 5px 16px #3046370C}
.deck-choice:hover:not(:disabled){background:#FFFEF8;border-color:var(--sigil-tint);box-shadow:0 8px 22px #3046371A;transform:translateY(-3px)}
.deck-choice.orange{--sigil-tint:#AD5937;--sigil-metal:#AD5937;--sigil-paper:#F3DFBE}
.deck-choice.blue{--sigil-tint:#416B87;--sigil-metal:#416B87;--sigil-paper:#DEEAF0}
.deck-choice.green{--sigil-tint:#456F56;--sigil-metal:#456F56;--sigil-paper:#E4E9D5}
.deck-choice.purple{--sigil-tint:#735A92;--sigil-metal:#735A92;--sigil-paper:#E9E1F0}
.deck-sigil-art{background:var(--sigil-paper);padding:20px 26px 12px;border-color:#C7C6AC}
.deck-sigil-art img{max-width:155px;border-radius:16px;box-shadow:none}
.deck-seal-number{color:var(--sigil-tint);opacity:.75}
.deck-choice-copy{padding:19px}.deck-choice-copy h2{color:var(--sigil-tint);font-size:27px;font-weight:750}
.deck-choice-theme{font-size:13px;letter-spacing:.05em}.deck-choice-description{font-size:13px;line-height:1.9;color:#5E6C62;margin-bottom:20px}
.deck-keywords>span{background:var(--sigil-paper);color:var(--sigil-tint);border-color:transparent;font-size:11px}
.deck-choice-cta{color:var(--sigil-tint);font-size:13px}.setup-progress{color:#6F796B}.setup-progress li[aria-current=step]{color:#315748}.setup-progress li[aria-current=step]>span{background:#315748;color:#FFF6DF;border-color:#315748}.setup-progress li.complete{color:#50735B}

/* Battle: quiet paper surfaces, one line of identity and three stable piles. */
body .battle-table{background:#E7EBDF;border:1px solid #B8C4B0;box-shadow:inset 0 0 0 5px #FFFFFF35,0 8px 25px #30463710;border-radius:18px}
.zone-heading h2,.hand-heading h2{color:#325346}.zone-heading>span{color:#657563}
.card-back{background:#234544;border:2px solid #B89A60;box-shadow:-2px 0 0 #FAF6E6,0 3px 5px #203D3528}
.card-back img{width:100%;height:100%;left:auto;top:auto;object-fit:contain}
.hand-caption,.empty-zone,.strip-empty{color:#6A7969}
.play-tabs{background:#D6DFCD;border-radius:8px;padding:2px}
.play-tabs button{color:#627460}.play-tabs button[aria-pressed=true]{background:#FFFCF3;color:#2C514A;box-shadow:0 1px 3px #29433715;border-radius:6px}
.play-strip-controls>button,.play-strip-controls>span{color:#61765E}
.latest-play .play-order{color:#886C31}.latest-play .card-image{box-shadow:0 0 0 2px #AA8B4E,0 4px 12px #30523E22}
.stack-label{background:#F4EDDB;color:#755C2F}.stack-layer+.stack-layer .card-image{box-shadow:0 -2px 0 #B2975D,0 -4px 8px #314E3120}
.health-hub{border-color:#BBC9B4;align-items:start}.health-line{gap:10px}
.player-snapshot{position:relative;background:#FFFCF3;border:1px solid #C8CEBA;border-radius:12px;padding:10px 12px;box-shadow:0 2px 0 #CBD4BE44}
.player-snapshot.orange{--player-accent:#AD5937}.player-snapshot.blue{--player-accent:#416B87}.player-snapshot.green{--player-accent:#456F56}.player-snapshot.purple{--player-accent:#735A92}
.player-snapshot .player-identity,.player-snapshot:last-child .player-identity{font-size:15px;color:var(--player-accent);line-height:1.4;min-width:0}.player-identity small{color:#647561}.battle-nickname{color:#355547}
.health-values{gap:12px}.health-values .hp{color:#9B5347}.health-values .shield-total{color:#3F7082}
body .health-hub .health-values .hp,body .health-hub .health-values .shield-total{font-size:28px;line-height:1;font-weight:750}
.hp small{color:#7C836E}.health-values .hp.low-hp{color:#BD3D35}
.zone-counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:10px}
.zone-counter{min-width:0;display:flex;align-items:center;gap:4px;border:1px solid #DEDCCB;border-radius:6px;padding:6px 5px;background:#F4F2E6;color:#5F705F;font-size:11px;line-height:1.3;font-weight:500;white-space:nowrap}
.zone-counter strong{font-size:17px;font-weight:750;color:#355547;font-variant-numeric:tabular-nums;margin-left:auto}
.zone-counter .pile-icon{font-size:16px;line-height:1;color:#8E7950}.zone-counter:hover:not(:disabled){background:#E6ECD9;border-color:#A4B292}
.vital-tag{background:#E2EBD9;color:#496645}.vital-tag.ongoing{color:#85652F;background:#F1E4C5}
.vitals:empty,.table-feedback:empty{display:none}
.round-callout{border-radius:12px;background:#D5E2CA;color:#305A45}.round-callout .status-title{color:#315A43}.round-callout .plays-count{color:#315A43}.round-callout .subtle,.round-callout .turn-number{color:#5D7557}
.board-lane .board-caption{color:#5E7159}.board-card{background:#F6F7EC;border-color:#C5CEB7;color:#476046}.shield-point{color:#3D7082}
.hand-heading h2{color:#335344}.hand-heading .flow-legend{color:#63705D}.legend-dot{background:#A68743}.legend-dot.blue{background:#448CA4}
.card-image{background:#FFFCF3;box-shadow:0 4px 9px #2E47332E}.card-image:hover:not(:disabled){box-shadow:0 0 0 2px #A1AD8C,0 6px 16px #2E47332E}
.ends-turn-card .card-image{box-shadow:0 0 0 2px #B29150,0 4px 8px #2E473322}.continues-card .card-image{box-shadow:0 0 0 2px #5797A8,0 4px 8px #2E473322}
.legendary-card:not(.ends-turn-card):not(.continues-card) .card-image{box-shadow:0 0 0 1px #B89C62,0 4px 10px #2E473322}
.card-buttons .discard{color:#667357;background:#F5F3E7;border-color:#C6CBB4}.flow-tag{background:#F5E9CBEF;color:#765A22;border:1px solid #C9AF73}.flow-tag.flow-continuing{background:#E2EFF0F2;color:#35667A;border-color:#8AB0BA}
.table-feedback,.reading-tip,.resolution-feedback,.effect-notes p{color:#59715D}.effect-notes{background:#DDE4D4;border-color:#A8B899}.effect-notes button{color:#456445;text-decoration-color:#9DAD8F}.effect-notes button:hover{color:#243C2A;background:#CFDDC2}
.decision{background:#FFFCF3;border-color:#B8B998}.decision h2{color:#385644}.decision>p,.selected-cost,.candidate-note{color:#6A704F}
.draft-matchup,.draft-picks,.draft-picks strong{color:#5D705B}.draft-coin-intro p,.draft-coin-result,.draft-coin-intro.is-revealed h2{color:#8A6B32}
.settlement-chip{background:#FFFCF3;color:#34594B;box-shadow:0 4px 12px #31443325}.settlement-chip.damage{color:#B63D31}.settlement-chip.heal{color:#348451}.settlement-chip.shield{color:#34718D}.settlement-chip.break{color:#8B6623}

/* All modal surfaces and the tutorial share the same paper, spacing and ink. */
#card-dialog,.atlas-dialog,.zone-dialog,.result-dialog{background:#FFFCF5;color:#29483D;border:1px solid #B9A475;box-shadow:0 0 0 5px #D1BD8D22,0 24px 80px #17352744;border-radius:18px}
dialog::backdrop,#card-dialog::backdrop,.atlas-dialog::backdrop,.result-dialog::backdrop{background:#1D382F99;backdrop-filter:blur(5px)}
#card-dialog .card-effect,.dialog-flow,.card-dialog-copy h2{color:#3D5747}.dialog-flow{color:#7E6739}
.atlas-search input{background:#F4F3E8;color:var(--ink);border-color:#CEC9AD}.atlas-filters button[aria-pressed=true]{background:#315748;color:#FFF6DF;box-shadow:none}
.atlas-card:hover:not(:disabled){color:#846832}.atlas-card img{box-shadow:0 4px 9px #29433722}
.zone-dialog{width:min(940px,calc(100% - 28px));max-width:none;max-height:88svh;padding:24px;overflow:auto}.zone-empty{padding:34px 0;margin:0;text-align:center;grid-column:1/-1;color:#72806B}
.zone-dialog .atlas-cards{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:20px 14px}
.match-result h1,.result-seal{color:#987332;text-shadow:none}.match-result>p:not(.eyebrow),.result-score strong{color:#4F6857}.match-result .eyebrow{color:#9A7B48}.match-result.defeat h1,.match-result.defeat .result-seal{color:#A9544A}.match-result.draw h1,.match-result.draw .result-seal{color:#487A89}
.tutorial-coach,.primer-panel,.tutorial-complete{background:#FFFCF3;border-color:#C9C6AB;color:var(--ink);box-shadow:0 5px 18px #30463712}
.tutorial-coach h2,.tutorial-complete h1,.primer-copy h2,.primer-copy h3,.primer-heading h1,.primer-heading h2,.primer-example strong{color:#315748}
.tutorial-coach p,.primer-copy p,.primer-parts p,.primer-heading p,.primer-figure figcaption,.primer-example p{color:#5F705E}
.tutorial-complete li{color:#5F705E}
.primer-example{background:#E9EEDC;border-color:#CBD3B9}.primer-parts li>span{background:#315748;color:#FFFCF3}.primer-tabs button[aria-pressed=true]{background:#315748;color:#FFF8E7}
#card-hover-preview{background:#FFFCF5;border-color:#B9A475;box-shadow:0 10px 30px #243B3033;color:var(--ink)}#card-hover-preview p{color:#506A57}#card-hover-preview small{color:#78856D}
.symbol{background:#E8EBD8;color:#405A46}
.card-primer{background:#FFFCF3;border-color:#C9C6AB;box-shadow:0 5px 18px #30463712}.card-primer h1{color:#315748}.primer-intro{color:#5F705E}.primer-progress li[aria-current=step]{color:#315748}.primer-progress li[aria-current=step]>span{background:#315748;color:#FFF6DF;border-color:#315748}
.primer-topics button{background:#F4F3E7;border-color:#CDD1B9}.primer-topics strong{color:#315748}.primer-topics button>span>span{color:#60745F}.primer-topics button[aria-pressed=true]{background:#E7EFD9;border-color:#9DB18B;box-shadow:inset 3px 0 #769761}.primer-card{box-shadow:0 6px 18px #29433725}.primer-footer{background:#FFFCF3F5}
.tutorial-progress li[aria-current=step]{color:#315748}.tutorial-progress li[aria-current=step]>span{background:#315748;color:#FFF6DF}.tutorial-progress li.complete{color:#4F7454}
.support>summary,.zone-details h3,.history-heading,.what{color:#4B6451}

/* Invitation forms: consistent controls without changing seat logic. */
.friend-entrance{padding:26px;border-color:#CBC8AC}.friend-entrance h1,.friend-entrance form h2,.public-rooms h2,.friend-heading h1{color:#335748}
.friend-entrance form input,.friend-entrance form select{background:#F7F5EB;color:#355346;border-color:#C7C9B1}
.public-room,.friend-player,.friend-room-bar{background:#FFFCF3;color:#3E5B49;border-color:#C4CBB4}.public-room small,.friend-player span{color:#6B7A63}
.friend-entrance p,.friend-heading p{color:#61745F}.friend-player strong{color:#355748}.friend-lobby .deck-choice[aria-pressed=true]{border-color:var(--sigil-tint);box-shadow:0 0 0 2px #8CA17B55}
.friend-selection-error,.exchange-feedback{background:#FFF7E4F8;border-color:#B6985D;color:#355346;box-shadow:0 10px 40px #25432F33}.exchange-feedback strong{color:#8C682B}.exchange-feedback p{color:#3E5946}.exchange-feedback small{color:#708062}
@media(min-width:851px){
  .friend-entrance:has(#friend-create){max-width:1000px;margin:2vh auto;display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .friend-entrance:has(#friend-create)>p,.friend-entrance:has(#friend-create)>h1,.friend-entrance:has(#friend-create)>.friend-nickname-row{grid-column:1/-1}
  .friend-entrance #friend-create{grid-column:1;grid-row:4;margin:0;padding-bottom:14px}
  .friend-entrance .public-rooms{grid-column:1;grid-row:5;padding-bottom:0}
  .friend-entrance #friend-join{grid-column:2;grid-row:4/6;margin:0;border-left:1px solid var(--line);padding-left:28px}
}

@media(min-width:901px){
  body.has-game:not(.in-tutorial) main{padding-bottom:4px}
  body.has-game:not(.in-tutorial) .battle-table:has(.health-hub){gap:5px 14px;padding:9px 16px}
  body.has-game:not(.in-tutorial) .play-strip{height:calc(clamp(104px,14vh,132px)*1039/744 + 46px);min-height:0}
  body.has-game:not(.in-tutorial) .effect-stack{max-height:calc(clamp(104px,14vh,132px)*1039/744 + 21px)}
  body.has-game:not(.in-tutorial) .player-snapshot{padding:8px 12px;border:1px solid #C8CEBA}
  body.has-game:not(.in-tutorial) .zone-counters{margin-top:8px}
  body.has-game:not(.in-tutorial) .health-hub .vitals{max-height:22px}
  body.has-game:not(.in-tutorial) .round-callout{grid-row:2/4;padding:8px}
  body.has-game:not(.in-tutorial) .board-lane{height:32px}
  body.has-game:not(.in-tutorial) .hand-zone{--card-width:clamp(122px,18.4vh,170px)}
}
@media(min-width:901px) and (max-width:1120px){.health-line{flex-wrap:wrap;gap:6px}.health-values{margin-left:auto}.zone-counter{font-size:10px}.zone-counter .pile-icon{display:none}.cover-gallery{left:49%;right:3%}.cover-copy{width:47%;padding-left:5vw}.cover-copy h1{font-size:48px}}
@media(max-width:900px){
  .cover-copy{width:48%;padding-left:5vw}.cover-copy h1{font-size:45px}.cover-intro{font-size:14px}.cover-gallery{left:49%;right:4%;top:26%;bottom:24%}.cover-factions{gap:8px;font-size:11px}.cover-factions img{width:22px;height:22px}
  .health-hub{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:10px;padding:10px 0}.health-line{flex-direction:column;align-items:stretch;gap:9px}.player-identity{text-align:left}.health-values{justify-content:center}.zone-counters{gap:3px}.zone-counter{flex-wrap:wrap;justify-content:center;font-size:10px;padding:5px 2px;gap:2px}.zone-counter .pile-icon{display:none}.zone-counter strong{flex-basis:100%;text-align:center;margin:0;font-size:17px}.player-snapshot{padding:9px 7px}.round-callout{padding:12px 5px}.deck-choice-copy{padding:16px}
}
@media(max-width:650px){
  body.on-cover .site-header{padding:16px 18px}.site-header{padding:12px 14px}.brand small{font-size:7px}main{padding:12px 10px}
  .cover-screen{min-height:100svh}.cover-art{width:100%;opacity:.65}.cover-shade{background:linear-gradient(0deg,#F3F1E7 18%,#F3F1E7BB 55%,#F3F1E722)}
  .cover-copy{width:100%;min-height:100svh;padding:280px 24px 30px;align-items:center;justify-content:center;text-align:center}.cover-copy h1{font-size:45px}.cover-kicker{display:none}.cover-intro{font-size:14px;line-height:1.7;margin:14px 0 0}.cover-author{margin:10px 0 20px}.cover-modes{width:min(300px,100%)}.cover-copy .cover-modes>button{min-height:45px;padding:10px}.cover-gallery{left:19%;right:19%;top:86px;bottom:auto;height:190px;z-index:1}.cover-card{width:36%;max-width:106px}.cover-card-0,.cover-card-3{top:10%}.cover-factions{display:none}
  .deck-sigil-art{padding:14px 20px 8px}.deck-sigil-art img{max-width:125px}.deck-choice-copy h2{font-size:25px}.deck-choice-description{font-size:12px}
  .health-hub{grid-template-columns:minmax(0,1fr) 98px minmax(0,1fr);gap:6px}.player-snapshot{padding:8px 5px;border-radius:9px}.player-snapshot .player-identity{font-size:12px}.player-identity small{font-size:inherit}
  body .health-hub .health-values .hp,body .health-hub .health-values .shield-total{font-size:24px}.health-values{gap:7px}.health-values .hp>.primer-icon,.health-values .shield-total>.primer-icon{width:18px;height:18px}.hp small{display:none}.zone-counter{font-size:9px;white-space:normal;line-height:1.4}.zone-counters{margin-top:7px;gap:2px}.zone-counter strong{font-size:15px}.round-callout .status-title{font-size:13px}.round-callout .subtle{font-size:10px}.zone-dialog{padding:18px}
  .battle-table{gap:10px}.friend-entrance{padding:18px}.zone-dialog .atlas-cards{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  body.has-game:not(.in-tutorial) .opponent-row{min-height:0}
  body.has-game:not(.in-tutorial) .play-strip{height:191px;min-height:0}
  body.has-game:not(.in-tutorial) .effect-stack{max-height:167px;grid-auto-rows:26px}
  body.has-game:not(.in-tutorial) .effect-notes{height:28px}
  body.has-game:not(.in-tutorial) .effect-notes:has(>.subtle:only-child){display:none}
  .health-hub{min-height:0;padding:8px 0}.round-callout{min-height:0}
  .board-lanes{padding:3px 0}.board-lane{height:34px}.board-lane .board{margin-top:0;max-height:34px}
  .hand-zone,.hand-grid{min-height:0}.hand-heading{margin-bottom:6px;padding-bottom:6px}.reading-tip{display:none}
}
@media(prefers-reduced-motion:reduce){.cover-copy .cover-modes>button:hover:not(:disabled){transform:none}}

/* BEGIN GENERATED V30 BACKGROUNDS */
:root{--compass-home:url("/background-compass-home.svg?v=665e5b3d4bdf");--compass-setup:url("/background-compass-setup.svg?v=56ad164094a3");--compass-battle:url("/background-compass-battle.svg?v=5461b0cca263");--world-paper:url("/background-world-paper.svg?v=12acd1cd1dbe");}

/* Shared paper / wash / engraving hierarchy. Decoration never adds layout height.
   Body ::after remains reserved for the existing critical-health warning. */
body,body.has-game,body:not(.on-cover){
  background-color:#F3F1E8;
  background-image:var(--world-paper),var(--compass-setup),
    radial-gradient(ellipse at 100% 0%,#DDD5E64D,transparent 52%),
    radial-gradient(ellipse at 0% 80%,#DCE7D780,transparent 56%),
    radial-gradient(ellipse at 30% 0%,#EAD7B94D,transparent 48%);
  background-size:128px 128px,760px 760px,100% 100%,100% 100%,100% 100%;
  background-position:0 0,calc(100% + 230px) -170px,0 0,0 0,0 0;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-attachment:scroll,fixed,fixed,fixed,fixed;
}
.cover-screen{
  background-color:#F3F1E8;
  background-image:var(--world-paper),
    linear-gradient(90deg,#F3F1E8 2%,#F3F1E8C2 32%,#F3F1E800 61%),
    var(--compass-home),
    radial-gradient(ellipse at 78% 45%,#FFFFFFB3,transparent 46%),
    radial-gradient(ellipse at 95% 12%,#DED4EA99,transparent 52%),
    radial-gradient(ellipse at 92% 90%,#D4E3D6B3,transparent 55%),
    radial-gradient(ellipse at 46% 5%,#F0D7B68C,transparent 46%);
  background-size:128px 128px,100% 100%,min(850px,74vw) min(850px,74vw),100% 100%,100% 100%,100% 100%,100% 100%;
  background-position:0 0,0 0,110% 48%,0 0,0 0,0 0,0 0;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
/* Replaces the earlier cover bitmap; actual card faces remain the foreground. */
.cover-art,.cover-shade{display:none}
.cover-factions{padding:12px 0;border-top:1px solid #A6967033}
.deck-screen-heading{border-bottom:1px solid #B3AA8A40;padding-bottom:18px}
body .battle-table{
  background-color:#E9EDE2;
  background-image:var(--world-paper),var(--compass-battle),
    radial-gradient(ellipse at 3% 5%,#F8EAD657,transparent 49%),
    radial-gradient(ellipse at 100% 95%,#D7E1ED70,transparent 54%),
    linear-gradient(125deg,#FFFFFF45,#E0E8D540);
  background-size:128px 128px,650px 650px,100% 100%,100% 100%,100% 100%;
  background-position:0 0,calc(100% + 205px) 50%,0 0,0 0,0 0;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
body.has-game{
  background-image:var(--world-paper),
    radial-gradient(ellipse at 0% 0%,#EAD7B94D,transparent 55%),
    radial-gradient(ellipse at 100% 80%,#DCE7D766,transparent 58%);
  background-size:128px 128px,100% 100%,100% 100%;
  background-position:0 0;background-repeat:repeat,no-repeat,no-repeat;
}
@media(max-width:900px){
  .cover-screen{background-size:128px 128px,100% 100%,640px 640px,100% 100%,100% 100%,100% 100%,100% 100%;background-position:0 0,0 0,calc(100% + 240px) 40%,0 0,0 0,0 0,0 0}
}
@media(max-width:650px){
  body,body.has-game,body:not(.on-cover){background-attachment:scroll}
  body:not(.has-game){background-size:128px 128px,520px 520px,100% 100%,100% 100%,100% 100%;background-position:0 0,calc(100% + 260px) -100px,0 0,0 0,0 0}
  .cover-screen{
    background-image:var(--world-paper),linear-gradient(0deg,#F3F1E8E6 5%,#F3F1E800 78%),var(--compass-home),radial-gradient(ellipse at 90% 0%,#DED4EA99,transparent 56%),radial-gradient(ellipse at 0% 65%,#D4E3D680,transparent 56%),radial-gradient(ellipse at 20% 0%,#F0D7B68C,transparent 46%);
    background-size:128px 128px,100% 100%,470px 470px,100% 100%,100% 100%,100% 100%;
    background-position:0 0,0 0,50% -60px,0 0,0 0,0 0;
  }
  body .battle-table{background-size:128px 128px,460px 460px,100% 100%,100% 100%,100% 100%;background-position:0 0,calc(100% + 260px) 70%,0 0,0 0,0 0}
}
@media(forced-colors:active){
  body,body.has-game,body:not(.on-cover),.cover-screen,body .battle-table{background-image:none}
}

/* V31: home only. The complete compass and fan share a single focal centre. */
body.on-cover .cover-screen{
  background-color:#F5F2E9;
  background-image:var(--world-paper),
    radial-gradient(ellipse at 72% 42%,#FFFDF5D9,transparent 46%),
    radial-gradient(ellipse at 98% 86%,#CDE0DB85,transparent 55%),
    radial-gradient(ellipse at 64% 8%,#EFDFBD80,transparent 48%),
    linear-gradient(110deg,#F5F2E9 32%,#EFF3EB 100%);
  background-size:128px 128px,100% 100%,100% 100%,100% 100%,100% 100%;
  background-position:0 0;background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
body.on-cover .cover-gallery{
  left:auto;right:3.5%;width:min(51%,840px);top:8%;bottom:8%;isolation:isolate;
}
body.on-cover .cover-gallery::before{
  content:"";position:absolute;left:50%;top:47%;width:min(100%,78svh);aspect-ratio:1;
  transform:translate(-50%,-50%);background:var(--compass-home) center/contain no-repeat;
  pointer-events:none;z-index:0;
}
body.on-cover .cover-gallery::after{
  content:"";position:absolute;left:14%;right:10%;top:73%;height:28px;
  background:radial-gradient(ellipse,#536F6426,transparent 70%);filter:blur(8px);
  pointer-events:none;z-index:0;
}
body.on-cover .cover-card{
  width:28%;max-width:225px;top:27%;transform-origin:50% 70%;
  filter:drop-shadow(0 12px 10px #294B3826) drop-shadow(0 2px 2px #294B381C);
}
body.on-cover .cover-card-0{left:2%;transform:rotate(-16deg);z-index:1}
body.on-cover .cover-card-3{left:69%;transform:rotate(16deg);z-index:2}
body.on-cover .cover-card-1,body.on-cover .cover-card-2{
  width:31%;max-width:250px;top:19%;
  filter:drop-shadow(0 16px 12px #294B3833) drop-shadow(0 3px 3px #294B3826);
}
body.on-cover .cover-card-1{left:22%;transform:rotate(-6deg);z-index:3}
body.on-cover .cover-card-2{left:47%;transform:rotate(6deg);z-index:4}
body.on-cover .cover-factions{z-index:5;bottom:0;left:9%;right:4%;border-top-color:#A696702E}
@media(min-width:651px) and (max-width:900px){
  body.on-cover .cover-gallery{right:2%;width:50%;top:14%;bottom:16%}
  body.on-cover .cover-card{top:32%}
  body.on-cover .cover-card-1,body.on-cover .cover-card-2{top:24%}
  body.on-cover .cover-factions{left:0;right:0}
}
@media(max-width:650px){
  body.on-cover .cover-screen{
    background-image:var(--world-paper),radial-gradient(ellipse at 80% 13%,#CDE0DB85,transparent 45%),radial-gradient(ellipse at 15% 5%,#EFDFBD8C,transparent 45%),linear-gradient(0deg,#F5F2E9 45%,#F1F4EC);
    background-size:128px 128px,100% 100%,100% 100%,100% 100%;background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  }
  body.on-cover .cover-gallery{left:6%;right:6%;width:auto;top:72px;bottom:auto;height:250px}
  body.on-cover .cover-gallery::before{top:49%;width:min(100%,340px)}
  body.on-cover .cover-gallery::after{top:88%;height:18px;filter:blur(5px)}
  body.on-cover .cover-card{width:28%;max-width:114px;top:33%;filter:drop-shadow(0 7px 6px #294B3826)}
  body.on-cover .cover-card-1,body.on-cover .cover-card-2{width:31%;max-width:126px;top:25%;filter:drop-shadow(0 10px 7px #294B3833)}
  body.on-cover .cover-copy{padding-top:370px}
}
@media(max-width:650px) and (max-height:720px){
  body.on-cover .cover-gallery{top:64px;height:210px}
  body.on-cover .cover-gallery::before{top:50%;width:min(100%,282px)}
  body.on-cover .cover-copy{padding-top:330px}
}
@media(forced-colors:active){
  body.on-cover .cover-screen{background-image:none}
  body.on-cover .cover-gallery::before,body.on-cover .cover-gallery::after{display:none}
}
/* END GENERATED V30 BACKGROUNDS */

/* V33 · One illustrated world, ribbons for actions, paper only for reading.
   Appended by tools.sync_client_catalog. Physical card geometry is unchanged. */
:root{--ink:#293F3B;--muted:#58695E;--paper:#FFF8E7;--line:#C6BB9A;--gold:#8A632F;--ribbon:polygon(3% 0,98% 3%,95% 48%,100% 96%,2% 100%,5% 52%)}
body,body.has-game,body:not(.on-cover){background:#F4EDD9;color:var(--ink)}
body[data-scene]:not([data-scene=home]){background:linear-gradient(#fff7df22,#fff7df33),url(/scene-terrace.webp) center top/cover fixed no-repeat,#F6E9CB}
body[data-scene]:is([data-scene=draft],[data-scene=primer]){background-image:linear-gradient(#fff7df33,#fff7df33),url(/scene-shrine.webp)}
body[data-scene][data-scene=friends]{background-image:linear-gradient(#fff7df11,#fff7df22),url(/scene-meeting.webp)}
body::before{display:none!important}
body .site-header,body.on-cover .site-header{position:relative;inset:auto;max-width:none;min-height:60px;padding:8px 4%;background:#FFF8E7E8;border-bottom:1px solid #B69C6D40;z-index:10}
.brand{font-size:18px;letter-spacing:.12em}.brand small{font-size:9px}.brand-mark{color:#92612E}
.header-tools>button,.header-tools>.home-link,.utility>summary{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:40px;min-height:40px;line-height:1;white-space:nowrap;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:10px 12px;font-size:13px;font-weight:700}
.header-tools>[hidden]{display:none}
.header-tools>button:hover,.header-tools>.home-link:hover,.utility[open]>summary{background:#EFE5C8;border-bottom-color:#A78B55}
.utility-content{border-radius:4px;border-top:5px solid #AA8A52;background:#FFF8E9;box-shadow:0 15px 40px #273A3B33}
body main{max-width:1600px;padding:16px 3% 24px}
button.primary{background:#346C5B;color:#FFF8E7;border-color:#346C5B;border-radius:3px;box-shadow:0 3px 0 #244C4133}
button.primary:hover:not(:disabled){background:#285847;border-color:#285847}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,.card-primer :focus-visible{outline:3px solid #0A6083;outline-offset:3px}
button:disabled{opacity:.55}

/* Home: full cover illustration, with a head-safe portrait composition on mobile. */
body.on-cover main{max-width:none;padding:0}
body.on-cover .cover-screen{min-height:calc(100svh - 60px);background:#FFF6DF;overflow:hidden}
.cover-picture{position:absolute;inset:0;pointer-events:none}
body.on-cover .cover-art{display:block;inset:0;position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1}
body.on-cover .cover-shade{display:block;pointer-events:none;background:linear-gradient(90deg,#fff8e7f0 0%,#fff8e7db 23%,#fff8e788 34%,transparent 54%)}
body.on-cover .cover-copy{width:45%;min-height:calc(100svh - 60px);padding:clamp(45px,8vh,100px) 0 80px 6%;align-items:flex-start;justify-content:center;text-align:left}
body.on-cover .cover-copy h1{width:112%;max-width:620px;margin:0;line-height:0}
.cover-wordmark{display:block;width:100%;height:auto;object-fit:contain}
body.on-cover .cover-intro{color:#42584B;line-height:1.9;font-size:clamp(15px,1.3vw,20px);margin-top:22px}
body.on-cover .cover-author{position:absolute;left:6%;bottom:22px;z-index:2;color:#42584B;margin:0;font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.12em}
body.on-cover .cover-visits{position:absolute;right:6%;bottom:24px;z-index:2;margin:0;color:#42584B;font-size:14px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
body.on-cover .cover-visits[hidden]{display:none}
body.on-cover .cover-modes{width:clamp(225px,24vw,310px);gap:13px;margin-top:24px}
body.on-cover .cover-modes>button{color:#FFF7E3;font-size:19px;font-weight:800;min-height:55px;padding:13px 24px;border:0;border-radius:0;clip-path:var(--ribbon);box-shadow:none;letter-spacing:.14em;text-shadow:0 1px #23403355;transition:transform .16s ease,filter .16s ease}
body.on-cover #start-tutorial{background:linear-gradient(#996032,#7C4828)}
body.on-cover #start-game{background:linear-gradient(#3E8069,#2D6456)}
body.on-cover #start-friends{background:linear-gradient(#477F9A,#336780)}
body.on-cover .cover-modes>button:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-2px)}
body.on-cover #continue-game{background:#FFF6DDD9;color:#345B4A;border:0;border-bottom:2px solid #9D946C;border-radius:0;margin-top:16px;min-height:42px;width:clamp(225px,24vw,310px)}

/* Four destinations: near-equal flag hit areas, immediate selection, separate help. */
body[data-scene=decks] main{max-width:none;padding:0}
.deck-screen{position:relative;max-width:none;min-height:calc(100svh - 60px);padding:20px 4%;background:linear-gradient(#fff7df7d,transparent 25%),url(/scene-crossroads.webp) center/100% 100% no-repeat}
.deck-screen-heading{position:relative;z-index:2;align-items:flex-start;pointer-events:none}
.deck-screen-heading>button{pointer-events:auto;background:#FFF5DDEB;border-radius:2px;border:0;border-bottom:2px solid #B49356;min-height:42px}
.deck-screen-heading h1{font-size:38px;margin:6px 0}.deck-screen-heading p{color:#3F5547;font-size:14px;margin:7px 0}
.deck-screen-heading .eyebrow{font-size:12px;color:#5B6648}
.setup-progress{position:relative;z-index:1;margin:0 0 15px;font-size:12px;pointer-events:none}.setup-progress>li{background:#FFF8E7C9;padding:3px 7px;border-radius:0}
.deck-options{display:block;position:static}
.faction-map{position:absolute;inset:0;pointer-events:none}
.faction-stop{position:absolute;left:19.8%;top:46%;transform:translate(-50%,-50%);width:clamp(132px,10.7vw,174px);height:218px;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
.faction-stop.blue{left:36.8%;top:38%}.faction-stop.green{left:54.5%;top:45.5%}.faction-stop.purple{left:71.1%;top:38.4%}
.faction-flag{width:100%;height:182px;flex-shrink:0;background:transparent;border:0;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#FFF7DC;text-shadow:0 2px 3px #3C362FCC;transition:transform .15s,filter .15s}
.faction-flag img{position:relative;z-index:1;width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 2px 1px #53442B33)}
.faction-flag strong{position:relative;z-index:1;font-size:26px;letter-spacing:.12em}.faction-flag small{position:relative;z-index:1;font-size:12px;font-weight:800;white-space:nowrap}
.faction-flag:hover:not(:disabled){background:transparent;border:0;transform:translateY(-3px);filter:brightness(1.13)}
.faction-flag[aria-pressed=true]{filter:drop-shadow(0 0 5px #FFF5C5);outline:2px solid #FFF5CF;outline-offset:0}
.orange .faction-flag{--faction-glow:238,142,77}.blue .faction-flag{--faction-glow:91,178,222}.green .faction-flag{--faction-glow:135,184,88}.purple .faction-flag{--faction-glow:178,139,218}
.faction-flag.is-touch-preview{position:relative;z-index:31;isolation:isolate;filter:brightness(1.12);outline:0}
.faction-flag.is-touch-preview::before{content:"";position:absolute;z-index:0;inset:8px 24% 16px;border-radius:48%;background:radial-gradient(ellipse at center,rgba(var(--faction-glow),.72) 0,rgba(var(--faction-glow),.36) 52%,rgba(var(--faction-glow),0) 76%);filter:blur(8px);pointer-events:none;animation:faction-flag-glow 1.65s ease-in-out infinite}
.touch-confirm-label{position:absolute;z-index:2;left:50%;bottom:1px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 8px);min-height:34px;padding:7px 14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#FFFDF1,#F2E1B3);color:#274F3E;border:1px solid #8E7947;border-radius:999px;font-size:13px;font-weight:900;line-height:1.2;letter-spacing:.02em;text-shadow:none;box-shadow:0 3px 0 #6D5A32,0 7px 14px #35452F42;pointer-events:none}
@keyframes faction-flag-glow{0%,100%{opacity:.68;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
@keyframes faction-sigil-glow{0%,100%{transform:scale(1.06);filter:brightness(1.16) drop-shadow(0 0 4px rgba(var(--faction-glow),.95)) drop-shadow(0 0 9px rgba(var(--faction-glow),.7))}50%{transform:scale(1.16);filter:brightness(1.3) drop-shadow(0 0 7px rgba(var(--faction-glow),1)) drop-shadow(0 0 16px rgba(var(--faction-glow),.95))}}
@media(hover:hover) and (pointer:fine){
 .faction-flag:hover:not(:disabled){position:relative;z-index:30;isolation:isolate;transform:translateY(-3px);filter:brightness(1.12)}
 .faction-flag:hover:not(:disabled)::before{content:"";position:absolute;z-index:0;inset:8px 24% 16px;border-radius:48%;background:radial-gradient(ellipse at center,rgba(var(--faction-glow),.72) 0,rgba(var(--faction-glow),.36) 52%,rgba(var(--faction-glow),0) 76%);filter:blur(8px);pointer-events:none;animation:faction-flag-glow 1.65s ease-in-out infinite}
}
.flag-picked{background:#FFF2C8;color:#315646;text-shadow:none;font-size:12px;padding:2px 10px}
.faction-info{font-size:12px;padding:5px 15px;min-height:32px;color:#375243;background:#FFF6DDEB;border:0;border-bottom:2px solid #B7A170;border-radius:0;text-shadow:none}
.deck-notes{position:absolute;right:3%;top:31%;width:clamp(220px,20vw,310px);padding:25px 25px 28px;color:#3D5446;background:linear-gradient(110deg,#FFF8E8F5,#F8EACDFA);border-top:5px solid #A88A50;box-shadow:0 10px 15px #4F553020;clip-path:polygon(2% 0,98% 1%,100% 4%,98% 35%,100% 75%,98% 98%,70% 97%,48% 100%,2% 98%,0 66%,2% 36%)}
.deck-notes h2{font-size:30px;margin:8px 0}.deck-notes>strong{color:#3B6956;font-size:15px}.deck-notes p{font-size:14px;line-height:1.8}.deck-notes small{font-size:12px;color:#596B52;line-height:1.7}.deck-notes .eyebrow{font-size:11px;letter-spacing:.16em;margin:0;color:#74613E}
.deck-screen .advanced-setup{position:relative;z-index:1;margin:clamp(380px,57vh,630px) 0 0;background:#FFF7E4ED;max-width:460px;padding:10px 15px;border-radius:0;border:0}

/* Coin and six legends share a sanctuary. Coin timing and transforms stay intact. */
body .battle-table{background:transparent;border:0;border-radius:0;box-shadow:none}
body[data-scene=draft] main{padding-top:14px}
.draft-coin-intro{min-height:clamp(400px,68svh,720px);padding:26px 12px;justify-content:center;gap:18px}
.draft-coin-intro>.eyebrow{color:#586844;font-size:14px;letter-spacing:.25em}
.draft-coin-intro h2{color:#37533F;font-size:clamp(20px,2.2vw,30px);text-align:center;text-shadow:0 2px #FFFAE5;line-height:1.5}
.draft-coin-intro p,.draft-coin-intro.is-revealed h2{color:#564B30}
.draft-coin-stage{width:170px;height:158px;position:relative}
.draft-coin-stage::before{content:"";position:absolute;width:120px;height:17px;left:25px;bottom:0;border-radius:50%;background:#5C53342B;filter:blur(5px)}
.draft-coin{width:132px;height:132px}
.coin-pair-legend{gap:26px;background:#FFF7DFC9;padding:8px 20px;border-radius:0;color:#4F583E}
.draft-panel{width:100%;max-width:1300px;margin:auto;padding:15px 0 22px}
.draft-matchup{font-size:13px;margin:0 0 8px;color:#375344;text-align:center}
.draft-coin-result{margin:8px auto 18px;width:fit-content;max-width:100%;background:#FFF6DDD9;padding:8px 20px;border:0;border-bottom:2px solid #C0A875;border-radius:0;line-height:1.6;font-size:13px;color:#65522F}
.draft-heading{margin-bottom:22px;padding:0 4px}.draft-heading h2{font-size:27px;color:#2D5848}.draft-heading p{font-size:14px;color:#3C5B4A}
.draft-grid{gap:16px}.draft-grid .card{max-width:176px;gap:0;filter:drop-shadow(0 8px 6px #5A533523)}
.draft-grid .card>button.primary{width:100%;margin-top:10px;min-height:42px;clip-path:var(--ribbon);border-radius:0}
.pick-status{display:block;text-align:center;min-height:42px;padding:11px 6px;background:#ECE7D5;color:#56674D;border-bottom:2px solid #A9B28D;font-weight:700}
.draft-grid .card:has(.pick-status) .card-image{filter:saturate(.6);opacity:.78}
.draft-picks{justify-content:space-between;gap:14px;margin-top:28px;font-size:14px;color:#385B48}.draft-picks>span{padding:12px 18px;background:#FFF7E4E6;border-top:2px solid #B5A372;min-width:35%}.draft-picks strong{color:#3F6550}

/* Battle: physical cards above an open terrace; no surrounding app panel. */
body.has-game:not(.in-tutorial) .site-header{min-height:48px;padding:3px 3%}
body[data-scene=battle] main{padding-top:10px}
.opponent-row,.hand-zone{border:0}.played-panel{border-left:1px solid #B2AD8255}
.player-snapshot,body.has-game:not(.in-tutorial) .player-snapshot{background:linear-gradient(100deg,#FFF8E8EF,#FFF8E8C4);border:0;border-top:2px solid #ACAF8580;border-radius:0;box-shadow:none;padding:9px 12px}
.zone-counters,body.has-game:not(.in-tutorial) .zone-counters{display:flex;flex-wrap:wrap;gap:12px;margin-top:7px}
.zone-counter{flex:1;border:0;border-bottom:1px solid #A6A88066;background:transparent;border-radius:0;font-size:11px;padding:5px 0;min-height:30px;max-width:160px;gap:4px}
.zone-counter strong{font-size:16px;margin-left:auto}.zone-counter .pile-icon{font-size:14px}
.round-callout{position:relative;align-self:stretch;background:linear-gradient(#588A6D,#376754);border:0;border-radius:0;clip-path:polygon(3% 0,97% 2%,95% 40%,100% 93%,50% 100%,0 93%,5% 40%);color:#FFF8E5}
.round-callout .status-title,.round-callout .plays-count{color:#FFF5D8}.round-callout .subtle,.round-callout .turn-number{color:#F1EDD4}.round-callout.my-action{box-shadow:none;background:linear-gradient(#4C8064,#2F6553)}
.round-callout:empty{background:none}
.play-tabs{background:transparent;gap:10px;padding:0}.play-tabs button{border-radius:0;min-height:32px;font-weight:700;border-bottom:2px solid transparent}.play-tabs button[aria-pressed=true]{background:#FFF8E3D9;border-radius:0;border-bottom-color:#92794A;box-shadow:none}
.effect-notes{background:#FFF6DEB8;border:0;border-left:3px solid #90A27C;border-radius:0}
.board-card{border-radius:3px;background:#FFF8E6E3;border-color:#BEBD98}.hand-heading{border-bottom:1px solid #ABAD8766;padding-bottom:5px}.reading-tip{margin:5px 0;font-size:11px}
.card-buttons button{min-height:32px;border-radius:2px}.card-buttons .primary{border:0;border-bottom:2px solid #244D41;clip-path:var(--ribbon);box-shadow:none}.card-buttons .discard{border:0;border-bottom:2px solid #593723;background:#805136;color:#FFF8E7;font-weight:700}
.card-buttons .discard:hover:not(:disabled){background:#663F2A;color:#FFF8E7}
.card-buttons button:disabled{background:#E2DFD2;color:#73766C;border-color:#C7C7BA;opacity:1;box-shadow:none}
.decision{background:#FFF8E7ED;border:0;border-left:4px solid #A68E50;border-radius:3px;box-shadow:0 5px 12px #6B61401C}
.table-feedback{background:#FFF5DCB8;padding:3px 8px;width:fit-content;font-weight:600}

/* Meeting garden: notice board on the right, host / join forms on the left. */
.friend-entrance{background:#FFF7E9F0;border:0;border-top:5px solid #A78751;border-radius:3px;box-shadow:0 14px 30px #48573B26;margin:8vh auto;padding:30px;max-width:540px}
.friend-entrance h1,.friend-heading h1{font-family:inherit;font-size:32px;letter-spacing:.08em;color:#2C5847}
.friend-entrance form input,.friend-entrance form select{background:#FFFCF3;color:#314D42;border:1px solid #B7AE8B;border-radius:3px;min-height:46px}
.friend-entrance form button{min-height:46px;border-radius:2px}.friend-entrance form .primary{clip-path:var(--ribbon)}
.friend-entrance label{font-size:13px;font-weight:700}
.friend-room-bar{background:#FFF8E7E6;border:0;border-bottom:2px solid #B5A16C;border-radius:0;padding:8px 15px;min-height:44px}.friend-room-bar button{background:transparent;border:0;border-bottom:1px solid #A39F75;border-radius:0;min-height:32px}
.friend-room-bar strong{color:#77572D;font-variant-numeric:tabular-nums}
.friend-heading{margin:18px 0}.friend-heading h1{margin:0}.friend-heading .eyebrow{margin:0 0 4px}.friend-heading p{font-size:13px;margin:6px 0}
.friend-players{gap:25px;margin:12px 0}.friend-player{background:#FFF5DDD9;border:0;border-left:4px solid #9EB082;border-radius:0;padding:10px 14px}
.friend-lobby .deck-options{position:relative;min-height:540px;background:linear-gradient(#fff7df11,#fff7df22),url(/scene-crossroads.webp) center/100% 100%;overflow:hidden}
.friend-lobby .deck-notes{top:20%}.friend-lobby .faction-stop{top:45%}.friend-lobby .faction-stop.blue{top:37%}.friend-lobby .faction-stop.green{top:44%}.friend-lobby .faction-stop.purple{top:37%}
.friend-lobby>p[role=status]{background:#FFF5DDE6;padding:10px 15px;margin:0;color:#3E5B49}
.public-room{background:#FFF8E7;border:0;border-bottom:1px solid #C1B48E;border-radius:0;min-height:70px;gap:15px}.public-room>span{min-width:0;overflow-wrap:anywhere}.public-room button{min-width:66px;background:#426E5A;color:#FFF7E3;border:0;border-radius:2px}
.friend-selection-error{background:#FFF6DC;border:2px solid #B17445;border-radius:3px;color:#764323;padding:15px;font-size:16px}

/* Tutorial and all overlays: a travel journal, distinct active controls. */
.card-primer{background:#FFF8E9F5;border:0;border-top:6px solid #A38248;border-radius:3px;box-shadow:0 16px 32px #43513C26;padding:28px 34px;margin:20px auto}
.primer-progress{flex-wrap:wrap;row-gap:9px}.primer-progress li[aria-current=step]>span,.primer-parts li>span{background:#7D4D2B;color:#FFF7E5}
.primer-topics button{border:0;border-bottom:1px solid #C6BA9B;border-radius:2px;background:#F2E8D0}.primer-topics button[aria-pressed=true]{background:#DFEADA;border:2px solid #5B8564;box-shadow:none}
.primer-example{border:0;border-left:4px solid #88A17A;background:#E5ECD9;border-radius:2px}.primer-footer{background:#FFF8E9F5}.primer-footer .primary{background:#7E4E2C;border-color:#7E4E2C;clip-path:var(--ribbon);padding:12px 26px}
.tutorial-coach,.tutorial-complete{background:#FFF8E9F5;border:0;border-top:4px solid #AD8B53;border-radius:3px;box-shadow:0 8px 24px #46543722}
#card-dialog,.atlas-dialog,.zone-dialog{border-radius:4px;background:#FFF8E9;border:1px solid #B8A476;border-top:5px solid #AA8A52}
.atlas-filters button{border-radius:2px;min-height:38px}.atlas-filters button[aria-pressed=true]{background:#37634F}
dialog::backdrop,#card-dialog::backdrop,.atlas-dialog::backdrop,.result-dialog::backdrop{background:#253D3B99;backdrop-filter:blur(5px)}
.result-dialog{width:min(540px,calc(100% - 32px));max-height:92svh;padding:0;border:0;border-radius:4px;background:#FFF5DD;box-shadow:0 22px 70px #183B3659}
.match-result{padding:28px 35px 32px;text-align:center;background:linear-gradient(#FFF9E9EB,#FFF6DFF5),url(/scene-shrine.webp) center/cover;border-top:7px solid #B89755}
.match-result.defeat{border-color:#64878D}.match-result.draw{border-color:#91A778}
.match-result .eyebrow{margin:0;font-size:13px;color:#655C3E;letter-spacing:.13em}
.result-seal{width:148px;height:139px;margin:7px auto 0;font-size:0;color:#B1873C}.result-seal svg{display:block;width:100%;height:100%}
.match-result.defeat .result-seal{color:#64808B}.match-result.draw .result-seal{color:#6B916E}
.match-result h1{font-family:inherit;font-size:50px;letter-spacing:.14em;margin:0 0 16px;color:#80602F;line-height:1.2}
.match-result.defeat h1{color:#486C78}.match-result.draw h1{color:#55734F}.match-result>p:not(.eyebrow){font-size:15px;color:#48604D;line-height:1.8}
.result-score{padding:14px 0;margin:18px 0;border-top:1px solid #B6A06C66;border-bottom:1px solid #B6A06C66;gap:35px}.result-score span{color:#5D6B57}
.result-options{display:flex;flex-direction:column;gap:10px;margin-top:18px}.result-options button{width:100%;min-height:46px;font-size:16px;border-radius:0}.result-options .primary{clip-path:var(--ribbon);box-shadow:none}.result-options button:not(.primary){border:0;background:transparent;text-decoration:underline;text-underline-offset:6px;color:#52644D}
.result-note{font-size:12px!important}.exchange-feedback{border-radius:3px;border-top:5px solid #B29B5C;background:#FFF8E8}

@media(min-width:851px){
 .friend-entrance:has(#friend-create){max-width:1120px;display:grid;grid-template-columns:minmax(290px,.85fr) minmax(300px,1.15fr);gap:0 50px;margin:0 auto;padding:8px 35px;background:transparent;border:0;box-shadow:none}
 .friend-entrance:has(#friend-create)>p,.friend-entrance:has(#friend-create)>h1,.friend-entrance:has(#friend-create)>.friend-nickname-row{grid-column:1/-1}
 .friend-entrance:has(#friend-create)>h1{margin:5px 0 9px;padding:5px 12px;background:#FFF7E7E8;justify-self:start}
 .friend-entrance:has(#friend-create)>.eyebrow{justify-self:start;background:#FFF7E7D9;padding:4px 12px;margin:0}
 .friend-entrance .friend-nickname-row{margin:0 0 14px}.friend-nickname-row>span{padding:5px 12px;background:#FFF7E7E8}
 .friend-entrance #friend-create{grid-column:1;grid-row:4;margin:0;padding:22px 25px;background:#FFF8E8EF;border:0;border-top:5px solid #AD8950}
 .friend-entrance #friend-join{grid-column:1;grid-row:5;margin-top:20px;padding:20px 25px;background:#FFF8E8ED;border:0;border-top:3px solid #9AAB81;display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
 #friend-join h2,#friend-join p,#friend-join button{grid-column:1/-1}#friend-join h2{margin:0 0 5px}#friend-join p{margin:5px 0 14px;font-size:12px}#friend-join label[for=friend-code]{grid-column:1;grid-row:3}#friend-join #friend-code{grid-column:1;grid-row:4}#friend-join label[for=friend-join-password]{grid-column:2;grid-row:3}#friend-join #friend-join-password{grid-column:2;grid-row:4}
 .friend-entrance .public-rooms{grid-column:2;grid-row:4/6;margin-top:0;padding:25px 30px;background:#F9E9C8F5;border:0;border-top:7px solid #987B48;align-self:start;min-height:280px;box-shadow:0 12px 18px #4B573524;transform:rotate(.4deg)}
}
@media(min-width:701px){
 body[data-scene=friend-decks] main{max-width:none;padding:0}
 .friend-lobby{position:relative;min-height:max(700px,calc(100svh - 60px));padding:15px 4%;background:linear-gradient(#FFF7DF88,transparent 28%),url(/scene-crossroads.webp) center/100% 100% no-repeat}
 .friend-lobby .friend-room-bar{position:relative;z-index:2;margin:0}
 .friend-lobby .friend-heading{position:relative;z-index:1;pointer-events:none;margin-top:17px}
 .friend-lobby .friend-heading p:not(.eyebrow){max-width:320px;line-height:1.7}
 .friend-lobby .friend-players{position:absolute;bottom:50px;left:4%;right:30%;z-index:1;margin:0}
 .friend-lobby .deck-options{position:static;min-height:0;background:none;overflow:visible}
 .friend-lobby .faction-stop{top:46%}.friend-lobby .faction-stop.blue{top:38%}.friend-lobby .faction-stop.green{top:45.5%}.friend-lobby .faction-stop.purple{top:38.4%}
 .friend-lobby .deck-notes{top:31%}
 .friend-lobby>p[role=status]{position:absolute;bottom:12px;left:4%;max-width:85%;font-size:12px}
 .friend-selection-error{position:relative;z-index:3;width:fit-content}
}
@media(min-width:901px){
 body.has-game:not(.in-tutorial) .battle-table:has(.health-hub){padding:5px 0;gap:5px 16px}
 body.has-game:not(.in-tutorial) .round-callout{padding:9px 10px 14px}
}
@media(min-width:701px) and (max-width:1100px){
 body.on-cover .cover-copy{padding-left:4%;width:48%}.cover-copy h1{font-size:54px}body.on-cover .cover-author{left:4%}
 .deck-notes{width:205px;right:1.5%;padding:20px}.deck-notes p{font-size:13px}.faction-stop{width:115px}.faction-flag strong{font-size:23px}.faction-flag img{width:53px;height:53px}
 .deck-screen-heading h1{font-size:31px}.deck-screen-heading>div>p:not(.eyebrow){max-width:430px}
}
@media(max-width:900px){
 .health-hub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:0;border:0}
 .health-hub .player-snapshot{grid-row:1;min-width:0}.health-hub .player-snapshot:last-child{grid-column:2}
 .health-hub .round-callout{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 18px;clip-path:var(--ribbon)}
 .round-callout .status-title{font-size:17px}.round-callout .subtle{margin:0;font-size:11px}.round-callout .turn-number{font-size:11px}
 .health-line{align-items:flex-start;gap:8px}.player-identity,.player-identity small{font-size:12px;text-align:left}
 .health-values{justify-content:flex-start;gap:15px}.vitals{justify-content:flex-start}
 .zone-counters{gap:7px}.zone-counter{font-size:10px;gap:2px}.zone-counter strong{font-size:13px}.zone-counter .pile-icon{display:none}
}
@media(max-width:700px){
 body .site-header,body.on-cover .site-header,body.has-game:not(.in-tutorial) .site-header{min-height:54px;padding:5px 12px;gap:6px;flex-wrap:wrap}
 .brand{font-size:15px;gap:6px}.brand-mark{font-size:25px}.brand small{display:none}.header-tools{gap:1px}.header-tools>button,.header-tools>.home-link,.utility>summary{font-size:11px;padding:8px 7px;height:36px;min-height:36px}
 body main{padding:12px 12px 20px}.utility-content{position:fixed;top:60px;right:12px;max-height:75svh}
 body.on-cover .cover-screen{min-height:calc(100svh - 54px)}.cover-picture{height:clamp(245px,38svh,320px)}
 body.on-cover .cover-art{height:100%;object-position:center 15%}
 body.on-cover .cover-shade{height:clamp(270px,42svh,350px);bottom:auto;background:linear-gradient(0deg,#FFF6DF 0%,transparent 38%)}
 body.on-cover .cover-copy{padding:clamp(215px,34svh,285px) 7% 16px;min-height:calc(100svh - 54px);width:100%;align-items:center;justify-content:flex-start;text-align:center}
 body.on-cover .cover-copy h1{width:92vw;max-width:300px}.cover-copy p{max-width:100%}
 body.on-cover .cover-intro{font-size:13px;line-height:1.65;margin-top:8px}
 body.on-cover .cover-author{position:absolute;z-index:3;left:12px;top:auto;bottom:10px;transform:none;width:max-content;max-width:calc(100% - 32px);margin:0;padding:5px 12px;background:#FFF8E7D9;border-bottom:1px solid #A98D5166;border-radius:999px;text-align:center;font-size:12px;line-height:1.35;letter-spacing:.08em;white-space:nowrap}body.on-cover .cover-modes{width:100%;max-width:300px;gap:8px;margin-top:14px}
 body.on-cover .cover-visits{right:12px;bottom:10px;padding:5px 9px;border-radius:999px;background:#FFF8E7D9;font-size:11px;line-height:1.35}
 body.on-cover .cover-modes>button{min-height:46px;font-size:16px;padding:10px 20px}body.on-cover #continue-game{width:100%;max-width:300px;margin-top:10px}
 .deck-screen{min-height:calc(100svh - 54px);padding:18px 5% 24px;background:linear-gradient(0deg,#FFF3DC 0%,transparent 60%),url(/scene-terrace.webp) center top/auto 470px no-repeat,#FFF3DC}
 .setup-progress{font-size:10px;gap:5px;margin-bottom:16px}.setup-progress>li{padding:2px 4px}.deck-screen-heading{gap:8px}.deck-screen-heading h1{font-size:29px}.deck-screen-heading .eyebrow{font-size:10px}.deck-screen-heading p{font-size:12px;line-height:1.7}.deck-screen-heading>button{font-size:11px;padding:6px 9px;white-space:nowrap}
 .deck-options{position:relative;padding-top:265px}.faction-map{top:5px;left:0;right:0;bottom:auto;height:250px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;align-items:center}
 .faction-stop,.faction-stop.blue,.faction-stop.green,.faction-stop.purple{position:relative;left:auto;top:auto;transform:none;width:100%;height:205px;gap:7px}
 .faction-stop.orange{margin-top:26px}.faction-stop.blue{margin-top:-12px}.faction-stop.green{margin-top:16px}.faction-stop.purple{margin-top:-4px}
 .faction-flag{height:158px;padding:13px 3px 22px;clip-path:polygon(0 0,100% 0,97% 100%,50% 91%,3% 100%);background:linear-gradient(#C0783E,#9D4E2D);gap:7px}
 .blue .faction-flag{background:linear-gradient(#5790AF,#336B8C)}.green .faction-flag{background:linear-gradient(#779849,#457044)}.purple .faction-flag{background:linear-gradient(#9A82B0,#6A5388)}
 .orange .faction-flag:hover:not(:disabled){background:#AB5E33}.blue .faction-flag:hover:not(:disabled){background:#407998}.green .faction-flag:hover:not(:disabled){background:#5C803F}.purple .faction-flag:hover:not(:disabled){background:#806597}
 .faction-flag img{width:45px;height:45px}.faction-flag strong{font-size:19px;letter-spacing:.07em}.faction-flag small{font-size:10px}.flag-picked{font-size:10px;padding:1px 5px}.faction-info{font-size:11px;padding:5px 10px;min-height:34px}
 .deck-notes,.friend-lobby .deck-notes{position:relative;right:auto;top:auto;width:100%;padding:20px 24px 25px}.deck-notes h2{font-size:26px}.deck-notes p{font-size:14px;line-height:1.8}.deck-screen .advanced-setup{margin:16px 0 0}
 .draft-coin-intro{min-height:470px;padding:22px 0;gap:17px}.draft-coin-intro h2{font-size:21px}.coin-pair-legend{gap:14px;padding:8px 12px}.coin-pair-legend span{font-size:12px}
 .draft-panel{padding:5px 0}.draft-heading{gap:10px;margin:18px 0;align-items:center}.draft-heading h2{font-size:21px}.draft-heading p{font-size:12px;line-height:1.7}.draft-matchup{font-size:12px}.draft-coin-result{font-size:12px;line-height:1.7;padding:8px 10px}
 .draft-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}.draft-grid .card>button.primary{font-size:11px;min-height:40px;padding:7px 3px}.pick-status{font-size:11px;padding:12px 2px}.draft-picks{flex-direction:column;gap:8px;font-size:12px;margin-top:20px}.draft-picks>span{padding:10px 12px}
 body .battle-table{padding:3px 0;gap:10px}.opponent-row{grid-template-columns:100px minmax(0,1fr);gap:10px;min-height:195px}.played-panel{padding-left:9px}.card-back{flex-basis:55px}.card-back+.card-back{margin-left:-41px}.opponent-zone{padding:5px 0}.play-tabs{gap:0}.play-tabs button{font-size:10px;padding:5px 6px;min-height:30px}
 .effect-stack{padding-bottom:calc(var(--played-width)*1039/744 - 9px)}
 .board-lane .board-caption{writing-mode:horizontal-tb;font-size:9px;white-space:nowrap}.board-lane{gap:6px}.board-lane .empty-zone{font-size:10px}
 .health-line{flex-direction:column;align-items:flex-start}.player-snapshot .player-identity,.player-snapshot:last-child .player-identity{font-size:12px}.player-identity small{font-size:11px}
 body .health-hub .health-values .hp,body .health-hub .health-values .shield-total{font-size:26px}.health-values{gap:10px}.zone-counters{gap:5px}.zone-counter{font-size:10px;min-height:34px}
 .health-hub .round-callout{gap:10px;padding:9px 15px}.round-callout .subtle{display:none}.round-callout .status-title{font-size:17px}.round-callout .turn-number{font-size:11px}
 .hand-grid{min-height:0;--card-width:125px}.card-buttons button{min-height:38px;font-size:11px}.reading-tip{font-size:10px}
 .friend-entrance{padding:23px 22px;margin:30px auto}.friend-entrance h1{font-size:29px}.friend-entrance:has(#friend-create){background:transparent;padding:0;border:0;box-shadow:none}
 .friend-entrance #friend-create,.friend-entrance #friend-join,.friend-entrance .public-rooms{background:#FFF8E8F2;padding:20px;border:0;border-top:4px solid #B29A63;margin-top:20px}.friend-entrance .public-rooms{background:#F8E8C9F5}
 .friend-lobby .deck-options{min-height:0;background:none;padding:265px 6px 12px}.friend-lobby .faction-stop,.friend-lobby .faction-stop.blue,.friend-lobby .faction-stop.green,.friend-lobby .faction-stop.purple{top:auto}
 .friend-heading{background:#FFF7E4DB;padding:10px 12px;border-left:3px solid #A38B51}
 .friend-room-bar{font-size:11px;padding:9px}.friend-room-bar button{font-size:11px;min-height:36px}.friend-players{gap:10px}.friend-player{font-size:12px;padding:8px;overflow-wrap:anywhere}.friend-heading h1{font-size:28px}
 .card-primer{padding:20px 18px;margin:8px auto}.primer-heading{align-items:start}.primer-progress{gap:7px;font-size:10px;max-width:85%}.primer-progress li{flex:none}.primer-footer button{min-height:44px}.primer-footer .primary{padding:12px 18px}.primer-layout{gap:20px}.primer-parts h3{font-size:16px}
 .match-result{padding:24px 22px}.result-seal{width:125px;height:116px}.match-result h1{font-size:43px}.match-result>p:not(.eyebrow){font-size:14px}.result-score{margin:14px 0;padding:12px 0}.result-options button{min-height:47px}.result-dialog{max-height:94svh}
 .atlas-dialog,.zone-dialog{padding:20px 15px}.atlas-heading h2{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.faction-flag,body.on-cover .cover-modes>button{transition:none}.faction-flag.is-touch-preview::before,.faction-flag:hover:not(:disabled)::before,.faction-flag.is-touch-preview img{animation:none}.faction-flag:hover:not(:disabled),body.on-cover .cover-modes>button:hover:not(:disabled){transform:none}}
@media(forced-colors:active){body[data-scene],body.on-cover .cover-screen,.deck-screen,.friend-lobby .deck-options{background-image:none}.faction-flag,.round-callout,.cover-modes>button{clip-path:none;border:2px solid ButtonText}.cover-art{opacity:.2}.faction-info{border:1px solid ButtonText}}
/* Online lobby: an adventurers' notice board with a separate invitation scroll. */
.online-lobby{max-width:1160px;margin:16px auto 40px;padding:0 18px;color:#2E493F}
.lobby-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
.online-title{margin:0;line-height:0;width:min(410px,55%);filter:drop-shadow(0 3px 1px #FFF6DBAA)}
.online-title img{width:100%;height:auto;display:block}
.adventurer-badge{display:flex;align-items:center;gap:12px;background:#FFF9E8EB;border:1px solid #C8B380;padding:10px 16px;box-shadow:0 4px 0 #93734722;border-radius:4px 18px 4px 18px;max-width:340px}
.adventurer-badge small{display:block;font-size:11px;color:#786540;margin-bottom:3px;letter-spacing:.15em}
.adventurer-badge strong{font-size:18px;overflow-wrap:anywhere}.badge-mark{color:#97743B;font-size:28px}
.adventurer-badge button{border:0;border-bottom:1px solid #A6936A;background:transparent;white-space:nowrap;padding:8px;font-size:12px;min-height:40px}
.lobby-layout{display:grid;grid-template-columns:minmax(290px,.83fr) minmax(330px,1.17fr);gap:46px;align-items:start}
.lobby-actions{padding-top:20px;min-width:0}
.duel-scroll{position:relative;background:linear-gradient(100deg,#F7E7BE,#FFFAEC 18%,#FFF9E6 85%,#F2E1B8);padding:32px 30px 28px;box-shadow:0 10px 18px #59653B26;border-radius:12px 4px 18px 5px;border-bottom:2px solid #D6C28D}
.duel-scroll::before,.duel-scroll::after{content:"";position:absolute;left:-9px;right:-9px;height:12px;border:1px solid #BAA271;border-radius:10px;background:linear-gradient(#FAEDCE,#DDC595);box-shadow:0 3px 3px #57472A16;pointer-events:none}
.duel-scroll::before{top:-5px}.duel-scroll::after{bottom:-5px}
.online-lobby h2{font-size:24px;margin:0 0 20px;color:#365A48;letter-spacing:.08em}
.duel-kicker{font-size:11px;letter-spacing:.17em;color:#8A6D3F;margin:0 0 9px}
.online-lobby label{display:block;margin:15px 0 8px;font-size:13px;font-weight:700}
.online-lobby input:not([type=radio]){display:block;width:100%;min-width:0;min-height:46px;background:#FFFCF4;border:1px solid #AB9D78;border-radius:4px;padding:10px 12px;color:#2C4C3B;font:inherit;font-size:16px}
.online-lobby button{min-height:44px}.online-lobby form>button{width:100%;margin-top:20px;background:#386F5C;color:#FFF9E8;border:0;border-bottom:3px solid #264F42;font-size:16px;font-weight:700}
.online-lobby form>button:hover:not(:disabled){background:#285441}.online-lobby form>.primary{clip-path:var(--ribbon);min-height:50px;border-radius:0}
.duel-types{padding:0;margin:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duel-types legend{font-size:12px;color:#746445;margin-bottom:9px}
.duel-types label{position:relative;display:flex;align-items:center;gap:8px;margin:0;padding:13px 10px;background:#EFE4C9;border:2px solid transparent;border-radius:4px;cursor:pointer;min-height:76px}
.duel-types label:has(:checked){background:#E0EBDC;border-color:#608367}.duel-types label:has(:focus-visible){outline:3px solid #0A6083;outline-offset:3px}
.duel-types input{accent-color:#346C5B;width:16px;height:16px;flex-shrink:0}.duel-types strong{font-size:15px}.duel-types small{display:block;margin-top:5px;font-size:11px;font-weight:400;color:#59634F}
.duel-invitation{margin-top:30px;background:#FFF6E1F2;border:1px solid #CDB989;border-radius:3px 3px 14px 3px;box-shadow:0 6px 12px #52613B17}
.duel-invitation summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:18px 20px;font-size:16px;font-weight:700;min-height:60px;color:#45634D}
.duel-invitation summary::-webkit-details-marker{display:none}.duel-invitation summary>span:first-child{font-size:24px;color:#947746}.invitation-chevron{margin-left:auto}.duel-invitation[open] .invitation-chevron{transform:rotate(180deg)}
.duel-invitation #friend-join{padding:0 22px 24px;margin:0;border:0;display:block}.duel-invitation p{font-size:12px;color:#6B725D;line-height:1.7;margin:0 0 15px}.duel-invitation #friend-code{letter-spacing:.2em}
.duel-board{position:relative;margin-top:10px;padding:28px 24px 24px;background:linear-gradient(135deg,#D8C190,#C5AD7D);border:9px solid #937449;border-radius:12px 8px 10px 7px;box-shadow:inset 0 0 0 2px #F0D69D,0 10px 0 #71573726,0 20px 25px #4C613020}
.duel-board::before,.duel-board::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#6A5535;box-shadow:inset 0 2px 2px #493E3022,0 1px #E6CD99;top:10px}.duel-board::before{left:10px}.duel-board::after{right:10px}
.duel-board>h2{position:relative;width:fit-content;margin:-48px auto 12px;padding:13px 34px;background:#3A6E5A;color:#FFF4D6;font-size:24px;clip-path:polygon(2% 0,98% 0,95% 50%,100% 100%,0 100%,5% 50%);text-align:center;letter-spacing:.15em}
.duel-board-caption{text-align:center;font-size:12px;color:#514E34;margin:0 0 20px}
.duel-empty{padding:20px 16px 30px;text-align:center;background:#FFF6DED9;border-radius:3px 3px 20px 3px;box-shadow:0 3px 6px #66563820}
.duel-flags{display:block;color:#64806B;font-size:46px;letter-spacing:-12px;margin:0 0 14px;transform:rotate(-8deg)}
.duel-empty strong{font-size:19px;color:#52664B}.duel-empty p{font-size:13px;color:#737456;line-height:1.7;margin-bottom:0}
.duel-board #public-room-list>.subtle{color:#4E583E;background:#FFF5DD;padding:24px;font-size:14px}
.duel-board .public-room{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#FFF8E7;border:0;border-radius:2px 2px 12px 2px;padding:18px 16px;margin:12px 0 0;box-shadow:0 4px 5px #66563825}
.duel-board .public-room::before{content:"";width:7px;height:7px;background:#9A7650;border-radius:50%;position:absolute;top:6px;left:50%}
.duel-board .public-room strong{display:block;font-size:16px;color:#395C48;overflow-wrap:anywhere}.duel-board .public-room small{display:block;margin-top:7px;color:#767359;font-size:12px}
.duel-board .public-room button{background:#386F5C;color:#FFF8E7;min-width:70px;border:0;border-bottom:3px solid #264F42;border-radius:3px;flex-shrink:0}
.lobby-notice:empty{display:none}.lobby-notice{color:#624C2F;background:#FFF5DB;padding:12px 16px;border-left:3px solid #A28042;line-height:1.7}
.nickname-entrance{max-width:480px;margin:25px auto}.nickname-entrance .online-title{width:100%;margin:0 auto 30px}.nickname-entrance .subtle{color:#66715C;font-size:13px;line-height:1.7}
@media(max-width:700px){.online-lobby{padding:0 4px;margin-top:4px}.lobby-heading{flex-direction:column;gap:12px;margin-bottom:36px}.online-title{width:min(340px,90%)}.adventurer-badge{padding:6px 14px;width:auto;max-width:100%}.adventurer-badge strong{font-size:16px}.adventurer-badge small{font-size:10px}.lobby-layout{display:flex;flex-direction:column;gap:24px}.duel-board{order:-1;width:100%;padding:24px 16px 18px;border-width:7px}.duel-board>h2{font-size:21px;margin-top:-42px}.duel-empty{padding:14px 12px 20px}.duel-flags{font-size:34px;margin-bottom:8px}.duel-empty strong{font-size:17px}.lobby-actions{width:100%;padding:0 8px}.duel-scroll{padding:25px 20px}.duel-invitation{margin-top:26px}.nickname-entrance{max-width:440px;padding:0 14px}.online-lobby h2{font-size:22px}}
/* Adventure journal, legendary roster and online waiting camp. */
.adventure-journal{position:relative;max-width:1040px;border:0;border-left:14px solid #52735C;border-radius:8px 22px 22px 8px;background:linear-gradient(90deg,#D6C8A544,transparent 38px),#FFF9E9;padding:26px 38px 24px 34px;box-shadow:5px 5px 0 #DDCFAB,9px 9px 0 #78866A,0 18px 35px #364F3926}
.adventure-journal .primer-heading{gap:16px;align-items:flex-start;border-bottom:1px solid #C9B98B;padding-bottom:18px}
.adventure-journal .primer-progress{gap:8px}.adventure-journal .primer-progress li{background:#EFE6CF;padding:9px 12px 14px;clip-path:polygon(0 0,100% 0,100% 100%,50% 90%,0 100%);color:#586351;font-size:13px}
.adventure-journal .primer-progress li[aria-current=step]{background:#416D58;color:#FFF9E9}.adventure-journal .primer-progress li[aria-current=step]>span{background:#FFF1C9;color:#385F4C}
.journal-label{display:flex;align-items:center;justify-content:space-between;color:#806035;letter-spacing:.12em;font-size:14px;margin-top:24px}.journal-label span{font-size:12px;letter-spacing:0;color:#68715D}
.adventure-journal h1{font-size:28px;margin:12px 0}.adventure-journal .primer-intro{font-size:16px;line-height:1.8;max-width:800px}
.adventure-journal .primer-parts{display:grid;gap:18px;padding:0}.adventure-journal .primer-parts li{padding:12px 0;border-bottom:1px dashed #C5B98F;align-items:start}.adventure-journal .primer-parts p{font-size:15px;line-height:1.85;max-width:760px}.adventure-journal .primer-parts h3{font-size:18px;margin-top:0}
.adventure-journal .primer-example{background:#E6ECD9;border:0;border-radius:0 16px 16px 0;padding:15px 20px;box-shadow:-5px 0 #80996B}.adventure-journal .primer-footer{background:transparent;margin-top:22px}.adventure-journal .primer-footer button{min-height:44px}
.draft-panel .draft-coin-result{display:flex;align-items:center;gap:12px;border:1px solid #B8A16C;border-radius:32px;padding:9px 22px;background:#FFF9E8;box-shadow:0 4px 0 #C5B58A44;max-width:fit-content}.draft-panel .draft-coin-result img{width:38px;height:38px;flex-shrink:0}.draft-heading h2{border-left:5px solid #B79853;padding-left:12px}.draft-heading p{background:#3C705A;color:#FFF8E7;padding:10px 18px;clip-path:var(--ribbon)}
.draft-roster{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:24px auto 0;max-width:1000px}.draft-team{background:#FFF8E6ED;border:1px solid #BEB28F;border-radius:3px 18px 3px 18px;padding:12px 16px;box-shadow:0 5px 0 #7C77551A}.draft-team header{display:flex;justify-content:space-between;gap:12px;color:#465C48;margin-bottom:10px}.draft-team header>span{background:#E4E6CC;border-radius:20px;padding:3px 10px;font-size:12px}.draft-team.is-picking{border-color:#447A59;box-shadow:0 3px 0 #447A59}.draft-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}.draft-slot{min-height:65px;display:flex;align-items:center;gap:10px;padding:8px;border:1px dashed #BCB18C;color:#81795D;font-size:13px;border-radius:4px}.draft-slot.filled{border-style:solid;background:#FFFDF4;color:#355541}.draft-slot img{width:38px;height:53px;object-fit:contain}.slot-seal{font-size:30px;color:#BBA66B}
.duel-camp .friend-room-bar{display:flex;flex-wrap:wrap;gap:12px;background:#FFF9E8;border:1px solid #C5B488;border-radius:3px 20px 3px 20px;box-shadow:0 5px 0 #87795322;padding:12px 18px;max-width:960px}.invite-code{display:flex;align-items:center;gap:14px;color:#645C40;font-size:13px}.invite-code strong{font-size:25px;letter-spacing:.18em;color:#355B46}.camp-connection{color:#52735A;font-size:13px;margin-right:auto}.duel-camp .friend-room-bar button{min-height:40px}.duel-camp .friend-players{gap:16px}.duel-camp .friend-player{position:relative;display:grid;grid-template-columns:32px 1fr;gap:5px 8px;align-items:center;background:#FFF9E8;border:1px solid #C0B48B;border-radius:3px 16px 3px 16px;box-shadow:0 4px 0 #95886422;padding:14px;min-width:0}.camp-player-seal{grid-row:span 2;font-size:27px;color:#AC894B}.duel-camp .friend-player strong{overflow-wrap:anywhere}.duel-camp .friend-player>span:last-child{font-size:13px;color:#68715B}.duel-camp>p[role=status]{border-left:4px solid #658567;border-radius:0 12px 12px 0}
@media(max-width:700px){.adventure-journal{border-left-width:7px;padding:18px 16px;margin:12px 0 18px;box-shadow:3px 3px 0 #DDCFAB}.adventure-journal .primer-heading{flex-wrap:wrap}.adventure-journal .primer-progress{gap:5px}.adventure-journal .primer-progress li{font-size:11px;padding:7px 8px 11px}.adventure-journal h1{font-size:24px}.adventure-journal .primer-intro,.adventure-journal .primer-parts p{font-size:14px}.adventure-journal .primer-parts{gap:8px}.adventure-journal .primer-parts h3{font-size:17px}.journal-label{margin-top:16px}.draft-roster{gap:10px;grid-template-columns:1fr;margin-top:18px}.draft-team{padding:10px 12px}.draft-slot{min-height:56px}.draft-heading{align-items:flex-start;flex-direction:column}.draft-heading p{margin:0}.draft-panel .draft-coin-result{border-radius:14px;font-size:12px;padding:8px 12px}.duel-camp .friend-room-bar{padding:12px;gap:10px}.camp-connection{flex:1}.duel-camp .friend-players{display:grid;grid-template-columns:1fr 1fr;gap:8px}.duel-camp .friend-player{padding:10px;grid-template-columns:1fr;font-size:13px}.camp-player-seal{display:none}}
/* Shared collection book, compact battle nameplates and outcome pennant. */
.atlas-dialog,.zone-dialog{border:0;border-left:10px solid #52735C;border-radius:6px 20px 20px 6px;background:linear-gradient(90deg,#DACBA63D,transparent 35px),#FFF9E9;box-shadow:5px 5px 0 #D9CBA7,0 22px 60px #173C3555;padding:24px 28px}
.atlas-heading{align-items:center;border-bottom:1px solid #C6B88D;padding-bottom:14px;margin-bottom:16px}.atlas-heading .eyebrow{color:#826C44;letter-spacing:.08em}.atlas-heading h2{color:#315B48;font-size:28px}.atlas-heading button{min-height:42px;border:0;border-bottom:2px solid #A18E61;background:#F0E6CA;border-radius:3px}
.atlas-filters{gap:8px;margin:16px 0}.atlas-filters button{--tab-tone:#446C55;background:#EEE7D1;border:0;border-top:3px solid var(--tab-tone);padding:10px 16px 15px;clip-path:polygon(0 0,100% 0,100% 100%,50% 92%,0 100%);color:#425641;min-height:44px}.atlas-filters [data-atlas-filter=orange]{--tab-tone:#A7602C}.atlas-filters [data-atlas-filter=blue]{--tab-tone:#427B91}.atlas-filters [data-atlas-filter=green]{--tab-tone:#668140}.atlas-filters [data-atlas-filter=purple]{--tab-tone:#7D648F}.atlas-filters [data-atlas-filter=legendary]{--tab-tone:#947333}.atlas-filters button[aria-pressed=true]{background:var(--tab-tone);color:#FFF9E9}.atlas-card{background:transparent;border:0;box-shadow:none}.atlas-card>span{display:block;color:#405F49;margin-top:7px}.atlas-card:focus-visible{outline:3px solid #3D775A;outline-offset:3px}
body .player-snapshot,body.has-game:not(.in-tutorial) .player-snapshot{--team-tone:#59785B;position:relative;background:linear-gradient(105deg,#FFFBEFF5,#FFF7E6DB);border:0;border-left:4px solid var(--team-tone);border-radius:3px 14px 3px 14px;padding:8px 12px;box-shadow:0 3px 0 #6B725B20}
body .player-snapshot.orange{--team-tone:#AC713D}body .player-snapshot.blue{--team-tone:#4F8298}body .player-snapshot.green{--team-tone:#698847}body .player-snapshot.purple{--team-tone:#8C709C}
.player-identity{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}.player-identity small{font-size:inherit}.health-values{gap:10px}.health-values .hp,.health-values .shield-total{font-size:28px;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}.health-values .primer-icon{width:24px;height:24px}.health-values .hp small{font-size:11px}
body .zone-counter{border:0;border-bottom:1px solid #C6BE9A;min-height:30px;padding:4px 2px;color:#52664D}.zone-counter[data-zone]:hover{background:#E8EDD9;color:#244D3C}.vitals:empty{display:none}
.result-dialog{background:transparent;border:0;border-radius:0;box-shadow:none;width:min(540px,calc(100% - 24px));padding:12px 12px 20px;overflow:auto}.match-result{--result-ink:#85632D;--result-ribbon:#467259;position:relative;border:0;border-radius:42% 42% 12px 12px / 50px 50px 12px 12px;padding:26px 26px 24px;background:linear-gradient(#FFFBEFF5,#FFF4DCFA);box-shadow:0 7px 0 #C2AF78,0 20px 50px #203D354D}.match-result.defeat{--result-ink:#4D7080;--result-ribbon:#4D7380;box-shadow:0 7px 0 #94A8A7,0 20px 50px #203D354D}.match-result.draw{--result-ink:#67794D;--result-ribbon:#687B51}.result-turn-stamp{display:table;margin:0 auto;padding:5px 17px;border:1px solid #BEAB79;border-radius:20px;color:#6A694D;font-size:13px}.result-seal{width:120px;height:110px;margin:10px auto 0}.match-result .result-banner{position:relative;clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);background:var(--result-ribbon);color:#FFF4D5;font-size:42px;line-height:1.25;padding:10px 35px;margin:0 auto 18px;width:fit-content;min-width:240px;text-shadow:0 2px #263D3533;letter-spacing:.12em}.result-score{border:0;display:flex;justify-content:center;gap:35px;padding:12px 0;margin:12px 0;background:#E9E4CB77;border-radius:6px}.result-score strong{color:var(--result-ink)}.result-options{margin-top:14px}.match-result>p:not(.eyebrow):not(.result-turn-stamp){font-size:15px}.result-options button:focus-visible,.atlas-filters button:focus-visible{outline:3px solid #3B7862;outline-offset:3px}
@media(max-width:700px){.atlas-dialog,.zone-dialog{border-left-width:6px;padding:18px 12px;border-radius:3px 12px 12px 3px}.atlas-heading h2{font-size:23px}.atlas-filters{gap:5px}.atlas-filters button{padding:8px 11px 12px;font-size:12px}.player-identity{font-size:13px}.health-values .hp,.health-values .shield-total{font-size:24px}.health-values .primer-icon{width:21px;height:21px}.match-result{padding:24px 20px 20px}.match-result .result-banner{font-size:36px;min-width:210px}.result-seal{width:100px;height:92px}.result-score{gap:24px}}
/* A single trail with three seal markers, rather than form-step boxes. */
.setup-progress{display:flex;align-items:flex-start;gap:0;width:min(430px,100%);margin:5px 0 22px;padding:0;list-style:none;color:#526D62;font-size:13px}
.setup-progress>li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;padding:0 5px;text-align:center;font-weight:600;text-shadow:0 1px 3px #FFF9E9,0 0 8px #FFF9E9}
.setup-progress>li:not(:last-child)::after{content:"";position:absolute;top:17px;left:calc(50% + 22px);width:calc(100% - 44px);height:2px;background:linear-gradient(90deg,#B79D66,#D4C8A4);box-shadow:0 1px #FFF8E9;z-index:-1}
.setup-progress>li>span{position:relative;display:grid;place-items:center;width:36px;height:36px;border:2px solid #B8A77F;border-radius:50%;background:#F9F3E2;color:#72785E;font-size:14px;box-shadow:inset 0 0 0 3px #FFFCF3,0 2px 3px #495B3820;text-shadow:none}
.setup-progress>li[aria-current=step]{color:#244F3E}.setup-progress>li[aria-current=step]>span{background:#35664F;color:#FFF1C5;border-color:#B59955;box-shadow:inset 0 0 0 3px #35664F,inset 0 0 0 4px #D3B778,0 0 0 3px #FFF6DDAA}
.setup-progress>li.complete{color:#385F48}.setup-progress>li.complete>span{background:#DAE6CF;border-color:#819866;color:#335B45}.setup-progress>li.complete::after{background:#789365}
@media(max-width:700px){.setup-progress{width:min(360px,100%);font-size:12px;margin-bottom:19px}.setup-progress>li{padding:0 3px;gap:6px}.setup-progress>li>span{width:32px;height:32px;font-size:12px}.setup-progress>li:not(:last-child)::after{top:15px;left:calc(50% + 20px);width:calc(100% - 40px)}}
.match-result.defeat .result-banner,.match-result.draw .result-banner{color:#FFF4D5}
.mobile-deck-guide{display:none}
/* Phones use the same crossroads map as tablets and desktops. The map keeps a
   fixed footprint, while the currently previewed deck notes live below it, so
   the first touch never moves the flag that must be touched again. */
@media(max-width:700px){
 .deck-screen{background:linear-gradient(#FFF7E3E8,#FFF3DC);padding-left:4%;padding-right:4%}
 .deck-options,.friend-lobby .deck-options{position:relative;min-height:0;padding:0;background:none;overflow:visible}
 .deck-options .faction-map{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:1.45;min-height:0;margin:0;overflow:hidden;padding:0;background:linear-gradient(#FFF7DF38,#FFF7DF22),url(/scene-crossroads.webp) 37% 50%/auto 125% no-repeat;border:1px solid #C9B989;border-radius:5px 18px 5px 18px;box-shadow:0 6px 18px #40534026}
 .deck-options .faction-stop:is(.orange,.blue,.green,.purple){position:absolute;transform:translate(-50%,-50%);width:clamp(68px,20vw,92px);height:118px;min-height:0;margin:0;justify-content:center}
 .deck-options .faction-stop.orange{left:10.8%;top:45%}.deck-options .faction-stop.blue{left:36.8%;top:35%}.deck-options .faction-stop.green{left:63.8%;top:44.4%}.deck-options .faction-stop.purple{left:89.1%;top:35.5%}
 .deck-options .faction-flag{width:100%;height:120px;max-width:none;margin:0;padding:0;clip-path:none;background:transparent;-webkit-tap-highlight-color:transparent;gap:0}
 .deck-options .faction-stop .faction-flag:hover:not(:disabled),.deck-options .blue .faction-flag,.deck-options .green .faction-flag,.deck-options .purple .faction-flag{background:transparent}
 .deck-options .faction-flag img{position:relative;z-index:1;width:44px;height:44px}.deck-options .faction-flag>strong,.deck-options .faction-flag>small{display:none}.deck-options .faction-flag.is-touch-preview::before{inset:2px 13% 8px;background:radial-gradient(ellipse at center,rgba(var(--faction-glow),.9) 0,rgba(var(--faction-glow),.58) 48%,rgba(var(--faction-glow),.08) 74%,rgba(var(--faction-glow),0) 88%);filter:blur(6px);box-shadow:0 0 18px rgba(var(--faction-glow),.62)}.deck-options .faction-flag.is-touch-preview img{animation:faction-sigil-glow 1.65s ease-in-out infinite}.deck-options .touch-confirm-label{bottom:-8px;min-height:35px;padding:7px 12px;font-size:12px}
 .deck-options .deck-notes,.friend-lobby .deck-options .deck-notes{display:block;position:relative;right:auto;top:auto;width:100%;margin:12px auto 0;padding:15px 17px 17px;clip-path:none;background:#FFF8E9F2;border:1px solid #C4B486;border-top:4px solid #718C68;border-radius:4px 15px 4px 15px;box-shadow:0 5px 14px #4053401F}
 .deck-options .deck-notes .eyebrow{margin-bottom:4px}.deck-options .deck-notes h2{display:inline;margin:0 8px 0 0;font-size:21px}.deck-options .deck-notes>strong{font-size:13px}.deck-options .deck-notes>p{margin:8px 0;font-size:13px;line-height:1.6}.deck-options .deck-notes>small{display:block;font-size:11px}
 .mobile-deck-guide{display:none}
 .deck-screen .advanced-setup{margin:16px 0 0}
}
/* Stable title / journey hierarchy on deck selection and legendary draft. */
.journey-header{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);grid-template-areas:"title progress";align-items:center;gap:6px 28px;margin:10px 0 20px;padding:0}
.journey-title{grid-area:title;min-width:0}.journey-title h1{font-size:32px;line-height:1.3;color:#2C5847;margin:0 0 10px;text-shadow:0 1px 4px #FFF8E9}.journey-title p{font-size:14px;line-height:1.7;color:#425F50;margin:0;text-shadow:0 1px 4px #FFF8E9}
.journey-progress{grid-area:progress;width:100%}.journey-progress .setup-progress{width:100%;margin:0}
.draft-journey{max-width:1300px;margin:10px auto 20px;grid-template-areas:"title progress"}.draft-panel .draft-heading{justify-content:flex-end;margin:12px 0 16px}.draft-panel .draft-heading p{margin:0}
@media(max-width:700px){.journey-header{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "progress";align-items:start;gap:12px;margin:8px 0 20px}.journey-title h1{font-size:27px;margin-bottom:8px}.journey-title p{font-size:12px;line-height:1.7}.journey-progress{width:100%;max-width:390px;justify-self:center}.draft-journey{grid-template-areas:"title" "progress"}.draft-panel .draft-heading{align-items:flex-end}}
/* Give both players time to read the final legendary pick. */
.draft-slot img{width:80px;height:112px}.draft-slot{min-height:128px}.draft-slot strong{font-size:15px}.draft-review{max-width:1040px;margin:12px auto 30px;text-align:center}.draft-review header h1{color:#315B48;font-size:30px;margin:12px 0}.draft-review header p{display:inline-block;background:#FFF8E9E8;color:#47604D;padding:10px 22px;border-radius:24px}.draft-review-teams{display:grid;grid-template-columns:1fr 1fr;gap:28px}.draft-review-teams>section{background:#FFF8E9D9;padding:15px 22px 22px;border-top:3px solid #B49A62;border-radius:4px 20px 4px 20px}.draft-review-teams h2{font-size:19px;color:#3B604B}.draft-review-cards{display:flex;justify-content:center;gap:18px}.draft-review-cards figure{margin:0;min-width:0;flex:1;max-width:180px}.draft-review-cards img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 5px #39432B25)}.draft-review-cards figcaption{font-size:15px;color:#3C5B46;margin-top:9px}
@media(max-width:700px){.draft-slot img{width:64px;height:90px}.draft-slot{min-height:102px;gap:8px}.draft-slot strong{font-size:13px}.draft-review header h1{font-size:24px}.draft-review header p{font-size:13px}.draft-review-teams{gap:12px;grid-template-columns:1fr}.draft-review-teams>section{padding:10px 16px 15px}.draft-review-teams h2{font-size:16px;margin:6px 0 12px}.draft-review-cards figure{max-width:120px}.draft-review-cards figcaption{font-size:13px}}
/* Keep hand controls and transient information in stable layout slots. */
.hand-grid .card-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;width:100%}.hand-grid .card-buttons>button{width:100%;min-width:0}
body.has-game:not(.in-tutorial) .health-hub .vitals{display:flex;height:24px;min-height:24px;max-height:24px;margin-top:2px;flex-wrap:nowrap;overflow:auto}
body.has-game:not(.in-tutorial) .vitals:empty{display:flex;visibility:hidden}
body.has-game:not(.in-tutorial) .table-feedback{display:block;box-sizing:border-box;height:24px;min-height:24px;line-height:20px;padding:2px 8px;margin:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.has-game:not(.in-tutorial) .table-feedback:empty{display:block;visibility:hidden}
body.has-game:not(.in-tutorial) .effect-notes:has(>.subtle:only-child){display:block;visibility:hidden}
@media(min-width:901px){body.has-game:not(.in-tutorial) .battle-table:has(.health-hub){grid-template-rows:auto 116px 32px 24px auto}body.has-game:not(.in-tutorial) .health-hub .player-snapshot{height:116px;box-sizing:border-box}body.has-game:not(.in-tutorial) .round-callout{max-height:153px;overflow:auto}}
@media(max-width:900px){body.has-game:not(.in-tutorial) .round-callout{min-height:78px;box-sizing:border-box}body.has-game:not(.in-tutorial) .effect-notes{height:28px;min-height:28px;box-sizing:border-box}}
/* Coin matchup labels sit directly in the scene. */
.draft-coin-intro .coin-pair-legend{background:transparent;border:0;box-shadow:none;padding:4px 0;gap:30px;color:#344F3E}
.draft-coin-intro .coin-pair-legend span{font-size:20px;font-weight:650;gap:10px;text-shadow:0 1px 3px #FFF9E9,0 0 7px #FFF9E9B3}
.draft-coin-intro .coin-pair-legend img{width:38px;height:38px}
.draft-coin-intro>p:not(.eyebrow){background:transparent;border:0;box-shadow:none;font-size:18px;line-height:1.7;padding:0;color:#4B583C;text-shadow:0 1px 3px #FFF9E9}
@media(max-width:700px){.draft-coin-intro .coin-pair-legend{gap:18px}.draft-coin-intro .coin-pair-legend span{font-size:17px;gap:8px}.draft-coin-intro .coin-pair-legend img{width:34px;height:34px}.draft-coin-intro>p:not(.eyebrow){font-size:16px}}
/* Selected labels and available actions share the same baseline. */
.draft-grid .card>button.primary,.draft-grid .card>.pick-status{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:44px;min-height:44px;margin:4px 0 0;padding:6px;line-height:1.3}
@media(max-width:700px){.draft-grid .card>button.primary,.draft-grid .card>.pick-status{height:40px;min-height:40px;padding:6px 3px;font-size:11px}}
/* The coin reveals only its face; the following page explains play order. */
.draft-coin-intro h2{font-size:clamp(28px,3vw,38px);line-height:1.5}
.draft-panel .draft-matchup{font-size:18px;font-weight:650;line-height:1.7;color:#355441;text-shadow:0 1px 3px #FFF9E9;margin-bottom:12px}
.draft-panel .draft-coin-result{font-size:17px;line-height:1.7}
.draft-coin-intro .coin-pair-legend span{font-size:22px}
@media(max-width:700px){.draft-coin-intro h2{font-size:28px}.draft-coin-intro .coin-pair-legend span{font-size:18px}.draft-panel .draft-matchup{font-size:16px}.draft-panel .draft-coin-result{font-size:15px}}
/* Draft status and action labels use the same type scale. */
.draft-grid .card>button.primary,.draft-grid .card>.pick-status{font-size:16px;font-weight:700}
@media(max-width:700px){.draft-grid .card>button.primary,.draft-grid .card>.pick-status{font-size:13px}}
/* A distinct, fully visible preparation pose before the timed toss. */
.draft-coin-intro.is-preparing .draft-coin{animation:none;transform:rotateY(0deg)}
.draft-coin-intro.is-preparing h2{color:#4A6551}
/* Opening deal overlays the real table without moving either hand. */
.opening-progress{position:fixed;z-index:25;top:72px;left:50%;transform:translateX(-50%);width:max-content;max-width:96vw;padding:10px 22px;background:rgba(255,248,222,.96);border-bottom:3px solid #b99a59;border-radius:50% / 14%;pointer-events:none;box-shadow:0 5px 20px #314b4430}
.opening-progress p{text-align:center;margin:6px 0 0;color:#315b52}
.battle-table.is-dealing{position:relative}
.is-dealing #hand-strip,.is-dealing .card-backs{visibility:hidden}
#opening-deal-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:12}
.dealt-back{position:absolute;left:0;top:0;aspect-ratio:63/88;object-fit:cover;border:2px solid #f1deb1;border-radius:7px;box-shadow:0 4px 9px #243f4940;animation:opening-card-deal 550ms cubic-bezier(.2,.65,.25,1) both;animation-delay:var(--deal-delay)}
@keyframes opening-card-deal{from{opacity:0;transform:translate(var(--deal-start-x),var(--deal-start-y)) rotate(-10deg) scale(.8)}to{opacity:1;transform:translate(var(--deal-x),var(--deal-y)) rotate(0) scale(1)}}
@media(max-width:700px){.opening-progress{top:60px;padding:8px 12px}.opening-progress .setup-progress{gap:7px}}
/* Keep sequential arrival legible when the OS disables travel animations. */
@keyframes opening-card-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#opening-deal-layer .dealt-back{animation:opening-card-arrive 300ms ease-out both!important;animation-delay:var(--deal-delay)!important}}

.opening-progress .setup-progress{display:flex;flex-wrap:nowrap;gap:18px;margin:0}.opening-progress .setup-progress li{white-space:nowrap;min-width:72px}.dealt-back{height:auto}
.dealt-back{transform:translate(var(--deal-x),var(--deal-y));opacity:1}
/* A joined action pair: clear primary action, compact discard, matching edges. */
.hand-grid .card-buttons{grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:2px}
.hand-grid .card-buttons>button{height:36px;min-height:36px;padding:5px 0;line-height:1.2;border-radius:0;font-size:12px}
.hand-grid .card-buttons>.primary{clip-path:polygon(0 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,0 100%);border-bottom:2px solid #244D41}
.hand-grid .card-buttons>.discard{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,6px 50%);padding-left:4px;border-bottom:2px solid #593723;font-size:11px;white-space:nowrap}
@media(max-width:700px){.hand-grid .card-buttons>button{height:38px;min-height:38px;font-size:11px}}
@media(min-width:901px){.draft-review-cards figure{max-width:176px}.draft-review-teams>section{background:transparent;border:0;box-shadow:none;padding:0 22px 22px}.draft-review-teams h2{margin:0 0 16px}.draft-review header p{background:transparent;border-radius:0;padding:6px 0}.draft-review-cards{gap:20px}}
/* Opponent backs and played faces share one responsive card width. */
.battle-table{--opponent-card-width:124px}
body.has-game .opponent-row .card-back{flex:0 0 var(--opponent-card-width);width:var(--opponent-card-width);aspect-ratio:744/1039}
body.has-game .opponent-row .card-back+.card-back{margin-left:calc(var(--opponent-card-width)*-.76)}
body.has-game .opponent-row .card-backs{align-items:flex-start}
@media(min-width:901px){.battle-table{--opponent-card-width:clamp(104px,14vh,132px)}}
@media(min-width:901px) and (max-height:700px){.battle-table{--opponent-card-width:100px}}
@media(max-width:650px){.battle-table{--opponent-card-width:104px}.opponent-row{grid-template-columns:128px minmax(0,1fr)}}
.changed-card-group{margin:12px 0 0;text-align:center}
.changed-card-group h3{margin:0 0 7px;font-size:14px;color:#6d603d}
.changed-card-group ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
.changed-card-group li{flex:0 0 68px;min-width:0}
.changed-card-group img{display:block;width:68px;height:auto;aspect-ratio:744/1039;border-radius:3px;box-shadow:0 2px 4px #3e453425}
.exchange-feedback{max-height:calc(100dvh - 48px);overflow-y:auto;pointer-events:auto}
@media(max-width:450px){.exchange-feedback{padding:18px}.changed-card-group ul{gap:7px}.changed-card-group li{flex-basis:58px}.changed-card-group img{width:58px}}
.coin-rim.rim-0{transform:translateZ(-2px)}.coin-rim.rim-1{transform:translateZ(-1px)}.coin-rim.rim-2{transform:translateZ(0)}.coin-rim.rim-3{transform:translateZ(1px)}.coin-rim.rim-4{transform:translateZ(2px)}
.draft-coin-intro.is-revealed h2{visibility:hidden}
/* Fit a 16:9 laptop table without the browser scrolling to reach action buttons. */
@media(min-width:901px) and (max-height:800px){
 body.has-game:not(.in-tutorial):has(.health-hub) main{padding-top:4px;padding-bottom:2px}
 body.has-game:not(.in-tutorial) .battle-table:has(.health-hub){padding-top:3px;padding-bottom:3px;row-gap:4px}
}
@media(min-width:1100px) and (max-height:740px){
 body.has-game:not(.in-tutorial) .hand-zone{--card-width:122px}
 body.has-game:not(.in-tutorial) .hand-grid{padding-bottom:0}
 body.has-game:not(.in-tutorial):has(.health-hub) main{padding-bottom:0}
}
/* The wide-screen online toolbar shares the header instead of adding a table row. */
@media(min-width:1100px){
 body[data-scene=battle] #game>.friend-room-bar{position:absolute;z-index:11;top:4px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 480px);height:40px;box-sizing:border-box;flex-wrap:nowrap;gap:10px;margin:0;padding:0;background:transparent;border:0;box-shadow:none;white-space:nowrap}
 body[data-scene=battle] #game>.friend-room-bar .invite-code{font-size:11px;gap:7px}
 body[data-scene=battle] #game>.friend-room-bar strong{font-size:20px}
 body[data-scene=battle] #game>.friend-room-bar .camp-connection{max-width:160px;overflow:hidden;text-overflow:ellipsis;font-size:11px}
 body[data-scene=battle] #game>.friend-room-bar button{min-height:32px;padding:5px 8px;font-size:11px}
 body[data-scene=battle] #game>.friend-room-bar input{width:150px}
}
/* One prominent turn cue, with compact line-art symbols and stable table height. */
.round-callout .status-title{display:flex;align-items:center;justify-content:center;gap:8px}
.turn-task-icon{display:inline-flex;flex:0 0 27px;width:27px;height:27px;color:#F5D991}
.turn-task-icon svg{display:block;width:100%;height:100%}
.turn-task-label{min-width:0;line-height:1.35}
body.has-game .round-callout .turn-number{font-size:14px;line-height:1.4;font-weight:650;letter-spacing:.02em}
body.has-game .round-callout .status-title{font-size:22px}
body.has-game:not(.in-tutorial) .round-callout .plays-count{font-size:34px;line-height:1.1}
body.has-game .round-callout .subtle,body.has-game:not(.in-tutorial) .round-callout .subtle{font-size:13px;line-height:1.45}
.round-callout:not(:empty)::before{content:"";position:absolute;top:5px;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,#E5CC8466,transparent);pointer-events:none}
.opponent-zone .zone-heading h2{white-space:nowrap;font-size:15px}
@media(max-width:900px){
 .health-hub .round-callout{gap:12px}
 body.has-game .round-callout .status-title{font-size:20px}
 body.has-game:not(.in-tutorial) .round-callout .plays-count{font-size:30px}
 body.has-game .round-callout .turn-number{font-size:13px;margin:0}
 .turn-task-icon{flex-basis:24px;width:24px;height:24px}
}
@media(max-width:450px){
 .health-hub .round-callout{gap:10px;padding-left:10px;padding-right:10px}
 body.has-game .round-callout .status-title{font-size:18px;gap:6px}
 body.has-game .round-callout .turn-number{font-size:12px}
 body.has-game:not(.in-tutorial) .round-callout .plays-count{font-size:28px}
 .opponent-zone .zone-heading h2{font-size:13px}
}
/* Compact player plaques lend their spare height to readable retained cards. */
body .zone-counter{flex:0 0 auto;max-width:none;justify-content:flex-start;gap:4px;min-height:24px;padding:2px 3px;white-space:nowrap}
body .zone-counter strong{margin-left:4px;flex-basis:auto}
body .zone-counters,body.has-game:not(.in-tutorial) .zone-counters{gap:6px 18px;margin-top:4px}
body .player-snapshot,body.has-game:not(.in-tutorial) .player-snapshot{padding:6px 10px}
body.has-game:not(.in-tutorial) .health-hub .vitals{height:18px;min-height:18px;max-height:18px;margin-top:2px}
body.has-game:not(.in-tutorial) .vital-tag{font-size:10px;line-height:18px}
body .board-lane{height:52px;align-items:center}
body .board-lane .board{height:52px;max-height:52px;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;min-width:0;scrollbar-width:thin}
body .board-lane .board-card{flex:none;height:48px;padding:3px 6px;gap:6px;border-radius:7px;background:linear-gradient(#FFFCF0,#F4EBCF);box-shadow:0 2px 3px #4C5C3C18}
body .board-lane .board-preview img{width:28px;height:39px;flex-basis:28px;border-radius:2px}
body .board-lane .board-preview span{font-size:12px;max-width:90px}
body .board-lane .shield-point{font-size:22px}
body .board-lane .board-order{display:inline;font-size:10px;color:#64805B;white-space:nowrap}
@media(min-width:901px){
 body.has-game:not(.in-tutorial) .battle-table:has(.health-hub){grid-template-rows:auto 96px 52px 24px auto}
 body.has-game:not(.in-tutorial) .health-hub .player-snapshot{height:96px}
 body.has-game:not(.in-tutorial) .board-lane,body.has-game:not(.in-tutorial) .board-lane .board{height:52px;max-height:52px}
 body.has-game:not(.in-tutorial) .board-lane .board-card{height:48px;padding:3px 6px}
 body.has-game:not(.in-tutorial) .board-preview img{width:28px;height:39px;flex-basis:28px}
}
@media(min-width:901px) and (max-width:1120px){
 body.has-game:not(.in-tutorial) .battle-table:has(.health-hub){grid-template-rows:auto 104px 44px 24px auto}
 body.has-game:not(.in-tutorial) .health-hub .player-snapshot{height:104px}
 body.has-game:not(.in-tutorial) .board-lane,body.has-game:not(.in-tutorial) .board-lane .board{height:44px;max-height:44px}
 body.has-game:not(.in-tutorial) .board-lane .board-card{height:40px;padding:2px 5px}
 body.has-game:not(.in-tutorial) .board-preview img{width:24px;height:33.5px;flex-basis:24px}
}
@media(max-width:900px){
 body .zone-counters,body.has-game:not(.in-tutorial) .zone-counters{gap:4px}
 body .zone-counter{flex:1 1 0;flex-wrap:wrap;justify-content:center;padding:2px 0;gap:2px;font-size:9px}
 body .zone-counter strong{margin-left:0;font-size:14px}
 .board-lanes{gap:10px}
 .board-lane .board-caption{font-size:10px}
}
/* Rounded mating edges preserve the 3:1 primary/discard action pair. */
.ui-shape-defs{position:absolute;pointer-events:none;overflow:hidden}
.hand-grid .card-buttons>button{border-radius:8px}
.hand-grid .card-buttons>.primary{clip-path:url(#play-action-curve);border-bottom:0;box-shadow:inset 0 -2px #244D4166}
.hand-grid .card-buttons>.discard{clip-path:url(#discard-action-curve);border-bottom:0;box-shadow:inset 0 -2px #59372366}
/* A carved green plaque with a restrained warm-gold keyline, paired with the side plaques. */
.round-callout{--turn-top:#507464;--turn-bottom:#33584B;--turn-rim:#A6B494}
.round-callout.my-action{--turn-top:#4D7B64;--turn-bottom:#315B4B;--turn-rim:#C8B778}
body .round-callout,body.has-game:not(.in-tutorial) .round-callout{clip-path:none;border:1px solid var(--turn-rim);border-radius:13px 5px 13px 5px;background:linear-gradient(145deg,var(--turn-top),var(--turn-bottom));box-shadow:0 3px 0 #4F634633,inset 0 1px #E8F0D32B;overflow:visible}
.round-callout:not(:empty)::before{inset:5px;height:auto;border:1px solid #D4C58B66;border-radius:8px 2px 8px 2px;background:none}
body.has-game .round-callout .turn-number{color:#E8E3C5;letter-spacing:.04em}
body.has-game .round-callout .subtle,body.has-game:not(.in-tutorial) .round-callout .subtle{margin:10px 0 0;color:#CCD8CD;font-size:13px;line-height:1.5}
body .round-callout:empty,body.has-game:not(.in-tutorial) .round-callout:empty{background:transparent;border:0;box-shadow:none}
@media(max-width:900px){
 .health-hub .round-callout{border-radius:11px 4px 11px 4px}
 body.has-game .round-callout .subtle,body.has-game:not(.in-tutorial) .round-callout .subtle{margin:0}
}
@media(forced-colors:active){body .round-callout{background:Canvas;color:CanvasText;border-color:CanvasText}.round-callout:not(:empty)::before{border-color:CanvasText}.hand-grid .card-buttons>button{clip-path:none;border:1px solid ButtonText}}

/* One player plaque: compact facts above a larger retained-card shelf. */
.player-plaque{--team-tone:#59785B;--retained-card-height:70px;display:flex;flex-direction:column;min-width:0;height:196px;background:linear-gradient(105deg,#FFFBEFF5,#FFF7E6DB);border-left:4px solid var(--team-tone);border-radius:3px 14px 3px 14px;box-shadow:0 3px 0 #6B725B20}
.player-plaque.orange{--team-tone:#AC713D}.player-plaque.blue{--team-tone:#4F8298}.player-plaque.green{--team-tone:#698847}.player-plaque.purple{--team-tone:#8C709C}
body .player-plaque .player-snapshot,body.has-game:not(.in-tutorial) .player-plaque .player-snapshot{flex:none;height:auto;min-height:0;background:none;border:0;border-radius:0;box-shadow:none;padding:6px 10px}
body .player-plaque .vitals{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.player-plaque .vitals::-webkit-scrollbar{display:none}
body .player-plaque .vital-tag{flex:none;height:18px;padding:0 5px;line-height:18px;white-space:nowrap}
body .player-plaque .board-lane,body.has-game:not(.in-tutorial) .player-plaque .board-lane{position:relative;flex:1;min-height:0;height:auto;max-height:none;margin:0 10px 6px;padding:10px 0 2px;border-top:1px solid #B6BA9466;display:flex;align-items:stretch}
body .player-plaque .board-caption{position:absolute;top:-8px;left:0;writing-mode:horizontal-tb;padding:0 5px 0 0;background:#FFF9E9;color:#6B795C;font-size:11px;line-height:15px}
body .player-plaque .board-lane .board,body.has-game:not(.in-tutorial) .player-plaque .board-lane .board{flex:1;height:100%;max-height:none;align-items:center;justify-content:flex-start;padding:0 2px;gap:6px}
body .player-plaque .board-lane .board-card,body.has-game:not(.in-tutorial) .player-plaque .board-lane .board-card{height:var(--retained-card-height);max-height:calc(100% - 4px);min-height:0;align-self:center;flex:none;padding:3px 6px}
body .player-plaque .board-preview{height:100%;min-height:0;overflow:hidden}
body .player-plaque .board-preview img,body.has-game:not(.in-tutorial) .player-plaque .board-preview img{width:auto;height:100%;max-height:76px;aspect-ratio:744/1039;flex:0 0 auto;object-fit:contain}
body .player-plaque .board-preview span{font-size:12px;max-width:80px}
@media(min-width:901px){
 body.has-game:not(.in-tutorial) .battle-table:has(.health-hub){grid-template-rows:auto 172px 24px auto}
 body.has-game:not(.in-tutorial) .health-hub .player-plaque{grid-row:2;height:172px}
 body.has-game:not(.in-tutorial) .health-hub .player-plaque:first-child{grid-column:1}
 body.has-game:not(.in-tutorial) .health-hub .player-plaque:last-child{grid-column:3}
 body.has-game:not(.in-tutorial) .round-callout{grid-row:2;max-height:none}
 body.has-game:not(.in-tutorial) .table-feedback{grid-row:3}
 body.has-game:not(.in-tutorial) .hand-zone{grid-row:4}
}
@media(max-width:900px){
 .health-hub .player-plaque{grid-row:1;grid-column:1;min-width:0}
 .health-hub .player-plaque:last-child{grid-column:2}
 .player-plaque .health-line{gap:6px}
 body .player-plaque .board-preview span{max-width:58px;font-size:11px}
 body .player-plaque .board-lane .board-card{padding:3px 4px;gap:4px}
 body .player-plaque .board-lane{margin-left:6px;margin-right:6px}
}

/* Identity and pile counts form one compact first row. */
.player-topline{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;min-width:0}
.player-topline .player-identity{flex:none;max-width:100%}
body .player-topline .zone-counters,body.has-game:not(.in-tutorial) .player-topline .zone-counters{flex:none;display:flex;flex-wrap:nowrap;gap:4px;margin:0}
body .player-topline .zone-counter{flex:none;min-height:24px;font-size:10px;padding:2px 1px;gap:2px;justify-content:flex-start;flex-wrap:nowrap}
body .player-topline .zone-counter strong{font-size:14px;margin-left:2px;flex-basis:auto}
.player-topline .pile-icon{display:none}
.player-topline .battle-nickname{display:inline-block;max-width:6em;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.player-plaque .health-values{flex:none}
@media(min-width:1121px){.player-plaque .health-line{flex-wrap:nowrap;align-items:center;gap:8px}}
@media(min-width:901px) and (max-width:1120px){.player-plaque .health-line{flex-direction:column;align-items:stretch;gap:4px}.player-plaque .health-values{align-self:flex-end}}
@media(max-width:900px){.player-topline{width:100%;gap:4px}.player-plaque .health-line{gap:4px}.player-plaque .health-values{margin-left:0}.player-topline .player-identity{width:100%}body .player-topline .zone-counters{gap:3px;width:100%;justify-content:space-between}body .player-topline .zone-counter{font-size:9px}body .player-topline .zone-counter strong{font-size:13px}}

/* The removed tabs lend their height to larger played cards. */
.battle-table{--played-face-width:136px;--opponent-card-width:var(--played-face-width)}
body.has-game .played-slot{--played-width:var(--played-face-width);width:var(--played-width);flex-basis:var(--played-width)}
body.has-game .played-slot .card{width:var(--played-width)}
body.has-game .play-strip{margin-top:0}
@media(min-width:901px){
 .battle-table{--played-face-width:clamp(114px,15.4vh,145px);--opponent-card-width:var(--played-face-width)}
 body.has-game:not(.in-tutorial) .opponent-row{position:relative;grid-template-rows:auto auto;row-gap:0}
 body.has-game:not(.in-tutorial) .play-strip{grid-row:1/3;height:calc(var(--played-face-width)*1039/744 + 46px)}
 body.has-game:not(.in-tutorial) .played-slot{--played-width:var(--played-face-width)}
 body.has-game:not(.in-tutorial) .effect-stack{max-height:calc(var(--played-face-width)*1039/744 + 32px)}
 body.has-game:not(.in-tutorial) .play-strip-controls{position:absolute;right:4px;bottom:2px;z-index:2;background:#FFF8E9E8;border-radius:12px}
}
@media(max-width:900px){
 body.has-game .play-strip,body.has-game:not(.in-tutorial) .play-strip{height:calc(var(--played-face-width)*1039/744 + 44px);min-height:0}
 body.has-game .played-panel{position:relative}
 body.has-game .play-strip-controls{position:absolute;right:2px;bottom:0;z-index:2;background:#FFF8E9E8;border-radius:12px}
}
@media(max-width:650px){.battle-table{--played-face-width:114px;--opponent-card-width:var(--played-face-width)}}

/* Focus on life, active restrictions, retained shields, and the cards themselves. */
.player-plaque .health-line{display:flex;flex-direction:row;align-items:center;gap:8px}
.player-plaque .player-topline{flex:1;min-width:0}
.player-plaque .health-values{gap:8px;align-items:center;margin:0}
.own-plaque .health-values{order:-1;flex-direction:row-reverse}
.opponent-plaque .health-values{margin-left:auto}
body .player-plaque .health-values .hp,body .player-plaque .health-values .shield-total{font-size:29px;line-height:1.1;font-weight:700;gap:3px;white-space:nowrap}
body .player-plaque .health-values .primer-icon{width:23px;height:23px;flex:none}
body .player-plaque .vitals,body.has-game:not(.in-tutorial) .player-plaque .vitals{display:flex;visibility:visible;height:26px;min-height:26px;max-height:26px;gap:5px;align-items:center;margin:3px 0 0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
body .player-plaque .vitals:empty,body.has-game:not(.in-tutorial) .player-plaque .vitals:empty{display:flex}
body .player-plaque .vital-tag,body.has-game:not(.in-tutorial) .player-plaque .vital-tag{height:22px;line-height:22px;padding:0 7px;font-size:12px;color:#576347;background:#DCE4CF;border-radius:5px}
body .player-plaque .vital-tag{position:relative}
body .player-plaque .vital-tag:has(.vital-tag-turns){padding-right:17px}
body .player-plaque .vital-tag-turns{position:absolute;top:2px;right:3px;font-size:8px;font-weight:800;line-height:1;color:#35594F}
.player-plaque,.player-plaque:has(.vitals:not(:empty)){--retained-card-height:76px}
.board-facts{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:24px;flex:none}
body .board-facts .shield-point{line-height:1;font-size:24px}
.board-facts .shield-point .primer-icon{width:22px;height:22px}
.board-counter{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:#8B6941}
.board-counter svg{width:22px;height:22px}
.board-shield-attack{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:#477B90}
.board-shield-attack svg{width:22px;height:22px}
.effect-alert-lines{margin:15px 0 0;padding:0;list-style:none;text-align:left;color:#35594F;font-size:16px;line-height:1.65}
.effect-alert-lines li{position:relative;padding-left:15px}
.effect-alert-lines li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;background:#B29B5C;transform:rotate(45deg)}
.effect-alert-lines li+li{margin-top:9px}
@media(max-width:450px){.effect-alert-lines{font-size:15px;margin-top:12px}.effect-alert-lines li+li{margin-top:7px}}
.hand-grid .card-buttons>.discard{text-indent:4px}
body .player-plaque .board-lane{padding-top:8px}
body .player-plaque .board-lane .board{scrollbar-width:none}
.player-plaque .board::-webkit-scrollbar{display:none}
body.has-game .played-slot{padding-top:0}
body.has-game .played-panel .effect-stack{margin-top:0}
body.has-game .play-strip,body.has-game:not(.in-tutorial) .play-strip{height:calc(var(--played-face-width)*1039/744 + 30px);min-height:0}
@media(max-width:650px){
 .battle-table{--opponent-card-width:71px}
 .opponent-row{grid-template-columns:102px minmax(0,1fr);gap:4px}
 body.has-game .opponent-zone{min-width:0;overflow:hidden}
 body.has-game .opponent-row .card-backs{max-width:100%;padding-left:0;padding-right:0;overflow-x:auto;overflow-y:hidden}
 body.has-game .opponent-row .card-back+.card-back{margin-left:calc(var(--opponent-card-width)*-.93)}
 body.has-game .played-panel{padding-left:2px;transform:translateY(-6px)}
 body.has-game .play-strip{gap:2px;padding:0 0 18px;scroll-snap-type:x proximity}
 body.has-game .played-slot{scroll-snap-align:start}
 body.has-game .played-panel.has-earlier-plays .play-strip{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 100%);mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 100%)}
 body.has-game .play-strip,body.has-game:not(.in-tutorial) .play-strip{height:calc(var(--played-face-width)*1039/744 + 60px);scroll-padding-bottom:18px}
 body.has-game .played-panel .effect-stack{max-height:calc(var(--played-face-width)*1039/744 + 50px)}
}
@media(max-width:340px){
 .battle-table{--played-face-width:96px;--opponent-card-width:64px}
 .opponent-row{grid-template-columns:92px minmax(0,1fr)}
}
@media(min-width:901px){
 body.has-game:not(.in-tutorial) .battle-table:has(.health-hub){grid-template-rows:auto 172px auto}
 body.has-game:not(.in-tutorial) .hand-zone{grid-row:3}
 .own-plaque .player-topline{padding-left:3px}
}
@media(min-width:901px) and (max-width:1120px){
 .player-plaque .health-line{flex-wrap:wrap}
 .player-plaque .player-topline{flex-basis:100%;order:0}
 .player-plaque .health-values{order:1}
 .own-plaque .health-values{align-self:flex-start}
 .opponent-plaque .health-values{align-self:flex-end}
}
@media(max-width:900px){
 .player-plaque .health-line{flex-wrap:wrap;gap:3px}
 .player-plaque .player-topline{flex-basis:100%;order:0}
 .player-plaque .health-values{order:1;gap:7px}
 .own-plaque .health-values{margin-right:auto}
 .opponent-plaque .health-values{margin-left:auto}
 body .player-plaque .health-values .hp,body .player-plaque .health-values .shield-total{font-size:27px}
 body .player-plaque .health-values .primer-icon{width:21px;height:21px}
 body .player-plaque .vital-tag,body.has-game:not(.in-tutorial) .player-plaque .vital-tag{font-size:11px;padding:0 5px}
 body .player-plaque .board-lane .board-card{gap:5px;padding:3px 5px}
}

/* Compare both players' life in one place; side plaques share a reading order. */
.battle-center{min-width:0;min-height:172px;box-sizing:border-box;align-self:stretch;display:flex;flex-direction:column;padding:8px 10px;background:linear-gradient(145deg,#FFFCF0F5,#F4E9CDD9);border:1px solid #BDA46C;border-radius:14px 6px 14px 6px;box-shadow:0 3px 0 #6B725B20,inset 0 0 0 3px #FFF9E67A}
.battle-vitals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-width:0}
.combatant-vitals{min-width:0;text-align:center}
.combatant-vitals+.combatant-vitals{border-left:1px solid #C9BA9159}
.combatant-label{display:block;font-size:12px;font-weight:650;color:#5D6E58;line-height:17px;margin-bottom:2px}
body .battle-center .health-values{--vital-icon-size:24px;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:2px;margin:0}
body .battle-center .health-values .hp,body .battle-center .health-values .shield-total{display:grid;grid-template-columns:var(--vital-icon-size) 2ch;align-items:center;column-gap:5px;font-size:30px;font-weight:750;line-height:1.05;font-variant-numeric:tabular-nums}
body .battle-center .hp{color:#AD534E}
body .battle-center .hp.low-hp{color:#C03932}
body .battle-center .shield-total{color:#447D95}
body .battle-center .health-values .primer-icon{width:var(--vital-icon-size);height:var(--vital-icon-size);flex:none;align-self:center}
body .battle-center .hp>.vital-number,body .battle-center .shield-total>.vital-number{font:inherit;color:inherit;margin:0;text-align:right}
body .battle-center .round-callout,body.has-game:not(.in-tutorial) .battle-center .round-callout{grid-area:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;flex:1;min-height:0;max-height:none;min-width:0;margin:6px 0 0;padding:4px 0 0;background:none;border:0;border-top:1px solid #BDAB775C;border-radius:0;box-shadow:none;gap:1px;clip-path:none}
.battle-center .round-callout::before{display:none}
body.has-game .battle-center .round-callout .turn-number{font-size:11px;line-height:15px;margin:0;color:#74816A;letter-spacing:.02em}
body.has-game .battle-center .round-callout .status-title{color:#355F4B;font-size:17px;line-height:1.3;gap:5px}
body.has-game .battle-center .round-callout .plays-count{color:#355F4B;font-size:25px;line-height:1}
body.has-game .battle-center .round-callout .subtle{margin:0;color:#6D7B63;font-size:11px;line-height:1.4}
.battle-center .turn-task-icon{flex-basis:20px;width:20px;height:20px;color:#6F865D}
.battle-center .round-callout button{min-height:32px;margin:0;padding:4px 12px;font-size:12px}
body .player-plaque .player-topline{padding:0;align-items:center;gap:3px 8px}
body .player-plaque .player-identity{flex-direction:row;align-items:center;font-size:13px}
body .player-plaque .zone-counter{font-size:11px}
body .player-plaque .zone-counter strong{font-size:15px}
@media(min-width:901px){
 body.has-game:not(.in-tutorial) .battle-center{grid-column:2;grid-row:2;height:172px}
 body .health-hub .player-plaque .player-topline{flex-basis:auto}
 body .player-plaque .board-preview img,body.has-game:not(.in-tutorial) .player-plaque .board-preview img{max-height:86px}
 .player-plaque,.player-plaque:has(.vitals:not(:empty)){--retained-card-height:86px}
}
@media(max-width:900px){
 .health-hub:has(.battle-center){grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:56px 154px 58px;gap:6px 8px;min-height:0}
 .health-hub .battle-center{display:contents}
 .health-hub .battle-vitals{grid-column:1/-1;grid-row:1;gap:8px}
 .health-hub .combatant-vitals{border:0;border-bottom:2px solid #B7AB7D;border-radius:8px 8px 3px 3px;background:linear-gradient(145deg,#FFFCF0F5,#F7EFD9E8);padding:2px 4px}
 .health-hub .combatant-vitals.blue{border-bottom-color:#4F8298}.health-hub .combatant-vitals.orange{border-bottom-color:#AC713D}.health-hub .combatant-vitals.green{border-bottom-color:#698847}.health-hub .combatant-vitals.purple{border-bottom-color:#8C709C}
 body .battle-center .health-values{--vital-icon-size:22px;flex-direction:row;gap:12px}
 body .battle-center .health-values .hp,body .battle-center .health-values .shield-total{font-size:27px;column-gap:4px}
 .combatant-label{font-size:11px;line-height:15px;margin-bottom:2px}
 .health-hub .player-plaque,.health-hub .player-plaque:last-child{grid-row:2;height:154px}
 body .health-hub .battle-center .round-callout{grid-column:1/-1;grid-row:3;display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;gap:3px 12px;margin:0;padding:4px 10px;border:1px solid #B7BE9D;border-radius:8px 3px 8px 3px;background:#FFF8E7ED}
 body .health-hub .battle-center .round-callout:empty{border:0;background:none}
 body.has-game .battle-center .round-callout .turn-number{font-size:12px}
 body.has-game .battle-center .round-callout .status-title{font-size:18px}
 body.has-game .battle-center .round-callout .subtle{font-size:11px}
 body .player-plaque .player-topline .player-identity{width:auto;font-size:12px}
 body .player-plaque .player-topline .zone-counters{justify-content:flex-start;gap:5px;width:auto}
 body .player-plaque .zone-counter{font-size:10px}
 body .player-plaque .zone-counter strong{font-size:14px}
 body .health-hub .player-plaque .player-snapshot,body.has-game:not(.in-tutorial) .health-hub .player-plaque .player-snapshot{padding:4px 8px}
 body .player-plaque .player-identity,body .player-plaque .player-identity small{line-height:1.3}
 body .player-plaque .player-topline .zone-counter{min-height:20px;padding:1px 0;line-height:1.2}
 body .player-plaque .vitals,body.has-game:not(.in-tutorial) .player-plaque .vitals{height:22px;min-height:22px;max-height:22px}
 body .player-plaque .vital-tag,body.has-game:not(.in-tutorial) .player-plaque .vital-tag{height:20px;line-height:20px}
 body .health-hub .player-plaque .board-lane,body.has-game:not(.in-tutorial) .health-hub .player-plaque .board-lane{padding-top:8px}
 .player-plaque .board-facts{gap:2px;min-width:20px}
 body .player-plaque .board-facts .shield-point{font-size:21px}
 .player-plaque .board-counter,.player-plaque .board-counter svg,.player-plaque .board-shield-attack,.player-plaque .board-shield-attack svg{width:18px;height:18px}
}
@media(max-width:360px){
 body .battle-center .health-values{--vital-icon-size:20px;gap:8px}
 body .battle-center .health-values .hp,body .battle-center .health-values .shield-total{font-size:25px}
 body .player-plaque .zone-counter{font-size:9px}
 body .player-plaque .zone-counter strong{font-size:13px}
 .health-hub:has(.battle-center){grid-template-rows:56px 168px 58px}
 .health-hub .player-plaque,.health-hub .player-plaque:last-child{height:168px}
 body .player-plaque .player-topline .zone-counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:3px}
 body .player-plaque .player-topline .zone-counter{flex-direction:column;justify-content:center;min-height:32px;gap:0}
 body .player-plaque .player-topline .zone-counter strong{margin:0}
}

/* Compact player labels: side and deck stay aligned without decorative seals. */
body .player-plaque .player-identity{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:0 5px;width:100%;max-width:100%;min-width:0;white-space:nowrap;text-align:left}
body .player-plaque .player-side{font-weight:700;line-height:1.2}
body .player-plaque .player-identity small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.zone-label-short{display:none}
@media(max-width:900px){
 body .player-plaque .player-topline{flex-wrap:nowrap;gap:4px}
 body .player-plaque .player-topline .player-identity{flex:1 1 auto;width:auto;min-width:0}
 body .player-plaque .player-topline .zone-counters{flex:0 0 auto;width:auto;justify-content:flex-start;gap:3px}
}
@media(min-width:651px) and (max-width:900px){
 .health-hub:has(.battle-center){grid-template-rows:56px 184px 58px}
 .health-hub .player-plaque,.health-hub .player-plaque:last-child{height:184px}
 .player-plaque,.player-plaque:has(.vitals:not(:empty)){--retained-card-height:110px}
 body .player-plaque .board-preview img,body.has-game:not(.in-tutorial) .player-plaque .board-preview img{max-height:110px}
}
/* Tablet plaques keep identity and all three pile counts on one row, freeing height for retained cards. */
@media(min-width:651px){
 body .player-plaque .player-topline{flex-wrap:nowrap;gap:4px}
 body .player-plaque .player-topline .player-identity{flex:1 1 auto;width:auto;min-width:0}
 body .player-plaque .player-topline .zone-counters{flex:0 0 auto;width:auto;justify-content:flex-start;gap:3px}
}
@media(min-width:901px) and (max-width:1120px){
 .player-plaque,.player-plaque:has(.vitals:not(:empty)){--retained-card-height:96px}
 body .player-plaque .board-preview img,body.has-game:not(.in-tutorial) .player-plaque .board-preview img{max-height:96px}
}
@media(min-width:651px) and (max-width:900px){
 .zone-label-full{display:none}.zone-label-short{display:inline}
}
@media(max-width:650px){
 .zone-label-full{display:none}.zone-label-short{display:inline}
 .health-hub:has(.battle-center){grid-template-rows:50px 128px 50px;gap:4px 6px}
 .health-hub .player-plaque,.health-hub .player-plaque:last-child{height:128px}
 .player-plaque,.player-plaque:has(.vitals:not(:empty)){--retained-card-height:60px}
 body .health-hub .player-plaque .player-snapshot,body.has-game:not(.in-tutorial) .health-hub .player-plaque .player-snapshot{padding:3px 6px}
 body .player-plaque .player-topline{gap:2px}
 body .player-plaque .player-identity{font-size:11px;gap:0 3px}
 body .player-plaque .player-topline .zone-counters{gap:2px}
 body .player-plaque .player-topline .zone-counter{min-height:18px;padding:0;font-size:9px;gap:1px}
 body .player-plaque .player-topline .zone-counter strong{font-size:12px;margin-left:1px}
 body .player-plaque .vitals,body.has-game:not(.in-tutorial) .player-plaque .vitals{height:20px;min-height:20px;max-height:20px;margin-top:2px}
 body .health-hub .player-plaque .board-lane,body.has-game:not(.in-tutorial) .health-hub .player-plaque .board-lane{margin:0 6px 4px;padding-top:6px}
 body .player-plaque .board-preview img,body.has-game:not(.in-tutorial) .player-plaque .board-preview img{max-height:60px}
 body .health-hub .battle-center .round-callout{padding:3px 8px}
 body.has-game .battle-center .round-callout .status-title{font-size:16px}
}
@media(max-width:700px){
 body .player-plaque .player-identity{gap:0 4px}
}
@media(forced-colors:active){.battle-center,.health-hub .combatant-vitals{background:Canvas;border-color:CanvasText}.battle-center .health-values .hp,.battle-center .health-values .shield-total{color:CanvasText}}

/* A physical play tray: three layered cards fit on tablets/desktops; phones keep one-card height. */
.played-panel{--play-strip-top:40px}
.played-panel.has-stacked-cards{--play-strip-top:4px}
body.has-game .play-strip,body.has-game:not(.in-tutorial) .play-strip{height:auto;min-height:calc(var(--played-face-width)*1039/744 + 64px);padding-top:var(--play-strip-top);padding-bottom:12px}
body.has-game .played-panel .effect-stack,body.has-game:not(.in-tutorial) .played-panel .effect-stack{--stack-step:36px;grid-auto-rows:var(--stack-step);padding-bottom:calc(var(--played-width)*1039/744 + 12px - var(--stack-step));max-height:calc(var(--played-face-width)*1039/744 + 88px);overscroll-behavior-y:contain;scroll-snap-type:y proximity}
.effect-stack .stack-layer{scroll-snap-align:start}
.effect-stack.has-hidden-layers{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%)}
.stack-label{z-index:4;top:13px;left:auto;right:0;width:auto;max-width:4em;height:16px;min-height:0;line-height:14px;padding:1px 5px 1px 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:9px;font-weight:750;color:#5E4A29;background:#F2DF9D;border:1px solid #B99C5E;border-radius:1px;clip-path:polygon(6px 0,100% 0,100% 100%,6px 100%,0 50%);filter:drop-shadow(1px 2px 1px #4B402733)}
@media(max-width:700px){
 .battle-table{--played-face-width:clamp(96px,30vw,114px)}
 body.has-game .played-panel{--play-strip-top:30px;transform:none}
 body.has-game .played-panel.has-stacked-cards{--play-strip-top:0}
 body.has-game .play-strip,body.has-game:not(.in-tutorial) .play-strip{height:calc(var(--played-face-width)*1039/744 + 64px);min-height:calc(var(--played-face-width)*1039/744 + 64px);max-height:calc(var(--played-face-width)*1039/744 + 64px);padding-bottom:8px}
 body.has-game .played-panel .effect-stack,body.has-game:not(.in-tutorial) .played-panel .effect-stack{--stack-step:30px;padding-bottom:calc(var(--played-width)*1039/744 + 12px - var(--stack-step));max-height:calc(var(--played-face-width)*1039/744 + 18px)}
}

/* Hand and choice rows advertise clipped cards on both sides and settle on whole cards. */
:is(.hand-grid,.choice-grid){scroll-snap-type:x mandatory;scroll-padding-inline:4px;overscroll-behavior-x:contain}
:is(.hand-grid,.choice-grid)>.card{scroll-snap-align:start;scroll-snap-stop:normal}
:is(.hand-grid,.choice-grid,.player-plaque .board,.player-plaque .vitals).has-hidden-left:not(.has-hidden-right){-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 100%);mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 100%)}
:is(.hand-grid,.choice-grid,.player-plaque .board,.player-plaque .vitals).has-hidden-right:not(.has-hidden-left){-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%)}
:is(.hand-grid,.choice-grid,.player-plaque .board,.player-plaque .vitals).has-hidden-left.has-hidden-right{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}

/* The play history uses the same two-sided clipping cue while it is scrolled. */
.played-panel.has-earlier-plays:not(.has-later-plays) .play-strip{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 100%);mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 100%)}
.played-panel.has-later-plays:not(.has-earlier-plays) .play-strip{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%)}
.played-panel.has-earlier-plays.has-later-plays .play-strip{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}

/* Tablet and desktop share one physical card scale and one precise top edge. */
@media(min-width:701px){
 .battle-table{--opponent-card-width:var(--played-face-width)}
 body.has-game .opponent-zone{padding-top:10px}
 body.has-game .opponent-zone .zone-heading h2{line-height:16px}
}
/* At desktop size the two 1:1 card scales also share the same top edge.
   Stacked plays keep their separate raised position for full-card visibility. */
@media(min-width:901px){
 body.has-game .played-panel:not(.has-stacked-cards){--play-strip-top:20px}
}

/* Keep one viewport-sized scene throughout the tablet draft sequence: coin
   toss, legendary selection, and the final reveal. The taller middle screen
   must not make `background-size:cover` recalculate against document height.
   The second query includes wide landscape tablets without changing laptops. */
@media(min-width:701px) and (max-width:1120px),(min-width:1121px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
 body[data-scene=draft],body[data-scene=battle]{position:relative;isolation:isolate;background:#F6E9CB}
 body[data-scene=draft]::before,body[data-scene=battle]::before,
 body[data-scene=draft]::after,body[data-scene=battle]::after{content:"";display:block!important;position:fixed;inset:0;width:100%;height:100lvh;pointer-events:none;transform:translateZ(0)}
 body[data-scene=draft]::before,body[data-scene=battle]::before{z-index:-2;background:linear-gradient(#fff7df22,#fff7df33),url(/scene-terrace.webp) center top/cover no-repeat,#F6E9CB}
 body[data-scene=draft]::after,body[data-scene=battle]::after{z-index:-1;background:linear-gradient(#fff7df33,#fff7df33),url(/scene-shrine.webp) center top/cover no-repeat;opacity:0;transition:opacity .22s ease-out}
 body[data-scene=draft]::after{opacity:1}
}
@media(min-width:701px) and (max-width:1120px) and (prefers-reduced-motion:reduce),(min-width:1121px) and (max-width:1366px) and (hover:none) and (pointer:coarse) and (prefers-reduced-motion:reduce){
 body[data-scene=draft]::after,body[data-scene=battle]::after{transition:none}
}

/* Keep the third-stage banner at the same vertical position as the journey
   progress shown immediately before it. JavaScript records that device-specific
   position so browser chrome and wrapped headings do not introduce a jump. */
@media(max-width:700px){
 .opening-progress{top:var(--opening-progress-mobile-top,154px)}
}

/* Keep both rows of legendary choices and their actions in the first mobile view. */
@media(max-width:700px){
 body[data-scene=draft] .draft-journey{gap:6px 10px;margin:2px auto 8px}
 body[data-scene=draft] .draft-journey .journey-title h1{font-size:23px;line-height:1.2;margin-bottom:3px}
 body[data-scene=draft] .draft-journey .journey-title p{line-height:1.35}
 body[data-scene=draft] .draft-panel{padding:0 0 8px}
 body[data-scene=draft] .draft-panel .draft-matchup{font-size:14px;line-height:1.35;margin:0 0 5px}
 body[data-scene=draft] .draft-panel .draft-coin-result{gap:6px;margin:0 auto 8px;padding:4px 9px;font-size:12px;line-height:1.3}
 body[data-scene=draft] .draft-panel .draft-coin-result img{width:25px;height:25px}
 body[data-scene=draft] .draft-panel .draft-heading{margin:0 0 7px}
 body[data-scene=draft] .draft-panel .draft-heading p{padding:5px 11px}
 body[data-scene=draft] .draft-grid{gap:14px 5px}
 body[data-scene=draft] .draft-grid .card{max-width:clamp(90px,30vw,118px)}
 body[data-scene=draft] .draft-grid .card>button.primary,
 body[data-scene=draft] .draft-grid .card>.pick-status{margin-top:2px}
}
@media(max-width:700px) and (max-height:680px){
 body[data-scene=draft] main{padding-bottom:0}
 body[data-scene=draft] .draft-journey{margin-bottom:4px}
 body[data-scene=draft] .draft-panel{padding-bottom:0}
 body[data-scene=draft] .draft-grid .card{max-width:clamp(82px,27vw,105px)}
}
@media(max-width:700px) and (max-height:620px){
 body[data-scene=draft] main{padding-top:6px}
 body[data-scene=draft] main{padding-bottom:0}
 body[data-scene=draft] .draft-journey .journey-title p{display:none}
 body[data-scene=draft] .draft-journey .journey-title h1{font-size:20px}
 body[data-scene=draft] .draft-journey .setup-progress>li{gap:1px;font-size:11px}
 body[data-scene=draft] .draft-journey .setup-progress>li>span{width:28px;height:28px}
 body[data-scene=draft] .draft-journey .setup-progress>li:not(:last-child)::after{top:13px}
 body[data-scene=draft] .draft-journey{gap:3px;margin-bottom:0}
 body[data-scene=draft] .battle-table,
 body[data-scene=draft] .draft-panel{padding-bottom:0}
 body[data-scene=draft] .draft-panel .draft-coin-result{margin-bottom:3px;padding-top:2px;padding-bottom:2px}
 body[data-scene=draft] .draft-grid .card{max-width:clamp(90px,25vw,94px)}
 body[data-scene=draft] .draft-grid{row-gap:8px}
}

/* Card inspection is a large, image-only view. Actions stay on the hand card. */
#card-dialog{inset:0;margin:auto;width:min(560px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 16px);box-sizing:border-box;padding:8px;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
#card-dialog .card-dialog-layout{display:flex;align-items:center;justify-content:center;gap:0}
#card-dialog .enlarged-face{width:min(520px,100%,calc(71.6dvh - 46px));max-width:none;flex:none;align-self:center;box-shadow:0 18px 55px #08181599}
#close-card-dialog{position:absolute;top:-12px;right:-12px;float:none;margin:0;width:44px;height:44px;border:1px solid #FFF9E8;border-radius:50%;background:#294C3F;color:#FFF9E8;box-shadow:0 4px 14px #08181588}
#card-hover-preview{display:block;width:min(300px,calc(100vw - 16px));max-height:calc(100dvh - 16px);box-sizing:border-box;padding:6px}
#card-hover-preview>img{display:block;width:100%;height:auto;max-height:calc(100dvh - 28px);aspect-ratio:744/1039;object-fit:contain}

/* Join the hand actions more tightly and give the discard target room to breathe. */
.hand-grid .card-buttons{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1px}
.hand-grid .card-buttons>.discard{padding-left:4px;padding-right:2px;text-indent:2px}

/* Close the paired actions by 3px without shrinking their touch targets. */
.hand-grid .card-buttons{gap:0}
.hand-grid .card-buttons>.discard{transform:translateX(-2px)}
/* Each battle hand-card gap is 3px tighter at its existing breakpoint. */
body.has-game:not(.in-tutorial) .hand-grid{gap:9px}
@media(max-width:900px){body.has-game:not(.in-tutorial) .hand-grid{gap:8px}}
@media(max-width:650px){body.has-game:not(.in-tutorial) .hand-grid{gap:7px}}

/* Mobile turn count sits in a shorter, less padded row. */
@media(max-width:650px){
 .health-hub:has(.battle-center){grid-template-rows:50px 128px 40px}
 body .health-hub .battle-center .round-callout{gap:0 8px;padding:1px 8px}
 body.has-game .battle-center .round-callout .turn-number{line-height:12px}
 body.has-game .battle-center .round-callout .status-title{line-height:1.1}
}
@media(max-width:360px){.health-hub:has(.battle-center){grid-template-rows:56px 168px 40px}}

/* Keep a seven-back shelf beside the play tray; counts never widen the table. */
.opponent-hand-count{display:none;position:absolute;top:8px;right:5px;z-index:2;min-width:28px;box-sizing:border-box;padding:3px 6px;border:1px solid #D8C687;border-radius:12px;background:#22483FEF;color:#FFF7DE;text-align:center;font-size:12px;font-weight:750;line-height:1.2;font-variant-numeric:tabular-nums;box-shadow:0 2px 7px #16382C88}
.opponent-hand-count.is-overflow{display:block}
@media(min-width:701px){
 .battle-table{--opponent-slot-width:calc(var(--opponent-card-width)*2.44 + 6px)}
 body.has-game:not(.in-tutorial) .opponent-row{grid-template-columns:var(--opponent-slot-width) minmax(0,1fr);column-gap:12px}
 body.has-game .opponent-row .card-backs{position:relative;box-sizing:border-box;width:var(--opponent-slot-width);max-width:100%;overflow:hidden}
}
@media(min-width:701px) and (max-width:900px){
 .battle-table{--opponent-slot-width:calc(var(--opponent-card-width)*2.08 + 6px)}
 body.has-game .opponent-row .card-back+.card-back{margin-left:calc(var(--opponent-card-width)*-.82)}
}
@media(max-width:700px){
 .battle-table{--opponent-card-width:70px}
 body.has-game .opponent-row{grid-template-columns:80px minmax(0,1fr);gap:6px}
 body.has-game .opponent-zone .opponent-heading-count{display:none}
 body.has-game .opponent-row .card-backs{position:relative;width:100%;max-width:100%;overflow:hidden}
 body.has-game .opponent-row .card-back:nth-child(n+2){display:none}
 body.has-game .opponent-hand-count{display:block}
}
@media(max-width:340px){.battle-table{--opponent-card-width:64px}}

/* END GENERATED V27 THEME */

.match-setup-settings{border-top:1px solid var(--line);margin-top:18px;padding-top:15px;display:grid;gap:11px}
.match-setup-settings h2{font-size:15px;margin:0}
.match-setup-settings label{display:grid;gap:5px;font-size:12px;color:var(--muted)}
.match-setup-settings select,.match-setup-settings input{width:100%;min-width:0}
.match-setup-settings .subtle{margin:0;font-size:11px;line-height:1.5}

/* Keep the special-status row even when empty, so retained cards do not jump. */
body .player-plaque .vitals,body.has-game:not(.in-tutorial) .player-plaque .vitals{display:flex;flex:none;flex-wrap:nowrap;align-items:center;height:22px;min-height:22px;max-height:22px;margin-top:3px;overflow-x:auto;overflow-y:hidden}
@media(max-width:650px){body .player-plaque .vitals,body.has-game:not(.in-tutorial) .player-plaque .vitals{height:20px;min-height:20px;max-height:20px;margin-top:2px}}

/* Hover inspection floats over its source card without moving neighboring cards. */
#card-hover-preview{width:min(320px,calc(100vw - 16px),70dvh);aspect-ratio:744/1039;height:auto;max-height:calc(100dvh - 16px);padding:0;border:0;border-radius:10px;background:transparent;box-shadow:none;overflow:visible;pointer-events:none}
#card-hover-preview>img{width:100%;height:100%;max-height:none;aspect-ratio:744/1039;object-fit:contain;border-radius:10px;box-shadow:0 18px 48px #08181588}