/* ============================================================
   Matevio — DARK PREMIUM DESIGN SYSTEM
   Dark, modern chess-app look driven by the :root tokens below
   (--bg / --panel / --accent …). Later "v-*" blocks layer on top;
   every class/id hook and layout structure is preserved.
   ============================================================ */
:root{
  /* surfaces — DARK PREMIUM */
  --bg:#0d1016;
  --bg2:#0a0d12;
  --panel:#161b23;
  --panel2:#1b2028;
  --card2:#1b2028;
  --elevated:#20262f;
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.13);
  /* ink */
  --ink:#e8edf3;
  --muted:#9aa6b4;
  --faint:#8e9aac;   /* raised from #6a7583 to clear WCAG AA (4.5:1) for small text on dark panels */
  /* brand */
  --accent:#4fb877;
  --accent2:#63cc8d;
  --accent-deep:#3a9c63;
  --gold:#e9b23a;
  --gold-deep:#c99320;
  --good:#4fb877; --good-d:#3a9c63;
  --warn:#e5ad3d; --bad:#ef5a52;
  /* FIX6: the brand colors most duplicated as inline hex — centralized here (same
     values, so no visual change) so banners/badges theme from one place. */
  --c-gold-hi:#ffd968; --c-line-green:#2f7d4d; --c-txt-green:#d7f2e2;
  /* board (kept classic) — ADD6: one token set every board (play/puzzle/review/
     analysis/learn) references, so highlights can never drift between surfaces. */
  --light:#ebecd0;
  --dark:#6f9350;
  --bd-sel:rgba(255,196,54,.95); --bd-sel-glow:rgba(255,196,54,.35);
  --bd-last:rgba(255,213,74,.48); --bd-check:rgba(224,65,63,.85); --bd-dot:rgba(0,0,0,.28);
  --radius:16px;
  /* FIX5: design-token scales (spacing / radius / type) so new work snaps to a
     rhythm instead of ad-hoc px. Legacy one-offs migrate opportunistically. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:22px; --space-6:32px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-md:16px; --fs-lg:19px; --fs-xl:24px;
  --board: min(460px, 92vw);
  --rvboard: min(460px, calc(92vw - 34px));
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.75);
  --shadow-lg:0 30px 70px -24px rgba(0,0,0,.85);
}
*{ box-sizing:border-box; }
html{ scrollbar-color:#39424e transparent; }
body{
  margin:0; color:var(--ink);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  font-size:15px; letter-spacing:.1px; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-anchor:none;
  background:
    radial-gradient(1100px 580px at 85% -16%, #17303f 0%, transparent 58%),
    radial-gradient(900px 500px at 8% 108%, #14261d 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
a{ color:var(--accent-deep); }
::selection{ background:rgba(63,157,99,.22); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#c9d1db; border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:#b3bdc9; background-clip:padding-box; }
.hidden{ display:none !important; }

/* ============================================================
   TOP BAR — logo left, status/rating/settings/profile right
   ============================================================ */
header.top{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 22px;
  background:rgba(14,18,24,.78); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
header.top h1{
  order:0; margin:0 auto 0 0; font-size:18px; font-weight:800; letter-spacing:-.3px;
  display:flex; align-items:center; gap:10px; color:var(--ink);
}
/* two-tone wordmark: "Mate" (the chess term) in brand green, "vio" in ink */
header.top h1 .wm-a{ color:var(--accent); }
header.top h1 .wm-b{ color:var(--ink); }
header.top h1::before{
  content:"♞"; display:inline-grid; place-items:center;
  width:33px; height:33px; border-radius:10px; color:#fff; font-size:19px;
  background:linear-gradient(150deg,var(--accent2),var(--accent-deep));
  box-shadow:0 4px 12px -3px rgba(47,125,77,.5);
}
header.top .sf{ order:1; font-size:12px; color:var(--faint);
  padding:5px 11px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--elevated); }
header.top .sf b{ color:var(--good-d); }
header.top .sf.bad b{ color:var(--bad); }
.rating-chip{ order:2; padding:6px 13px; border-radius:var(--r-pill); font-size:13px; font-weight:800;
  color:#3a2a00; background:linear-gradient(180deg,#ffd968,var(--gold));
  box-shadow:0 4px 12px -5px rgba(226,160,16,.7); }
.rating-chip b{ font-size:15px; }
.rating-chip .tier{ color:#3a2a05 !important; }
.iconbtn{ order:3; width:38px; height:34px; border-radius:10px; font-size:16px; cursor:pointer;
  color:var(--ink); background:var(--elevated); border:1px solid var(--line2);
  display:inline-grid; place-items:center; }
.iconbtn:hover{ background:#242b35; }
.auth-area{ order:4; display:flex; align-items:center; gap:8px; }
.user-chip{ padding:6px 12px; border-radius:var(--r-pill); font-size:13px; color:var(--ink);
  background:var(--elevated); border:1px solid var(--line2); }
.user-chip b{ color:var(--accent-deep); }

/* ============================================================
   NAVIGATION — desktop segmented tabs
   ============================================================ */
.tabs{ display:flex; gap:4px; padding:10px 20px; border-bottom:1px solid var(--line);
  overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs button{ flex:0 0 auto; white-space:nowrap; position:relative;
  background:transparent; color:var(--muted); border:none; cursor:pointer;
  padding:9px 15px; font-size:14.5px; font-weight:650; border-radius:10px;
  transition:background .15s,color .15s; }
.tabs button .ti{ margin-right:6px; }
.tabs button:hover{ background:var(--elevated); color:var(--ink); }
.tabs button.active{ background:var(--accent); color:#fff; box-shadow:0 6px 16px -8px var(--accent); }
.tabs button:disabled{ opacity:.4; cursor:not-allowed; }

/* ============================================================
   PAGE + HERO
   ============================================================ */
.tab{ display:none; padding:22px; animation:fade .2s ease; }
.tab.active{ display:block; }
@keyframes fade{ from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }

.hero{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; padding:22px 26px;
  border-radius:20px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--accent-deep) 0%,var(--accent) 55%,#5cbe81 100%);
  box-shadow:0 18px 44px -22px rgba(47,125,77,.75); }
/* faint chessboard texture across the hero */
.hero::before{ content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%3E%3Cg%20fill='white'%3E%3Crect%20width='16'%20height='16'/%3E%3Crect%20x='16'%20y='16'%20width='16'%20height='16'/%3E%3C/g%3E%3C/svg%3E"); }
.hero-txt{ position:relative; z-index:1; max-width:70%; }
.hero h2{ margin:0 0 4px; font-size:22px; font-weight:800; letter-spacing:-.3px; }
.hero p{ margin:0; font-size:14px; opacity:.92; line-height:1.5; }
.hero-art{ position:relative; z-index:1; flex:0 0 auto; width:150px; height:112px; }
.es-art{ display:block; width:210px; max-width:80%; height:auto; margin:0 auto 16px; }

.cols{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }

/* ============================================================
   CARDS
   ============================================================ */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow); }
.card h3{ margin:0 0 13px; font-size:13.5px; color:var(--muted); font-weight:700; letter-spacing:-.1px; }

/* ============================================================
   BUTTONS
   ============================================================ */
button.primary{
  background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; border:none;
  border-radius:12px; padding:12px 20px; font-size:15px; cursor:pointer; font-weight:700;
  box-shadow:0 2px 0 var(--accent-deep), 0 10px 22px -12px var(--accent);
  transition:transform .08s ease, filter .15s, box-shadow .12s; }
button.primary:hover{ filter:brightness(1.05); }
button.primary:active{ transform:translateY(2px); box-shadow:0 0 0 var(--accent-deep); }
button.ghost{
  background:var(--elevated); color:var(--ink); border:1px solid var(--line2);
  border-radius:11px; padding:9px 14px; font-size:14px; cursor:pointer; font-weight:600;
  transition:background .15s, border-color .15s, transform .08s; }
button.ghost:hover{ background:#242b35; border-color:#3a434f; }
button.ghost:active{ transform:translateY(1px); }

/* ============================================================
   FORM FIELDS
   ============================================================ */
input[type=text], input[type=password], textarea, select{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line2); border-radius:11px;
  padding:11px 13px; font-size:14.5px; width:100%; font-family:inherit;
  transition:border-color .15s, box-shadow .15s; }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(63,157,99,.20); }
textarea{ min-height:150px; resize:vertical; font-family:'Consolas','SF Mono',monospace; line-height:1.5; }
input[type=file]{ font-size:13px; color:var(--muted); }
input[type=file]::file-selector-button{
  background:var(--elevated); color:var(--ink); border:1px solid var(--line2);
  border-radius:8px; padding:7px 12px; margin-right:10px; cursor:pointer; font-family:inherit; }
label.field{ display:block; font-size:12.5px; color:var(--muted); margin:12px 0 5px; letter-spacing:.02em; }
.row2{ display:flex; gap:10px; } .row2 > div{ flex:1; }
input[type=range]{ accent-color:var(--accent); }

/* ============================================================
   INTERACTIVE BOARD
   ============================================================ */
.boardwrap{ display:flex; gap:12px; }
.boardstack{ position:relative; width:var(--board); height:var(--board); border-radius:10px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(16,24,40,.10), 0 2px 0 rgba(16,24,40,.12), 0 22px 46px -22px rgba(16,24,40,.35); }
.shapes{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }
.cboard{ width:var(--board); height:var(--board); display:grid;
  grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); user-select:none; }
.sq{ position:relative; display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--board)/11); line-height:1; cursor:pointer; transition:box-shadow .1s; }
.sq.light{ background:var(--light); }
.sq.dark{ background:var(--dark); }
.sq.sel, .sq.dnd-from{ box-shadow:inset 0 0 0 5px var(--bd-sel), inset 0 0 20px var(--bd-sel-glow); }
.sq.sel .pc{ transform:scale(1.08); }
.sq.last{ background-image:linear-gradient(var(--bd-last),var(--bd-last)); }
.sq.check{ box-shadow:inset 0 0 22px 4px var(--bd-check); }
.sq.dnd-target::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:2px;
  box-shadow:inset 0 0 0 4px rgba(63,157,99,.8); }
