@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--ink:#080a12;--surface:#10131ed9;--rim:#31374e;--gold:#ddbd7e;--text:#e9e9f1;--muted:#9299b0;--solo-panel:#131722;--solo-border:#62627c;--solo-muted:#a5a7b9;--solo-seat:#292c43;--solo-active:#e9c38c;--solo-active-fg:#151829}
body{background:radial-gradient(ellipse at 47% -17%,#31345b 0,#121827 37%,#080911 70%);color:var(--text);font-family:Inter,system-ui,sans-serif}
#shell{max-width:1660px;padding:clamp(12px,2.1vw,32px)}
.ui-stack{gap:14px}.app-root{gap:19px}
.header{align-items:center;border-bottom:1px solid #7d6b483d;padding:0 0 22px;gap:20px}
.eyebrow{font-size:11px;color:var(--gold);font-weight:800;letter-spacing:.33em}
.heading{font:600 clamp(19px,2.1vw,32px)/1.2 Cinzel,Georgia,serif;color:#eee6de;letter-spacing:.015em;margin-top:7px}
.header-meta{align-items:flex-end;gap:6px}
.ui-badge{background:#222637;border:1px solid #43485c;color:#d9deeb;font-size:11px;letter-spacing:.02em;border-radius:7px;padding:6px 9px}
.phase-badge{border-color:#b99e5f;color:#e5cd8c;background:#41382455}
.ui-panel{background:linear-gradient(145deg,#171b28e8,#10131dF5);border:1px solid #3d4154;border-radius:12px;padding:14px 16px;box-shadow:0 10px 32px #0004}
.panel-title{color:#bbac97;font-size:10px;font-weight:800;letter-spacing:.18em;margin-bottom:13px}
.players-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:11px}
.players-row>.ui-panel{min-width:0}
.player-seat{background:linear-gradient(145deg,#191c2b,#0e111b);border-color:#414658}
.player-seat.own-seat{border-color:#bfa56d;box-shadow:inset 0 0 22px #c4a66a10}
.player-seat.current-seat{box-shadow:inset 0 0 1px 1px #bca66b,0 0 20px #c7aa5214}
.player-seat .panel-title{display:none}
.seat-name{font:600 14px Cinzel,serif;color:#e6e5ee}
.seat-stats{gap:5px;flex-wrap:wrap}.seat-stats .ui-badge{font-size:11px;padding:5px 7px}
.health{color:#f3a2a5;background:#4b222a42;border-color:#77424c}.mastery{color:#c0acfa;background:#30264f5c;border-color:#63518c}.pile{color:#b9c8df}.eliminated{color:#eeb7b7}
.seat-actions{gap:6px;margin-top:6px}.seat-actions .ui-button{font-size:10px;padding:6px 8px}
.market-panel{border-color:#736344;background:linear-gradient(160deg,#1f1d25,#10121c)}
.market-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;align-items:stretch}
.market-cards>.ui-card-wrap{min-width:0}
.hand-panel{background:linear-gradient(165deg,#172035,#11131e);border-color:#4d5674}
.hand-row{justify-content:center;gap:10px;align-items:stretch}
.played-row,.discard-row,.champions-row,.selection-row{gap:8px;align-items:flex-start}
.champions-row{margin-top:10px}
.champions-row .ui-card-wrap{width:115px}
.command-panel{background:#131725;border-color:#444b68}
.command-content{gap:12px}
.resource-row{gap:7px}.resource-row .ui-badge{font-size:13px;padding:8px 12px;font-weight:750}
.crystals{color:#e9d38c;border-color:#6f603c}.combat{color:#ffa3a0;border-color:#713e42}.shields{color:#8ee1e2;border-color:#3b696c}
.command-row{align-items:center;gap:10px}
.ui-button{border-radius:7px;background:#292d40;border:1px solid #555e7a;color:#e4e6f0;font-weight:700;padding:10px 14px;transition:background .13s,border-color .13s,transform .13s}
.ui-button:hover:not(:disabled){background:#383d59;border-color:#a4a7c4;transform:translateY(-1px)}
.ui-button:disabled{cursor:default;opacity:.48}
.primary{background:linear-gradient(#b69b6c,#96794a);border-color:#e1c48d;color:#11131a}
.primary:hover:not(:disabled){background:#d0b27b}
.end-turn{background:#342d3b;border-color:#837090;color:#e5d2ef;margin-left:auto}
.attack-button{background:#502c38;border-color:#9d5867;color:#ffd1d0}
.selection-panel{border-color:#bb935d;background:#31283a}
.selection-row{flex-wrap:wrap}
.ui-card-wrap.shard-card{width:clamp(112px,11vw,160px);max-width:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--faction-border,#65728a);background:#0c111d;border-radius:10px;overflow:hidden;position:relative;box-shadow:0 8px 18px #0007, inset 0 0 24px var(--faction-glow,#33445522);transition:transform .15s,box-shadow .15s}
.ui-card-wrap.shard-card.playable:hover{transform:translateY(-5px);box-shadow:0 12px 26px #000b,0 0 15px var(--faction-glow,#44558866)}
.ui-card-wrap.shard-card:focus-within{outline:2px solid #dec28a;outline-offset:3px}
.ui-card-wrap.shard-card.faction-neutral{--faction-border:#627288;--faction-glow:#5d667544;--faction:#9cabbd}
.ui-card-wrap.shard-card.faction-homodeus{--faction-border:#b48835;--faction-glow:#f5a83133;--faction:#efbd65}
.ui-card-wrap.shard-card.faction-order{--faction-border:#3c77c4;--faction-glow:#468def33;--faction:#8bb6ff}
.ui-card-wrap.shard-card.faction-undergrowth{--faction-border:#438d74;--faction-glow:#31be7f33;--faction:#75d9a7}
.ui-card-wrap.shard-card.faction-wraethe,.ui-card-wrap.shard-card.faction-underworld{--faction-border:#8e5cac;--faction-glow:#ac65e533;--faction:#d3a0fd}
.ui-card-wrap.shard-card.faction-outpost{--faction-border:#b24d58;--faction-glow:#e74c5833;--faction:#f499a0}
.shard-card .playing-card{height:173px;width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;white-space:normal;padding:8px 8px 10px;overflow:hidden;text-align:center;border:0;border-radius:0;background:linear-gradient(155deg,#222b3e 0%,#111727 47%,#151825 100%);color:#f1eff3;font:inherit}
.shard-card .playing-card:before{inset:0 0 auto;height:4px;background:var(--faction)}
.shard-card .playing-card:disabled{cursor:default;opacity:1}
.shard-card .card-crest{display:grid;place-items:center;font:700 36px Cinzel,serif;color:var(--faction);flex:1;text-shadow:0 2px 20px var(--faction-glow);opacity:.85}
.shard-card .card-title{font:700 12px/1.3 Cinzel,Georgia,serif;letter-spacing:.015em;min-height:31px;display:grid;place-items:center}
.shard-card .card-cost{position:absolute;top:8px;left:8px;border:1px solid #dec18d;background:#1e1a24ee;color:#f6dc98;border-radius:50%;width:25px;height:25px;font:800 12px/24px Inter,sans-serif}
.shard-card .card-caption{padding:8px 8px 9px;font-size:10px;line-height:1.4;text-align:center;color:#b5bace;min-height:60px;overflow-wrap:anywhere}
.shard-card .card-option{margin:0 7px 7px;font-size:10px;padding:7px}
.shard-card .card-options{display:grid;gap:0}
.shard-card.champion .playing-card,.shard-card.enemy-champion .playing-card{height:110px}
.shard-card.champion,.shard-card.enemy-champion{width:110px;font-size:10px}
.shard-card.champion .card-crest,.shard-card.enemy-champion .card-crest{font-size:20px}
.shard-card.exhausted{filter:saturate(.6);opacity:.75}
.shard-card.played,.shard-card.discard{opacity:.75}
.shard-card.empty-card{opacity:.5}
.hand-row .shard-card{width:clamp(120px,12.4vw,170px)}
.bottom-row{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}
.bottom-row>.ui-panel{min-width:0}
.discard-row{max-height:230px;overflow-y:auto;flex-wrap:wrap}
.discard-row .shard-card{width:96px}
.discard-row .playing-card{height:86px}
.discard-row .card-caption{font-size:9px;min-height:30px}
.discard-row .card-crest{font-size:18px}
.log-panel{max-height:330px;overflow-y:auto}
.log-line{font-size:11px;color:#a5aabc;border-bottom:1px solid #ffffff0a;padding:5px 0}
.hidden{display:none}
.waiting{font-size:16px;color:#c9bed1}
.lobby-panel{background:#161a29;border-color:#817558}
.lobby-panel h1{font-family:Cinzel,serif;color:#ebddc6;font-size:36px}
.confirm-popover{background:#222638;border-color:#b69d79}
@media(max-width:900px){.market-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.shard-card .playing-card{height:155px}.bottom-row{grid-template-columns:1fr}}
@media(max-width:650px){.players-row{grid-template-columns:repeat(2,minmax(0,1fr))}.market-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.ui-panel{padding:10px}.ui-card-wrap.shard-card{width:100%}.hand-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.shard-card .card-title{font-size:10px}.shard-card .playing-card{height:115px}.shard-card .card-crest{font-size:22px}.shard-card .card-caption{min-height:50px;font-size:9px}.command-row{gap:5px}.command-row .ui-button{font-size:11px;padding:8px}.header-meta{align-items:flex-start}.heading{font-size:19px}}