/* MatchScout web — design system, 1:1 with the native APK (ui/theme/Color.kt, Type.kt, Dimens.kt) */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

:root{
  /* backgrounds */
  --bg-deep:#0A0312; --bg-panel:#140826; --bg-card:#1A0B2E; --bg-card-el:#22103A; --bg-root:#120726;
  /* accents */
  --magenta:#FF0055; --magenta-soft:#FF3D7F; --lime:#CCFF00; --cyan:#00E5FF; --purple:#9B59B6; --purple-dim:#4A2070;
  /* text */
  --text:#F0EAF5; --text-dim:#7A6B8A; --text-faint:#4A3F5C;
  /* status */
  --green:#00E676; --orange:#FF9100; --red:#FF3D3D; --gold:#FFD23F;
  /* matchmaking tiers */
  --ranked-dim:#7A1A1A; --ranked-mid:#CC2B2B; --ranked:#FF3D3D;
  --casual-dim:#7A4A00; --casual-mid:#CC7500; --casual:#FF9100;
  --mixed-dim:#7A3A0A; --mixed-mid:#CC5518; --mixed:#FF6B2B;
  --top-offset:92px; --conn-bar:46px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:linear-gradient(180deg,#120726 0%,#0A0312 45%,#0A0312 100%);
  color:var(--text);font-family:'Barlow Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  overflow:hidden;user-select:none;-webkit-user-select:none;
}
.bebas{font-family:'Bebas Neue','Oswald',Impact,sans-serif;font-weight:400}
.disp{font-family:'Bebas Neue','Oswald',Impact,sans-serif;letter-spacing:.5px}
/* CJK mode: Bebas/Barlow have no CJK glyphs — the system fallback has much
   taller line boxes and letter-spacing widens ideographs, shifting layouts
   down vs English. Tighten everything so heights match the EN layout. */
:root.cjk{line-height:1.22}
:root.cjk body{font-family:'Barlow Condensed','Noto Sans SC','Noto Sans JP','Noto Sans KR','Microsoft YaHei','Hiragino Sans',sans-serif}
:root.cjk .disp,:root.cjk .bebas{font-family:'Bebas Neue','Noto Sans SC','Noto Sans JP','Noto Sans KR','Microsoft YaHei','Hiragino Sans',sans-serif;
  font-weight:700;letter-spacing:1px;line-height:1.05}
:root.cjk .tab .lbl,:root.cjk .set-sec2,:root.cjk .section-lbl{letter-spacing:1px}

/* ── app shell ── */
/* The app is a phone-portrait UI. On wide screens (desktop browser / OBS)
   present it as a centered phone frame so it reads 1:1 with the APK. */
#root{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:480px;margin:0 auto;
  position:relative;box-shadow:0 0 60px rgba(0,0,0,.6)}
@media(min-width:481px){ body{background:#05010a} #root{background:linear-gradient(180deg,#120726 0%,#0A0312 45%,#0A0312 100%)} }
#content{flex:1;position:relative;overflow:hidden}
/* fullscreen / installed-app mode on phones: the status bar is gone, so give
   back the top breathing room the APK gets from its status-bar inset.
   .fs is set by JS on fullscreenchange (reliable); display-mode covers the
   installed/standalone case (iOS home-screen shortcut). */
@media (max-width:899px){
  :root.fs #root{padding-top:max(env(safe-area-inset-top),34px)}
}
@media (display-mode:standalone) and (max-width:899px){
  #root{padding-top:max(env(safe-area-inset-top),34px)}
}
/* Shared top-bar axis: flag, cog and mobile headers all center on the SAME
   normalized line (--tbar-y + --tbar-h/2) — no per-element magic pixels. */
:root{--tbar-y:8px;--tbar-h:26px}
#flag-tl{position:absolute;top:var(--tbar-y);left:12px;z-index:40;height:var(--tbar-h);border-radius:2px}
/* mobile: the cog opens the settings sheet like the APK; no SETTINGS bottom tab */
#gear{position:absolute;top:var(--tbar-y);right:8px;width:44px;height:var(--tbar-h);
  display:flex;align-items:center;justify-content:center;
  color:var(--text);opacity:.9;z-index:40;cursor:pointer;background:none;border:none}
#gear svg{width:33px;height:33px;flex-shrink:0}
.m-nhead{display:flex;align-items:center;gap:8px;padding:0 56px 10px 16px;
  min-height:calc(var(--tbar-y)*2 + var(--tbar-h))}
.m-ntitle{font-size:30px;letter-spacing:4px;color:var(--lime)}
.tab[data-tab="settings"]{display:none}
#sheet-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:120;display:none}
#sheet-ov.on{display:block}
#sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg-panel);border-radius:18px 18px 0 0;
  padding:20px 18px calc(24px + env(safe-area-inset-bottom));max-height:85%;overflow-y:auto;
  transform:translateY(100%);transition:transform .25s}
#sheet::-webkit-scrollbar{width:0}
#sheet-ov.on #sheet{transform:translateY(0)}
.pbtn{border:none;border-radius:16px;padding:9px 14px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:1.5px;cursor:pointer}
.pbtn:active{transform:scale(.96)}
.sheet-handle{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);margin:0 auto 22px}
.lang-row{display:flex;gap:8px;flex-wrap:wrap}
.lang-btn{background:rgba(255,255,255,.05);border:1px solid var(--purple-dim);border-radius:9px;
  padding:6px 13px;color:var(--text-dim);font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:13px;cursor:pointer}
.lang-btn.on{background:var(--cyan);color:var(--bg-deep);border-color:var(--cyan)}
.diag-r{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px}
.diag-l{color:var(--text-dim);width:110px;flex-shrink:0;font-size:13px}
.diag-act{margin-left:auto;color:var(--cyan);letter-spacing:1px;cursor:pointer;font-size:11px;font-weight:700;
  padding:5px 13px;border:1px solid var(--purple-dim);border-radius:8px}
.diag-act:active{transform:scale(.95)}
.set-sec2{font-size:11px;letter-spacing:2.5px;font-weight:600;color:var(--text-dim);margin-bottom:6px}
/* mobile select-screen grid: width-driven tiles, same visuals as desktop */
.msel{display:flex;flex-direction:column;gap:8px;padding-bottom:10px}
.msel-row{display:flex;gap:8px}
.sel-cell.m{height:auto;flex:1;aspect-ratio:var(--sel-ar)}

