/* ---------- DidIThrow Live: intro page ---------- */
.live-page .live-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;padding:18px 0 34px;border-bottom:1px solid var(--line)}
.live-page .live-hero h1{margin:6px 0 16px;font-size:clamp(44px,6vw,76px);line-height:.95;letter-spacing:-.02em;text-wrap:balance}
.live-page .live-hero h1 i{display:block;font-style:normal;color:var(--brand)}
.live-page .live-lead{margin:0 0 22px;max-width:56ch;font-size:18px;line-height:1.55;color:var(--ink-2)}
.live-page .live-lead b{color:var(--ink)}
.live-page .live-ctas{display:flex;flex-wrap:wrap;gap:10px}
.live-page .live-start,.live-page .live-continue{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border-radius:16px;font:800 18px/1 var(--display);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.live-page .live-start{background:var(--brand);color:var(--brand-ink);box-shadow:0 10px 30px -12px color-mix(in oklab,var(--brand) 70%,transparent)}
.live-page .live-continue{border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.live-page .live-continue[hidden]{display:none}
.live-page .live-continue b{color:var(--innocent)}
.live-page .live-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:860px){
  .live-page .live-hero{grid-template-columns:1fr;gap:22px;padding-bottom:26px}
  .live-page .live-ctas a{flex:1 1 100%}
}

/* ---------- app view: the page becomes a full-screen tool ---------- */
body.live-on{padding-top:0!important;margin-top:0!important}
body.live-on .site-header,body.live-on .tabbar,body.live-on .live-footer,body.live-on .live-intro{display:none!important}
.live[hidden]{display:none}
.live{--bg:#0E1015;--bg-2:#12151C;--surface:#161922;--surface-2:#1E2230;--surface-3:#262B3B;
  --line:#2B3142;--line-2:#3A4155;
  --ink:#EDEFF5;--ink-2:#B9C0CE;--muted:#8C95A8;
  --brand:#FFC940;--brand-ink:#1A1405;
  --good:#4FD8A0;--good-ink:#04140D;--warn:#FFA24C;--bad:#FF6B6B;--bad-ink:#1A0505;--info:#5CB8FF;
  --tank:#5CB8FF;--dmg:#FF8A7A;--sup:#4FD8A0;
  --display:"Saira","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --bar-h:84px;}
.live{flex:1;width:100%;font:15px/1.45 var(--body);color:var(--ink);-webkit-tap-highlight-color:transparent}
.live button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.live button:focus-visible,.live a:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.live [hidden]{display:none!important}
.live .top-left{display:flex;align-items:center;gap:10px;min-width:0}
.live .more-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:2px;font:700 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.live .more-link:hover{color:var(--brand)}
.live .matchup .more-link{margin-top:6px}
.live .foot a{color:var(--muted)}
.live .ally-toggle{display:flex;align-items:center;gap:8px;min-height:40px;padding:0;border:0;background:none;color:var(--muted)}
.live .ally-toggle .chev{font-size:12px;transition:transform .15s}
.live .ally-toggle.closed .chev{transform:rotate(-90deg)}
.live .ally-mini{display:flex;gap:3px}
.live .ally-mini img{width:22px;height:22px;border-radius:6px}
.live .ally-mini em{font-style:normal;font-size:12px}

.live button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.live button:focus-visible,.live a:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.live .d{font-family:var(--display);font-stretch:75%;font-weight:800;letter-spacing:-.01em}
.live .eyebrow{margin:0;font:700 12px/1 var(--display);font-stretch:87.5%;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.live .app{max-width:520px;margin:0 auto;min-height:100%;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 calc(var(--bar-h) + 24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.live .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0 10px;background:var(--bg);border-bottom:1px solid var(--line)}
.live .logo{font:900 22px/1 var(--display);font-stretch:75%;letter-spacing:-.02em;white-space:nowrap}
.live .logo i{font-style:normal;color:var(--brand)}
.live .logo b{margin-left:8px;padding:3px 7px;border-radius:6px;background:var(--bad);color:var(--bad-ink);font:800 11px/1 var(--display);font-stretch:87.5%;letter-spacing:.14em;vertical-align:4px}
.live .top-right{display:flex;align-items:center;gap:8px}
.live .record{display:flex;align-items:baseline;gap:4px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;font:800 16px/1 var(--display);font-stretch:87.5%;font-variant-numeric:tabular-nums}
.live .record .w{color:var(--good)}
.live .record .l{color:var(--bad)}
.live .record small{font:700 10px/1 var(--display);letter-spacing:.12em;color:var(--muted);margin-left:2px}
.live .icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.live .icon-btn svg{width:20px;height:20px}
.live .ctx{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.live .chip-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:58px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-align:left}
.live .chip-btn b{font:800 19px/1.05 var(--display);font-stretch:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.live .chip-btn .eyebrow{font-size:10px}
.live .chip-btn.unset b{color:var(--muted)}
.live .example{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:12px;background:color-mix(in oklab,var(--info) 12%,var(--surface));border:1px solid color-mix(in oklab,var(--info) 35%,var(--line));font-size:13px;color:var(--ink-2)}
.live .example button{flex:none;padding:8px 12px;border-radius:9px;border:0;background:var(--info);color:#04101A;font:800 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.live .tilt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:color-mix(in oklab,var(--bad) 12%,var(--surface));border:1px solid color-mix(in oklab,var(--bad) 40%,var(--line))}
.live .tilt p{margin:0;font-size:14px;color:var(--ink-2)}
.live .tilt b{display:block;font:800 18px/1.1 var(--display);font-stretch:75%;color:var(--bad);margin-bottom:2px}
.live .tilt button{flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);background:transparent}
.live .enemy-head{display:flex;align-items:baseline;justify-content:space-between}
.live .enemy-head button{border:0;background:none;color:var(--muted);font:700 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:8px 0 8px 12px}
.live .slots{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:8px}
.live .slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;min-width:0}
.live .slot-face{position:relative;width:100%;aspect-ratio:1;max-width:100%;border-radius:14px;border:2px dashed var(--line-2);background:var(--surface);display:grid;place-items:center;overflow:hidden;transition:transform .12s}
.live .slot:active .slot-face{transform:scale(.94)}
.live .slot-face img{width:100%;height:100%;object-fit:cover;display:block}
.live .slot.filled .slot-face{border-style:solid;border-color:var(--role)}
.live .slot-face svg{width:22px;height:22px;color:var(--role)}
.live .slot small{font:700 11px/1 var(--display);font-stretch:87.5%;letter-spacing:.06em;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .slot.filled small{color:var(--ink)}
.live .slot.threat .slot-face{box-shadow:0 0 0 3px color-mix(in oklab,var(--bad) 70%,transparent)}
.live .ult{margin-top:6px;width:100%;min-height:32px;white-space:nowrap;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);color:var(--muted);font:800 12px/1 var(--display);font-stretch:87.5%;letter-spacing:.06em;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;gap:4px}
.live .ult:disabled{opacity:.3}
.live .ult.on{border-color:color-mix(in oklab,var(--warn) 55%,var(--line));background:color-mix(in oklab,var(--warn) 14%,var(--bg-2));color:var(--warn)}
.live .ult.on.old{border-color:var(--line);background:var(--bg-2);color:var(--ink-2)}
.live .ults{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:8px}
.live .allies{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:8px}
.live .allies .slot-face{border-radius:12px;width:min(100%,56px)}
.live .allies small{font-size:10.5px}
.live .slot.me .slot-face{border:2px solid var(--brand)}
.live .slot.me small{color:var(--brand)}
.live .team{border-radius:20px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.live .team-plan{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.live .team-plan b{font:900 22px/1 var(--display);font-stretch:75%;color:var(--info)}
.live .team-plan span{font-size:13.5px;color:var(--ink-2)}
.live .cover{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:8px;border-radius:12px;background:var(--bg-2)}
.live .cover img{width:36px;height:36px;border-radius:9px}
.live .cover p{margin:0;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.live .cover p b{color:var(--ink)}
.live .cover.gap{background:color-mix(in oklab,var(--bad) 9%,var(--bg-2))}
.live .cover .ok{color:var(--good);font-weight:700}
.live .cover .ask{color:var(--warn);font-weight:700}
.live .slot .tag{position:absolute;top:-6px;right:-4px;z-index:2;padding:3px 5px;border-radius:6px;font:800 9px/1 var(--display);letter-spacing:.08em;background:var(--bad);color:var(--bad-ink)}
.live [data-role=tank]{--role:var(--tank)}
.live [data-role=damage]{--role:var(--dmg)}
.live [data-role=support]{--role:var(--sup)}
.live .card{border-radius:20px;background:var(--surface);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px}
.live .pick-top{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center}
.live .pick-top img{width:96px;height:96px;border-radius:20px;border:3px solid var(--brand);display:block}
.live .pick-top h2{margin:2px 0 6px;font:900 40px/.92 var(--display);font-stretch:75%;letter-spacing:-.01em;overflow-wrap:anywhere}
.live .pick-status{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font:800 11px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;background:var(--brand);color:var(--brand-ink)}
.live .pick-status.playing{background:var(--good);color:var(--good-ink)}
.live .reasons{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.live .reasons li{display:flex;align-items:center;gap:6px;padding:5px 9px 5px 5px;border-radius:999px;font-size:13px;font-weight:700;background:var(--surface-2)}
.live .reasons img{width:22px;height:22px;border-radius:50%}
.live .reasons .beat{color:var(--good);background:color-mix(in oklab,var(--good) 10%,var(--surface-2))}
.live .reasons .risk{color:var(--bad);background:color-mix(in oklab,var(--bad) 10%,var(--surface-2))}
.live .reasons .fit{color:var(--info);background:color-mix(in oklab,var(--info) 10%,var(--surface-2))}
.live .reasons .map{color:var(--info);background:color-mix(in oklab,var(--info) 10%,var(--surface-2));padding-left:10px}
.live .perks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.live .perk{padding:10px 12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);min-width:0}
.live .perk .eyebrow{font-size:10px;margin-bottom:5px}
.live .perk b{display:block;font:800 20px/1.05 var(--display);font-stretch:75%;color:var(--brand)}
.live .perk p{margin:5px 0 0;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.live .perk-why{margin:-4px 0 0;font-size:12.5px;color:var(--muted)}
.live .perk-why b{color:var(--ink-2);font-weight:700}
.live .alts{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
.live .alt{flex:1 0 0;min-width:96px;display:flex;align-items:center;gap:8px;padding:8px;border-radius:14px;border:1px solid var(--line);background:var(--bg-2);text-align:left}
.live .alt img{width:38px;height:38px;border-radius:10px;flex:none}
.live .alt b{display:block;font:800 16px/1 var(--display);font-stretch:75%;white-space:nowrap}
.live .alt small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.live .play-btn{min-height:50px;border-radius:14px;border:0;background:var(--brand);color:var(--brand-ink);font:800 16px/1 var(--display);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase}
.live .matchup{border-radius:20px;padding:16px;background:linear-gradient(160deg,color-mix(in oklab,var(--bad) 12%,var(--surface)),var(--surface));border:1px solid color-mix(in oklab,var(--bad) 35%,var(--line));display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start}
.live .matchup img{width:56px;height:56px;border-radius:14px;border:2px solid var(--bad)}
.live .matchup .eyebrow{color:var(--bad);margin-bottom:6px}
.live .matchup p{margin:0;font-size:16.5px;line-height:1.4}
.live .matchup.calm{background:var(--surface);border-color:var(--line);grid-template-columns:1fr}
.live .matchup.calm .eyebrow{color:var(--good)}
.live .list{display:flex;flex-direction:column;gap:8px}
.live .row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px 10px 8px 8px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
.live .row img{width:44px;height:44px;border-radius:11px}
.live .row b{display:block;font:800 19px/1 var(--display);font-stretch:75%}
.live .row small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.3}
.live .row .num{font:800 17px/1 var(--display);font-variant-numeric:tabular-nums}
.live .num.pos{color:var(--good)}
.live .num.neg{color:var(--bad)}
.live .row.ban img{border:2px solid var(--bad)}
.live .row .rank{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--bad);color:var(--bad-ink);font:900 14px/1 var(--display)}
.live .foot{margin:0;font-size:12px;color:var(--muted);text-align:center}
.live .bar{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(to top,var(--bg) 70%,transparent)}
.live .bar-inner{max-width:520px;margin:0 auto;display:grid;grid-template-columns:1fr 64px 64px;gap:8px}
.live .bar-inner.single{grid-template-columns:1fr}
.live .bar button{height:60px;border-radius:16px;border:0;font:800 17px/1 var(--display);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;transition:transform .1s}
.live .bar button:active{transform:scale(.96)}
.live .losing{background:var(--warn);color:#1A0F04;display:flex;align-items:center;justify-content:center;gap:8px}
.live .losing svg{width:20px;height:20px}
.live .win{background:var(--good);color:var(--good-ink)}
.live .loss{background:var(--bad);color:var(--bad-ink)}
.live .bar button:disabled{opacity:.35;transform:none}
.live .scrim{position:fixed;inset:0;z-index:40;background:rgba(5,6,10,.62);opacity:0;pointer-events:none;transition:opacity .18s}
.live .scrim.open{opacity:1;pointer-events:auto}
.live .sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:86%;display:flex;flex-direction:column;background:var(--bg-2);border-top:1px solid var(--line-2);border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .22s cubic-bezier(.2,.8,.2,1);padding:0 max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.live .sheet.open{transform:none}
.live .sheet-in{max-width:520px;width:100%;margin:0 auto;display:flex;flex-direction:column;min-height:0;flex:1}
.live .grab{width:42px;height:5px;border-radius:3px;background:var(--line-2);margin:10px auto 8px}
.live .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0 12px}
.live .sheet-head h3{margin:0;font:900 26px/1 var(--display);font-stretch:75%}
.live .sheet-head button{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line-2);background:transparent;font:700 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.live .sheet-body{overflow-y:auto;min-height:0;padding-bottom:6px;overscroll-behavior:contain}
.live .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.live .pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;min-width:0}
.live .pick .f{position:relative;width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;border:2px solid var(--line-2);background:var(--surface)}
.live .pick .f img{width:100%;height:100%;object-fit:cover;display:block}
.live .pick span{font:700 13px/1.1 var(--display);font-stretch:87.5%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .pick[aria-pressed=true] .f{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.live .pick[aria-pressed=true] .f::after{content:"✓";position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:7px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font:900 13px/1 var(--display)}
.live .pick.current .f{border-color:var(--role)}
.live .pick:disabled{opacity:.3}
.live .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:14px}
.live .seg button{min-height:44px;border-radius:10px;border:0;background:transparent;font:800 15px/1 var(--display);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.live .seg button[aria-pressed=true]{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 -3px 0 var(--role)}
.live .maps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.live .map-btn{min-height:52px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-align:left;display:flex;flex-direction:column;justify-content:center;gap:2px}
.live .map-btn b{font:800 17px/1.05 var(--display);font-stretch:75%}
.live .map-btn small{font-size:11.5px;color:var(--muted)}
.live .map-btn[aria-pressed=true]{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 10%,var(--surface))}
.live .hint{margin:0 0 12px;font-size:13.5px;color:var(--ink-2)}
.live .done{margin-top:14px;width:100%}
.live .toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + 18px + env(safe-area-inset-bottom,0px));z-index:50;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.2s;width:min(480px,calc(100% - 32px));padding:12px 14px;border-radius:14px;background:var(--surface-3);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;box-shadow:0 16px 40px -12px #000}
.live .toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.live .toast a{flex:none;color:var(--brand);font:800 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:8px 0}
.live .wake{display:inline-flex;align-items:center;gap:5px;font:700 10px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--good)}
.live .wake::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
@media (prefers-reduced-motion:reduce){.live *{transition:none!important;animation:none!important}}
@media (min-width:700px){.live .grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- match steps ---------- */
.live #screen{display:flex;flex-direction:column;gap:14px}
.live .block{display:flex;flex-direction:column}
.live .steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.live .steps button{min-height:34px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:700 12px/1 var(--display);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase}
.live .steps button.past{color:var(--ink-2);border-color:var(--line-2)}
.live .steps button.past::before{content:"✓ ";color:var(--good)}
.live .steps button.now{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.live .steps-mode{flex-basis:100%;font-size:12px;color:var(--muted)}
.live .screen-title{margin:6px 0 0;font-size:30px;line-height:1}
.live .seg.two{grid-template-columns:repeat(2,1fr);margin:0}
.live .seg.two button[aria-pressed=true]{box-shadow:inset 0 -3px 0 var(--brand)}
.live .ranks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.live .ranks button{min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);font:700 13px/1 var(--display);font-stretch:87.5%;letter-spacing:.04em;color:var(--ink-2)}
.live .ranks button[aria-pressed=true]{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 14%,var(--bg-2));color:var(--ink)}
.live .pool-card{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;cursor:pointer}
.live .pool-card b{display:block;margin-top:6px;font:800 20px/1.1 var(--display);font-stretch:75%}
.live .pool-card .chev-r{font-size:28px;color:var(--muted)}
.live .map-row{grid-template-columns:44px 1fr auto}
.live .map-row.vote{border-color:var(--good);background:color-mix(in oklab,var(--good) 9%,var(--bg-2))}
.live .map-row em{font-style:normal;font-weight:800;color:var(--good)}
.live .map-dot{width:44px;height:44px;border-radius:11px;background:var(--surface-2)}
.live .won-btn{min-height:40px;padding:0 12px;border-radius:10px;border:0;background:var(--brand);color:var(--brand-ink);font:800 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.live .bans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.live .slot.banned .slot-face{border-color:var(--bad);position:relative}
.live .slot.banned .slot-face::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 46%,var(--bad) 46%,var(--bad) 54%,transparent 54%);opacity:.85}
.live .slot.banned img{filter:grayscale(.7)}
.live .grid-label{margin:14px 0 8px}
.live .grid-label:first-child{margin-top:0}
.live .map-btn.wide{width:100%;margin-bottom:12px}
.live .reasons .tier{color:var(--brand);background:color-mix(in oklab,var(--brand) 10%,var(--surface-2));padding-left:10px}
.live .next{height:60px;border-radius:16px;border:0;background:var(--brand);color:var(--brand-ink);font:800 17px/1 var(--display);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase}
.live .next:disabled{opacity:.4}

/* ---------- v2: guided session ---------- */
.live .q-card{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.live .q-step{margin:0;font:700 12px/1 var(--display);font-stretch:87.5%;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.live .q-title{margin:0;font:900 34px/.95 var(--display);font-stretch:75%;letter-spacing:-.01em;text-wrap:balance}
.live .q-help{margin:0;font-size:15px;line-height:1.45;color:var(--ink-2)}
.live .q-label{margin:6px 0 -2px;font:700 12px/1.2 var(--display);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.live .q-label span{letter-spacing:.04em;text-transform:none;font-family:var(--body);font-weight:400}
.live .choice{display:grid;gap:8px}
.live .choice.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.live .choice.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.live .choice button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:72px;padding:12px 14px;border-radius:16px;border:2px solid var(--line);background:var(--surface);text-align:left}
.live .choice.three button{min-height:52px;align-items:center}
.live .choice button b{font:900 24px/1 var(--display);font-stretch:75%}
.live .choice.three button b{font-size:19px}
.live .choice button small{font-size:12.5px;color:var(--muted)}
.live .choice button[aria-pressed=true]{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 12%,var(--surface))}
.live .choice button[aria-pressed=true] b{color:var(--brand)}
.live .pool-strip{display:flex;flex-wrap:wrap;gap:6px}
.live .pool-chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:3px 10px 3px 3px;border-radius:999px;border:1px solid var(--brand);background:color-mix(in oklab,var(--brand) 10%,var(--surface));font:800 14px/1 var(--display);font-stretch:87.5%}
.live .pool-chip img{width:30px;height:30px;border-radius:50%}
.live .pool-chip i{font-style:normal;color:var(--muted);font-size:11px}
.live .pool-chip.off{opacity:.45;border-color:var(--line-2)}
.live .grids{display:flex;flex-direction:column}
.live .ctx-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.live .ctx-bar button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:52px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-align:left;min-width:0}
.live .ctx-bar .eyebrow{font-size:10px}
.live .ctx-bar b{font:800 14px/1.15 var(--display);font-stretch:87.5%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .rank-list{display:flex;flex-direction:column;gap:6px}
.live .rank-row{display:grid;grid-template-columns:22px 40px minmax(0,1fr);gap:10px;align-items:center;padding:6px 10px 6px 8px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);text-align:left}
.live .rank-row .pos{font:900 16px/1 var(--display);color:var(--muted);text-align:center}
.live .rank-row img{width:40px;height:40px;border-radius:10px}
.live .rank-row b{display:block;font:800 18px/1 var(--display);font-stretch:75%}
.live .rank-row small{display:block;font-size:12px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .rank-row.on{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 9%,var(--bg-2))}
.live .rank-row.on .pos{color:var(--brand)}
.live .perks-block{display:flex;flex-direction:column;gap:10px}
.live .perk-row .eyebrow{font-size:10px;margin-bottom:6px}
.live .perk-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.live .perk-opt{display:flex;flex-direction:column;gap:4px;padding:10px 11px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);text-align:left;min-width:0}
.live .perk-opt b{font:800 16px/1.05 var(--display);font-stretch:75%;color:var(--ink-2)}
.live .perk-opt b span{display:inline-block;margin-left:4px;padding:2px 5px;border-radius:5px;background:var(--brand);color:var(--brand-ink);font:800 9px/1 var(--display);letter-spacing:.08em;vertical-align:2px}
.live .perk-opt small{font-size:12px;line-height:1.3;color:var(--muted)}
.live .perk-opt.rec{border-color:color-mix(in oklab,var(--brand) 55%,var(--line))}
.live .perk-opt.rec b{color:var(--brand)}
.live button.perk-opt.on{border-color:var(--good);background:color-mix(in oklab,var(--good) 12%,var(--bg-2))}
.live button.perk-opt.on b{color:var(--good)}
.live button.perk-opt.on b::before{content:"✓ "}
.live .switch-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:0 -2px}
.live .sw{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none}
.live .sw .f{position:relative;width:60px;height:60px;border-radius:14px;overflow:hidden;border:2px solid var(--line-2);background:var(--surface)}
.live .sw .f img{width:100%;height:100%;object-fit:cover;display:block}
.live .sw small{font:700 11px/1 var(--display);font-stretch:87.5%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.live .sw.on .f{border-color:var(--good);box-shadow:0 0 0 2px var(--good)}
.live .sw.on small{color:var(--good)}
.live .sw .best{position:absolute;left:0;right:0;bottom:0;padding:2px 0;background:var(--brand);color:var(--brand-ink);font:800 9px/1 var(--display);letter-spacing:.1em;font-style:normal;text-align:center}
.live .swap-hint{margin:6px 0 0}
.live .swap-hint b{color:var(--brand)}
.live .now-card .pick-top img{border-color:var(--good)}
.live .tips{display:flex;flex-direction:column;gap:8px}
.live .tip{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.live .tip img{width:44px;height:44px;border-radius:11px}
.live .tip p{margin:0;font-size:15px;line-height:1.4}
.live .tip .eyebrow{font-size:10.5px;margin-bottom:4px}
.live .tip.bad{border-color:color-mix(in oklab,var(--bad) 40%,var(--line));background:color-mix(in oklab,var(--bad) 8%,var(--surface))}
.live .tip.bad .eyebrow{color:var(--bad)}
.live .tip.good .eyebrow{color:var(--good)}
.live .tip.calm{grid-template-columns:1fr}
.live .tip.calm .eyebrow{color:var(--good)}
.live .mini-btn{border:0;background:none;color:var(--muted);font:700 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:10px 0 10px 12px}
.live .back-to{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;font:700 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.live .bar-inner.duo{grid-template-columns:1fr 1fr}
.live .bar-inner.duo button{height:64px}
.live .next.ghosty{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2)}
.live .kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.live .kpis.big{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.live .kpis > div{padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.live .kpis b{display:block;font:900 30px/1 var(--display);font-stretch:75%;font-variant-numeric:tabular-nums}
.live .kpis small{display:block;margin-top:4px;font-size:12px;color:var(--muted);line-height:1.3}
.live .slist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.live .srow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 10px 6px 6px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.live .srow img,.live .srow .map-dot{width:40px;height:40px;border-radius:10px}
.live .srow b{display:block;font:800 17px/1.05 var(--display);font-stretch:75%}
.live .srow small{display:block;font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .srow .wl{text-align:right}
.live .srow .wl b{font-variant-numeric:tabular-nums}
.live .srow .go{font:700 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.live .res{font:800 12px/1 var(--display);letter-spacing:.1em;padding:6px 8px;border-radius:8px}
.live .res.w{background:color-mix(in oklab,var(--good) 18%,transparent);color:var(--good)}
.live .res.l{background:color-mix(in oklab,var(--bad) 18%,transparent);color:var(--bad)}
.live .links{display:flex;flex-direction:column;margin-top:4px}
.live .links a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700}
.live .links a:last-child{border-bottom:0}
.live .links a:hover{color:var(--brand)}
.live .confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center}
.live .confirm p{flex-basis:100%;margin:0;text-align:center;font-size:14px;color:var(--ink-2)}
.live .ghost{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:transparent;font:700 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.live .ghost.danger{border-color:var(--bad);color:var(--bad)}
.live .toast button{flex:none;border:0;background:none;color:var(--brand);font:800 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:8px 0}
.live .slot[data-role=any]{--role:var(--line-2)}
.live .slot.filled[data-role=any]{--role:var(--ink-2)}

.live-page .live-note a{color:var(--brand)}
.live-page .live-note a[hidden]{display:none}
.live .record{background:transparent;color:var(--ink)}
.live .steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px}
.live .steps::-webkit-scrollbar{display:none}
.live .steps button{flex:none;min-height:32px;padding:0 9px;font-size:11px;letter-spacing:.06em}
.live .steps button.past::before{content:"✓"}
.live .steps button.past{font-size:0;padding:0 8px;min-width:30px}
.live .steps button.past::before{font-size:12px}

/* ---------- voice commands (experimental) ---------- */
.live .voice-card{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:18px;border:1px dashed var(--line-2);background:var(--bg-2)}
.live .voice-card.on{border-style:solid;border-color:color-mix(in oklab,var(--info) 50%,var(--line))}
.live .voice-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.live .voice-head b{display:block;margin-top:4px;font:800 20px/1.1 var(--display);font-stretch:75%}
.live .voice-card p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.live .voice-card .voice-privacy{font-size:12px;color:var(--muted)}
.live .voice-card .voice-why{color:var(--warn);font-size:12.5px}
.live .beta{margin-left:6px;padding:2px 6px;border-radius:5px;background:var(--info);color:#04101A;font:800 9px/1 var(--display);letter-spacing:.1em;vertical-align:1px}
.live .switch{flex:none;position:relative;width:54px;height:32px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-3);padding:0}
.live .switch span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ink-2);transition:transform .15s}
.live .switch[aria-checked=true]{background:var(--info);border-color:var(--info)}
.live .switch[aria-checked=true] span{transform:translateX(22px);background:#04101A}
.live .switch:disabled{opacity:.4}
.live .choice.lang button{min-height:44px;align-items:center}
.live .choice.lang button b{font-size:17px}
.live .bar-inner.trio{grid-template-columns:76px 1fr 1fr}
.live .bar-inner.trio button{height:64px}
.live .mic{display:grid;place-items:center;border:0;border-radius:16px;background:var(--info);color:#04101A;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.live .mic svg{width:28px;height:28px}
.live .mic.rec{background:var(--bad);color:var(--bad-ink);box-shadow:0 0 0 6px color-mix(in oklab,var(--bad) 30%,transparent);animation:mic-pulse 1s ease-in-out infinite}
@keyframes mic-pulse{50%{box-shadow:0 0 0 12px color-mix(in oklab,var(--bad) 15%,transparent)}}
.live #toastUndo{flex:none;border:0;background:none;color:var(--brand);font:800 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:8px 0}

.live .plan{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:18px;border:1px solid color-mix(in oklab,var(--info) 35%,var(--line));background:linear-gradient(160deg,color-mix(in oklab,var(--info) 10%,var(--surface)),var(--surface))}
.live .plan-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.live .plan-head b{font:900 24px/1 var(--display);font-stretch:75%;color:var(--info)}
.live .plan-head small{font-size:12px;color:var(--muted)}
.live .plan p{margin:0;font-size:15px;line-height:1.45}
.live .plan .plan-role{font-size:13.5px;color:var(--ink-2)}

/* ---------- hero scene: phone running Live next to monitor, keyboard and controller ---------- */
.live-page .live-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.live-page .live-brand svg{width:44px;height:44px;flex:none}
.live-page .live-brand span{font:900 22px/1 var(--display);font-stretch:75%;letter-spacing:-.01em}
.live-page .live-brand span i{font-style:normal;color:var(--brand)}
.live-page .live-brand em{font-style:normal;margin-left:4px;padding:3px 7px;border-radius:6px;background:var(--guilty);color:#1A0505;font:800 11px/1 var(--display);letter-spacing:.14em;vertical-align:4px}
.live-emblem-dot{animation:ls-pulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.live .top .emb{width:30px;height:30px;flex:none}

/* Hero scene: the phone on its stand between keyboard and controller. One 12s story: tap the enemy swap, get new advice, tap an ult. */
.live-page .live-scene{--T:12s;position:relative;width:100%;aspect-ratio:16/12.5;max-width:600px;justify-self:end;container-type:inline-size;border-radius:28px;overflow:hidden;isolation:isolate;background:#0b0d13;border:1px solid var(--line)}
.live-page .ls-wall{position:absolute;inset:0;background:
  radial-gradient(34% 46% at 50% 44%,rgba(255,201,64,.16),transparent 72%),
  radial-gradient(40% 50% at 12% 30%,rgba(92,184,255,.16),transparent 72%),
  radial-gradient(40% 50% at 90% 34%,rgba(255,107,107,.10),transparent 72%),
  linear-gradient(180deg,#121624 0%,#0d1019 66%)}
.live-page .ls-wall::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7cqw)}
/* desk */
.live-page .ls-desk{position:absolute;left:0;right:0;top:62%;bottom:0;z-index:1;background:linear-gradient(180deg,#1f2433 0%,#141824 22%,#0b0d13 100%);border-top:1px solid #343b52}
.live-page .ls-pool{position:absolute;left:5%;top:0;width:50%;height:70%;background:radial-gradient(50% 60% at 50% 0,rgba(120,160,220,.18),transparent 75%)}
.live-page .ls-desk::after{content:"";position:absolute;left:30%;top:0;width:40%;height:70%;background:radial-gradient(50% 60% at 50% 0,rgba(255,201,64,.14),transparent 75%)}
/* keyboard, seen from the chair */
.live-page .ls-kbd-wrap{position:absolute;left:-6%;bottom:6%;width:44%;z-index:3;perspective:60cqw;perspective-origin:50% -40%}
.live-page .ls-kbd{display:flex;flex-direction:column;gap:.45cqw;padding:1.2cqw;border-radius:1.4cqw;background:linear-gradient(180deg,#232838,#151925);border:.25cqw solid #3a4158;transform:rotateX(38deg);transform-origin:50% 100%;
  box-shadow:0 0 0 .2cqw #0b0d13,0 2.4cqw 3cqw -1cqw rgba(0,0,0,.9),0 0 4cqw -1cqw rgba(92,184,255,.45)}
.live-page .ls-kbd .r{display:flex;gap:.45cqw}
.live-page .ls-kbd span{position:relative;height:2.6cqw;border-radius:.45cqw;background:linear-gradient(180deg,#2f3549,#262b3c);box-shadow:inset 0 -.35cqw 0 #141824,0 .1cqw 0 #0b0d13;display:grid;place-items:center}
.live-page .ls-kbd em{font:800 1.15cqw/1 var(--display);font-style:normal;color:#8c95a8;letter-spacing:.02em}
.live-page .ls-kbd .k-w,.live-page .ls-kbd .k-a,.live-page .ls-kbd .k-s,.live-page .ls-kbd .k-d{background:linear-gradient(180deg,#4b3f1c,#3a3118);box-shadow:inset 0 -.35cqw 0 #1d180b,0 0 1.6cqw -.2cqw rgba(255,201,64,.6)}
.live-page .ls-kbd .k-w em,.live-page .ls-kbd .k-a em,.live-page .ls-kbd .k-s em,.live-page .ls-kbd .k-d em{color:#FFC940}
.live-page .ls-kbd .k-q em,.live-page .ls-kbd .k-e em,.live-page .ls-kbd .k-sh em{color:#9cd2ff}
.live-page .ls-kbd .k-w{animation:ls-key 1.4s ease-in-out infinite}
.live-page .ls-kbd .k-a{animation:ls-key 2.2s .5s ease-in-out infinite}
.live-page .ls-kbd .k-d{animation:ls-key 2.2s 1.6s ease-in-out infinite}
.live-page .ls-kbd .k-sh{animation:ls-key 3s 1s ease-in-out infinite}
.live-page .ls-kbd .k-sp{animation:ls-key 4s 2.4s ease-in-out infinite}
/* controller */
.live-page .ls-pad{position:absolute;right:0;bottom:7%;width:26%;z-index:4;transform:rotate(10deg);filter:drop-shadow(0 1.6cqw 1.2cqw rgba(0,0,0,.85))}
.live-page .ls-padlight{animation:ls-glowp 3s ease-in-out infinite}
.live-page .ls-stick-l{animation:ls-stick 2.6s ease-in-out infinite}
.live-page .ls-stick-r{animation:ls-stick 3.4s .8s ease-in-out infinite reverse}
/* phone on its stand */
.live-page .ls-stand{position:absolute;left:50%;bottom:3.5%;width:30%;margin-left:-15%;height:10%;z-index:4;border-radius:1cqw 1cqw .8cqw .8cqw;background:linear-gradient(180deg,#3a4158,#1a1e2b);box-shadow:0 1.5cqw 2cqw -.5cqw #000;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.live-page .ls-phone{position:absolute;left:50%;bottom:7%;width:38%;margin-left:-19%;aspect-ratio:9/16;z-index:5;container-type:inline-size;border-radius:4.4cqw;padding:1.4cqw;background:linear-gradient(160deg,#3a4158,#11141c 40%);transform:none;
  box-shadow:0 0 0 .5cqw #0b0d13,0 5cqw 8cqw -3cqw #000,0 0 10cqw -2cqw rgba(255,201,64,.35)}
.live-page .ls-screen{position:relative;height:100%;border-radius:12cqw;background:#0E1015;overflow:hidden;display:flex;flex-direction:column;gap:3.4cqw;padding:7cqw 5.2cqw 6cqw}
.live-page .ls-screen::before{content:"";position:absolute;top:2.6cqw;left:50%;width:22cqw;height:5cqw;margin-left:-11cqw;border-radius:4cqw;background:#000}
.live-page .ls-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.07) 0 25%,transparent 40%);pointer-events:none}
.live-page .ls-top{display:flex;align-items:center;gap:2.5cqw;margin-top:3cqw}
.live-page .ls-top svg{width:10cqw;height:10cqw;flex:none}
.live-page .ls-top b{font:900 7.2cqw/1 var(--display);font-stretch:75%;white-space:nowrap}
.live-page .ls-top b i{font-style:normal;color:var(--brand)}
.live-page .ls-top em{font-style:normal;margin-left:auto;padding:1cqw 2cqw;border-radius:2cqw;background:var(--guilty);color:#1A0505;font:800 4cqw/1 var(--display);letter-spacing:.1em}
.live-page .ls-tap{position:absolute;left:50%;top:50%;width:20cqw;height:20cqw;margin:-10cqw;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,rgba(255,255,255,.18) 24%);border:.8cqw solid #fff;box-shadow:0 0 3cqw rgba(255,255,255,.6);opacity:0;pointer-events:none;z-index:2}
/* the 12s story */
@keyframes ls-pulse{50%{opacity:.35;transform:scale(.8)}}
@keyframes ls-key{0%,40%,60%,100%{transform:none}48%{transform:translateY(.25cqw);filter:brightness(1.5)}}
@keyframes ls-stick{0%,100%{transform:translate(0,0)}30%{transform:translate(2px,-2px)}60%{transform:translate(-2px,1px)}}
@keyframes ls-glowp{50%{opacity:.45}}
@media (max-width:860px){.live-page .live-scene{max-width:none;justify-self:stretch}}
@media (max-width:560px){.live-page .live-scene{aspect-ratio:16/13}}
@container (max-width:440px){.live-page .ls-phone{width:40%;margin-left:-20%;bottom:7%}.live-page .ls-stand{width:30%;margin-left:-15%}.live-page .ls-kbd-wrap{left:-6%;width:42%}.live-page .ls-pad{right:-1%;width:26%}}
@media (max-width:420px){.live .record small{display:none}.live .top .emb{width:26px;height:26px}.live .top-left{gap:8px}}
.live .show-all{display:block;margin:10px auto 0}
/* match screen: one screen, details open in panels */
.live .slots.compact .slot-face{border-radius:12px}
.live .slots.compact small{font-size:10.5px}
.live .now{display:grid;grid-template-columns:64px 1fr 18px;gap:12px;align-items:center;width:100%;padding:10px 12px 10px 10px;border-radius:18px;border:2px solid color-mix(in oklab,var(--good) 55%,var(--line));background:var(--surface);text-align:left;color:var(--ink)}
.live .now.empty{grid-template-columns:1fr 18px;border-style:dashed;border-color:var(--line-2)}
.live .now img{width:64px;height:64px;border-radius:14px;display:block}
.live .now-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.live .now-txt .eyebrow{color:var(--good);font-size:10.5px}
.live .now-txt b{font:900 30px/.95 var(--display);font-stretch:75%;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .now-txt small{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;font-weight:700}
.live .now-txt em{font-style:normal}.live .now-txt .risk{color:var(--bad)}.live .now-txt .beat{color:var(--good)}
.live .now .chev,.live .tile::after{font:900 26px/1 var(--display);color:var(--muted)}
.live .better{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 8px 8px 10px;border-radius:16px;border:1px solid color-mix(in oklab,var(--brand) 45%,var(--line));background:color-mix(in oklab,var(--brand) 10%,var(--surface))}
.live .better img{width:40px;height:40px;border-radius:10px}
.live .better p{margin:0;font-size:15px;line-height:1.2}.live .better p b{color:var(--brand)}
.live .better small{display:block;font-size:12px;color:var(--ink-2)}
.live .better button{min-height:44px;padding:0 16px;border-radius:12px;border:0;background:var(--brand);color:var(--brand-ink);font:800 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.live .tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.live .tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;min-height:84px;padding:12px 30px 12px 12px;border-radius:16px;border:1px solid var(--line);background:var(--surface);text-align:left;color:var(--ink)}
.live .tile::after{content:"›";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:22px}
.live .tile:active,.live .now:active{transform:scale(.98)}
.live .tile b{font:800 14.5px/1.2 var(--display);font-stretch:87.5%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.live .tile .plan-word{font:900 26px/1 var(--display);font-stretch:75%;color:var(--info)}
.live .tile.warn{border-color:color-mix(in oklab,var(--bad) 45%,var(--line));background:color-mix(in oklab,var(--bad) 7%,var(--surface))}
.live .tile.warn b{color:var(--bad)}
.live .tile .dot{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--warn)}
.live .tile .faces{display:flex}.live .tile .faces img{width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);margin-right:-8px}
.live .best-tag{margin-left:6px;padding:2px 5px;border-radius:5px;background:var(--brand);color:var(--brand-ink);font:800 10px/1 var(--display);font-style:normal;letter-spacing:.08em;vertical-align:2px}
.live .sheet .block{gap:0}
.live[data-view=match] .steps,.live[data-view=match] .foot{display:none}
.live[data-view=match] #screen{gap:10px}
.live[data-view=match] .app{gap:10px}
.live[data-view=match] .enemy-head .eyebrow{font-size:11px}
.live[data-view=match] .enemy-head button{padding:6px 0 6px 12px}
.live[data-view=match] .ult{margin-top:5px;min-height:30px}
.live .tile{min-height:68px}
.live .panel-links{display:flex;justify-content:center;gap:18px;margin-top:8px}
.live .tips-label{margin:0 0 8px}
.live .tip.nem{border-color:color-mix(in oklab,var(--warn) 45%,var(--line));background:color-mix(in oklab,var(--warn) 8%,var(--surface))}
.live .tip.nem .eyebrow{color:var(--warn)}
.live .sheet .tip.calm{margin-top:8px}.live .sheet .tip.nem{margin-top:8px}
.live .tip p b{color:var(--ink)}
/* setup choices: let the help text wrap */
.live .choice button{min-width:0;white-space:normal;text-transform:none;letter-spacing:normal}
.live .choice button b{text-transform:uppercase}
.live .choice button small{display:block;line-height:1.3;text-transform:none;letter-spacing:normal;white-space:normal}
/* map vote */
.live .mode-fit{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:12px}
.live .mode-fit span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);min-width:0}
.live .mode-fit b{font:800 12px/1 var(--display);font-stretch:87.5%;letter-spacing:.02em;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.live .mode-fit small{font:800 15px/1 var(--display);color:var(--ink-2)}
.live .mode-fit .top{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 12%,var(--bg-2))}
.live .mode-fit .top b,.live .mode-fit .top small{color:var(--brand)}
.live .mode-fit .low small{color:var(--bad)}
.live .mode-note{margin:8px 0 0;font-size:12px;color:var(--muted)}
.live .map-btn{position:relative;white-space:normal;text-transform:none;letter-spacing:normal}
.live .map-btn.good{border-color:color-mix(in oklab,var(--good) 45%,var(--line))}
.live .map-btn.good small{color:var(--good)}
.live .map-btn.bad small{color:var(--bad)}
.live .map-btn .vote{position:absolute;top:6px;right:6px;padding:2px 5px;border-radius:5px;background:var(--good);color:#04140D;font:800 9.5px/1 var(--display);font-style:normal;letter-spacing:.08em}
.live .map-btn:has(.vote) b{padding-right:46px}
/* rooms (duo / trio) */
.live .room-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;border:1px solid color-mix(in oklab,var(--info) 40%,var(--line));background:linear-gradient(160deg,color-mix(in oklab,var(--info) 10%,var(--surface)),var(--surface))}
.live .room-card b{display:block;margin-top:6px;font:900 24px/1 var(--display);font-stretch:75%}
.live .room-card p{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.live .room-card .eyebrow{color:var(--info);margin:0}
.live .room-actions{display:flex;gap:8px}
.live .room-actions button{flex:1;min-height:48px;border-radius:14px;border:0;background:var(--info);color:#04121F;font:800 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.live .room-actions button.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.live .room-pill{display:grid;grid-template-columns:10px 1fr auto 14px;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 12px;border-radius:12px;border:1px solid color-mix(in oklab,var(--info) 40%,var(--line));background:color-mix(in oklab,var(--info) 8%,var(--surface));color:var(--ink);text-align:left;font-size:13.5px}
.live .room-pill b{font-weight:800;letter-spacing:.06em}
.live .room-pill .faces{display:flex}.live .room-pill .faces img{width:24px;height:24px;border-radius:50%;border:2px solid var(--surface);margin-left:-6px}
.live .room-pill .chev{color:var(--muted);font:900 20px/1 var(--display)}
.live .live-dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in oklab,var(--good) 25%,transparent);animation:live-pulse 1.8s ease-in-out infinite}
@keyframes live-pulse{50%{opacity:.4}}
.live .room-code{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:14px}
.live .room-code b{font:900 52px/1 var(--display);font-stretch:75%;letter-spacing:.12em;color:var(--info)}
.live .room-code .next{width:100%;height:56px;border-radius:16px;border:0;background:var(--brand);color:var(--brand-ink);font:800 16px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.live .wide-btn{width:100%;min-height:48px;margin-top:12px;border-radius:14px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font:700 14px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.live .live-dot{animation:none}}
/* match tiles: read as buttons, one colour per topic */
.live .tile{--acc:var(--ink-2);gap:10px;min-height:88px;padding:12px;border:1px solid color-mix(in oklab,var(--acc) 45%,var(--line));border-left:4px solid var(--acc);background:linear-gradient(160deg,color-mix(in oklab,var(--acc) 13%,var(--surface)),var(--surface) 70%);box-shadow:0 2px 0 color-mix(in oklab,var(--acc) 25%,transparent)}
.live .tile::after{content:none}
.live .tile.t-tips{--acc:var(--warn)}.live .tile.t-tips.warn{--acc:var(--bad)}
.live .tile.t-perks{--acc:var(--brand)}
.live .tile.t-plan{--acc:var(--info)}
.live .tile.t-team{--acc:var(--good)}
.live .tile.warn{background:linear-gradient(160deg,color-mix(in oklab,var(--acc) 13%,var(--surface)),var(--surface) 70%);border-color:color-mix(in oklab,var(--acc) 45%,var(--line))}
.live .tile.warn b{color:var(--ink)}
.live .tile-head{display:flex;align-items:center;gap:8px;width:100%}
.live .tile-ic{width:22px;height:22px;flex:none;color:var(--acc)}
.live .tile-label{font:800 15px/1 var(--display);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.live .tile-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--acc);color:#0E1015;font:800 12px/20px var(--display);font-style:normal;text-align:center}
.live .tile-open{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in oklab,var(--acc) 22%,transparent);color:var(--acc);font:900 20px/1 var(--display);padding-bottom:2px}
.live .tile-body{display:block;width:100%}
.live .tile b{color:var(--ink)}
.live .tile .plan-word{color:var(--info)}
.live .tile .dot{top:auto;bottom:12px;right:12px}
.live .tiles-hint{margin:0;padding:8px 12px;border-radius:12px;background:color-mix(in oklab,var(--brand) 10%,var(--surface));border:1px dashed color-mix(in oklab,var(--brand) 45%,var(--line));font-size:13.5px;color:var(--ink-2)}
/* compact match layout so the four cards stay above Win / Loss */
.live .now{grid-template-columns:52px 1fr 18px;gap:10px;padding:8px 10px 8px 8px;border-radius:16px}
.live .now img{width:52px;height:52px;border-radius:12px}
.live .now-txt{gap:3px}
.live .now-txt b{font-size:26px}
.live .now-txt small{font-size:12px}
.live .better{grid-template-columns:34px 1fr auto;padding:6px 6px 6px 8px;border-radius:14px}
.live .better img{width:34px;height:34px;border-radius:9px}
.live .better p{font-size:14px}
.live .better button{min-height:40px;padding:0 14px}
.live .tiles-hint{padding:0;border:0;background:none;font:700 12.5px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--brand);text-align:center}
.live .tile{min-height:80px;padding:10px 10px 10px 12px;gap:8px}
.live[data-view=match] .slot small{font-size:10px}
.live .tile-label{white-space:nowrap;letter-spacing:.04em;font-size:14.5px}
/* ---------- intro page: lower sections ---------- */
.live-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.live-page .lv-sec{margin-top:64px}
.live-page .lv-kicker{margin:0 0 6px;font:800 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.live-page .lv-sec h2{margin:0 0 14px;font-size:clamp(30px,4.2vw,46px);line-height:.98;letter-spacing:-.01em}
.live-page .lv-intro{margin:0 0 22px;max-width:68ch;font-size:17px;line-height:1.55;color:var(--ink-2)}
.live-page .lv-sec h3{margin:0;font:800 22px/1.08 var(--display);font-stretch:75%;letter-spacing:.005em}
.live-page .lv-sec p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.live-page .lv-sec a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
/* tone per topic, same colours as the cards inside the app */
.live-page .tone-brand{--tone:var(--brand)}.live-page .tone-carry{--tone:var(--carry)}.live-page .tone-guilty{--tone:var(--guilty)}
.live-page .tone-innocent{--tone:var(--innocent)}.live-page .tone-accomplice{--tone:var(--accomplice)}.live-page .tone-muted{--tone:var(--muted)}
.live-page .lv-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;border:1px solid color-mix(in oklab,var(--tone,var(--line)) 30%,var(--line));background:linear-gradient(165deg,color-mix(in oklab,var(--tone,var(--surface)) 9%,var(--surface)),var(--bg-2) 75%)}
.live-page .lv-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in oklab,var(--tone) 16%,transparent);color:var(--tone)}
.live-page .lv-ic svg{width:22px;height:22px}
.live-page .lv-card h3 small{margin-left:8px;padding:2px 6px;border-radius:6px;background:color-mix(in oklab,var(--carry) 20%,transparent);color:var(--carry);font:800 10px/1.4 var(--display);letter-spacing:.1em;text-transform:uppercase;vertical-align:4px}
.live-page .lv-why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* steps: a timeline */
.live-page .lv-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.live-page .lv-steps ol::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:2px;background:linear-gradient(90deg,var(--brand),color-mix(in oklab,var(--brand) 20%,var(--line)))}
.live-page .lv-steps li{position:relative;display:flex;flex-direction:column;gap:10px}
.live-page .lv-dot{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font:900 20px/1 var(--display);box-shadow:0 0 0 6px var(--bg)}
.live-page .lv-steps h3{margin-top:6px}
.live-page .lv-steps h3 small{margin-left:6px;padding:2px 6px;border-radius:6px;background:var(--surface-2);color:var(--muted);font:800 10px/1.4 var(--display);letter-spacing:.1em;text-transform:uppercase;vertical-align:4px}
.live-page .lv-chip{align-self:flex-start;margin-top:auto;padding:6px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);font:800 13px/1 var(--display);letter-spacing:.04em;color:var(--ink-2)}
.live-page .lv-chip.good{color:var(--innocent);border-color:color-mix(in oklab,var(--innocent) 45%,var(--line))}
.live-page .lv-chip.bad{color:var(--guilty);border-color:color-mix(in oklab,var(--guilty) 45%,var(--line))}
.live-page .lv-chip.brand{color:var(--brand);border-color:color-mix(in oklab,var(--brand) 45%,var(--line))}
/* features: bento */
.live-page .lv-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.live-page .lv-card.big{grid-column:span 2}
.live-page .lv-mock{display:flex;align-items:center;gap:10px;margin-top:auto;padding:8px 8px 8px 10px;border-radius:14px;border:1px solid color-mix(in oklab,var(--brand) 45%,var(--line));background:color-mix(in oklab,var(--brand) 8%,var(--bg))}
.live-page .lv-mock img{width:40px;height:40px;border-radius:10px;flex:none}
.live-page .lv-mock span{flex:1;font-size:15px;color:var(--ink)}
.live-page .lv-mock span b{color:var(--brand)}
.live-page .lv-mock small{display:block;font-size:12px;color:var(--muted)}
.live-page .lv-mock>i{padding:10px 14px;border-radius:10px;background:var(--brand);color:var(--brand-ink);font:800 13px/1 var(--display);font-style:normal;letter-spacing:.08em}
.live-page .lv-mock.room{border-color:color-mix(in oklab,var(--carry) 45%,var(--line));background:color-mix(in oklab,var(--carry) 8%,var(--bg))}
.live-page .lv-mock.room span b{color:var(--carry);letter-spacing:.06em}
.live-page .lv-mock .faces{flex:none;display:flex}
.live-page .lv-mock .faces img{width:28px;height:28px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px}
.live-page .lv-live{width:9px;height:9px;border-radius:50%;background:var(--innocent);box-shadow:0 0 0 4px color-mix(in oklab,var(--innocent) 25%,transparent)}
/* comparison table */
.live-page .lv-table-wrap{border-radius:20px;border:1px solid var(--line);overflow:hidden;background:var(--bg-2)}
.live-page .lv-compare table{width:100%;border-collapse:collapse}
.live-page .lv-compare th,.live-page .lv-compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
.live-page .lv-compare tbody tr:last-child th,.live-page .lv-compare tbody tr:last-child td{border-bottom:0}
.live-page .lv-compare thead th{font:800 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
.live-page .lv-compare thead th:last-child{color:var(--brand)}
.live-page .lv-compare tbody th{font-weight:600;color:var(--ink)}
.live-page .lv-compare td{width:150px;text-align:center}
.live-page .lv-compare td:last-child{background:color-mix(in oklab,var(--brand) 6%,transparent)}
.live-page .lv-compare .yes{color:var(--innocent);font:900 20px/1 var(--display)}
.live-page .lv-compare .no{color:var(--muted);font:900 20px/1 var(--display)}
/* faq */
.live-page .lv-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.live-page .lv-faq details{border-radius:16px;border:1px solid var(--line);background:var(--bg-2)}
.live-page .lv-faq details[open]{border-color:color-mix(in oklab,var(--brand) 40%,var(--line));background:var(--surface)}
.live-page .lv-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;cursor:pointer;list-style:none}
.live-page .lv-faq summary::-webkit-details-marker{display:none}
.live-page .lv-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--brand);font:800 18px/1 var(--display)}
.live-page .lv-faq details[open] summary::after{content:"–"}
.live-page .lv-faq summary h3{font:700 16px/1.3 var(--body);font-stretch:100%}
.live-page .lv-faq details p{padding:0 16px 16px}
.live-page .lv-faq summary:focus-visible,.live-page .lv-card a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:1100px){
  .live-page .lv-why-grid,.live-page .lv-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .live-page .lv-steps ol{grid-template-columns:1fr;gap:0}
  .live-page .lv-steps ol::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto;background:linear-gradient(180deg,var(--brand),color-mix(in oklab,var(--brand) 20%,var(--line)))}
  .live-page .lv-steps li{display:grid;grid-template-columns:44px 1fr;column-gap:16px;row-gap:6px;padding-bottom:22px}
  .live-page .lv-steps li>*:not(.lv-dot){grid-column:2}
  .live-page .lv-dot{grid-row:1/span 3}
  .live-page .lv-steps h3{margin-top:10px}
}
@media (max-width:640px){
  .live-page .lv-sec{margin-top:48px}
  .live-page .lv-why-grid,.live-page .lv-bento,.live-page .lv-faq-grid{grid-template-columns:1fr}
  .live-page .lv-card.big{grid-column:auto}
  .live-page .lv-compare th,.live-page .lv-compare td{padding:12px 10px;font-size:14px}
  .live-page .lv-compare td{width:84px}
  .live-page .lv-compare thead th{font-size:11px;letter-spacing:.06em}
}
.live-page .lv-mock>i.lv-live{flex:none;width:9px;height:9px;padding:0;margin:0 4px;border-radius:50%;background:var(--innocent)}
.live-page .lv-faq summary h3{text-transform:none;letter-spacing:0}
@media (max-width:640px){
  .live-page .lv-card{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:16px;align-items:start}
  .live-page .lv-card .lv-ic{grid-row:1/span 2}
  .live-page .lv-card h3{align-self:center;font-size:20px}
  .live-page .lv-card>p,.live-page .lv-card>.lv-mock{grid-column:2}
  .live-page .lv-card>.lv-mock{grid-column:1/-1;margin-top:6px}
}
.live-page .lv-steps .lv-chip{justify-self:start}
/* ---------- hero phone: a 28s tour of what Live does (8 scenes, 3.5s each) ---------- */
.live-page .live-scene{--T:28s;--S:3.5s}
.live-page .ls-phone{width:35%;margin-left:-17.5%;bottom:6%}
.live-page .ls-stand{width:28%;margin-left:-14%;bottom:3%}
.live-page .ls-screen{gap:2.6cqw;padding:7cqw 4.6cqw 5cqw}
.live-page .ls-top{margin-top:2.6cqw}
.live-page .ls-stage{position:relative;flex:1;min-height:0}
.live-page .sc{position:absolute;inset:0;display:flex;flex-direction:column;gap:2.4cqw;opacity:0;animation:ls-sc var(--T) infinite;animation-delay:calc(var(--i) * var(--S) - var(--T))}
.live-page .sc *{animation-delay:inherit}
@keyframes ls-sc{0%{opacity:0;transform:translateY(2cqw)}1.3%{opacity:1;transform:none}11.6%{opacity:1;transform:none}12.5%,100%{opacity:0;transform:translateY(-1cqw)}}
.live-page .sc-k{margin:0;font:800 3.4cqw/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.live-page .sc .sc-h{margin:-1cqw 0 0;font:900 9cqw/1 var(--display);font-stretch:75%;color:var(--ink)}
.live-page .sc img{display:block;object-fit:cover}
/* map vote */
.live-page .sc-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.live-page .sc-modes span{display:flex;flex-direction:column;align-items:center;gap:1cqw;padding:2cqw 0;border-radius:3cqw;border:.4cqw solid var(--line);background:var(--bg-2);font:800 3.2cqw/1 var(--display);color:var(--ink-2)}
.live-page .sc-modes b{font-size:4.6cqw;color:var(--ink)}
.live-page .sc-modes .top{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 12%,var(--bg-2));color:var(--brand)}.live-page .sc-modes .top b{color:var(--brand)}
.live-page .sc-map{position:relative;display:flex;flex-direction:column;gap:1cqw;padding:2.6cqw 3.4cqw;border-radius:3.2cqw;border:.4cqw solid var(--line);background:var(--surface)}
.live-page .sc-map b{font:800 5.4cqw/1 var(--display);font-stretch:75%}
.live-page .sc-map small{font-size:3.4cqw;color:var(--muted)}
.live-page .sc-map.vote{border-color:color-mix(in oklab,var(--innocent) 50%,var(--line))}
.live-page .sc-map.vote small{color:var(--innocent)}
.live-page .sc-map>i:not(.ls-tap){position:absolute;right:2.6cqw;top:2.6cqw;padding:.8cqw 1.6cqw;border-radius:1.4cqw;background:var(--innocent);color:#04140D;font:800 2.8cqw/1 var(--display);font-style:normal;letter-spacing:.08em}
/* rows */
.live-page .sc-row{position:relative;display:grid;grid-template-columns:10cqw 1fr auto;gap:2.4cqw;align-items:center;padding:2.2cqw;border-radius:3.2cqw;border:.4cqw solid var(--line);background:var(--surface)}
.live-page .sc-row img{width:10cqw;height:10cqw;border-radius:2.4cqw}
.live-page .sc-row b{display:block;font:800 4.6cqw/1.05 var(--display);font-stretch:75%}
.live-page .sc-row small{display:block;font-size:3cqw;line-height:1.25;color:var(--muted)}
.live-page .sc-row.bad{border-color:color-mix(in oklab,var(--guilty) 45%,var(--line))}
.live-page .sc-btn{position:relative;padding:1.6cqw 2cqw;border-radius:2cqw;background:var(--guilty);color:#1A0505;font:800 2.8cqw/1 var(--display);font-style:normal;letter-spacing:.06em}
.live-page .sc-btn.ghost{background:transparent;border:.4cqw solid var(--line-2);color:var(--ink-2)}
.live-page .sc-wl{font:800 3.6cqw/1 var(--display);font-style:normal;color:var(--ink-2)}
.live-page .sc-row.bad .sc-wl{color:var(--brand);font-size:3cqw}
/* hero select */
.live-page .sc-faces{display:flex;gap:1.6cqw}
.live-page .sc-faces img{width:11cqw;height:11cqw;border-radius:2.6cqw;border:.5cqw solid var(--line-2)}
.live-page .sc-rank{position:relative;display:grid;grid-template-columns:4cqw 10cqw 1fr auto;gap:2.2cqw;align-items:center;padding:2cqw 2.4cqw;border-radius:3cqw;border:.4cqw solid var(--line);background:var(--surface)}
.live-page .sc-rank.on{border-color:var(--brand);background:color-mix(in oklab,var(--brand) 9%,var(--surface))}
.live-page .sc-rank em{font:900 4.4cqw/1 var(--display);font-style:normal;color:var(--muted)}.live-page .sc-rank.on em{color:var(--brand)}
.live-page .sc-rank img{width:10cqw;height:10cqw;border-radius:2.4cqw}
.live-page .sc-rank b{display:block;font:800 4.6cqw/1 var(--display);font-stretch:75%}
.live-page .sc-rank small{font-size:3cqw;color:var(--muted)}
.live-page .sc-rank>i{padding:.8cqw 1.4cqw;border-radius:1.4cqw;background:var(--brand);color:var(--brand-ink);font:800 2.6cqw/1 var(--display);font-style:normal}
.live-page .sc-cta{position:relative;margin-top:auto;padding:3.4cqw 0;border-radius:3.6cqw;background:var(--brand);color:var(--brand-ink);text-align:center;font:800 3.8cqw/1 var(--display);letter-spacing:.06em}
/* match */
.live-page .sc-enemies{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6cqw}
.live-page .sc-enemies .f{position:relative;aspect-ratio:1;border-radius:2.8cqw;border:.7cqw solid #ff8a7a;background:var(--surface)}
.live-page .sc-enemies .f img{position:absolute;inset:0;width:100%;height:100%;border-radius:2cqw}
.live-page .sc-match .swap .was{animation:ls-was2 var(--T) infinite}.live-page .sc-match .swap .now{animation:ls-now2 var(--T) infinite}
@keyframes ls-was2{0%,4%{opacity:1}5%,100%{opacity:0}}
@keyframes ls-now2{0%,4%{opacity:0}5%,100%{opacity:1}}
.live-page .sc-now{display:grid;grid-template-columns:13cqw 1fr;gap:2.6cqw;align-items:center;padding:2.2cqw;border-radius:3.6cqw;border:.5cqw solid color-mix(in oklab,var(--innocent) 55%,var(--line));background:var(--surface)}
.live-page .sc-now img{width:13cqw;height:13cqw;border-radius:3cqw}
.live-page .sc-now small{display:block;font:800 2.8cqw/1 var(--display);letter-spacing:.08em;color:var(--innocent)}
.live-page .sc-now b{display:block;margin:.8cqw 0;font:900 6cqw/1 var(--display);font-stretch:75%;white-space:nowrap}
.live-page .sc-now em{font-style:normal;font-size:3cqw;font-weight:700;color:var(--innocent)}
.live-page .sc-better{display:grid;grid-template-columns:9cqw 1fr auto;gap:2cqw;align-items:center;padding:1.8cqw 1.8cqw 1.8cqw 2.2cqw;border-radius:3.2cqw;border:.4cqw solid color-mix(in oklab,var(--brand) 50%,var(--line));background:color-mix(in oklab,var(--brand) 10%,var(--surface));animation:ls-better var(--T) infinite}
@keyframes ls-better{0%,5.5%{opacity:0;transform:scale(.94)}6.8%,100%{opacity:1;transform:none}}
.live-page .sc-better img{width:9cqw;height:9cqw;border-radius:2.2cqw}
.live-page .sc-better span{font-size:3.6cqw;line-height:1.15}.live-page .sc-better b{color:var(--brand)}
.live-page .sc-better small{display:block;font-size:2.8cqw;color:var(--ink-2)}
.live-page .sc-better>i{padding:2cqw 2.4cqw;border-radius:2cqw;background:var(--brand);color:var(--brand-ink);font:800 2.8cqw/1 var(--display);font-style:normal;letter-spacing:.06em}
.live-page .sc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw;margin-top:auto}
.live-page .sc-tiles span{display:flex;flex-direction:column;gap:1cqw;padding:2cqw 2.2cqw;border-radius:2.8cqw;border:.4cqw solid color-mix(in oklab,var(--c) 45%,var(--line));border-left:1cqw solid var(--c);background:color-mix(in oklab,var(--c) 10%,var(--surface));font:800 2.8cqw/1 var(--display);letter-spacing:.08em;color:var(--c)}
.live-page .sc-tiles b{font:800 3.6cqw/1.1 var(--display);letter-spacing:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-page .sc-tiles .t-tips{--c:var(--guilty)}.live-page .sc-tiles .t-perks{--c:var(--brand)}.live-page .sc-tiles .t-plan{--c:var(--carry)}.live-page .sc-tiles .t-team{--c:var(--innocent)}
.live-page .sc-tiles .t-plan b{color:var(--carry);font-size:4.2cqw}
.live-page .sc-tiles .mini{display:flex}.live-page .sc-tiles .mini img{width:5.4cqw;height:5.4cqw;border-radius:50%;margin-right:-1.4cqw;border:.4cqw solid var(--surface)}
/* sheets over the match */
.live-page .sc-sheet{gap:0}
.live-page .sc-dim{position:absolute;inset:-30cqw -6cqw -6cqw;background:rgba(5,6,10,.55)}
.live-page .sc-panel{position:absolute;left:-1cqw;right:-1cqw;bottom:-2cqw;display:flex;flex-direction:column;gap:2.2cqw;padding:4cqw 3.4cqw 5cqw;border-radius:6cqw 6cqw 0 0;border-top:.4cqw solid var(--line-2);background:var(--bg-2);animation:ls-sheet var(--T) infinite}
@keyframes ls-sheet{0%{transform:translateY(100%)}2.6%,100%{transform:none}}
.live-page .sc-panel .sc-h5{margin:0;font:900 6cqw/1 var(--display);font-stretch:75%}
.live-page .sc-tip{display:grid;grid-template-columns:10cqw 1fr;gap:2.4cqw;padding:2.6cqw;border-radius:3.2cqw;border:.4cqw solid var(--line);background:var(--surface);font-size:3.3cqw;line-height:1.35;color:var(--ink)}
.live-page .sc-tip img{width:10cqw;height:10cqw;border-radius:2.4cqw}
.live-page .sc-tip small{display:block;margin-bottom:1cqw;font:800 2.6cqw/1.1 var(--display);letter-spacing:.06em}
.live-page .sc-tip.bad{border-color:color-mix(in oklab,var(--guilty) 45%,var(--line));background:color-mix(in oklab,var(--guilty) 8%,var(--surface))}.live-page .sc-tip.bad small{color:var(--guilty)}
.live-page .sc-tip.good small{color:var(--innocent)}
.live-page .sc-lv{margin:0;font:800 2.8cqw/1 var(--display);letter-spacing:.1em;color:var(--muted)}
.live-page .sc-perk{position:relative;padding:2.4cqw 2.8cqw;border-radius:3cqw;border:.5cqw solid color-mix(in oklab,var(--brand) 55%,var(--line));background:color-mix(in oklab,var(--brand) 8%,var(--surface))}
.live-page .sc-perk b{display:block;font:800 5cqw/1 var(--display);font-stretch:75%;color:var(--brand)}
.live-page .sc-perk b i{margin-left:1.4cqw;padding:.6cqw 1.2cqw;border-radius:1.2cqw;background:var(--brand);color:var(--brand-ink);font:800 2.6cqw/1 var(--display);font-style:normal;vertical-align:.6cqw}
.live-page .sc-perk small{display:block;margin-top:1cqw;font-size:3.1cqw;line-height:1.3;color:var(--ink-2)}
.live-page .sc-why{margin:0;font-size:3.1cqw;line-height:1.35;color:var(--ink-2)}.live-page .sc-why b{color:var(--ink)}
/* room */
.live-page .sc-room{display:grid;grid-template-columns:2.4cqw 1fr auto;gap:2cqw;align-items:center;padding:2.4cqw 2.6cqw;border-radius:3cqw;border:.4cqw solid color-mix(in oklab,var(--carry) 45%,var(--line));background:color-mix(in oklab,var(--carry) 9%,var(--surface));font-size:3.4cqw}
.live-page .sc-room .dot{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--innocent)}
.live-page .sc-room b{color:var(--carry);letter-spacing:.06em}
.live-page .sc-room .faces{display:flex}.live-page .sc-room .faces img{width:6.4cqw;height:6.4cqw;border-radius:50%;margin-left:-1.6cqw;border:.4cqw solid var(--surface)}
.live-page .sc-ults{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6cqw}
.live-page .sc-ults span{padding:1.6cqw 0;border-radius:2cqw;border:.4cqw solid var(--line);text-align:center;font:800 3cqw/1 var(--display);color:var(--muted)}
.live-page .sc-ults .tick{animation:ls-ultx var(--T) infinite}
@keyframes ls-ultx{0%,4%{border-color:var(--line);color:var(--muted);background:transparent}4.5%,100%{border-color:var(--accomplice);color:var(--accomplice);background:color-mix(in oklab,var(--accomplice) 16%,transparent)}}
.live-page .sc-toast{padding:3cqw;border-radius:3.4cqw;background:var(--surface-2);border:.4cqw solid var(--line-2);font-size:3.4cqw;color:var(--ink);opacity:0;animation:ls-toast1 var(--T) infinite}
.live-page .sc-toast.win{margin-top:auto;background:color-mix(in oklab,var(--innocent) 16%,var(--surface));border-color:color-mix(in oklab,var(--innocent) 50%,var(--line));color:var(--innocent);font-weight:700;animation-name:ls-toast2}
@keyframes ls-toast1{0%,4.4%{opacity:0;transform:translateY(2cqw)}5.2%,100%{opacity:1;transform:none}}
@keyframes ls-toast2{0%,8%{opacity:0;transform:translateY(2cqw)}8.8%,100%{opacity:1;transform:none}}
/* session */
.live-page .sc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.live-page .sc-kpis span{display:flex;flex-direction:column;align-items:center;gap:1cqw;padding:2.6cqw 0;border-radius:3cqw;background:var(--surface);border:.4cqw solid var(--line);font-size:2.8cqw;color:var(--muted)}
.live-page .sc-kpis b{font:900 7cqw/1 var(--display);font-stretch:75%;color:var(--ink)}
.live-page .sc-kpis span:first-child b{color:var(--innocent)}
/* taps: one per scene, about two seconds in (the match tap comes first, then the swap) */
.live-page .sc .ls-tap{animation:ls-tapx var(--T) infinite}
.live-page .sc-match .ls-tap{animation-name:ls-tapm}
@keyframes ls-tapx{0%,6%{opacity:0;transform:scale(.3)}6.6%{opacity:1;transform:scale(.5)}9%,100%{opacity:0;transform:scale(1.5)}}
@keyframes ls-tapm{0%,2.6%{opacity:0;transform:scale(.3)}3.2%{opacity:1;transform:scale(.5)}5.6%,100%{opacity:0;transform:scale(1.5)}}
/* caption above the phone */
.live-page .ls-cap{position:absolute;left:50%;top:2.6%;width:74%;height:10%;margin-left:-37%;z-index:6;text-align:center}
.live-page .ls-cap-i{position:absolute;left:0;right:0;top:0;margin:0;display:flex;flex-direction:column;gap:.6cqw;opacity:0;animation:ls-sc var(--T) infinite;animation-delay:calc(var(--i) * var(--S) - var(--T))}
.live-page .ls-cap-i b{font:800 3.1cqw/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.live-page .ls-cap-i span{font-size:2.5cqw;line-height:1.2;color:var(--ink-2)}
.live-page .ls-prog{position:absolute;left:22%;right:22%;bottom:0;display:flex;gap:.8cqw}
.live-page .ls-prog i{position:relative;flex:1;height:.55cqw;border-radius:1cqw;background:var(--line-2);overflow:hidden}
.live-page .ls-prog i::after{content:"";position:absolute;inset:0;background:var(--brand);transform-origin:left;transform:scaleX(0);opacity:0;animation:ls-seg var(--T) linear infinite;animation-delay:calc(var(--i) * var(--S) - var(--T))}
@keyframes ls-seg{0%{transform:scaleX(0);opacity:1}12.4%{transform:scaleX(1);opacity:1}12.5%,100%{transform:scaleX(1);opacity:.35}}
@container (max-width:440px){.live-page .ls-phone{width:38%;margin-left:-19%;bottom:5%}.live-page .ls-cap{top:2%;width:86%;margin-left:-43%}.live-page .ls-cap-i b{font-size:3.6cqw}.live-page .ls-cap-i span{font-size:3cqw}.live-page .ls-prog{left:15%;right:15%}}
/* rooms scene: friends' phones beside the main one, synced */
.live-page .ls-friends{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;animation:ls-sc var(--T) infinite;animation-delay:calc(var(--i) * var(--S) - var(--T))}
.live-page .ls-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.live-page .ls-links path{fill:none;stroke:var(--carry);stroke-width:.45;stroke-linecap:round;stroke-dasharray:1.2 1.6;animation:ls-flow 1.2s linear infinite;filter:drop-shadow(0 0 .6px var(--carry))}
@keyframes ls-flow{to{stroke-dashoffset:-5.6}}
.live-page .ls-mini{position:absolute;bottom:31%;width:16%;aspect-ratio:9/16;container-type:inline-size;border-radius:4.6cqw;padding:1.4cqw;background:linear-gradient(160deg,#3a4158,#11141c 40%);box-shadow:0 2cqw 3cqw rgba(0,0,0,.6),0 0 0 .25cqw color-mix(in oklab,var(--carry) 55%,transparent)}
.live-page .ls-mini.l{left:13%;transform:rotate(-7deg)}
.live-page .ls-mini.r{right:13%;transform:rotate(7deg)}
.live-page .ls-mini-scr{height:100%;border-radius:12cqw;background:#0E1015;overflow:hidden;display:flex;flex-direction:column;gap:5cqw;padding:12cqw 7cqw 8cqw}
.live-page .ls-mini p{margin:0}
.live-page .ls-mini-who{display:flex;align-items:center;gap:4cqw}
.live-page .ls-mini-who img{width:20cqw;height:20cqw;border-radius:50%;border:1cqw solid var(--carry);object-fit:cover}
.live-page .ls-mini-who b{font:900 14cqw/1 var(--display);font-stretch:75%;color:var(--ink);text-transform:uppercase}
.live-page .ls-mini-code{display:flex;align-items:center;gap:3cqw;font:800 9cqw/1 var(--display);letter-spacing:.08em;color:var(--carry)}
.live-page .ls-mini-code i{width:5cqw;height:5cqw;border-radius:50%;background:var(--innocent);box-shadow:0 0 0 1.5cqw color-mix(in oklab,var(--innocent) 25%,transparent)}
.live-page .ls-mini-row{display:grid;grid-template-columns:repeat(5,1fr);gap:2cqw}
.live-page .ls-mini-row img{width:100%;aspect-ratio:1;border-radius:3cqw;object-fit:cover;border:.8cqw solid color-mix(in oklab,var(--guilty) 55%,var(--line))}
.live-page .ls-mini-ults{display:grid;grid-template-columns:repeat(5,1fr);gap:2cqw}
.live-page .ls-mini-ults i{height:6cqw;border-radius:2cqw;border:.8cqw solid var(--line)}
.live-page .ls-mini-ults i.on{border-color:var(--accomplice);background:color-mix(in oklab,var(--accomplice) 30%,transparent)}
.live-page .ls-mini-chip{margin-top:auto!important;padding:4cqw 3cqw;border-radius:5cqw;text-align:center;font:800 8.4cqw/1.1 var(--display);letter-spacing:.04em}
.live-page .ls-mini-chip.add{background:color-mix(in oklab,var(--accomplice) 18%,var(--surface));color:var(--accomplice)}
.live-page .ls-mini-chip.ok{background:color-mix(in oklab,var(--innocent) 16%,var(--surface));color:var(--innocent)}
@container (max-width:440px){.live-page .ls-mini{width:17%;bottom:30%}.live-page .ls-mini.l{left:9%}.live-page .ls-mini.r{right:9%}}
@media (prefers-reduced-motion:reduce){
  .live-page .live-scene *,.live-emblem-dot{animation:none!important}
  .live-page .sc,.live-page .ls-cap-i,.live-page .ls-friends{opacity:0}
  .live-page .sc[style*="--i:3"],.live-page .ls-cap-i[style*="--i:3"]{opacity:1}
  .live-page .sc-match .swap .was{opacity:0}.live-page .ls-tap{display:none}.live-page .ls-prog{display:none}
}
.live-page .sc-under{display:flex;flex-direction:column;gap:2.4cqw}

/* ---------- Play with friends: hero callout, section and room-card spotlight ---------- */
.live-page .live-squad .live-dot,.live-page .lv-friends .lvf-code .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--innocent);box-shadow:0 0 0 3px color-mix(in oklab,var(--innocent) 25%,transparent);animation:live-pulse 1.8s ease-in-out infinite}
@keyframes live-pulse{50%{opacity:.4}}
.live-page .live-squad{display:flex;align-items:center;gap:14px;margin-top:14px;max-width:460px;padding:12px 16px 12px 12px;border-radius:16px;border:1px solid color-mix(in oklab,var(--carry) 45%,var(--line));background:linear-gradient(120deg,color-mix(in oklab,var(--carry) 16%,var(--surface)),var(--surface) 70%);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.live-page .live-squad:hover{border-color:var(--carry);transform:translateY(-1px)}
.live-page .live-squad .faces{position:relative;display:flex;flex:none}
.live-page .live-squad .faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--carry);background:var(--bg-2)}
.live-page .live-squad .faces img+img{margin-left:-10px}
.live-page .live-squad .faces .live-dot{position:absolute;right:-2px;top:-2px}
.live-page .live-squad .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.live-page .live-squad .txt b{display:flex;align-items:center;gap:7px;font:800 17px/1 var(--display);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--carry)}
.live-page .live-squad .txt b svg{width:20px;height:20px;flex:none}
.live-page .live-squad .txt small{font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.live-page .live-squad .go{margin-left:auto;font:800 18px/1 var(--display);color:var(--carry)}
@media (max-width:860px){.live-page .live-squad{max-width:none}}

.live-page .lv-friends{--tone:var(--carry);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px;align-items:center;padding:30px;border-radius:26px;border:1px solid color-mix(in oklab,var(--carry) 35%,var(--line));background:radial-gradient(120% 90% at 100% 0%,color-mix(in oklab,var(--carry) 16%,transparent),transparent 60%),linear-gradient(165deg,color-mix(in oklab,var(--carry) 7%,var(--surface)),var(--bg-2) 80%)}
.live-page .lv-friends .lv-kicker{display:flex;align-items:center;gap:8px;color:var(--carry)}
.live-page .lv-friends .lv-kicker svg{width:20px;height:20px}
.live-page .lvf-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.live-page .lvf-list li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:start}
.live-page .lvf-list .lv-ic svg{width:22px;height:22px}
.live-page .lvf-list b{display:block;margin-bottom:2px;font:800 19px/1.1 var(--display);font-stretch:80%;color:var(--ink)}
.live-page .lvf-list li>span:last-child{font-size:15px;line-height:1.5;color:var(--ink-2)}
.live-page .lv-friends .lvf-cta{background:var(--carry);color:#04121F;text-decoration:none;box-shadow:0 10px 30px -12px color-mix(in oklab,var(--carry) 70%,transparent)}
.live-page .lv-friends .lvf-cta svg{width:22px;height:22px}
.live-page .lvf-visual{position:relative;container-type:inline-size;display:flex;flex-direction:column;align-items:center}
.live-page .lv-friends .lvf-code{display:inline-flex;align-items:center;gap:10px;margin:0;padding:10px 18px;border-radius:999px;border:1px solid color-mix(in oklab,var(--carry) 50%,var(--line));background:var(--surface);font:700 15px/1 var(--display);letter-spacing:.04em;color:var(--ink-2)}
.live-page .lv-friends .lvf-code b{color:var(--carry);letter-spacing:.14em}
.live-page .lvf-links{display:block;width:78%;height:34px;overflow:visible}
.live-page .lvf-links path{fill:none;stroke:var(--carry);stroke-width:2;stroke-dasharray:5 6;vector-effect:non-scaling-stroke;animation:lvf-flow 1.1s linear infinite}
@keyframes lvf-flow{to{stroke-dashoffset:-22}}
.live-page .lvf-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4cqw;width:100%;align-items:end}
.live-page .lvf-phone{container-type:inline-size;aspect-ratio:9/16.5;border-radius:12cqw;padding:3.5cqw;background:linear-gradient(160deg,#3a4158,#11141c 40%);box-shadow:0 18px 30px -16px rgba(0,0,0,.7),0 0 0 1px color-mix(in oklab,var(--carry) 45%,transparent)}
.live-page .lvf-phone:not(.me){transform:translateY(-4%) rotate(-3deg)}
.live-page .lvf-phone:last-child{transform:translateY(-4%) rotate(3deg)}
.live-page .lvf-phone.me{box-shadow:0 22px 40px -16px rgba(0,0,0,.75),0 0 0 2px var(--brand)}
.live-page .lvf-scr{height:100%;border-radius:9cqw;background:#0E1015;display:flex;flex-direction:column;gap:6cqw;padding:12cqw 7cqw 8cqw;overflow:hidden}
.live-page .lvf-scr p{margin:0}
.live-page .lv-friends .lvf-who{display:flex;align-items:center;gap:5cqw}
.live-page .lv-friends .lvf-who img{width:24cqw;height:24cqw;border-radius:50%;object-fit:cover;border:1.2cqw solid var(--carry)}
.live-page .lv-friends .me .lvf-who img{border-color:var(--brand)}
.live-page .lv-friends .lvf-who span{display:flex;flex-direction:column;gap:2cqw;min-width:0}
.live-page .lv-friends .lvf-who b{font:900 12cqw/1 var(--display);font-stretch:75%;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-page .lv-friends .lvf-who small{font:700 8cqw/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--carry)}
.live-page .lv-friends .me .lvf-who small{color:var(--brand)}
.live-page .lv-friends .lvf-label{font:800 7.5cqw/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.live-page .lvf-row,.live-page .lvf-ults{display:grid;grid-template-columns:repeat(5,1fr);gap:2.4cqw}
.live-page .lvf-row img{width:100%;aspect-ratio:1;border-radius:3.5cqw;object-fit:cover;border:1cqw solid color-mix(in oklab,var(--guilty) 55%,var(--line))}
.live-page .lvf-ults i{height:6.5cqw;border-radius:2cqw;border:1cqw solid var(--line)}
.live-page .lvf-ults i.on{border-color:var(--accomplice);background:color-mix(in oklab,var(--accomplice) 30%,transparent)}
.live-page .lv-friends .lvf-chip{margin-top:auto!important;padding:5cqw 3cqw;border-radius:5cqw;text-align:center;font:800 8.5cqw/1.15 var(--display);letter-spacing:.03em}
.live-page .lv-friends .lvf-chip.add{background:color-mix(in oklab,var(--accomplice) 18%,var(--surface));color:var(--accomplice)}
.live-page .lv-friends .lvf-chip.ok{background:color-mix(in oklab,var(--carry) 18%,var(--surface));color:var(--carry)}
.live-page .lv-friends .lvf-chip.win{background:color-mix(in oklab,var(--innocent) 16%,var(--surface));color:var(--innocent)}
@media (max-width:900px){
  .live-page .lv-friends{grid-template-columns:1fr;gap:26px;padding:22px 18px}
  .live-page .lvf-visual{order:-1;max-width:460px;width:100%;margin:0 auto}
  .live-page .lv-friends .lvf-cta{width:100%}
}
/* The room card glows when the visitor came from "Play with friends". */
.live .room-card.spot{animation:room-spot 1.1s ease-in-out 3}
@keyframes room-spot{50%{box-shadow:0 0 0 3px var(--info),0 0 28px -4px var(--info)}}
@media (prefers-reduced-motion:reduce){
  .live-page .live-squad .live-dot,.live-page .lv-friends .lvf-code .live-dot,.live-page .lvf-links path{animation:none}
  .live .room-card.spot{animation:none;box-shadow:0 0 0 3px var(--info)}
}
.live-page .lv-friends .lvf-map{align-self:flex-start;padding:3cqw 5cqw;border-radius:4cqw;background:color-mix(in oklab,var(--brand) 14%,var(--surface));font:800 8cqw/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}
.live-page .lvf-row.us img{border-color:color-mix(in oklab,var(--carry) 70%,var(--line))}
.live-page .lvf-row.us i{aspect-ratio:1;border-radius:3.5cqw;border:1cqw dashed var(--line)}
.live-page .lv-friends .lvf-scr{gap:4.5cqw;padding-top:10cqw}
.live .mic.prep{background:var(--warn,#FFA24C);color:#1A1205;animation:mic-pulse 1s ease-in-out infinite}
/* ---------- Wingman v2: map photos and vote, glance view, ult bars, result screen ---------- */
.live .mode-ic{width:20px;height:20px;display:block;flex:none}
.live .vote-empty{margin:0;padding:12px 14px;border-radius:14px;border:1px dashed var(--line-2);color:var(--ink-2);font-size:14px}
.live .vote-card{display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.live .vote-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px;border-radius:12px}
.live .vote-row.best{background:color-mix(in oklab,var(--brand) 10%,var(--surface))}
.live .vote-img{width:72px;height:45px;border-radius:9px;object-fit:cover;display:block;background:var(--surface-2)}
.live .vote-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.live .vote-txt b{font:800 18px/1.05 var(--display);font-stretch:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .vote-txt small,.live .map-tile small{font-size:12px;font-weight:700;color:var(--muted)}
.live small.up{color:var(--good)}.live small.down{color:var(--warn)}
.live .vote-badge{font:800 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;font-style:normal;padding:6px 8px;border-radius:8px;background:var(--brand);color:var(--brand-ink)}
.live .won-map{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);font:800 14px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.live .vote-row.best .won-map{border-color:var(--brand)}
.live .map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.live .map-tile{display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:none;color:var(--ink);text-align:left;min-width:0}
.live .map-pic{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:var(--surface-2);border:2px solid transparent}
.live .map-pic>img:first-child{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.82)}
.live .map-pic .mode-ic{position:absolute;left:5px;bottom:5px;width:24px;height:24px;padding:3px;box-sizing:border-box;border-radius:7px;background:rgba(7,8,11,.78)}
.live .map-tile.on .map-pic{border-color:var(--brand)}
.live .map-tile.on .map-pic>img:first-child{filter:none}
.live .map-n{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font:900 14px/1 var(--display);font-style:normal}
.live .map-tile b{font:800 13px/1.1 var(--display);font-stretch:87.5%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .map-tile:active .map-pic{transform:scale(.96)}
.live .mode-fit .mode-ic{width:18px;height:18px}
@media (min-width:700px){.live .map-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.live[data-view=match]{--bg:#07080B}
.live .glance{--gt:var(--info);--gi:#04101A;display:flex;flex-direction:column;gap:10px;padding:18px 18px 20px;border-radius:24px;background:var(--gt);color:var(--gi)}
.live .glance.g-good{--gt:var(--good);--gi:var(--good-ink)}
.live .glance.g-warn{--gt:var(--warn);--gi:#1A0F02}
.live .glance.g-bad{--gt:var(--bad);--gi:var(--bad-ink)}
.live .g-kicker{margin:0;display:flex;align-items:center;gap:8px;font:800 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.live .g-kicker svg{width:20px;height:20px}
.live .g-title{margin:0;font:900 clamp(44px,13vw,60px)/.9 var(--display);font-stretch:75%;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere}
.live .g-text{margin:0;font-size:17px;line-height:1.35;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.live .g-act{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;min-height:58px;padding:0 14px 0 8px;border:0;border-radius:14px;background:var(--gi);color:#fff;font:800 19px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-align:left}
.live .g-act img{width:42px;height:42px;border-radius:10px;display:block}
.live .glance.flash{animation:glance-in .9s ease-out 1}
@keyframes glance-in{0%{transform:scale(.97);box-shadow:0 0 0 0 color-mix(in oklab,var(--gt) 90%,transparent)}35%{transform:scale(1.015);box-shadow:0 0 0 14px color-mix(in oklab,var(--gt) 35%,transparent)}100%{transform:none;box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.live .glance.flash{animation:none}}
.live .enemy-block .enemy-head{align-items:center;gap:8px}
.live .enemy-block .enemy-head .eyebrow{flex:1}
.live .ups{padding:5px 9px;border-radius:999px;background:color-mix(in oklab,var(--bad) 22%,var(--bg-2));color:var(--bad);font:800 12px/1 var(--display);letter-spacing:.04em;white-space:nowrap}
.live .ultbars{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:8px;margin-top:6px}
.live .ultbar{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:46px;padding:0 2px;border:0;background:none;color:var(--muted);min-width:0}
.live .ultbar .track{display:flex;height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.live .ultbar .fill{display:block;height:100%;background:var(--ink-2);transition:width .9s linear}
.live .ultbar .ult-l{font:800 12px/1 var(--display);letter-spacing:.06em;text-align:center;font-variant-numeric:tabular-nums;text-transform:uppercase;white-space:nowrap}
.live .ultbar.off .track{background:none;border:1px dashed var(--line-2)}
.live .ultbar.soon .fill{background:var(--warn)}.live .ultbar.soon{color:var(--warn)}
.live .ultbar.ready .fill{background:var(--bad)}.live .ultbar.ready{color:var(--bad)}
.live .ultbar.empty{opacity:.35}.live .ultbar.empty .track{background:none;border:1px dashed var(--line)}
.live .ultbar:active .track{transform:scaleY(1.4)}
.live .ult-hint{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.live .bar-inner.mic-end{grid-template-columns:76px 1fr}
.live .bar-inner.mic-end button{height:64px}
.live .end-match{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2)!important}

.live .res-sum{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.live .res-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.live .res-row b{flex:1;font:800 20px/1 var(--display);font-stretch:75%}
.live .res-map{width:80px;height:50px;border-radius:9px;object-fit:cover;display:block}
.live .res-row .faces{display:flex;gap:6px}
.live .res-row .faces img{width:36px;height:36px;border-radius:9px;display:block}
.live .res-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.live .res-btns button{height:168px;border:0;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font:900 30px/1 var(--display);font-stretch:75%;letter-spacing:.04em;text-transform:uppercase}
.live .res-btns svg{width:38px;height:38px}
.live .res-win{background:var(--good);color:var(--good-ink)}
.live .res-loss{background:var(--bad);color:var(--bad-ink)}
.live .res-btns button:active{transform:scale(.97)}
.live .res-note{text-align:center;margin-top:4px}
.live .enemy-block .enemy-head{flex-wrap:wrap}
.live .enemy-block .enemy-head .eyebrow{white-space:nowrap}
.live .enemy-block .ups{order:3;margin:0 0 12px}
.live .mode-fit button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);min-width:0}
.live .mode-fit button.on{outline:2px solid var(--ink);outline-offset:1px}
.live .mode-pick{margin:0;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:color-mix(in oklab,var(--brand) 14%,var(--surface));border:1px solid var(--brand)}
.live .mode-pick .mode-ic{width:28px;height:28px}
.live .mode-pick span{flex:1;font:800 20px/1.05 var(--display);font-stretch:75%;text-transform:uppercase;letter-spacing:.02em}
.live .mode-pick small{font:800 18px/1 var(--display);color:var(--good)}
.live .mode-label{display:flex;align-items:center;gap:8px}
.live .grid-label .mini-btn{margin-left:8px}
.live .role-filter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px}
.live .role-filter button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);font:800 13px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.live .role-filter button svg{width:16px;height:16px}
.live .role-filter button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.live .ultbar{border-radius:10px}
.live .ultbar .ult-l{display:flex;align-items:center;justify-content:center;gap:3px}
.live .ultbar .bolt{width:12px;height:12px;flex:none}
.live .ultbar.off{min-height:46px;border:1px solid color-mix(in oklab,var(--warn) 55%,var(--line));background:color-mix(in oklab,var(--warn) 12%,var(--surface));color:var(--warn)}
.live .ultbar.off .track{display:none}
.live .ultbar.off .ult-l{font-size:11px;letter-spacing:.02em;white-space:normal;line-height:1.05}
.live .ultbar.off .bolt{width:14px;height:14px}
.live .ultbar.charging .bolt,.live .ultbar.soon .bolt{display:none}
.live .ultbar.ready .ult-l{color:var(--bad)}
.live .ultbar.ready{animation:ult-alert 1.6s ease-in-out infinite}
@keyframes ult-alert{50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.live .ultbar.ready{animation:none}}
.live .likely.grid{margin-bottom:4px}
.live .g-nav{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:-2px}
.live .g-nav span{font:800 13px/1 var(--display);letter-spacing:.08em;opacity:.75}
.live .g-nav button{width:44px;height:36px;border-radius:10px;border:0;background:color-mix(in oklab,var(--gi) 14%,transparent);color:var(--gi);font:900 22px/1 var(--display)}
.live .g-more{display:flex;flex-direction:column;gap:6px}
.live .g-mini{--gt:var(--info);display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left}
.live .g-mini.g-good{--gt:var(--good)}.live .g-mini.g-warn{--gt:var(--warn)}.live .g-mini.g-bad{--gt:var(--bad)}
.live .g-mini i{width:10px;height:10px;border-radius:50%;background:var(--gt)}
.live .g-mini span{font:800 15px/1.1 var(--display);font-stretch:87.5%;text-transform:uppercase;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live .g-mini b{color:var(--muted);font:900 20px/1 var(--display)}
.live .coach{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in oklab,var(--warn) 55%,var(--line));background:color-mix(in oklab,var(--warn) 10%,var(--surface))}
.live .coach.c-good{border-color:color-mix(in oklab,var(--good) 55%,var(--line));background:color-mix(in oklab,var(--good) 10%,var(--surface))}
.live .coach img{width:48px;height:48px;border-radius:12px;flex:none;display:block}
.live .coach p{margin:0;font-size:14.5px;line-height:1.4}
.live .coach .eyebrow{color:var(--warn);font-size:11px;margin-bottom:2px}.live .coach.c-good .eyebrow{color:var(--good)}
.live .credits{margin:18px 0 0;font-size:10.5px;line-height:1.4;color:var(--muted);opacity:.75;text-align:center}
.live .res-analyze{display:block;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);color:var(--brand);font:800 15px/1.25 var(--display);letter-spacing:.03em;text-decoration:none;text-align:center}
.live .bet-card,.live .react-card{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.live .bet-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.live .bet-btns button{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);font:800 17px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.live .bet-btns small{font:800 15px/1 var(--display);color:var(--muted)}
.live .bet-w[aria-pressed=true]{background:var(--good);color:var(--good-ink);border-color:var(--good)}
.live .bet-l[aria-pressed=true]{background:var(--bad);color:var(--bad-ink);border-color:var(--bad)}
.live .bet-btns button[aria-pressed=true] small{color:inherit;opacity:.75}
.live .react-btns{display:flex;flex-wrap:wrap;gap:8px}
.live .react-btns button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);font:700 14px/1 var(--body)}
.live .react-btns button:active{transform:scale(.95);background:var(--brand);color:var(--brand-ink)}
.live .react-log{display:flex;flex-direction:column;gap:6px}
.live .react-log p{margin:0;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.live .react-log img{width:24px;height:24px;border-radius:6px}
.live .react-log i{width:24px;height:24px;border-radius:6px;background:var(--surface-2)}
.live .awards .verdict{margin:4px 0 12px;font:900 26px/1.05 var(--display);font-stretch:75%;text-transform:uppercase;color:var(--brand)}
.live .award-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.live .award{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;background:var(--bg-2)}
.live .award img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.live .award img.wide{width:70px}
.live .award i{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--brand);font-style:normal;font-size:20px}
.live .award span{display:flex;flex-direction:column;gap:2px;min-width:0}
.live .award small{font:800 11px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.live .award b{font:800 19px/1.1 var(--display);font-stretch:87.5%}
.live .share-recap{width:100%}
/* Official perk and ultimate icons (ability-icon.css) */
.live .perk-opt{flex-direction:row;align-items:flex-start;gap:10px}
.live .perk-opt .ab-icon{--ab-s:34px}
.live .perk-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.live .perk-opt b .perk-name{display:inline;margin:0;padding:0;border-radius:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;vertical-align:baseline}
.live .perk-opt.rec .ab-icon{box-shadow:inset 0 0 0 2px var(--brand),0 2px 8px -3px rgba(0,0,0,.55)}
.live .g-ab{display:inline-flex;vertical-align:middle;margin-right:10px}
.live .g-ab .ab-icon{--ab-s:44px;vertical-align:.08em}
.live .g-ult{font-weight:900;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.live .tile-perks{display:flex;align-items:center;gap:6px;min-width:0}
.live .tile-perks .ab-icon{margin:0;font-size:15px}
.live .tile-perks b{min-width:0}
@media (max-width:360px){.live .perk-opt .ab-icon{--ab-s:28px}}