:root{
  --bg:#05070f; --panel:rgba(9,14,26,.86); --panel2:rgba(14,21,38,.92);
  --line:rgba(80,140,220,.22); --txt:#dbe7f5; --dim:#7e93ad;
  --cy:#3fe0ff; --mg:#ff4fa0; --glow:63,224,255; --am:#ffc447; --gd:#7dffab; --rd:#ff5a5a;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--txt)}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--bg)}
#scan{position:fixed;inset:0;pointer-events:none;display:none;z-index:6;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 4px)}
#flash{position:fixed;inset:0;pointer-events:none;z-index:5;background:#fff;opacity:0;transition:opacity .06s linear}
#ui{position:fixed;inset:0;z-index:10;pointer-events:none}
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  pointer-events:auto;background:radial-gradient(120% 100% at 50% 0%,rgba(5,9,20,.35),rgba(4,6,12,.78))}
.screen.on{display:flex}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(140,200,255,.08);
  padding:26px 30px;max-height:92vh;overflow:auto;backdrop-filter:blur(8px)}
.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#1e3a5c;border-radius:4px}
h1.logo{font-style:italic;font-weight:900;letter-spacing:.06em;line-height:.92;text-transform:uppercase;
  font-size:clamp(40px,7.4vw,86px);text-align:center;
  background:linear-gradient(100deg,var(--cy) 15%,#9fd4ff 40%,var(--mg) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(var(--glow),.28)) drop-shadow(0 6px 0 rgba(0,0,0,.55));position:relative}
h1.logo small{display:block;font-size:.24em;letter-spacing:.62em;color:var(--dim);-webkit-text-fill-color:var(--dim);filter:none;margin-top:8px;font-style:normal;font-weight:700}
h2.hd{font-style:italic;font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:22px;color:var(--cy);
  border-left:4px solid var(--mg);padding-left:12px;margin-bottom:16px;text-shadow:0 0 14px rgba(var(--glow),.35)}
.sub{color:var(--dim);font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-align:center}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;pointer-events:auto}
.btn{display:block;width:100%;text-align:left;position:relative;overflow:hidden;
  padding:13px 20px;margin:7px 0;font-weight:800;font-style:italic;letter-spacing:.14em;text-transform:uppercase;font-size:15px;
  background:linear-gradient(90deg,rgba(23,38,66,.9),rgba(13,22,40,.9));
  border:1px solid var(--line);border-radius:9px;transform:skewX(-6deg);transition:.14s}
.btn>span{display:block;transform:skewX(6deg)}
.btn:hover{border-color:var(--cy);color:#fff;transform:skewX(-6deg) translateX(6px);
  box-shadow:0 0 0 1px rgba(var(--glow),.35),0 0 26px rgba(var(--glow),.22);background:linear-gradient(90deg,rgba(30,58,96,.95),rgba(16,28,52,.95))}
.btn.mg:hover{border-color:var(--mg);box-shadow:0 0 0 1px rgba(255,79,160,.4),0 0 26px rgba(255,79,160,.25)}
.btn.sm{padding:9px 16px;font-size:12.5px;width:auto;display:inline-block;margin:4px 6px 4px 0}
.btn.big{font-size:19px;text-align:center;padding:15px}
.btn:disabled,.btn.lock{opacity:.38;cursor:not-allowed;transform:skewX(-6deg)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin:8px 0 18px}
.card{position:relative;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;
  background:linear-gradient(160deg,rgba(20,32,56,.85),rgba(10,16,30,.9));transition:.13s;text-align:center;pointer-events:auto}
.card:hover{transform:translateY(-3px);border-color:var(--cy)}
.card.sel{border-color:var(--cy);box-shadow:0 0 0 1px var(--cy),0 0 22px rgba(var(--glow),.3);background:linear-gradient(160deg,rgba(26,48,80,.95),rgba(12,20,38,.95))}
.card.lock{opacity:.42;filter:grayscale(.7)}
.card .em{width:52px;height:52px;border-radius:50%;margin:2px auto 8px;position:relative;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:21px;font-style:italic;color:#04070d}
.card .em::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:.55}
.card b{display:block;font-size:12.5px;letter-spacing:.1em;font-style:italic}
.card i{display:block;font-size:10px;color:var(--dim);letter-spacing:.06em;margin-top:2px;font-style:normal;min-height:12px}
.card .stat{height:4px;border-radius:2px;background:#122036;margin-top:5px;overflow:hidden}
.card .stat b{display:block;height:100%;background:linear-gradient(90deg,var(--cy),var(--mg))}
.pills{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 16px}
.pill{padding:7px 13px;border:1px solid var(--line);border-radius:20px;font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:.12s}
.pill:hover{color:#fff;border-color:var(--cy)}
.pill.sel{color:#04121c;background:var(--cy);border-color:var(--cy);box-shadow:0 0 16px rgba(var(--glow),.45)}
.lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:14px 0 6px;font-weight:700}
.kv{display:flex;justify-content:space-between;gap:20px;padding:7px 2px;border-bottom:1px dashed rgba(80,140,220,.14);font-size:13.5px}
.kv b{color:var(--cy);font-style:italic}
input[type=range]{width:180px;accent-color:var(--cy);pointer-events:auto}
.tog{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.tog .sw{width:40px;height:20px;border-radius:12px;background:#132238;border:1px solid var(--line);position:relative;transition:.15s}
.tog .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--dim);transition:.15s}
.tog.on .sw{background:rgba(var(--glow),.25);border-color:var(--cy)}
.tog.on .sw::after{left:22px;background:var(--cy);box-shadow:0 0 10px var(--cy)}
.node{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;margin:6px 0;
  background:rgba(13,22,40,.75);cursor:pointer;transition:.12s;pointer-events:auto}
.node:hover{border-color:var(--cy);transform:translateX(4px)}
.node.done{border-color:rgba(125,255,171,.4)}
.node.lock{opacity:.4;cursor:not-allowed}
.node .n{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-style:italic;background:#12233d;color:var(--cy);flex:none}
.node.done .n{background:rgba(125,255,171,.16);color:var(--gd)}
.node.boss .n{background:rgba(255,79,160,.16);color:var(--mg)}
.node .t b{font-size:13.5px;font-style:italic;letter-spacing:.06em}
.node .t i{display:block;font-size:10.5px;color:var(--dim);font-style:normal;letter-spacing:.06em}
.league{margin:16px 0 4px;color:var(--am);font-weight:900;font-style:italic;letter-spacing:.2em;font-size:12px;text-transform:uppercase}
#toasts{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--panel2);border:1px solid var(--cy);border-radius:9px;padding:10px 16px;min-width:220px;
  box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 18px rgba(var(--glow),.25);animation:tin .3s ease-out;font-size:13px}
.toast b{color:var(--cy);font-style:italic;letter-spacing:.1em;display:block;font-size:11px;text-transform:uppercase}
@keyframes tin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.achv{display:flex;gap:12px;align-items:center;padding:9px 10px;border-bottom:1px dashed rgba(80,140,220,.14)}
.achv .ic{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:#122036;color:var(--dim);font-size:16px}
.achv.got .ic{background:rgba(255,196,71,.15);color:var(--am);box-shadow:0 0 12px rgba(255,196,71,.3)}
.achv b{font-size:13px;font-style:italic;letter-spacing:.06em}.achv i{display:block;font-size:11px;color:var(--dim);font-style:normal}
.achv.got b{color:var(--am)}
#dbg{position:fixed;left:10px;top:10px;z-index:50;display:none;font:11px/1.5 ui-monospace,monospace;color:var(--gd);
  background:rgba(0,0,0,.6);padding:8px 10px;border-radius:6px;pointer-events:none;white-space:pre}
#trainbar{position:fixed;left:14px;bottom:14px;z-index:20;display:none;pointer-events:auto}
#trainbar .panel{padding:12px 16px}
textarea#io{width:100%;height:120px;background:#0a1220;color:var(--txt);border:1px solid var(--line);border-radius:8px;
  padding:10px;font:12px ui-monospace,monospace;pointer-events:auto;-webkit-user-select:text;user-select:text}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.hint{font-size:11.5px;color:var(--dim);letter-spacing:.06em;margin-top:10px}
.chip{display:inline-block;padding:5px 12px;margin:3px;border-radius:99px;border:1px solid var(--am);color:var(--am);font-size:11.5px;font-weight:800;letter-spacing:.08em;background:rgba(255,196,71,.08)}
.center{text-align:center}
/* Y8 rewards stay compact and player-initiated, never interrupting active play. */
.y8-ad-slot{margin:8px auto 12px;max-width:100%;text-align:center}
.y8-ad-actions{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.y8-ad-btn{border-color:rgba(125,255,171,.55);color:var(--gd);background:linear-gradient(90deg,rgba(39,100,75,.45),rgba(13,35,35,.9))}
.y8-ad-btn:hover{border-color:var(--gd);box-shadow:0 0 22px rgba(125,255,171,.3)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---- safe area padding for notched devices ---- */
#ui,#trainbar,#toasts{padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px)}

/* ============================================================
   MENU POLISH v2 — shadows, hover effects, animations
   ============================================================ */
@keyframes screenIn{from{opacity:0}to{opacity:1}}
@keyframes panelIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes nodeIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes logoPulse{
  0%,100%{filter:drop-shadow(0 0 18px rgba(var(--glow),.25)) drop-shadow(0 6px 0 rgba(0,0,0,.55))}
  50%{filter:drop-shadow(0 0 36px rgba(var(--glow),.55)) drop-shadow(0 6px 0 rgba(0,0,0,.55))}}
@keyframes selPulse{
  0%,100%{box-shadow:0 0 0 1px var(--cy),0 0 16px rgba(var(--glow),.25)}
  50%{box-shadow:0 0 0 1px var(--cy),0 0 30px rgba(var(--glow),.55)}}
@keyframes badgeShine{0%{background-position:-200% 0}100%{background-position:300% 0}}
.screen.on{animation:screenIn .25s ease-out}
.screen.on .panel{animation:panelIn .38s cubic-bezier(.2,.9,.25,1.12)}
h1.logo{animation:logoPulse 3.2s ease-in-out infinite}
/* deeper panel shadows + subtle inner glow */
.panel{box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 42px rgba(var(--glow),.07),
  inset 0 1px 0 rgba(140,200,255,.1)}
/* buttons: shadow + sheen sweep + springier hover */
.btn{box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(140,200,255,.07);
  transition:.18s cubic-bezier(.2,.8,.3,1.15)}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(190,235,255,.17),transparent);
  transform:skewX(-18deg);transition:left .45s ease;pointer-events:none}
.btn:hover::after{left:135%}
.btn:hover{box-shadow:0 0 0 1px rgba(var(--glow),.4),0 10px 26px rgba(0,0,0,.55),0 0 30px rgba(var(--glow),.28)}
.btn.mg:hover{box-shadow:0 0 0 1px rgba(255,79,160,.45),0 10px 26px rgba(0,0,0,.55),0 0 30px rgba(255,79,160,.3)}
.btn:active{transform:skewX(-6deg) translateX(6px) scale(.97)}
/* cards: staggered entrance, lift + glow on hover, pulsing selection */
.screen.on .card{animation:cardIn .32s ease-out backwards}
.cards .card:nth-child(2){animation-delay:.03s}.cards .card:nth-child(3){animation-delay:.06s}
.cards .card:nth-child(4){animation-delay:.09s}.cards .card:nth-child(5){animation-delay:.12s}
.cards .card:nth-child(6){animation-delay:.15s}.cards .card:nth-child(7){animation-delay:.18s}
.cards .card:nth-child(8){animation-delay:.21s}.cards .card:nth-child(9){animation-delay:.24s}
.cards .card:nth-child(10){animation-delay:.27s}
.card{box-shadow:0 8px 20px rgba(0,0,0,.4)}
.card:hover{transform:translateY(-4px) scale(1.02);
  box-shadow:0 14px 32px rgba(0,0,0,.55),0 0 20px rgba(var(--glow),.2)}
.card.sel{animation:selPulse 2.2s ease-in-out infinite}
.card .em{box-shadow:0 4px 12px rgba(0,0,0,.5)}
/* campaign nodes: entrance + hover glow */
.screen.on .node{animation:nodeIn .3s ease-out backwards}
#camp-list .node:nth-child(odd){animation-delay:.03s}
.node{box-shadow:0 4px 14px rgba(0,0,0,.35)}
.node:hover{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 16px rgba(var(--glow),.22)}
/* pills + toggles */
.pill{box-shadow:0 3px 10px rgba(0,0,0,.3)}
.pill:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.4),0 0 12px rgba(var(--glow),.25)}
.pill.sel{box-shadow:0 0 18px rgba(var(--glow),.5)}
.tog:hover .sw{border-color:var(--cy);box-shadow:0 0 10px rgba(var(--glow),.3)}
/* hub extras */
.hub-badge{margin-top:10px;padding:7px 12px;border:1px solid rgba(255,196,71,.4);border-radius:8px;
  font-size:10.5px;font-weight:800;font-style:italic;letter-spacing:.14em;color:var(--am);text-align:center;
  background:linear-gradient(105deg,rgba(255,196,71,.06) 40%,rgba(255,232,150,.22) 50%,rgba(255,196,71,.06) 60%);
  background-size:200% 100%;animation:badgeShine 3.6s linear infinite;
  box-shadow:0 0 14px rgba(255,196,71,.12),inset 0 1px 0 rgba(255,220,140,.12)}