/* bottom bar */
#bottombar{display:flex;justify-content:space-evenly;background:var(--bg-panel);padding:8px 0;
  padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--text-dim);cursor:pointer;position:relative;padding:2px 12px}
.tab svg{width:24px;height:24px}
.tab .lbl{font-size:10px;letter-spacing:2px;font-weight:600}
.tab.active{color:var(--magenta)}
.tab .under{height:2px;width:0;background:var(--magenta);border-radius:2px;transition:width .2s ease}
.tab.active .under{width:18px}

/* screens */
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.on{display:flex}
.topzone{height:var(--top-offset);flex-shrink:0}
.scrollbody{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px 24px}
.scrollbody::-webkit-scrollbar{width:0}

/* center/waiting views */
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:6px}
.center .title{font-size:26px;letter-spacing:3px;color:var(--text-dim)}
.center .sub{font-size:13px;color:var(--text-faint)}
.center .big-ping{font-size:64px;line-height:1}

/* ── cards ── */
.player-card{position:relative;background:var(--bg-card);border-radius:18px;border:1px solid rgba(74,32,112,.4);overflow:hidden}
.player-card .sheen{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0));pointer-events:none}
.player-card .accent{position:absolute;top:0;left:0;right:0;height:3px}
.pc-body{position:relative;padding:12px 14px}
.pc-row{display:flex;gap:12px}
.pc-left{flex:1;min-width:0}
.cfn{font-size:26px;letter-spacing:1px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.05}
.cfn .acct{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--text-dim);letter-spacing:0;margin-left:6px}
.rankline{font-size:16px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankline .sep{color:var(--text-dim)}
.peakline{font-size:11px;color:var(--text-dim);height:15px;margin-top:3px;overflow:hidden;white-space:nowrap}
.badges{display:flex;gap:6px;margin-top:6px;min-height:16px}

/* avatar */
.avatar{border-radius:22%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.avatar .mono{font-family:'Bebas Neue',sans-serif;color:#fff;opacity:.92}
.avatar .mannercard{position:absolute;top:3px;right:3px;width:9px;height:13px;border-radius:1px}
.avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}
.avatar-lbl{font-size:8px;font-weight:700;letter-spacing:1px}

/* stat rows / winrate summary */
.statrow{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:13px}
.statrow .k{color:var(--text-dim)}
.statrow .v{font-weight:600}
.divider{height:1px;background:rgba(255,255,255,.08);margin:6px 0}
.section-lbl{font-size:11px;letter-spacing:2.5px;font-weight:600;color:var(--text-dim);margin:10px 0 8px}

/* badges */
.badge{font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:4px;border:1px solid;font-weight:600}
@keyframes pulse{0%{opacity:1}100%{opacity:.45}}
.badge.pulse{animation:pulse .7s ease-in-out infinite alternate}

/* buttons */
.glow-btn{border:none;border-radius:12px;height:52px;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:3px;color:#fff;cursor:pointer;width:100%;transition:transform .08s}
.glow-btn:active{transform:scale(.97)}
.glow-btn.mag{background:linear-gradient(90deg,var(--magenta),var(--magenta-soft))}
.glow-btn.lime{background:linear-gradient(90deg,var(--lime),var(--green));color:var(--bg-deep)}
.ghost-btn{background:none;border:1px solid var(--purple-dim);border-radius:12px;height:48px;color:var(--cyan);
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;cursor:pointer;width:100%}
.ghost-btn:active{transform:scale(.97)}

/* connection bar */
.connbar{height:var(--conn-bar);background:var(--bg-panel);display:flex;align-items:center}
.connbar .slot{width:44px;display:flex;align-items:center;justify-content:center}
.conn-stat{flex:1;display:flex;flex-direction:column;align-items:center}
.conn-stat .cl{font-size:10px;letter-spacing:1.5px;color:var(--text-dim)}
.conn-stat .cv{font-size:20px;line-height:1}
.conn-info{text-align:center;font-size:13px;padding:4px 0}

/* live tabs */
.livetabs{display:flex;gap:0;margin-top:8px}
.livetab{flex:1;background:none;border:none;color:var(--text-dim);font-family:'Barlow Condensed';font-size:12px;font-weight:600;
  letter-spacing:1.5px;padding:8px 0;cursor:pointer;position:relative}
.livetab.active{color:var(--magenta)}
.livetab.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--magenta)}
.livetabs-div{height:1px;background:rgba(74,32,112,.3)}

/* H2H card */
.h2h{background:var(--bg-card);border-radius:14px;padding:12px;text-align:center;margin-bottom:12px}
.h2h .t{font-size:12px;letter-spacing:2px;color:var(--text-dim)}
.h2h .rec{font-size:26px;margin-top:2px}
.h2h .modes{display:flex;gap:12px;justify-content:center;margin-top:6px;font-size:12px;flex-wrap:wrap}

/* gauge */
.gauge{margin:6px 0}
.gauge .gl{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.gauge .track{height:6px;background:var(--bg-panel);border-radius:3px;overflow:hidden}
.gauge .fill{height:100%;background:var(--cyan);border-radius:3px;transition:width .4s}

/* ── desktop LIVE / RECAP: persistent header + tabs + full-width tab pages ── */
.dhead{display:grid;gap:16px;align-items:stretch;padding:12px 28px 0;width:100%;
  height:clamp(232px,30vh,302px)}   /* same fixed height on LIVE and RECAP → tab bars align */
.dhead>*{min-height:0;overflow:hidden}
.live-h{grid-template-columns:1.7fr .85fr 1fr}
.dhead .h2h .t{font-size:13px;letter-spacing:2.5px}
.dhead .h2h .rec{font-size:38px;margin-top:6px}
.dhead .h2h .modes{font-size:14px;font-weight:700;margin-top:10px}
.dhead .conn-stat .cl{font-size:12px;letter-spacing:2px}
.dhead .conn-stat .cv{font-size:30px}
.recap-h{grid-template-columns:1.5fr 1fr}
.dcard{background:var(--bg-card);border:1px solid rgba(74,32,112,.35);border-radius:16px;padding:12px 16px 14px}
.dhead .h2h{margin-bottom:0;border:1px solid rgba(74,32,112,.35);display:flex;flex-direction:column;justify-content:center}
.dtabs{width:100%;padding:6px 28px 0}
.dtabs .livetabs{border-bottom:1px solid rgba(74,32,112,.3)}
.dtabs .livetab{flex:none;padding:12px 30px;font-size:15px;font-weight:700;letter-spacing:2.5px;color:#C4B8D4}
.dtabs .livetab:hover{color:#fff}
.dtabs .livetab.active{color:var(--magenta)}
.dtabs .livetab.active::after{height:3px;left:12%;right:12%;border-radius:2px}
.dbody{padding:14px 28px 22px;width:100%}
.fitpage{width:100%}

/* REPLAYS: a media library — list on one side, video on the other */
.rp-card{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 10px;
  background:rgba(255,255,255,.03);border-radius:12px;transition:background .12s}
.rp-card[onclick]{cursor:pointer}
.rp-card[onclick]:hover{background:rgba(255,255,255,.07)}
.rp-card.sel{background:rgba(255,0,110,.12);box-shadow:inset 0 0 0 1px rgba(255,0,110,.35)}
/* SEARCH: same wording as the long-press menu, laid out as a list */
.rp-searchacts{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.rp-searchacts .rj-item{display:block;width:100%;text-align:left;background:rgba(255,255,255,.04);
  border:1px solid var(--purple-dim);color:var(--text);font:700 12px/1 Barlow,sans-serif;
  letter-spacing:1px;padding:12px 14px;border-radius:10px;cursor:pointer}
.rp-searchacts .rj-item:hover{border-color:var(--cyan);color:var(--cyan)}
.rp-searchacts .rj-up{background:var(--magenta);border-color:var(--magenta);color:#fff}
.rp-searchacts .rj-up:hover{filter:brightness(1.15);color:#fff}
.rj-item[disabled],.rj-act[disabled]{opacity:.35;cursor:not-allowed}
.rj-item[disabled]:hover,.rj-act[disabled]:hover{background:none;border-color:var(--purple-dim);color:var(--text)}
.rj-x{cursor:pointer;padding:0 3px;opacity:.55;font-size:13px}
.rj-x:hover{opacity:1;color:var(--red)}
/* REC | UPLOAD | ALL — capture and publishing are separate on purpose */
.rj-actrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:6px}
.rj-act{padding:9px 4px;border-radius:9px;border:1px solid var(--purple-dim);background:transparent;
  color:var(--text);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:1px;cursor:pointer}
.rj-act:hover{border-color:var(--cyan);color:var(--cyan)}
.rj-act.rj-all{background:var(--magenta);border-color:var(--magenta);color:#fff}
.rj-act.rj-all:hover{filter:brightness(1.15);color:#fff}
.rp-frame-wrap{position:relative;width:100%;padding-bottom:56.25%;height:0;
  border-radius:14px;overflow:hidden;background:#000}
.rp-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.rp-stage-empty{position:relative;width:100%;height:0;padding-bottom:56.25%;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px dashed rgba(74,32,112,.5)}
.rp-stage-empty span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;color:var(--text-dim);font-size:.85rem}
.rp-stage-info{padding:12px 4px 0}
.rp-stage-title{font-weight:700;font-size:1rem}
.rp-stage-sub{color:var(--text-dim);font-size:.75rem;margin-top:3px}
.rp-stage-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
/* phone: the player comes up over the list */
#rp-ov,#rp-live-ov{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:60;display:flex;
  align-items:center;justify-content:center;padding:14px}
.rp-live-note{margin-top:14px;text-align:center;color:var(--text-dim);font-size:.8rem}
.rp-live-banner{margin:0 0 10px;padding:12px 14px;border-radius:12px;cursor:pointer;
  background:rgba(0,229,255,.14);color:var(--cyan);font-weight:700;font-size:.82rem;letter-spacing:.5px}
.rp-live-banner:hover{background:rgba(0,229,255,.22)}
.rp-ov-box{width:100%;max-width:640px;position:relative}
.rp-ov-x{position:absolute;top:-34px;inset-inline-end:0;background:none;border:0;color:#fff;
  font-size:26px;line-height:1;cursor:pointer}
.set-wrap.fitted{max-width:none}

/* desktop tab visualisations */
.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mode-card{background:var(--bg-card);border:1px solid rgba(74,32,112,.35);border-radius:16px;padding:18px 20px 16px}
.mode-lbl{font-size:12px;letter-spacing:2.5px;font-weight:700}
.mode-wr{font-size:44px;line-height:1;margin-top:8px}
.mode-sub{font-size:12px;color:var(--text-dim);margin-top:4px}
.mode-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden}
.mode-bar>div{height:100%;border-radius:3px}
.mode-bar.big{height:8px;border-radius:4px;margin-top:14px;position:relative}
.mode-bar.big::after{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:rgba(255,255,255,.25)}
.mode-stats{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.mw{font-size:19px}
.ml{font-size:11px;color:var(--text-dim);font-weight:700;margin:0 8px 0 2px}
.mh{font-size:13px;color:var(--text-dim);font-weight:600}
.ov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;margin-top:16px}
.mu-row{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1px solid rgba(255,255,255,.05)}
.mu-mid{flex:1;min-width:0}
.mu-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:5px;overflow:hidden}
.mu-bar>div{height:100%;border-radius:3px}
.mu-right{text-align:right;flex-shrink:0}
.mu-wr{font-size:17px;font-weight:700}
.mu-sub{font-size:11px;color:var(--text-dim);font-weight:600}
.tsplit{display:flex;height:14px;border-radius:7px;overflow:hidden;margin-top:10px}
.tl-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}
.ptile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.ptile{background:rgba(255,255,255,.03);border:1px solid rgba(74,32,112,.35);border-radius:12px;padding:10px 14px}
.ptile-l{font-size:10px;letter-spacing:1.5px;color:var(--text-dim);font-weight:700;white-space:nowrap}
.ptile-v{font-size:24px;line-height:1.1;margin-top:4px}
.ptile-h{font-size:13px;margin-left:2px;opacity:.7}
.ptile-s{font-size:11px;color:var(--text-dim);font-weight:600;margin-top:2px}
.pt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pt-tile{background:var(--bg-card);border:1px solid rgba(74,32,112,.35);border-radius:12px;padding:10px 16px;
  display:flex;justify-content:space-between;align-items:center}
.pt-l{font-size:10px;letter-spacing:1.5px;color:var(--text-dim);font-weight:600}
.pt-v{font-size:18px}
.charcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.charcard{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid rgba(74,32,112,.35);
  border-radius:14px;padding:12px 14px}
.cc-mid{flex:1;min-width:0}
.cc-name{font-weight:700;font-size:15px}
.cc-rank{font-size:11px;color:var(--text-dim);margin:2px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-right{text-align:right;flex-shrink:0}
.details-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.details-grid.cols4{grid-template-columns:repeat(4,minmax(230px,1fr))}

/* desktop RECAP profile header */
.prof-card{padding:16px 22px 12px}
.prof-in{display:flex;flex-direction:column;justify-content:space-between;gap:10px;height:100%}
.prof-top{display:flex;gap:18px;align-items:flex-start}
.prof-id{flex:1;min-width:0}
.prof-name{font-size:40px;letter-spacing:1px;display:flex;align-items:baseline;gap:12px;line-height:1.05;
  white-space:nowrap;min-width:0}
.prof-name>span{overflow:hidden}
.prof-name img{flex-shrink:0;align-self:center}
.prof-acct{font-size:15px;color:var(--text-dim);font-weight:600;margin-top:3px}
.prof-id .rankline{font-size:26px;margin-top:4px}
.peak-big{margin-top:6px;font-size:22px;display:flex;align-items:baseline;gap:9px;min-height:26px}
.peak-l{font-size:11px;letter-spacing:2px;color:var(--text-dim);font-weight:700}
.peak-s{font-size:14px;color:var(--text-dim);font-weight:700}
.prof-actions{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}
.cchips{display:flex;gap:8px}
.cchip{display:flex;gap:7px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(74,32,112,.45);
  border-radius:8px;padding:7px 12px;font-size:14px;font-weight:700}
.cchip-l{font-size:9px;letter-spacing:1.2px;color:var(--text-dim);font-weight:700}
/* real buttons */
.btn-primary{background:linear-gradient(90deg,var(--magenta),var(--magenta-soft));border:none;border-radius:10px;
  height:42px;padding:0 22px;color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:2px;cursor:pointer;box-shadow:0 2px 12px rgba(255,0,85,.35)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--purple-dim);border-radius:10px;height:42px;
  padding:0 18px;color:var(--text);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:2px;cursor:pointer}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.seg{display:flex;background:rgba(255,255,255,.06);border:1px solid var(--purple-dim);border-radius:10px;
  overflow:hidden;height:42px}
.seg button{background:none;border:none;color:var(--text-dim);font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:1.5px;padding:0 18px;cursor:pointer}
.seg button.on{background:var(--cyan);color:var(--bg-deep)}
.prof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid rgba(255,255,255,.06);
  padding-top:12px}
.pstat-l{font-size:12px;letter-spacing:1.8px;color:var(--text-dim);font-weight:700}
.pstat-v{font-size:38px;line-height:1.1;margin-top:4px}
.pstat-bar{max-width:240px;margin-top:8px}
.pstat-s{font-size:14px;color:var(--text-dim);font-weight:600;margin-top:5px}
.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.notes-grid .note-card .nt{font-size:16px;line-height:1.4}
.notes-grid .note-card .nd{font-size:11px}
.mi-line{padding:7px 2px;font-weight:700;color:var(--gold);font-size:16px;line-height:1.4}
.log-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:10px}
.log-grid>div{margin:0 !important}

/* desktop LOG — sidebar (summary + pager) | list of big rows, fits natively */
.lg-wrap{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
.lg-side-col{display:flex;flex-direction:column;gap:14px}
.lg-sum .pstat-v{margin-top:6px}
.lg-sum-sub{font-size:14px;color:var(--text-dim);font-weight:600;margin-top:8px}
.form-row{display:flex;gap:4px;margin-top:12px;flex-wrap:wrap}
.form-sq{width:17px;height:24px;border-radius:3px}
.form-sq.w{background:var(--green)}
.form-sq.l{background:var(--red)}
.form-sq.last{outline:2px solid #fff;outline-offset:1px}
.lg-list{display:flex;flex-direction:column;gap:10px}
/* versus scoreboard row: result+date left, the DUEL clustered dead-center,
   MR delta right — no dead zones */
.lg-row{display:flex;align-items:center;gap:18px;
  background:var(--bg-card);border:1px solid rgba(74,32,112,.35);border-radius:12px;padding:10px 22px}
.lg-row.w{background:linear-gradient(90deg,rgba(0,230,118,.07),var(--bg-card) 32%)}
.lg-row.l{background:linear-gradient(90deg,rgba(255,61,61,.07),var(--bg-card) 32%)}
.lg-row:hover{background:var(--bg-card-el)}
.lg-res{font-size:28px;letter-spacing:1px;width:96px;flex-shrink:0}
.lg-date{font-size:15px;color:var(--text-dim);font-weight:600;width:130px;flex-shrink:0}
.lg-mode{font-size:13px;color:var(--text-faint);margin-top:2px}
.lg-side{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0}
.lg-side.right{justify-content:flex-start}
.lg-who{min-width:0}
.lg-who.right{text-align:right}
.lg-name{font-size:21px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-sub{font-size:15px;color:var(--text-dim);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-score{font-size:40px;letter-spacing:2px;text-align:center;white-space:nowrap;flex-shrink:0}
.lg-dash{color:var(--text-faint);margin:0 10px}
.lg-delta{font-size:24px;text-align:right;width:90px;flex-shrink:0}
.lg-pager{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lg-page{font-size:14px;letter-spacing:1.5px;color:var(--text);font-weight:700;text-align:center;flex:1}
.btn-ghost:disabled{opacity:.35;cursor:default}

/* ── first-launch wizard ── */
#ob-ov{position:fixed;inset:0;z-index:200;background:rgba(6,2,12,.94);display:flex;align-items:center;justify-content:center;padding:20px}
.ob-card{position:relative;width:min(680px,94vw);max-height:92vh;overflow-y:auto;background:var(--bg-card);
  border:1px solid rgba(74,32,112,.5);border-radius:22px;padding:44px 48px 30px;text-align:center;
  box-shadow:0 20px 80px rgba(0,0,0,.6)}
.ob-card::-webkit-scrollbar{width:0}
.ob-logo{font-size:52px;letter-spacing:4px;color:var(--lime)}
.ob-title{font-size:34px;letter-spacing:3px;color:var(--text);margin-bottom:6px}
.ob-sub{font-size:17px;color:var(--text-dim);font-weight:600;margin-top:6px}
.ob-text{font-size:16px;color:var(--text-dim);font-weight:500;line-height:1.55;margin:14px auto 18px;max-width:520px}
.ob-feat{display:flex;flex-direction:column;gap:12px;margin:26px auto 8px;max-width:460px;text-align:left;
  font-size:16px;font-weight:600;line-height:1.4}
.ob-pill{display:inline-block;border:1px solid;border-radius:10px;padding:9px 18px;font-size:15px;font-weight:700;margin:4px 0 6px}
.ob-qr{width:190px;height:190px;margin:6px auto;display:block}
.ob-qr2{display:flex;justify-content:center;gap:26px;margin:6px 0}
.ob-qr2 .ob-qr{width:160px;height:160px;margin:0}
.ob-btns{display:flex;gap:14px;justify-content:center;margin-top:22px}
.ob-btns .btn-primary,.ob-btns .btn-ghost{height:48px;padding:0 30px;font-size:15px}
.btn-primary:disabled,.ob-btns button:disabled{opacity:.35;cursor:default}
.ob-skip{margin-top:14px;font-size:13px;color:var(--text-faint);cursor:pointer;text-decoration:underline}
.ob-skip:hover{color:var(--text-dim)}
.ob-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
.ob-dot{width:9px;height:9px;border-radius:50%;background:var(--purple-dim)}
.ob-dot.on{background:var(--magenta);transform:scale(1.25)}
.ob-dot.done{background:var(--cyan)}
.ob-back{position:absolute;top:16px;left:18px;background:none;border:none;color:var(--text-dim);
  font-size:24px;cursor:pointer}
.ob-back:hover{color:var(--text)}

/* ── desktop NOTES ── */
.notes-dhead{display:flex;align-items:center;justify-content:center;gap:28px;padding:16px 28px 6px}
.notes-title{font-size:34px;letter-spacing:4px;color:var(--lime)}
/* character-select mimic grid + game-style left info panel */
/* symmetric 1fr | grid | 1fr → the grid is PERFECTLY centered on screen,
   the info panel lives far left in its own column */
.sel-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;width:100%}
.sel-info{grid-column:1;justify-self:start;text-align:left;padding:6px 14px 0 8px;
  width:100%;max-width:370px;min-width:0}
.sel-grid{grid-column:2}
.sel-big{font-size:clamp(52px,5vw,86px);line-height:1;color:#fff;letter-spacing:2px;
  text-shadow:0 0 20px rgba(255,0,85,.6),0 2px 6px rgba(0,0,0,.8);white-space:nowrap}
.sel-tot{font-size:22px;font-weight:700;margin-top:10px;letter-spacing:1px}
.sel-secs{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.sel-sec{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-left:4px solid var(--magenta);padding:12px 16px;background:rgba(255,255,255,.045);
  font-size:21px;font-weight:700;border-radius:0 8px 8px 0}
.sel-sec span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-sec-c{color:var(--cyan);font-size:23px}
.sel-hint{color:var(--text-faint);font-size:17px;padding-top:40px}
/* rows sized by the WINDOW HEIGHT (8 rows always fit → no fit-zoom → the info
   panel keeps its full size); tile width derives from the 5/3 aspect ratio.
   The grid's WIDTH is computed from the same formula — without it the auto
   track sizes to the portraits' intrinsic width and steals the panel's room. */
.sel-grid{display:flex;flex-direction:column;gap:8px;height:calc(100vh - 212px);
  width:calc((100vh - 268px)/8*var(--sel-ar)*4 + 42px)}
.sel-row{flex:1;display:flex;gap:14px;justify-content:center;min-height:0}
.sel-cell{position:relative;height:100%;aspect-ratio:var(--sel-ar);padding:2px;cursor:pointer;overflow:hidden;
  background:rgba(155,89,182,.5);
  /* game frame: long diagonal + vertical segment on each side. Tunable:
     --sel-i = diagonal inset width, --sel-b = transition height (left side;
     the right side mirrors at 100 - b). */
  clip-path:polygon(calc(var(--sel-itl) + var(--sel-h)) 0,calc(100% - var(--sel-itr) - var(--sel-h)) 0,calc(100% - var(--sel-m2x)) var(--sel-m2y),calc(100% - var(--sel-ibr) - var(--sel-h)) 100%,calc(var(--sel-ibl) + var(--sel-h)) 100%,var(--sel-mx) var(--sel-my));
  transition:transform .07s}
.sel-cell:hover{transform:scale(1.04);background:var(--magenta);z-index:2}
.sel-cell:active{transform:scale(.98)}
.sel-cell.has{background:var(--cyan);box-shadow:0 0 14px rgba(0,229,255,.35)}
/* Buckler face art over ONE uniform dark-purple tile background.
   Framing is driven by the --sel-z/--sel-x/--sel-y vars (live-tunable from
   the desktop TILE TUNING debug panel): baseline = face height fits the tile,
   zoom/pan applied around the center. */
/* parametric frame: 4 independent corner widths + one independent midpoint per
   side (top-corner → midpoint → bottom-corner). Defaults = user-tuned values.
   Right midpoint: --sel-m2x is the inset FROM THE RIGHT edge, --sel-m2y from top. */
:root{--sel-z:1.6;--sel-x:6.9%;--sel-y:-5.8%;
  --sel-itl:15%;--sel-itr:12.7%;--sel-ibr:9.6%;--sel-ibl:17.6%;
  --sel-mx:6.3%;--sel-my:79%;
  --sel-m2x:0.3%;--sel-m2y:21%;
  --sel-h:0%;                   /* horizontal edges: extra symmetric shortening */
  --sel-ar:1.67}                /* tile width/height ratio */
.sel-in{position:relative;width:100%;height:100%;overflow:hidden;
  background:linear-gradient(180deg,#2A1548 0%,#170A2C 100%);
  clip-path:polygon(calc(var(--sel-itl) + var(--sel-h)) 0,calc(100% - var(--sel-itr) - var(--sel-h)) 0,calc(100% - var(--sel-m2x)) var(--sel-m2y),calc(100% - var(--sel-ibr) - var(--sel-h)) 100%,calc(var(--sel-ibl) + var(--sel-h)) 100%,var(--sel-mx) var(--sel-my));
  filter:grayscale(.85) brightness(.6)}
.sel-cell.has .sel-in,.sel-cell:hover .sel-in{filter:none}
.sel-cell img{position:absolute;left:50%;top:50%;height:100%;width:auto;
  transform:translate(calc(-50% + var(--sel-x)),calc(-50% + var(--sel-y))) scale(var(--sel-z))}

/* TILE TUNING debug panel (desktop CHARS) */
#sel-debug{position:fixed;left:18px;bottom:96px;z-index:90;background:var(--bg-card);
  border:1px solid rgba(74,32,112,.6);border-radius:14px;padding:12px 18px;width:240px;
  max-height:calc(100vh - 200px);overflow-y:auto}
#sel-debug::-webkit-scrollbar{width:0}
#sel-debug .sd-t{font-size:11px;letter-spacing:2px;color:var(--text-dim);font-weight:700;margin-bottom:4px}
#sel-debug label{display:block;font-size:10px;color:var(--text-faint);font-weight:700;margin-top:4px}
#sel-debug .sd-row{display:flex;gap:8px;align-items:center}
#sel-debug input[type=range]{flex:1;min-width:0;width:100%}
#sel-debug input[type=number]{width:70px;flex-shrink:0;background:var(--bg-deep);color:var(--cyan);
  border:1px solid var(--purple-dim);border-radius:6px;padding:3px 6px;
  font-family:'Consolas',monospace;font-size:12px}
#sel-debug .sd-val{font-family:'Consolas',monospace;font-size:12px;color:var(--cyan);margin-top:8px}
#sel-ref{position:fixed;left:0;top:0;transform-origin:top left;z-index:80;pointer-events:none;display:none}
.sel-cnt{position:absolute;top:4px;left:17%;background:var(--magenta);color:#fff;
  font-size:13px;font-weight:700;border-radius:9px;padding:2px 9px;
  box-shadow:0 2px 8px rgba(0,0,0,.7);letter-spacing:.5px}
.sel-cell.m .sel-cnt{font-size:11px;padding:1px 7px;top:3px;left:18%}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:14px;align-items:start}
.pl-card{background:var(--bg-card);border:1px solid rgba(74,32,112,.35);border-radius:14px;padding:16px 20px 14px}
.pl-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pl-name{font-size:23px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-h2h{background:rgba(255,255,255,.05);border:1px solid;border-radius:9px;padding:7px 16px;font-size:16px;
  font-weight:700;cursor:pointer;flex-shrink:0;font-family:'Barlow Condensed',sans-serif;letter-spacing:1px}
.pl-h2h:hover{background:rgba(255,255,255,.1)}
.pl-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.pl-real{font-size:14px;color:var(--text-dim);font-weight:600;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-copy{background:none;border:1px solid var(--purple-dim);border-radius:8px;padding:5px 12px;
  color:var(--text-dim);font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:1.5px;cursor:pointer}
.pl-copy:hover{color:var(--cyan);border-color:var(--cyan)}
#copy-toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(10px);
  background:var(--bg-card-el);border:1px solid var(--cyan);color:var(--cyan);border-radius:10px;
  padding:10px 22px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:1px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:300}
#copy-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#fs-resume{position:fixed;top:0;left:0;right:0;z-index:260;display:none;align-items:center;
  padding:calc(6px + env(safe-area-inset-top)) 14px 8px;gap:12px;
  background:linear-gradient(90deg,var(--magenta),var(--magenta-soft));color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:1.5px}
#fs-resume span{flex:1;cursor:pointer}
#fs-resume b{cursor:pointer;padding:0 6px;font-size:15px}
.pl-sub{font-size:15px;color:var(--text-dim);font-weight:600;margin-top:5px}
.pl-modes{display:flex;gap:16px;font-size:15px;font-weight:700;margin-top:8px;flex-wrap:wrap}
.pl-matches{margin-top:10px;border-top:1px solid rgba(255,255,255,.06);padding-top:8px;max-height:190px;overflow-y:auto}
.pl-matches::-webkit-scrollbar{width:0}
.pl-m{display:flex;gap:14px;font-size:15px;font-weight:700;padding:4px 0;align-items:baseline}
.pl-m-mode{color:var(--text-dim);text-transform:uppercase;font-size:13px}
.pl-m-date{margin-left:auto;color:var(--text-faint);font-weight:600;font-size:13px}
.pl-btns{display:flex;gap:10px;margin-top:12px}
.pl-btns button{flex:1;height:42px;font-size:14px;padding:0}

/* ── SETTINGS tab ── */
.set-wrap{max-width:520px;margin:0 auto;width:100%}
.set-wrap .mono{font-family:'Consolas','Roboto Mono',monospace;font-size:.92em}
.set-head{display:flex;align-items:flex-end;justify-content:space-between;margin:12px 2px 16px}
.set-title{font-size:34px;letter-spacing:2px;color:var(--lime);line-height:1}
.set-sub{color:var(--text-dim);font-size:13px;margin-top:6px}

/* status tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.tile{background:var(--bg-card);border:1px solid rgba(74,32,112,.35);border-radius:16px;
  padding:14px 16px;display:flex;gap:12px;align-items:center;min-width:0}
.tile-ic{width:38px;height:38px;border-radius:12px;background:rgba(155,89,182,.14);
  display:flex;align-items:center;justify-content:center;color:var(--purple);flex-shrink:0}
.tile-ic svg{width:20px;height:20px}
.tile-body{flex:1;min-width:0}
.tile-l{font-size:10px;letter-spacing:1.8px;color:var(--text-dim);font-weight:600}
.tile-v{font-size:20px;line-height:1.15;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-s{font-size:11px;color:var(--text-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* section cards */
.set-grid{display:flex;flex-direction:column;gap:12px}
.set-card{background:var(--bg-card);border:1px solid rgba(74,32,112,.35);border-radius:16px;padding:14px 18px 12px}
.set-card-h{display:flex;align-items:center;gap:8px;font-family:'Bebas Neue','Oswald',Impact,sans-serif;
  font-size:17px;letter-spacing:1.5px;color:var(--text);margin-bottom:4px}
.set-card-h svg{width:17px;height:17px;color:var(--purple)}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;
  border-top:1px solid rgba(255,255,255,.05)}
.set-row.slim{padding:6px 0}
.set-row-txt{min-width:0}
.set-row-l{font-size:15px;color:var(--text)}
.set-row-d{font-size:12px;color:var(--text-dim);margin-top:2px}
.set-note{font-size:11px;color:var(--text-faint);padding-top:8px}
.set-mini{font-size:10px;letter-spacing:1.8px;color:var(--text-dim);font-weight:600;margin:12px 0 4px}
.diag-badge{font-size:11px;font-weight:700;border:1px solid;border-radius:6px;padding:2px 8px;letter-spacing:1px}

/* buttons + switches */
.sbtn{background:none;border:1px solid var(--purple-dim);border-radius:10px;height:34px;padding:0 14px;
  color:var(--cyan);font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:1.5px;cursor:pointer;flex-shrink:0;white-space:nowrap}
.sbtn:hover{border-color:var(--cyan)}
.sbtn:active{transform:scale(.97)}
.sbtn.lime{color:var(--lime);border-color:var(--lime)}
.sw{width:44px;height:24px;border-radius:12px;background:var(--purple-dim);border:none;position:relative;
  cursor:pointer;transition:background .15s;flex-shrink:0}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:left .15s}
.sw.on{background:var(--lime)}
.sw.on::after{left:23px}

/* replay → YouTube menu + badges (desktop LOG) */
#rj-menu{position:fixed;z-index:200;min-width:210px;background:#1E1233;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:4px}
#rj-menu .rj-item{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);
  font:700 13px/1 Barlow,sans-serif;letter-spacing:1px;padding:10px 12px;border-radius:8px;cursor:pointer}
#rj-menu .rj-item:hover{background:rgba(255,255,255,.08)}
#rj-menu .rj-up{color:#FF4D6D}
#rj-menu .rj-note{color:var(--text-dim);font:600 12px/1 Barlow,sans-serif;padding:8px 12px}
/* privacy sits under the actions as a quiet setting, not a step of its own */
#rj-menu .rj-privrow{display:flex;gap:4px;padding:6px 6px 2px;margin-top:2px;
  border-top:1px solid rgba(255,255,255,.08)}
#rj-menu .rj-priv{flex:1;background:rgba(255,255,255,.05);border:1px solid transparent;color:var(--text-dim);
  font:700 10px/1 Barlow,sans-serif;letter-spacing:.5px;padding:7px 4px;border-radius:7px;cursor:pointer}
