:root{color-scheme:dark;font-family:IBM Plex Mono,SFMono-Regular,monospace;background:radial-gradient(circle at top left,rgba(74,194,255,.16),transparent 32%),radial-gradient(circle at bottom right,rgba(255,122,138,.22),transparent 26%),linear-gradient(180deg,#081018,#0f1a26);color:#f5efe0}*{box-sizing:border-box}body{margin:0;min-height:100vh}button{font:inherit}#root{min-height:100vh}.app-shell{max-width:1480px;margin:0 auto;padding:24px}.hero-strip{display:flex;justify-content:space-between;gap:24px;align-items:start;margin-bottom:24px}.eyebrow{margin:0 0 8px;color:#7dc4ff;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem}h1{margin:0;font-size:clamp(2rem,5vw,4.75rem);line-height:.92}.subtitle{max-width:72ch;color:#c4d3df}.status-stack{display:grid;gap:12px;min-width:240px}.discord-badge,.turn-pill,.panel,.board-panel{border:1px solid rgba(125,196,255,.18);background:#080c12b8;box-shadow:0 12px 50px #0000003d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.discord-badge,.turn-pill{padding:12px 14px;border-radius:14px}.discord-connected{border-color:#69ffab80}.discord-unsupported{border-color:#ffcd6573}.playfield-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,.9fr);gap:20px}.startup-panel{display:grid;gap:20px;padding:22px;border:1px solid rgba(125,196,255,.2);border-radius:28px;background:radial-gradient(circle at 12% 12%,rgba(105,255,171,.1),transparent 28%),radial-gradient(circle at 86% 18%,rgba(255,205,101,.12),transparent 26%),#080c12b8;box-shadow:0 18px 70px #00000047}.hero-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.hero-picker-column{display:grid;gap:14px;padding:16px;border:1px solid rgba(196,211,223,.14);border-radius:22px;background:#ffffff09}.hero-picker-heading h2{margin:0;font-size:clamp(1.2rem,3vw,2rem)}.hero-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.hero-option{--card-class-fill: rgba(125, 196, 255, .14);--card-class-border: rgba(125, 196, 255, .4);--card-class-glow: rgba(125, 196, 255, .18);cursor:pointer;display:grid;gap:8px;min-height:96px;padding:14px;text-align:left;border:1px solid var(--card-class-border);border-radius:18px;background:linear-gradient(145deg,var(--card-class-fill),transparent),#ffffff09;box-shadow:inset 0 0 24px var(--card-class-glow);color:#f5efe0;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.hero-option:hover{transform:translateY(-1px)}.hero-option-selected{border-color:#69ffab;box-shadow:inset 0 0 0 1px #69ffab5c,0 0 28px #69ffab1f}.hero-option-name{font-weight:800}.hero-option-classes{display:flex;flex-wrap:wrap;gap:6px}.startup-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:14px;align-items:stretch}.startup-summary div{display:grid;gap:6px;padding:14px;border:1px solid rgba(196,211,223,.14);border-radius:18px;background:#080c1275}.startup-summary span,.startup-summary small{color:#9fb1c1}.startup-summary strong{color:#f5efe0}.board-panel,.panel{border-radius:24px}.board-panel{padding:18px}.phase-track{display:grid;gap:12px;margin-bottom:14px;padding:14px;border:1px solid rgba(125,196,255,.16);border-radius:18px;background:linear-gradient(90deg,rgba(105,255,171,.08),transparent 42%),#ffffff09}.phase-track>div:first-child{display:flex;justify-content:space-between;gap:16px;color:#c4d3df;font-size:.86rem}.phase-round{color:#f5efe0;font-weight:700}.phase-next{color:#ffcd65}.phase-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.phase-step{position:relative;min-height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#8ba0b2;font-size:.76rem;letter-spacing:.04em;text-align:center;text-transform:uppercase}.phase-step-complete{border-color:#69ffab66;color:#69ffab}.phase-step-active{border-color:#7dc4ff;background:#7dc4ff29;color:#f5efe0;box-shadow:0 0 24px #7dc4ff2e}.board-shell{width:100%;height:min(68vh,760px);min-height:440px;overflow:hidden;border-radius:18px;border:1px solid rgba(125,196,255,.2)}.controls-row{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.primary-button,.secondary-button,.card-button{cursor:pointer;border:1px solid rgba(255,255,255,.12);transition:transform .16s ease,border-color .16s ease,background .16s ease}.primary-button:hover,.secondary-button:hover,.card-button:hover{transform:translateY(-1px)}.primary-button,.secondary-button{border-radius:14px;padding:12px 16px}.primary-button{background:linear-gradient(135deg,#7dc4ff,#4f8cff);color:#05101a}.primary-button:disabled{cursor:not-allowed;opacity:.6}.secondary-button{background:#ffffff0a;color:#f5efe0}.sidebar{display:grid;gap:16px}.panel{padding:18px}.sidebar .panel{overflow:visible}.panel h2{margin:0 0 8px;font-size:1rem;letter-spacing:.04em;text-transform:uppercase}.panel-copy,.selection-copy{color:#c4d3df;margin:0 0 12px}.targeting-error{margin:-4px 0 12px;color:#ffcd65;font-size:.86rem}.hand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px;overflow:visible}.card-button{--card-class-fill: rgba(125, 196, 255, .14);--card-class-border: rgba(125, 196, 255, .4);--card-class-glow: rgba(125, 196, 255, .18);position:relative;display:grid;grid-template-rows:78px minmax(36px,auto) auto;gap:6px;min-height:178px;text-align:left;padding:10px;border-radius:16px;border-color:var(--card-class-border);background:linear-gradient(180deg,var(--card-class-fill),rgba(255,255,255,.035)),#ffffff08;box-shadow:inset 0 0 24px var(--card-class-glow);color:#f5efe0;overflow:visible;isolation:isolate}.card-button:hover,.card-button:focus-visible,.card-button:focus-within{z-index:20}.card-class-blaster{--card-class-fill: rgba(255, 107, 107, .2);--card-class-border: rgba(255, 107, 107, .58);--card-class-glow: rgba(255, 107, 107, .18)}.card-class-crusher{--card-class-fill: rgba(255, 159, 67, .2);--card-class-border: rgba(255, 159, 67, .58);--card-class-glow: rgba(255, 159, 67, .18)}.card-class-molt{--card-class-fill: rgba(77, 212, 172, .18);--card-class-border: rgba(77, 212, 172, .56);--card-class-glow: rgba(77, 212, 172, .16)}.card-class-nectar{--card-class-fill: rgba(255, 209, 102, .2);--card-class-border: rgba(255, 209, 102, .58);--card-class-glow: rgba(255, 209, 102, .16)}.card-class-shell{--card-class-fill: rgba(120, 166, 255, .2);--card-class-border: rgba(120, 166, 255, .58);--card-class-glow: rgba(120, 166, 255, .18)}.card-class-stalker{--card-class-fill: rgba(176, 118, 255, .2);--card-class-border: rgba(176, 118, 255, .58);--card-class-glow: rgba(176, 118, 255, .18)}.card-class-swarm{--card-class-fill: rgba(139, 212, 80, .18);--card-class-border: rgba(139, 212, 80, .56);--card-class-glow: rgba(139, 212, 80, .16)}.card-class-tanker{--card-class-fill: rgba(154, 164, 178, .18);--card-class-border: rgba(154, 164, 178, .56);--card-class-glow: rgba(154, 164, 178, .15)}.card-class-thinker{--card-class-fill: rgba(87, 199, 255, .19);--card-class-border: rgba(87, 199, 255, .58);--card-class-glow: rgba(87, 199, 255, .17)}.card-class-wing{--card-class-fill: rgba(255, 143, 199, .2);--card-class-border: rgba(255, 143, 199, .58);--card-class-glow: rgba(255, 143, 199, .17)}.card-selected{border-color:#7dc4ff;box-shadow:inset 0 0 0 1px #7dc4ff70}.compact-card-art{position:relative;display:block;min-height:78px;border:2px solid rgba(245,239,224,.7);border-radius:12px;background:radial-gradient(circle at 38% 35%,rgba(245,239,224,.62),transparent 28%),linear-gradient(135deg,var(--card-class-fill),rgba(8,16,24,.88));box-shadow:inset 0 -24px 34px #0810186b}.card-cost{position:absolute;top:-9px;right:-9px;width:30px;height:30px;display:grid;place-items:center;border:2px solid #ffef83;border-radius:999px;background:#ffcd40;color:#081018;font-weight:900;box-shadow:0 3px #08101857}.card-name{align-self:start;font-weight:700;line-height:1.08}.compact-stat-row{position:absolute;right:10px;bottom:10px;display:grid;grid-template-columns:repeat(2,max-content);gap:4px;align-items:center}.compact-stat{min-width:31px;min-height:24px;display:grid;place-items:center;color:#081018;font-size:.72rem;font-weight:900;line-height:1;text-shadow:none}.compact-stat-strength{border-radius:8px 8px 2px;background:#e8a23c}.compact-stat-health{border-radius:999px 999px 999px 3px;background:#ff5e72}.compact-stat-charge{border-radius:999px;background:#4dc4ff}.card-detail-popover{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:30;width:min(260px,calc(100vw - 36px));display:none;gap:8px;padding:14px;border:1px solid rgba(196,211,223,.28);border-radius:18px;background:#081018f7;box-shadow:0 20px 48px #00000075,inset 0 0 28px var(--card-class-glow);transform:translate(-50%);pointer-events:none}.card-detail-popover:after{content:"";position:absolute;left:50%;top:100%;width:14px;height:14px;background:#081018f7;border-right:1px solid rgba(196,211,223,.28);border-bottom:1px solid rgba(196,211,223,.28);transform:translate(-50%,-7px) rotate(45deg)}.card-button:hover .card-detail-popover,.card-button:focus-visible .card-detail-popover,.card-button:focus-within .card-detail-popover{display:grid}.card-detail-title{color:#f5efe0;font-size:1rem;font-weight:900;line-height:1.1}.stat-row,.token-row{display:flex;flex-wrap:wrap;gap:5px}.stat-chip,.display-token{width:max-content;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.04em;line-height:1;text-transform:uppercase}.stat-chip{padding:6px 8px;color:#081018}.stat-chip strong{font-size:.86rem}.stat-strength{background:#e8a23c}.stat-health{background:#ff5e72}.stat-charge{background:#4dc4ff}.display-token{padding:5px 7px}.tribe-token{background:#c4d3df1a;border:1px solid rgba(196,211,223,.24);color:#c4d3df}.class-token{background:var(--card-class-border);color:#081018}.class-blaster{background:#ff6b6b}.class-crusher{background:#ff9f43}.class-molt{background:#4dd4ac}.class-nectar{background:#ffd166}.class-shell{background:#78a6ff}.class-stalker{background:#b076ff}.class-swarm{background:#8bd450}.class-tanker{background:#9aa4b2}.class-thinker{background:#57c7ff}.class-wing{background:#ff8fc7}.keyword-token{color:#081018}.keyword-anti-hero{background:#e84a72}.keyword-strikethrough{background:#9a6ef0}.keyword-double-strike{background:#ff8a2e}.keyword-deploy{background:#5fe0a6}.keyword-bullseye{background:#e8c838}.keyword-deadly{background:#7ed84a}.keyword-frenzy{background:#ff5a3c}.keyword-overshoot{background:#ff74b0}.keyword-splash-damage{background:#46c8e0}.keyword-armored{background:#8a9ac0}.keyword-untrickable{background:#6e7be0}.keyword-healthstrength{background:#c8d24a}.keyword-ufo{background:#e85ed8}.card-charge,.card-keyword,.card-rules,.card-stats,.log-list{color:#c4d3df;font-size:.92rem}.card-charge,.card-keyword{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}.card-rules{font-size:.78rem;line-height:1.25}.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}.log-list{display:grid;gap:8px}.log-list p{margin:0}.scope-list{margin:0;padding-left:18px;color:#c4d3df;display:grid;gap:8px}.catalog-panel{border-color:#7dc4ff38}.catalog-list{display:grid;gap:10px}.catalog-card{display:grid;gap:8px;padding:12px;border:1px solid rgba(196,211,223,.14);border-radius:14px;background:#ffffff09}.catalog-card div:first-child,.catalog-card-stats{display:flex;justify-content:space-between;gap:8px}.catalog-card span,.catalog-card-stats{color:#c4d3df;font-size:.84rem}.catalog-card-stats{flex-wrap:wrap}.catalog-card-tribes{display:flex;flex-wrap:wrap;gap:5px}.runtime-panel{border:1px solid rgba(247,201,72,.3);border-radius:18px;background:#080c1294;color:#f5efe0;padding:14px 16px}.runtime-panel summary{cursor:pointer;color:#f7c948;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.runtime-grid{display:grid;gap:10px;margin:14px 0 0}.runtime-grid div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px}.runtime-grid dt{color:#7dc4ff}.runtime-grid dd{margin:0;color:#c4d3df;overflow-wrap:anywhere}@media (max-width: 1024px){.playfield-layout,.hero-picker-grid{grid-template-columns:1fr}}@media (max-width: 720px){.app-shell{padding:16px}.hero-strip,.controls-row,.startup-summary{grid-template-columns:1fr;flex-direction:column}.board-shell{height:58vh;min-height:360px}}