@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0c1117;--panel:#141c25;--gold:#cfb57a;--muted:#9aa9b7;--line:#33404b;--accent:#69baf5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 5%,#26344455,transparent 65%),var(--bg);color:#e9e9e3;font:14px/1.5 Inter,Segoe UI,sans-serif;min-height:100vh}button,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#1c2732;padding:10px 16px;border-radius:5px;transition:background .16s,transform .16s,border-color .16s}button:hover:not(:disabled){border-color:var(--gold);background:#283440}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #f3d59a;outline-offset:4px}button:disabled{opacity:.38;cursor:not-allowed}.primary{background:var(--gold);color:#14171b;font-weight:700;border-color:var(--gold)}.primary:hover:not(:disabled){background:#e4cd9a}header{padding:22px 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #35404a88;background:#10151bde}.brand{display:flex;align-items:center;gap:14px;color:#ead8b5;text-decoration:none;font:600 19px Cinzel,Georgia,serif;letter-spacing:2px}.brandmark{font-size:36px}.brand small{display:block;font:9px Inter,sans-serif;letter-spacing:3.1px;color:var(--muted);margin-top:3px}nav{display:flex;gap:10px;align-items:center}.chip,.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold)}.chip{border:1px solid #4b4b40;padding:7px 12px;border-radius:30px}main{max-width:1600px;margin:auto;padding:32px 4%}h1,h2,h3{font-family:Cinzel,Georgia,serif;font-weight:500;line-height:1.25}h1{font-size:48px;margin:12px 0}h2{font-size:25px}p{color:var(--muted)}.intro{display:flex;align-items:end;justify-content:space-between;margin:16px 0 30px}.intro p{max-width:570px}.selection-note{border-left:2px solid var(--gold);padding-left:18px;font-size:13px}.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.hero-card{position:relative;text-align:left;padding:24px;border:1px solid #34414b;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,#131b24),#11171e);border-radius:8px;overflow:hidden;min-height:285px}.hero-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 30px color-mix(in srgb,var(--accent) 12%,transparent)}.hero-card h2{margin:10px 0 4px;font-size:27px}.hero-card .sigil{position:absolute;right:24px;top:15px;font:90px Georgia;color:var(--accent);opacity:.22}.hero-card .faction{color:var(--accent);font-size:10px;letter-spacing:2px;text-transform:uppercase}.hero-card .hp{color:var(--accent);float:right}.hero-card p{font-size:12px;max-width:85%;margin:8px 0}.hero-card strong{color:#d4dce2}.hero-card footer{display:flex;gap:8px;margin-top:20px}.hero-card button{padding:7px 12px;font-size:12px}.select-bar{display:flex;align-items:center;justify-content:space-between;padding:20px 0;position:sticky;bottom:0;background:#0c1117ef;backdrop-filter:blur(10px);z-index:2;border-top:1px solid var(--line);margin-top:25px}.select-bar strong{color:var(--gold)}.board-layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:24px}.arena{border:1px solid #3b454d;background:radial-gradient(ellipse at center,#23344355,transparent),#101820;border-radius:12px;overflow:hidden;position:relative}.hero-strip{padding:18px 22px;display:flex;align-items:center;gap:18px;background:#131c25b5;border-bottom:1px solid #34424e}.hero-strip h2{margin:0;font-size:21px}.avatar{display:grid;place-items:center;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,#111820);border-radius:50%;width:58px;height:58px;color:var(--accent);font:38px Georgia}.hero-info{flex:1}.hero-info small{color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;font-size:9px}.stats{display:flex;gap:16px;align-items:center}.stat{font-size:21px;font-weight:600}.stat small{display:block;font-size:9px;color:var(--muted);font-weight:400;text-transform:uppercase;letter-spacing:1px}.health{color:#ec9d9c}.energy{color:#82c4ef}.shield{color:#d4c596}.battlefield{min-height:110px;padding:16px 22px;display:flex;gap:10px;flex-wrap:wrap}.battlefield.enemy{border-bottom:1px solid #394650}.lane-label{font-size:9px;color:#6c7c8b;letter-spacing:2px;text-transform:uppercase;width:100%}.empty{color:#697887;font:italic 13px Georgia;align-self:center}.permanent{position:relative;border:1px solid #526472;background:#1c2a35;padding:10px 12px;text-align:left;min-width:135px;border-radius:5px}.permanent b{font:14px Georgia;display:block}.permanent small{display:block;font-size:10px;color:#9faebc}.permanent.ready{border-color:#95bb95}.permanent.selected{outline:2px solid var(--gold)}.permanent.artifact{border-color:#82724f;background:#27261f}.turn-ribbon{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-top:1px solid #3a4a57;border-bottom:1px solid #3a4a57;background:#23324288}.turn-ribbon strong{font:15px Cinzel,Georgia;color:var(--gold)}.turn-ribbon span{font-size:11px;color:var(--muted)}.hand-zone{margin-top:22px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-head h3{font-size:16px;letter-spacing:1px;margin:0}.section-head small{font-size:10px;color:var(--muted)}.card-row{display:flex;gap:12px;overflow-x:auto;padding:3px 3px 18px}.card{flex:0 0 166px;min-height:230px;border:1px solid #5b6772;border-radius:8px;background:linear-gradient(155deg,#273746,#16212b);padding:12px;text-align:left;display:flex;flex-direction:column;position:relative}.card:hover:not(:disabled){transform:translateY(-3px)}.card.selected{outline:2px solid var(--gold)}.card .cost{position:absolute;top:9px;left:9px;border:1px solid #a9c6dd;background:#213b50;border-radius:50%;height:26px;width:26px;display:grid;place-items:center;font-weight:700}.card .card-symbol{height:72px;display:grid;place-items:center;font:45px Georgia;color:var(--accent);background:repeating-conic-gradient(from 15deg at 50% 50%,transparent 0 44deg,#9eb7cc0a 44deg 45deg);border-bottom:1px solid #657b8b55;margin-bottom:9px}.card .type{font-size:8px;text-transform:uppercase;letter-spacing:2px;color:var(--gold)}.card b{font:16px/1.2 Georgia;display:block;margin:5px 0 8px}.card p{font:12px/1.4 Georgia;color:#c1ccd4;margin:0 0 10px}.card .bottom{margin-top:auto;font-size:10px;color:#b5c5cf}.sidebar{display:flex;flex-direction:column;gap:15px}.panel{background:#151e27;border:1px solid #35424f;padding:18px;border-radius:8px}.panel h3{font-size:15px;margin:0 0 12px}.power{width:100%;text-align:left}.power b{display:block;font-family:Georgia;font-size:16px}.power small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.zones button{padding:8px 3px;font-size:10px}.zones b{display:block;font-size:18px}.log{max-height:280px;overflow:auto;font-size:11px}.log div{padding:8px 0;border-bottom:1px solid #2d3944;color:#a6b5c2}.log div:first-child{color:#e0cfaa}.market{margin-top:25px}.market .card{min-height:210px;flex-basis:155px}.market .card-symbol{height:45px}.prompt{color:var(--gold);font-size:13px;min-height:20px;margin-bottom:12px}.actions{display:flex;gap:8px}.actions button{flex:1}.notice{font-size:10px;color:#8d9baa;margin-top:15px}.veil{position:fixed;inset:0;z-index:10;background:radial-gradient(ellipse at center,#293b4a,#0b1016 70%);display:grid;place-items:center;text-align:center;padding:30px}.veil h1{font-size:45px}.veil .seal{font:110px Georgia;color:var(--gold);opacity:.65}.veil p{max-width:430px;margin:15px auto 28px}dialog{background:#17212b;color:#e3e8eb;border:1px solid #61717f;border-radius:12px;max-width:760px;width:92%;padding:28px;max-height:85vh}dialog::backdrop{background:#05090ee8;backdrop-filter:blur(6px)}dialog h2{margin-top:0}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}dialog p,dialog li{font-size:13px;color:#b8c4cd}details{border-bottom:1px solid #38434d;padding:12px 0}summary{cursor:pointer;color:var(--gold)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:30;background:#322c24;border:1px solid #bda26d;padding:12px 22px;border-radius:6px;display:none}.targetable{border-color:var(--gold)!important;box-shadow:0 0 12px #d7bf7a33;cursor:pointer}.zone-list{display:flex;flex-wrap:wrap;gap:8px}.zone-list span{padding:8px;background:#24313d;border:1px solid #425365;border-radius:4px}.end-button{width:100%;padding:15px}.rule-tag{color:#d8b879!important;font-size:11px!important}@media(max-width:1050px){.board-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr}.hero-grid{grid-template-columns:repeat(2,1fr)}.chip{display:none}h1{font-size:38px}}@media(max-width:650px){header{padding:15px;gap:10px;align-items:flex-start}.brand{font-size:12px;letter-spacing:1px}.brand small{font-size:7px;letter-spacing:1px}.brandmark{font-size:28px}nav button{font-size:10px;padding:7px}nav{flex-wrap:wrap;justify-content:flex-end}.intro{display:block}.selection-note{display:none}.hero-grid{grid-template-columns:1fr}.hero-card{min-height:240px}.stats{gap:8px}.stat{font-size:16px}.hero-strip{padding:14px;gap:10px}.avatar{width:40px;height:40px;font-size:28px}.hero-strip h2{font-size:16px}.hero-info small{font-size:8px}.sidebar{display:flex}.select-bar{gap:10px;font-size:11px}.card{flex-basis:153px}.turn-ribbon{padding:12px}.turn-ribbon span{font-size:9px}main{padding:20px 4%}h1{font-size:32px}}

