@import"https://fonts.googleapis.com/css2?family=Nunito:wght@600;800;900&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--sky-deep: #071428;--sky-mid: #123056;--vapor: #c99bff;--accent: #4a9eff;--gold: #ffe066;--font: "Nunito", system-ui, sans-serif}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font);background:var(--sky-deep);color:#e8f4ff;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#app{position:relative;width:100%;height:100%}#game-canvas{display:block;width:100%;height:100%;touch-action:none}#ui-root{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#ui-root .interactive{pointer-events:auto}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;background:radial-gradient(ellipse at 50% 20%,rgba(80,140,220,.35),transparent 55%),linear-gradient(180deg,#081830eb,#040c1cf0)}.screen.hidden{display:none}.brand-mark{width:72px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#8ec8ff 45%,transparent 70%);box-shadow:0 0 40px #8cc8ff8c;margin-bottom:.75rem;animation:drift 4s ease-in-out infinite}@keyframes drift{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.title-logo{font-size:clamp(2.6rem,12vw,4.2rem);font-weight:900;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,#e8f4ff,#6eb5ff 50%,#c4e0ff);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.35rem;text-shadow:none;filter:drop-shadow(0 4px 18px rgba(80,160,255,.35))}.hub-title{font-size:clamp(1.6rem,6vw,2.2rem);letter-spacing:.08em;margin-top:.5rem}.tagline{font-size:1rem;opacity:.85;margin-bottom:.5rem;text-align:center}.subtitle{font-size:.9rem;opacity:.75;margin-bottom:1rem;text-align:center;max-width:22rem}.credit{font-size:.85rem;opacity:.65;margin-top:1.5rem;font-style:italic}.btn,.btn-hero{pointer-events:auto;cursor:pointer;border:none;border-radius:14px;padding:.95rem 2.2rem;font-family:var(--font);font-size:1.1rem;font-weight:800;background:linear-gradient(180deg,#5aadff,#2a6fd4);color:#fff;box-shadow:0 6px 20px #2a6fd480;transition:transform .12s,filter .12s}.btn-hero{min-width:200px;margin-top:.75rem;font-size:1.25rem;letter-spacing:.04em}.btn:hover,.btn-hero:hover{filter:brightness(1.08)}.btn:active,.btn-hero:active{transform:scale(.97)}.btn-secondary{background:linear-gradient(180deg,#3d5568,#2a3d4d);box-shadow:0 4px 12px #00000059;margin-top:.5rem;font-size:.95rem;padding:.7rem 1.4rem}.btn-secondary.dim{opacity:.45}.btn-link{pointer-events:auto;background:none;border:none;color:#9ecfff;font-family:var(--font);font-size:.9rem;margin-top:1rem;cursor:pointer;text-decoration:underline;opacity:.8}.hub-screen{justify-content:flex-start;padding-top:2rem;overflow-y:auto}.nest-visual{position:relative;width:160px;height:140px;margin:.5rem auto .25rem}.nest-core-glow{position:absolute;left:50%;top:45%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff,#4a9eff 50%,transparent 70%);animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.15);opacity:.85}}.nest-ring{position:absolute;left:50%;top:50%;border:3px solid rgba(160,210,255,.55);border-radius:50%;transform:translate(-50%,-50%)}.nest-ring.r1{width:90px;height:54px}.nest-ring.r2{width:130px;height:78px;border-color:#64aaff59}.nest-upgrade-pad{position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:70px;height:18px;border-radius:8px;background:linear-gradient(180deg,#5a7a4a,#3a5230);box-shadow:0 0 12px #78c85059}.purpose-line{max-width:22rem;text-align:center;font-size:.92rem;font-weight:700;line-height:1.35;color:#cfe6ff;margin:.35rem 0 .85rem;opacity:.95}.hub-purpose{margin-top:.15rem;margin-bottom:.5rem;font-size:.82rem;opacity:.9}.hub-identity{font-size:.85rem;font-weight:800;color:var(--gold);margin-top:.15rem}.nest-yard{display:grid;grid-template-columns:1fr;gap:.45rem;width:min(92vw,360px);margin:.35rem 0 .75rem}.yard-slot{text-align:left;background:#0c1c34d9;border:1px solid rgba(140,190,255,.28);border-radius:12px;padding:.55rem .7rem}.yard-slot[data-slot=barracks]{border-color:#c99bff59}.yard-slot[data-slot=cistern]{border-color:#4a9eff66}.yard-name{font-weight:900;font-size:.88rem}.yard-meta{font-size:.75rem;font-weight:700;color:#9ec9ff;margin-top:.1rem}.yard-blurb{font-size:.68rem;opacity:.75;margin-top:.2rem;line-height:1.3}.yard-bar{margin-top:.35rem;height:6px;border-radius:999px;background:#00000059;overflow:hidden}.yard-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#c99bff,#7dffaa);border-radius:999px;transition:width .35s ease}.front-board{width:min(92vw,360px);text-align:left;background:#141028e0;border:2px solid rgba(255,224,102,.45);border-radius:14px;padding:.7rem .85rem;margin-bottom:.75rem}.front-kicker{font-size:.65rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}.front-title{font-size:1rem;font-weight:900;margin-top:.15rem}.front-blurb{font-size:.75rem;line-height:1.35;opacity:.85;margin:.35rem 0 .5rem}.front-progress{display:flex;gap:.4rem}.front-pip{width:1.35rem;height:1.35rem;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:#00000040}.front-pip.filled{background:radial-gradient(circle at 35% 35%,#fff,#7dffaa 55%,#2a8a55);border-color:#7dffaa;box-shadow:0 0 10px #7dffaa73}.front-seized{margin-top:.5rem;font-size:.78rem;font-weight:800;color:#7dffaa}.front-seized.hidden{display:none}.hub-stats{display:flex;gap:1rem;margin:.5rem 0 .75rem;font-weight:700}.vapor-badge,.bonus-badge{background:#142846bf;border:1px solid rgba(120,180,255,.3);border-radius:999px;padding:.35rem .9rem;font-size:.88rem}.hub-deck-mini{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;max-width:340px;margin-top:1.25rem}.deck-chip{display:flex;align-items:center;gap:.35rem;background:#0f1e37cc;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.25rem .5rem .25rem .25rem;font-size:.72rem;font-weight:700}.deck-chip img{border-radius:6px}.duel-hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.duel-hud.hidden{display:none}.top-bar{position:absolute;top:0;left:0;right:0;padding:.65rem .85rem;display:flex;align-items:flex-start;justify-content:space-between;gap:.4rem;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent)}.hp-block{flex:1;max-width:38%}.hp-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85;margin-bottom:.2rem;font-weight:800}.hp-bar-wrap{height:14px;background:#00000080;border-radius:7px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}.hp-bar{height:100%;border-radius:6px;transition:width .2s linear}.hp-bar.player{background:linear-gradient(90deg,#3d8bff,#6eb5ff)}.hp-bar.enemy{background:linear-gradient(90deg,#ff6b6b,#ff9a7a)}.hp-num{font-size:.72rem;margin-top:.15rem;font-variant-numeric:tabular-nums;font-weight:700}.timer-block{text-align:center;min-width:5.5rem}.timer{font-size:1.35rem;font-weight:900;font-variant-numeric:tabular-nums;transition:color .2s,text-shadow .2s,transform .15s}.timer.urgent{color:#ff6b6b;text-shadow:0 0 12px rgba(255,80,80,.85);animation:timerPulse .55s ease-in-out infinite}@keyframes timerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.goal-line{font-size:.62rem;font-weight:800;color:var(--gold);opacity:.95;margin-top:.15rem;max-width:7rem;line-height:1.2}.coach-banner{position:absolute;top:4.6rem;left:50%;transform:translate(-50%);width:min(92vw,360px);display:flex;align-items:center;gap:.5rem;background:#081428e0;border:2px solid var(--gold);border-radius:12px;padding:.65rem .75rem;font-weight:800;font-size:.9rem;pointer-events:auto;z-index:5;animation:coachIn .35s ease-out}.coach-banner.hidden{display:none}@keyframes coachIn{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.coach-skip{margin-left:auto;border:none;background:transparent;color:#9ecfff;font-family:var(--font);font-weight:700;font-size:.75rem;cursor:pointer;text-decoration:underline}.lore-crumb{position:absolute;top:4.5rem;left:50%;transform:translate(-50%);max-width:90%;text-align:center;font-size:.72rem;font-style:italic;color:#b8d4f0;opacity:.7;padding:.25rem .6rem;pointer-events:none}.coach-banner:not(.hidden)~.lore-crumb{top:8.2rem;opacity:.45}.deploy-toast{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);background:#000000bf;padding:.55rem 1.1rem;border-radius:10px;font-weight:800;font-size:.95rem;z-index:6;pointer-events:none}.deploy-toast.hidden{display:none}.select-hint{position:absolute;bottom:9.2rem;left:50%;transform:translate(-50%);background:#000000a6;border:1px solid rgba(255,224,102,.5);padding:.4rem .9rem;border-radius:8px;font-size:.82rem;font-weight:800;color:var(--gold);pointer-events:none;animation:pulseHint 1.2s ease-in-out infinite}.select-hint.hidden{display:none}@keyframes pulseHint{0%,to{opacity:.85}50%{opacity:1}}.elixir-wrap{position:absolute;bottom:7.8rem;left:50%;transform:translate(-50%);width:min(320px,85vw)}.elixir-label{font-size:.72rem;text-align:center;margin-bottom:.25rem;opacity:.85;font-weight:800}.elixir-bar{display:flex;gap:4px;justify-content:center}.elixir-pip{width:22px;height:22px;border-radius:50%;background:#281e50cc;border:2px solid rgba(180,120,255,.35);transition:background .15s,box-shadow .15s}.elixir-pip.filled{background:radial-gradient(circle at 30% 30%,#e0a8ff,#9b4dff);border-color:#c88aff;box-shadow:0 0 10px #b450ff99}.card-hand{position:absolute;bottom:.5rem;left:0;right:0;display:flex;justify-content:center;gap:.4rem;padding:0 .4rem;flex-wrap:nowrap;pointer-events:auto;overflow-x:auto}.card-btn{--caste: #6eb5ff;width:clamp(62px,17vw,78px);min-height:96px;border-radius:12px;border:2px solid rgba(255,255,255,.22);border-top:4px solid var(--caste);background:linear-gradient(180deg,#1e3255f5,#0c1830f5);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:.3rem .2rem .4rem;font-family:var(--font);font-size:.58rem;font-weight:800;line-height:1.15;transition:border-color .12s,transform .12s,box-shadow .12s;flex-shrink:0}.card-btn .cost{align-self:flex-start;margin-left:.2rem;font-weight:900;font-size:.95rem;color:var(--vapor);text-shadow:0 0 8px rgba(180,100,255,.5)}.card-btn .card-art{width:44px;height:44px;border-radius:8px;margin:.1rem 0;object-fit:cover}.card-btn .name{text-align:center;padding:0 .15rem}.card-btn.selected{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--caste, var(--gold)) 70%,#fff),0 0 22px #ffe066bf,0 0 36px color-mix(in srgb,var(--caste, #4a9eff) 55%,transparent);transform:translateY(-10px) scale(1.06);z-index:2}.card-btn.disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.35)}.card-btn:not(.disabled):active{transform:scale(.96)}.result-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;z-index:20;overflow:hidden}.result-overlay.hidden{display:none}.result-confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.result-confetti span{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:.9;animation:confettiFall linear forwards}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(540deg);opacity:.2}}.deploy-toast.laugh{border-color:var(--vapor);background:#28143ceb;max-width:min(92vw,340px);font-size:.78rem;line-height:1.35}.result-title{font-size:clamp(2rem,8vw,2.6rem);font-weight:900;margin-bottom:.5rem;letter-spacing:.04em}.result-title.win{color:#7dffaa}.result-title.lose{color:#ff8a8a}.result-title.draw{color:#ffe066}@media(orientation:landscape)and (max-height:500px){.card-btn{min-height:72px;width:56px}.card-btn .card-art{width:32px;height:32px}.elixir-wrap{bottom:6.2rem}}