.hub-panel{background:linear-gradient(165deg,rgba(12,19,36,.92),rgba(7,11,22,.9))}
.hint{border-top:1px dashed rgba(80,140,220,.18);padding-top:10px;margin-top:14px}
/* win / game-over condition box (select + prefight screens) */
.goalbox{border:1px solid rgba(80,140,220,.25);border-radius:9px;padding:10px 14px;font-size:12px;
  line-height:1.6;background:rgba(10,17,32,.7);margin-bottom:8px}
/* shape picker cards: live SVG previews + random dice */
.card .shp{width:100%;height:38px;fill:none;stroke-width:2.5;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(var(--glow),.35))}
.card .shp-r{height:38px;display:flex;align-items:center;justify-content:center;font-size:26px}
/* shape color swatch pills */
.pill .dot{display:inline-block;width:15px;height:15px;border-radius:50%;vertical-align:middle}
.pill.cpill{padding:6px 10px}
.pill.cpill.sel{background:rgba(var(--glow),.12);color:#fff;border-color:#fff;
  box-shadow:0 0 0 1px #fff,0 0 14px rgba(255,255,255,.35)}

/* one-click play button */
.btn.play{background:linear-gradient(90deg,rgba(var(--glow),.22),rgba(20,40,70,.92));
  border-color:rgba(var(--glow),.55);font-size:17px}
.btn.play:hover{border-color:var(--cy);
  box-shadow:0 0 0 1px var(--cy),0 10px 26px rgba(0,0,0,.55),0 0 34px rgba(var(--glow),.4)}

/* ============================================================
   MAIN MENU v3 — one menu, sub-categories, heavier glow/shadow,
   animated geometric backdrop
   ============================================================ */
@keyframes geoSpin{from{transform:rotate(0) translateY(0)}to{transform:rotate(360deg) translateY(-18px)}}
@keyframes geoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(180deg)}}
@keyframes subIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes headGlow{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 rgba(var(--glow),0)}
  50%{box-shadow:0 6px 22px rgba(0,0,0,.5),0 0 22px rgba(var(--glow),.22)}}