.board-layout>div,.hero-info{min-width:0}.arena{min-width:0}
@media(max-width:1050px){.board-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.hero-strip{flex-wrap:wrap}.hero-strip .hero-info{flex:1;min-width:130px}.hero-strip .stats{width:100%;justify-content:flex-end;border-top:1px solid #33414d;padding-top:8px}.stats .stat{min-width:48px}.section-head{gap:10px}.section-head small{max-width:55%;text-align:right}.turn-ribbon{gap:10px}.battlefield{min-height:90px}.hero-card p{max-width:100%}}

.card:disabled{opacity:.62}

.hp-bar{display:block;height:10px;width:100%;max-width:350px;margin-top:9px;overflow:hidden;border:1px solid #6b807252;border-radius:20px;background:#080d12;box-shadow:inset 0 1px 4px #0008}.hp-bar .hp-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#39785c,#8ac79c);box-shadow:0 0 9px #79c99144;transition:width .25s ease}.hp-bar-small{height:6px;max-width:none;margin:7px 0}.hero-info .hp-bar{min-width:80px}@media(prefers-reduced-motion:reduce){.hp-bar .hp-fill{transition:none}}


.shield-track{display:block;height:7px;width:100%;max-width:350px;margin-top:5px;overflow:hidden;border:1px solid #5b8fba66;border-radius:20px;background:repeating-linear-gradient(110deg,#142332 0 7px,#1b3044 7px 8px)}.shield-track .shield-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3475ae,#9cdbff);box-shadow:0 0 8px #81caff66;transition:width .25s ease}.shield-track-small{height:5px;margin:4px 0 7px}.stat.shield{color:#9cdbff}@media(prefers-reduced-motion:reduce){.shield-track .shield-fill{transition:none}}

/* Resource colors stay consistent across factions and remaining values. */
:root{--hp-color:#8ac79c;--shield-color:#9cdbff;--energy-color:#f18b8b}.health,.stat.health,.hero-card .hp{color:var(--hp-color)}.shield,.stat.shield{color:var(--shield-color)}.energy,.stat.energy{color:var(--energy-color)}.energy-track{display:block;height:7px;width:100%;max-width:350px;margin-top:5px;overflow:hidden;border:1px solid #b55e6466;border-radius:20px;background:repeating-linear-gradient(110deg,#301a23 0 7px,#42232d 7px 8px)}.energy-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ac424c,var(--energy-color));box-shadow:0 0 8px #ed7c8344;transition:width .25s ease}.card .cost{color:var(--energy-color);border-color:#b56e76;background:#3a222b}@media(prefers-reduced-motion:reduce){.energy-fill{transition:none}}

.mode-switch{display:flex;gap:8px;margin:18px 0}.mode-switch button[aria-pressed="true"]{border-color:var(--gold);background:#423b2c;color:#f0d69e}.ai-status{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1b2b3b;border:1px solid #7aaacb;border-radius:8px;padding:14px 25px;color:#cde9ff;z-index:12;pointer-events:none}

.energy-cap{font-size:.65em;font-weight:500}.stat.energy small{max-width:115px;line-height:1.4}

/* Portrait artwork is contained, preserving the user's entire composition. */
.card .card-symbol{position:relative;height:150px;flex-shrink:0;overflow:hidden;border-radius:4px}.card-symbol .card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#10171e}.market .card .card-symbol{height:130px}.hero-art{position:absolute;right:0;top:0;width:55%;height:100%;object-fit:cover;opacity:.3;mask-image:linear-gradient(to left,#000,transparent);pointer-events:none}.hero-card>*:not(.hero-art){position:relative}.hero-card .sigil{position:absolute}.avatar{position:relative;overflow:hidden;flex-shrink:0}.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}.deck-art{display:block;max-width:100%;max-height:360px;margin:15px auto;object-fit:contain;border-radius:5px}.artwork-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.artwork-grid button{padding:8px;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:center}.artwork-grid img{width:100%;aspect-ratio:2/3;object-fit:contain;background:#0c1117;border-radius:4px}.artwork-grid span{font:14px Georgia}.artwork-full{display:block;max-height:64vh;max-width:100%;margin:auto;object-fit:contain;border-radius:6px}@media(max-width:650px){.artwork-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card .card-symbol{height:140px}}

/* Full-card art, with costs and readable rules layered above it. */
.card.has-art{isolation:isolate;overflow:hidden;min-height:320px;background:#121a23;border-color:#8f794d}.card.has-art .card-symbol{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:inherit;z-index:-2;background:#131b24;color:transparent}.card.has-art .card-symbol .card-art{object-fit:cover;background:#131b24}.card.has-art::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#090e1733 0%,#090e1700 30%,#090e17a8 48%,#090e17ed 72%,#090e17fa 100%)}.card.has-art .cost{z-index:2;box-shadow:0 2px 10px #0009;background:#391c25f2}.card.has-art .type{margin-top:148px;color:#f4d99f;text-shadow:0 1px 4px #000}.card.has-art>b{color:#fff4dc;text-shadow:0 2px 5px #000;font-size:17px}.card.has-art p{color:#f1eee6;text-shadow:0 1px 3px #000}.card.has-art .bottom{color:#e5d8b8;border-top:1px solid #d7c18c55;padding-top:7px}.market .card.has-art{min-height:320px}.market .card.has-art .card-symbol{height:100%}@media(max-width:650px){.card.has-art .card-symbol{height:100%}}


/* Astrolabe image layer: no oversized CSS variables or negative stacking. */
html,body{background:#08101d}
body{background-image:none}
body::before{display:none}
.page-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#08101d}
.page-backdrop>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.page-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06101e44,#07101d77)}
body>header,body>main{position:relative;z-index:1}
header{background:#0c1523e8;backdrop-filter:blur(10px)}
.panel{background:#101b2aef}.arena{background:linear-gradient(#101d2bec,#101824f5)}
.veil{background:#081321b8}

/* User-provided faction medallions on champion selection. */
.hero-card .sigil.has-logo{opacity:1;top:20px;right:20px;width:70px;height:70px;font-size:0;line-height:0;pointer-events:none}.faction-logo{display:block;width:100%;height:100%;object-fit:contain;border-radius:7px;box-shadow:0 3px 16px #0008}.hero-card:has(.faction-logo) h2{max-width:calc(100% - 76px)}@media(max-width:650px){.hero-card .sigil.has-logo{width:62px;height:62px}.hero-card:has(.faction-logo) h2{max-width:calc(100% - 66px)}}

/* Faction logos as subtle lower-right watermarks (60% transparent). */
.hero-card .sigil.has-logo{top:auto;right:18px;bottom:18px;opacity:.4;z-index:0}.hero-card:has(.faction-logo) h2{max-width:100%}.hero-card footer{z-index:1}
@media(max-width:650px){.hero-card .sigil.has-logo{top:auto;right:14px;bottom:14px}.hero-card:has(.faction-logo) h2{max-width:100%}}