#rj-menu .rj-priv.on{color:#00E5FF;border-color:#00E5FF;background:rgba(0,229,255,.1)}
.rj-badge{font:700 9px/1 Barlow,sans-serif;letter-spacing:1px;margin-top:3px;display:inline-block;vertical-align:middle;margin-inline-start:6px}
.lg-date .rj-badge{margin-inline-start:0;display:block}
.rj-badge.rj-yt{color:#fff;background:#FF0000;border-radius:5px;padding:3px 6px;display:inline-block;cursor:pointer}

/* YouTube guided setup overlay */
#yt-ov{position:fixed;inset:0;z-index:210;background:rgba(10,6,20,.8);display:flex;align-items:center;justify-content:center}
.yt-card{position:relative;width:min(680px,92vw);max-height:90vh;overflow-y:auto;background:#1B1030;
  border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:26px 30px}
.yt-title{font-size:30px;color:var(--lime);letter-spacing:2px}
.yt-sub{color:var(--text-dim);font-size:14px;line-height:1.5;margin:6px 0 16px}
.yt-step{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.07);font-size:14px;line-height:1.45}
.yt-step>div{flex:1;min-width:0}
.yt-n{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,77,109,.18);color:#FF4D6D;
  display:flex;align-items:center;justify-content:center;font:700 13px Barlow,sans-serif;transition:all .3s}
