/* =========================================================================
   MindMatch — dashboard-style Memory Match
   Persistent left/right sidebars, glowing neon match cards, live stat rail.
   ========================================================================= */

:root{
  /* ---- base — matches BuiltBy's neutral-dark palette ---- */
  --bg-0:#0b0b0d;
  --panel:rgba(255,255,255,0.04);
  --panel-strong:rgba(255,255,255,0.07);
  --border:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.18);
  --text-0:#fafafa;
  --text-1:#b4b4b4;
  --text-2:#7c7c85;

  --success:#34d399;
  --danger:#f87171;

  --radius-xs:8px;
  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:22px;

  --shadow-1:0 8px 26px rgba(0,0,0,0.4);
  --shadow-2:0 20px 55px rgba(0,0,0,0.5);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --font-display:"Space Grotesk",-apple-system,ui-sans-serif,sans-serif;
  --font-body:"Inter",-apple-system,ui-sans-serif,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* ---- brand accent: BuiltBy emerald (single accent, like the app) ---- */
  --accent-1:#34d399;   /* primary */
  --accent-2:#2dd4bf;   /* secondary */
  --accent-3:#10b981;   /* tertiary */
  --grad-accent:linear-gradient(135deg,#34d399 0%,#10b981 100%);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  /* Faint emerald ambient — mirrors the app's background glow. */
  background:
    radial-gradient(900px 520px at 8% -10%, color-mix(in srgb, var(--accent-1) 8%, transparent), transparent 60%),
    radial-gradient(760px 480px at 98% 2%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 55%),
    var(--bg-0);
  color:var(--text-0);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  height:100%;
  overflow:hidden;
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
button:focus-visible{outline:2px solid var(--accent-1); outline-offset:2px;}
::selection{background:color-mix(in srgb, var(--accent-1) 35%, transparent);}

#particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.45;}
#confetti{position:fixed;inset:0;z-index:200;pointer-events:none;}

.glass{
  background:var(--panel);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--border);
}

[data-lucide]{display:inline-block;}

/* ========================================================================
   APP SHELL
   ======================================================================== */
.app-shell{
  position:relative; z-index:1;
  display:grid;
  /* Two columns: the game, and one focused rail (leaderboard + streak). */
  grid-template-columns:1fr 300px;
  gap:16px;
  max-width:1480px;
  margin:0 auto;
  padding:16px;
  /* Fill the iframe exactly so the board is always visible without scrolling;
     each column scrolls on its own if its content is taller than the viewport. */
  height:100vh;
  overflow:hidden;
}

/* ---------------- LEFT SIDEBAR ---------------- */
.sidebar-left{
  border-radius:var(--radius-lg);
  padding:22px 18px;
  display:flex; flex-direction:column; gap:22px;
  height:100%; overflow-y:auto;
  box-shadow:var(--shadow-1);
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:44px;height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:var(--grad-accent); box-shadow:0 6px 20px color-mix(in srgb, var(--accent-1) 45%, transparent);
  color:#0a0a12;
}
.brand-mark svg{width:24px;height:24px;stroke-width:2;}
.brand-text h1{font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-0.01em;}
.brand-text p{font-size:11.5px; color:var(--text-2); margin-top:1px;}

.side-section{display:flex; flex-direction:column; gap:10px;}
.side-heading{font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-2);}