@keyframes playPulse{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 22px rgba(var(--glow),.28)}
  50%{box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 46px rgba(var(--glow),.6)}}
/* animated geometric shapes behind the menu panel */
.menu-geo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.menu-geo .g{position:absolute;display:block;border:2px solid;opacity:.16}
.menu-geo .g1{width:190px;height:190px;left:6%;top:14%;border-color:var(--cy);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:geoSpin 26s linear infinite}
.menu-geo .g2{width:130px;height:130px;right:9%;top:20%;border-color:#ff4fa0;
  clip-path:polygon(50% 0,100% 100%,0 100%);animation:geoFloat 15s ease-in-out infinite}
.menu-geo .g3{width:160px;height:160px;right:14%;bottom:12%;border-color:#ffc447;border-radius:50%;
  animation:geoFloat 19s ease-in-out infinite reverse}
.menu-geo .g4{width:110px;height:110px;left:12%;bottom:16%;border-color:#7dffab;
  animation:geoSpin 21s linear infinite reverse}
.menu-geo .g5{width:230px;height:230px;left:44%;top:6%;border-color:#b07bff;
  clip-path:polygon(50% 0,90% 20%,100% 60%,75% 100%,25% 100%,0 60%,10% 20%);
  animation:geoSpin 34s linear infinite;opacity:.1}
