/* ==================================================================== ZOIDS // Pilot Terminal - game UI Variant colours drive --accent / --accent2 (set per active Zoid). ==================================================================== */ :root{ --bg:#05070d; --bg-2:#0a1018; --panel:rgba(18,27,42,.55); --panel-2:rgba(11,17,28,.5); --panel-3:rgba(30,42,62,.5); --line:rgba(150,194,244,.16); --line-soft:rgba(150,194,244,.08); --glass-hi:rgba(206,234,255,.18); --ink:#dcebf7; --ink-dim:#94a8bb; --ink-faint:#5d6e80; --accent:#22d3ee; --accent2:#a9ecff; --magenta:#ff49c8; --ok:#37e58f; --warn:#ffc24b; --danger:#ff6a5a; --gold:#ffd24a; --slot-ballistic:#ffc24b; --slot-missile:#ff6a5a; --slot-energy:#5ce1ef; --slot-melee:#c79bf0; --slot-omni:#dfe8f2; --slot-utility:#8fa3b5; --glow1:rgba(34,211,238,.12); --glow2:rgba(255,73,200,.09); --glow3:rgba(124,92,255,.10); --grid:rgba(126,178,236,.045); --blur:14px; --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --sans:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --cond:"Arial Narrow","Roboto Condensed","Segoe UI",sans-serif; } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px; line-height:1.5;-webkit-font-smoothing:antialiased} /* depth: neon aurora glows + a faint, edge-faded grid behind everything */ body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(1200px 760px at 8% -12%, var(--glow1), transparent 60%), radial-gradient(1000px 720px at 112% 6%, var(--glow2), transparent 56%), radial-gradient(900px 900px at 50% 124%, var(--glow3), transparent 60%), linear-gradient(180deg,var(--bg),var(--bg-2) 42%,var(--bg))} body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 28%,#000 35%,transparent 86%); mask-image:radial-gradient(ellipse 80% 65% at 50% 28%,#000 35%,transparent 86%)} button,input,select{font:inherit;color:inherit} .boot{display:flex;height:100vh;align-items:center;justify-content:center; color:var(--ink-faint);font-family:var(--mono);letter-spacing:.1em} h1,h2,h3{font-family:var(--cond);font-weight:700;letter-spacing:.02em;margin:0} h1,h2{text-shadow:0 0 22px color-mix(in srgb,var(--accent) 22%,transparent)} a{color:var(--accent2)} /* ============================ SITE THEMES ============================ Pure variable overrides on . The dynamic per-Zoid accent (setAccent) yields to a chosen theme so the palette stays cohesive. */ :root[data-theme="blacklight"]{ /* deep UV purple + fluorescent green */ --bg:#0c0718; --bg-2:#130b24; --panel:rgba(46,24,80,.52); --panel-2:rgba(30,14,56,.5); --panel-3:rgba(64,34,104,.5); --line:rgba(176,120,255,.20); --line-soft:rgba(176,120,255,.10); --glass-hi:rgba(214,180,255,.18); --ink:#ece2ff; --ink-dim:#b6a3d8; --ink-faint:#7a6699; --accent:#7cff3c; --accent2:#c7ff9a; --magenta:#c050ff; --gold:#d6ff4a; --glow1:rgba(124,255,60,.12); --glow2:rgba(168,60,255,.16); --glow3:rgba(214,40,255,.10); --grid:rgba(176,120,255,.06); } :root[data-theme="red"]{ /* crimson */ --bg:#100406; --bg-2:#1a070a; --panel:rgba(70,22,28,.52); --panel-2:rgba(48,14,18,.5); --panel-3:rgba(96,32,38,.5); --line:rgba(255,140,140,.18); --line-soft:rgba(255,140,140,.09); --glass-hi:rgba(255,206,206,.16); --ink:#ffe6e6; --ink-dim:#cf9e9e; --ink-faint:#855b5b; --accent:#ff5a5a; --accent2:#ff9f8a; --magenta:#ff4d8a; --glow1:rgba(255,60,60,.13); --glow2:rgba(255,110,40,.08); --glow3:rgba(200,20,50,.12); --grid:rgba(255,150,150,.05); } :root[data-theme="green"]{ /* verdant */ --bg:#04100a; --bg-2:#071a10; --panel:rgba(22,58,40,.52); --panel-2:rgba(14,40,28,.5); --panel-3:rgba(32,84,58,.5); --line:rgba(140,255,180,.18); --line-soft:rgba(140,255,180,.09); --glass-hi:rgba(206,255,224,.16); --ink:#e2ffe9; --ink-dim:#9ed0b0; --ink-faint:#5e856e; --accent:#3cff9a; --accent2:#a9f0c8; --magenta:#3cffd2; --glow1:rgba(52,229,143,.13); --glow2:rgba(40,200,160,.09); --glow3:rgba(120,255,80,.09); --grid:rgba(140,255,180,.05); } :root[data-theme="orange"]{ /* ember */ --bg:#130a04; --bg-2:#1d0f06; --panel:rgba(72,42,18,.52); --panel-2:rgba(50,28,12,.5); --panel-3:rgba(102,58,24,.5); --line:rgba(255,180,120,.18); --line-soft:rgba(255,180,120,.09); --glass-hi:rgba(255,224,196,.16); --ink:#fff0e0; --ink-dim:#d0ae94; --ink-faint:#85705b; --accent:#ff9a3c; --accent2:#ffce9a; --magenta:#ff6a4a; --gold:#ffb84a; --glow1:rgba(255,150,40,.13); --glow2:rgba(255,184,60,.09); --glow3:rgba(255,90,40,.10); --grid:rgba(255,180,120,.05); } :root[data-theme="yellow"]{ /* solar */ --bg:#100f04; --bg-2:#1a1707; --panel:rgba(68,62,18,.52); --panel-2:rgba(46,42,12,.5); --panel-3:rgba(96,86,24,.5); --line:rgba(255,230,140,.18); --line-soft:rgba(255,230,140,.09); --glass-hi:rgba(255,248,206,.16); --ink:#fffbe2; --ink-dim:#d0c89e; --ink-faint:#85805b; --accent:#ffe24a; --accent2:#fff0a0; --magenta:#ffd24a; --gold:#ffe24a; --glow1:rgba(255,222,74,.13); --glow2:rgba(255,184,60,.08); --glow3:rgba(220,255,80,.09); --grid:rgba(255,230,140,.05); } :root[data-theme="greyscale"]{ /* desaturated monochrome */ --bg:#0a0a0c; --bg-2:#131316; --panel:rgba(34,36,40,.55); --panel-2:rgba(22,23,26,.5); --panel-3:rgba(48,50,55,.5); --line:rgba(200,210,220,.15); --line-soft:rgba(200,210,220,.08); --glass-hi:rgba(220,226,232,.16); --ink:#e8ebef; --ink-dim:#a0a6ad; --ink-faint:#6a6e73; --accent:#cfd6dd; --accent2:#e6ebef; --magenta:#b0b6bd; --ok:#c8ced4; --warn:#aeb6bd; --danger:#9aa0a6; --gold:#cfd6dd; --slot-ballistic:#c2c8ce; --slot-missile:#a8aeb4; --slot-energy:#d2d8de; --slot-melee:#b8bec4; --slot-omni:#dfe4ea; --slot-utility:#8f9398; --glow1:rgba(200,210,220,.06); --glow2:rgba(160,170,180,.05); --glow3:rgba(120,128,136,.06); --grid:rgba(200,210,220,.04); } :root[data-theme="backdraft"]{ /* near-black with violet/ember undertow */ --bg:#060409; --bg-2:#0c0714; --panel:rgba(26,14,42,.56); --panel-2:rgba(16,9,26,.52); --panel-3:rgba(40,22,64,.5); --line:rgba(150,100,220,.16); --line-soft:rgba(150,100,220,.08); --glass-hi:rgba(206,180,255,.14); --ink:#e8e0f0; --ink-dim:#a294b8; --ink-faint:#6b5b80; --accent:#9d4edd; --accent2:#c8a0f0; --magenta:#e0408f; --gold:#c89af0; --glow1:rgba(120,40,200,.12); --glow2:rgba(80,20,160,.12); --glow3:rgba(200,40,90,.07); --grid:rgba(150,100,220,.045); } /* frosted-glass surfaces: translucent fill (from tokens) + backdrop blur + top sheen + lift */ .topbar,.login,.tile,.card,.fbar,.modal__box,.hdetail,.log,.battle__bar,.clockw,.shopwin{ -webkit-backdrop-filter:blur(var(--blur)) saturate(155%);backdrop-filter:blur(var(--blur)) saturate(155%)} .login,.tile,.card,.fbar,.modal__box,.hdetail{ box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 38px rgba(0,0,0,.5)} /* ---------- shell + topbar ---------- */ .shell{min-height:100vh;display:flex;flex-direction:column} .topbar{display:flex;align-items:center;gap:16px;padding:0 18px;height:60px; background:linear-gradient(180deg,rgba(16,24,38,.74),rgba(8,12,22,.6)); border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--glass-hi),0 12px 32px rgba(0,0,0,.42); position:sticky;top:0;z-index:20} .brand{font-family:var(--cond);font-weight:700;letter-spacing:.2em;font-size:17px;cursor:pointer} .brand b{background:var(--accent);color:#05070d;padding:2px 6px;border-radius:3px;transition:background .35s,box-shadow .35s; box-shadow:0 0 16px color-mix(in srgb,var(--accent) 60%,transparent)} .pilot{margin-left:auto;display:flex;align-items:center;gap:12px} .pilot__icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:22px;background:radial-gradient(circle at 35% 30%, color-mix(in srgb,var(--accent) 60%,#0c1218),#0a0f14);border:1px solid var(--line)} .pilot__meta{line-height:1.2} .pilot__name{font-family:var(--cond);font-weight:700;font-size:16px} .pilot__sub{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.06em} .credits{font-family:var(--mono);color:var(--gold);font-size:13px} .linkbtn{background:none;border:0;color:var(--ink-dim);cursor:pointer;font-size:12px; letter-spacing:.08em} .linkbtn:hover{color:var(--ink)} .screen{flex:1;max-width:1080px;width:100%;margin:0 auto;padding:24px 22px 60px} .crumbs{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.1em; text-transform:uppercase;margin-bottom:14px;display:flex;gap:8px;align-items:center} .crumbs button{background:none;border:0;color:var(--accent2);cursor:pointer;padding:0;font:inherit} .section-h{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-dim);margin:22px 0 12px;display:flex;align-items:center;gap:10px} .section-h::after{content:"";flex:1;height:1px;background:var(--line-soft)} /* ---------- buttons ---------- */ .btn{background:var(--panel-3);border:1px solid var(--line);border-radius:7px;padding:10px 16px; cursor:pointer;letter-spacing:.06em;text-transform:uppercase;font-size:12px;transition:.15s; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 var(--glass-hi)} .btn:hover{border-color:var(--accent);color:#fff; box-shadow:inset 0 1px 0 var(--glass-hi),0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none} .btn--primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent)); border-color:var(--accent);color:#04121a;font-weight:700; box-shadow:0 0 20px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35)} .btn--primary:hover{filter:brightness(1.08);color:#04121a; box-shadow:0 0 28px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.4)} .btn--ghost{background:rgba(255,255,255,.03)} .btn--danger:hover{border-color:var(--danger);color:#fff; box-shadow:inset 0 1px 0 var(--glass-hi),0 0 18px color-mix(in srgb,var(--danger) 38%,transparent)} .btn--gold{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 86%,#fff),var(--gold)); border-color:var(--gold);color:#1a1206;font-weight:700; box-shadow:0 0 20px color-mix(in srgb,var(--gold) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.4)} .row{display:flex;gap:10px;flex-wrap:wrap} /* ---------- emblem ---------- */ .emblem{border:1px solid var(--line);border-radius:7px;position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 38% 28%,color-mix(in srgb,var(--accent) 10%,transparent),rgba(7,11,19,.9))} .emblem img{width:100%;height:100%;object-fit:contain} .emblem__mono{font-family:var(--cond);font-weight:700;color:var(--ec2,#cfe4ff); text-shadow:0 2px 14px rgba(0,0,0,.5)} /* ---------- login ---------- */ .login{max-width:460px;margin:8vh auto 0;background:var(--panel);border:1px solid var(--line); border-radius:10px;padding:28px} .login h1{font-size:30px;letter-spacing:.06em} .login p{color:var(--ink-dim);margin:6px 0 18px} .field{display:block;width:100%;background:rgba(8,13,22,.6);border:1px solid var(--line);border-radius:7px; padding:10px 12px;margin:6px 0 14px} .field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 16px color-mix(in srgb,var(--accent) 30%,transparent)} .flabel{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-dim)} .iconrow{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px} .iconpick{width:42px;height:42px;border-radius:9px;border:1px solid var(--line);background:rgba(8,13,22,.6); font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s} .iconpick:hover{border-color:var(--accent)} .iconpick.is-sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,rgba(8,13,22,.6)); box-shadow:0 0 16px color-mix(in srgb,var(--accent) 35%,transparent)} .seg{display:flex;gap:6px;margin:6px 0 14px} .seg button{flex:1;background:rgba(8,13,22,.6);border:1px solid var(--line);border-radius:7px;padding:8px; cursor:pointer;text-transform:capitalize;color:var(--ink-dim);transition:.15s} .seg button.is-sel{border-color:var(--accent);color:#fff; background:color-mix(in srgb,var(--accent) 18%,rgba(8,13,22,.6));box-shadow:0 0 14px color-mix(in srgb,var(--accent) 30%,transparent)} .hint{font-size:12px;color:var(--ink-faint)} /* ---------- cards / grids ---------- */ .grid{display:grid;gap:14px} .grid--tiles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .grid--cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px; cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:6px} .tile:hover{border-color:var(--accent);transform:translateY(-2px); box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 42px rgba(0,0,0,.5),0 0 26px color-mix(in srgb,var(--accent) 22%,transparent)} .tile h2{font-size:22px} .tile p{color:var(--ink-dim);font-size:13px;margin:0} .tile__ico{font-size:26px} .card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden; display:flex;flex-direction:column} .card__top{display:flex;gap:12px;padding:14px} .card__body{padding:0 14px 14px} .panel--share .share-row{display:flex;gap:8px;align-items:center} .panel--share .share-row .field{flex:1;min-width:0} .vstats{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 14px;margin:2px 0 4px} .vstat{display:flex;justify-content:space-between;gap:8px;font-size:12px;border-bottom:1px solid var(--line-soft);padding-bottom:3px} .vstat i{color:var(--ink-faint);font-style:normal} .vstat b{color:var(--ink);font-variant-numeric:tabular-nums} .vrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 0} .vrow i{color:var(--ink-faint);font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-right:2px} .vrow--empty{color:var(--ink-faint);font-size:12px;font-style:italic} .vchip{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);font-size:11.5px;color:var(--ink-dim)} .vchip--util{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent)} .vappr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)} .vappr__count{font-size:12px;color:var(--magenta,#e879b9)} .vappr__btn{white-space:nowrap} .vappr__btn.is-done{opacity:.6} /* pilot code chips */ .pilotcode-row{display:flex;align-items:center;justify-content:space-between;gap:10px} .pilotcode{display:inline-block;font:600 14px/1 var(--mono,monospace);letter-spacing:.18em;padding:5px 10px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--accent)} .pilotcode--sm{font-size:11.5px;letter-spacing:.14em;padding:3px 7px} /* settings */ .section-sub{font:600 12px/1 var(--cond,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:18px 0 8px} .setting-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .setting-opt{text-align:left;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;transition:border-color .15s,background .15s} .setting-opt:hover{border-color:var(--line-soft)} .setting-opt.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel-2));box-shadow:0 0 0 1px var(--accent) inset} .setting-opt__t{font-weight:700;color:var(--ink);margin-bottom:3px} .setting-opt__d{font-size:11.5px;color:var(--ink-dim);line-height:1.35} .theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .theme-opt{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;transition:border-color .15s,background .15s} .theme-opt:hover{border-color:var(--line-soft)} .theme-opt.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .theme-opt__t{font-weight:600;color:var(--ink);font-size:13px} .theme-sw{position:relative;width:34px;height:34px;border-radius:8px;flex:none;border:1px solid var(--line);overflow:hidden} .theme-sw i{position:absolute;width:14px;height:14px;border-radius:50%} .theme-sw i:first-child{left:5px;bottom:5px} .theme-sw i:last-child{right:4px;top:4px;width:11px;height:11px;opacity:.92} .navspacer{flex:1;min-height:10px} /* home hub */ .shell--hub .screen{max-width:980px;margin:0 auto;padding-top:26px} .hubhead{margin-bottom:16px} .hubhead__title{font-size:30px;letter-spacing:.04em;margin:0} .hubhead__title b{color:var(--accent)} .hubhead__sub{color:var(--ink-dim);margin:4px 0 0} .hubcta{margin:0 0 18px;max-width:360px} .hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} .hubcard{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px 16px;backdrop-filter:blur(var(--blur,14px))} .hubcard--accent{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 0 24px -12px var(--accent)} .hubcard__h{font:600 11px/1 var(--cond,inherit);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px} .hubcard__b{color:var(--ink-dim)} .hubbig{display:flex;gap:22px;align-items:baseline} .hubnum{font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums} .hubnum--on{color:var(--accent)} .hubname{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:2px} .hubsub{font-size:12px;color:var(--ink-dim);margin-bottom:4px} .hubnews{font-size:12.5px;color:var(--ink-dim);line-height:1.4;margin:4px 0 0} .hubevent{display:flex;align-items:center;gap:8px;margin:4px 0;color:var(--ink-dim)} .hubevent b{color:var(--ink)} .hubdot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex:none} .hubdot--live{background:#36d399;box-shadow:0 0 8px #36d399;animation:hubpulse 1.6s ease-in-out infinite} @keyframes hubpulse{0%,100%{opacity:1}50%{opacity:.45}} .hublink{color:var(--accent);cursor:pointer;text-decoration:none} .hublink:hover{text-decoration:underline} .hubboard{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px 16px} .hubboard__list{display:flex;flex-direction:column;gap:2px} .hubrow{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:7px 8px;border-radius:8px} .hubrow:nth-child(odd){background:var(--panel-2)} .hubrow__rk{color:var(--ink-faint);font-variant-numeric:tabular-nums} .hubrow__nm{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hubrow__dmg{color:var(--magenta,#e879b9);font-variant-numeric:tabular-nums;font-size:13px} .card .emblem{width:64px;height:64px;flex:0 0 64px} .card .emblem__mono{font-size:22px} .card__name{font-family:var(--cond);font-weight:700;font-size:18px;line-height:1.1} .card__sub{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.08em; text-transform:uppercase} .chip{display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase; padding:2px 7px;border:1px solid var(--line);border-radius:999px;color:var(--ink-dim);margin:2px 4px 2px 0} .chip--r-common{color:#9fb0bd;border-color:#3a4854} .chip--r-uncommon{color:#67b98a;border-color:#2f5a44} .chip--r-rare{color:#5ac8d8;border-color:#235c66} .chip--r-epic{color:#b58ad8;border-color:#4a3060} .chip--r-legendary{color:var(--gold);border-color:#6a521f; box-shadow:0 0 10px rgba(224,179,74,.15) inset} /* ---------- weapon quality grades ---------- */ .qual--t1{color:#67b98a} /* Journeyman - green */ .qual--t2{color:#5ac8d8} /* Mastercraft - cyan-blue */ .qual--t3{color:#b58ad8} /* Artisan - purple */ .qual--t4{color:#e8743b} /* Heroic - red-orange */ .qual--t5{color:#f3c44d} /* Mythic - gold */ .qual--dmg{color:#a07258} /* damaged/broken - dull brown-red */ .qchip{border-color:currentColor} .qchip.qual--t1{border-color:#2f5a44} .qchip.qual--t2{border-color:#235c66} .qchip.qual--t3{border-color:#4a3060} .qchip.qual--t4{border-color:#6a3a1f} .qchip.qual--t5{border-color:#6a521f;box-shadow:0 0 10px rgba(243,196,77,.15) inset} .qchip.qual--dmg{border-color:#4a3328} .lslot__w.qual--t1,.lslot__w.qual--t2,.lslot__w.qual--t3,.lslot__w.qual--t4,.lslot__w.qual--t5,.lslot__w.qual--dmg{font-weight:600} .sellqty{display:flex;align-items:center;gap:10px;margin-top:12px} .sellqty__n{min-width:46px;text-align:center;font-size:20px;font-weight:700} .sellqty__total{margin-left:auto;font-weight:700} /* ---------- stat bars ---------- */ .stat{display:grid;grid-template-columns:64px 1fr 46px;align-items:center;gap:8px;margin:4px 0} .stat__k{font-family:var(--mono);font-size:10px;color:var(--ink-dim);letter-spacing:.06em} .stat__bar{height:7px;background:#0b1117;border:1px solid var(--line-soft);border-radius:999px;overflow:hidden} .stat__fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0; transition:width .5s} .stat__v{font-family:var(--mono);font-size:11px;text-align:right} /* ---------- battle ---------- */ /* a vertical action bar on the left; the field + status bars fill the rest */ /* battle: stable floating control dock instead of a reflowing sidebar */ .battle-wrap{display:block;position:relative;padding-bottom:8px} .battle__main{min-width:0;display:flex;flex-direction:column} .battle-field{position:relative;overflow:hidden;border-radius:12px} .battle__teams{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;align-items:start} .team{display:flex;flex-direction:column;gap:8px;min-width:0} .team--foes{align-items:stretch} .fbar--down{opacity:.5;filter:grayscale(.65)} .fbar--down .fbar__name{text-decoration:line-through} /* tap a foe to focus fire; the current target is ringed */ .fbar--pick{cursor:pointer;transition:border-color .15s,box-shadow .15s} .fbar--pick:hover{border-color:#c8657f} .fbar--target{border-color:var(--gold)!important;box-shadow:0 0 0 1px var(--gold),0 0 16px rgba(212,175,55,.28)} .fbar--target.fbar--down{box-shadow:none} /* floating control dock pinned to the bottom of the view */ .battle__dock{position:sticky;bottom:10px;z-index:30;margin-top:14px} .battle__bar{background:rgba(12,18,28,.82);backdrop-filter:blur(14px) saturate(155%);-webkit-backdrop-filter:blur(14px) saturate(155%);border:1px solid var(--line); border-radius:16px;padding:12px;box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 48px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px} .abar__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .abar__who{font-family:var(--cond);font-size:13px;color:var(--ink-dim)} .abar__who b{color:var(--ink)} .abar__who small{color:var(--ink-faint);font-family:var(--mono);font-size:10px} .abar__target{font-family:var(--cond);font-size:13px;color:var(--ink-dim);margin-left:auto} .abar__target b{color:#f0c9d4} .abar__target small{font-family:var(--mono);font-size:10px;color:var(--ink-faint)} .abar__target.is-none{color:var(--ink-faint);font-style:italic} .abar__note{font-family:var(--mono);font-size:11px;color:var(--ink-faint);padding:10px 2px;text-align:center} /* fixed five-slot weapon bar + an action row beneath */ .wslots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .abar__actions{display:flex;gap:8px;flex-wrap:wrap} .abar__actions .btn{flex:1 1 auto;min-width:92px} .btn--weapon,.btn--ram,.btn--evade,.wslot-empty{display:flex;flex-direction:column;align-items:flex-start;gap:2px; text-align:left;line-height:1.15;padding:8px 10px;text-transform:none;min-height:48px;justify-content:center;overflow:hidden} .wbtn__name{font-weight:700;font-size:12px;letter-spacing:.02em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wbtn__meta{font-family:var(--mono);font-size:9px;letter-spacing:.02em;color:var(--ink-dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .btn--weapon:hover .wbtn__meta,.btn--ram:hover .wbtn__meta,.btn--evade:hover .wbtn__meta{color:inherit} .btn--weapon.is-spent{opacity:.5} .wslot-empty{opacity:.45;background:rgba(255,255,255,.02);border-style:dashed;color:var(--ink-faint); cursor:default;align-items:center;justify-content:center} .wslot-empty:hover{border-color:var(--line)} .wslot-empty .wbtn__name{font-weight:400;font-size:16px;color:var(--ink-faint)} .btn--evade{border-color:#2a6a78;color:#a6e9f2} .btn--evade:hover{border-color:#5ac8d8;color:#dffafe} .pm__auto.is-on{box-shadow:0 0 0 1px var(--gold)} /* transient pop-up combat log floating over the field */ .battle__flog{position:absolute;left:0;right:0;bottom:8px;display:flex;flex-direction:column;align-items:center; gap:5px;pointer-events:none;z-index:6;padding:0 10px} .flog__line{font-family:var(--mono);font-size:12px;line-height:1.3;max-width:min(560px,92%);text-align:center; background:rgba(8,12,16,.84);border:1px solid var(--line-soft);border-radius:999px;padding:4px 13px;color:var(--ink-dim); opacity:0;transform:translateY(14px) scale(.96);box-shadow:0 6px 18px rgba(0,0,0,.45); transition:opacity .28s ease,transform .3s cubic-bezier(.2,.9,.3,1.25)} .flog__line.is-in{opacity:1;transform:translateY(0) scale(1)} .flog__line.is-out{opacity:0;transform:translateY(-10px) scale(.98);transition:opacity .6s ease,transform .6s ease} .flog__line b{color:var(--ink)} .flog__line.hit b{color:var(--accent2)} .flog__line.win{color:var(--ok);font-weight:700;border-color:var(--ok)} .flog__line.lose{color:var(--danger);font-weight:700;border-color:var(--danger)} .flog__line.evade{color:#7fd6e6} .flog__line.heal{color:#7bd3a0} .flog__line.clutch{color:var(--gold);font-weight:700;border-color:var(--gold)} .flog__line.miss{color:var(--ink-faint)} .flog__line.hint{color:var(--ink-faint);font-style:italic} .fbar{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px; display:flex;flex-direction:column;gap:8px} .fbar--foe{border-color:#3a2630} .fbar__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .fbar__name{font-family:var(--cond);font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .fbar__sub{font-family:var(--mono);font-size:9px;color:var(--ink-faint);letter-spacing:.06em; text-transform:uppercase;white-space:nowrap} .hpwrap{margin-top:0} .hpbar{height:16px;border:1px solid var(--line);border-radius:999px;background:#0b1117;overflow:hidden; position:relative} .hpbar i{display:block;height:100%;background:linear-gradient(90deg,#67b98a,#a6e3bf);transition:width .35s} .hpbar--foe i{background:linear-gradient(90deg,#d76b5a,#f0a594)} .hptext{font-family:var(--mono);font-size:10px;color:var(--ink-dim);margin-top:3px} /* the taming arena taking over the field view */ .tame-inline{display:flex;flex-direction:column;align-items:center;gap:10px; background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px} .tame-continue{min-width:160px} .tame-hint{text-align:center;color:var(--gold);font-size:12px;margin-top:6px;min-height:18px; letter-spacing:.04em} .log{margin-top:16px;height:190px;overflow-y:auto;background:var(--panel-2);border:1px solid var(--line); border-radius:8px;padding:12px 14px;font-family:var(--mono);font-size:12px} .log div{padding:2px 0;color:var(--ink-dim)} .log b{color:var(--ink)} .log .hit b{color:var(--accent2)} .log .miss{color:var(--ink-faint)} .log .clutch{color:var(--gold);font-weight:700} .log .win{color:var(--ok);font-weight:700} .log .lose{color:var(--danger);font-weight:700} .log .evade{color:#7fd6e6} .log .heal{color:#7bd3a0} .eff-tag{color:var(--ok);font-weight:700;font-size:11px;letter-spacing:.04em} .weak-tag{color:var(--ink-faint);font-style:italic;font-size:11px} .log .hint{color:var(--ink-faint);font-style:italic} .log .hit-tag{color:var(--ok);font-weight:700;letter-spacing:.04em} .log .miss-tag{color:#d98a7a;font-weight:700;letter-spacing:.06em} /* status effects: freeze / poison / slow */ .st-tag{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em; padding:0 5px;border-radius:999px;border:1px solid currentColor;line-height:15px;vertical-align:middle; white-space:nowrap} .wbtn__name .st-tag,.lrow__main .st-tag,.log .st-tag{margin-left:6px} .st--freeze{color:#6fd4e6;background:rgba(111,212,230,.12)} .st--poison{color:#8fd46f;background:rgba(143,212,111,.12)} .st--slow{color:#b79be6;background:rgba(183,155,230,.14)} .st--enrage{color:#ff8c5a;background:rgba(255,140,90,.16)} .fbar__namewrap{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto} .fbar__name{min-width:0} .fbar__status{display:inline-flex;gap:4px;flex:0 0 auto} .fbar__status:empty{display:none} .fbar__status .st-tag{margin-left:0} .log .poison{color:#8fd46f} .log .status{color:#9fe0ee} .lrow__status{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.03em;margin-top:1px} .guide__eff{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--ink-dim)} /* ---------- taming modal ---------- */ .modal{position:fixed;inset:0;background:rgba(4,7,13,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;z-index:50;padding:20px} .modal__box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px; max-width:520px;width:100%;max-height:calc(100vh - 40px);overflow-y:auto} .modal-scroll{max-height:48vh;overflow-y:auto;margin:4px -4px 0;padding:2px 4px;display:flex;flex-direction:column;gap:8px} .modal__box .taming{margin:0 auto} .modal__box--evo{text-align:center;max-width:420px;border-color:var(--gold)} .evo-gate{border:1px solid var(--line-soft);border-radius:10px;padding:11px 13px;margin-top:9px; background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:6px} .evo-gate.is-locked{opacity:.6} .evo-gate__name{font-weight:700} .evo-gate__cost{font-size:12px;color:var(--ink-dim,#9fb0bc)} .evo-gate__locked{font-size:12px;color:#c98b3a} .evo-gate .btn{align-self:flex-start} .modal__box--evo .emblem{margin:8px auto;animation:evopop .5s ease} .evo__flash{font-family:var(--mono);letter-spacing:.18em;font-size:13px;color:var(--gold); text-transform:uppercase;margin-bottom:4px;animation:evoglow 1.1s ease infinite alternate} @keyframes evopop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}} @keyframes evoglow{from{text-shadow:0 0 4px rgba(214,178,90,.3)}to{text-shadow:0 0 16px rgba(214,178,90,.85)}} .modal__close{display:block;margin:12px auto 0} /* ---------- hangar ---------- */ .hangar{display:grid;grid-template-columns:300px 1fr;gap:16px} .hroster{display:flex;flex-direction:column;gap:8px;max-height:74vh;overflow-y:auto;padding-right:4px} .hrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line); border-radius:8px;cursor:pointer;background:var(--panel)} .hrow:hover{border-color:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 18%,transparent)} .hrow.is-sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel)); box-shadow:inset 3px 0 0 var(--accent),0 0 18px color-mix(in srgb,var(--accent) 24%,transparent)} .hrow .emblem{width:40px;height:40px;flex:0 0 40px} .hrow .emblem__mono{font-size:15px} .hrow__nm{flex:1;min-width:0} .hrow__nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hrow__nm small{font-family:var(--mono);font-size:10px;color:var(--ink-faint)} .hrow__lv{font-family:var(--mono);font-size:11px;color:var(--ink-dim)} .hcol{display:flex;flex-direction:column;gap:8px;min-width:0} .hsort{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .hsort__lbl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-right:2px} .hsort__btn{font-family:var(--mono);font-size:11px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);color:var(--ink-dim);cursor:pointer} .hsort__btn:hover{border-color:var(--accent);color:var(--ink)} .hsort__btn.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel));color:var(--ink);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 28%,transparent)} .hrow__pts{font-family:var(--mono);font-size:10px;font-weight:700;color:#f3c44d;background:color-mix(in srgb,#f3c44d 16%,transparent);border:1px solid color-mix(in srgb,#f3c44d 45%,transparent);border-radius:999px;padding:1px 7px;white-space:nowrap} .hdetail{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px} .hdetail__head{display:flex;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line); padding-bottom:16px;margin-bottom:8px} .hdetail .emblem{width:110px;height:110px;flex:0 0 110px} .bond{display:flex;align-items:center;gap:10px;margin:8px 0} .bond__bar{flex:1;height:10px;background:#0b1117;border:1px solid var(--line-soft);border-radius:999px; overflow:hidden} .bond__fill{height:100%;background:linear-gradient(90deg,var(--gold),#f5d98a);transition:width .4s} .bond__nums{font-family:var(--mono);font-size:11px;color:var(--ink-dim)} .derived{display:flex;gap:18px;font-family:var(--mono);font-size:12px;color:var(--ink-dim);margin:6px 0 2px} .derived b{color:var(--gold)} .loadout{display:flex;flex-direction:column;gap:8px} .lslot{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line); border-radius:8px;background:#0c1218} .lslot__d{width:10px;height:10px;border-radius:2px} .lslot__t{text-transform:capitalize;min-width:80px;font-size:12px} .lslot__w{flex:1;font-family:var(--mono);font-size:12px;color:var(--ink)} .lslot__w.empty{color:var(--ink-faint)} .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel-3); border:1px solid var(--accent);border-radius:8px;padding:12px 18px;z-index:60; box-shadow:0 8px 30px rgba(0,0,0,.4);animation:pop .3s ease} .toast.gold{border-color:var(--gold)} @keyframes pop{from{opacity:0;transform:transl(-50%,8px)}to{opacity:1}} .empty-note{color:var(--ink-faint);font-family:var(--mono);font-size:12px;padding:30px;text-align:center} /* shop / list rows */ .lrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line); border-radius:8px;background:var(--panel);margin-bottom:8px} .lrow__main{flex:1;min-width:0} .lrow__main b{font-family:var(--cond);font-size:16px} .lrow__main small{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-faint); letter-spacing:.06em;text-transform:uppercase} .price{font-family:var(--mono);color:var(--gold)} @media (max-width:760px){ .hangar{grid-template-columns:1fr} .battle__bar{padding:10px} .wslots{gap:6px} .btn--weapon,.btn--ram,.btn--evade,.wslot-empty{padding:7px 7px;min-height:44px} .wbtn__name{font-size:11px} .wbtn__meta{font-size:8.5px} .abar__actions .btn{min-width:0} .battle__teams{grid-template-columns:1fr} } /* ==================================================================== Time-of-day clock indicator (lower-right, persistent) ==================================================================== */ .clockw{position:fixed;right:16px;bottom:16px;z-index:40;width:210px; background:linear-gradient(180deg,#121a22,#0b1117);border:1px solid var(--line); border-radius:10px;padding:10px 12px;font-family:var(--mono); box-shadow:0 10px 30px rgba(0,0,0,.45);transition:background .8s} .clockw__main{display:flex;align-items:center;gap:8px} .clockw__time{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:.04em} .clockw__phase{font-size:11px;color:var(--accent2);text-transform:capitalize;flex:1} .clockw__gear{margin-left:auto;background:none;border:0;color:var(--ink-faint);cursor:pointer; font-size:14px;line-height:1} .clockw__gear:hover{color:var(--ink)} .clockw__sub{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--ink-dim);margin-top:4px} .clockw__devtag{margin-left:auto;color:var(--gold);font-weight:700;letter-spacing:.1em} .clockw.is-dev{border-color:var(--gold)} .clockw__dev{margin-top:10px;border-top:1px solid var(--line-soft);padding-top:10px} .clockw__phs{display:flex;flex-wrap:wrap;gap:4px} .clockw .mini{background:#0c1218;border:1px solid var(--line);border-radius:5px; padding:3px 6px;font-size:12px;cursor:pointer;color:var(--ink-dim)} .clockw .mini:hover{border-color:var(--accent)} .clockw .mini.on{border-color:var(--gold);color:#fff;background:color-mix(in srgb,var(--gold) 18%,#0c1218)} .clockw__lbl{display:block;font-size:10px;color:var(--ink-faint);margin:8px 0 2px;letter-spacing:.08em} .clockw input[type=range]{width:100%;accent-color:var(--gold)} .clockw__days{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px; font-size:10px;color:var(--ink-dim)} .clockw .hint{margin-top:8px;font-size:10px;line-height:1.4} /* phase-driven accent on the clock chrome */ .clockw.phase-dawn{background:linear-gradient(180deg,#2a1f22,#0b1117)} .clockw.phase-day{background:linear-gradient(180deg,#16222b,#0b1117)} .clockw.phase-noon{background:linear-gradient(180deg,#1a2630,#0b1117)} .clockw.phase-dusk{background:linear-gradient(180deg,#2a1d24,#0b1117)} .clockw.phase-night{background:linear-gradient(180deg,#101a2a,#0b1117)} .clockw.phase-midnight{background:linear-gradient(180deg,#0c1322,#080c14)} /* compact clock docked in the top bar, left of the pilot block */ .clockw--bar{position:relative;right:auto;bottom:auto;z-index:auto;width:auto; box-shadow:none;padding:5px 11px;margin-right:2px;align-self:center} .clockw--bar .clockw__main{gap:7px} .clockw--bar .clockw__time{font-size:14px} .clockw--bar .clockw__phase{font-size:10px;flex:none} .clockw--bar .clockw__gear{font-size:12px;margin-left:6px} .clockw--bar .clockw__sub{margin-top:1px;font-size:9px;gap:8px} .clockw--bar .clockw__dev{position:absolute;top:100%;right:0;margin-top:8px;width:248px; background:linear-gradient(180deg,#121a22,#0b1117);border:1px solid var(--line);border-radius:10px; padding:12px;box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:60} /* ==================================================================== Battle scene - region background with a time-of-day tint, foe on horizon ==================================================================== */ .scene{position:relative;height:200px;border:1px solid var(--line);border-radius:12px; overflow:hidden;margin-bottom:14px;background:#0c1218 no-repeat center;background-size:cover} .scene--bare{background:radial-gradient(120% 140% at 50% 10%,#1a2530,#0a0f14)} .scene--explore{height:clamp(260px,42vh,380px)} .scene__tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light} .scene__loc{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:11px; color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);letter-spacing:.06em;z-index:3;text-transform:capitalize} .scene__zoid{position:absolute;left:50%;bottom:18px;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,0px));z-index:2; filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));transition:transform .35s ease} .scene__zoid .emblem{width:96px;height:96px;border:none;background:transparent; transform:scale(var(--field-scale,1));transform-origin:50% 100%} .scene__zoid .emblem__mono{font-size:30px} .scene__zoid.is-sleeper{opacity:.72;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5)) grayscale(.3)} /* every party member sits on the left (mirrored to face the foes); every foe on the right. --dx/--dy carry the formation slot + domain lift so each Zoid lands at its own spot. */ .scene__zoid--ally{left:26%;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,0px)) scaleX(-1)} .scene__zoid--foe{left:74%;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,0px))} .scene__zoid--me{z-index:4} /* the lead Zoid draws in front */ .scene__zoid--foe .emblem{width:84px;height:84px} /* foes a touch smaller, as before */ .scene__zoid--foe .emblem__mono{font-size:26px} .scene__zoid.is-down{opacity:.24;filter:grayscale(.8) brightness(.75) drop-shadow(0 6px 8px rgba(0,0,0,.5)); transition:opacity .45s ease,filter .45s ease} /* a downed Zoid fades but holds its slot */ /* VFX seed: a struck Zoid flinches + flashes. Each sprite is individually addressable, so a fuller effects layer (lunges, projectiles, impact bursts) can build on the same per-sprite hooks. */ @keyframes zfx-hit{ 0%{filter:none} 15%{filter:brightness(2.4) saturate(.4) drop-shadow(0 0 6px rgba(255,235,180,.9))} 35%{filter:brightness(1.3)} 100%{filter:none} } @keyframes zfx-hit-shake{ 0%,100%{margin-left:0} 20%{margin-left:-5px} 45%{margin-left:4px} 70%{margin-left:-2px} } .scene__zoid.fx-hit .emblem{animation:zfx-hit .34s ease-out, zfx-hit-shake .34s ease-out} /* frame-based VFX overlay: centered on the target sprite, mirror-corrected for allies */ .vfx{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:6} .vfx--mirror{transform:translate(-50%,-50%) scaleX(-1)} .vfx__sheet{width:100%;height:100%;background-repeat:no-repeat;background-position:0 0} .vfx__img{width:100%;height:100%;object-fit:fill;display:block} /* aerial Zoids float with a soft drop-shadow beneath; aquatic ones get a watery tint */ .scene__zoid.is-aerial{filter:drop-shadow(0 22px 12px rgba(0,0,0,.4))} .scene__zoid.is-aquatic{filter:drop-shadow(0 6px 8px rgba(0,0,0,.5)) saturate(1.12) hue-rotate(-8deg)} /* world boss on the battlefield: the admin-uploaded sprite, placed via --dx/--dy + sized by scale */ .scene__boss{left:70%} .scene__boss .boss-sprite-wrap{display:flex;align-items:flex-end;justify-content:center} .scene__boss .scene__boss-img{width:auto;max-width:270px;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(0,0,0,.6))} .scene__boss .boss-sprite-fallback{min-width:120px;min-height:120px;display:flex;align-items:center;justify-content:center;padding:18px;border:2px dashed #6a3b3b;border-radius:12px;background:rgba(70,20,20,.42);color:#ffcaca;font-weight:700;text-align:center;font-size:13px} .scene__boss.is-down{opacity:.3;filter:grayscale(.85) brightness(.7) drop-shadow(0 8px 10px rgba(0,0,0,.5))} /* per-phase lighting over whatever background art is present */ .scene.phase-dawn .scene__tint{background:linear-gradient(180deg,rgba(255,180,120,.5),rgba(120,90,140,.25))} .scene.phase-day .scene__tint{background:linear-gradient(180deg,rgba(255,250,235,.18),rgba(120,160,200,.12))} .scene.phase-noon .scene__tint{background:linear-gradient(180deg,rgba(255,255,245,.28),rgba(255,240,200,.10))} .scene.phase-dusk .scene__tint{background:linear-gradient(180deg,rgba(255,140,90,.45),rgba(70,50,90,.45))} .scene.phase-night .scene__tint{background:linear-gradient(180deg,rgba(40,60,110,.55),rgba(10,16,30,.6))} .scene.phase-midnight .scene__tint{background:linear-gradient(180deg,rgba(20,30,70,.65),rgba(4,8,18,.78))} /* ==================================================================== Energy bar (thin, under the HP bar) ==================================================================== */ .epbar{height:6px;border:1px solid var(--line-soft);border-radius:999px;background:#0b1117; overflow:hidden;margin-top:4px} .epbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5ac8d8,#a6e9f2);transition:width .35s} .hptext small{color:var(--ink-faint)} /* ==================================================================== Online layer - Discord login, pilot panel, social + chat ==================================================================== */ .linkfull{display:block;width:100%;text-align:center;text-decoration:none} .pilot__icon--img{background-size:cover;background-position:center;font-size:0} .pilot__title{font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.04em;line-height:1.1} /* pilot panel */ .panel{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px} .panel__avcol{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 120px} .panel__av{width:100px;height:100px;border-radius:12px;border:1px solid var(--line);background-size:cover; background-position:center;background-color:#0c1218} .panel__av--mono{display:flex;align-items:center;justify-content:center;font-size:46px} .panel__fields{flex:1;min-width:0} .panel__name{display:flex;align-items:baseline;gap:10px;font-family:var(--cond);font-weight:700;font-size:24px;flex-wrap:wrap} .panel__title{font-size:13px} .panel__lv{font-family:var(--mono);font-size:12px;color:var(--ink-dim)} .panel__zoid{display:flex;align-items:center;gap:12px;margin:10px 0 14px} .panel__zoid .emblem{width:48px;height:48px;flex:0 0 48px} .panel__zoid .emblem__mono{font-size:16px} .panel__zk{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint)} .panel__zv{font-family:var(--cond);font-size:16px} .panel textarea.field{resize:vertical;font-family:var(--sans)} /* social two-column */ .social{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start} /* chat */ .chat{display:flex;flex-direction:column;height:60vh;min-height:380px;background:var(--panel); border:1px solid var(--line);border-radius:12px;overflow:hidden} .chat__feed{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px} .chat__bar{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--panel-2)} .chat__bar .field{flex:1} .crow{display:flex;gap:10px} .crow__av{width:44px;height:44px;flex:0 0 44px;border-radius:8px;background-size:cover;background-position:center; background-color:#0c1218;border:1px solid var(--line)} .crow__av--mono{display:flex;align-items:center;justify-content:center;font-size:22px} .crow__body{min-width:0} .crow__head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px} .crow__head b{font-family:var(--cond);font-size:15px} .crow__title{font-family:var(--cond);font-weight:700;font-size:11px} .crow__meta{font-family:var(--mono);font-size:10px;color:var(--ink-faint)} .crow__msg{color:var(--ink);margin-top:2px;word-wrap:break-word} /* roster */ .roster{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto} .pcard{display:flex;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px} .pcard__av{width:48px;height:48px;flex:0 0 48px;border-radius:8px;background-size:cover;background-position:center; background-color:#0c1218;border:1px solid var(--line)} .pcard__av--mono{display:flex;align-items:center;justify-content:center;font-size:24px} .pcard__body{min-width:0;display:flex;flex-direction:column;justify-content:center} .pcard__title{font-family:var(--cond);font-weight:700;font-size:11px;line-height:1.1} .pcard__name{font-family:var(--cond);font-size:15px} .pcard__zoid{font-family:var(--mono);font-size:10px;color:var(--ink-faint)} @media (max-width:760px){ .social{grid-template-columns:1fr} .panel{flex-direction:column} } /* ---- leveling: xp bar + stat allocation ---- */ .hdetail__xp{margin:10px 0 4px} .xpbar{position:relative;height:20px;border:1px solid var(--line);border-radius:6px;background:#0c1218;overflow:hidden} .xpbar__fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.55} .xpbar__txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink)} .stats{margin-top:16px} .stats__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .stats__pts{font-family:var(--cond);font-weight:700;font-size:12px;color:var(--gold,#e0b34a); border:1px solid var(--gold,#e0b34a);border-radius:999px;padding:2px 10px} .stgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px} .strow{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line); border-radius:8px;padding:6px 8px} .strow__k{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em; color:var(--ink-faint);width:62px;flex:0 0 62px} .strow__v{font-family:var(--cond);font-weight:700;font-size:16px;margin-left:auto} .strow__a{font-family:var(--mono);font-size:11px;color:var(--accent2);min-width:34px;text-align:right} .strow__inh{font-family:var(--mono);font-size:11px;font-weight:700;color:#c79bf0;min-width:26px;text-align:right} .lrow.is-locked{opacity:.5} .cap-no{font-family:var(--mono);font-size:11px;font-weight:700;color:#e08a6a;border:1px solid color-mix(in srgb,#e08a6a 45%,transparent);border-radius:6px;padding:4px 8px;white-space:nowrap} .stbtn{width:26px;height:26px;flex:0 0 26px;border-radius:6px;border:1px solid var(--line); background:var(--panel);color:var(--ink);font-size:16px;line-height:1;cursor:pointer} .stbtn:not(:disabled):hover{border-color:var(--accent);color:var(--accent2)} .stbtn:disabled{opacity:.28;cursor:default} @media (max-width:560px){ .stgrid{grid-template-columns:1fr} } /* ---- region population ---- */ .pop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px; font-family:var(--mono);font-size:11px;color:var(--ink-dim); border-top:1px solid var(--line);padding-top:8px} .pop--surge{color:var(--gold,#e0b34a)} .pop__surge{font-family:var(--cond);font-weight:700;font-size:11px;color:var(--gold,#e0b34a); border:1px solid var(--gold,#e0b34a);border-radius:999px;padding:1px 8px} .pop--empty{color:#c2606a;border-top:1px solid var(--line);padding-top:8px;font-style:italic} .card--empty{opacity:.72} /* ===================== app shell: left nav + right chat dock ===================== */ .topbar{position:sticky;top:0;z-index:50} .workspace{flex:1;display:flex;align-items:flex-start} .leftnav{position:sticky;top:60px;max-height:calc(100vh - 72px);overflow-y:auto;overflow-x:hidden;flex:0 0 190px; background:transparent;border-right:0;padding:14px 10px 14px 2px; display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent} .leftnav::-webkit-scrollbar{width:6px} .leftnav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .leftnav::-webkit-scrollbar-track{background:transparent} .navitem{position:relative;display:block;width:100%;text-align:left;cursor:pointer; padding:9px 14px;border:1px solid var(--line);border-radius:9px; background:var(--panel-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); color:var(--ink-dim);font-family:var(--cond);font-size:14px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; box-shadow:inset 0 1px 0 var(--glass-hi);transition:.16s} .navitem__ico{display:none} .navitem__lbl{white-space:nowrap} .navitem:hover{color:#fff;border-color:var(--accent);transform:translateX(2px); box-shadow:inset 0 1px 0 var(--glass-hi),0 0 16px color-mix(in srgb,var(--accent) 26%,transparent)} .navitem.is-active{color:#fff;border-color:var(--accent); background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 26%,var(--panel-2)),color-mix(in srgb,var(--accent) 5%,var(--panel-2))); box-shadow:inset 3px 0 0 var(--accent),inset 0 1px 0 var(--glass-hi),0 0 20px color-mix(in srgb,var(--accent) 28%,transparent)} .navgroup{position:relative;display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer; padding:9px 13px;border:1px solid var(--line);border-radius:9px; background:var(--panel-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); color:var(--ink);font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; box-shadow:inset 0 1px 0 var(--glass-hi);transition:.16s} .navgroup__lbl{flex:1;white-space:nowrap} .navgroup__chev{font-size:16px;line-height:1;color:var(--ink-dim);transition:transform .18s,color .18s} .navgroup:hover{color:#fff;border-color:var(--accent);box-shadow:inset 0 1px 0 var(--glass-hi),0 0 14px color-mix(in srgb,var(--accent) 22%,transparent)} .navgroup.has-active{border-color:var(--accent);color:#fff;box-shadow:inset 3px 0 0 var(--accent),inset 0 1px 0 var(--glass-hi)} .navgroup.is-open .navgroup__chev{transform:rotate(90deg);color:var(--accent)} .navgroup__items{display:flex;flex-direction:column;gap:5px;margin:6px 0 4px 7px;padding-left:9px; border-left:1px solid color-mix(in srgb,var(--accent) 32%,var(--line-soft))} .navgroup__items .navitem{font-size:13px;padding:7px 12px;letter-spacing:.07em} .nav__badge--grp{position:static;top:auto;right:auto} .chatdock{position:sticky;top:60px;height:calc(100vh - 60px);flex:0 0 304px; background:var(--panel-2);border-left:1px solid var(--line); display:flex;flex-direction:column;overflow:hidden} .dock__h{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-faint);padding:13px 14px 6px} .dock__roster{flex:0 0 auto;max-height:28vh;overflow-y:auto;padding:0 14px 8px} .drow{padding:7px 0;border-bottom:1px solid var(--line-soft)} .drow:last-child{border-bottom:0} .drow__title{font-size:10px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1px} .drow__name{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px} .drow__lv{font-family:var(--mono);font-size:11px;color:var(--ink-faint)} .dock__feed{flex:1;min-height:0;overflow-y:auto;padding:8px 14px;border-top:1px solid var(--line)} .dmsg{padding:6px 0} .dmsg__head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:1px} .dmsg__title{font-size:10px;letter-spacing:.04em;text-transform:uppercase} .dmsg__lv{font-family:var(--mono);font-size:10px;color:var(--ink-faint)} .dmsg__body{font-size:13px;color:var(--ink);overflow-wrap:anywhere} .dock__bar{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--line);background:var(--panel-2)} .dock__input{margin:0;flex:1;min-width:0} .dock__send{padding:10px 12px;white-space:nowrap} /* On narrow screens the rails stack: nav becomes a top strip, chat drops below. */ @media (max-width:900px){ .workspace{flex-direction:column} .leftnav{position:static;height:auto;width:100%;flex:none;flex-direction:row;flex-wrap:nowrap; gap:8px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px 12px} .navitem{width:auto;flex:none;padding:9px 12px} .chatdock{position:static;height:auto;width:100%;flex:none;border-left:0;border-top:1px solid var(--line)} .dock__roster{max-height:120px} .dock__feed{height:300px;flex:none} } /* --- manage controls (rename/release) + inventory screen --- */ .btn--danger{border-color:rgba(215,107,90,.45);color:#e0907f} .hdetail__manage{margin-top:2px} .inv__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .matgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:4px} .matcard{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px} .matcard b{font-size:18px;font-family:var(--mono)} .matcard small{color:#8aa0b2;font-size:11px;text-transform:capitalize} .item__row{display:flex;align-items:center;gap:10px} .item__icon{width:40px;height:40px;border-radius:8px;object-fit:contain;background:#0c121a;border:1px solid var(--line);image-rendering:pixelated;flex:none} .item__icon--none{display:flex;align-items:center;justify-content:center;font-size:20px} .use__list{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:50vh;overflow:auto} .use__zoid{display:flex;align-items:center;gap:10px;text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;color:inherit} .use__zoid:hover{border-color:var(--accent)} .use__zoid.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none} .use__zoid .emblem{width:40px;height:40px;flex:none} .use__zinfo{display:flex;flex-direction:column} .exp{display:flex;flex-direction:column;gap:12px} .exp__status{font-size:13px;color:#9fb2c2} .exp__warn{color:var(--danger)} .exp__bar{display:flex;gap:10px} .exp__bar .btn--primary{flex:1} .exp__log{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow:auto} .exp__empty{color:#8aa0b2;font-size:13px;padding:10px 4px} .exp__row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);font-size:13px} .exp__ico{width:24px;text-align:center;font-size:15px;flex:none} .exp__icon{width:24px;height:24px;object-fit:contain;image-rendering:pixelated;flex:none} .exp__txt{flex:1} .exp__row--item{border-color:#3a5028;background:#16210f} .exp__row--win{border-color:#2f6fb0;background:#10202e} .exp__row--warn{border-color:#7a2e3f;background:#241016} .exp__row--encounter{border-color:#5a4a28;background:#1d1810} .exp__row--event{border-color:#4a3a6e;background:#171024} .exp__event{border:1px solid #4a3a6e;border-radius:12px;background:linear-gradient(180deg,#1a1430,#140f24);padding:14px 14px 12px;box-shadow:0 6px 22px rgba(0,0,0,.35)} .exp__event-title{font-weight:700;font-size:15px;color:#cdb8ff;margin-bottom:6px} .exp__event-body{font-size:13px;color:#c5ccd8;line-height:1.5;margin:0 0 12px} .exp__event-opts{display:flex;flex-direction:column;gap:8px} .exp__event-opt{text-align:left;justify-content:flex-start} .tile{position:relative} .tile__badge{position:absolute;top:10px;right:10px;min-width:20px;height:20px;padding:0 6px;border-radius:11px;background:var(--danger);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center} .mail__list{display:flex;flex-direction:column;gap:8px} .mail__card{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);overflow:hidden} .mail__card--unread{border-color:#2f6fb0} .mail__head{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer} .mail__head:hover{background:rgba(255,255,255,.03)} .mail__dot{width:8px;height:8px;border-radius:50%;background:transparent;flex:none} .mail__card--unread .mail__dot{background:#3f8fd0} .mail__meta{display:flex;flex-direction:column;min-width:0;flex:1} .mail__meta b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mail__meta small{color:#8aa0b2;font-size:11px} .mail__gift{font-size:11px;color:#e6cf86;background:#2c2410;border:1px solid #5b4a1d;border-radius:20px;padding:2px 8px;flex:none} .mail__gift--done{color:#8aa0b2;background:#1a2129;border-color:#2a333d} .mail__body{padding:0 12px 12px 30px} .mail__text{margin:2px 0 10px;font-size:13px;color:#cdd9e3;white-space:pre-wrap} .mail__rewards{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .mail__reward{font-size:12px;color:#cfe3b0;background:#16210f;border:1px solid #3a5028;border-radius:7px;padding:3px 8px} .mail__actions{display:flex;gap:8px} /* ---------- field guide ---------- */ .guide__note{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:16px} .guide__note p{margin:0 0 8px;color:var(--ink-dim);font-size:13px;line-height:1.55} .guide__note p:last-child{margin-bottom:0} .guide__table{width:100%;border-collapse:collapse;font-size:13px} .guide__table th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink-faint); font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em} .guide__table td{padding:7px 10px;border-bottom:1px solid var(--line-soft);color:var(--ink)} .guide__type{text-transform:capitalize;color:var(--ink-dim)} .guide__ep{color:#7fd6e6;font-weight:600} .guide-toc{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 16px} .guide-chip{padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2); color:var(--ink-dim);font-family:var(--cond);font-size:12.5px;font-weight:700;letter-spacing:.05em;cursor:pointer; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.15s} .guide-chip:hover{color:#fff;border-color:var(--accent)} .guide-chip.is-on{color:#fff;border-color:var(--accent); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,var(--panel-2)),var(--panel-2)); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 22%,transparent)} .guide-sec p{margin:0 0 10px} .guide-sub{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:var(--accent);font-weight:700;margin:13px 0 7px} .guide-list{margin:0 0 4px;padding-left:18px;color:var(--ink-dim);font-size:13px;line-height:1.55} .guide-list li{margin:0 0 5px} .guide-list li b{color:var(--ink)} .guide-body .guide__table{margin:2px 0 14px} /* ---- party manager ---- */ .party-mgr{display:flex;flex-direction:column;gap:12px} .pm__card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px} .pm__card--lead{border-color:var(--gold,#caa24a);box-shadow:inset 0 0 0 1px rgba(202,162,74,.25)} .pm__head{display:flex;align-items:center;gap:12px} .pm__head .emblem{width:60px;height:60px;flex:0 0 auto;border:none;background:transparent} .pm__ord{flex:0 0 auto;width:46px;text-align:center;font-family:var(--cond);font-weight:700;font-size:12px; text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);border:1px solid var(--line);border-radius:8px;padding:6px 4px} .pm__ord--lead{color:#1a1206;background:var(--gold,#caa24a);border-color:var(--gold,#caa24a)} .pm__id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} .pm__id b{font-family:var(--cond);font-size:16px} .pm__id small{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.03em} .pm__hp{height:7px;border-radius:999px;background:#0b1117;border:1px solid var(--line);overflow:hidden;margin:3px 0 1px} .pm__hp i{display:block;height:100%;background:linear-gradient(90deg,#3aa856,#7ed694)} .pm__ctrls{display:flex;gap:6px;flex-wrap:wrap} .pm__ctrls .btn{padding:5px 10px;font-size:12px} .pm__gear{border-top:1px solid var(--line-soft,#23303a);padding-top:8px} .pm__gear .section-h{margin-top:0} .pm__bench{background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:10px 14px} .pm__benchrow{display:flex;align-items:center;gap:12px;padding:6px 0} .pm__benchrow+.pm__benchrow{border-top:1px solid var(--line-soft,#23303a)} .pm__benchrow .emblem{width:44px;height:44px;flex:0 0 auto;border:none;background:transparent} /* ---- armory: sort bar + collapsible categories + stock tags ---- */ .armory{display:flex;flex-direction:column;gap:6px} .armory__bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px} .armory__barlbl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-right:2px} .btn--chip{padding:4px 10px;font-size:12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink-dim)} .btn--chip.is-on{background:var(--accent,#3a86ff);border-color:var(--accent,#3a86ff);color:#fff} .armory__cat{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer; background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink)} .armory__cat:hover{border-color:var(--line-strong,#3a4a57)} .armory__cat.is-open{border-color:var(--accent,#3a86ff);background:var(--panel-hi,#172029)} .armory__chev{width:14px;flex:0 0 auto;color:var(--ink-faint);font-size:12px} .armory__catico{font-size:16px;flex:0 0 auto} .armory__catname{font-family:var(--cond);font-weight:700;font-size:15px;flex:1 1 auto} .armory__catmeta{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.03em;flex:0 0 auto} .armory__list{display:flex;flex-direction:column;gap:6px;padding:2px 0 8px 6px} .stock-tag{font-family:var(--mono);font-size:10px;letter-spacing:.04em;padding:2px 7px;border-radius:999px; background:#13202a;border:1px solid var(--line);color:#7ed694;white-space:nowrap} .stock-tag--low{color:#e6b15a;border-color:#5a4a2a} .stock-tag--out{color:#c2566a;border-color:#5a2a34;background:#1f131a} /* ===================== player-to-player trading ===================== */ .trade-overlay{position:fixed;inset:0;z-index:70;background:rgba(6,9,12,.85);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;padding:18px} .trade-modal{width:min(860px,100%);max-height:92vh;overflow:auto;background:var(--panel,#10161d); border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.6); display:flex;flex-direction:column} .trade__head{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:13px 16px;border-bottom:1px solid var(--line-soft)} .trade__title b{font-size:15px} .trade__status{margin-left:10px;font-size:11px;color:var(--ink-faint);font-family:var(--mono)} .trade__x{background:transparent;border:0;color:var(--ink-faint);font-size:22px;line-height:1; cursor:pointer;padding:0 4px} .trade__x:hover{color:#fff} .trade__main{display:grid;grid-template-columns:1fr 300px;gap:0;align-items:stretch} .trade__cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px} .trade__col{background:var(--panel-2,#0c1218);border:1px solid var(--line-soft);border-radius:10px; padding:11px;display:flex;flex-direction:column;gap:8px;min-width:0} .trade__colhead{display:flex;align-items:center;justify-content:space-between;gap:6px} .trade__colhead h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)} .trade__acc{font-size:10px;font-family:var(--mono);color:var(--ink-faint)} .trade__acc.is-on{color:#5fc27e} .trade__items{display:flex;flex-direction:column;gap:5px;min-height:54px} .trade__row{display:flex;align-items:center;gap:7px;background:var(--panel-3,#131b24); border:1px solid var(--line-soft);border-radius:7px;padding:5px 8px;font-size:13px} .trade__rk{flex:0 0 auto} .trade__rl{flex:1 1 auto;overflow-wrap:anywhere} .trade__rm,.trade__step{flex:0 0 auto;width:22px;height:22px;border:1px solid var(--line); background:var(--panel-3);border-radius:5px;cursor:pointer;color:var(--ink-faint); font-size:13px;line-height:1;padding:0} .trade__rm:hover{border-color:var(--danger);color:#e0907f} .trade__step:hover{border-color:var(--accent);color:#fff} .trade__empty{font-size:12px;color:var(--ink-faint);font-style:italic;padding:6px 2px} .trade__clabel{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-top:2px} .trade__credits{width:100%;padding:6px 8px;background:var(--panel-3);border:1px solid var(--line); border-radius:6px;color:var(--ink);font-family:var(--mono)} .trade__add{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px} .btn--mini{font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px; border:1px solid var(--line);background:var(--panel-3);border-radius:6px;cursor:pointer;color:var(--ink)} .btn--mini:hover{border-color:var(--accent);color:#fff} .btn--mini:disabled{opacity:.4;cursor:not-allowed} .trade__chat{border-left:1px solid var(--line-soft);display:flex;flex-direction:column;min-width:0} .trade__chath{padding:10px 12px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)} .trade__feed{flex:1 1 auto;overflow-y:auto;max-height:330px;min-height:120px;padding:0 12px; display:flex;flex-direction:column;gap:5px} .trade__msg{align-self:flex-start;max-width:85%} .trade__msg.is-mine{align-self:flex-end} .trade__mb{display:inline-block;background:var(--panel-3);border:1px solid var(--line-soft); border-radius:9px;padding:5px 9px;font-size:13px;overflow-wrap:anywhere} .trade__msg.is-mine .trade__mb{background:var(--accent,#3a86ff);border-color:var(--accent,#3a86ff);color:#fff} .trade__chatbar{display:flex;gap:6px;padding:8px 12px 12px} .trade__chatin{flex:1 1 auto;min-width:0;padding:7px 9px;background:var(--panel-3); border:1px solid var(--line);border-radius:6px;color:var(--ink)} .trade__note{margin:0 14px;padding:8px 11px;background:rgba(215,107,90,.12); border:1px solid rgba(215,107,90,.4);border-radius:8px;font-size:12px;color:#e8a392} .trade__foot{display:flex;gap:9px;justify-content:flex-end;padding:13px 16px;border-top:1px solid var(--line-soft);flex-wrap:wrap} .btn.is-on{background:#2c6e49;border-color:#2c6e49;color:#fff} .trade-picker{position:fixed;inset:0;z-index:80;background:rgba(6,9,12,.7); display:flex;align-items:center;justify-content:center;padding:18px} .trade-picker__box{width:min(420px,100%);max-height:80vh;overflow:auto;background:var(--panel,#10161d); border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.6)} .trade-picker__head{display:flex;align-items:center;justify-content:space-between; padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:14px} .trade-picker__list{display:flex;flex-direction:column;gap:5px;padding:11px 12px} .trade-picker__row{display:flex;align-items:center;gap:8px;text-align:left;width:100%; background:var(--panel-3);border:1px solid var(--line-soft);border-radius:8px; padding:8px 10px;cursor:pointer;color:var(--ink);font-size:13px} .trade-picker__row:hover{border-color:var(--accent)} @media (max-width:720px){ .trade__main{grid-template-columns:1fr} .trade__chat{border-left:0;border-top:1px solid var(--line-soft)} .trade__feed{max-height:200px} } /* ===================== trade page (look up a pilot, verify, deal) ===================== */ .tradepage__bar{display:flex;gap:8px;margin:12px 0 4px;max-width:520px} .tradepage__in{flex:1 1 auto;min-width:0} .tradepage__result{margin-top:14px} .tradeinbox{max-width:520px;margin:12px 0 6px} .tradeinbox--empty{margin:8px 0 2px} .tradeinbox__head{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-dim,#9fb0bc);margin-bottom:8px} .tradeinbox__row{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:8px; background:var(--panel-2,#16212c);border:1px solid var(--line,#27333d);border-radius:10px} .tradeinbox__row.is-new{border-color:var(--gold,#d8a43a);background:rgba(216,164,58,.08)} .tradeinbox__dot{width:8px;height:8px;border-radius:50%;background:#3a4a57;flex:none} .tradeinbox__row.is-new .tradeinbox__dot{background:var(--gold,#d8a43a);box-shadow:0 0 0 3px rgba(216,164,58,.18)} .tradeinbox__info{flex:1;min-width:0} .tradeinbox__name{display:block;font-size:14px} .tradeinbox__sub{display:block;color:var(--ink-dim,#9fb0bc);font-size:11px;margin-top:1px} .tradeinbox__open{flex:none;padding:7px 16px} .tradepcard{display:flex;gap:14px;align-items:center;max-width:520px; background:var(--panel-2,#0c1218);border:1px solid var(--line);border-radius:12px;padding:14px} .tradepcard__av{flex:0 0 auto;width:72px;height:72px;border-radius:12px; background-size:cover;background-position:center;border:1px solid var(--line)} .tradepcard__av--mono{display:flex;align-items:center;justify-content:center; font-size:34px;background:var(--panel-3,#131b24)} .tradepcard__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px} .tradepcard__name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .tradepcard__name b{font-size:17px} .tradepcard__title{font-size:10px;letter-spacing:.05em;text-transform:uppercase} .tradepcard__lv{font-family:var(--mono);font-size:12px;color:var(--ink-faint)} .tradepcard__kv{display:flex;gap:8px;align-items:baseline;font-size:13px} .tradepcard__k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)} .tradepcard__v{color:var(--ink)} .tradepcard__go{margin-top:6px;align-self:flex-start} @media (max-width:560px){ .tradepcard{flex-direction:column;align-items:flex-start} } /* ===================== scouting ===================== */ .section-h--sub{font-size:12px;opacity:.85;margin-top:16px} .scout__active{display:flex;flex-direction:column;gap:8px;margin-bottom:6px} .scout__mission{display:flex;flex-direction:column;gap:6px;background:var(--panel-2,#0c1218); border:1px solid var(--line);border-radius:10px;padding:11px 13px} .scout__mission.is-ready{border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,175,55,.25)} .scout__mtop{display:flex;align-items:center;justify-content:space-between;gap:8px} .scout__mzoids{font-size:13px;color:var(--ink-faint);overflow-wrap:anywhere} .scout__timer{font-family:var(--mono);font-size:13px;color:var(--ink)} .scout__stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)} .scout__banner{margin:10px 0;padding:9px 12px;border-radius:8px;font-size:13px; background:rgba(58,134,255,.1);border:1px solid rgba(58,134,255,.4);color:#9fc1ff} .loadout--locked{padding:4px 0} .scout__diff{font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:20px;font-weight:700} .diff--easy{background:rgba(95,194,126,.18);color:#7fd6a0;border:1px solid rgba(95,194,126,.5)} .diff--medium{background:rgba(90,160,255,.16);color:#8fb8ff;border:1px solid rgba(90,160,255,.5)} .diff--hard{background:rgba(230,160,70,.16);color:#e7b06a;border:1px solid rgba(230,160,70,.5)} .diff--extreme{background:rgba(215,90,90,.16);color:#e89090;border:1px solid rgba(215,90,90,.5)} .scout-picker{position:fixed;inset:0;z-index:80;background:rgba(6,9,12,.78);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;padding:18px} .scout-picker__box{width:min(460px,100%);max-height:86vh;overflow:auto;background:var(--panel,#10161d); border:1px solid var(--line);border-radius:13px;box-shadow:0 22px 56px rgba(0,0,0,.6)} .scout-picker__head{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line-soft)} .scout-picker__head b{flex:1 1 auto} .scout-picker__count{font-family:var(--mono);font-size:12px;color:var(--ink-faint)} .scout-picker__sub{padding:9px 15px 0;font-family:var(--mono);font-size:11px;color:var(--ink-faint)} .scout-picker__list{display:flex;flex-direction:column;gap:6px;padding:12px 14px} .scout-picker__row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%; text-align:left;background:var(--panel-3,#131b24);border:1px solid var(--line-soft); border-radius:8px;padding:9px 11px;cursor:pointer;color:var(--ink);font-size:13px} .scout-picker__row:hover{border-color:var(--accent)} .scout-picker__row.is-on{border-color:var(--gold);background:rgba(212,175,55,.12)} .scout-picker__hp{font-family:var(--mono);font-size:11px;color:var(--ink-faint)} .scout-picker__foot{display:flex;justify-content:flex-end;gap:9px;padding:12px 15px;border-top:1px solid var(--line-soft)} .scout-res__body{padding:14px 16px;display:flex;flex-direction:column;gap:4px} .scout-res__verdict{font-size:15px;font-weight:700;margin-bottom:6px} .scout-res__verdict.is-ok{color:#7fd6a0} .scout-res__verdict.is-fail{color:#e89090} .scout-res__h{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-top:10px} .scout-res__row{font-size:13px;color:var(--ink)} .scout-res__row--dim{color:var(--ink-faint);font-style:italic} .scout-res__row--dmg{color:#e89090} /* ===================== news bulletins ===================== */ .nav__badge{position:absolute;top:5px;right:7px;min-width:16px;height:16px;padding:0 4px;border-radius:9px; background:var(--danger,#d76b5a);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center} .navitem{position:relative} .news__list{display:flex;flex-direction:column;gap:10px} .news__card{background:var(--panel-2,#0c1218);border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:12px 15px} .news__card.is-pinned{background:rgba(212,175,55,.06)} .news--info{border-left-color:#5a9bff} .news--alert{border-left-color:#e6884a} .news--event{border-left-color:#7fd6a0} .news--update{border-left-color:#b79be6} .news__top{display:flex;align-items:center;gap:10px;margin-bottom:5px} .news__kind{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)} .news__pin{font-size:10px;color:var(--gold);font-weight:700} .news__date{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-faint)} .news__title{font-family:var(--cond);font-weight:700;font-size:16px;color:var(--ink)} .news__body{margin-top:5px;font-size:13px;color:var(--ink-dim);white-space:pre-wrap;line-height:1.45} /* ===================== guilds ===================== */ .panel__guild{display:inline-block;margin-top:2px;font-family:var(--mono);font-size:11px;letter-spacing:.03em; color:#cdb4ff;background:rgba(150,120,230,.14);border:1px solid rgba(150,120,230,.4);border-radius:20px;padding:2px 9px} .guildpanel{margin-top:16px} .guild__cur{display:flex;align-items:center;gap:12px;background:var(--panel-2,#0c1218);border:1px solid var(--line);border-radius:10px;padding:11px 13px} .guild__badge{flex:0 0 auto;min-width:46px;height:46px;display:flex;align-items:center;justify-content:center; background:rgba(150,120,230,.14);border:1px solid rgba(150,120,230,.4);border-radius:10px;color:#cdb4ff;font-family:var(--mono);font-weight:700;font-size:13px} .guild__badge--sm{min-width:38px;height:38px;font-size:11px} .guild__id{flex:1 1 auto;min-width:0} .guild__id b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .guild__id small{color:var(--ink-faint);font-size:11px} .guild__list{display:flex;flex-direction:column;gap:7px;margin-top:10px} .guild__row{display:flex;align-items:center;gap:11px;background:var(--panel-3,#10171f);border:1px solid var(--line-soft);border-radius:9px;padding:9px 11px} .guild__row.is-mine{border-color:rgba(150,120,230,.5)} .guild__youtag{font-size:11px;color:#cdb4ff;font-style:italic} .guild__create{margin-top:14px} .guild__form{display:flex;gap:8px} .guild__form .inp{flex:1 1 auto} .guild__taginp{flex:0 0 84px;text-transform:uppercase} .inp{width:100%;background:var(--panel-3,#10171f);border:1px solid var(--line);border-radius:8px; padding:9px 11px;color:var(--ink);font-size:13px;margin-top:7px} .inp:focus{outline:none;border-color:var(--accent)} /* ===================== variant submission ===================== */ .vsub__form{display:flex;flex-direction:column;gap:2px;background:var(--panel-2,#0c1218);border:1px solid var(--line);border-radius:10px;padding:14px 16px} .vsub__colors{display:flex;align-items:flex-end;gap:16px;margin:10px 0 4px;flex-wrap:wrap} .vsub__colorlbl{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--ink-faint);font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em} .vsub__color{width:54px;height:34px;border:1px solid var(--line);border-radius:7px;background:none;cursor:pointer;padding:2px} .vsub__swatch{width:46px;height:46px;border-radius:10px;border:1px solid var(--line);align-self:center} .vsub__list{display:flex;flex-direction:column;gap:7px} .vsub__row{display:flex;align-items:center;gap:11px;background:var(--panel-3,#10171f);border:1px solid var(--line-soft);border-left-width:4px;border-radius:9px;padding:9px 11px} .vsub--pending{border-left-color:#e6b04a} .vsub--approved{border-left-color:#67b98a} .vsub--denied{border-left-color:#d76b5a} .vsub__sw{flex:0 0 auto;width:34px;height:34px;border-radius:7px;border:1px solid var(--line)} .vsub__info{flex:1 1 auto;min-width:0} .vsub__info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vsub__info small{color:var(--ink-faint);font-size:11px} .vsub__status{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap} .vsub--pending .vsub__status{color:#e6b04a} .vsub--approved .vsub__status{color:#7fd6a0} .vsub--denied .vsub__status{color:#e89090} /* ===================== teams ===================== */ .panel__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px} .panel__team{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.03em; color:#ffd9a0;background:rgba(220,150,70,.14);border:1px solid rgba(220,150,70,.4);border-radius:20px;padding:2px 9px} .teampanel{margin-bottom:18px} .team__cur{display:flex;align-items:center;gap:12px;background:var(--panel-2,#0c1218);border:1px solid var(--line);border-radius:10px;padding:11px 13px} .team__badge{flex:0 0 auto;min-width:46px;height:46px;display:flex;align-items:center;justify-content:center; background:rgba(220,150,70,.14);border:1px solid rgba(220,150,70,.4);border-radius:10px;color:#ffd9a0;font-family:var(--mono);font-weight:700;font-size:13px} .team__badge--sm{min-width:38px;height:38px;font-size:11px} .team__id{flex:1 1 auto;min-width:0} .team__id b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .team__id small{color:var(--ink-faint);font-size:11px} .team__rec{flex:0 0 auto;text-align:right} .team__rec b{display:block;color:var(--gold);font-family:var(--cond)} .team__rec small{color:var(--ink-faint);font-size:11px} .team__roster{display:flex;flex-direction:column;gap:7px;margin-top:10px} .team__mrow{background:var(--panel-3,#10171f);border:1px solid var(--line-soft);border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:6px} .team__mrow.is-me{border-color:rgba(220,150,70,.5)} .team__mhead{display:flex;align-items:center;gap:9px} .team__lead{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#ffd9a0;background:rgba(220,150,70,.16);border-radius:5px;padding:1px 6px} .team__zoid{font-size:12px;color:var(--ink-dim)} .team__zsel{margin-top:0} .team__acts{margin-top:11px} .team__browse{margin-top:6px} .team__list{display:flex;flex-direction:column;gap:7px;margin-top:8px} .team__row{display:flex;align-items:center;gap:11px;background:var(--panel-3,#10171f);border:1px solid var(--line-soft);border-radius:9px;padding:9px 11px} .team__row.is-mine{border-color:rgba(220,150,70,.5)} .team__rank{flex:0 0 auto;width:30px;font-family:var(--mono);font-size:12px;color:var(--ink-faint);text-align:center} .team__youtag{font-size:11px;color:#ffd9a0;font-style:italic} .team__full{font-size:11px;color:var(--ink-faint);font-style:italic} .team__create{margin-top:14px} /* ===================== battle tournaments ===================== */ .tourn__card{background:var(--panel-2,#0c1218);border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:11px} .tourn--open{border-left:3px solid #e0b34a} .tourn--active{border-left:3px solid #5ac8d8} .tourn--complete{border-left:3px solid #67b98a} .tourn__head{display:flex;align-items:center;justify-content:space-between;gap:10px} .tourn__title{display:flex;align-items:center;gap:9px;min-width:0} .tourn__title b{font-family:var(--cond);font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tmode{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;border-radius:5px;padding:2px 6px;white-space:nowrap} .tmode--ai{color:#9fd0ff;background:rgba(90,155,255,.14);border:1px solid rgba(90,155,255,.35)} .tmode--pvp{color:#ffc09f;background:rgba(220,120,70,.14);border:1px solid rgba(220,120,70,.35)} .tourn__status{font-family:var(--mono);font-size:10px;letter-spacing:.04em;white-space:nowrap} .tstatus--open{color:#e0b34a}.tstatus--active{color:#5ac8d8}.tstatus--complete{color:#67b98a} .tourn__desc{font-size:13px;color:var(--ink-dim);margin-top:5px} .tourn__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:7px;font-size:12px;color:var(--ink-faint)} .tourn__reward{color:#e6c46a} .tourn__champ{color:#ffd9a0;font-weight:700} .tourn__ban{margin-top:5px;font-size:11px;color:#e89090} .tourn__acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:11px} .tourn__reg{color:#7fd6a0;font-size:13px;font-weight:600} .tourn__note{font-size:12px;color:var(--ink-faint);font-style:italic} .tourn__bracket-wrap{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:11px;overflow-x:auto} .bracket{display:flex;gap:18px;min-width:min-content} .bracket__round{display:flex;flex-direction:column;justify-content:space-around;gap:10px;min-width:150px} .bracket__rlabel{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);text-align:center;margin-bottom:2px} .match{background:var(--panel-3,#10171f);border:1px solid var(--line-soft);border-radius:8px;padding:5px 7px;position:relative} .match.is-active{border-color:rgba(90,200,216,.5)} .match__side{display:flex;align-items:center;padding:4px 6px;border-radius:5px;font-size:12px} .match__side+.match__side{margin-top:3px} .match__side.is-win{background:rgba(103,185,138,.13);color:#bfe8cf;font-weight:600} .match__side.is-mine .match__tn{color:#ffd9a0} .match__side.is-empty{opacity:.5} .match__tn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .match__score{position:absolute;top:-8px;right:8px;font-family:var(--mono);font-size:10px;color:var(--ink-faint);background:var(--panel-2);padding:0 4px;border-radius:4px} .match__live{position:absolute;top:-8px;right:8px;font-family:var(--mono);font-size:9px;color:#5ac8d8;background:var(--panel-2);padding:0 4px;border-radius:4px;text-transform:uppercase} .bracket__champ{font-family:var(--cond);font-size:15px;color:#ffd9a0;margin-bottom:10px} .bracket__teams{display:flex;flex-direction:column;gap:5px;margin:8px 0} .bracket__team{background:var(--panel-3,#10171f);border:1px solid var(--line-soft);border-radius:7px;padding:7px 10px;font-size:13px} .bracket__team.is-mine{border-color:rgba(220,150,70,.5);color:#ffd9a0} /* ===================== world bosses ===================== */ .boss-ribbon{display:flex;align-items:center;gap:12px;cursor:pointer;margin:0 0 14px;padding:11px 15px;border-radius:11px; background:linear-gradient(100deg,rgba(150,30,40,.30),rgba(120,40,90,.22));border:1px solid rgba(220,80,90,.55); box-shadow:0 0 0 1px rgba(220,80,90,.12),0 6px 20px -10px rgba(220,40,60,.6);animation:bossPulse 2.4s ease-in-out infinite} @keyframes bossPulse{0%,100%{box-shadow:0 0 0 1px rgba(220,80,90,.12),0 6px 20px -12px rgba(220,40,60,.5)}50%{box-shadow:0 0 0 1px rgba(220,80,90,.3),0 8px 26px -8px rgba(220,40,60,.8)}} .boss-ribbon__icon{font-size:24px;flex:0 0 auto} .boss-ribbon__txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} .boss-ribbon__txt b{font-family:var(--cond);font-size:16px;color:#ffd6da;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .boss-ribbon__txt small{font-size:11px;color:#e8a9b0;font-family:var(--mono)} .boss-ribbon__cta{flex:0 0 auto;font-family:var(--cond);font-weight:700;color:#fff;background:rgba(220,60,75,.55);border-radius:8px;padding:6px 12px} .boss-hero{display:flex;gap:14px;align-items:center;background:var(--panel-2,#0c1218);border:1px solid rgba(220,80,90,.4);border-radius:13px;padding:14px;margin-bottom:14px} .boss-hero__img{width:120px;height:120px;object-fit:contain;flex:0 0 auto;image-rendering:pixelated;filter:drop-shadow(0 4px 14px rgba(220,40,60,.5))} .boss-hero__body{flex:1 1 auto;min-width:0} .boss-hero__name{font-family:var(--cond);font-size:22px;display:flex;align-items:center;gap:10px} .boss-hero__tag{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#ffb3bb;background:rgba(220,60,75,.2);border:1px solid rgba(220,80,90,.5);border-radius:5px;padding:2px 6px} .boss-hero__desc{font-size:13px;color:var(--ink-dim);margin:4px 0 8px} .boss-hp{margin-top:8px} .boss-hp__bar{height:16px;border-radius:8px;background:rgba(0,0,0,.45);border:1px solid rgba(220,80,90,.35);overflow:hidden} .boss-hp__fill{height:100%;background:linear-gradient(90deg,#d83a4a,#ff7a48);transition:width .4s ease} .boss-hp__txt{font-family:var(--mono);font-size:11px;color:#ffc3c9;margin-top:4px} .boss-timer{margin-top:8px;font-size:13px;color:var(--ink-dim)} .boss-timer b{color:#ffd6da;font-family:var(--mono)} .boss-weapons{margin-bottom:14px} .boss-weap{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel-3,#10171f);border:1px solid var(--line-soft);border-radius:8px;padding:8px 11px;font-size:13px;margin-bottom:6px} .boss-weap__aoe{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#ffcaa0;background:rgba(220,120,70,.16);border:1px solid rgba(220,120,70,.4);border-radius:5px;padding:2px 7px;white-space:nowrap} .boss-engage{text-align:center;margin-bottom:16px} .btn--lg{font-size:15px;padding:11px 20px} .boss-me{background:var(--panel-2,#0c1218);border:1px solid rgba(220,150,70,.4);border-radius:9px;padding:10px 13px;margin-bottom:14px;font-size:14px} .boss-me--out{border-color:var(--line-soft);color:var(--ink-faint);font-style:italic} .boss-me__d{color:var(--ink-dim)} .rankbadge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;border-radius:6px;font-family:var(--cond);font-weight:800;font-size:13px} .rank--S{color:#1a1208;background:linear-gradient(135deg,#ffe08a,#f0b343);box-shadow:0 0 10px -2px rgba(240,180,70,.8)} .rank--A{color:#fff;background:#c0476a} .rank--B{color:#fff;background:#7d5bc0} .rank--C{color:#dfe7ef;background:#3a6ea5} .rank--D{color:#cdd6df;background:#4a5763} .rank--none{color:#6f8597;background:rgba(255,255,255,.06)} .boss-tiers{margin-bottom:16px} .boss-tiers__grid{display:flex;flex-direction:column;gap:6px} .boss-tier{display:flex;align-items:center;gap:11px;background:var(--panel-3,#10171f);border:1px solid var(--line-soft);border-radius:8px;padding:8px 11px} .boss-tier__body{flex:1 1 auto;min-width:0} .boss-tier__thr{font-family:var(--mono);font-size:11px;color:var(--ink-faint)} .boss-tier__rw{font-size:12px;color:var(--ink-dim)} .boss-lb{margin-bottom:10px} .boss-lbrow{display:flex;align-items:center;gap:10px;background:var(--panel-3,#10171f);border:1px solid var(--line-soft);border-radius:8px;padding:8px 11px;margin-bottom:5px} .boss-lbrow.is-me{border-color:rgba(220,150,70,.55);background:rgba(220,150,70,.08)} .boss-lbrow__place{font-family:var(--mono);font-size:12px;color:var(--ink-faint);width:34px} .boss-lbrow__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .boss-lbrow__dmg{font-family:var(--mono);font-size:13px;color:#ffc3c9} /* crafting tab */ .invtabs{display:flex;gap:8px;margin:10px 0 14px} .invtab{background:#16212c;border:1px solid #27333d;border-radius:7px;padding:7px 16px;cursor:pointer;color:var(--ink-dim,#9fb0bc);font-weight:600} .invtab.is-on{background:var(--gold,#d8a43a);border-color:var(--gold,#d8a43a);color:#06090c} .invcat-wrap{margin-top:12px} .invcat{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer; background:var(--panel-2,#16212c);border:1px solid var(--line,#27333d);border-radius:9px; padding:11px 14px;color:var(--ink,#e6eef3);font-family:inherit} .invcat:hover{border-color:var(--accent,#39c2d7)} .invcat__chev{display:inline-block;transition:transform .15s ease;color:var(--ink-dim,#9fb0bc);font-size:18px;line-height:1} .invcat.is-open .invcat__chev{transform:rotate(90deg)} .invcat__t{font-weight:700;font-size:14px;letter-spacing:.02em;flex:1} .invcat__n{font-size:12px;font-weight:700;color:var(--ink-dim,#9fb0bc);background:rgba(255,255,255,.05); border:1px solid var(--line-soft,#1e2730);border-radius:999px;min-width:24px;text-align:center;padding:2px 8px} .invcat__body{padding:8px 2px 2px} .craft-res{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px} .craft-res__chip{background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:9px;padding:8px 12px;min-width:84px;text-align:center} .craft-res__chip b{display:block;font-size:18px} .craft-res__chip small{font-size:10px;letter-spacing:.04em;color:var(--ink-dim,#9fb0bc);text-transform:uppercase} .craft-dmg{border-left:3px solid #8f2f23} .craft-item{border:1px solid var(--line-soft);border-radius:9px;padding:10px 12px;margin-top:8px} .craft-item__hd{display:flex;flex-direction:column;gap:2px;margin-bottom:8px} .craft-item__hd small{color:var(--ink-dim,#9fb0bc)} .craft-item__acts{display:flex;flex-direction:column;gap:6px} .craft-item__acts .btn{text-align:left;font-size:12px;line-height:1.3} /* ===================== Factions / Faction War ===================== */ .facbadge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px; font-size:12px;font-weight:700;color:var(--ink); background:color-mix(in srgb,var(--fac,#8fa3b5) 16%,transparent); border:1px solid color-mix(in srgb,var(--fac,#8fa3b5) 55%,transparent)} .facbadge--sm{font-size:11px;padding:2px 8px} .facbadge__dot{width:9px;height:9px;border-radius:50%; background:linear-gradient(135deg,var(--fac,#8fa3b5),var(--fac2,var(--fac,#8fa3b5)) 55%,var(--fac3,var(--fac2,var(--fac,#8fa3b5)))); box-shadow:0 0 8px color-mix(in srgb,var(--fac,#8fa3b5) 80%,transparent);flex:0 0 auto} .pcard__fac{margin-top:6px} .pilot__fac{margin-top:5px} .facwar{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px;margin:2px 0 4px; background:linear-gradient(180deg,color-mix(in srgb,var(--danger) 14%,transparent),transparent); border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);color:var(--ink);font-size:13px} .facwar b{font-weight:800} .facwar__dot{width:9px;height:9px;border-radius:50%;background:var(--danger); box-shadow:0 0 10px var(--danger);animation:facpulse 2s ease-in-out infinite;flex:0 0 auto} .facwar--cd{background:linear-gradient(180deg,color-mix(in srgb,var(--ink-faint) 16%,transparent),transparent); border-color:var(--line)} .facwar--cd .facwar__dot{background:var(--ink-dim);box-shadow:none;animation:none} @keyframes facpulse{0%,100%{opacity:1}50%{opacity:.35}} .facboard{display:flex;flex-direction:column;gap:8px;margin:4px 0 2px} .facrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px; background:var(--panel-2);border:1px solid var(--line)} .facrow--me{border-color:color-mix(in srgb,var(--fac,#8fa3b5) 70%,transparent); background:color-mix(in srgb,var(--fac,#8fa3b5) 9%,var(--panel-2))} .facrow__rk{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink-dim);min-width:26px} .facrow__body{flex:1;min-width:0} .facrow__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px} .facrow__nm{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .facrow__pts{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--fac,var(--accent));white-space:nowrap} .facrow__bar{height:7px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden} .facrow__bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,var(--fac2,var(--fac,#8fa3b5)),var(--fac,#8fa3b5)); transition:width .5s ease} .facrow__you{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; color:var(--fac,var(--accent));padding:2px 7px;border-radius:999px; border:1px solid color-mix(in srgb,var(--fac,#8fa3b5) 55%,transparent);flex:0 0 auto} .facstats{display:flex;gap:10px;margin:2px 0 2px;flex-wrap:wrap} .facstat{flex:1;min-width:130px;padding:13px 15px;border-radius:12px;background:var(--panel-2); border:1px solid var(--line);text-align:center} .facstat b{display:block;font-family:var(--mono);font-size:22px;font-weight:800;color:var(--gold)} .facstat small{display:block;margin-top:3px;font-size:11px;color:var(--ink-dim); text-transform:uppercase;letter-spacing:.04em} .facpick{display:flex;flex-direction:column;gap:10px} .facpick__card{padding:12px 14px;border-radius:12px;background:var(--panel-2); border:1px solid var(--line);position:relative} .facpick__card.is-cur{border-color:color-mix(in srgb,var(--fac,#8fa3b5) 70%,transparent); background:color-mix(in srgb,var(--fac,#8fa3b5) 10%,var(--panel-2))} .facpick__h{display:flex;align-items:center;gap:8px;margin-bottom:6px} .facpick__h b{font-size:14px;font-weight:800;color:var(--ink)} .facpick__tag{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; color:var(--fac,var(--accent));padding:2px 8px;border-radius:999px; border:1px solid color-mix(in srgb,var(--fac,#8fa3b5) 55%,transparent)} .facpick__h .facbadge__dot{--fac:var(--fac)} .facpick__blurb{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink-dim)} .facpick__card .btn{width:100%} /* ===================== Activity Log ===================== */ .actlog{display:flex;flex-direction:column;gap:7px} .actrow{display:flex;align-items:flex-start;gap:11px;padding:10px 13px;border-radius:11px; background:var(--panel-2);border:1px solid var(--line-soft)} .actrow__ic{font-size:16px;line-height:1.3;flex:0 0 auto;width:20px;text-align:center} .actrow__body{flex:1;min-width:0} .actrow__txt{font-size:13px;line-height:1.45;color:var(--ink)} .actrow__at{margin-top:2px;font-size:11px;color:var(--ink-faint)} /* ---- Release-for-points mini-cards ---- */ .zrelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:10px} .zrelcard{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:12px; background:var(--panel-2);border:1px solid var(--line)} .zrelcard--keep{border-color:color-mix(in srgb,var(--gold) 38%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 7%,transparent),transparent),var(--panel-2)} .zrelcard .emblem{width:54px;height:54px;flex:0 0 54px} .zrelcard .emblem__mono{font-size:19px} .zrelcard__info{flex:1;min-width:0} .zrelcard__top{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .zrelcard__nm{font-size:13.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .zrelcard__tags{display:inline-flex;gap:4px;flex-wrap:wrap} .ztag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:1px 5px;border-radius:5px; border:1px solid currentColor;line-height:1.5} .ztag--main{color:var(--gold)} .ztag--party{color:var(--accent)} .ztag--scout{color:var(--warn)} .zrelcard__meta{display:flex;align-items:center;gap:6px;margin:4px 0 5px;flex-wrap:wrap} .zrelcard__stats{font-family:var(--mono);font-size:10.5px;line-height:1.35;color:var(--ink-dim);letter-spacing:.01em} .zrelcard__act{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto} .zrelcard__act .facrow__pts{font-size:12px} .zrelcard__act .btn{padding:5px 14px;font-size:12px} /* ---- Hangar: view toggle, card grid, pager, manage modal ---- */ .hangarbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px} .hview{display:inline-flex;gap:3px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px} .hview__btn{font-size:12px;font-weight:600;color:var(--ink-dim);background:none;border:none;border-radius:6px;padding:4px 11px;cursor:pointer;white-space:nowrap} .hview__btn:hover{color:var(--ink)} .hview__btn.is-on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--ink)} .hgcard{cursor:pointer;transition:transform .08s ease,border-color .12s ease,background .12s ease} .hgcard:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-1px)} .hgcard.is-sel{border-color:var(--accent)} .hgcard--away{opacity:.7} .hgcard__chev{flex:0 0 auto;align-self:center;font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap;opacity:.9} .ztag--pts{color:var(--ok)} .hgpager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;flex-wrap:wrap} .hgpager__lbl{font-size:12px;color:var(--ink-dim);font-family:var(--mono)} .hgpager .btn{padding:5px 14px;font-size:12px} .modal__box--manage{max-width:680px;position:relative} .modal__box--manage .hdetail{border:none;background:none;padding:0;box-shadow:none} .modal__box--manage h2{padding-right:32px} .modal__x{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:8px;border:1px solid var(--line); background:var(--panel-2);color:var(--ink-dim);font-size:15px;line-height:1;cursor:pointer;z-index:3; display:flex;align-items:center;justify-content:center} .modal__x:hover{color:var(--ink);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))} /* ============ Zoids Lab — core incubation ============ */ .lab-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 14px} .lab-bar__count{font-family:var(--mono);font-size:12px;color:var(--ink-dim);letter-spacing:.03em} .lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:18px} .lab-unit{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px 15px 13px;display:flex;flex-direction:column;align-items:center} .lab-unit--empty{opacity:.92} /* --- the containment tank --- */ .tank{position:relative;width:152px;height:252px;margin:2px auto 13px} .tank__glass{position:absolute;inset:0;border-radius:14px;overflow:hidden;border:1px solid var(--glass-hi); box-shadow:inset 0 0 26px rgba(0,0,0,.55), inset 0 2px 10px rgba(206,234,255,.10), 0 18px 40px rgba(0,0,0,.45)} .tank__liquid{position:absolute;left:0;right:0;bottom:0;height:86%; background:linear-gradient(180deg,rgba(42,111,134,.40),rgba(10,40,52,.82) 100%)} .tank__liquid::before{content:"";position:absolute;left:-20%;right:-20%;top:-9px;height:18px;border-radius:50%; background:rgba(120,210,235,.42);opacity:.5;filter:blur(2px);animation:incu-slosh 5.5s ease-in-out infinite} .tank__liquid--empty{height:80%;background:linear-gradient(180deg,rgba(40,54,72,.30),rgba(8,14,22,.6) 100%);opacity:.6} .tank__sheen{position:absolute;top:0;bottom:0;left:12%;width:15%;border-radius:50%; background:linear-gradient(180deg,rgba(206,234,255,.5),transparent 60%);opacity:.45;pointer-events:none} .tank__scan{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.22; background:repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 4px)} .tank__frame{position:absolute;inset:-6px;border:2px solid #3a4a5e;border-radius:18px;z-index:3;pointer-events:none} .tank__frame::before,.tank__frame::after{content:"";position:absolute;height:15px;width:15px;border:2px solid var(--accent);opacity:.55} .tank__frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:6px 0 0 0} .tank__frame::after{bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 6px 0} .tank__valve{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:36px;height:20px;z-index:4; background:linear-gradient(180deg,#42536a,#1a2330);border:1px solid rgba(206,234,255,.16);border-radius:6px 6px 3px 3px} .tank__valve::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:8px;height:9px;background:#26313f} .tank__leds{position:absolute;right:-3px;top:16px;z-index:4;display:flex;flex-direction:column;gap:8px} .tank__leds i{width:7px;height:7px;border-radius:50%;background:var(--led,#39507a);box-shadow:0 0 8px var(--led,#39507a)} .tank__empty-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2; font-size:34px;font-weight:300;color:rgba(170,224,255,.30);font-family:var(--cond)} /* --- the core (placeholder sphere; PNG per quality later, supplying its own glow) --- */ .tank__core{position:absolute;left:50%;top:46%;width:64px;height:64px;transform:translate(-50%,-50%);z-index:2;animation:incu-bob 4.8s ease-in-out infinite} .tank__glow{position:absolute;inset:-45%;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--core) 80%,transparent),transparent 66%); filter:blur(7px);opacity:var(--glow,.85);animation:incu-pulse 2.9s ease-in-out infinite} .tank__sphere{position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95),transparent 40%), radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--core) 88%,#fff),var(--core) 42%,color-mix(in srgb,var(--core) 55%,#04121a) 100%); box-shadow:inset -6px -9px 16px rgba(0,0,0,.45), inset 4px 5px 12px rgba(255,255,255,.22)} .tank__bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1} .tank__bubbles i{position:absolute;bottom:6%;width:6px;height:6px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,rgba(120,210,235,.6));opacity:0;animation:incu-rise var(--bd,7s) linear infinite} .tank__bubbles i:nth-child(1){left:26%;--bd:6.5s;animation-delay:.2s;width:5px;height:5px} .tank__bubbles i:nth-child(2){left:46%;--bd:8.2s;animation-delay:1.6s} .tank__bubbles i:nth-child(3){left:64%;--bd:7.1s;animation-delay:3.1s;width:4px;height:4px} .tank__bubbles i:nth-child(4){left:38%;--bd:9.4s;animation-delay:4.7s;width:7px;height:7px} .tank__bubbles i:nth-child(5){left:70%;--bd:6.9s;animation-delay:2.3s;width:5px;height:5px} .tank.is-ready .tank__frame{border-color:var(--gold)} .tank.is-ready .tank__frame::before,.tank.is-ready .tank__frame::after{border-color:var(--gold);opacity:.9} @keyframes incu-bob{0%,100%{transform:translate(-50%,-54%)}50%{transform:translate(-50%,-40%)}} @keyframes incu-pulse{0%,100%{opacity:calc(var(--glow,.85) * .68)}50%{opacity:var(--glow,.85)}} @keyframes incu-rise{0%{transform:translateY(0);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-206px) translateX(8px);opacity:0}} @keyframes incu-slosh{0%,100%{transform:translateX(-3%)}50%{transform:translateX(3%)}} /* --- under-display readout --- */ .lab-readout{align-self:stretch;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px 12px} .lab-readout--empty{display:flex;flex-direction:column;gap:3px;min-height:64px;justify-content:center} .lab-readout__hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px} .lab-readout__type{font-family:var(--cond);text-transform:uppercase;letter-spacing:.4px;font-size:14px;font-weight:700;line-height:1.15} .lab-readout__type small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--ink-faint);font-weight:400;text-transform:none;margin-top:1px} .lab-qtag{font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:5px;border:1px solid currentColor;white-space:nowrap} .lab-empty-cap{font-family:var(--cond);text-transform:uppercase;letter-spacing:.5px;font-size:14px;font-weight:700} .lab-empty-sub{font-size:11.5px;color:var(--ink-dim)} .lab-gauge{margin-top:8px} .lab-gauge__top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;margin-bottom:3px} .lab-gauge__lbl{color:var(--ink-dim);text-transform:uppercase} .lab-gauge__val{font-weight:700} .lab-gauge__bar{height:7px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden} .lab-gauge__fill{height:100%;border-radius:99px;transition:width .5s ease,background .4s ease} .lab-readout__ft{display:flex;justify-content:space-between;margin-top:11px;padding-top:9px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:10px;color:var(--ink-dim)} .lab-readout__ft b{color:var(--ink);font-weight:700} .lab-ctrls{align-self:stretch;display:flex;gap:8px;margin-top:11px} .lab-ctrls .btn{flex:1;font-size:12px;padding:8px 6px} .lab-btn--feed{color:var(--ok)} .lab-btn--water{color:var(--accent)} /* --- core picker modal --- */ .incu-picklist{display:flex;flex-direction:column;gap:8px;margin-top:6px} .incu-pickrow{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px} .incu-pickrow__dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 8px currentColor} .incu-pickrow__main{flex:1;min-width:0} .incu-pickrow__main b{font-size:13.5px} .incu-pickrow__meta{font-family:var(--mono);font-size:10px;color:var(--ink-dim);margin-top:1px} .incu-pickrow__stats{font-size:11px;color:var(--ink-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .incu-pickrow__side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto} .incu-pickrow__time{font-family:var(--mono);font-size:10px;color:var(--ink-dim)} .incu-res__nm{font-family:var(--cond);text-transform:uppercase;letter-spacing:.5px;font-size:18px;font-weight:700;margin-top:2px}