.diff-list{display:flex; flex-direction:column; gap:8px;}
.diff-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-radius:13px;
  background:var(--panel); border:1px solid var(--border);
  transition:all .25s var(--ease-out); text-align:left;
}
.diff-item:hover{ border-color:var(--border-strong); transform:translateX(2px); }
.diff-item-text{display:flex; flex-direction:column; gap:1px;}
.diff-item-text strong{font-family:var(--font-display); font-size:14.5px; font-weight:600;}
.diff-item-text small{font-size:11.5px; color:var(--text-2);}
.diff-dot{width:9px;height:9px;border-radius:50%; background:var(--dot-c,#666); box-shadow:0 0 0 3px transparent; transition:box-shadow .25s;}
.diff-item.active{
  border-color:color-mix(in srgb, var(--dot-c,#a78bfa) 55%, var(--border));
  background:color-mix(in srgb, var(--dot-c,#a78bfa) 12%, var(--panel));
}
.diff-item.active .diff-dot{ box-shadow:0 0 0 3px color-mix(in srgb, var(--dot-c,#a78bfa) 25%, transparent), 0 0 10px var(--dot-c,#a78bfa); }

.theme-select{position:relative;}
.theme-current{
  width:100%; display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px;
  background:var(--panel); border:1px solid var(--border); font-size:13.5px; font-weight:600;
}
.theme-current svg{margin-left:auto; width:15px; height:15px; color:var(--text-2);}
.theme-swatch{width:16px;height:16px;border-radius:6px; background:var(--grad-accent); flex-shrink:0;}
.sw-neon{background:linear-gradient(135deg,#a78bfa,#38bdf8);}
.sw-crimson{background:linear-gradient(135deg,#ff3d5a,#c23dff);}
.sw-ocean{background:linear-gradient(135deg,#22d3ee,#38bdf8);}
.theme-menu{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
  background:#0d1220; border:1px solid var(--border-strong); border-radius:12px; padding:6px;
  display:none; flex-direction:column; gap:2px; box-shadow:var(--shadow-2);
}
.theme-menu.open{display:flex;}
.theme-option{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; font-size:13.5px;}
.theme-option:hover{background:var(--panel-strong);}

.sound-row{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px; border-radius:12px; background:var(--panel); border:1px solid var(--border);
}
.sound-row-left{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600;}
.sound-row-left svg{width:16px;height:16px; color:var(--text-1);}
.switch{width:36px; height:20px; border-radius:99px; background:var(--panel-strong); border:1px solid var(--border); position:relative; transition:background .25s;}
.switch.on{background:var(--grad-accent); border-color:transparent;}
.switch-knob{position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .25s var(--ease-spring);}
.switch.on .switch-knob{transform:translateX(16px);}

.daily-card{
  margin-top:auto; padding:16px; border-radius:var(--radius-md);
  background:linear-gradient(155deg, color-mix(in srgb, var(--accent-1) 20%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
  border:1px solid color-mix(in srgb, var(--accent-1) 30%, var(--border));
}
.daily-head{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:14px; margin-bottom:6px;}
.daily-head svg{width:16px;height:16px; color:#fbbf24;}
.daily-card p{font-size:12px; color:var(--text-1); line-height:1.45; margin-bottom:12px;}
.btn-daily{
  width:100%; padding:10px; border-radius:10px; background:var(--grad-accent); color:#0a0a12;
  font-weight:700; font-size:13.5px; transition:transform .2s var(--ease-out);
}
.btn-daily:hover{transform:translateY(-1px);}

/* ---------------- MAIN COLUMN ---------------- */
.main-col{display:flex; flex-direction:column; gap:14px; min-width:0; height:100%;}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.hud-pills{display:flex; gap:8px; flex-wrap:wrap;}
.hud-pill{
  padding:7px 12px; border-radius:12px; background:var(--panel); border:1px solid var(--border);
  min-width:78px; backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .3s;
}
.hud-pill-label{display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--pill-c); margin-bottom:2px;}
.hud-pill-row{display:flex; align-items:center; gap:7px;}
.hud-pill-value{font-family:var(--font-display); font-weight:700; font-size:15px;}
.hud-pill-value.mono{font-family:var(--font-mono); font-size:13.5px;}
.hud-pill-row svg{width:13px; height:13px; color:var(--pill-c); margin-left:auto; stroke-width:2;}
.hud-pill.combo-pulse{animation:pillPulse .4s var(--ease-spring);}
@keyframes pillPulse{0%{transform:scale(1);}50%{transform:scale(1.06);box-shadow:0 0 0 1px var(--pill-c), 0 0 20px color-mix(in srgb, var(--pill-c) 50%, transparent);}100%{transform:scale(1);}}

.topbar-actions{display:flex; gap:6px;}
.icon-btn{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--panel); border:1px solid var(--border); color:var(--text-1);
  transition:all .25s var(--ease-out);
}
.icon-btn svg{width:15px;height:15px; stroke-width:1.9;}
.icon-btn.sm{width:32px;height:32px;}
.icon-btn.sm svg{width:15px;height:15px;}
.icon-btn:hover{color:var(--text-0); border-color:var(--border-strong); background:var(--panel-strong); transform:translateY(-1px);}

/* ---------------- Board ---------------- */
/* The board area takes all leftover height in the main column and centres the
   grid. The board keeps its natural aspect ratio and is capped by BOTH the
   available width and height, so it always fits the viewport — no scrolling. */
.board-area{position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:4px 0;}
/* Board size (px) is set by fitBoard() in JS — the largest square-celled grid
   that fits the board-area — so cells stay square in any column width. */
.board{display:grid; gap:12px; perspective:1000px; margin:auto;}
.board.size-4x4{grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);}
.board.size-5x4{grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,1fr);}
.board.size-6x6{grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr); gap:10px;}
.board.size-8x8{grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); gap:8px;}

.card{position:relative; min-height:0; cursor:pointer; transform-style:preserve-3d; transition:transform .55s var(--ease-spring); will-change:transform;}
.card.flipped{transform:rotateY(180deg);}
.card.matched{animation:matchPop .55s var(--ease-out); pointer-events:none;}
.card.wrong{animation:shake .5s var(--ease-out);}
@keyframes matchPop{0%{transform:rotateY(180deg) scale(1);}35%{transform:rotateY(180deg) scale(1.08);}100%{transform:rotateY(180deg) scale(1);}}
@keyframes shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(3px);}30%,50%,70%{transform:translateX(-6px);}40%,60%{transform:translateX(6px);}}

.card-face{
  position:absolute; inset:0; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--border); overflow:hidden;
  transition:box-shadow .3s var(--ease-out), border-color .3s, transform .3s var(--ease-out);
}
.card-front{
  background:radial-gradient(120% 140% at 25% -10%, rgba(255,255,255,0.05), transparent 55%), linear-gradient(155deg,#1b1b1e,#0f0f11 65%);
  box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.05);
}
.card-front svg{width:34%; height:34%; color:rgba(255,255,255,0.14); stroke-width:1.4;}
.card:hover:not(.flipped):not(.matched) .card-front{
  border-color:var(--border-strong); transform:translateY(-3px) scale(1.015); box-shadow:var(--shadow-2);
}
.card-back{
  transform:rotateY(180deg);
  background:radial-gradient(120% 120% at 30% 0%, color-mix(in srgb, var(--card-tint,#a78bfa) 22%, transparent), transparent 60%), #161619;
  border-color:color-mix(in srgb, var(--card-tint,#a78bfa) 55%, var(--border));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--card-tint,#a78bfa) 35%, transparent), 0 0 28px color-mix(in srgb, var(--card-tint,#a78bfa) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
}
.card-back svg{width:40%; height:40%; stroke-width:1.6; color:var(--card-tint,#a78bfa); filter:drop-shadow(0 4px 14px rgba(0,0,0,0.4));}
.board.size-8x8 .card-back svg{width:46%; height:46%;}
.card.matched .card-back{
  border-color:color-mix(in srgb, var(--success) 60%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--success) 45%, transparent), 0 0 30px color-mix(in srgb, var(--success) 45%, transparent);
}
.card.matched .card-back svg{color:var(--success);}

/* ---------------- Pause overlay ---------------- */
.pause-overlay{position:fixed; inset:0; z-index:150; display:none; align-items:center; justify-content:center; background:rgba(4,5,10,0.62); backdrop-filter:blur(6px);}
.pause-overlay.active{display:flex; animation:fadeIn .25s var(--ease-out);}
.pause-panel{padding:36px 40px; border-radius:var(--radius-lg); text-align:center; max-width:340px; box-shadow:var(--shadow-2);}
.pause-panel h2{font-family:var(--font-display); font-size:24px; margin-bottom:10px;}
.pause-panel p{color:var(--text-1); font-size:14px; margin-bottom:22px; line-height:1.5;}

/* ---------------- Bottom bar ---------------- */
.bottombar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 18px; border-radius:var(--radius-md);
}
.tip{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-1);}
.tip svg{width:16px;height:16px; color:#fbbf24; flex-shrink:0;}
.bottombar-actions{display:flex; gap:10px;}
.btn-pill{
  display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:11px;
  background:var(--panel-strong); border:1px solid var(--border); font-size:13.5px; font-weight:600;
  transition:all .25s var(--ease-out);
}
.btn-pill svg{width:15px;height:15px;}
.btn-pill:hover{border-color:var(--border-strong); transform:translateY(-1px);}

/* ---------------- RIGHT SIDEBAR ---------------- */
.sidebar-right{display:flex; flex-direction:column; gap:14px; height:100%; overflow-y:auto;}
.panel{border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-1);}
.panel-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px; font-family:var(--font-display); font-weight:700; font-size:13.5px;
  color:var(--accent-1); letter-spacing:0.02em;
}
.panel-head span{display:flex; align-items:center; gap:8px;}
.panel-head svg{width:15px;height:15px;}
.panel-head.static{cursor:default;}
.panel-head .chev{transition:transform .25s var(--ease-out); color:var(--text-2);}
.panel.collapsed .chev{transform:rotate(-90deg);}
.panel.collapsed .panel-body{display:none;}
.panel-body{padding:0 16px 16px;}
.stat-row{display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:13px; color:var(--text-1); border-bottom:1px solid var(--border);}
.stat-row:last-child{border-bottom:none;}
.stat-row strong{color:var(--text-0); font-family:var(--font-display); font-size:14px;}

.level-row{display:flex; align-items:center; justify-content:space-between; font-size:13px; margin-bottom:10px;}
.level-row span:first-child{font-family:var(--font-display); font-weight:700;}
.level-xp{color:var(--text-2); font-size:11.5px;}
.xp-track{height:8px; border-radius:99px; background:var(--panel-strong); overflow:hidden;}
.xp-fill{height:100%; width:0%; background:var(--grad-accent); border-radius:99px; transition:width .5s var(--ease-out);}

.best-score-panel .panel-body{text-align:center; padding-bottom:20px;}
.best-score-value{font-family:var(--font-display); font-size:32px; font-weight:700; background:linear-gradient(135deg,#fbbf24,#f59e0b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.best-score-date{font-size:11.5px; color:var(--text-2); margin-top:4px;}

/* ---------------- Buttons (shared) ---------------- */
.btn-primary,.btn-secondary,.btn-ghost{
  padding:13px 22px; border-radius:14px; font-size:14.5px; font-weight:600;
  transition:all .25s var(--ease-out); display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary{background:var(--grad-accent); color:#0a0a12; box-shadow:0 8px 24px color-mix(in srgb, var(--accent-1) 35%, transparent);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-secondary{background:var(--panel-strong); border:1px solid var(--border-strong); color:var(--text-0);}
.btn-secondary:hover{background:rgba(255,255,255,0.1); transform:translateY(-2px);}
.btn-ghost{color:var(--text-1); border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text-0); border-color:var(--border-strong);}
.btn-ghost.danger{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent); width:100%; margin-top:18px;}
.btn-ghost.danger:hover{background:color-mix(in srgb, var(--danger) 8%, transparent);}

/* ---------------- Modals ---------------- */
.modal-backdrop{position:fixed; inset:0; z-index:180; display:none; align-items:center; justify-content:center; background:rgba(3,4,8,0.7); backdrop-filter:blur(8px); padding:20px;}
.modal-backdrop.active{display:flex; animation:fadeIn .25s var(--ease-out);}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{width:100%; max-width:460px; border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-2); animation:modalIn .4s var(--ease-spring); max-height:86vh; overflow-y:auto;}
@keyframes modalIn{from{opacity:0; transform:translateY(18px) scale(.97);} to{opacity:1; transform:none;}}

.victory-modal{text-align:center;}
.victory-badge svg{width:42px;height:42px; color:#fbbf24; filter:drop-shadow(0 8px 20px rgba(251,191,36,0.4)); margin-bottom:6px;}
.victory-modal h2{font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:-0.02em;}
.victory-sub{color:var(--text-2); font-size:13.5px; margin-top:6px; margin-bottom:26px;}
.victory-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:26px;}
.victory-stat{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 10px; display:flex; flex-direction:column; align-items:center; gap:5px;}
.victory-stat.wide{grid-column:1/-1;}
.v-icon svg{width:18px;height:18px; color:var(--accent-1);}
.v-value{font-family:var(--font-display); font-weight:700; font-size:22px;}
.v-label{font-size:11px; color:var(--text-2); text-transform:uppercase; letter-spacing:0.06em;}
.victory-actions{display:flex; flex-direction:column; gap:10px;}

.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.modal-head h2{font-family:var(--font-display); font-size:21px; font-weight:700;}

.leaderboard-tabs{display:flex; gap:6px; margin-bottom:16px; background:var(--panel); border-radius:12px; padding:4px; border:1px solid var(--border);}
.lb-tab{flex:1; padding:8px; border-radius:9px; font-size:13px; font-weight:600; color:var(--text-1); transition:all .2s;}
.lb-tab.active{background:var(--panel-strong); color:var(--text-0);}
.leaderboard-list{list-style:none; display:flex; flex-direction:column; gap:8px; min-height:120px;}
.leaderboard-list li{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:var(--panel); border:1px solid var(--border); font-size:14px;}
.lb-rank{font-family:var(--font-mono); color:var(--text-2); width:22px;}
.lb-score{font-weight:700; margin-left:auto; font-family:var(--font-display);}
.lb-empty{color:var(--text-2); font-size:13.5px; text-align:center; padding:30px 0;}

.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat-tile{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px 14px; display:flex; flex-direction:column; gap:5px;}
.s-icon{width:20px; height:20px; stroke-width:1.8; color:var(--accent-1); margin-bottom:8px;}
.s-value{font-family:var(--font-display); font-weight:700; font-size:22px;}
.s-label{font-size:11px; color:var(--text-2); text-transform:uppercase; letter-spacing:0.05em;}

/* ---------------- Responsive ---------------- */
@media (max-width:1200px){
  .app-shell{grid-template-columns:1fr 270px;}
}
/* Narrow screens: fall back to a single scrolling column (the fixed-viewport
   three-column layout only makes sense with room for both rails). */
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr; height:auto; overflow:visible; padding:14px;}
  .sidebar-left,.sidebar-right{height:auto; overflow:visible;}
  .sidebar-left{margin-bottom:2px;}
  .main-col{height:auto;}
  .board-area{min-height:0;}
  /* width:100% gives the grid a definite size (height derived via aspect-ratio)
     so the 1fr rows don't collapse without a fixed-height parent. */
  .board{height:auto; width:100%;}
  .streak-card{margin-top:0;}
}
@media (max-width:640px){
  .hud-pills{gap:8px;}
  .hud-pill{min-width:80px; padding:9px 12px;}
  .board.size-6x6{gap:6px;}
  .board.size-8x8{gap:4px;}
  .victory-grid{grid-template-columns:1fr 1fr;}
}

/* ------------------------------------------------------------------ *
   Hidden scrollbars — keep scrolling behaviour, remove the visual bars
   (matches the rest of BuiltBy, which hides scrollbars app-wide).
 * ------------------------------------------------------------------ */
*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ width:0; height:0; display:none; }

/* ------------------------------------------------------------------ *
   Daily challenge + streak (replaces the manual difficulty selector)
 * ------------------------------------------------------------------ */
.daily-diff{
  display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:14px;
  background:color-mix(in srgb, var(--dot-c,#a78bfa) 12%, var(--panel));
  border:1px solid color-mix(in srgb, var(--dot-c,#a78bfa) 30%, var(--border));
}
.daily-diff-icon{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:color-mix(in srgb, var(--dot-c,#a78bfa) 22%, transparent); color:var(--dot-c,#a78bfa);
}
.daily-diff-icon svg{width:18px; height:18px;}
.daily-diff-text{display:flex; flex-direction:column; gap:1px; flex:1; min-width:0;}
.daily-diff-text strong{font-family:var(--font-display); font-size:15px; font-weight:600;}
.daily-diff-text small{font-size:11.5px; color:var(--text-2);}
.daily-diff-dot{
  width:9px; height:9px; border-radius:50%; background:var(--dot-c,#a78bfa);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--dot-c,#a78bfa) 25%, transparent), 0 0 10px var(--dot-c,#a78bfa);
}
.daily-note{font-size:11.5px; color:var(--text-2); line-height:1.45;}

.streak-card{
  margin-top:auto; display:flex; align-items:center; gap:14px; padding:16px;
  border-radius:var(--radius-md); background:var(--panel); border:1px solid var(--border);
  transition:background .3s, border-color .3s;
}
.streak-flame{position:relative; display:grid; place-items:center; width:46px; height:46px; flex-shrink:0;}
.streak-flame svg{width:42px; height:42px; color:#f97316; filter:drop-shadow(0 0 8px rgba(249,115,22,0.45));}
.streak-num{
  position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.65);
}
.streak-meta{display:flex; flex-direction:column; gap:2px; min-width:0;}
.streak-meta strong{font-family:var(--font-display); font-size:14px; font-weight:600;}
.streak-meta #streak-status{font-size:11.5px; color:var(--text-2); line-height:1.4;}
.streak-best{font-size:11px; color:var(--text-2); font-weight:600;}
.streak-card.done{border-color:color-mix(in srgb,#34d399 40%, var(--border)); background:color-mix(in srgb,#34d399 8%, var(--panel));}
.streak-card.done .streak-flame svg{color:#34d399; filter:drop-shadow(0 0 8px rgba(52,211,153,0.5));}

.victory-streak{
  display:flex; align-items:center; gap:7px; width:fit-content; margin:-14px auto 22px;
  padding:7px 14px; border-radius:99px; font-weight:600; font-size:13px; color:#fb923c;
  background:color-mix(in srgb,#f97316 14%, transparent);
  border:1px solid color-mix(in srgb,#f97316 35%, transparent);
}
.victory-streak svg{width:15px; height:15px;}

/* ------------------------------------------------------------------ *
   Focused layout: daily chip in the HUD + global leaderboard rail
 * ------------------------------------------------------------------ */
.daily-chip{
  display:flex; align-items:center; gap:9px; padding:7px 12px; border-radius:12px;
  background:color-mix(in srgb, var(--dot-c,#34d399) 10%, var(--panel));
  border:1px solid color-mix(in srgb, var(--dot-c,#34d399) 30%, var(--border));
}
.daily-chip svg{width:15px; height:15px; color:var(--dot-c,#34d399); flex-shrink:0;}
.daily-chip-text{display:flex; flex-direction:column; gap:1px;}
.daily-chip-text strong{font-family:var(--font-display); font-size:13px; font-weight:600; line-height:1;}
.daily-chip-text small{font-size:9.5px; color:var(--text-2); white-space:nowrap;}

.global-lb{list-style:none; display:flex; flex-direction:column; gap:6px;}
.glb-row{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:10px;
  background:var(--panel); border:1px solid var(--border); font-size:12.5px;
}
.glb-row.you{
  border-color:color-mix(in srgb, var(--accent-1) 45%, var(--border));
  background:color-mix(in srgb, var(--accent-1) 8%, var(--panel));
}
.glb-rank{font-family:var(--font-mono); color:var(--text-2); width:16px; text-align:center; font-size:11px; flex-shrink:0;}
.glb-row:nth-child(1) .glb-rank{color:#fbbf24; font-weight:700;}
.glb-row:nth-child(2) .glb-rank{color:#cbd5e1;}
.glb-row:nth-child(3) .glb-rank{color:#d97706;}
.glb-avatar{width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.glb-avatar-fallback{display:grid; place-items:center; background:var(--panel-strong); font-size:10px; font-weight:700; color:var(--text-1);}
.glb-name{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600;}
.glb-name em{font-style:normal; color:var(--accent-1); font-size:10.5px;}
.glb-score{font-family:var(--font-display); font-weight:700; flex-shrink:0;}
.global-lb-note{font-size:11px; color:var(--text-2); margin-top:10px; line-height:1.45;}

.lb-sub{font-size:12.5px; color:var(--text-2); margin:-12px 0 16px;}
.glb-row.modal-row{font-size:13.5px; padding:10px 12px; border-radius:12px;}
.glb-row.modal-row .glb-avatar{width:26px; height:26px;}