:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--ink: #111817;--pine: #19302b;--cream: #f5ecd7;--paper: #dfd2b7;--coral: #f48a68;--moss: #9bbf8a;--copper: #b96f4b;--violet: #a88ab7;--line: rgba(245, 236, 215, .22)}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{background:#0b1110;color:var(--cream);overflow-x:hidden}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:3px solid var(--coral);outline-offset:3px}#game-canvas{position:fixed;inset:0;z-index:-2;overflow:hidden}#game-canvas:after{content:"";position:fixed;inset:0;background:linear-gradient(90deg,#09100fd9,#09100f40 45%,#09100fa6),linear-gradient(0deg,rgba(9,16,15,.92),transparent 55%);pointer-events:none}#game-canvas canvas{display:block;max-width:100vw;max-height:100vh}#app{min-height:100vh}.topbar,.game-topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;letter-spacing:.13em;font-size:13px}.brand>span:last-child{display:flex;flex-direction:column;line-height:.95}.brand b{font-weight:500}.brand strong{color:var(--coral);font-size:15px}.brand-mark{width:34px;height:34px;display:grid;place-items:center;transform:rotate(45deg);border:2px solid var(--coral);border-radius:48% 52% 56% 44%;background:var(--pine);box-shadow:inset 0 0 0 4px #1b2422}.brand-mark i{width:8px;height:16px;border-radius:50%;background:var(--coral);box-shadow:0 0 16px var(--coral)}.connection{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#b9b9af;display:flex;align-items:center;gap:8px}.connection i{width:7px;height:7px;border-radius:50%;background:#846d65}.connection.online i{background:#a7d59a;box-shadow:0 0 10px #a7d59a}.lobby-shell,.waiting-shell{min-height:100vh;background:radial-gradient(circle at 70% 28%,transparent,rgba(6,12,11,.22) 40%,rgba(6,12,11,.66))}.lobby-grid{width:min(1180px,90vw);min-height:calc(100vh - 180px);margin:auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.7fr);gap:9vw;align-items:center;padding:56px 0}.intro{max-width:660px}.eyebrow{color:var(--coral);font-weight:700;letter-spacing:.22em;font-size:11px;margin:0 0 18px}.intro h1{font-family:Iowan Old Style,Baskerville,Georgia,serif;font-weight:500;font-size:clamp(58px,7vw,108px);line-height:.83;letter-spacing:-.045em;margin:0;text-shadow:0 5px 30px rgba(0,0,0,.32)}.intro h1 em{color:var(--coral);font-weight:500}.lede{max-width:590px;color:#d9d7cb;font-size:18px;line-height:1.65;margin:30px 0}.lore-note{display:flex;gap:15px;align-items:flex-start;border-left:1px solid var(--coral);padding-left:18px;color:#babdb5;font-size:13px;line-height:1.55}.lore-note span{color:var(--coral)}.lore-note p{margin:0}.lore-note b{color:var(--cream)}.lobby-card{background:#f5ecd7f5;color:var(--ink);padding:30px;border-radius:3px;box-shadow:0 30px 80px #0000006b,inset 0 0 0 1px #fff9}.lobby-card-head{display:flex;justify-content:space-between;border-bottom:1px solid #c8bca3;padding-bottom:16px;margin-bottom:25px;font-weight:700;font-size:12px;letter-spacing:.12em}.lobby-card-head small{color:#6f7169;font-weight:500;letter-spacing:0}.lobby-card label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;margin-bottom:8px;color:#5f645d}.lobby-card input{width:100%;height:50px;border:1px solid #bdb29c;background:#fffaf0;padding:0 15px;color:var(--ink);border-radius:2px}.primary,.secondary{border:0;min-height:51px;cursor:pointer;font-weight:700;letter-spacing:.04em;transition:transform .18s,background .18s}.primary:hover,.secondary:hover{transform:translateY(-2px)}.primary{width:100%;background:var(--coral);color:#16201d;margin-top:14px;padding:0 18px;display:flex;align-items:center;justify-content:space-between}.or{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:20px 0;color:#787970;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.or i{height:1px;background:#c8bca3}.join-row{display:grid;grid-template-columns:1fr 100px;gap:8px}.join-row input{letter-spacing:.25em;text-transform:uppercase;font-weight:700}.secondary{background:var(--pine);color:var(--cream)}.fineprint{color:#777970;font-size:10px;text-align:center;margin:18px 0 0}.how-strip{width:min(1180px,90vw);margin:auto;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:24px 0 30px;gap:40px}.how-strip>div{display:flex;gap:16px;color:#afb3aa;font-size:12px;line-height:1.4}.how-strip b{color:var(--coral);font-size:10px;letter-spacing:.12em}.how-strip strong{display:block;color:var(--cream);text-transform:uppercase;font-size:11px;letter-spacing:.12em}.waiting-shell{min-height:100vh}.waiting-card{position:relative;width:min(540px,90vw);margin:13vh auto 0;padding:70px 60px;text-align:center;background:#121b19e8;border:1px solid var(--line);overflow:hidden}.waiting-card h1{font-family:Iowan Old Style,Baskerville,Georgia,serif;letter-spacing:.18em;font-size:clamp(56px,9vw,86px);margin:0;color:var(--cream)}.waiting-card>p:not(.eyebrow){color:#bfc1ba;line-height:1.6}.waiting-card .text-button{border:0;background:none;color:#a5aaa3;text-decoration:underline;margin-top:16px;cursor:pointer}.orbit{position:absolute;border:1px solid rgba(244,138,104,.22);border-radius:50%;pointer-events:none}.orbit.one{width:400px;height:400px;left:-270px;top:-180px}.orbit.two{width:330px;height:330px;right:-200px;bottom:-200px}.game-shell{width:100vw;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 48%,#1018160d,#080d0ca3)}.game-topbar{height:58px;padding:0 24px;background:#0a100fc9;backdrop-filter:blur(8px)}.game-topbar .brand-mark{width:28px;height:28px}.game-topbar .brand{transform:scale(.86);transform-origin:left}.match-meta{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:.17em;color:#b5b7ae}.match-meta i{width:3px;height:3px;background:var(--coral);border-radius:50%}.icon-button{width:35px;height:35px;border:1px solid var(--line);background:#ffffff0d;border-radius:50%;cursor:pointer}.battlefield{min-height:calc(100vh - 58px);display:grid;grid-template-rows:minmax(190px,1fr) 60px minmax(330px,1.25fr);padding:10px max(18px,4vw) 16px}.player-zone{position:relative;min-height:0}.rival-zone{display:grid;grid-template-columns:150px 1fr 150px;align-items:center}.your-zone{display:grid;grid-template-columns:1fr;align-content:end}.player-ribbon{font-size:10px;letter-spacing:.14em;color:#cbc9be}.player-ribbon>div>span{display:block;margin-bottom:7px}.pips{display:flex;gap:5px}.pulse{width:10px;height:10px;border:1px solid rgba(245,236,215,.5);transform:rotate(45deg)}.pulse.full{background:var(--coral);border-color:var(--coral);box-shadow:0 0 10px #f48a68bf}.pulse.locked{opacity:.25}.core{border:0;background:none;color:inherit;display:flex;flex-direction:column;align-items:center;cursor:default;justify-self:center;z-index:2}.rival-core{grid-column:3;cursor:crosshair}.core-gem{width:62px;height:62px;display:grid;place-items:center;font-family:Iowan Old Style,Baskerville,Georgia,serif;font-size:26px;background:radial-gradient(circle at 35% 30%,#ffd0be,var(--coral) 38%,#783c37 75%);clip-path:polygon(50% 0,88% 18%,100% 60%,72% 100%,25% 94%,0 55%,15% 16%);filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}.core-name{margin-top:7px;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.13em}.core-meta{color:#aeb1a9;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.board-row{display:flex;justify-content:center;align-items:center;gap:clamp(8px,2vw,24px)}.rival-board{grid-column:2;grid-row:1}.your-board{min-height:125px}.empty-slot{width:clamp(82px,9vw,126px);aspect-ratio:1/.86;border:1px dashed rgba(245,236,215,.22);border-radius:50%;display:grid;place-items:center}.empty-slot i{width:6px;height:6px;border-radius:50%;background:#f5ecd72e;box-shadow:0 0 0 12px #f5ecd706}.guardian{position:relative;border:2px solid rgba(245,236,215,.65);padding:0;width:clamp(82px,9vw,126px);aspect-ratio:.86/1;background:#242b29;border-radius:46% 46% 15px 15px;overflow:visible;cursor:default;box-shadow:0 9px 20px #00000059;transition:transform .18s,filter .18s}.guardian img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.guardian-shade{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(transparent 45%,#090e0deb)}.guardian-name{position:absolute;left:6px;right:6px;bottom:20px;font-size:clamp(8px,.75vw,11px);font-weight:700;text-shadow:0 2px 3px #000}.stat{position:absolute;bottom:-10px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-weight:700;border:2px solid var(--cream);background:var(--pine)}.stat.power{left:-9px}.stat.vitality{right:-9px;background:#9f4f43}.ready-label{position:absolute;top:-9px;left:50%;transform:translate(-50%);border:1px solid var(--line);padding:2px 7px;background:#17221f;border-radius:10px;font-size:7px;letter-spacing:.11em}.anchored{filter:saturate(.4) brightness(.75)}.guardian.selectable{cursor:pointer}.guardian.selectable:hover,.guardian.selected{transform:translateY(-8px);filter:brightness(1.14)}.guardian.selected{box-shadow:0 0 0 4px var(--coral),0 12px 30px #000}.tone-moss{--tone:#9bbf8a}.tone-copper{--tone:#b96f4b}.tone-violet{--tone:#a88ab7}.tone-coral{--tone:#f48a68}.turn-belt{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.log{display:flex;flex-direction:column;min-width:0}.log small{color:var(--coral);font-size:8px;letter-spacing:.15em}.log span{font-family:Iowan Old Style,Baskerville,Georgia,serif;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d5d2c7}.turn-stone{display:flex;align-items:center;gap:9px;padding:0 22px;font-size:9px;letter-spacing:.14em}.turn-stone i{width:9px;height:9px;transform:rotate(45deg);border:1px solid #989a91}.turn-stone.yours i{background:var(--coral);border-color:var(--coral);box-shadow:0 0 10px var(--coral)}.end-turn{justify-self:end;padding:10px 14px;border:1px solid var(--coral);background:#1a201ecc;color:var(--cream);font-size:9px;font-weight:700;letter-spacing:.12em;cursor:pointer}.end-turn span{color:var(--coral);margin-left:8px}.end-turn:disabled{opacity:.3;cursor:default}.you-line{display:flex;align-items:center;justify-content:space-between;position:absolute;left:0;right:0;bottom:70px;pointer-events:none}.you-line .core{align-items:flex-start}.you-line .core-gem{width:52px;height:52px}.you-line .core-name,.you-line .core-meta{padding-left:3px}.energy{text-align:right}.energy>span{display:block;font-size:9px;letter-spacing:.13em;margin-bottom:8px}.energy b{color:var(--coral)}.energy .pips{justify-content:flex-end}.hand{display:flex;justify-content:center;align-items:flex-end;gap:8px;height:158px;padding-top:15px}.hand-card{position:relative;width:clamp(88px,9.2vw,126px);height:clamp(130px,14vw,180px);border:2px solid var(--paper);border-radius:11px;padding:4px;background:#1b2522;color:var(--cream);box-shadow:0 8px 20px #00000070;overflow:visible;transition:transform .18s,filter .18s;cursor:default}.hand-card.playable{cursor:pointer}.hand-card.playable:hover{transform:translateY(-18px) rotate(-1deg);z-index:5;box-shadow:0 18px 30px #000}.hand-card:disabled{filter:grayscale(.5) brightness(.62)}.card-cost{position:absolute;z-index:3;top:-8px;left:-8px;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:var(--tone);border:2px solid var(--cream);color:#17201e;font-weight:700}.card-art{display:block;width:100%;height:56%;overflow:hidden;border-radius:7px 7px 2px 2px}.card-art img{width:100%;height:100%;object-fit:cover}.card-copy{display:flex;flex-direction:column;padding:5px 4px 0;text-align:center}.card-copy strong{font-family:Iowan Old Style,Baskerville,Georgia,serif;font-size:clamp(10px,1vw,14px);line-height:1}.card-copy small{color:var(--tone);font-size:6px;letter-spacing:.16em;margin:3px 0}.card-copy em{font-style:normal;font-size:clamp(7px,.65vw,9px);color:#d0cfc7;line-height:1.22}.card-stats{position:absolute;left:4px;right:4px;bottom:3px;display:flex;justify-content:space-between}.card-stats b{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#233a34;border:1px solid var(--paper);font-size:10px}.card-stats b:last-child{background:#9f4f43}.result{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#080d0cc7;backdrop-filter:blur(10px)}.result>div{width:min(520px,90vw);text-align:center;padding:55px;background:var(--cream);color:var(--ink)}.result h2{font-family:Iowan Old Style,Baskerville,Georgia,serif;font-size:42px;margin:0}.result .primary{justify-content:center}#toast{position:fixed;z-index:50;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--cream);color:var(--ink);padding:12px 18px;border-left:4px solid var(--coral);box-shadow:0 12px 30px #000;font-size:12px;transition:.2s ease}.show{opacity:1!important;transform:translate(-50%)!important}@media(max-width:760px){.topbar{height:64px;padding:0 18px}.lobby-grid{grid-template-columns:1fr;gap:35px;padding:45px 0}.intro h1{font-size:62px}.lede{font-size:16px}.lobby-card{padding:23px}.how-strip{grid-template-columns:1fr;gap:18px}.battlefield{padding:4px 8px 8px;grid-template-rows:minmax(180px,.85fr) 48px minmax(320px,1.2fr)}.game-topbar{padding:0 10px}.match-meta span:first-child{display:none}.rival-zone{grid-template-columns:58px 1fr 58px}.player-ribbon{transform:rotate(-90deg)}.core-gem{width:49px;height:49px;font-size:21px}.core-name{font-size:8px;max-width:58px;overflow:hidden;text-overflow:ellipsis}.core-meta{display:none}.board-row{gap:8px}.guardian,.empty-slot{width:clamp(73px,24vw,96px)}.turn-belt{grid-template-columns:1fr auto}.log{display:none}.turn-stone{padding:0 6px}.end-turn{padding:8px}.your-board{min-height:106px}.you-line{bottom:88px}.energy .pulse:nth-child(-n+6){width:8px;height:8px}.hand{justify-content:flex-start;overflow-x:auto;height:180px;padding:26px 34px 5px 24px;scrollbar-width:none}.hand-card{flex:0 0 105px;height:154px}.hand-card+.hand-card{margin-left:-20px}.hand-card.playable:hover{transform:translateY(-8px)}.waiting-card{padding:55px 26px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}