:root { --bg:#05081a; --surface:#0a1027; --surface-2:#0d1633; --line:#263a65; --ink:#eff5ff; --muted:#9aaccc; --purple:#a729ff; --cyan:#14d8ff; --yellow:#f6e52d; --green:#3cf5a0; --shadow:0 18px 45px rgba(0,0,0,.35); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 80% 12%,#151250 0,transparent 30rem),var(--bg); font-family:Rajdhani,Arial,sans-serif; } button,a { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } .scanlines { pointer-events:none; position:fixed; z-index:20; inset:0; opacity:.07; background:repeating-linear-gradient(0deg,transparent 0 3px,#b8d9ff 3px 4px); mix-blend-mode:screen; }
.topbar { height:76px; display:flex; align-items:center; gap:21px; padding:0 clamp(20px,4vw,56px); background:rgba(3,6,17,.9); border-bottom:1px solid #172653; position:sticky; top:0; z-index:10; backdrop-filter:blur(15px); } .brand { display:grid; line-height:.85; font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.7rem; letter-spacing:0; } .brand b { color:var(--yellow); text-align:center; font-size:.62em; letter-spacing:1px; margin-top:5px; } .season-chip { background:#35107c; color:#e9d8ff; padding:6px 10px; font-weight:800; border-radius:3px; white-space:nowrap; } .main-nav { display:flex; align-self:stretch; align-items:stretch; gap:3px; flex:1; justify-content:center; } .main-nav a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:66px; gap:4px; color:#d8e2f7; text-transform:uppercase; font-size:.75rem; font-weight:700; } .main-nav svg { width:17px; } .main-nav a:hover,.main-nav .active { color:var(--yellow); } .main-nav .active:after { content:''; position:absolute; bottom:0; height:2px; width:55px; background:var(--yellow); box-shadow:0 0 12px var(--yellow); } .icon-button { display:grid; place-items:center; width:36px; height:36px; padding:0; background:transparent; color:var(--ink); border:0; } .icon-button svg { width:20px; } .language-button { min-width:34px; height:28px; padding:0 7px; border:1px solid #3d73a6; background:#0c1831; color:var(--cyan); font-weight:800; font-size:.72rem; } .language-button:hover { border-color:var(--cyan); color:white; } .progress-button { display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid #8c7800; color:var(--yellow); text-transform:uppercase; font-weight:800; font-size:.8rem; } .progress-button svg { width:18px; }
main { max-width:1440px; margin:auto; padding:0 32px 44px; } .hero { min-height:510px; position:relative; overflow:hidden; border:1px solid #273173; border-top:0; background:#070b24; } .hero-art { position:absolute; inset:0; background:linear-gradient(90deg,#070b24 0%,rgba(7,11,36,.83) 29%,rgba(7,11,36,.08) 62%,rgba(7,11,36,.25)),url('assets/override-hero.png') center/cover; } .hero:after { content:''; position:absolute; inset:auto 0 0; height:140px; background:linear-gradient(transparent,#070b24); } .hero-content { max-width:560px; position:relative; z-index:1; padding:72px 48px 28px; } .eyebrow { margin:0 0 6px; color:var(--cyan); text-transform:uppercase; font-size:.84rem; letter-spacing:1.3px; font-weight:800; } h1,h2,h3 { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; margin:0; letter-spacing:0; } h1 { font-size:clamp(4rem,10vw,8.5rem); font-style:italic; line-height:.8; color:#f6e9ff; text-shadow:4px 0 #7335b9,-3px 0 #15dbf4,0 0 30px #a428ff; } h2 { font-size:1.55rem; } .hero-copy { max-width:380px; margin:20px 0; font-size:1.1rem; line-height:1.35; } .hero-actions { display:flex; flex-wrap:wrap; gap:10px; } .button,.wide-button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 17px; border:1px solid transparent; text-transform:uppercase; font-size:.83rem; font-weight:800; } .button svg,.wide-button svg { width:16px; } .primary { background:var(--yellow); color:#090814; box-shadow:0 0 20px #f6e52d52; } .ghost { background:#101632bb; border-color:#5b2e9d; color:#e8d7ff; } .countdown { display:flex; align-items:stretch; gap:8px; margin-top:23px; padding:12px; max-width:420px; border:1px solid #7c20d6; background:#090926d9; box-shadow:inset 0 0 25px #6900bd21; } .countdown-label { position:absolute; margin-top:-28px; font-size:.75rem; font-weight:800; text-transform:uppercase; } .countdown div { min-width:62px; padding:5px 8px; border:1px solid #43328a; text-align:center; background:#111239; } .countdown b { display:block; color:#63c9ff; font-size:2rem; line-height:.9; } .countdown small { color:#a9b8db; text-transform:uppercase; font-size:.65rem; }
.quick-links { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:17px 0 25px; } .quick-card { min-height:86px; display:flex; align-items:center; gap:10px; padding:13px; border:1px solid var(--line); background:linear-gradient(135deg,#101637,#090e25); } .quick-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); } .quick-card svg { width:32px; height:32px; } .quick-card span { display:grid; } .quick-card b { font-family:'Barlow Condensed'; text-transform:uppercase; font-size:1.08rem; } .quick-card small { font-size:.77rem; color:#b0bfdd; } .mission{border-color:#a729ff;color:#e064ff}.code{border-color:#147df4;color:#15c6ff}.spirit{border-color:#13d7d7;color:#25f6ef}.garden{border-color:#1bbf65;color:#6dff70}.reward{border-color:#ed810b;color:#ffd332}
.dashboard-grid { display:grid; grid-template-columns:1.05fr .9fr .9fr; gap:16px; } .panel,.progress-card,.garden-card { background:linear-gradient(145deg,rgba(14,24,58,.95),rgba(5,11,30,.95)); border:1px solid #233d70; box-shadow:var(--shadow); } .panel { padding:17px; min-width:0; } .missions-panel { border-color:#6c2eb6; }.codes-panel { border-color:#106e9a; }.spirits-panel { border-color:#166287; } .panel-heading,.section-heading,.modal-heading,.garden-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; } .panel-heading .eyebrow,.section-heading .eyebrow,.garden-heading .eyebrow,.modal-heading .eyebrow { font-size:.68rem; margin-bottom:1px; } .text-button,.text-link { color:var(--cyan); border:0; background:transparent; text-transform:uppercase; font-weight:800; font-size:.76rem; } .live-dot { color:var(--green); font-size:.74rem; font-weight:800; text-transform:uppercase; } .live-dot:before { content:''; width:7px; height:7px; display:inline-block; margin-right:5px; background:var(--green); border-radius:50%; box-shadow:0 0 8px var(--green); }
.mission-list,.code-list,.spirit-list { display:grid; gap:8px; min-height:268px; } .mission-item { padding:11px; border:1px solid #263260; background:#0a1130; } .mission-top { display:flex; gap:9px; align-items:flex-start; } .mission-item label { width:18px; height:18px; border:1px solid #7a50bd; display:grid; place-items:center; flex:0 0 auto; cursor:pointer; } .mission-item input { position:absolute; opacity:0; } .mission-item input:checked + svg { display:block; } .mission-item label svg { width:14px; display:none; color:var(--yellow); } .mission-item strong { font-size:.93rem; line-height:1.05; flex:1; } .xp { padding:3px 5px; background:#6121a3; color:#fff; font-weight:800; font-size:.72rem; } .mission-progress { display:flex; align-items:center; gap:8px; margin:9px 0 0 27px; color:#c4d4f7; font-size:.72rem; } .bar { height:5px; flex:1; background:#1a2549; overflow:hidden; } .bar i { display:block; height:100%; background:var(--cyan); box-shadow:0 0 7px var(--cyan); } .mission-item.done { opacity:.6; } .mission-item.done strong { text-decoration:line-through; } .wide-button { width:100%; margin-top:12px; border:0; } .purple { background:#481197; color:white; }.blue { background:#075e97; color:white;}.cyan{background:#056b82;color:white}.yellow{background:#3d3902;color:var(--yellow);border:1px solid #887d00;}
.code-item { display:grid; grid-template-columns:1fr auto; gap:6px; align-items:center; padding:12px; background:#07152b; border-left:2px solid var(--cyan); } .code-item strong { color:#8af6ff; font-size:1.06rem; letter-spacing:.5px; } .code-item p { grid-column:1; margin:0; color:#cad7f1; line-height:1.1; font-size:.82rem; } .copy-code { grid-column:2; grid-row:1 / 3; border:0; background:var(--cyan); color:#001925; padding:6px 9px; font-weight:800; text-transform:uppercase; font-size:.7rem; }.copy-code.copied{background:var(--green)}
.spirit-item { display:grid; grid-template-columns:56px 1fr auto; gap:9px; align-items:center; padding:6px; background:#091128; border:1px solid #15294e; } .spirit-orb { width:49px; height:49px; border-radius:8px; display:grid; place-items:center; font-size:1.6rem; background:radial-gradient(circle,#935dff,#171047 65%); box-shadow:inset 0 0 15px #de9bff,0 0 10px #7c1aff; } .spirit-item strong { display:block; }.spirit-item small { color:#aab6d1; }.rarity { font-size:.68rem; color:#d271ff; }.toggle-owned { background:transparent; border:1px solid #536690; color:#c3d4f8; padding:4px 6px; text-transform:uppercase; font-size:.63rem; font-weight:800; }.toggle-owned.selected{border-color:var(--green); color:var(--green); background:#0f443a66;}
.progress-garden { display:grid; grid-template-columns:310px 1fr; gap:16px; margin-top:16px; }.progress-card { padding:20px; border-color:#8a7d00; }.progress-card h2{margin-bottom:12px}.progress-ring { width:122px; height:122px; margin:0 auto 13px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:radial-gradient(circle,#0d1732 56%,transparent 57%),conic-gradient(var(--yellow) var(--degree,0%),#19385b 0); box-shadow:0 0 20px #e9db1633; }.progress-ring span{font-size:2.5rem;color:var(--cyan);font-weight:800;}.progress-ring small{color:#a9bbdc;font-weight:700;}.stat-list{list-style:none;padding:0;margin:0;display:grid;gap:7px}.stat-list li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #1d2b4d}.stat-list b{color:var(--yellow)}.garden-card{position:relative;overflow:hidden;min-height:280px;border-color:#18718b}.garden-background{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 85%,#1d5682 0,transparent 32%),radial-gradient(circle at 50% 50%,#5324a7 0,transparent 33%),linear-gradient(160deg,#0b1741,#10052b 65%,#021525);opacity:.9}.garden-background:before{content:'';position:absolute;left:50%;bottom:38px;width:230px;height:95px;background:radial-gradient(ellipse,#5d2e91 0,transparent 68%);transform:translateX(-50%);filter:blur(6px)}.garden-heading,.garden-spirits,.garden-summary{position:relative;z-index:1}.garden-heading{padding:19px 20px;margin-bottom:0}.garden-heading .eyebrow{color:#6affdd}.garden-spirits{display:flex;align-items:end;justify-content:center;gap:clamp(9px,2vw,26px);padding:30px 20px 10px}.garden-spirit{display:grid;justify-items:center;gap:6px;opacity:.3;filter:grayscale(1)}.garden-spirit.owned{opacity:1;filter:none}.garden-spirit .spirit-orb{width:58px;height:58px;border-radius:50%;animation:float 3s ease-in-out infinite}.garden-spirit:nth-child(2) .spirit-orb{animation-delay:-1s}.garden-spirit:nth-child(3) .spirit-orb{animation-delay:-1.5s}.garden-spirit small{font-size:.72rem;font-weight:700}.garden-summary{margin:0;text-align:center;font-size:.95rem;text-transform:uppercase}.garden-summary b{color:#6affdd}@keyframes float{50%{transform:translateY(-10px);box-shadow:inset 0 0 15px #de9bff,0 10px 22px #4e1eff}}
.news-section{margin-top:25px;border-top:1px solid #6e2bb6;padding-top:15px}.section-heading{align-items:end}.section-heading h2{font-size:1.7rem}.text-link{display:flex;gap:4px;align-items:center}.text-link svg{width:16px}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.news-card{min-height:160px;padding:16px;position:relative;overflow:hidden;background:#0b1534;border:1px solid #1d315c}.news-card:after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;right:-30px;bottom:-40px;background:currentColor;opacity:.12;filter:blur(15px)}.news-card span{position:relative;z-index:1;color:#080b1a;background:var(--yellow);font-weight:900;text-transform:uppercase;font-size:.68rem;padding:3px 5px}.news-card>svg{position:absolute;right:18px;top:15px;width:32px;color:currentColor}.news-card h3{position:relative;z-index:1;margin:25px 0 6px;font-size:1.25rem}.news-card p{position:relative;z-index:1;margin:0;max-width:260px;line-height:1.1;font-size:.87rem;color:#d0dcf3}.news-card small{position:absolute;z-index:1;bottom:14px;color:#aab9d6}.update{color:#29cdf9}.event{color:#bd65ff;background:#160a3c}.reward-news{color:#ffd831;background:#241a06}
footer{max-width:1440px;margin:auto;padding:25px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #172653;color:#a5b2c9;font-size:.8rem}footer .brand{color:#fff;font-size:1.2rem}footer a:last-child{display:flex;align-items:center;gap:4px;color:var(--cyan)}footer svg{width:14px}
dialog{width:min(780px,calc(100% - 28px));max-height:85vh;overflow:auto;border:1px solid #277fba;background:#07122a;color:var(--ink);box-shadow:0 0 50px #112ad080;padding:20px}dialog::backdrop{background:#02030bcc;backdrop-filter:blur(4px)}.collection-filters{display:flex;gap:6px;margin-bottom:15px}.collection-filters button{padding:7px 10px;border:1px solid #304b7a;background:#0b1a39;color:#c5d5f0;text-transform:uppercase;font-weight:800;font-size:.75rem}.collection-filters .selected{border-color:var(--cyan);color:var(--cyan)}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.collection-grid .spirit-item{grid-template-columns:58px 1fr}.collection-grid .toggle-owned{grid-column:1 / -1}.collection-grid .rarity{display:block}#toast{position:fixed;z-index:30;left:50%;bottom:24px;transform:translate(-50%,20px);padding:10px 15px;background:#12cfea;color:#00151d;font-weight:800;opacity:0;transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}
body.focus-mode{--bg:#03050d;--surface:#070b16;--surface-2:#090e1b;--line:#273348}.focus-mode .scanlines{opacity:.02}.focus-mode .hero-art{filter:saturate(.65)}
@media(max-width:1050px){.topbar{gap:13px}.main-nav a{min-width:54px}.dashboard-grid{grid-template-columns:1fr 1fr}.missions-panel{grid-row:span 1}.spirits-panel{grid-column:span 2}.quick-links{grid-template-columns:repeat(3,1fr)}.progress-garden{grid-template-columns:280px 1fr}}
@media(max-width:760px){.topbar{height:60px;padding:0 14px}.brand{font-size:1.25rem}.season-chip,.main-nav a:not(.active),.progress-button span{display:none}.main-nav{justify-content:flex-end}.main-nav .active{min-width:46px}.progress-button{padding:7px}.main-nav .active:after{width:38px}.hero{min-height:560px;margin:0 -14px}.hero-art{background-position:63% center;opacity:.7}.hero-content{padding:60px 25px 25px}.hero-copy{max-width:300px}.countdown{max-width:305px;gap:5px}.countdown div{min-width:0;flex:1;padding:4px}.countdown b{font-size:1.55rem}main{padding:0 14px 28px}.quick-links{grid-template-columns:1fr 1fr}.quick-card{min-height:73px;padding:9px}.quick-card svg{width:26px}.dashboard-grid,.progress-garden{grid-template-columns:1fr}.spirits-panel{grid-column:auto}.mission-list,.code-list,.spirit-list{min-height:0}.garden-card{min-height:290px}.garden-spirits{gap:8px;padding-left:8px;padding-right:8px}.garden-spirit .spirit-orb{width:44px;height:44px}.garden-spirit small{font-size:.61rem}.news-grid{grid-template-columns:1fr}.news-card{min-height:145px}.collection-grid{grid-template-columns:1fr}.progress-card{order:2}footer{padding:20px 14px;align-items:flex-start;flex-direction:column;gap:10px}}
/* Reserved, clearly labeled ad space keeps monetization separate from interactive controls. */
.ad-slot { min-height:90px; margin:18px 0 22px; display:grid; place-items:center; border:1px solid #1b2b4c; background:#070d20; color:#6d7fa4; font-size:.62rem; letter-spacing:1.4px; }
.ad-slot span { opacity:.7; }
.footer-links { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-links a:hover { color:var(--cyan); }
.footer-links a:last-child { display:flex; align-items:center; gap:4px; color:var(--cyan); }
@media(max-width:760px){ .footer-links { gap:12px; } }
.simple-page { max-width:760px; min-height:100vh; padding:48px 24px; margin:auto; }
.simple-page .brand { margin-bottom:70px; }
.simple-page h1 { font-size:clamp(3.4rem,10vw,6rem); margin-bottom:20px; }
.simple-page p { max-width:650px; color:#c4d2eb; font-size:1.08rem; line-height:1.5; }
.simple-page .text-link { display:inline-flex; margin-top:18px; }
.hero-art { background-image:linear-gradient(90deg,#070b24 0%,rgba(7,11,36,.9) 29%,rgba(7,11,36,.14) 70%,rgba(7,11,36,.35)),url('assets/override-battle-pass-lineup.jpg'); background-position:center; }
.hero-art { background-image:linear-gradient(90deg,rgba(7,11,36,.48) 0%,rgba(7,11,36,.18) 42%,rgba(7,11,36,.04) 74%),url('assets/override-season4-hero.png'); background-size:100% 100%; background-repeat:no-repeat; background-position:center; }
.spirit-orb { overflow:hidden; }
.spirit-orb img { width:100%; height:100%; object-fit:contain; }
@media(max-width:760px){.hero-art{background-size:auto 100%;background-position:72% center;opacity:.62;}}
.code-list { max-height:330px; overflow-y:auto; padding-right:4px; }
.codes-page { max-width:1440px; margin:auto; padding:38px 32px 56px; }
.codes-hero { display:flex; justify-content:space-between; align-items:end; gap:30px; padding:40px 0 28px; border-bottom:1px solid #26366b; }
.codes-hero h1 { font-size:clamp(3rem,7vw,6rem); line-height:.9; }
.codes-lede { max-width:620px; margin:18px 0 0; color:#bbcae8; font-size:1.08rem; }
.codes-count { min-width:132px; padding:18px; border:1px solid #16c6ef; background:#081b35; text-align:center; box-shadow:0 0 24px #00bce622; }
.codes-count b { display:block; color:var(--cyan); font:800 3.5rem/.8 'Barlow Condensed'; }
.codes-count span { display:block; margin-top:8px; color:#c4d5ef; font-size:.75rem; text-transform:uppercase; }
.codes-table-wrap { margin-top:26px; padding:22px; border:1px solid #b89b2e; background:linear-gradient(145deg,#101a3fee,#070d20ee); box-shadow:0 0 0 1px #4d3b1166,0 0 34px #071a3f; }
.codes-table-scroll { overflow:auto; }
.codes-table { width:100%; min-width:780px; border-collapse:collapse; }
.codes-table th { padding:14px 12px; color:#f7d95e; border-bottom:1px solid #8d7420; text-align:left; font:700 .8rem 'Rajdhani'; text-transform:uppercase; letter-spacing:1px; }
.codes-table td { padding:14px 12px; border-bottom:1px solid #26375b; color:#d7e4fa; vertical-align:middle; }
.codes-table tbody tr { background:linear-gradient(90deg,#101c3a88,#0a142b55); }
.codes-table tbody tr:nth-child(even) { background:linear-gradient(90deg,#15142f99,#09162c66); }
.codes-table tr:hover td { background:#2a285277; }
.codes-table code { color:#fff; font:800 1.15rem 'Rajdhani'; letter-spacing:1.4px; text-shadow:0 0 10px #9a65ff88; }
.reward-thumb { display:flex; align-items:center; gap:14px; min-width:290px; }
.reward-thumb img { width:92px; height:92px; object-fit:contain; border:1px solid #d0ae37; background:radial-gradient(circle,#293c80,#080d22 72%); box-shadow:inset 0 0 18px #e6c84422,0 0 14px #d4ae3826; }
.reward-thumb span { display:block; max-width:155px; color:#f5f7ff; font:700 .88rem/1.05 'Rajdhani'; }
.code-status { color:#6dffad; font:800 .68rem 'Rajdhani'; letter-spacing:1px; }
.page-copy { min-width:72px; padding:8px 10px; border:1px solid #c9a92e; background:#2c2707; color:#ffe45a; font:800 .7rem 'Rajdhani'; cursor:pointer; }
.page-copy:hover { background:#0d5470; }
.codes-note { margin:17px 0 0; color:#8fa3c7; font-size:.82rem; }
.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; }
.reward-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.reward-card { overflow:hidden; min-width:0; border:1px solid #5e5120; background:linear-gradient(160deg,#15244a,#0a1128 72%); box-shadow:0 10px 25px #02061188, inset 0 1px #f1d45b33; transition:transform .2s,border-color .2s,box-shadow .2s; }
.reward-card:hover { transform:translateY(-4px); border-color:#f3d452; box-shadow:0 16px 30px #020611aa,0 0 24px #d3ae3530; }
.reward-art { height:178px; background-image:var(--reward-image),radial-gradient(circle at 50% 42%,#334991 0,transparent 57%),linear-gradient(145deg,#172b5d,#090e22); background-position:center; background-repeat:no-repeat; background-size:contain,auto,auto; border-bottom:1px solid #766326; }
.reward-art-duo { background-image:var(--reward-image),var(--reward-image-2),radial-gradient(circle at 50% 42%,#334991 0,transparent 60%),linear-gradient(145deg,#172b5d,#090e22); background-position:31% center,69% center,center,center; background-size:43% 80%,43% 80%,auto,auto; }
.tetrimino-effect { display:grid; grid-template-columns:repeat(3,54px); grid-template-rows:repeat(2,54px); place-content:center; gap:5px; background-image:radial-gradient(circle at 50% 42%,#334991 0,transparent 57%),linear-gradient(145deg,#172b5d,#090e22); }
.tetrimino-effect span { border:2px solid #ffed65; background:linear-gradient(135deg,#f2a423,#e74692); box-shadow:inset 5px 5px #fff5,inset -5px -5px #47154566,0 0 18px #faab3e80; }
.tetrimino-effect span:nth-child(1) { grid-column:1; grid-row:1; }
.tetrimino-effect span:nth-child(2) { grid-column:2; grid-row:1; }
.tetrimino-effect span:nth-child(3) { grid-column:2; grid-row:2; }
.tetrimino-effect span:nth-child(4) { grid-column:3; grid-row:2; }

/* Sprite compendium */
.spirits-main { width:min(1500px,calc(100% - 48px)); margin:0 auto; padding:38px 0 72px; }
.spirits-intro { display:flex; align-items:end; justify-content:space-between; gap:28px; padding:12px 0 28px; border-bottom:1px solid #8f741b; }
.spirits-intro h1 { margin:2px 0 8px; color:#fff; font:800 clamp(2.3rem,4vw,4.6rem)/.86 'Barlow Condensed'; letter-spacing:0; }
.spirits-intro > div:first-child > p:last-child { max-width:660px; margin:0; color:#b5c4e1; font-size:1.02rem; }
.spirits-total { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:6px; min-width:180px; color:#fff; text-align:right; }
.spirits-total b { color:#50e6ff; font:800 3.2rem/1 'Barlow Condensed'; }
.spirits-total span { color:#aab7d0; font:700 1.3rem 'Rajdhani'; }
.spirits-total small { grid-column:1 / -1; color:#e9d151; font:700 .72rem 'Rajdhani'; letter-spacing:1px; }
.sprite-workspace { display:grid; grid-template-columns:210px minmax(0,1fr) 270px; gap:18px; padding:22px 0 28px; align-items:start; }
.sprite-filters,.sprite-inspector { position:sticky; top:85px; border:1px solid #645621; background:#09132b; box-shadow:inset 0 1px #ffffff13; }
.sprite-filters { padding:14px; }
.sprite-search { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #316886; background:#071026; color:#51e3fa; }
.sprite-search input { width:100%; min-width:0; height:38px; border:0; outline:0; background:transparent; color:#fff; font:600 .95rem 'Rajdhani'; }
.filter-group { display:grid; gap:7px; margin-top:17px; color:#f1d65e; font:700 .72rem 'Rajdhani'; letter-spacing:1px; }
.filter-group select { width:100%; height:35px; border:1px solid #304e74; background:#111c38; color:#eaf2ff; font:600 .88rem 'Rajdhani'; padding:0 7px; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #304e74; }
.segmented button { min-width:0; height:32px; border:0; border-right:1px solid #304e74; background:#111c38; color:#acc1e5; font:700 .76rem 'Rajdhani'; }
.segmented button:last-child { border-right:0; }.segmented button.selected { background:#00cbe6; color:#071026; }
.filter-reset { display:flex; align-items:center; gap:7px; width:100%; margin-top:22px; color:#7feeff; text-align:left; }.filter-reset svg { width:16px; }
.sprite-results-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:35px; margin:0 0 12px; color:#8ea5ca; font-size:.84rem; }.sprite-results-heading p { margin:0; color:#e9d151; font:700 .8rem 'Rajdhani'; letter-spacing:1px; }.sprite-results-heading p b { color:#fff; font-size:1rem; }
.sprite-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:10px; }
.sprite-card-local { position:relative; min-width:0; border:1px solid #33476d; background:#0b1733; cursor:pointer; transition:border-color .18s,transform .18s,box-shadow .18s; }.sprite-card-local:hover,.sprite-card-local.is-selected { transform:translateY(-3px); border-color:#54daf4; box-shadow:0 9px 20px #0107169c; }.sprite-card-local.is-owned { border-color:#d4b632; }
.sprite-card-art { display:grid; place-items:center; height:118px; background:radial-gradient(circle at 50% 40%,#294984 0,transparent 62%),#0a1230; border-bottom:1px solid #31486e; }.sprite-card-art img { width:100%; height:100%; object-fit:contain; padding:6px; }
.sprite-card-copy { padding:8px 9px 10px; }.sprite-card-copy h3 { min-height:2.1em; margin:5px 24px 1px 0; color:#fff; font:700 1rem/1 'Barlow Condensed'; }.sprite-card-copy p { margin:0; color:#91a7c9; font:600 .69rem 'Rajdhani'; text-transform:uppercase; }
.sprite-rarity { display:inline-block; font:800 .62rem 'Rajdhani'; letter-spacing:.7px; text-transform:uppercase; }.rarity-legendary { color:#ffca43; }.rarity-special { color:#e97fff; }.rarity-epic { color:#c385ff; }.rarity-rare { color:#5ee6ff; }.rarity-uncommon { color:#61e880; }.rarity-common { color:#c0cbdd; }
.sprite-owned-toggle { position:absolute; right:7px; bottom:8px; display:grid; place-items:center; width:24px; height:24px; border:1px solid #6680a3; background:#0a142c; color:#bcd1ed; }.is-owned .sprite-owned-toggle { border-color:#e5c43b; background:#453909; color:#fff174; }.sprite-owned-toggle svg { width:15px; }
.sprite-inspector { padding:15px; }.sprite-inspector .eyebrow { margin:0 0 8px; }.inspector-art { display:grid; place-items:center; height:190px; border:1px solid #2a4c72; background:radial-gradient(circle,#294984 0,transparent 64%),#081129; }.inspector-art img { width:100%; height:100%; object-fit:contain; padding:8px; }.sprite-inspector h2 { margin:13px 0 2px; color:#fff; font:800 1.65rem/1 'Barlow Condensed'; }.inspector-parent { min-height:2em; margin:0; color:#99afd1; font-size:.85rem; }
.sprite-inspector dl { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; }.sprite-inspector dl div { padding:7px; border:1px solid #30476c; background:#0d1935; }.sprite-inspector dt { color:#879abc; font:700 .61rem 'Rajdhani'; letter-spacing:.7px; }.sprite-inspector dd { margin:2px 0 0; color:#eef4ff; font:700 .82rem 'Rajdhani'; }
.inspector-toggle,.inspector-source { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:36px; border:1px solid #e2c03a; background:#342d06; color:#fff06b; font:800 .78rem 'Rajdhani'; text-decoration:none; }.inspector-toggle.selected { border-color:#38d9a0; background:#073b32; color:#75f5c9; }.inspector-source { margin-top:9px; border-color:#305a86; background:#0c2840; color:#86dffa; }.inspector-toggle svg,.inspector-source svg { width:15px; }
.collection-garden { position:relative; overflow:hidden; min-height:300px; padding:22px; border:1px solid #2a8d85; background:#071a2a; }.collection-garden .garden-background { opacity:.72; }.collection-garden > :not(.garden-background) { position:relative; z-index:1; }.garden-collection { display:flex; gap:12px; min-height:160px; margin-top:17px; overflow-x:auto; padding:5px 1px 12px; }.garden-sprite-tile { flex:0 0 128px; display:grid; grid-template-rows:112px auto; border:1px solid #54707a; background:#07172a; color:#d9f5fa; padding:0; overflow:hidden; }.garden-sprite-tile img { width:100%; height:112px; object-fit:contain; padding:5px; background:radial-gradient(circle,#1f5778,transparent 65%); }.garden-sprite-tile span { overflow:hidden; padding:5px 7px 7px; font:700 .8rem 'Rajdhani'; text-overflow:ellipsis; text-align:left; white-space:nowrap; }.garden-sprite-tile.owned { border-color:#e3c648; }.collection-garden .empty-state { align-self:center; color:#c0d4df; }
@media (max-width:1050px) { .sprite-workspace { grid-template-columns:190px minmax(0,1fr); }.sprite-inspector { position:relative; top:auto; grid-column:1 / -1; display:grid; grid-template-columns:170px 1fr; gap:12px; }.sprite-inspector .eyebrow,.sprite-inspector h2,.sprite-inspector .inspector-parent,.sprite-inspector dl,.sprite-inspector .inspector-toggle,.sprite-inspector .inspector-source { grid-column:2; }.inspector-art { grid-row:1 / span 6; height:100%; }.sprite-inspector dl { margin:0; } }
@media (max-width:720px) { .spirits-main { width:min(100% - 26px,1500px); padding-top:20px; }.spirits-intro { align-items:start; }.spirits-total { min-width:100px; }.spirits-total b { font-size:2.3rem; }.sprite-workspace { display:block; }.sprite-filters { position:relative; top:auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }.sprite-search { grid-column:1 / -1; }.filter-group { margin:0; }.filter-reset { margin:0; }.sprite-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.sprite-results-heading span { display:none; }.sprite-inspector { display:block; margin-top:17px; }.sprite-inspector .eyebrow,.sprite-inspector h2,.sprite-inspector .inspector-parent,.sprite-inspector dl,.sprite-inspector .inspector-toggle,.sprite-inspector .inspector-source { grid-column:auto; }.inspector-art { height:210px; }.collection-garden { padding:14px; }.garden-sprite-tile { flex-basis:112px; } }
.reward-card-body { padding:14px; }
.reward-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.reward-card-top code { color:#f8dc63; font:800 .86rem 'Rajdhani'; letter-spacing:1px; }
.reward-card h3 { min-height:2.2em; margin:0 0 4px; color:#fff; font:700 1.2rem/1.05 'Barlow Condensed'; text-transform:uppercase; }
.reward-card p { min-height:2.2em; margin:0 0 13px; color:#aebfe0; font-size:.88rem; line-height:1.15; }
.code-filters { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 2px; }
.code-filters button,.mark-used { border:1px solid #456185; background:#0b1832; color:#bdd1ef; padding:8px 12px; font:800 .72rem 'Rajdhani'; text-transform:uppercase; }
.code-filters button:hover,.code-filters button.selected,.mark-used:hover,.mark-used.selected { border-color:#f1d24e; background:#342d06; color:#ffe45a; }
.code-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.reward-card .page-copy,.reward-card .mark-used { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; }
.reward-card .page-copy svg { width:15px; }
.reward-card .mark-used svg { width:14px; }
.reward-card.is-used { border-color:#53627a; opacity:.72; }
.reward-card.is-used .code-value { color:#9ba9bf; text-decoration:line-through; text-decoration-thickness:2px; }
.reward-card.is-used .reward-art { filter:grayscale(.55); }
.codes-page .codes-table-wrap { border-color:#705f23; }
@media(max-width:1020px){.reward-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.reward-grid{grid-template-columns:1fr}.reward-art{height:180px}}
@media(max-width:760px){.codes-page{padding:22px 14px 38px}.codes-hero{align-items:start;flex-direction:column}.codes-count{align-self:stretch}.codes-table-wrap{padding:14px}.codes-table{min-width:700px}}
.quick-links{grid-template-columns:repeat(6,1fr)}
.map{border-color:#3a8cff;color:#72b4ff}
.session-panel{margin:0 0 25px;padding:20px;border:1px solid #24698e;background:linear-gradient(135deg,#0c1d3a,#091127);box-shadow:var(--shadow)}
.session-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}.session-heading h2{font-size:1.6rem}.session-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.session-grid article{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;min-height:78px;padding:13px;border:1px solid #254c72;background:#08152d}.session-grid article svg{grid-row:span 2;width:26px;color:var(--cyan)}.session-grid b{font-size:1.5rem;color:var(--yellow)}.session-grid span{color:#b7c8e3;font-size:.78rem;line-height:1.1}.session-grid .session-muted{opacity:.65}.session-grid .session-muted svg{color:#f0c64e}
@media(max-width:1050px){.quick-links{grid-template-columns:repeat(3,1fr)}.session-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.quick-links{grid-template-columns:1fr 1fr}.session-heading{align-items:start;flex-direction:column}.session-grid{grid-template-columns:1fr 1fr}.session-panel{padding:14px}}

/* Group Sprite variants by their shared spirit family. */
.sprite-grid{display:block}
.sprite-group{margin:0 0 18px;padding:12px;border:1px solid #263f68;background:linear-gradient(145deg,#0c1c3a,#081128)}
.sprite-group-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:0 2px 9px;border-bottom:1px solid #2c4b74}
.sprite-group-heading>div{display:flex;align-items:baseline;gap:10px;min-width:0}.sprite-group-heading .eyebrow{margin:0;color:#63e8ff;font-size:.78rem;letter-spacing:1.4px}.sprite-group-heading strong{color:#98abca;font:700 .75rem 'Rajdhani';text-transform:uppercase;letter-spacing:.6px}.sprite-group-status{padding:3px 8px;border:1px solid #a78d2d;color:#f4d64d;font:700 .76rem 'Rajdhani';background:#2b2508}.sprite-group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px}
.inspector-art{height:210px;overflow:hidden;padding:10px}.inspector-art img{width:92%;height:92%;padding:0;object-fit:contain;filter:drop-shadow(0 10px 10px #0008)}
.status-segmented{grid-template-columns:repeat(6,1fr);gap:3px;border:0}.status-segmented button{grid-column:span 2;height:35px;padding:3px 2px;border:1px solid #304e74;font-size:.67rem;line-height:.9;white-space:normal}.status-segmented button:nth-child(4),.status-segmented button:nth-child(5){grid-column:span 3}.sprite-card-local{overflow:hidden}.sprite-favorite-toggle,.inspector-favorite{display:grid;place-items:center;border:0;background:transparent;color:#7387aa}.sprite-favorite-toggle{position:absolute;top:7px;right:7px;width:25px;height:25px}.sprite-favorite-toggle svg,.inspector-favorite svg{width:15px}.sprite-card-local.is-favorite .sprite-favorite-toggle,.inspector-favorite.selected{color:#f6d84d;filter:drop-shadow(0 0 5px #f6d84d88)}.inspector-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.inspector-title-row h2{margin-bottom:0}.inspector-favorite{width:32px;height:32px;border:1px solid #354f78;background:#0b1935}
.sprite-card-art{overflow:hidden}.sprite-card-art img{width:92%;height:92%;padding:0;object-fit:contain;display:block}
@media(max-width:720px){.sprite-group{padding:9px}.sprite-group-heading{align-items:flex-start}.sprite-group-heading>div{display:block}.sprite-group-heading strong{display:block;margin-top:3px}.sprite-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}