.pc{ transition:transform .05s; font-variant-emoji:text; }  /* keep chess glyphs as text, not emoji (iOS) */
.pc.w{ color:#fafafa; text-shadow:0 1px 1px rgba(0,0,0,.55), 0 0 3px rgba(0,0,0,.5); }
.pc.b{ color:#262421; text-shadow:0 1px 1px rgba(255,255,255,.35); }
.pc.dragging{ cursor:grabbing; text-shadow:0 5px 14px rgba(0,0,0,.55); transform:scale(1.18); }
.dot{ position:absolute; width:30%; height:30%; border-radius:50%; background:rgba(0,0,0,.28); pointer-events:none; }
.dot.cap{ width:86%; height:86%; background:none; border-radius:50%; box-shadow:inset 0 0 0 5px rgba(0,0,0,.26); }
.coordtag{ position:absolute; font-size:10px; color:rgba(0,0,0,.4); left:3px; top:1px; }
/* pan-y: let a vertical swipe scroll the page (even when it starts on the
   board); horizontal drags still drag a piece, and tap-to-move always works. */
#aiBoard, #ogBoard, #pzBoard{ touch-action:pan-y; }

.turn{ font-size:15px; margin:12px 0; font-weight:600; }
.turn .pill{ display:inline-block; width:13px; height:13px; border-radius:50%;
  background:#fff; border:1px solid #3a434f; vertical-align:-1px; margin-right:7px; box-shadow:var(--shadow-sm); }
.turn .pill.b{ background:#262421; border-color:#262421; }

/* ============================================================
   MOVE LIST + STATUS
   ============================================================ */
.movelist{ line-height:2.05; font-size:14.5px; max-height:260px; overflow:auto; padding-right:4px; }
.movelist .num{ color:var(--faint); margin:0 5px 0 9px; }
.movelist .mv{ cursor:pointer; padding:2px 6px; border-radius:7px; transition:background .12s; }
.movelist .mv:hover{ background:var(--elevated); }
.movelist .mv.active{ background:var(--accent); color:#fff !important; box-shadow:0 2px 8px -3px var(--accent); }
.movelist .mv.has{ color:var(--good-d); }
.status{ font-size:13px; color:var(--muted); margin-top:8px; min-height:18px; }
.status.err{ color:var(--bad); }
/* subtle "오프닝: 루이 로페즈" label shown near a board's move list */
.opening-line{ font-size:13px; color:var(--muted); margin:-2px 0 8px; font-weight:600; }
#opSelect{ width:100%; }

/* ============================================================
   REVIEW
   ============================================================ */
.evalbar{ width:20px; height:var(--rvboard); background:#2b2f36; border-radius:6px; overflow:hidden;
  position:relative; border:1px solid var(--line2); box-shadow:var(--shadow-sm); }
.evalbar .white{ position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(180deg,#fff,#242b35); transition:height .25s cubic-bezier(.4,0,.2,1); }
.evalbar .lbl{ position:absolute; left:0; right:0; text-align:center; font-size:10px; bottom:3px;
  font-weight:800; color:#fff; mix-blend-mode:difference; }
.svgboard{ width:var(--rvboard); height:var(--rvboard); border-radius:10px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(16,24,40,.10), 0 22px 46px -22px rgba(16,24,40,.35); }
.svgboard svg{ width:100% !important; height:100% !important; display:block; }
/* analysis board: it has an eval bar next to the board, so the board must use
   the eval-bar-adjusted width (--rvboard) or it overflows/clips on mobile. */
#tab-analysis .boardstack, #tab-analysis .cboard{ width:var(--rvboard); height:var(--rvboard); }
#tab-analysis .boardstack{ flex:0 0 auto; }   /* don't let flex shrink it (would clip the board) */
#tab-analysis .evalbar{ height:var(--rvboard); flex:0 0 auto; }
#tab-analysis .an-eval{ font-size:26px; font-weight:800; color:var(--ink); line-height:1.2; }
#tab-analysis .an-best{ margin-top:6px; font-size:14px; color:var(--muted); min-height:18px; }
#tab-analysis .an-eval.w{ color:#eef1f5; }
.controls{ margin-top:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.controls input[type=range]{ flex:1; accent-color:var(--accent); }
.graph{ width:100%; height:96px; display:block; cursor:pointer; }
.summary{ font-size:15px; line-height:1.7; }
.summary b{ color:var(--ink); }
.tag{ display:inline-block; padding:3px 11px; border-radius:var(--r-pill); font-size:12px;
  font-weight:800; color:#12241a; vertical-align:middle; }
.aiexplain{ margin-top:12px; padding:12px 14px; border-radius:12px; font-size:15px; line-height:1.65;
  background:linear-gradient(180deg, rgba(63,157,99,.12), rgba(63,157,99,.05));
  border:1px solid rgba(79,184,119,.3); border-left:3px solid var(--accent); color:#c3e4d0; }
.detail .r{ margin-top:9px; font-size:13.5px; color:var(--muted); }
.detail .r b{ color:var(--ink); }
.pv{ font-family:'Consolas','SF Mono',monospace; color:#7aa2e8; }
.legend{ font-size:12px; color:var(--muted); margin-top:10px; display:flex; gap:14px; flex-wrap:wrap; }
.legend b{ color:var(--ink); }
.legend .lg{ display:inline-block; width:13px; height:13px; border-radius:50%; vertical-align:-2px; margin-right:4px; }
.legend .lg.move{ background:rgba(63,157,99,.92); }
.legend .lg.cap{ box-shadow:inset 0 0 0 3px rgba(224,65,63,.9); }

/* review empty state */
.empty-state{ max-width:520px; margin:48px auto; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:40px 32px; box-shadow:var(--shadow); }
.empty-state .icon{ font-size:54px; line-height:1; margin-bottom:10px; filter:drop-shadow(0 8px 16px rgba(63,157,99,.35)); }
.empty-state h2{ margin:6px 0 10px; font-size:21px; }
.empty-state p{ color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 22px; }
.empty-state .actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   OVERLAY / SPINNER / MODALS
   ============================================================ */
.overlay{ position:fixed; inset:0; background:rgba(20,28,42,.42); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:50; }
.overlay .box{ background:var(--panel); border:1px solid var(--line2); padding:28px 38px; border-radius:16px;
  text-align:center; font-size:15.5px; box-shadow:var(--shadow-lg); }
.spin{ width:38px; height:38px; border:4px solid rgba(63,157,99,.18);
  border-top-color:var(--accent); border-radius:50%; margin:0 auto 16px; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   LEARN
   ============================================================ */
.learn-sel{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; width:var(--board); }
.learn-sel button{ background:var(--elevated); color:var(--ink); border:1px solid var(--line2);
  border-radius:10px; padding:8px 11px; font-size:14px; cursor:pointer; }
.learn-sel button:hover{ background:#242b35; }
.learn-sel button.active{ background:var(--accent); color:#fff; border-color:transparent; font-weight:700; }
.lmove{ position:absolute; width:32%; height:32%; border-radius:50%; background:rgba(63,157,99,.92);
  box-shadow:0 0 8px rgba(63,157,99,.6); }
.lcap{ position:absolute; inset:7%; border-radius:50%; box-shadow:inset 0 0 0 5px rgba(224,65,63,.9); }
.learn-rules p{ margin:0 0 11px; font-size:14px; line-height:1.65; }
.learn-rules b{ color:var(--ink); }

/* ============================================================
   PUZZLES
   ============================================================ */
.pz-flash{ position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center;
  font-size:54px; font-weight:900; color:#fff; letter-spacing:2px;
  background:rgba(198,40,40,.34); border-radius:10px; pointer-events:none; opacity:0;
  text-shadow:0 3px 14px rgba(0,0,0,.5); }
.pz-flash.show{ animation:flashWrong .85s ease; }
@keyframes flashWrong{ 0%{opacity:0;transform:scale(.6)} 18%{opacity:1;transform:scale(1.08)} 75%{opacity:1;transform:scale(1)} 100%{opacity:0} }
@keyframes shakeX{ 0%,100%{transform:translateX(0)} 12%{transform:translateX(-9px)} 24%{transform:translateX(9px)}
  36%{transform:translateX(-8px)} 48%{transform:translateX(8px)} 60%{transform:translateX(-5px)}
  72%{transform:translateX(5px)} 84%{transform:translateX(-2px)} }
.shake{ animation:shakeX .5s; }
.pz-cats{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.pz-recommend{ display:block; width:100%; margin:0 0 8px; padding:12px 14px; border:none; border-radius:12px;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; font-weight:800; font-size:14px;
  cursor:pointer; box-shadow:0 6px 16px -8px var(--accent); transition:transform .1s ease, box-shadow .2s ease; }
.pz-recommend:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -8px var(--accent); }
.pz-recommend:active{ transform:translateY(0); }
.pz-rating-line{ font-size:12px; color:var(--muted); text-align:center; margin:0 0 12px; }
.pz-rating-line b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.pz-rating-line:empty{ display:none; }
/* review → learning (FIX8 / ADD3 / ADD6) */
.rv-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 12px; }
.rv-act{ padding:9px 14px; border:none; border-radius:10px; font-weight:800; font-size:13px; cursor:pointer;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; box-shadow:0 5px 14px -8px var(--accent); }
.rv-act:hover{ transform:translateY(-1px); }
.rv-act:nth-child(2){ background:var(--panel2); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.rv-act-note{ font-size:12px; color:var(--muted); }
.rv-theme{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:8px 0 2px; }
.rv-theme-tag{ font-size:12.5px; color:var(--muted); }
.rv-theme-tag b{ color:var(--ink); }
.rv-theme-cta{ padding:5px 11px; border:1px solid var(--accent); border-radius:var(--r-pill); background:transparent;
  color:var(--accent); font-weight:800; font-size:12px; cursor:pointer; }
.rv-theme-cta:hover{ background:rgba(79,184,119,.14); }
/* ADD7: opening principles report */
.rv-opening{ margin:0 0 12px; }
.rv-opening .op-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rv-opening .op-score{ font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.rv-opening .op-list{ display:flex; flex-direction:column; gap:6px; }
.rv-opening .op-row{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--muted); }
.rv-opening .op-row.ok{ color:var(--ink); }
.rv-opening .op-row span{ flex:0 0 auto; }
/* ADD8: weekly league card */
#leagueCard .lg-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
#leagueCard .lg-ic{ font-size:34px; line-height:1; }
#leagueCard .lg-meta{ display:flex; flex-direction:column; }
#leagueCard .lg-meta b{ font-size:16px; }
#leagueCard .lg-week{ font-size:12.5px; color:var(--muted); }
#leagueCard .lg-track{ height:8px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; margin:0 0 8px; }
#leagueCard .lg-fill{ height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--accent2),var(--accent)); transition:width .5s cubic-bezier(.4,0,.2,1); }
#leagueCard .lg-next{ font-size:12.5px; color:var(--muted); }
/* FIX10: empty-state cards */
.my-empty{ text-align:center; padding:26px 18px; }
.my-empty .my-empty-ic{ font-size:40px; margin-bottom:8px; }
.my-empty b{ display:block; font-size:16px; margin-bottom:6px; }
.my-empty p{ font-size:13px; color:var(--muted); margin:0 0 14px; }
.my-empty .primary{ border:none; border-radius:12px; padding:11px 18px; font-weight:800; font-size:14px; cursor:pointer;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; box-shadow:0 6px 16px -8px var(--accent); }
/* ADD4 + FIX6: landing overlay */
.landing-modal{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  background:rgba(8,12,10,.72); backdrop-filter:blur(3px); padding:20px; }
.landing-modal.hidden{ display:none; }
.landing-card{ background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:26px 22px;
  max-width:360px; width:100%; text-align:center; box-shadow:0 24px 60px -20px rgba(0,0,0,.6); }
.landing-card .landing-ic{ font-size:48px; margin-bottom:6px; }
.landing-card h3{ font-size:19px; margin:0 0 8px; }
.landing-card p{ font-size:14px; color:var(--muted); margin:0 0 18px; line-height:1.5; }
.landing-card .primary{ display:block; width:100%; border:none; border-radius:12px; padding:13px; font-weight:800; font-size:15px;
  cursor:pointer; background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; margin:0 0 8px; box-shadow:0 8px 20px -8px var(--accent); }
.landing-card .ghost{ background:transparent; border:none; color:var(--muted); font-size:13px; cursor:pointer; padding:6px; }
/* ADD1: draw attention to the hint button during the guided first game */
@keyframes pulseHint{ 0%,100%{ box-shadow:0 0 0 0 rgba(79,184,119,.5); } 50%{ box-shadow:0 0 0 7px rgba(79,184,119,0); } }
.pulse-hint{ animation:pulseHint 1.3s ease-in-out infinite; border-color:var(--accent)!important; }
@media (prefers-reduced-motion: reduce){ .pulse-hint{ animation:none; } }
.pz-cats button{ flex:1; min-width:84px; background:var(--elevated); color:var(--muted);
  border:1px solid var(--line2); border-radius:10px; padding:8px 6px; font-size:13px; cursor:pointer; }
.pz-cats button.active{ background:var(--accent); color:#fff; border-color:transparent; font-weight:700; }
.pz-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.pz-grid button{ position:relative; aspect-ratio:1/1; background:#1b2029; color:var(--ink);
  border:1px solid var(--line2); border-radius:9px; font-size:13px; cursor:pointer; }
.pz-grid button:hover{ background:var(--elevated); }
.pz-grid button.cur{ outline:2px solid var(--accent); outline-offset:1px; }
.pz-grid button.solved{ background:linear-gradient(135deg,#183024,#142a1e); border-color:rgba(79,184,119,.45); color:#6fd79b; }
.pz-grid button.solved::after{ content:"✓"; position:absolute; top:1px; right:4px; font-size:10px; color:#6fd79b; }
.pz-grid button.locked{ background:#14181e; color:#7d8896; cursor:not-allowed; border-color:var(--line); }
.pz-grid button.locked::after{ content:"🔒"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; }

/* ============================================================
   RANK / RESULT BADGES
   ============================================================ */
.rankbadge{ display:inline-block; margin-bottom:12px; padding:6px 14px; border-radius:var(--r-pill);
  font-weight:800; font-size:13px; color:#fff;
  background:linear-gradient(135deg,var(--accent2),var(--accent-deep));
  box-shadow:0 6px 16px -6px rgba(47,125,77,.6); border:1px solid rgba(255,255,255,.15); }
.rankbadge.master{ background:linear-gradient(135deg,#ffd45a,var(--gold-deep)); box-shadow:0 6px 16px -4px rgba(226,160,16,.7); }

/* win / loss / draw result screen — a focused dark card for drama */
.result-overlay{ position:fixed; inset:0; background:rgba(20,28,42,.55); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; z-index:60; }
.result-box{ position:relative; overflow:hidden; width:min(420px,92vw); text-align:center;
  background:linear-gradient(180deg,#232b3a,#1b2230); border:1px solid rgba(255,255,255,.10); color:#eef1f5;
  border-radius:22px; padding:34px 30px 28px; box-shadow:0 30px 70px -18px rgba(16,24,40,.6);
  animation:pop .35s cubic-bezier(.2,1.2,.3,1); }
@keyframes pop{ from{ transform:scale(.8); opacity:0; } to{ transform:scale(1); opacity:1; } }
.result-box.win{ border-color:rgba(226,160,16,.55); box-shadow:0 0 0 1px rgba(226,160,16,.25), 0 30px 70px -18px rgba(16,24,40,.6); }
.result-box.loss{ border-color:rgba(224,72,63,.4); animation:resultShake .42s cubic-bezier(.36,.07,.19,.97) both; }
.result-icon{ font-size:84px; line-height:1; margin-bottom:6px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.4)); animation:bounceIn .5s; }
@keyframes bounceIn{ 0%{transform:scale(.3);opacity:0;} 60%{transform:scale(1.15);} 100%{transform:scale(1);opacity:1;} }
.result-title{ font-size:30px; font-weight:900; letter-spacing:.5px; margin:2px 0 6px; }
.result-box.win .result-title{ color:#ffcf3f; text-shadow:0 2px 16px rgba(226,160,16,.45); }
.result-box.loss .result-title{ color:#ff8a82; }
.result-box.draw .result-title{ color:#c9d2dd; }
.result-sub{ color:#aab3c2; font-size:15px; margin-bottom:14px; }
.result-badge{ margin:6px auto 16px; padding:10px 16px; border-radius:14px; font-weight:800; font-size:16px;
  color:#fff; background:linear-gradient(135deg,var(--accent2),var(--accent-deep)); box-shadow:0 8px 20px -6px rgba(47,125,77,.7);
  animation:bounceIn .6s .15s both; }
.result-badge.master{ background:linear-gradient(135deg,#ffd45a,var(--gold-deep)); }
.result-badge .small{ display:block; font-size:11px; font-weight:700; opacity:.85; margin-bottom:2px; }
.result-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.confetti{ position:absolute; inset:0; pointer-events:none; }
.confetti i{ position:absolute; top:-12px; width:8px; height:13px; border-radius:2px; opacity:.9; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(440px) rotate(540deg); opacity:0; } }

/* promotion picker */
.promo{ position:absolute; z-index:60; background:var(--panel2); border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.6); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line2); }
.promo div{ font-size:34px; padding:6px 12px; cursor:pointer; color:var(--ink); transition:background .1s; border-radius:6px; }
.promo div:hover{ background:rgba(127,140,160,.28); }

/* ============================================================
   ONLINE MATCH
   ============================================================ */
.og-rating{ margin:2px 0 10px; padding:12px 14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(226,160,16,.12), rgba(226,160,16,.04));
  border:1px solid rgba(226,160,16,.28); font-size:14px; }
.og-rating b{ font-size:24px; color:var(--gold-deep); margin-left:6px; }
.og-rating .small{ display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.og-code{ margin:12px 0 4px; padding:12px 14px; border-radius:12px; font-size:16px;
  background:rgba(63,157,99,.10); border:1px solid rgba(63,157,99,.28); }
.og-code b{ font-size:22px; letter-spacing:4px; color:var(--accent-deep); }
.og-code .small{ display:block; font-size:12px; color:var(--muted); margin-top:4px; letter-spacing:0; }
.og-draw{ margin-top:10px; padding:11px 13px; border-radius:12px;
  background:rgba(226,160,16,.12); border:1px solid rgba(226,160,16,.32); font-size:14px; }
.og-draw .row{ display:flex; gap:8px; margin-top:9px; } .og-draw .row button{ flex:1; }

/* player bars */
.pbar{ display:flex; align-items:center; gap:10px; width:var(--board); overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin:8px 0; box-shadow:var(--shadow-sm); }
.pv-ava{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:var(--elevated); color:var(--ink); font-weight:800; font-size:14px; flex:0 0 auto; }
.pv-ava.me{ background:linear-gradient(145deg,var(--accent2),var(--accent-deep)); color:#fff; }
.pv-name{ font-weight:700; font-size:14.5px; max-width:32%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-clock{ font-family:'Consolas','SF Mono',monospace; font-size:15px; font-weight:700;
  padding:3px 10px; border-radius:8px; background:var(--elevated); color:var(--muted); border:1px solid var(--line2); }
.pv-clock.active{ background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; border-color:transparent; box-shadow:0 2px 0 var(--accent-deep); }
.pv-clock.active.low{ background:linear-gradient(180deg,#f0584f,#c62828); box-shadow:0 2px 0 #8e1e1e; animation:lowtime 1s steps(2) infinite; }
@keyframes lowtime{ 50%{ filter:brightness(1.35); } }
.pv-caps{ margin-left:auto; display:flex; align-items:center; gap:2px; font-size:16px; color:#6b7683; letter-spacing:-1px; }
.pv-lead{ margin-left:6px; font-size:14px; font-weight:800; color:var(--good-d); letter-spacing:0; }

/* in-game chat */
.ogchat{ width:var(--board); margin-top:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; box-shadow:var(--shadow-sm); }
.ogchat-log{ height:130px; overflow-y:auto; padding:10px 12px; font-size:13.5px; display:flex; flex-direction:column; gap:6px; }
.chatmsg{ max-width:85%; padding:6px 10px; border-radius:12px; background:var(--elevated); align-self:flex-start; line-height:1.4; }
.chatmsg.me{ align-self:flex-end; background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; }
.chatmsg b{ display:block; font-size:11px; opacity:.65; margin-bottom:1px; }
.chatmsg.me b{ opacity:.85; }
.ogchat-in{ display:flex; gap:6px; padding:8px; border-top:1px solid var(--line); }
.ogchat-in input{ flex:1; }

/* history */
.hist{ font-size:13.5px; }
.hist-row{ display:grid; grid-template-columns:44px 1fr 26px 44px; gap:8px; align-items:center; padding:7px 4px; border-bottom:1px solid var(--line); }
.hist-row:last-child{ border-bottom:none; }
.hist-row .dim{ color:var(--faint); }
.hist-row .w{ color:var(--good-d); } .hist-row .l{ color:var(--bad); } .hist-row .d{ color:var(--muted); }
.hist-row .up{ color:var(--good-d); font-weight:700; } .hist-row .down{ color:var(--bad); font-weight:700; }
/* FIX9: one shared "nothing here yet" note (history, friends, weakness…) */
.hist-empty, .weak-empty{ color:var(--muted); font-size:var(--fs-sm); line-height:1.6; padding:var(--space-4) var(--space-2); text-align:center; }

/* leaderboard */
.lb{ font-size:14px; }
.lb-row{ display:grid; grid-template-columns:34px 1fr 64px; gap:8px; align-items:center; padding:8px 6px; border-bottom:1px solid var(--line); }
.lb-row:last-child{ border-bottom:none; }
.lb-row.me{ background:rgba(63,157,99,.10); border-radius:8px; }
.lb-rank{ text-align:center; font-weight:800; color:var(--muted); }
.lb-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.lb-row.me .lb-name{ color:var(--accent-deep); }
.lb-rating{ text-align:right; color:var(--gold-deep); font-family:'Consolas','SF Mono',monospace; }
.auth-hint{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:14px 0 0; }

/* ============================================================
   ACCOUNTS / SETTINGS MODALS
   ============================================================ */
.auth-box{ width:min(360px,92vw); background:var(--panel); border:1px solid var(--line2);
  border-radius:18px; padding:24px 24px 18px; box-shadow:var(--shadow-lg); animation:pop .3s cubic-bezier(.2,1.2,.3,1); }
.auth-box h2{ margin:0 0 6px; font-size:19px; }
.auth-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

/* first-open login gate */
.gate-box{ text-align:center; }
.gate-badge{ width:56px; height:56px; margin:2px auto 12px; display:grid; place-items:center;
  border-radius:16px; font-size:30px; color:#fff;
  background:linear-gradient(150deg,#4bb277,var(--accent-deep,#2f7d4d)); box-shadow:var(--shadow-lg); }
.gate-lead{ font-size:13.5px; color:var(--muted); line-height:1.65; margin:6px 2px 4px; }
.gate-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.gate-actions button{ width:100%; padding:13px 16px; font-size:15px; }
/* onboarding skill picker: stacked label + subtitle, left-aligned */
.skill-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:12px 16px; }
.skill-opt b{ font-size:15px; }
.skill-opt span{ font-size:12px; color:var(--muted); }

/* AI coach card with a talking avatar */
.coach-card{ display:flex; gap:12px; align-items:flex-start; background:linear-gradient(180deg,#14211a,#141c26);
  border:1px solid var(--line2,#242b35); border-radius:14px; padding:14px; }
.coach-av{ flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; font-size:26px;
  border-radius:50%; background:#fff; box-shadow:0 3px 10px -4px rgba(16,24,40,.3); }
.coach-av.speaking{ animation:coachTalk .5s ease-in-out infinite; box-shadow:0 0 0 0 rgba(63,157,99,.5); }
@keyframes coachTalk{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(63,157,99,.45);} 50%{ transform:scale(1.08); box-shadow:0 0 0 8px rgba(63,157,99,0);} }
.coach-body{ flex:1; min-width:0; }
.coach-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.coach-speak{ font-size:12.5px; padding:5px 10px; white-space:nowrap; }
.coach-mini{ padding:10px 12px; margin-bottom:10px; }
.coach-mini .coach-av{ width:38px; height:38px; font-size:21px; }
.coach-mini .coach-text{ font-size:14px; }

/* daily puzzle card */
.daily-card{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:linear-gradient(120deg,#2a2113,#2a1620); border:1px solid var(--line2); }
.daily-left{ display:flex; align-items:center; gap:12px; }
.daily-badge{ width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; font-size:24px;
  border-radius:12px; background:#fff; box-shadow:var(--shadow-sm); }
.daily-title{ font-weight:800; font-size:16px; }
.daily-streak{ font-size:13px; color:var(--muted); margin-top:2px; }
#dailyBtn.done{ filter:grayscale(.4) brightness(.98); }
@media (max-width:560px){ .daily-card #dailyBtn{ width:100%; } }

/* full-screen takeover when signed out (not a small modal) */
#loginGate{ background:linear-gradient(165deg,#0f5132 0%,#2f7d4d 48%,#3f9d63 100%);
  backdrop-filter:none; padding:28px; z-index:60; overflow:hidden; }
/* faint tilted chessboard behind the content */
#loginGate::before{ content:""; position:absolute; inset:-20%; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%),
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%);
  background-size:84px 84px; background-position:0 0, 42px 42px; transform:rotate(-9deg); }
#loginGate .gate-box{ position:relative; z-index:1; }
.gate-wordmark{ font-size:15px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.92); margin:2px 0 2px; }
.gate-tag{ font-size:13px; color:rgba(255,255,255,.72); margin:0 0 16px; letter-spacing:.01em; }
#loginGate .gate-box{ width:min(440px,92vw); max-height:none; background:transparent;
  border:none; box-shadow:none; color:#fff; padding:0; animation:fadeUp .45s ease both; }
#loginGate .gate-badge{ width:76px; height:76px; font-size:40px; border-radius:22px;
  background:rgba(255,255,255,.16); box-shadow:none; margin:0 auto 20px; }
#loginGate h2{ color:#fff; font-size:24px; margin-bottom:10px; }
#loginGate .gate-lead{ color:rgba(255,255,255,.86); font-size:14.5px; margin:0 4px; }
#loginGate .gate-actions{ margin-top:26px; }
#loginGate .gate-actions button.primary{ background:#fff; color:#1c5236; border:none; font-weight:800; }
#loginGate .gate-actions button.ghost{ background:rgba(255,255,255,.10); color:#fff;
  border:1px solid rgba(255,255,255,.45); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.setrow{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.setrow:last-of-type{ border-bottom:none; }
.setdesc{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.switch{ position:relative; flex:0 0 auto; width:50px; height:28px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:#cfd6df; border-radius:var(--r-pill); transition:.2s; cursor:pointer; }
.switch .slider::before{ content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(16,24,40,.28); }
.switch input:checked + .slider{ background:linear-gradient(180deg,var(--accent2),var(--accent)); }
.switch input:checked + .slider::before{ transform:translateX(22px); }

/* ============================================================
   RATING TIER SYMBOLS
   ============================================================ */
.tier{ font-weight:900; margin-right:3px; }
.tier.t-pawn{ color:#7a8594; }
.tier.t-knight{ color:#2f9e52; }
.tier.t-bishop{ color:#1e93a8; }
.tier.t-rook{ color:#3f6bd6; }
.tier.t-queen{ color:#8a5cf0; }
.tier.t-king{ color:var(--gold-deep); text-shadow:0 0 8px rgba(226,160,16,.4); }
.rating-chip .tier, .og-rating .tier{ color:#3a2e05; }
.rating-chip .tier.t-king{ color:#5a3d00; }

/* ============================================================
   GROWTH REPORT + WEEKLY GOALS
   ============================================================ */
.growth-wrap{ max-width:560px; }
#grChartBox{ background:#12161c; border:1px solid var(--line2); border-radius:12px; padding:10px 8px; }
.grstats{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:13.5px; color:var(--muted); }
.grstats b{ color:var(--ink); }
.grstats .up{ color:var(--good-d); } .grstats .down{ color:var(--bad); }
.grtip{ font-size:14.5px; line-height:1.6; margin:0 0 12px; }
.grproj{ font-size:15px; line-height:1.7; padding:12px 14px; border-radius:12px;
  background:rgba(63,157,99,.10); border:1px solid rgba(63,157,99,.28); }
.goal-presets{ display:flex; flex-wrap:wrap; gap:7px; }
.goal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:15px; }
.goal-bar{ height:12px; border-radius:var(--r-pill); background:#242b35; border:1px solid var(--line2); overflow:hidden; }
.goal-fill{ height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--accent2),var(--accent)); transition:width .4s; }
.goal-fill.done{ background:linear-gradient(90deg,#ffd45a,var(--gold-deep)); }

/* ============================================================
   FOOTER
   ============================================================ */
.appfoot{ text-align:center; font-size:12px; color:var(--faint); padding:18px 12px 26px; line-height:1.8; }
.appfoot a{ color:var(--muted); text-decoration:none; }
.appfoot a:hover{ color:var(--accent-deep); text-decoration:underline; }

/* ============================================================
   MOBILE — bottom navigation + responsive tuning
   ============================================================ */
.bottomnav{ display:none; }
body.ingame .tabs, body.ingame .bottomnav{ display:none !important; }
body.ingame{ padding-bottom:0 !important; }

@media (max-width:760px){
  .tabs{ display:none; }
  body{ padding-bottom:66px; }
  .bottomnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:rgba(13,16,22,.92); backdrop-filter:blur(14px);
    border-top:1px solid var(--line2);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -8px 24px -12px rgba(16,24,40,.2); }
  .bottomnav button{ position:relative; flex:1; min-width:0; background:none; border:none; cursor:pointer; color:var(--muted);
    display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 2px 6px; font-size:11px; font-weight:700; border-radius:12px; }
  .bottomnav button .bi{ font-size:21px; line-height:1; filter:grayscale(.35) opacity(.75); transition:.15s; }
  .bottomnav button .bl{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* clearer active state: a filled pill behind the icon + an accent top bar */
  .bottomnav button.active{ color:var(--accent); }
  .bottomnav button.active .bi{ filter:none; transform:translateY(-1px); }
  .bottomnav button.active .bl{ color:var(--accent); }
  .bottomnav button.active::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--accent); }
  .bottomnav button.active .bi{ background:rgba(79,184,119,.15); border-radius:var(--r-pill); padding:3px 12px; }
}
@media (max-width:560px){
  /* FIX10: puzzle controls form a stable even grid instead of a ragged wrap */
  #tab-puzzle .controls{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
  #tab-puzzle .controls .ghost{ width:100%; padding:11px 6px; font-size:12.5px; min-height:44px; }
  header.top{ padding:10px 12px; gap:8px; }
  header.top h1{ font-size:16px; }
  header.top h1::before{ width:28px; height:28px; font-size:16px; border-radius:9px; }
  header.top .sf{ display:none; }
  .rating-chip{ font-size:12px; padding:5px 10px; } .rating-chip b{ font-size:13px; }
  .user-chip{ font-size:12px; padding:5px 9px; }
  .tab{ padding:14px 12px 28px; }
  .hero{ padding:16px 18px; margin-bottom:14px; border-radius:16px; }
  .hero h2{ font-size:19px; } .hero::after{ font-size:96px; right:12px; }
  input[type=text], input[type=password], select, textarea{ font-size:16px; }
  button.primary{ min-height:46px; width:100%; }
  button.ghost{ min-height:40px; padding:9px 13px; }
  .auth-actions button.primary{ width:auto; flex:1; }
  :root{ --board:94vw; --rvboard:calc(94vw - 32px); }
  .pbar{ width:var(--board); padding:7px 10px; gap:8px; }
  .pv-name{ font-size:13px; } .pv-clock{ font-size:13.5px; padding:3px 8px; } .pv-caps{ font-size:14px; }
  .pz-flash{ font-size:38px; }
  .legend{ font-size:11px; gap:8px; }
  .learn-sel button{ padding:8px 10px; font-size:13px; }
  .card{ padding:14px 14px; border-radius:14px; margin-bottom:12px; }
  .cols{ gap:14px; } .cols > div{ min-width:0 !important; max-width:100% !important; }
  .result-box{ padding:26px 20px 22px; }
  .result-icon{ font-size:64px; } .result-title{ font-size:25px; }
  .movelist{ max-height:200px; }
  .appfoot{ font-size:11px; }
}

/* ============================================================
   IN-GAME IMMERSIVE MODE (v20)
   During a game the screen collapses to just the board + the two
   player bars (opponent nickname + rating on top). Everything else
   — header, nav, hero, side cards, footer — is hidden.
   ============================================================ */
.pv-rating{ font-size:12.5px; font-weight:700; color:var(--muted); padding:2px 8px; border-radius:var(--r-pill);
  background:var(--elevated); border:1px solid var(--line); white-space:nowrap; flex:0 0 auto; }
.pv-rating .tier{ margin-right:2px; }
.pv-turn{ margin-left:auto; width:12px; height:12px; border-radius:50%; background:var(--line2); flex:0 0 auto; }
.pv-turn.active{ background:var(--accent); box-shadow:0 0 0 4px rgba(63,157,99,.20); animation:myturnPulse 2.2s ease-out infinite; }

/* app-shell: keep browse screens from sprawling on wide monitors */
.tab{ max-width:1120px; margin-left:auto; margin-right:auto; }

/* ---- immersive stage ---- */
body.ingame{ padding:0 !important; --board:min(74vh, 560px, 94vw); }
body.ingame header.top,
body.ingame .tabs,
body.ingame .bottomnav,
body.ingame .appfoot,
body.ingame .tab > .hero{ display:none !important; }
body.ingame .tab{ padding:0; max-width:none; margin:0; }
body.ingame .cols{ justify-content:center; align-items:center; gap:0; min-height:100vh; padding:18px 12px; }
body.ingame .cols > div:last-child{ display:none !important; }   /* hide the side card stack */
body.ingame .cols > div:first-child{ width:var(--board); max-width:96vw; display:flex; flex-direction:column; align-items:center; }
body.ingame .boardwrap{ justify-content:center; }
body.ingame .pbar{ margin:9px 0; }
body.ingame .pv-clock{ margin-left:auto; }
body.ingame .turn{ text-align:center; font-size:13.5px; color:var(--muted); margin:10px 0 2px; }
body.ingame .controls{ justify-content:center; }
body.ingame .status{ text-align:center; }
body.ingame .ogchat{ margin-top:10px; }

/* ============================================================
   VISUAL RICHNESS (v22) — self-contained SVG art & textures so
   every screen and card has graphics, not just text/emoji.
   ============================================================ */
/* subtle chessboard texture behind the whole app (shows in the gaps) */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%3E%3Cg%20fill='seagreen'%20fill-opacity='0.05'%3E%3Crect%20width='22'%20height='22'/%3E%3Crect%20x='22'%20y='22'%20width='22'%20height='22'/%3E%3C/g%3E%3C/svg%3E"); }
/* (removed the green-square bullet + card corner motif for a cleaner premium look) */
.card h3::before{ content:none; }
.card{ background-image:none;
  background-repeat:no-repeat; background-position:top right; }
/* decorative corner brackets framing the board */
.boardwrap{ position:relative; }
.boardwrap::before, .boardwrap::after{ content:""; position:absolute; width:18px; height:18px; pointer-events:none;
  border:3px solid var(--accent); opacity:.55; }
.boardwrap::before{ left:-7px; top:-7px; border-right:none; border-bottom:none; border-radius:6px 0 0 0; }
.boardwrap::after{ right:-7px; bottom:-7px; border-left:none; border-top:none; border-radius:0 0 6px 0; }
@media (max-width:560px){
  .hero-art{ width:96px; height:74px; }
  .es-art{ width:170px; }
  .boardwrap::before, .boardwrap::after{ display:none; }
}

/* ============================================================
   STRUCTURE v23 — desktop LEFT SIDEBAR layout + packed home
   dashboard (stats strip, sidebar profile). Mobile unchanged
   (bottom nav). Overturns the old top-tab structure.
   ============================================================ */
.shell{ display:block; }
.side-profile, .side-tip{ display:none; }

/* packed home stats strip */
.statstrip{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:18px; }
.stat{ position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:14px 14px; box-shadow:var(--shadow); }
.stat .ic{ position:absolute; right:9px; top:8px; font-size:22px; opacity:.22; }
.stat .k{ font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:5px; }
.stat .v{ font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.5px; line-height:1.1; }
.stat .v .tier{ font-size:18px; }
body.ingame .statstrip{ display:none !important; }

@media (max-width:760px){ .statstrip{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* --- desktop: turn the tab bar into a left sidebar rail --- */
@media (min-width:761px){
  .shell{ display:flex; align-items:flex-start; gap:22px; max-width:1440px; margin:0 auto; padding:22px 24px; }
  .tabs{ position:sticky; top:74px; align-self:flex-start; z-index:5;
    flex:0 0 218px; width:218px; flex-direction:column; align-items:stretch; gap:4px;
    overflow:visible; padding:12px; border:1px solid var(--line); border-radius:18px;
    background:var(--panel); box-shadow:var(--shadow); }
  .tabs button{ width:100%; justify-content:flex-start; text-align:left;
    padding:11px 14px; font-size:15px; font-weight:650; border-radius:12px; }
  .tabs button .ti{ font-size:18px; margin-right:11px; width:22px; text-align:center; }
  .content{ flex:1 1 auto; min-width:0; }
  .content .tab{ padding:0; }

  .side-profile{ display:block; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .sp-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .sp-ava{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-weight:800;
    color:#fff; font-size:16px; background:linear-gradient(145deg,var(--accent2),var(--accent-deep)); flex:0 0 auto; }
  .sp-name{ font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sp-sub{ font-size:12px; color:var(--muted); margin-top:1px; }
  .sp-stats{ display:flex; gap:8px; }
  .sp-stat{ flex:1; text-align:center; background:var(--elevated); border-radius:10px; padding:8px 4px; }
  .sp-stat b{ display:block; font-size:15px; color:var(--ink); }
  .sp-stat span{ font-size:10.5px; color:var(--muted); }

  .side-tip{ display:block; margin-top:12px; padding:12px 13px; border-radius:12px; font-size:12.5px; line-height:1.55;
    background:linear-gradient(180deg,rgba(63,157,99,.10),rgba(63,157,99,.04));
    border:1px solid rgba(63,157,99,.25); color:var(--accent-deep); }
  .side-tip b{ font-size:12.5px; }

  /* in a game the rail collapses away for a clean board */
  body.ingame .shell{ display:block; max-width:none; padding:0; }
}

/* ============================================================
   LOSS GATE (v26) — a slim bar that lets the player study the
   opponent's last move before the defeat screen appears.
   ============================================================ */
.resultgate{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:55;
  display:flex; align-items:center; gap:14px; max-width:calc(100vw - 32px);
  padding:12px 14px 12px 18px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line2);
  box-shadow:var(--shadow-lg); animation:gateUp .25s ease both;
}
.resultgate .rg-msg{ font-size:13.5px; color:var(--muted); line-height:1.4; }
.resultgate .primary{ flex:0 0 auto; padding:10px 16px; }
@keyframes gateUp{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }
@keyframes gateUpM{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (max-width:560px){
  .resultgate{ left:12px; right:12px; bottom:76px; transform:none; flex-direction:column; align-items:stretch; text-align:center; animation-name:gateUpM; }
  .resultgate .primary{ width:100%; }
}
body.ingame .resultgate{ bottom:24px; }

/* ============================================================
   RESULT WINDOW v27 — floats over the game screen without
   blocking it (transparent, click-through backdrop) and can be
   dismissed with its × so the last move stays visible.
   ============================================================ */
.result-overlay{
  background:transparent; backdrop-filter:none;
  align-items:flex-start; justify-content:center;
  padding:7vh 16px 16px; pointer-events:none;
}
.result-box{ pointer-events:auto; }               /* the window itself stays interactive */
.result-close{
  position:absolute; top:10px; right:12px; z-index:3;
  width:32px; height:32px; border-radius:9px; cursor:pointer;
  display:grid; place-items:center; font-size:22px; line-height:1;
  color:#3a434f; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  transition:background .15s, color .15s;
}
.result-close:hover{ background:rgba(255,255,255,.16); color:#fff; }
@media (max-width:560px){ .result-overlay{ padding-top:4.5vh; } }

/* ============================================================
   GAME RECORDS + FULL-SCREEN EXIT (v28)
   ============================================================ */
/* floating exit button — shown over the board after a game ends */
.game-exit{
  position:fixed; top:14px; left:14px; z-index:58;
  padding:9px 15px; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer;
  color:#fff; background:linear-gradient(180deg,#3a4150,#2b3240); border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 20px -8px rgba(16,24,40,.5);
}
.game-exit:hover{ filter:brightness(1.12); }

/* game records modal */
.histbox{ width:min(480px,94vw); }
.histmodal{ max-height:58vh; overflow-y:auto; margin-top:2px; }
.histm-row{ display:grid; grid-template-columns:42px 1fr auto auto auto; gap:10px; align-items:center;
  padding:9px 4px; border-bottom:1px solid var(--line); font-size:14px; }
.histm-row:last-child{ border-bottom:none; }
.histm-row .dim{ color:var(--faint); font-size:12.5px; }
.histm-row .hm-opp{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.histm-row .w{ color:var(--good-d); } .histm-row .l{ color:var(--bad); } .histm-row .d{ color:var(--muted); }
.histm-row .hm-delta{ min-width:34px; text-align:right; font-family:'Consolas','SF Mono',monospace; font-size:12.5px; }
.histm-row .hm-delta.up{ color:var(--good-d); } .histm-row .hm-delta.down{ color:var(--bad); }
.histm-row .hm-review{ padding:6px 12px; font-size:13px; }

/* ============================================================
   BOARD COORDINATES (a–h / 1–8) — colored per square for contrast
   ============================================================ */
.coordtag{ position:absolute; font-size:9px; font-weight:700; line-height:1; pointer-events:none; }
.coordtag.rankco{ left:2px; top:1px; }
.coordtag.fileco{ right:2px; bottom:1px; left:auto; top:auto; }
.sq.light .coordtag{ color:rgba(70,80,55,.62); }
.sq.dark  .coordtag{ color:rgba(255,255,255,.75); }
@media (max-width:560px){ .coordtag{ font-size:8px; } }

/* ============================================================
   Modals (settings/auth/history) scroll internally when tall
   ============================================================ */
.auth-box{ max-height:88vh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.overlay{ padding:16px; }

/* ============================================================
   SETUP PANELS v53 — AI "새 대국 설정" + online match card.
   A11y helper, a deliberate strength picker, and segmented
   chip controls that mirror hidden <select>s.
   ============================================================ */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* --- AI setup card header: title + best-record pill on one line --- */
.setup-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.setup-head h3{ margin:0; }
.setup-head .rankbadge{ margin-bottom:0; }
.setup-go{ margin-top:16px; }
.setup-go .primary{ width:100%; }

/* --- deliberate strength picker (rating slider) --- */
.strength-pick{ margin:2px 0 4px; padding:13px 15px 12px; border-radius:14px;
  background:linear-gradient(180deg, rgba(63,157,99,.09), rgba(63,157,99,.02));
  border:1px solid rgba(63,157,99,.22); }
.strength-pick > .field{ margin:0 0 2px; }
.strength-val{ font-size:16.5px; font-weight:800; color:var(--accent-deep);
  letter-spacing:-.2px; margin:0 0 11px; line-height:1.2; transition:opacity .15s; }
.strength-pick input[type=range]{ -webkit-appearance:none; appearance:none; width:100%;
  height:6px; border-radius:var(--r-pill); background:#1a2a20; outline:none; margin:0; padding:0; cursor:pointer; }
.strength-pick input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%; border:2px solid #fff; cursor:pointer;
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow:0 2px 7px -1px rgba(47,125,77,.65); }
.strength-pick input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%;
  border:2px solid #fff; cursor:pointer; background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow:0 2px 7px -1px rgba(47,125,77,.65); }
.strength-pick input[type=range]::-moz-range-track{ height:6px; border-radius:var(--r-pill); background:#1a2a20; }
.strength-pick input[type=range]:disabled{ cursor:not-allowed; }
.strength-pick input[type=range]:disabled::-webkit-slider-thumb{ background:#3a434f; box-shadow:none; }
.strength-pick input[type=range]:disabled::-moz-range-thumb{ background:#3a434f; box-shadow:none; }
.strength-pick input[type=range]:focus-visible{ box-shadow:0 0 0 3px rgba(63,157,99,.22); }
.strength-ticks{ display:flex; justify-content:space-between; margin-top:7px;
  font-size:11px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; }

/* --- segmented chip controls (mirror the hidden selects) --- */
.segmented{ display:flex; gap:7px; flex-wrap:wrap; margin:2px 0 2px; }
.seg-color .seg-btn{ flex:1 1 0; min-width:0; }
.seg-btn{ flex:0 1 auto; cursor:pointer; font-family:inherit; text-align:center;
  padding:9px 13px; font-size:13.5px; font-weight:650; line-height:1.2; border-radius:11px;
  color:var(--muted); background:var(--elevated); border:1px solid var(--line2);
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .08s; }
.seg-btn:hover{ background:#242b35; color:var(--ink); }
.seg-btn:active{ transform:translateY(1px); }
.seg-btn.active{ color:#fff; border-color:transparent; font-weight:750;
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow:0 6px 16px -8px var(--accent); }
.seg-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(63,157,99,.22); }

/* ============================================================
   ONLINE MATCH SETUP v53 — cleaner rating header, tidy fields,
   framed friend / invite-code section.
   ============================================================ */
.og-rating-head{ display:flex; flex-direction:column; gap:5px; }
.og-rating-head .ogr-main{ display:flex; align-items:baseline; gap:9px; }
.og-rating-head .ogr-label{ font-size:13px; font-weight:600; color:var(--muted); }
.og-rating-head b#ogRating{ font-size:32px; line-height:1; margin-left:0; color:var(--gold-deep);
  letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.og-rating-head .ogr-note{ margin-top:0; }
.og-field{ margin-top:2px; }
.og-actions{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.og-actions .primary{ flex:1 1 auto; }
.og-friend{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.og-friend h3{ margin:0 0 10px; }
.og-friend .og-create-btn{ width:100%; }
.og-join-row{ display:flex; gap:8px; margin-top:5px; }

@media (max-width:560px){
  .setup-head{ flex-wrap:wrap; gap:6px; }
  .seg-btn{ padding:10px 12px; font-size:14px; }
}

/* ---- ④ Achievements / badges ---- */
.achcount{ font-size:13px; font-weight:600; color:var(--muted); margin-left:6px; }
.achgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-top:6px; }
.ach{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px;
  border-radius:14px; text-align:center; border:1px solid var(--line); background:var(--card2,#fff); }
.ach .ach-ic{ font-size:26px; line-height:1; }
.ach .ach-nm{ font-size:11px; font-weight:600; color:var(--ink); line-height:1.2; }
.ach.off{ opacity:.5; filter:grayscale(.7); }
.ach.off .ach-nm{ color:var(--muted); }
.ach.on{ box-shadow:0 2px 10px rgba(0,0,0,.06); }
.ach-toast{ position:fixed; left:50%; bottom:88px; transform:translate(-50%,24px);
  display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:16px;
  background:#1a1c22; color:#fff; box-shadow:0 8px 30px rgba(0,0,0,.35); z-index:9000;
  opacity:0; transition:opacity .35s, transform .35s; max-width:88vw; pointer-events:none; }
.ach-toast.show{ opacity:1; transform:translate(-50%,0); }
.ach-toast .ach-ic{ font-size:30px; }
.ach-toast .ach-tt{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#ffd968; font-weight:700; }
.ach-toast .ach-nm{ font-size:15px; font-weight:700; }

/* ---- ⑤ hint highlight (AI games) ---- */
.sq.hintsq{ box-shadow: inset 0 0 0 4px rgba(90,170,255,.85); }
.sq.hintsq::after{ content:""; position:absolute; inset:0; background:rgba(90,170,255,.16); pointer-events:none; }

/* ---- ⑨ leaderboard mode tabs ---- */
.lbtabs{ display:flex; gap:6px; margin:4px 0 12px; }
.lbtab{ flex:1; padding:7px 8px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; }
.lbtab.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---- ⑧ friends ---- */
.fr-add{ display:flex; gap:8px; margin-bottom:8px; }
.fr-add input{ flex:1; padding:9px 11px; border-radius:10px; border:1px solid var(--line); background:var(--card2,#fff); color:var(--ink); font-size:14px; }
.fr-list{ display:flex; flex-direction:column; gap:6px; }
.fr-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); }
.fr-name{ font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-rating{ font-size:13px; color:var(--muted); }
.fr-play{ padding:5px 10px !important; font-size:12.5px !important; }
.fr-del{ padding:5px 9px !important; font-size:12px !important; color:var(--muted); }

/* ---- ⑥ Chess960 toggle ---- */
.v960-toggle{ display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding:11px 13px;
  border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.v960-toggle input{ margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--accent); }
.v960-toggle .setdesc{ margin-top:2px; }

/* ---- in-game move notation strip + step-back nav (visible in immersive play) ---- */
.movenav{ display:none; }
body.ingame .movenav{
  display:flex; align-items:center; gap:6px; width:var(--board); max-width:96vw; margin:8px auto 0;
}
.msnav{ flex:0 0 auto; padding:7px 11px !important; font-size:13px !important; min-height:40px; min-width:40px; opacity:.75; }
.msnav:hover:not(:disabled){ opacity:1; }
.msnav:disabled{ opacity:.35; cursor:default; }
.movestrip{
  flex:1; min-width:0; display:flex; gap:5px; align-items:center; overflow-x:auto; white-space:nowrap;
  padding:7px 11px; background:var(--card2,#fff); border:1px solid var(--line); border-radius:10px;
  font-size:13px; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.movestrip.viewing{ box-shadow:inset 0 0 0 2px var(--accent); }
.movestrip .ms-num{ color:var(--muted); font-weight:600; margin-left:5px; }
.movestrip .ms-num:first-child{ margin-left:0; }
.movestrip .ms-mv{ font-weight:600; color:var(--ink); }
.movestrip .ms-mv.cur{ color:#fff; background:var(--accent); border-radius:5px; padding:1px 6px; }

/* ============================================================
   BOARD-FIRST STRUCTURE (v-bf) — the board is the hero.
   Big green hero banners collapse into compact page headers;
   slimmer stat strip; roomier board; controls become a pill bar.
   ============================================================ */
/* compact page header instead of the big gradient hero banner */
.hero{ display:block !important; background:none !important; box-shadow:none !important;
  color:var(--ink); padding:0 !important; margin:0 0 16px !important; border-radius:0 !important; overflow:visible; }
.hero::before, .hero::after{ display:none !important; }
.hero-art{ display:none !important; }
.hero-txt{ max-width:100% !important; }
.hero h2{ font-size:21px; letter-spacing:-.4px; color:var(--ink); margin:0; }
.hero p{ font-size:13px; color:var(--muted) !important; opacity:1 !important; margin:3px 0 0; line-height:1.45; max-width:680px; }

/* slimmer, quieter stat strip so the board leads */
.statstrip{ gap:8px; margin-bottom:16px; }
.stat{ padding:11px 13px; border-radius:12px; }
.stat .k{ font-size:11px; }
.stat .v{ font-size:19px; }
.stat .ic{ font-size:17px; opacity:.25; }

/* roomier boards on desktop (board-first) */
@media (min-width:761px){
  /* generous board: no tight vh clamp (that shrank it on short windows) */
  :root{ --board:min(680px, 56vw, 82vh); --rvboard:min(680px, calc(56vw - 34px), calc(82vh - 34px)); }
}

/* in-game controls → a cohesive centered pill bar right under the board */
.cols > div:first-child > .controls{ justify-content:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.cols > div:first-child > .controls .ghost{ border-radius:var(--r-pill); padding:9px 15px; }

/* ============================================================
   SETUP PANELS REFINED (v-sp) — the AI "새 대국 설정" + online
   match + friends panels. Fix the title/record collision, drop
   the nested green tints and heavy button glow, add breathing
   room and clean section dividers. (colours/dark tone unchanged)
   ============================================================ */
/* card gets more air */
.setup-card, #tab-online .cols > div:last-child .card{ padding:20px 20px 22px; }

/* header: title stays on ONE line; best-record shrinks to a quiet outlined chip */
.setup-head{ flex-wrap:nowrap !important; align-items:center; gap:10px; margin-bottom:6px; }
.setup-head h3{ white-space:nowrap; font-size:15px !important; color:var(--ink) !important; letter-spacing:-.2px; }
.setup-head .rankbadge{ background:none !important; color:var(--muted) !important; box-shadow:none !important;
  border:1px solid var(--line2); font-size:11px !important; font-weight:600 !important; padding:5px 11px !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* flatten the nested tinted boxes into clean surfaces */
.strength-pick{ background:var(--panel2) !important; border:1px solid var(--line) !important; padding:15px 16px 14px; }
.og-rating{ background:var(--panel2) !important; border:1px solid var(--line) !important; }
.og-code{ background:var(--panel2) !important; border:1px solid var(--line) !important; }

/* clean flat primary buttons — no glow, no fake 3D edge; taller + confident */
button.primary{ background:var(--accent) !important; box-shadow:none !important; border:none !important;
  border-radius:13px; padding:14px 20px; font-weight:700; letter-spacing:-.1px; }
button.primary:hover{ background:var(--accent2) !important; filter:none !important; }
button.primary:active{ transform:translateY(1px) !important; box-shadow:none !important; }

/* segmented chips: flat active state, no glow */
.seg-btn{ border-radius:10px; padding:10px 14px; }
.seg-btn.active{ box-shadow:none !important; }

/* color toggle fills the row evenly; 960 toggle matches the card radius */
.v960-toggle{ border-radius:12px; margin-top:16px; }

/* labels above each control group get a touch more space for rhythm */
.setup-card > .field, #tab-online .og-field > .field{ margin-top:18px; display:block; font-size:12.5px; color:var(--muted); }

/* start / quick-match buttons: full width + prominent */
.setup-go .primary, .og-actions .primary{ width:100%; font-size:15.5px; padding:15px; }

/* ============================================================
   STRUCTURE OVERHAUL (v-so) — flip the skeleton:
   • left sidebar rail  →  horizontal top nav pill bar
   • remove the noisy home stat strip
   • center the content column; board leads
   Mobile keeps its bottom nav (unchanged).
   ============================================================ */
/* the old cramped stat strip is replaced by the HOME hub's stat tiles */
.statstrip{ display:none !important; }

/* keep the left sidebar rail (chess.com-style) — just tidy it */
@media (min-width:761px){
  .tabs{ top:70px; }
  .cols{ justify-content:flex-start; }
}

/* ============================================================
   SETUP PANELS v2 (v-sp2) — bolder: the rating becomes a big
   headline number, controls sit on clean divided rows, and the
   panel reads like a modern settings sheet instead of nested boxes.
   ============================================================ */
/* AI rating: headline number, quiet caption, slim track */
.strength-pick{ background:transparent !important; border:none !important; padding:2px 0 4px !important; }
.strength-pick > .field{ font-size:11.5px !important; color:var(--faint) !important; letter-spacing:.02em; margin:0 0 2px !important; }
.strength-val{ font-size:30px !important; font-weight:800 !important; color:var(--ink) !important;
  letter-spacing:-.8px !important; margin:0 0 12px !important; }
.strength-pick input[type=range]{ height:4px !important; }
.strength-ticks{ margin-top:8px; }

/* each control group becomes a divided row block */
.setup-card > .field{ margin-top:18px !important; padding-top:16px; border-top:1px solid var(--line);
  font-size:11.5px !important; color:var(--faint) !important; letter-spacing:.02em; }
.setup-card .segmented{ margin-top:9px; }

/* online: rating headline matches, box goes flat */
.og-rating{ background:transparent !important; border:none !important; border-bottom:1px solid var(--line) !important;
  border-radius:0 !important; padding:2px 0 14px !important; margin-bottom:4px; }
.og-rating-head b#ogRating{ font-size:38px !important; color:var(--ink) !important; }
.og-rating-head .ogr-label{ font-size:11.5px; color:var(--faint); }

/* 960 toggle + invite block share the same quiet framing */
.v960-toggle{ background:var(--panel2); }
.og-friend{ margin-top:18px; padding-top:16px; }

/* ============================================================
   LAYOUT / BUTTON PLACEMENT (v-lp) — move the primary actions
   out of the bottom of a long scroll and dock them where the
   thumb/eye already is. Controls tuck tight under the board.
   ============================================================ */
/* MOBILE: the main action docks to the bottom of the screen, always reachable */
@media (max-width:760px){
  /* dock clears the bottom nav AND the home-indicator safe area on notched phones */
  .setup-go{ position:fixed; left:12px; right:12px; bottom:calc(74px + env(safe-area-inset-bottom, 0px)); z-index:30; margin:0 !important; }
  .setup-go .primary{ box-shadow:0 12px 30px -8px rgba(0,0,0,.75) !important; }
  .og-actions{ position:fixed; left:12px; right:12px; bottom:calc(74px + env(safe-area-inset-bottom, 0px)); z-index:30; margin:0 !important; }
  .og-actions .primary{ box-shadow:0 12px 30px -8px rgba(0,0,0,.75) !important; }
  /* keep the last card clear of the docked button */
  #tab-ai .cols > div:last-child, #tab-online .cols > div:last-child{ padding-bottom:76px; }
}

/* DESKTOP: the action sticks to the bottom edge of the setup panel while scrolling */
@media (min-width:761px){
  .setup-go, .og-actions{ position:sticky; bottom:10px; z-index:4; margin-top:18px;
    padding-top:14px; background:linear-gradient(180deg, transparent, var(--panel) 45%); }
}

/* in-game controls: tighter, icon-forward row hugging the board */
.cols > div:first-child > .controls{ margin-top:10px !important; gap:6px !important; }
.cols > div:first-child > .controls .ghost{ padding:8px 14px !important; font-size:13px !important; min-height:44px !important; }

/* the board column gets the turn line right under the board, controls under that */
.cols > div:first-child > .turn{ margin:10px 0 2px !important; }

/* ============================================================
   HOME HUB (v-hub) — landing screen: stat tiles, a primary
   action list, and preview cards with board thumbnails.
   ============================================================ */
.hub-head{ margin:0 0 18px; }
.hub-head h2{ margin:0; font-size:24px; letter-spacing:-.5px; color:var(--ink); }
.hub-head p{ margin:5px 0 0; font-size:13.5px; color:var(--muted); }

.hub-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.hub-stat{ display:flex; align-items:center; gap:11px; padding:14px 15px; border-radius:14px;
  background:var(--panel); border:1px solid var(--line); }
.hub-stat .hs-ic{ font-size:22px; line-height:1; flex:0 0 auto; }
.hub-stat .hs-k{ font-size:11.5px; color:var(--faint); font-weight:600; }
.hub-stat .hs-v{ font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.5px; line-height:1.15; }
.hub-stat .hs-sm{ font-size:13px; font-weight:600; color:var(--faint); }

.hub-grid{ display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start; }

/* primary actions — a stacked list of big tappable rows */
.hub-actions{ display:flex; flex-direction:column; gap:10px; }
.hub-act{ display:flex; align-items:center; gap:13px; width:100%; cursor:pointer; text-align:left;
  padding:15px 16px; border-radius:14px; border:1px solid var(--line); background:var(--panel);
  color:var(--ink); font-family:inherit; transition:background .15s, border-color .15s, transform .06s; }
.hub-act:hover{ background:var(--panel2); border-color:var(--line2); }
.hub-act:active{ transform:translateY(1px); }
.hub-act .ha-ic{ font-size:24px; line-height:1; flex:0 0 auto; }
.hub-act .ha-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.hub-act .ha-txt b{ font-size:15px; font-weight:700; }
.hub-act .ha-txt span{ font-size:12px; color:var(--muted); }
.hub-act .ha-go{ margin-left:auto; color:var(--faint); font-size:20px; flex:0 0 auto; }

/* preview cards with a board thumbnail */
.hub-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.hub-card{ display:flex; flex-direction:column; gap:11px; padding:15px; border-radius:16px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); transition:border-color .15s, transform .06s; }
.hub-card:hover{ border-color:var(--line2); }
.hub-card:active{ transform:translateY(1px); }
.hub-card .hc-head b{ display:block; font-size:14.5px; font-weight:700; color:var(--ink); }
.hub-card .hc-head span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.hub-card .hc-cta{ width:100%; text-align:center; }

.miniboard{ display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  aspect-ratio:1/1; width:100%; container-type:inline-size;
  border-radius:9px; overflow:hidden; border:1px solid var(--line); }
.miniboard .msq{ display:grid; place-items:center; font-size:20px; line-height:1; overflow:hidden; }
/* glyph ~ square*0.78 so pieces sit cleanly inside each square */
@supports (font-size:1cqw){ .miniboard .msq{ font-size:9.6cqw; } }
.miniboard .msq.light{ background:var(--light); }
.miniboard .msq.dark{ background:var(--dark); }

@media (max-width:900px){ .hub-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .hub-stats{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .hub-head h2{ font-size:20px; }
}

/* ============================================================
   PLAY SCREEN v3 (v-play) — a big, un-squishable board and a
   deliberately-designed opponent/setup panel. My call, not tweaks.
   ============================================================ */
@media (min-width:761px){
  .cols{ align-items:flex-start !important; gap:28px !important; justify-content:flex-start; }
  .cols > div:first-child{ flex:0 0 auto !important; }             /* board never shrinks */
  #tab-ai .cols > div:last-child, #tab-online .cols > div:last-child{
    flex:1 1 300px !important; min-width:300px !important; max-width:390px !important; }
}

/* --- the AI "새 대국 설정" card, redesigned as an opponent panel --- */
.setup-card{ padding:22px 22px 24px; }
/* header line: title muted+small, record chip to the right */
.setup-head h3{ font-size:12.5px !important; color:var(--faint) !important; font-weight:600 !important;
  text-transform:uppercase; letter-spacing:.08em; }

/* rating becomes the hero: huge number, tier caption, thin accent track */
.strength-pick > .field{ display:none !important; }                /* drop the long caption */
.strength-val{ font-size:36px !important; letter-spacing:-1px !important; margin:8px 0 14px !important; }
.strength-pick input[type=range]{ height:4px !important; }
.strength-pick input[type=range]::-webkit-slider-thumb{ width:24px !important; height:24px !important; }

/* group labels: quiet uppercase, generous top divider */
.setup-card > .field{ font-size:11px !important; text-transform:uppercase; letter-spacing:.08em;
  color:var(--faint) !important; margin-top:22px !important; padding-top:18px; border-top:1px solid var(--line); }

/* style + color chips: bigger, confident */
.seg-btn{ padding:11px 15px !important; font-size:14px !important; border-radius:12px; }
.seg-color .seg-btn{ padding:14px !important; font-size:15px !important; }

/* Chess960: a clean switch row, not a boxed checkbox */
.v960-toggle{ background:transparent !important; border:none !important; border-top:1px solid var(--line);
  border-radius:0 !important; margin-top:22px; padding:18px 0 4px !important; }

/* start button: big, full width, prominent */
.setup-go{ margin-top:22px !important; }
.setup-go .primary{ padding:16px !important; font-size:16px !important; border-radius:14px; }

/* --- online panel: same language --- */
.og-rating-head b#ogRating{ font-size:40px !important; letter-spacing:-1px; }
.og-actions .primary{ padding:16px !important; font-size:16px !important; border-radius:14px; }

/* ============================================================
   SETUP PANELS v4 (v-sp4) — sidebar left alone. Shrink the AI
   rating headline (it wrapped to 2 lines), and tighten the two
   setup panels into clean, compact, one-line-safe cards.
   ============================================================ */
/* AI rating: one line, tidy — no more 2-line wrap */
.strength-val{ font-size:20px !important; font-weight:800 !important; letter-spacing:-.3px !important;
  white-space:nowrap; margin:6px 0 12px !important; }
.strength-val b{ font-size:22px; }
.og-rating-head b#ogRating{ font-size:28px !important; }

/* the setup panel: tighter rhythm, quieter dividers, calmer header */
.setup-card{ padding:20px 20px 22px; }
.setup-head{ margin-bottom:14px; }
.setup-head .rankbadge{ font-size:10.5px !important; padding:4px 9px !important; }
.setup-card > .field{ margin-top:18px !important; padding-top:15px; font-size:10.5px !important; }
.seg-btn{ padding:10px 14px !important; font-size:13.5px !important; }
.seg-color .seg-btn{ padding:13px !important; font-size:14.5px !important; }
.v960-toggle{ padding:16px 0 4px !important; margin-top:18px; }
.setup-go{ margin-top:20px !important; }
.setup-go .primary, .og-actions .primary{ padding:15px !important; font-size:15.5px !important; }

/* ============================================================
   DIFFICULTY BUTTONS (v-dif) — a sleek button grid replacing the
   AI rating slider. Two-line buttons: tier name + rating.
   ============================================================ */
.diflevels{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0 2px; }
.diflevel{ display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
  padding:11px 8px; border-radius:12px; font-family:inherit; text-align:center;
  color:var(--muted); background:var(--panel2); border:1px solid var(--line);
  transition:background .15s, border-color .15s, color .15s, transform .06s; }
.diflevel:hover{ background:var(--elevated); color:var(--ink); border-color:var(--line2); }
.diflevel:active{ transform:translateY(1px); }
.diflevel b{ font-size:14px; font-weight:700; letter-spacing:-.2px; }
.diflevel span{ font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.diflevel.active{ color:#fff; border-color:transparent;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); }
.diflevel.active span{ color:rgba(255,255,255,.85); }
.diflevels.dim{ opacity:.4; pointer-events:none; }
@media (max-width:560px){ .diflevels{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   AI FACES + COLOURFUL TOUCHES (v-face) — emoji faces for AI
   opponents, and colour splashed across the hub/stats/panels.
   ============================================================ */
/* difficulty-button face */
.diflevel .dif-face{ font-size:25px; line-height:1; margin-bottom:2px; filter:saturate(1.1); }
.diflevel.active .dif-face{ filter:none; }

/* in-game opponent avatar shows the AI's emoji face */
.pv-ava.face{ background:linear-gradient(160deg,#20303f,#182430) !important; font-size:19px; }

/* hub action icons — restrained to brand green + gold (+ one soft slate) */
.hub-act .ha-ic{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:23px; }
.hub-actions .hub-act:nth-child(1) .ha-ic{ background:rgba(79,184,119,.20); }
.hub-actions .hub-act:nth-child(2) .ha-ic{ background:rgba(233,178,58,.18); }
.hub-actions .hub-act:nth-child(3) .ha-ic{ background:rgba(79,184,119,.14); }
.hub-actions .hub-act:nth-child(4) .ha-ic{ background:rgba(140,160,180,.16); }

/* stat tiles — gold (streak) · green (puzzles/rating) · slate (winrate) */
.hub-stat .hs-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px; }
.hub-stats .hub-stat:nth-child(1) .hs-ic{ background:rgba(233,178,58,.20); }
.hub-stats .hub-stat:nth-child(2) .hs-ic{ background:rgba(79,184,119,.20); }
.hub-stats .hub-stat:nth-child(3) .hs-ic{ background:rgba(79,184,119,.14); }
.hub-stats .hub-stat:nth-child(4) .hs-ic{ background:rgba(140,160,180,.16); }

/* hub header banner — a single cohesive green gradient (was navy→green→purple) */
.hub-head{ position:relative; overflow:hidden; padding:22px 24px; border-radius:20px;
  background:linear-gradient(135deg,#15452e 0%,#0f3123 55%,#122a2c 100%);
  border:1px solid var(--line); }
.hub-head h2{ color:#fff; position:relative; z-index:1; }
.hub-head p{ color:rgba(255,255,255,.72) !important; position:relative; z-index:1; }
.hub-art{ position:absolute; right:14px; top:50%; transform:translateY(-50%); z-index:0;
  font-size:64px; opacity:.9; letter-spacing:6px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
@media (max-width:560px){ .hub-art{ font-size:40px; right:8px; opacity:.55; } }

/* ---- more emoji / colour touches ---- */
.hc-emo{ margin-right:6px; font-size:16px; }
.hub-card .hc-head b{ display:flex; align-items:center; }
/* colour the mini-board frame per card */
.hub-cards .hub-card:nth-child(1) .miniboard{ box-shadow:0 0 0 2px rgba(79,184,119,.35); }
.hub-cards .hub-card:nth-child(2) .miniboard{ box-shadow:0 0 0 2px rgba(79,184,119,.22); }
.hub-cards .hub-card:nth-child(3) .miniboard{ box-shadow:0 0 0 2px rgba(233,178,58,.30); }
/* section headings across tabs get a soft accent underline */
.card > h3{ position:relative; }

/* ---- daily puzzle + streak calendar (v-daily) ---- */
.pz-daily{ background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:0 0 12px; }
.pzd-main{ display:flex; align-items:center; gap:10px; }
.pzd-info{ flex:1; min-width:0; }
.pzd-title{ font-weight:800; font-size:15px; }
.pzd-sub{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4; }
.pzd-btn{ flex:0 0 auto; border:none; border-radius:10px; padding:9px 16px; font-weight:800; cursor:pointer;
  background:var(--accent); color:#08110b; transition:transform .08s ease; }
.pzd-btn:active{ transform:scale(.96); }
.pzd-btn.done{ background:var(--card2); color:var(--muted); cursor:default; }
.pzd-streak{ margin:10px 0 8px; font-weight:800; font-size:13px; color:#ffb454; }
.pz-cal{ border-top:1px solid var(--line); padding-top:8px; }
.cal-head,.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-dow{ text-align:center; font-size:10px; color:var(--faint); padding:2px 0; }
.cal-cell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:11px;
  color:var(--muted); border-radius:6px; }
.cal-cell.empty{ visibility:hidden; }
.cal-cell.solved{ background:var(--accent); color:#08110b; font-weight:800; }
.cal-cell.today{ outline:2px solid var(--accent); outline-offset:-2px; color:var(--ink); font-weight:800; }
.cal-cell.today.solved{ outline-color:#fff; }
.cal-cell.frozen{ background:rgba(120,180,240,.22); color:#bcdcff; font-weight:800; }
/* streak milestone chips + next-target hint */
.pzd-miles{ margin-left:8px; }
.pzd-badge{ display:inline-block; margin-left:4px; padding:1px 7px; border-radius:var(--r-pill);
  background:rgba(233,178,58,.18); color:#f5c451; font-size:11.5px; font-weight:800; }
.pzd-next{ margin-left:6px; color:var(--muted); font-weight:600; font-size:11.5px; }

/* ---- home 'do this now' single CTA (v-today) ---- */
.hub-today{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  border:none; border-radius:16px; padding:16px 18px; margin:0 0 14px;
  background:linear-gradient(135deg, var(--accent) 0%, #3fa268 100%); color:#08130c;
  box-shadow:0 6px 20px rgba(79,184,119,.28); transition:transform .1s ease, box-shadow .1s ease; }
.hub-today:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(79,184,119,.36); }
.hub-today:active{ transform:translateY(0) scale(.99); }
.hub-today .ht-ic{ font-size:30px; line-height:1; flex:0 0 auto; }
.hub-today .ht-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.hub-today .ht-k{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.72; }
.hub-today .ht-txt b{ font-size:18px; font-weight:900; line-height:1.2; }
.hub-today .ht-sub{ font-size:12.5px; font-weight:600; opacity:.82; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-today .ht-go{ flex:0 0 auto; font-size:16px; font-weight:900; opacity:.8; }
/* ADD3: resume strip — mirrors hub-today shape but a quieter "continue" surface */
.hub-resume{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line2); border-radius:16px; padding:13px 16px; margin:0 0 12px;
  background:var(--panel2); color:var(--ink); transition:transform .1s ease, border-color .15s ease; }
.hub-resume:hover{ transform:translateY(-1px); border-color:var(--accent); }
.hub-resume .ht-ic{ font-size:26px; line-height:1; flex:0 0 auto; }
.hub-resume .ht-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.hub-resume .ht-k{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.hub-resume .ht-txt b{ font-size:15px; font-weight:800; line-height:1.2; }
.hub-resume .ht-sub{ font-size:12px; color:var(--muted); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-resume .ht-go{ flex:0 0 auto; font-size:18px; color:var(--muted); }
/* FEAT7: Cosmetics collection */
#cosmeticsCard .cos-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
#cosmeticsCard .cos-count{ font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
#cosmeticsCard .cos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:9px; }
#cosmeticsCard .cos-swatch{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px; border-radius:var(--r-md);
  border:1px solid var(--line2); background:var(--panel2); color:var(--ink); cursor:pointer; transition:.15s; }
#cosmeticsCard .cos-swatch:hover:not(:disabled){ border-color:var(--accent); }
#cosmeticsCard .cos-swatch.on{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(79,184,119,.25); }
#cosmeticsCard .cos-swatch.locked{ opacity:.55; cursor:not-allowed; }
#cosmeticsCard .cos-mini{ display:grid; grid-template-columns:1fr 1fr; width:38px; height:38px; border-radius:6px; overflow:hidden; }
#cosmeticsCard .cos-mini span{ display:block; }
#cosmeticsCard .cos-lbl{ font-size:11px; font-weight:700; }
/* FEAT4: Repertoire */
.rep-card{ margin-top:12px; }
.rep-card .rep-head{ margin-bottom:8px; }
.rep-card .rep-list{ display:flex; flex-direction:column; gap:7px; }
.rep-card .rep-row{ display:flex; align-items:center; gap:8px; }
.rep-card .rep-name{ flex:1; font-size:var(--fs-sm); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rep-card .rep-len{ flex:0 0 auto; font-size:11px; color:var(--muted); }
.rep-card .rep-go{ flex:0 0 auto; border:1px solid var(--accent); color:var(--accent); background:transparent; border-radius:var(--r-pill);
  padding:5px 12px; font-weight:800; font-size:12px; cursor:pointer; }
.rep-card .rep-del{ flex:0 0 auto; border:none; background:transparent; color:var(--faint); cursor:pointer; font-size:14px; }
/* FEAT6: Rivals */
#rivalsCard .rv2-head{ margin-bottom:10px; }
#rivalsCard .rv2-list{ display:flex; flex-direction:column; gap:7px; }
#rivalsCard .rv2-row{ display:flex; align-items:center; gap:10px; }
#rivalsCard .rv2-ava{ flex:0 0 auto; width:30px; height:30px; border-radius:var(--r-pill); background:var(--elevated);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
#rivalsCard .rv2-name{ flex:1; font-size:var(--fs-sm); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rivalsCard .rv2-rec{ flex:0 0 auto; font-weight:800; font-variant-numeric:tabular-nums; font-size:var(--fs-sm); }
#rivalsCard .rv2-rec.win{ color:var(--accent); } #rivalsCard .rv2-rec.loss{ color:var(--bad); } #rivalsCard .rv2-rec.even{ color:var(--muted); }
/* FEAT8: Chess Personality */
#personalityCard .pers-head{ margin-bottom:10px; }
#personalityCard .pers-body{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
#personalityCard .pers-emoji{ font-size:40px; flex:0 0 auto; }
#personalityCard .pers-txt{ display:flex; flex-direction:column; }
#personalityCard .pers-txt b{ font-size:var(--fs-md); }
#personalityCard .pers-txt span{ font-size:var(--fs-sm); color:var(--muted); }
#personalityCard .pers-share{ font-size:var(--fs-sm); }
/* FEAT1: Blunder Deck */
.blunder-deck{ margin:0 0 12px; }
.blunder-deck .bd-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.blunder-deck .bd-count{ font-size:var(--fs-sm); color:var(--muted); }
.blunder-deck .bd-go{ width:100%; border:none; border-radius:var(--r-md); padding:12px; font-weight:800; font-size:14px; cursor:pointer;
  background:linear-gradient(135deg,#e0526b,#b8324a); color:#fff; box-shadow:0 6px 16px -8px #b8324a; min-height:44px; }
.blunder-deck .bd-clear{ font-size:var(--fs-sm); color:var(--muted); text-align:center; padding:6px; }
/* FEAT5: Study Path */
#studyPath .sp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
#studyPath .sp-count{ font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
#studyPath .sp-next{ width:100%; border:none; border-radius:var(--r-md); padding:12px; font-weight:800; font-size:14px; cursor:pointer;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#08130c; margin:0 0 12px; min-height:44px; }
#studyPath .sp-done{ font-size:var(--fs-sm); color:var(--accent); font-weight:800; text-align:center; margin:0 0 12px; }
#studyPath .sp-list{ display:flex; flex-direction:column; gap:7px; }
#studyPath .sp-row{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:7px 8px; border-radius:var(--r-sm); transition:background .12s; }
#studyPath .sp-row:hover{ background:var(--panel2); }
#studyPath .sp-row.cur{ background:var(--panel2); outline:1px solid var(--accent); }
#studyPath .sp-row.done{ opacity:.6; }
#studyPath .sp-ic{ font-size:16px; flex:0 0 auto; width:22px; text-align:center; }
#studyPath .sp-name{ flex:0 0 auto; min-width:96px; font-size:var(--fs-sm); font-weight:700; }
#studyPath .sp-bar{ flex:1; height:6px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; }
#studyPath .sp-fill{ display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--accent2),var(--accent)); }
#studyPath .sp-pct{ flex:0 0 auto; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; width:34px; text-align:right; }
/* MODE1: Puzzle Storm */
.pz-storm{ display:block; width:100%; margin:0 0 8px; padding:12px 14px; border:none; border-radius:var(--r-md);
  background:linear-gradient(135deg,#ffb347,#ff7a45); color:#2a1500; font-weight:800; font-size:14px; cursor:pointer;
  box-shadow:0 6px 16px -8px #ff7a45; transition:transform .1s ease; min-height:44px; }
.pz-storm:hover{ transform:translateY(-1px); }
.pz-arena{ display:block; width:100%; margin:0 0 8px; padding:12px 14px; border:none; border-radius:var(--r-md);
  background:linear-gradient(135deg,#c99320,#e9b23a); color:#2a1f00; font-weight:800; font-size:14px; cursor:pointer;
  box-shadow:0 6px 16px -8px #c99320; transition:transform .1s ease; min-height:44px; }
.pz-arena:hover{ transform:translateY(-1px); }
body.storm-on #pzArenaBtn{ display:none !important; }
.arena-list{ display:flex; flex-direction:column; gap:6px; max-height:56vh; overflow-y:auto; }
.arena-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); background:var(--panel2); }
.arena-row .arena-rk{ flex:0 0 auto; width:26px; text-align:center; font-weight:900; color:var(--accent); font-variant-numeric:tabular-nums; }
.arena-row .arena-nm{ flex:1; font-size:var(--fs-sm); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arena-row .arena-ms{ flex:0 0 auto; font-weight:800; font-variant-numeric:tabular-nums; }
/* MODE2: Correspondence */
.corr-new-row{ display:flex; gap:8px; margin:0 0 10px; }
.corr-new-row input{ flex:1; min-width:0; }
.corr-list{ display:flex; flex-direction:column; gap:7px; }
.corr-row{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line2); background:var(--panel); color:var(--ink); border-radius:var(--r-md); padding:10px 12px; min-height:44px; transition:.15s; }
.corr-row:hover{ border-color:var(--accent); }
.corr-row .corr-opp{ flex:1; font-weight:700; font-size:var(--fs-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.corr-row .corr-n{ flex:0 0 auto; font-size:11px; color:var(--muted); }
.corr-tag{ flex:0 0 auto; font-size:11px; font-weight:800; padding:3px 9px; border-radius:var(--r-pill); }
.corr-tag.turn{ background:var(--accent); color:#08130c; }
.corr-tag.wait{ background:var(--elevated); color:var(--muted); }
.corr-tag.open{ background:var(--gold); color:#2a1f00; }
.corr-tag.done{ background:transparent; color:var(--faint); }
.corr-info{ font-size:var(--fs-sm); color:var(--muted); text-align:center; }
#corrBoard{ width:min(400px, 86vw); }
/* 3-player Trident chess (hotseat) */
.tri-game{ position:fixed; inset:0; z-index:1100; background:var(--bg); display:flex; flex-direction:column;
  align-items:center; padding:12px calc(12px + env(safe-area-inset-right,0)) calc(12px + env(safe-area-inset-bottom,0)) calc(12px + env(safe-area-inset-left,0)); overflow:auto; }
.tri-game.hidden{ display:none; }
.tri-top{ width:min(460px,96vw); display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.tri-info{ font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px; }
.tri-info .tri-turn{ font-size:20px; line-height:1; }
.tri-info .tri-c0{ color:#e8ecf2; } .tri-info .tri-c1{ color:#9aa6bd; } .tri-info .tri-c2{ color:#6f80c4; }
.tri-actions{ display:flex; gap:8px; }
#triBoard{ width:min(460px,96vw); height:auto; display:block; touch-action:manipulation; }
#triBoard polygon[data-tri]{ cursor:pointer; }
.tri-help{ font-size:12px; color:var(--muted); text-align:center; margin-top:8px; max-width:460px; line-height:1.5; }
.storm-hud{ display:flex; gap:10px; justify-content:center; align-items:center; margin:0 0 10px; padding:9px 12px;
  border-radius:var(--r-pill); background:linear-gradient(135deg,#ffb347,#ff7a45); color:#2a1500; font-weight:900; font-variant-numeric:tabular-nums; }
.storm-hud .sh-time.low{ color:#a11; animation:pulseHint 1s ease-in-out infinite; }
.storm-hud .sh-score{ font-size:17px; }
/* while a Storm run is on, hide the puzzle browse chrome to keep focus on the board */
body.storm-on #pzDaily, body.storm-on #pzRecommend, body.storm-on #pzStormBtn,
body.storm-on .pz-rating-line, body.storm-on #pzCats, body.storm-on #pzGrid,
body.storm-on .controls{ display:none !important; }
/* MODE3: Survival Ladder + special-modes area */
.ai-modes{ margin:14px 0 4px; padding:12px 14px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); }
.ai-modes-h{ font-size:var(--fs-sm); font-weight:800; color:var(--muted); margin-bottom:8px; }
.ai-mode-btn{ display:block; width:100%; text-align:left; padding:12px 14px; margin:0 0 8px; border:1px solid var(--line2);
  border-radius:var(--r-md); background:var(--panel); color:var(--ink); font-weight:700; font-size:13.5px; cursor:pointer; min-height:44px; transition:.15s; }
.ai-mode-btn:hover{ border-color:var(--accent); transform:translateY(-1px); }
.ai-mode-btn:last-child{ margin-bottom:0; }
/* MODE4: Piece Odds */
.odds-h{ font-size:var(--fs-sm); font-weight:800; color:var(--muted); margin:12px 0 8px; }
.odds-row{ display:flex; gap:6px; flex-wrap:wrap; }
.odds-btn{ flex:1 1 auto; min-width:56px; min-height:44px; padding:9px 8px; border:1px solid var(--line2); border-radius:var(--r-sm);
  background:var(--panel); color:var(--ink); font-weight:700; font-size:12.5px; cursor:pointer; min-height:40px; transition:.15s; }
.odds-btn:hover{ border-color:var(--accent); }
.odds-btn.hard{ border-color:rgba(239,90,82,.4); color:#e88; }
/* MODE6: Boss Gauntlet */
.boss-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-height:56vh; overflow-y:auto; }
.boss-cell{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 8px; border-radius:var(--r-md);
  border:1px solid var(--line2); background:var(--panel2); color:var(--ink); cursor:pointer; transition:.15s; min-height:88px; }
.boss-cell:hover:not(:disabled){ border-color:var(--accent); transform:translateY(-1px); }
.boss-cell.current{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(79,184,119,.25); }
.boss-cell.cleared{ opacity:.7; }
.boss-cell.locked{ opacity:.5; cursor:not-allowed; }
.boss-cell .boss-ic{ font-size:28px; }
.boss-cell .boss-name{ font-size:12px; font-weight:800; text-align:center; }
.boss-cell .boss-lv{ font-size:11px; color:var(--muted); }
/* ADD4: first-run starter checklist on the home hub */
.hub-starter{ background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; margin:0 0 14px; }
.hub-starter .st-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.hub-starter .st-head b{ font-size:var(--fs-md); }
.hub-starter .st-sub{ font-size:var(--fs-xs); color:var(--muted); }
.hub-starter .st-list{ display:flex; flex-direction:column; gap:8px; }
.hub-starter .st-step{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:var(--r-md); padding:11px 13px; min-height:44px; transition:.15s; }
.hub-starter .st-step:hover{ border-color:var(--accent); }
.hub-starter .st-step.done{ opacity:.6; }
.hub-starter .st-step.done .st-lbl{ text-decoration:line-through; }
.hub-starter .st-ck{ flex:0 0 auto; width:24px; height:24px; border-radius:var(--r-pill); background:var(--elevated);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
.hub-starter .st-step.done .st-ck{ background:transparent; }
.hub-starter .st-ic{ font-size:18px; flex:0 0 auto; }
.hub-starter .st-lbl{ font-size:var(--fs-sm); font-weight:700; }
/* ADD2 + ADD5: profile identity + progression ladder */
.profile-panel{ margin:0 0 14px; }
.profile-panel .pp-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.profile-panel .pp-ava{ flex:0 0 auto; width:46px; height:46px; border-radius:var(--r-pill); font-size:20px; font-weight:900;
  display:flex; align-items:center; justify-content:center; color:#08130c; background:linear-gradient(150deg,var(--accent2),var(--accent-deep)); }
.profile-panel .pp-id{ display:flex; flex-direction:column; }
.profile-panel .pp-id b{ font-size:var(--fs-md); }
.profile-panel .pp-id span{ font-size:var(--fs-sm); color:var(--muted); }
.profile-panel .pp-ladder{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.profile-panel .pp-meter{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); text-align:center; }
.profile-panel .pp-m-ic{ font-size:16px; }
.profile-panel .pp-m-val{ font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; }
.profile-panel .pp-m-lbl{ font-size:10px; color:var(--muted); }
@media (max-width:520px){ .profile-panel .pp-m-lbl{ font-size:9px; } .profile-panel .pp-ladder{ gap:5px; } }
/* ADD8: improvement journey */
#journeyCard .jr-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
#journeyCard .jr-head b{ font-size:var(--fs-md); }
#journeyCard .jr-sub{ font-size:var(--fs-sm); color:var(--muted); }
#journeyCard .jr-steps{ display:flex; align-items:stretch; gap:6px; overflow-x:auto; padding-bottom:4px; }
#journeyCard .jr-step{ flex:1 1 0; min-width:92px; display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; border:1px solid var(--line); background:var(--panel2); color:var(--ink); border-radius:var(--r-md); padding:11px 7px; transition:.15s; }
#journeyCard .jr-step:hover{ border-color:var(--accent); transform:translateY(-1px); }
#journeyCard .jr-n{ width:20px; height:20px; border-radius:var(--r-pill); background:var(--accent); color:#08130c;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:11px; }
#journeyCard .jr-ic{ font-size:20px; }
#journeyCard .jr-lbl{ font-size:11px; font-weight:700; text-align:center; line-height:1.25; }
#journeyCard .jr-arrow{ flex:0 0 auto; align-self:center; color:var(--faint); font-weight:900; }
button.user-chip{ cursor:pointer; font:inherit; line-height:1.2; }
/* FIX4: inline AI/온라인 segmented switcher at the top of the play sections */
.play-switch{ display:flex; gap:4px; padding:4px; margin:0 0 14px; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r-pill); }
.play-switch button{ flex:1; border:none; background:transparent; color:var(--muted); cursor:pointer;
  font-weight:800; font-size:var(--fs-sm); padding:9px 10px; border-radius:var(--r-pill); transition:.15s; min-height:40px; }
.play-switch button.on{ background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#08130c; box-shadow:0 4px 12px -6px var(--accent); }
body.ingame .play-switch{ display:none; }
/* ADD7: cold-start warming banner — fixed, non-blocking, above the bottom nav */
.warm-banner{ position:fixed; left:50%; transform:translateX(-50%); bottom:80px; z-index:60;
  max-width:calc(100vw - 24px); padding:9px 15px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600;
  background:rgba(20,26,20,.96); color:#d7f2e2; border:1px solid #2f7d4d; box-shadow:0 10px 28px -10px rgba(0,0,0,.7);
  text-align:center; line-height:1.4; }
.warm-banner.hidden{ display:none; }
@media (min-width:761px){ .warm-banner{ bottom:24px; } }

/* ---- home XP / level bar (v-xp) ---- */
.hub-xp{ margin:0 0 14px; }
.hub-xp:empty{ display:none; }
.hub-xp .xp-row{ display:flex; align-items:center; gap:10px; }
.hub-xp .xp-lv{ flex:0 0 auto; font-weight:900; font-size:13px; color:var(--accent);
  background:rgba(79,184,119,.14); border-radius:var(--r-pill); padding:3px 11px; }
.hub-xp .xp-bar{ flex:1; height:9px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden; }
.hub-xp .xp-fill{ height:100%; background:linear-gradient(90deg,#4fb877,#7fd6a3); border-radius:var(--r-pill); transition:width .4s ease; }
.hub-xp .xp-num{ flex:0 0 auto; font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums; }

/* ---- daily quests (v-quest) ---- */
.hub-quests{ background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:0 0 14px; }
.hub-quests:empty{ display:none; }
.hub-quests .hq-head{ display:flex; align-items:center; justify-content:space-between; font-size:13px; margin-bottom:8px; }
.hub-quests .hq-done{ color:var(--accent); font-weight:800; font-size:12px; }
.hub-quests .hq-count{ color:var(--faint); font-weight:800; font-size:12px; font-variant-numeric:tabular-nums; }
.hub-quests .hq-track{ height:6px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; margin:0 0 10px; }
.hub-quests .hq-track-fill{ height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--accent2),var(--accent)); transition:width .45s cubic-bezier(.4,0,.2,1); }
.hub-quests .hq-alldone{ font-size:12.5px; font-weight:800; color:var(--accent); margin:0 0 8px; }
.hub-quests .hq-list{ display:flex; flex-direction:column; gap:6px; }
.hub-quests .hq-item{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); }
.hub-quests .hq-item.ok{ color:var(--ink); }
.hub-quests .hq-ic{ width:20px; text-align:center; }
.hub-quests .hq-txt{ flex:1; }
.hub-quests .hq-prog{ font-weight:800; font-variant-numeric:tabular-nums; color:var(--faint); }
.hub-quests .hq-item.ok .hq-prog{ color:var(--accent); }

/* ---- weakness report (v-weak) ---- */
/* .weak-empty shares the .hist-empty note style (defined once above) */
.weak-head{ font-size:13px; margin-bottom:8px; color:var(--muted); }
.weak-list{ display:flex; flex-direction:column; gap:8px; }
.weak-row{ display:flex; align-items:center; gap:10px; }
.weak-name{ flex:0 0 auto; font-weight:800; font-size:14px; }
.weak-count{ flex:1; font-size:12.5px; color:#e0864f; font-weight:700; }
.weak-cta{ flex:0 0 auto; border:none; border-radius:9px; padding:7px 13px; font-weight:800; font-size:12.5px;
  cursor:pointer; background:var(--accent); color:#08130c; }
.weak-cta:active{ transform:scale(.97); }

/* ---- online "your turn" board pulse (v-cue) ---- */
@keyframes myturnPulse { 0%{ box-shadow:0 0 0 0 rgba(79,184,119,.0); } 25%{ box-shadow:0 0 0 4px rgba(79,184,119,.55); } 100%{ box-shadow:0 0 0 0 rgba(79,184,119,0); } }
.myturn-pulse{ animation:myturnPulse 1s ease-out 2; }

/* ---- accessibility: respect reduced-motion (decorative animations only) ---- */
@media (prefers-reduced-motion: reduce) {
  #confetti, .myturn-pulse{ animation:none !important; }
  .result-box, .hub-today, .pzd-btn, .play-mode, .weak-cta{ transition:none !important; }
  .shake{ animation:none !important; }
  /* ADD10: also calm the coach avatar, low-time clock, puzzle flash, meters */
  #coachAvatar, .coach-av, .coach-av.speaking, .pv-clock, .pv-clock.low, .pz-flash,
  .pulse-hint, .hq-track-fill, .lg-fill, .xp-fill, .hq-fill{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto !important; }
}

/* ADD10: a visible keyboard-focus ring on EVERY interactive control (was only on
   inputs / seg-btn / sliders), so keyboard + switch users can see where they are. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
.myseg:focus-visible, .play-mode:focus-visible, .diflevel:focus-visible,
.hub-act:focus-visible, .bottomnav button:focus-visible, .tabs button:focus-visible{
  outline:2px solid var(--accent2); outline-offset:2px; border-radius:8px;
}
/* ADD10: enforce a comfortable minimum tap target on the smallest controls */
.iconbtn{ min-width:40px; min-height:40px; }
.fr-del, .fr-play, .fr-challenge, .lb-tab, .pz-cats button{ min-height:40px; }

/* ---- learn: tactic/endgame lessons (v-learn2) ---- */
.latk{ box-shadow:inset 0 0 0 3px rgba(220,80,60,.9); }
.learn-sel .learn-div{ flex-basis:100%; width:100%; font-size:11px; font-weight:800; color:var(--faint);
  text-transform:uppercase; letter-spacing:.06em; margin:8px 2px 0; }

/* ---- 대국(play) mode picker ---- */
.play-picker{ display:flex; flex-direction:column; gap:10px; max-width:520px; }
.play-mode{ display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:14px; padding:15px 16px; background:var(--panel2);
  transition:transform .08s ease, border-color .12s ease; }
.play-mode:hover{ transform:translateY(-1px); border-color:rgba(79,184,119,.5); }
.play-mode:active{ transform:translateY(0) scale(.99); }
.play-mode .pm-ic{ font-size:26px; width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:12px; background:rgba(79,184,119,.16); }
.play-mode:nth-child(2) .pm-ic{ background:rgba(233,178,58,.16); }
.play-mode:nth-child(3) .pm-ic{ background:rgba(79,184,119,.12); }
.play-mode:nth-child(4) .pm-ic{ background:rgba(140,160,180,.16); }
.play-mode .pm-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.play-mode .pm-txt b{ font-size:16px; font-weight:800; color:var(--ink); }
.play-mode .pm-txt span{ font-size:12.5px; color:var(--muted); }
.play-mode .pm-go{ flex:0 0 auto; font-size:20px; font-weight:800; color:var(--faint); }

/* ---- 나(my) segmented sub-nav ---- */
.my-subnav{ display:flex; gap:6px; margin:0 0 14px; background:var(--panel2); border:1px solid var(--line);
  border-radius:12px; padding:4px; }
.my-subnav:empty{ display:none; }
.myseg{ flex:1; border:none; background:transparent; color:var(--muted); font-weight:700; font-size:13px;
  padding:8px 6px; border-radius:9px; cursor:pointer; transition:background .12s ease, color .12s ease; }
.myseg.on{ background:var(--accent); color:#08130c; }
.myseg:not(.on):hover{ color:var(--ink); }

/* signup consent (terms + privacy) */
.auth-consent{ display:flex; align-items:flex-start; gap:8px; margin:10px 0 2px; cursor:pointer; }
.auth-consent input{ margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--accent); }
.auth-consent .auth-consent-txt{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.auth-consent a{ color:var(--accent); text-decoration:underline; }

/* skill modal skip link */
.skill-skip{ display:block; margin:14px auto 0; border:none; background:transparent; color:var(--muted);
  font-size:13px; cursor:pointer; text-decoration:underline; }
.skill-skip:hover{ color:var(--ink); }

/* ---- quick-match empty-lobby fallback (v-fb) ---- */
.og-fallback{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 0;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.og-fallback .ogfb-txt{ flex:1; min-width:160px; font-size:13px; color:var(--ink); }
.og-fallback .ogfb-note{ flex-basis:100%; font-size:11.5px; color:var(--muted); }
.og-fallback .ogfb-note:empty{ display:none; }
.og-fallback #ogFallbackBtn{ flex:0 0 auto; border:none; border-radius:10px; padding:9px 15px;
  font-weight:800; cursor:pointer; }


/* ---- play-screen design pass (council items) ---- */
/* [8] check flag uses the palette's danger token, not a one-off hex */
.chk-flag{ color:var(--bad); font-weight:800; }
/* [15] check is also a SHAPE, not only a red glow (red/green is the worst
   colour-blind pair, and our dark squares are green) */
.sq.check{ position:relative; }
.sq.check::after{ content:""; position:absolute; inset:8%; border-radius:50%;
  border:3px solid var(--bad); pointer-events:none; animation:checkPulse .5s ease-out 3; }
@keyframes checkPulse { 0%{ transform:scale(.82); opacity:.35 } 60%{ transform:scale(1); opacity:1 } 100%{ transform:scale(1); opacity:.9 } }
/* [16] clock urgency has a second, sharper stage instead of one 60s cliff */
.pv-clock.active.critical{ background:linear-gradient(180deg,#ff5147,#a81410); box-shadow:0 2px 0 #7a1210;
  animation:clockCritical .6s ease-in-out infinite; }
@keyframes clockCritical { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }
/* [10] the self-handicap group reads as a distinct, riskier zone */
.odds-group-hard{ margin-top:var(--space-4); padding:var(--space-2); border-radius:var(--r-sm);
  background:rgba(239,90,82,.07); border:1px solid rgba(239,90,82,.22); }
/* [28] one shared width for both side columns (was 430px vs 420px inline) */
.side-col{ flex:1; min-width:300px; max-width:430px; }
/* [19] opponent avatars get their own colour instead of a grey placeholder */
.pv-ava.tinted{ color:#fff; font-weight:800; }
/* [30] loss entrance */
@keyframes resultShake { 10%,90%{ transform:translateX(-1px) } 20%,80%{ transform:translateX(2px) }
  30%,50%,70%{ transform:translateX(-3px) } 40%,60%{ transform:translateX(3px) } 100%{ transform:none } }
@media (prefers-reduced-motion: reduce){
  .result-box.loss, .pv-turn.active, .pv-clock.active.critical, .sq.check::after{ animation:none !important; }
}
/* [22] on phones the chat docks to the bottom instead of pushing the board up */
@media (max-width: 560px){
  .ogchat{ position:fixed; left:0; right:0; bottom:0; width:100%; z-index:60; max-height:52vh;
    border-radius:14px 14px 0 0; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  .ogchat-log{ max-height:34vh; overflow-y:auto; }
}
/* [23] landscape phones: board beside the controls, and dvh so the URL bar
   resizing doesn't jump the layout */
@supports (height: 100dvh){
  body.ingame .cols{ min-height:100dvh; }
}
@media (max-height: 520px) and (orientation: landscape){
  body.ingame .cols{ flex-direction:row; align-items:flex-start; gap:10px; min-height:auto; }
  body.ingame .boardwrap{ flex:0 0 auto; }
  .cboard{ width:min(88vh, 92vw); }
  body.ingame .cols > div:first-child{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
}

/* [3] rating is context, not the headline */
.ogr-compact{ margin-top:var(--space-3); }
.ogr-compact .ogr-main{ display:flex; align-items:baseline; gap:8px; }
.ogr-compact #ogRating{ font-size:20px; }
/* [9][21] small status badges */
.pill-badge{ display:inline-block; padding:2px 8px; border-radius:var(--r-pill); font-size:11px;
  font-weight:800; background:var(--elevated); color:var(--muted); border:1px solid var(--line2); vertical-align:middle; }
.pill-badge.beta{ background:rgba(233,178,58,.14); color:var(--c-gold-hi,#e9b23a); border-color:rgba(233,178,58,.35); }
/* [21] special modes collapse; the 3 cross variants share one compact row */
.ai-modes-wrap{ margin-top:var(--space-3); border-top:1px solid var(--line); padding-top:var(--space-2); }
.ai-modes-wrap > summary{ cursor:pointer; list-style:none; padding:6px 0; }
.ai-modes-wrap > summary::-webkit-details-marker{ display:none; }
.ai-modes-wrap > summary::after{ content:" ▾"; color:var(--muted); }
.ai-modes-wrap[open] > summary::after{ content:" ▴"; }
.cx-modes-h{ margin-top:var(--space-3); font-size:var(--fs-sm); font-weight:800; color:var(--muted); }
.cx-modes-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
/* [11] narrow phones: two even columns instead of ragged wrapping */
@media (max-width: 400px){ .odds-row, .cx-modes-row{ display:grid; grid-template-columns:1fr 1fr; } }

/* =========================================================================
   PLAY SCREENS — structural overhaul (10 large changes)
   ========================================================================= */

/* [대형1] 매칭 전용 전체화면 로비 — 설정 화면에 작은 글씨로 "찾는 중"이 아니라
   화면 전체가 "지금 상대를 찾고 있다"는 하나의 상태가 된다. */
.lobby-screen{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%, var(--panel2) 0%, var(--bg) 70%); padding:24px; }
.lobby-inner{ text-align:center; max-width:420px; width:100%; }
.lobby-radar{ position:relative; width:132px; height:132px; margin:0 auto 22px; display:grid; place-items:center; }
.lobby-radar span{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent);
  opacity:0; animation:radarPing 2.4s cubic-bezier(.2,.7,.4,1) infinite; }
.lobby-radar span:nth-child(2){ animation-delay:.8s; }
.lobby-radar span:nth-child(3){ animation-delay:1.6s; }
.lobby-radar b{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--elevated); border:1px solid var(--line2); font-size:26px; font-weight:800; }
@keyframes radarPing{ 0%{ transform:scale(.42); opacity:.85 } 100%{ transform:scale(1); opacity:0 } }
.lobby-title{ font-size:22px; font-weight:900; margin:0 0 6px; }
.lobby-sub{ color:var(--muted); font-size:var(--fs-sm); min-height:20px; }
.lobby-meta{ margin-top:10px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.lobby-actions{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.lobby-actions button{ width:100%; min-height:48px; }

/* [대형3] 온라인 진입 = 모드 타일 그리드 (긴 스택형 카드 대신) */
.mode-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:var(--space-2) 0; }
.mode-tile{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:14px 13px; min-height:96px; text-align:left; border:1px solid var(--line2); border-radius:var(--r-md);
  background:var(--elevated); color:var(--ink); cursor:pointer; transition:transform .12s, border-color .12s; }
.mode-tile:hover{ border-color:var(--accent); transform:translateY(-2px); }
.mode-tile .mt-ico{ font-size:22px; line-height:1; }
.mode-tile .mt-name{ font-weight:800; font-size:15px; }
.mode-tile .mt-desc{ color:var(--muted); font-size:12px; line-height:1.35; }
.mode-tile .pill-badge{ position:absolute; top:10px; right:10px; }
.mode-tile.primary-tile{ grid-column:1 / -1; min-height:auto; flex-direction:row; align-items:center; gap:12px;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); border-color:transparent; color:#fff; }
.mode-tile.primary-tile .mt-ico{ font-size:26px; }
.mode-tile.primary-tile .mt-name{ font-size:17px; }
.mode-tile.primary-tile .mt-desc{ color:rgba(255,255,255,.85); }
.mode-tile.primary-tile .mt-name, .mode-tile.primary-tile .mt-desc{ display:block; }
.mode-tile.primary-tile > span:not(.mt-ico){ margin-right:auto; }

/* [대형2] AI 상대 = 숫자 난이도가 아니라 "봇 카드" 그리드 */
.diflevels{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; }
.diflevel{ display:flex !important; flex-direction:column; align-items:center; gap:3px; padding:12px 8px !important;
  border-radius:var(--r-md) !important; min-height:104px; justify-content:center; }
.diflevel .dif-face{ font-size:30px; line-height:1.1; }
.diflevel b{ font-size:13px; }
.diflevel span:last-child{ font-size:11px; color:var(--muted); }
.diflevel.active{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.28); }

/* [대형10] 세부 설정은 접이식 시트로 (기본 화면은 상대 고르기 + 시작뿐) */
.adv-sheet{ margin-top:var(--space-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:0 12px; }
.adv-sheet > summary{ cursor:pointer; list-style:none; padding:11px 0; font-weight:700; font-size:var(--fs-sm); color:var(--muted); }
.adv-sheet > summary::-webkit-details-marker{ display:none; }
.adv-sheet > summary::after{ content:" ▾"; }
.adv-sheet[open] > summary::after{ content:" ▴"; }
.adv-sheet[open]{ padding-bottom:12px; }

/* [대형5] 턴 + 컨트롤을 하나의 HUD 블록으로 묶는다 */
.game-hud{ width:var(--board); max-width:96vw; display:flex; flex-direction:column; gap:8px; }
.game-hud .turn{ margin:0; }

/* [대형6] 플레이어 바 재설계 — 이름/레이팅은 쌓고, 시계는 큰 칩, 활성 쪽은 들어올림 */
.pbar{ padding:9px 12px; border-radius:var(--r-md); transition:border-color .15s, transform .15s, box-shadow .15s; }
.pbar .pv-ava{ width:38px; height:38px; font-size:16px; border-radius:12px; }
.pbar .pv-name{ font-weight:800; font-size:14px; }
.pbar .pv-clock{ font-size:19px !important; padding:7px 12px !important; border-radius:12px; letter-spacing:.5px; }
.pbar.turn-on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 8px 20px rgba(0,0,0,.22); transform:translateY(-1px); }

/* [대형8] 인게임은 완전히 보드 우선 — 나머지는 전부 보조 */
body.ingame .statstrip, body.ingame .play-switch{ display:none !important; }
body.ingame .cols{ padding:10px 10px 92px; }
body.ingame .game-hud{ gap:6px; }

/* [대형4] 인게임 컨트롤은 엄지 닿는 하단 고정 바 */
@media (max-width: 900px){
  body.ingame .controls{ position:fixed; left:0; right:0; bottom:0; z-index:70; margin:0;
    display:flex; justify-content:space-around; gap:0; padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter:blur(12px);
    border-top:1px solid var(--line2); }
  body.ingame .controls .ghost{ flex:1; min-height:48px !important; border:0 !important; background:transparent !important;
    border-radius:10px !important; font-size:12px !important; padding:6px 2px !important; }
  body.ingame .controls .ghost:active{ background:var(--elevated) !important; }
  body.ingame .ogchat{ bottom:64px; }
}

/* [대형9] 기보 = 스크럽 가능한 타임라인 */
.movenav{ width:var(--board); max-width:96vw; align-items:center; gap:6px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 6px; }
.movestrip{ scroll-behavior:smooth; }
.movestrip .mv{ scroll-snap-align:center; }
.movestrip{ scroll-snap-type:x proximity; }
.movestrip .mv.active{ background:var(--accent); color:#fff; border-radius:var(--r-pill); }

/* [대형7] 결과는 카드가 아니라 화면을 접수하는 시트 */
.result-box{ width:min(460px, 94vw); }
@media (max-width: 560px){
  #resultOverlay .result-box{ position:fixed; left:0; right:0; bottom:0; width:100%; max-width:none;
    border-radius:20px 20px 0 0; padding-bottom:calc(18px + env(safe-area-inset-bottom));
    animation:sheetUp .28s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes sheetUp{ from{ transform:translateY(100%) } to{ transform:none } }
  #resultOverlay .result-actions{ flex-direction:column; }
  #resultOverlay .result-actions button{ width:100%; min-height:48px; }
}