.yt-n.ok{background:rgba(205,255,10,.18);color:var(--lime)}
.yt-hint{display:block;color:var(--text-faint);font-size:12px;margin:3px 0 6px}
.yt-link{flex:none;background:rgba(0,229,255,.12);border:1px solid #00E5FF;color:#00E5FF;
  font:700 11px/1 Barlow,sans-serif;letter-spacing:1px;padding:8px 14px;border-radius:9px;cursor:pointer}
.yt-file-btn{display:inline-block;background:rgba(0,229,255,.12);border:1px solid #00E5FF;color:#00E5FF;
  font:700 11px/1 Barlow,sans-serif;letter-spacing:1px;padding:8px 14px;border-radius:9px;cursor:pointer;margin-top:8px}
.yt-auth-btn{background:linear-gradient(90deg,#FF4D6D,#C13AFF);border:0;color:#fff;
  font:700 13px/1 Barlow,sans-serif;letter-spacing:1.5px;padding:12px 22px;border-radius:11px;cursor:pointer}
.yt-auth-btn:disabled{opacity:.35;cursor:default}
.yt-st{margin-left:10px;color:var(--lime);font:600 12px Barlow,sans-serif}
.yt-close{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--text-dim);font-size:16px;cursor:pointer}

/* pairing card */
.pairing{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-top:12px}
.qrbox{flex-shrink:0}
.qrbox img{width:150px;height:150px;display:block}
.qrcol{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.qrlbl{font-size:11px;letter-spacing:1.5px;font-weight:700;color:var(--text-dim)}
.pairing-link{display:block}
.pairing-txt{min-width:0}
.pairing .set-card-h{justify-content:center}
.pairing-desc{font-size:13px;color:var(--text-dim);line-height:1.45;margin:2px 0 8px}
.pairing-link{font-size:11px;color:var(--cyan);word-break:break-all;text-decoration:none}
.pairing-link:hover{text-decoration:underline}

/* toggle */
.tgl{position:relative;width:46px;height:26px;flex-shrink:0}
.tgl input{opacity:0;width:0;height:0}
.tgl .tk{position:absolute;inset:0;background:var(--bg-card-el);border:1px solid var(--purple-dim);border-radius:20px;transition:.2s}
.tgl .th{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text-dim);transition:.2s}
.tgl input:checked + .tk{background:var(--lime);border-color:var(--lime)}
.tgl input:checked ~ .th{transform:translateX(20px);background:#fff}

/* search / inputs */
.field{width:100%;background:var(--bg-card);border:1px solid var(--purple-dim);border-radius:10px;color:var(--text);
  font-family:'Barlow Condensed';font-size:15px;padding:12px 14px;outline:none}
.field:focus{border-color:var(--magenta)}
.result-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer}
.spinner{width:26px;height:26px;border:3px solid rgba(255,0,85,.25);border-top-color:var(--magenta);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* battlelog */
.log-row{display:flex;align-items:stretch;gap:8px;background:var(--bg-card);border-radius:12px;padding:8px;margin-bottom:8px}
.log-strip{width:4px;border-radius:2px;flex-shrink:0}
.log-side{flex:1;display:flex;gap:8px;align-items:center;min-width:0}
.log-score{text-align:center;flex-shrink:0}

/* notes / mindmap grid */
.chips{display:flex;gap:8px;justify-content:center;margin:12px 0}
.chip{padding:6px 18px;border-radius:20px;background:var(--bg-card);color:var(--text-dim);font-weight:600;letter-spacing:1px;font-size:13px;cursor:pointer;border:none}
.chip.on{background:var(--magenta);color:var(--bg-deep)}
.char-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.char-cell{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative}
.char-cell .cnt{position:absolute;top:-4px;right:8px;background:var(--cyan);color:var(--bg-deep);font-size:9px;font-weight:700;border-radius:8px;padding:0 5px;z-index:2}
.note-card{background:var(--bg-card);border-radius:10px;padding:10px;margin-bottom:8px}
.note-card .nt{font-size:13px;color:var(--text)}
.note-card .nd{font-size:9px;color:var(--text-faint);margin-top:4px}

/* ============================================================ desktop layout
   Adaptive, single codebase: narrow screens (phone, iPhone included) keep the
   mobile layout untouched; wide screens (PC app / desktop browser) drop the
   phone frame and use the whole window, SETTINGS as a no-scroll card grid.
   min-height excludes landscape phones (e.g. iPhone Pro Max = 932x430). */
@media (min-width:900px) and (min-height:520px){
  :root{--text-dim:#9A8BAB}   /* brighter secondary text — readable at PC distance */
  #root{max-width:none;box-shadow:none}
  .screen{overflow:hidden}   /* never any scrollbar on desktop — pages fit via zoom */
  #bottombar{justify-content:center;gap:80px}
  #flag-tl{display:none !important}   /* the flag lives inside the profile header */
  #gear{display:none}                        /* desktop: SETTINGS is a bottom tab */
  .tab[data-tab="settings"]{display:flex}
  /* typography: condensed 400 is too thin on a monitor — heavier + bigger */
  body{font-weight:500}
  .statrow{font-size:14px;padding:5px 0}
  .statrow .k{font-weight:600}
  .rankline{font-size:19px}
  .peakline{font-size:12px}
  .conn-info{font-size:15px;font-weight:700}
  .section-lbl{font-size:12px}
  .note-card .nt{font-size:14px}
  .note-card .nd{font-size:10px}
  .h2h .modes{font-size:13px;font-weight:700}
  .set-row-l{font-size:16px}
  .set-row-d{font-size:13px}
  .set-note{font-size:12px}
  .tile-s{font-size:12px}
  .mode-sub{font-size:13px;font-weight:600}
  .pairing-desc{font-size:14px}
  /* NOTES uses the full width (mindmap + grids) */
  #scr-notes .scrollbody{max-width:1100px;margin:0 auto;width:100%}
  .char-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .player-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px;align-items:start}
  .player-list .note-card{margin-bottom:0}
  /* SETTINGS: dashboard layout — header, 4 status tiles, 3 section cards,
     wide pairing card. Everything fits without scrolling. */
  /* REPLAYS desktop: fixed-width list, player fills the rest and stays put */
  .rp-split{display:grid;grid-template-columns:minmax(380px,440px) 1fr;gap:22px;align-items:start}
  .rp-list{max-height:calc(100vh - 230px);overflow-y:auto;padding-inline-end:6px}
  .rp-list::-webkit-scrollbar{width:6px}
  .rp-list::-webkit-scrollbar-thumb{background:rgba(74,32,112,.6);border-radius:3px}
  /* The screen never scrolls on desktop, so a 16:9 frame at full column width
     pushed the title and buttons off-screen on a wide window. Cap the whole
     stage to the width whose 16:9 height leaves room for what sits under it —
     the frame then fills it exactly, with no letterboxing and nothing cut off. */
  .rp-stage{position:sticky;top:0;width:100%;max-width:calc((100vh - 340px) * 16 / 9);margin-inline:auto}
  #scr-settings .scrollbody{padding:12px 40px 20px;overflow:hidden}
  .set-wrap{max-width:1140px}
  .set-title{font-size:40px}
  .set-head{margin:6px 2px 18px}
  .tiles{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
  .set-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
  .pairing{flex-direction:row;text-align:left;gap:26px;margin-top:16px;padding:16px 22px}
  .pairing .set-card-h{justify-content:flex-start}
}

/* Explains what a feature is waiting for when the PC is out of reach. Kept
   deliberately quiet: it sits next to the feature, it does not replace it. */
.pc-notice{margin-top:10px;max-width:420px;padding:9px 13px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  color:var(--text-dim);font-family:'Barlow Condensed',sans-serif;font-size:13px;
  line-height:1.45;text-align:center}

/* Sign-in gate: shown only on the hosted page, before anything else loads. */
#ms-signin{position:fixed;inset:0;z-index:9000;background:var(--bg,#0A0312);
  display:flex;align-items:center;justify-content:center;padding:24px}
.signin-box{max-width:340px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:14px}
.signin-title{font-size:30px;letter-spacing:5px;color:#CCFF00}
.signin-sub{font-family:'Barlow Condensed',sans-serif;font-size:14px;
  color:var(--text-dim);line-height:1.5}
.signin-btn{margin-top:6px;padding:13px 26px;border-radius:12px;cursor:pointer;
  border:1px solid #CCFF00;background:rgba(204,255,0,.09);color:#CCFF00;
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:2px}
.signin-btn:active{background:rgba(204,255,0,.2)}
.signin-foot{font-family:'Barlow Condensed',sans-serif;font-size:12px;
  color:var(--text-faint)}

/* Buckler sharing terms — the one setting that sends a credential elsewhere,
   so it gets a full read rather than a tooltip. */
#bk-terms{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.82);
  display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.bk-box{max-width:460px;width:100%;max-height:88vh;overflow:auto;padding:20px 22px;
  border-radius:16px;background:var(--bg-card,#150a24);
  border:1px solid rgba(255,255,255,.1)}
.bk-h{font-size:20px;letter-spacing:3px;color:#CCFF00;margin-bottom:12px}
.bk-box p{font-family:'Barlow Condensed',sans-serif;font-size:14px;line-height:1.55;
  color:var(--text-dim);margin:0 0 11px}
.bk-box p b{color:var(--text)}
.bk-foot{color:var(--text-faint) !important;font-style:italic}
.bk-acts{display:flex;gap:9px;margin-top:14px}
.bk-acts .rj-item{flex:1;text-align:center}