.menu-geo .g6{width:90px;height:90px;left:30%;bottom:8%;border-color:#7df3ff;
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);animation:geoFloat 12s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.menu-geo{display:none}}
/* the hub panel floats above the geometry */
.hub-panel{position:relative;z-index:1;
  box-shadow:0 34px 100px rgba(0,0,0,.78),0 0 60px rgba(var(--glow),.12),
    inset 0 1px 0 rgba(140,200,255,.12)}
.btn.play{animation:playPulse 2.6s ease-in-out infinite}
/* sub-category groups */
.mgroup{margin:7px 0}
.mhead{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:12px 18px;font:inherit;font-weight:800;font-style:italic;letter-spacing:.14em;
  text-transform:uppercase;font-size:14px;color:var(--txt);cursor:pointer;
  background:linear-gradient(90deg,rgba(20,34,60,.95),rgba(11,19,36,.95));
  border:1px solid var(--line);border-radius:9px;transform:skewX(-6deg);
  transition:.18s cubic-bezier(.2,.8,.3,1.15);animation:headGlow 4.5s ease-in-out infinite}
.mhead>span{transform:skewX(6deg)}
.mhead>i{transform:skewX(6deg);font-style:normal;font-size:12px;color:var(--cy);transition:.25s}
.mhead:hover{border-color:var(--cy);color:#fff;transform:skewX(-6deg) translateX(5px);
  box-shadow:0 0 0 1px rgba(var(--glow),.4),0 10px 26px rgba(0,0,0,.55),0 0 30px rgba(var(--glow),.3)}
.mgroup.open .mhead{border-color:var(--cy);color:#fff;
  background:linear-gradient(90deg,rgba(30,60,100,.95),rgba(14,26,48,.95));
  box-shadow:0 0 0 1px rgba(var(--glow),.45),0 0 28px rgba(var(--glow),.28)}
.mgroup.open .mhead>i{transform:skewX(6deg) rotate(180deg)}
.msub{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.3,.9,.3,1);
  padding-left:10px;border-left:2px solid rgba(var(--glow),.18);margin-left:6px}
.mgroup.open .msub{max-height:460px}
.mgroup.open .msub .btn{animation:subIn .28s ease-out backwards}
.mgroup.open .msub .btn:nth-child(2){animation-delay:.04s}
.mgroup.open .msub .btn:nth-child(3){animation-delay:.08s}
.mgroup.open .msub .btn:nth-child(4){animation-delay:.12s}
.mgroup.open .msub .btn:nth-child(5){animation-delay:.16s}
.mgroup.open .msub .btn:nth-child(6){animation-delay:.2s}
.btn.sub{font-size:13.5px;padding:11px 16px;margin:5px 0}
/* theme + perk pills */
.pill .tnm{margin-left:7px;vertical-align:middle}
.pill.perkpill{padding:7px 12px}

/* ============================================================
   META PROGRESSION UI — progression header, battle path, contracts,
   shop, mastery, ranked, forge, architect, rivals, drafts, results
   ============================================================ */
:root{--glow:63,224,255}

/* ---- 1. persistent progression header ---- */
#topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:flex-start;
  justify-content:space-between;gap:14px;padding:12px 14px;pointer-events:none;
  transition:opacity .25s,transform .25s}
#topbar.off{opacity:0;transform:translateY(-14px);pointer-events:none}
#topbar>*{pointer-events:auto}
.tb-pilot{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border-radius:26px;
  border:1px solid var(--line);background:rgba(9,14,26,.88);backdrop-filter:blur(6px);
  box-shadow:0 8px 26px rgba(0,0,0,.5);max-width:min(420px,62vw)}
