/* The tabletop keeps the playmat framing and uses each location's hero artwork. */
:root{--cyan:#a4d9f3;--amber:#e5be79;--line:#304453}
body{background:#070f17}
body:before{background:radial-gradient(ellipse at 50% 0%,#203e5066,transparent 65%)}
.hero-art{min-height:420px;border:1px solid #47647488;border-radius:18px;background:linear-gradient(180deg,#08152233,#07142044),url('assets/playmat/middle_blue.webp') center/cover;box-shadow:0 25px 80px #0006;overflow:visible}
.hero-art:before{inset:10px;border:1px solid #c1d9e333;border-radius:11px;background:none}
.hero-card{width:min(70%,240px)}
.floating-note{left:-24px;bottom:22px;background:#0b1b27f0;border-color:#547788}
.game-header{max-width:1920px;height:62px;padding:10px 26px;border-bottom-color:#57708044}
.game-header .brand img{width:39px;height:39px}
.game-header .brand strong{font-size:16px;letter-spacing:.18em}
.game-header .brand span{font-size:8px;letter-spacing:.32em}
.game-header .header-nav button{font-size:11px;padding:7px 12px}
.game-shell{max-width:1920px;padding:13px 24px 24px}
.match-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(175px,.5fr);align-items:center;gap:20px;margin-bottom:13px}
.turn-banner{padding:0 0 0 11px;margin:0;border:0;border-left:2px solid #9dd8ef;background:transparent;border-radius:0;min-width:0}
.turn-banner.cpu{border-left-color:var(--amber)}
.turn-banner .status-title{font-size:13px;font-weight:600}
.turn-banner .status-title:before{display:none}
.turn-banner p{font-size:10px;line-height:1.5;margin-top:2px}
.turn-count{display:none}
.round-panel{padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;max-width:290px;min-width:220px}
.round-panel .round-number{font-size:10px;letter-spacing:.12em;margin:0;color:#a8bbc5}
.round-number strong{font-family:Georgia,serif;font-size:23px;font-weight:400;color:#ecf3f8;letter-spacing:0;margin-left:5px}
.round-number>span{font-size:10px;letter-spacing:0}
.round-dots{gap:5px}
.round-dot{height:17px;width:17px;font-size:9px;background:#162530}
.round-goal{flex-basis:100%;color:#97adb8;font-size:9px;text-align:center;letter-spacing:.04em}
.match-tools{justify-self:end;display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:10px;color:#99aeba;flex-wrap:wrap}
.match-tools b{color:#e9eff1;margin-left:3px}.match-tools i{font-style:normal;margin:0 7px;color:#4c6574}
.match-tools button{padding:6px 10px;font-size:10px;background:#10202b}
.orientation-hint{display:none}
.arena-layout{grid-template-columns:minmax(0,1fr) 262px;gap:16px;align-items:start}
.table-column{min-width:0}
.play-surface{padding:12px;border:1px solid #819ca454;border-radius:16px;background:linear-gradient(180deg,#131c24,#102331 55%,#0c1b28);box-shadow:0 0 0 4px #0c1b24,0 0 0 5px #34525e66,0 18px 70px #0005;position:relative;isolation:isolate}
.play-surface:before{content:'';position:absolute;inset:5px;border:1px solid #8eaaaf29;border-radius:11px;pointer-events:none;z-index:-1}
.player-panel{padding:9px 14px;border:1px solid #86c4e268;background:linear-gradient(90deg,#102332f2,#173549a6,#102332f2);border-radius:7px;gap:18px;min-height:54px;box-shadow:inset 0 0 0 3px #0a172450}
.player-panel.opponent{background:linear-gradient(90deg,#252722f2,#373326a6,#252722f2);border-color:#bb985d88;margin-bottom:10px}
.player-panel:not(.opponent){margin-top:10px}
.player-identity{flex:0 0 auto;min-width:112px}
.player-name{font-family:Georgia,serif;font-size:16px;font-weight:400;letter-spacing:.03em;line-height:1.2;white-space:nowrap}
.player-name .avatar{width:24px;height:24px;font-family:system-ui,sans-serif;font-size:8px;background:#24485d;border:1px solid #78b9d778}
.opponent .avatar{background:#4b402d;border-color:#c5a3697a}
.player-caption{display:block;color:#91b7c9;font-size:7px;letter-spacing:.2em;margin:3px 0 0 32px}
.opponent .player-caption{color:#bba678}
.resource-row{margin:0;flex:1;justify-content:center;gap:clamp(12px,2.2vw,35px);align-items:center;flex-wrap:wrap}
.resource{font-size:10px;gap:5px;white-space:nowrap}
.resource strong{font-size:12px;font-weight:550}
.pips{gap:4px}
.pip{width:7px;height:7px;border:1px solid #5a81944d;background:#223744}
.opponent .pip{background:#3b3a2c;border-color:#ae8e5e44}
.player-panel .opponent-info{font-size:9px;gap:10px;white-space:nowrap;color:#c1b293}
.card-backs{gap:0;padding-right:5px}
.card-back{width:13px;height:19px;background:url('assets/card-back.webp') center/cover;border-color:#8d7754;margin-right:-5px;transform:rotate(7deg)}
.score-number{font-size:28px;display:flex;align-items:center;gap:7px;min-width:62px;justify-content:flex-end;color:#b4e1f9}
.opponent .score-number{color:#f4d197}
.score-number small{font-size:7px;margin:0;letter-spacing:.12em}
.board-scroll{border-radius:7px;overflow-x:auto;overflow-y:hidden;outline-offset:3px}
.lanes{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* Stretch the middle row so long location names keep both entity rows aligned. */
.lane{display:grid;grid-template-rows:auto auto 1fr auto;background-color:#0b1c28;background-image:linear-gradient(180deg,#07131f22,#07131f33),var(--location-art);background-size:cover;background-position:center;border:1px solid #77939d66;border-radius:7px;box-shadow:inset 0 0 0 3px #0d1b24;min-width:0}
.lane-top{padding:6px 10px;min-height:31px;background:#0b1722;border-bottom-color:#9c886350;gap:5px}
.lane-number{font-size:8px;letter-spacing:.15em;white-space:nowrap}
.lane-number b{font-family:Georgia,serif;font-size:14px;font-weight:400;color:#c5d8de;margin-right:5px}
.control{font-size:8px;letter-spacing:.015em;padding:3px 6px;white-space:nowrap}
.control.you{background:#14384be8;color:#ace3ff}.control.npc{background:#423728e8;color:#f2cb83}
.field-zone{position:relative;background:linear-gradient(180deg,#06122010,#07121e38)}
.opponent-zone{border-bottom:1px solid #b0945d99;box-shadow:inset 0 2px 0 #cfaa6166}
.your-zone{border-top:1px solid #8cbed599;box-shadow:inset 0 -2px 0 #91cfea66}
.zone-label{padding:5px 9px 4px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:.13em;color:#b8e0f8;background:#0716229c;line-height:1.4;text-shadow:0 1px 3px #000}
.opponent-zone .zone-label{color:#f0d09a;background:#181911a8}
.zone-label>span:last-child{letter-spacing:.04em;opacity:.8}
.entity-zone,.entity-zone.empty{display:flex;align-items:flex-start;justify-content:flex-start;height:142px;min-height:142px;padding:8px;gap:7px;overflow:auto;scrollbar-width:thin;scrollbar-color:#8ba8b67a #0b18213d;scroll-snap-type:x proximity}
.entity-zone.empty{align-items:center;justify-content:center}
.empty-zone{color:#d0e1ed;font-size:9px;padding:8px 14px;border:1px solid #c3e8ff24;background:#07172772;border-radius:6px;backdrop-filter:blur(2px);text-shadow:0 1px 3px #000}
.empty-zone i{display:block;font-style:normal;font-size:26px;color:#bcd9ea88;line-height:1;margin-bottom:5px}
.opponent-zone .empty-zone{color:#efdbb4;background:#191b197d;border-color:#e6cf9e30}.opponent-zone .empty-zone i{color:#f0d29c88}
.unit{width:87px;flex:0 0 87px;min-height:0;padding:0;border:1px solid #9fc5d8b0;border-radius:5px;background:#0b1d2bf5;box-shadow:0 3px 10px #0007;scroll-snap-align:start;overflow:hidden}
.unit.enemy{border-color:#c6a46ea8;background:#22231ef5}
.unit.used{filter:none;background:#0b1b27f5}.unit.enemy.used{background:#22231ef5}
.unit.used .unit-portrait img{filter:saturate(.65) brightness(.84)}
.unit.selected{outline:2px solid #c1e8ff;outline-offset:0;box-shadow:0 0 15px #a5d9f955}
.unit-portrait{height:62px;position:relative;overflow:hidden;background:#122632}
.unit img{float:none;width:100%;height:121px;object-fit:cover;object-position:center top;margin:0;border-radius:0;transform:translateY(-13px);display:block}
.unit-state{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;background:#061524e8;font-size:7px;color:#b6e4fb;text-align:right;letter-spacing:.04em;line-height:1.35}
.enemy .unit-state{background:#24231be8;color:#f0ce91}.used .unit-state{color:#b8c1c9}
.unit-name{font-size:9px;padding:5px 5px 3px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-stats{padding:1px 5px 4px;gap:3px;font-size:8px;line-height:1.3;border:0}
.health-bar{height:2px;margin:0 5px 5px}
.gear-label{font-size:7px;padding:0 5px 4px;line-height:1.3}
.home-label{font-size:6px;left:3px;top:3px;padding:1px 3px;box-shadow:0 1px 4px #0008}
.world{min-height:88px;padding:9px 11px;border:0;background:#0a1925}
.world:before{opacity:1;background-image:linear-gradient(90deg,#09172370,#071523cc),var(--world-image);background-position:center 45%}
.world-button{gap:12px;min-width:0;min-height:68px}
.world-card-pair{position:relative;width:57px;height:64px;flex:0 0 57px}
.world-card-pair img{width:41px;height:57px;position:absolute;left:0;top:0;transform:rotate(-7deg);border-color:#b9c9c38a;box-shadow:0 2px 5px #0007}
.world-card-pair img+img{left:15px;top:5px;transform:rotate(7deg);border-color:#dbbb7d99}
.world-copy{min-width:0}
.world .realm{font-size:8px;letter-spacing:.03em;color:#a3c5d6;margin-bottom:3px}
.world h3{font-size:17px;color:#f0ede6;line-height:1.15}
.world .poi{font-size:9px;line-height:1.35;color:#afc3ce;margin-top:3px}
.world-inspect{display:block;font-size:7px;letter-spacing:.07em;text-transform:uppercase;color:#748c9c;margin-top:5px}
.hand-section{margin:8px 0 0;padding:8px 10px 2px;background:linear-gradient(0deg,#09141dd9,#102435a3);border:0;border-radius:5px;overflow:hidden}
.hand-heading{margin-bottom:5px}
.hand-heading h2{font-family:Georgia,serif;font-size:14px;letter-spacing:.02em;font-weight:400}
.hand-heading span{font:9px system-ui,sans-serif;color:#90aab9}
.hand{gap:9px;padding:5px 3px 8px;align-items:flex-start}
.hand-card{width:100px;flex-basis:100px;border-radius:6px;border-color:#8eafbf7a;box-shadow:0 3px 8px #0004;background:#102331}
.hand-card .art{height:76px;background:#0a1a25}
.hand-card .art img{height:140px;transform:translateY(-15px)}
.hand-card .name{font-size:9px;padding:6px 6px 3px}
.hand-card .card-meta{padding:0 6px 6px;font-size:8px}
.energy-badge{width:22px;height:22px;top:4px;left:4px;font-size:10px;background:#0c2030}
.hand-card.selected{box-shadow:0 0 0 2px #b0e2fa88;transform:translateY(-3px)}
.hand-card.artifact{border-color:#b69a6e8c}
.arena-layout>aside{min-width:0;position:sticky;top:12px}
.decision-panel{display:block;position:static;border:1px solid #64889a77;border-radius:10px;background:linear-gradient(150deg,#152a38f5,#0e1d29fa);box-shadow:0 6px 25px #0003}
.decision-header{padding:11px 14px;border-color:#536f7d55}.decision-header h3{letter-spacing:.07em;text-transform:uppercase;font-weight:500}
.decision-empty{padding:28px 20px;text-align:center}
.decision-empty .large-icon{display:block;font-size:39px;color:#9bcce388;margin-bottom:15px}
.decision-empty h3{font-family:Georgia,serif;font-weight:400;font-size:23px}
.decision-empty p{font-size:11px;line-height:1.8;color:#a6bdc9}
.decision-body{display:block;padding:14px}
.selected-preview{gap:11px;margin-bottom:14px}
.selected-preview img{width:70px;border-radius:4px;border:1px solid #b0c5ca55}
.selected-preview h3{font-size:22px;overflow-wrap:anywhere}
.selected-preview p{font-size:9px;line-height:1.6}
.detail-stats{display:grid;gap:5px;margin-bottom:10px}
.detail-stat{background:#091923b3;border-color:#506b7b55;padding:7px 2px}
.detail-stat b{font-family:Georgia,serif;font-weight:400;font-size:22px}
.detail-stat span{font-size:7px;letter-spacing:.08em}
.detail-line{font-size:10px;line-height:1.65;padding:6px 0}
.selection-hint{font-size:10px;line-height:1.75}
.action-tabs{gap:5px;margin-top:12px}.action-tabs button{font-size:9px;padding:6px 8px}
.action-options{display:flex;flex-direction:column;gap:7px}
.action-option{padding:10px;font-size:11px;background:#19374a;border-color:#6a9bb077;min-height:42px}
.action-option span small{font-size:9px}.cost{color:#b2e2fa}
.pass-button{font-size:10px;padding:8px;margin-top:14px;color:#a5bbc7}
.last-event{font-size:10px;background:#091923b3;border-color:#506a7d44;padding:12px 14px;line-height:1.65}
.info-card{display:block;margin-top:12px;border-color:#5c72834d;background:#0e202db3;padding:13px 14px}
.info-card h3{font-size:10px;color:#d7c397}.info-card p{font-size:10px;line-height:1.8}
.tutorial-hint{padding:8px 12px;font-size:11px;margin-bottom:12px;background:#282a20bb;border-color:#ab93574d}
.summary-card{padding:15px 18px;margin-bottom:14px;border-color:#77a2b488;background:linear-gradient(100deg,#163442,#122635)}
.summary-card h2{font-size:22px}.summary-card p{font-size:11px}.summary-card .scoring-chips{margin:10px 0 0}
.location-art-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}
.location-art-gallery figure{margin:0;background:#091923;border:1px solid #5e7d8e77;border-radius:8px;overflow:hidden;align-self:start}
.location-art-gallery img{display:block;width:100%;height:auto}
.location-art-gallery figcaption{padding:9px 11px;font-family:Georgia,serif;font-size:16px;line-height:1.35;color:#e8edf0}
.location-art-gallery figcaption span{display:block;margin-bottom:3px;font:8px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#9bb5c5}
@media(min-width:1600px){
 .game-shell{padding-left:32px;padding-right:32px}.arena-layout{grid-template-columns:minmax(0,1fr) 292px;gap:20px}
 .entity-zone,.entity-zone.empty{height:160px;min-height:160px;gap:10px;padding:10px}
 .unit{width:101px;flex-basis:101px}.unit-portrait{height:76px}.unit img{height:141px;transform:translateY(-16px)}
 .unit-name{font-size:10px}.unit-stats{font-size:9px}.hand-card{width:112px;flex-basis:112px}.hand-card .art{height:85px}
 .world{min-height:98px}.world h3{font-size:20px}.world .poi{font-size:10px}
}
@media(max-width:1099px){
 .game-header{padding:9px 16px}.game-shell{padding:12px 15px 20px}
 .arena-layout{grid-template-columns:minmax(0,1fr);gap:15px}
 .arena-layout>aside{position:static}.decision-body{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr);gap:20px}
 .decision-empty{padding:20px;text-align:left;display:grid;grid-template-columns:minmax(160px,.7fr) minmax(0,1fr);gap:4px 24px;align-items:center}
 .decision-empty .large-icon{display:none}.decision-empty .eyebrow{grid-column:1}.decision-empty h3{grid-column:1;grid-row:2;margin:0!important;font-size:22px}
 .decision-empty p{grid-column:2;grid-row:1/3}.decision-empty .pass-button{grid-column:2;margin-top:8px}
 .info-card{display:none}.match-toolbar{gap:12px;grid-template-columns:minmax(0,1fr) auto}.match-tools{grid-column:1/-1;justify-self:stretch;justify-content:space-between;border-top:1px solid #45617044;padding-top:7px}
 .match-tools button{padding:3px 8px}.player-panel{gap:12px}.resource-row{gap:15px}
}
@media(min-width:760px) and (max-width:1099px) and (orientation:landscape){
 .arena-layout{grid-template-columns:minmax(0,1fr) 216px;gap:12px}
 .play-surface{padding:8px}.lanes{gap:6px}.player-panel{padding:8px;gap:8px}
 .player-identity{min-width:80px}.player-name{font-size:13px}.player-name .avatar{display:none}.player-caption{margin-left:0;font-size:6px}
 .resource-row{gap:5px 10px}.resource{font-size:8px}.resource strong{font-size:10px}.player-panel .pips{display:none}
 .player-panel .opponent-info{font-size:8px}.card-backs{display:none}.score-number{min-width:42px;font-size:24px;gap:4px}.score-number small{font-size:6px}
 .lane-top{padding:5px 6px}.lane-number{font-size:7px;letter-spacing:.05em}.lane-number b{font-size:12px;margin-right:3px}.control{font-size:7px;padding:2px 4px}
 .world{padding:8px 6px;min-height:83px}.world-button{gap:7px;min-height:66px}.world h3{font-size:13px}.world .realm{font-size:7px}.world .poi{font-size:8px}.world-inspect{font-size:6px}
 .world-card-pair{width:34px;height:49px;flex-basis:34px}.world-card-pair img{width:31px;height:44px;transform:none}.world-card-pair img+img{display:none}
 .zone-label{font-size:6px;padding:5px 6px}.zone-label>span:last-child{display:none}.entity-zone,.entity-zone.empty{padding:6px;height:132px;min-height:132px;gap:6px}
 .unit{width:78px;flex-basis:78px}.unit-portrait{height:55px}.unit img{height:108px;transform:translateY(-12px)}.unit-name{font-size:8px}.unit-stats{font-size:7px}
 .empty-zone{font-size:8px;padding:7px}.empty-zone i{font-size:21px}
 .decision-body{display:block;padding:12px}.decision-empty{display:block;text-align:center;padding:23px 15px}.decision-empty h3{margin:10px 0!important;font-size:21px}.decision-empty p{font-size:10px}
 .selected-preview img{width:53px}.selected-preview h3{font-size:19px}.detail-stat b{font-size:19px}.detail-stat span{font-size:6px}
 .hand-heading>span{font-size:8px}.hand-card{width:89px;flex-basis:89px}.hand-card .art{height:63px}.hand-card .art img{height:125px}
 .hand-card .name{font-size:8px}.hand-card .card-meta{font-size:7px}
}
@media(max-width:699px){
 .hero-art{min-height:340px;margin-top:10px}.floating-note{left:-4px;bottom:14px}.hero-card{width:185px}
 .game-header{height:56px;padding:8px 12px}.game-header .brand img{width:32px;height:32px}.game-header .brand strong{font-size:11px;letter-spacing:.11em}.game-header .brand span{font-size:7px}
 .game-header .header-nav button{font-size:9px;padding:7px}.fullscreen-button{display:none}
 .game-shell{padding:10px 10px 18px}.match-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:8px}
 .round-panel{min-width:90px;max-width:112px;gap:4px}.round-panel .round-number{font-size:8px}.round-number strong{font-size:20px}.round-dots{gap:2px}.round-dot{width:11px;height:11px;font-size:7px}.round-goal{display:none}
 .turn-banner{padding-left:8px}.turn-banner .status-title{font-size:12px}.turn-banner p{font-size:9px}.match-tools{font-size:9px;padding-top:5px}.match-tools button{font-size:9px}
 .orientation-hint{display:block;font-size:9px;text-align:center;color:#a3b8c6;margin:8px 0 11px}
 .play-surface{padding:8px;border-radius:11px}.player-panel{min-height:60px;padding:8px;gap:6px}
 .player-identity{min-width:70px}.player-name{font-size:12px}.player-name .avatar{display:none}.player-caption{margin-left:0;font-size:6px;letter-spacing:.11em}
 .resource-row{flex-direction:row;justify-content:flex-start;gap:3px 9px;max-width:195px}.resource{font-size:8px;gap:3px}.resource strong{font-size:9px}.pips{display:none}
 .player-panel .opponent-info{display:none}.score-number{min-width:31px;display:block;font-size:25px;text-align:center}.score-number small{font-size:6px;margin-top:3px}
 .mobile-locations{display:flex;margin:0 0 8px;gap:5px}.mobile-locations button{padding:7px 4px;font-size:8px;background:#142635;border-color:#45647566}
 .lanes{grid-template-columns:repeat(3,minmax(255px,78vw));gap:8px}.lane{scroll-snap-align:start}.board-scroll{scroll-snap-type:x mandatory}
 .player-panel.opponent{margin-bottom:8px}.player-panel:not(.opponent){margin-top:8px}
 .entity-zone,.entity-zone.empty{height:140px;min-height:140px}.world{min-height:88px}.world h3{font-size:17px}
 .hand-section{padding:7px 2px 0;margin-top:6px}.hand-heading>span{display:none}.hand-heading h2{font-size:13px}.hand-heading h2 span{display:inline;font-size:9px}
 .hand-card{width:98px;flex-basis:98px}.hand-card .art{height:74px}
 .decision-body{display:block;padding:14px}.decision-empty{display:block;padding:20px}.decision-empty h3{margin:9px 0!important}.decision-empty p{font-size:11px}.decision-empty .pass-button{margin-top:12px}
 .selection-overview .detail-stats{display:grid}.selected-preview img{width:65px}.selected-preview h3{font-size:23px}.detail-stat span{font-size:7px}
 .action-options{display:flex}.action-option{min-height:44px;font-size:12px}.action-option span small{font-size:10px}
 .tutorial-hint{font-size:10px;padding:8px 10px}.summary-card{padding:13px}.summary-card h2{font-size:20px}.summary-card .row{gap:12px}
}
@media(orientation:landscape) and (max-height:600px){
 .game-header{height:43px;padding-top:5px;padding-bottom:5px}.game-header .brand img{height:28px;width:28px}.game-header .brand strong{font-size:12px}.game-header .brand span{display:none}
 .game-shell{padding-top:8px}.match-toolbar{margin-bottom:9px}.turn-banner p{font-size:9px}.match-tools{grid-column:auto;display:flex;padding:0;border:0}.match-tools>span{display:none}
 .match-toolbar{grid-template-columns:minmax(0,1fr) auto auto}.round-panel{min-width:210px;max-width:240px}.round-goal{display:none}
 .orientation-hint{display:none}.tutorial-hint{padding:6px 10px;font-size:10px}.player-panel{min-height:45px}.player-caption{display:none}
 .decision-empty{padding-top:18px;padding-bottom:18px}.decision-header{padding:9px 12px}
}