.tb-av{position:relative;width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;background:#0e1729;
  border:2px solid var(--fr,#7e93ad);box-shadow:0 0 12px color-mix(in srgb,var(--fr,#7e93ad) 55%,transparent)}
.tb-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.tb-av span{color:var(--cy);font-size:15px}
.tb-lvl{position:absolute;right:-4px;bottom:-4px;min-width:16px;height:16px;padding:0 3px;
  border-radius:9px;background:var(--cy);color:#04121c;font-size:9.5px;font-weight:900;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(var(--glow),.6)}
.tb-mid{min-width:0;flex:1;cursor:pointer}
.tb-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tb-nm{font-size:9.5px;font-weight:900;letter-spacing:.16em;color:var(--dim);white-space:nowrap}
.tb-claim{font-size:9px;font-weight:900;letter-spacing:.1em;color:#04121c;background:var(--am);
  padding:1px 6px;border-radius:4px;animation:claimPulse 1.6s ease-in-out infinite}
@keyframes claimPulse{0%,100%{box-shadow:0 0 0 rgba(255,196,71,0)}50%{box-shadow:0 0 14px rgba(255,196,71,.8)}}
.tb-bar{height:5px;border-radius:3px;background:#132238;overflow:hidden;margin:4px 0 3px;min-width:120px}
.tb-bar>b{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--cy),var(--mg));transition:width .6s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 0 10px rgba(var(--glow),.6)}
.tb-sub{font-size:9px;color:var(--dim);letter-spacing:.08em}
.tb-dots{display:inline-flex;gap:4px;align-items:center}
.cdot{width:7px;height:7px;border-radius:50%;background:#243450;display:inline-block}
.cdot.ready{background:var(--am);box-shadow:0 0 8px var(--am)}
.cdot.done{background:var(--gd)}
.tb-cr{display:flex;align-items:center;gap:5px;font-family:inherit;font-size:12px;font-weight:800;
  color:var(--am);padding:8px 13px;border-radius:22px;border:1px solid rgba(255,196,71,.35);
  background:rgba(255,196,71,.08);white-space:nowrap;transition:.15s}
.tb-cr:hover{background:rgba(255,196,71,.18);box-shadow:0 0 18px rgba(255,196,71,.3)}
@media (max-width:720px){
  .tb-pilot{max-width:56vw;padding:5px 9px 5px 5px;gap:7px}
  .tb-av{width:28px;height:28px}.tb-bar{min-width:70px}
  .tb-cr{padding:6px 9px;font-size:11px}
}

/* ---- 2. hub extras: menu tags + season bar ---- */
.mtag{font-style:normal;font-size:10px;color:var(--dim);margin-left:6px;letter-spacing:.06em}
.mtag.hot{color:#04121c;background:var(--am);padding:1px 6px;border-radius:4px;font-weight:900;
  animation:claimPulse 1.8s ease-in-out infinite}
.seasonbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;padding:9px 12px;
  border:1px solid var(--line);border-radius:9px;background:rgba(10,17,32,.6);font-size:11px}
.seasonbar .sic{font-size:15px}
.seasonbar b{font-style:italic;letter-spacing:.12em;font-size:11px}
.seasonbar i{color:var(--dim);font-style:normal;flex:1;min-width:140px}
.seasonbar em{font-style:normal;font-size:9px;letter-spacing:.16em;color:var(--dim);
  border:1px solid var(--line);border-radius:5px;padding:2px 7px}
.lblnote{font-style:normal;text-transform:none;letter-spacing:.04em;color:var(--dim);font-size:10px}

/* ---- 3. shared meta widgets ---- */
.bigstat{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.bigstat>div{flex:1 1 110px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:rgba(10,17,32,.62);text-align:center}
.bigstat b{display:block;font-size:19px;font-style:italic;color:var(--cy);letter-spacing:.04em}
.bigstat i{display:block;font-size:9px;font-style:normal;letter-spacing:.18em;color:var(--dim);margin-top:3px}
.xpbar{position:relative;height:22px;border-radius:12px;background:#0d1729;border:1px solid var(--line);
  overflow:hidden;margin:4px 0 12px}
.xpbar>b{display:block;height:100%;background:linear-gradient(90deg,var(--cy),var(--mg));
  box-shadow:0 0 18px rgba(var(--glow),.5);transition:width .7s cubic-bezier(.2,.9,.3,1)}
.xpbar>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.claimall{margin-bottom:10px}
.cbar{height:5px;border-radius:3px;background:#132238;overflow:hidden;margin:6px 0 4px}
.cbar>b{display:block;height:100%;border-radius:3px;transition:width .6s cubic-bezier(.2,.9,.3,1)}

/* ---- 4. battle path ---- */
.pathlist{max-height:52vh;overflow:auto}
.pathrow{display:flex;align-items:center;gap:12px;padding:9px 12px;margin:5px 0;border-radius:9px;
  border:1px solid var(--line);background:rgba(13,22,40,.66);transition:.14s}
.pathrow .pt{width:30px;height:30px;flex:none;border-radius:8px;background:#12233d;color:var(--cy);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-style:italic;font-size:13px}
.pathrow .pd{flex:1;min-width:0}
.pathrow .pd b{display:block;font-size:12.5px;font-style:italic;letter-spacing:.05em}
.pathrow .pd i{display:block;font-size:10.5px;color:var(--dim);font-style:normal;margin-top:2px}
.pathrow em{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--dim)}
.pathrow.cur{border-color:var(--cy);box-shadow:0 0 0 1px rgba(var(--glow),.35),0 0 22px rgba(var(--glow),.18)}
.pathrow.done{opacity:.55}.pathrow.done .pt{background:rgba(125,255,171,.15);color:var(--gd)}
.pathrow.ready{border-color:var(--am);cursor:pointer;background:rgba(255,196,71,.08);
  animation:claimPulse 2s ease-in-out infinite}
.pathrow.ready em{color:var(--am)}
.pathrow.ready:hover{transform:translateX(4px)}

/* ---- 5. contracts ---- */
.conrow{display:flex;align-items:center;gap:12px;padding:11px 13px;margin:7px 0;border-radius:10px;
  border:1px solid var(--line);background:rgba(13,22,40,.7)}
.conrow.ready{border-color:var(--am);box-shadow:0 0 20px rgba(255,196,71,.16)}
.conrow.done{opacity:.55}
.ctag{flex:none;width:74px;font-size:8.5px;font-weight:900;letter-spacing:.1em;text-align:center;
  border:1px solid;border-radius:5px;padding:4px 2px;line-height:1.25}
.cbody{flex:1;min-width:0}
.cbody b{display:block;font-size:13px;font-style:italic;letter-spacing:.05em}
.cbody i{display:block;font-size:11px;color:var(--dim);font-style:normal;margin-top:2px}
.cbody em{display:block;font-size:10px;color:var(--dim);font-style:normal;letter-spacing:.06em}
.cact{flex:none;min-width:60px;text-align:right;color:var(--gd);font-weight:900}
.cact .btn{margin:0}

/* ---- 6. shop ---- */
.shopcard .price{margin-top:7px;font-size:11px;font-weight:900;letter-spacing:.1em}
.shopcard.owned{border-color:rgba(125,255,171,.35)}
.card.forged{border-color:rgba(255,196,71,.45)}

/* ---- 7. mastery ---- */
.mastrow{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:6px 0;border-radius:10px;
  border:1px solid var(--line);background:rgba(13,22,40,.7)}
.mav{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid;display:flex;
  align-items:center;justify-content:center;font-weight:900;font-style:italic;font-size:15px}
.mbody{flex:1;min-width:0}
.mbody b{font-size:13px;font-style:italic;letter-spacing:.06em}
.mbody i{display:block;font-size:10.5px;color:var(--dim);font-style:normal}
.mbody em{display:block;font-size:9.5px;color:var(--dim);font-style:normal;letter-spacing:.05em}
.mrank{flex:none;font-size:22px;font-weight:900;font-style:italic;width:34px;text-align:center}

/* ---- 8. ranked ---- */
.rankbadge{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px 0 14px}
.rankbadge span{font-size:44px;color:var(--rc);filter:drop-shadow(0 0 18px var(--rc))}
.rankbadge b{font-size:20px;font-style:italic;letter-spacing:.22em;color:var(--rc)}
.series{border:1px solid rgba(255,196,71,.4);border-radius:9px;padding:10px;margin-bottom:10px;
  background:rgba(255,196,71,.07)}
.series b{font-size:10px;letter-spacing:.18em;color:var(--am)}
.series i{display:block;font-size:11px;color:var(--dim);font-style:normal;margin-top:5px}
.srow{display:flex;gap:7px;justify-content:center;margin-top:7px}
.sw{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--dim)}
.sw.win{background:rgba(125,255,171,.18);color:var(--gd);border-color:var(--gd)}
.sw.loss{background:rgba(255,90,90,.18);color:var(--rd);border-color:var(--rd)}
.ranklist{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.rchip{font-size:8.5px;font-weight:900;letter-spacing:.1em;padding:4px 8px;border-radius:20px;
  border:1px solid var(--line);color:var(--dim)}
.rchip.on{color:#04121c;background:var(--rc);border-color:var(--rc);box-shadow:0 0 14px var(--rc)}

/* ---- 9. forge + architect + rivals inputs ---- */
.tinput{flex:1;min-width:150px;background:#0a1220;color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;font:inherit;font-size:12.5px;pointer-events:auto;
  -webkit-user-select:text;user-select:text}
.tinput:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 1px rgba(var(--glow),.35)}
.tarea{width:100%;height:64px;background:#0a1220;color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:9px;font:11px ui-monospace,monospace;margin-top:8px;
  -webkit-user-select:text;user-select:text;pointer-events:auto}
.node .arow{display:flex;gap:5px}
.node .arow .btn{margin:0;padding:6px 10px;font-size:11px}

/* ---- 10. survival draft ---- */
#s-draft{background:radial-gradient(120% 100% at 50% 0%,rgba(5,9,20,.6),rgba(4,6,12,.92))}
.draftcard{padding:16px 14px;cursor:pointer}
.draftcard .em{width:56px;height:56px;font-size:24px;border-radius:14px}
.draftcard b{font-size:14px;margin-top:4px}
.draftcard i{font-size:11px;line-height:1.45;min-height:44px}
.screen.on .draftcard{animation:cardIn .34s cubic-bezier(.2,.9,.25,1.15) backwards}
.draftcard:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 18px 40px rgba(0,0,0,.6),
  0 0 26px rgba(var(--glow),.3)}

/* ---- 11. results: grade banner, payout, chips, next goal ---- */
.resgrade{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 4px}
.resgrade .gg{font-size:52px;font-weight:900;font-style:italic;line-height:1;
  animation:gradePop .5s cubic-bezier(.2,.9,.25,1.4)}
@keyframes gradePop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.resgrade .gl{font-size:9px;letter-spacing:.18em;color:var(--dim);text-align:left;line-height:1.6}
.resgrade .gl b{display:block;font-size:12px;color:var(--txt);font-style:italic;letter-spacing:.04em}
.payout{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px;position:relative}
.pcell{flex:1 1 80px;padding:9px;border:1px solid var(--line);border-radius:9px;
  background:rgba(10,17,32,.66);text-align:center}
.pcell b{display:block;font-size:18px;font-style:italic;color:var(--am)}
.pcell i{display:block;font-size:8.5px;letter-spacing:.16em;color:var(--dim);font-style:normal;margin-top:3px}
.pbar{flex:1 1 100%;height:5px;border-radius:3px;background:#132238;overflow:hidden}
.pbar>b{display:block;height:100%;background:linear-gradient(90deg,var(--cy),var(--mg));
  box-shadow:0 0 10px rgba(var(--glow),.6)}
.chip.pop{animation:chipIn .42s cubic-bezier(.2,.9,.25,1.35) backwards}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:none}}
.chip.gold{border-color:var(--am);color:var(--am);background:rgba(255,196,71,.14);
  box-shadow:0 0 16px rgba(255,196,71,.28)}
.chip.bad{border-color:var(--rd);color:var(--rd);background:rgba(255,90,90,.1)}
.goalcard{margin-top:14px;padding:12px 14px;border-radius:10px;text-align:left;
  border:1px solid rgba(255,196,71,.35);background:linear-gradient(120deg,rgba(255,196,71,.09),rgba(10,17,32,.7));
  box-shadow:inset 0 1px 0 rgba(255,220,140,.12)}
.goalcard .gtag{display:block;font-size:8.5px;font-weight:900;letter-spacing:.2em;color:var(--am);margin-bottom:4px}
.goalcard b{display:block;font-size:14px;font-style:italic;letter-spacing:.05em}
.goalcard i{display:block;font-size:11.5px;color:var(--dim);font-style:normal;margin-top:3px}

/* ---- 12. reward pop + tiered toasts ---- */
.rewardpop{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:60;
  padding:14px 26px;border-radius:12px;pointer-events:none;
  font-size:19px;font-weight:900;font-style:italic;letter-spacing:.08em;color:#fff;
  background:linear-gradient(120deg,rgba(255,196,71,.22),rgba(10,17,32,.92));
  border:1px solid var(--am);box-shadow:0 0 40px rgba(255,196,71,.4),0 20px 60px rgba(0,0,0,.6);
  animation:rpIn .45s cubic-bezier(.2,.9,.25,1.5)}
.rewardpop.out{opacity:0;transform:translate(-50%,-70%) scale(.9);transition:.42s ease-in}
@keyframes rpIn{from{opacity:0;transform:translate(-50%,-30%) scale(.6)}to{opacity:1}}
.toast.tier-bronze{border-color:#c9884a;box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 18px rgba(201,136,74,.35)}
.toast.tier-bronze b{color:#e0a468}
.toast.tier-silver{border-color:#c9d6e2;box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 20px rgba(201,214,226,.35)}
.toast.tier-silver b{color:#e6eef7}
.toast.tier-gold{border-color:var(--am);
  background:linear-gradient(120deg,rgba(255,196,71,.16),var(--panel2));
  box-shadow:0 8px 34px rgba(0,0,0,.55),0 0 30px rgba(255,196,71,.5)}
.toast.tier-gold b{color:var(--am)}
.toast.tier-gold::before{content:"";position:absolute;inset:0;border-radius:9px;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,236,180,.18) 50%,transparent 60%);
  background-size:220% 100%;animation:badgeShine 2.4s linear infinite}
.toast{position:relative;overflow:hidden}

/* ---- 13. progress rings on cards ---- */
.card{position:relative}
.pring{position:absolute;top:5px;right:5px;width:30px;height:30px;pointer-events:none}
.pring-bg{fill:none;stroke:rgba(120,150,190,.22);stroke-width:3}
.pring-fg{fill:none;stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset .6s cubic-bezier(.2,.9,.3,1)}
.pring-t{font-size:9px;font-weight:900;text-anchor:middle;font-family:"Segoe UI",sans-serif}

/* ---- 14. live fighter preview ---- */
.fpvwrap{display:flex;gap:14px;align-items:stretch;margin:-8px 0 18px;padding:12px;
  border:1px solid var(--line);border-radius:11px;background:rgba(10,17,32,.55)}
.fpv{width:190px;height:130px;flex:none;border-radius:9px;background:
  radial-gradient(80% 80% at 50% 60%,rgba(var(--glow),.07),rgba(4,6,12,.9))}
.fpvinfo{flex:1;min-width:0;font-size:11.5px}
.fpvinfo>b{font-size:16px;font-style:italic;letter-spacing:.08em}
.fpvinfo>i{display:block;font-size:10.5px;color:var(--dim);font-style:normal;margin-bottom:7px}
.pvstat{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:8.5px;letter-spacing:.14em;color:var(--dim)}
.pvstat span{width:52px;flex:none}
.pvstat b{display:block;height:5px;border-radius:3px;max-width:calc(100% - 60px)}
.pvsp{margin-top:8px;font-size:11px;color:var(--dim);line-height:1.5}
.pvsp b{font-style:italic;letter-spacing:.06em}
.pvmast{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:10px;color:var(--dim)}
.pvmast .pring{position:static;width:32px;height:32px}
@media (max-width:620px){.fpvwrap{flex-direction:column}.fpv{width:100%}}

/* ---- 15. card tilt sheen + micro-interactions ---- */
.card{transform-style:preserve-3d;will-change:transform}
.card::before{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;opacity:0;
  background:radial-gradient(120px 120px at var(--sx,50%) 0%,rgba(255,255,255,.16),transparent 70%);
  transition:opacity .2s}
.card:hover::before{opacity:1}
.btn:focus-visible,.pill:focus-visible,.card:focus-visible,.tb-cr:focus-visible{
  outline:2px solid var(--cy);outline-offset:3px}
.pill:active{transform:scale(.94)}
.card:active{transform:scale(.98)!important}
.wagerpill.sel{background:var(--am);border-color:var(--am);color:#1a1203;box-shadow:0 0 16px rgba(255,196,71,.5)}
.wagerpill.lock{opacity:.4}
/* cursor-follow glow behind the hub */
#s-hub::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(320px 320px at var(--mx,50%) var(--my,40%),rgba(var(--glow),.07),transparent 70%);
  transition:background .2s}

/* ---- 16. directional screen transitions ---- */
@keyframes panelFwd{from{opacity:0;transform:translateX(34px) scale(.97)}to{opacity:1;transform:none}}
@keyframes panelBack{from{opacity:0;transform:translateX(-34px) scale(.97)}to{opacity:1;transform:none}}
.screen.on[data-dir="fwd"] .panel{animation:panelFwd .34s cubic-bezier(.2,.9,.25,1.1)}
.screen.on[data-dir="back"] .panel{animation:panelBack .34s cubic-bezier(.2,.9,.25,1.1)}

/* ---- 17. compact pickers inside the forge so the whole flow fits one panel ---- */
#forge-a,#forge-b{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:6px 0 12px}
#forge-a .card,#forge-b .card{padding:8px 7px}
#forge-a .card .em,#forge-b .card .em{width:34px;height:34px;margin-bottom:5px}
#forge-a .card b,#forge-b .card b{font-size:11px}
#forge-a .card i,#forge-b .card i{font-size:9px;min-height:22px;line-height:1.3}

/* ============================================================
   ONBOARDING · BIGGER MENU PANELS · THEMED SCROLLBARS
   ============================================================ */

/* ---- 1. beautiful scrollbars that match the menu ---- */
*{scrollbar-width:thin;scrollbar-color:var(--cy) rgba(10,17,32,.55)}
.panel::-webkit-scrollbar,.pathlist::-webkit-scrollbar,textarea::-webkit-scrollbar,
#camp-list::-webkit-scrollbar,.onb-rows::-webkit-scrollbar{width:12px;height:12px}
.panel::-webkit-scrollbar-track,.pathlist::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,#camp-list::-webkit-scrollbar-track,
.onb-rows::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(8,13,24,.9),rgba(12,19,36,.7));
  border-radius:10px;margin:8px 0;box-shadow:inset 0 0 0 1px rgba(80,140,220,.14)}
.panel::-webkit-scrollbar-thumb,.pathlist::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,#camp-list::-webkit-scrollbar-thumb,
.onb-rows::-webkit-scrollbar-thumb{
  border-radius:10px;border:3px solid transparent;background-clip:padding-box;
  background-color:var(--cy);
  background-image:linear-gradient(180deg,var(--cy),var(--mg));
  box-shadow:0 0 12px rgba(var(--glow),.55),inset 0 1px 0 rgba(255,255,255,.25)}
.panel::-webkit-scrollbar-thumb:hover,.pathlist::-webkit-scrollbar-thumb:hover,
#camp-list::-webkit-scrollbar-thumb:hover{
  box-shadow:0 0 18px rgba(var(--glow),.9),inset 0 1px 0 rgba(255,255,255,.4)}
.panel::-webkit-scrollbar-corner{background:transparent}

/* ---- 2. bigger rectangular menu panels ---- */
.panel{padding:30px 34px;border-radius:16px;max-height:94vh}
h2.hd{font-size:26px;margin-bottom:20px}
/* the hub fills its new width with a two-column button grid */
@media (min-width:720px){
  .hub-panel .msub{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;padding-left:14px}
  .hub-panel .msub .btn{margin:5px 0}
  .mgroup.open .msub{max-height:340px}
  .hub-panel h1.logo{font-size:44px!important}
  .btn.play{font-size:20px;padding:17px 22px;text-align:center}
  .btn.play>span{text-align:center}
}
@media (min-width:980px){
  /* wide cards grid so the big select screen does not look empty */
  .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}
.hub-panel{padding:32px 36px}

/* ---- 3. onboarding ---- */
.onb-panel{width:min(1040px,96vw);padding:26px 30px 22px;
  background:linear-gradient(165deg,rgba(13,21,40,.96),rgba(6,10,20,.96));
  border-color:rgba(var(--glow),.35);
  box-shadow:0 34px 110px rgba(0,0,0,.8),0 0 70px rgba(var(--glow),.14),
    inset 0 1px 0 rgba(140,200,255,.14)}
.onb-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.onb-tag{font-size:10px;font-weight:900;letter-spacing:.26em;color:var(--cy);
  border:1px solid rgba(var(--glow),.4);border-radius:20px;padding:5px 14px;
  background:rgba(var(--glow),.08)}
.onb-skip{font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:var(--dim);background:none;border:0;padding:6px 8px;transition:.15s}
.onb-skip:hover{color:var(--txt)}
.onb-title{font-style:italic;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  font-size:clamp(26px,4.2vw,44px);line-height:1.05;margin:14px 0 6px;
  background:linear-gradient(100deg,var(--cy) 12%,#9fd4ff 45%,var(--mg) 84%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(var(--glow),.28))}
.onb-lead{font-size:14px;color:var(--txt);opacity:.85;line-height:1.55;margin-bottom:18px}
.onb-body{display:flex;gap:22px;align-items:flex-start}
.onb-art{width:min(420px,40%);height:200px;flex:none;border-radius:12px;
  border:1px solid var(--line);background:radial-gradient(90% 90% at 50% 60%,rgba(var(--glow),.05),rgba(4,6,12,.95));
  box-shadow:inset 0 1px 0 rgba(140,200,255,.1),0 10px 30px rgba(0,0,0,.5)}
.onb-rows{flex:1;min-width:0;max-height:46vh;overflow:auto;padding-right:6px}
.onbrow{display:flex;gap:13px;align-items:flex-start;padding:10px 12px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:10px;background:rgba(11,18,34,.6);
  animation:cardIn .34s ease-out backwards}
.onbrow .oic{font-size:19px;flex:none;width:30px;text-align:center;line-height:1.3}
.onbrow b{display:block;font-size:13.5px;font-style:italic;letter-spacing:.05em;color:var(--txt)}
.onbrow i{display:block;font-size:12px;font-style:normal;color:var(--dim);line-height:1.55;margin-top:3px}
.onb-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:20px;padding-top:16px;border-top:1px dashed rgba(80,140,220,.2)}
.onb-foot .btn{margin:0;width:auto;min-width:120px}
.onb-foot .btn.play{animation:none;text-align:center}
.onb-dots{display:flex;gap:9px;align-items:center}
.odot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(80,140,220,.5);
  background:rgba(10,17,32,.8);cursor:pointer;transition:.2s;padding:0}
.odot.done{background:rgba(var(--glow),.45);border-color:var(--cy)}
.odot.on{width:30px;border-radius:7px;background:linear-gradient(90deg,var(--cy),var(--mg));
  border-color:var(--cy);box-shadow:0 0 14px rgba(var(--glow),.7)}
.odot:hover{transform:scale(1.15)}
@media (max-width:760px){
  .onb-body{flex-direction:column}
  .onb-art{width:100%;height:150px}
  .onb-rows{max-height:none;overflow:visible}
  .onb-panel{padding:20px 18px 18px}
  .onb-foot .btn{min-width:88px}
}