:root{
  --bg:#0b1220;
  --panel:rgba(255,255,255,0.08);
  --text:#ffffff;
  --muted:rgba(255,255,255,.65);
  --accent:#7c5cff;
  --accent-rgb:124,92,255;
  --accent-on:#ffffff;
  --accent-flip:#ff6b3d;
  --border:rgba(255,255,255,0.15);
  --border-strong:rgba(255,255,255,0.28);

  --cell-bg:#161e2e;
  --cell-text-user:#a594ff;
  --cell-text-given:#ffffff;

  --hl-soft: rgba(124,92,255,.14);
  --error: #ff4d4d;

  /* Achievement badge-card tokens */
  --card-bg: rgba(255,255,255,0.06);
  --border-soft: rgba(255,255,255,0.12);
  --text-soft: rgba(255,255,255,.65);
  --accent-blue: #38bdf8;
  --locked: rgba(255,255,255,.45);

  --ad-height: 0px;
}

:root {
  /* Ensure these are defined if the environment doesn't provide them */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);


  /* Extra padding for Android gesture/nav + camera cutouts (Android often reports safe-area as 0) */
  --sys-top: 0px;
  --sys-bottom: 0px;

  /* Combined insets */
  --inset-top: calc(var(--safe-top) + var(--sys-top));
  --inset-bottom: calc(var(--safe-bottom) + var(--sys-bottom));
}

[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:rgba(0,0,0,0.06);
  --text:rgba(0,0,0,.88);
  --muted:rgba(0,0,0,.55);
  --border:rgba(0,0,0,0.12);
  --border-strong:rgba(0,0,0,0.22);

  --cell-bg:rgba(255,255,255,0.9);
  --cell-text-user:#4c3cff;
  --cell-text-given:rgba(0,0,0,.88);

  --hl-soft: rgba(124,92,255,.10);

  /* Achievement badge-card tokens (light) */
  --card-bg: rgba(0,0,0,0.04);
  --border-soft: rgba(0,0,0,0.10);
  --text-soft: rgba(0,0,0,.55);
  --accent-blue: #0284c7;
  --locked: rgba(0,0,0,.45);
}

/* Colour palette and brightness are independent preferences. Purple keeps the
   original appearance for existing players. */
[data-palette="ocean"]{
  --bg:#091925;
  --panel:rgba(89,189,229,.10);
  --accent:#63bce5;
  --accent-rgb:99,188,229;
  --accent-on:#091925;
  --accent-flip:#eb855d;
  --accent-flip-on:#231813;
  --cell-bg:#102431;
  --cell-text-user:#77d4fa;
  --hl-soft:rgba(var(--accent-rgb),.18);
  --card-bg:rgba(89,189,229,.08);
}
[data-theme="light"][data-palette="ocean"]{
  --bg:#f3f9fc;
  --accent:#176e9a;
  --accent-rgb:23,110,154;
  --accent-on:#ffffff;
  --panel:rgba(36,127,174,.08);
  --cell-bg:#ffffff;
  --cell-text-user:#11678e;
  --hl-soft:rgba(var(--accent-rgb),.11);
  --card-bg:rgba(36,127,174,.06);
}
[data-palette="forest"]{
  --bg:#0b1d19;
  --panel:rgba(93,192,148,.10);
  --accent:#66cba4;
  --accent-rgb:102,203,164;
  --accent-on:#0b1d19;
  --accent-flip:#e3a252;
  --accent-flip-on:#231813;
  --cell-bg:#142821;
  --cell-text-user:#81dfb5;
  --hl-soft:rgba(var(--accent-rgb),.20);
  --card-bg:rgba(93,192,148,.08);
}
[data-theme="light"][data-palette="forest"]{
  --bg:#f5f9f4;
  --accent:#1c7055;
  --accent-rgb:28,112,85;
  --accent-on:#ffffff;
  --panel:rgba(37,132,102,.08);
  --cell-bg:#ffffff;
  --cell-text-user:#196c52;
  --hl-soft:rgba(var(--accent-rgb),.11);
  --card-bg:rgba(37,132,102,.06);
}
[data-palette="sunset"]{
  --bg:#231813;
  --panel:rgba(241,153,104,.10);
  --accent:#e99a70;
  --accent-rgb:233,154,112;
  --accent-on:#231813;
  --accent-flip:#e6a447;
  --accent-flip-on:#231813;
  --cell-bg:#30211b;
  --cell-text-user:#ffc09a;
  --hl-soft:rgba(var(--accent-rgb),.20);
  --card-bg:rgba(241,153,104,.08);
}
[data-theme="light"][data-palette="sunset"]{
  --bg:#fff8f2;
  --accent:#a64c2e;
  --accent-rgb:166,76,46;
  --accent-on:#ffffff;
  --panel:rgba(184,90,55,.08);
  --cell-bg:#ffffff;
  --cell-text-user:#9b482b;
  --hl-soft:rgba(var(--accent-rgb),.11);
  --card-bg:rgba(184,90,55,.06);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; margin:0; padding:0; }
html,body{
  min-height: 100svh;
height:100%; margin:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

/* Remove default list bullets (prevents small dots in some browsers) */
ul,ol{ list-style:none; padding-left:0; margin:0; }
li::marker{ content:''; }

.app{
  width:100%;
  max-width:480px;
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  margin:0 auto;
  position:relative;
  padding-top: calc(12px + var(--inset-top));

  padding-bottom: calc(65px + var(--inset-bottom) + var(--ad-height));
  height: 100vh; /* fallback */
}


/* Header */
.main-header{
  padding: 0 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  height:50px;
  flex-shrink:0;
}

/* Hide the top header during gameplay to maximize puzzle space */
body.in-game .main-header{ display:none !important; }
.logo{ display:flex; align-items:center; gap:8px; }
.logo-icon{
  width:22px; height:22px;
  background: var(--accent);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px;
  color:var(--accent-on);
}

.logo-img{
  width:22px;
  height:22px;
  border-radius:6px;
  display:block;
  object-fit:cover;
}
.logo-text{ font-weight:700; font-size:15px; }
.theme-btn{ background:none; border:none; font-size:18px; cursor:pointer; color:var(--text); }

/* Screens */
.content-area{ flex:1; position:relative; 
  min-height: 0;
  overflow: hidden;
}
.screen {
  display: none;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Try reducing this from 120px to 90px or 100px */
  padding-bottom: calc(90px + var(--inset-bottom) + var(--ad-height)); 
}
.screen.active{ display:block; }

/* Flexbox scrolling fix (allows .screen overflow to work reliably) */
.content-area{ min-height:0; }
.app{ min-height:0; }

/* ============================
   Achievements scrolling (mobile WebView-safe)
   ============================
   Some Android/iOS WebViews can be picky with nested overflow inside flex layouts.
   We make the Achievements screen a fixed header (title + tabs) and a single
   dedicated scroll container (.ach-panels).
*/
#achievements.screen{
  display: none; /* keep default .screen behavior */
}
#achievements.screen.active{
  display: flex;
  flex-direction: column;
  overflow: hidden; /* prevent double-scroll; .ach-panels will scroll */
  padding-bottom: 0; /* avoid stacking with generic .screen bottom padding */
}

#achievements .hero,
#achievements .ach-top{
  flex: 0 0 auto;
}

#achievements .ach-panels{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Only a tiny finish-space; app + fixed nav already reserve the bottom area */
  padding: 8px 0 12px;
  margin-bottom: 0;
  touch-action: pan-y;
  overscroll-behavior: contain;
}


/* --- Header visibility --- */
/* (No top header in this build; keep rules if you add it back later) */

/* Home hero: brand + page title row */
.hero{ padding:12px 20px 8px; }
.hero h3{ text-align:center; margin:0; }

.hero-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.hero-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:8px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.hero-brand-page{
  min-width: 220px;
}
.hero-logo{ width:18px; height:18px; }
.hero-logo.logo-boost{ transform: scale(1.25); transform-origin: center; }

.hero-name{ font-weight:800; letter-spacing:.2px; }
.hero-page{
  font-size:15px;
  opacity:.82;
  text-transform:uppercase;
  letter-spacing:1px;
}

.footer-nav{
  position: fixed;
  left: 0;
  right: 0;
  /* Lift the whole bar above the Android gesture/navigation area */
  bottom: calc(var(--inset-bottom) + var(--ad-height));
  width: 100%;
  height: 65px;
  box-sizing: border-box;
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9999;
}

/* Ad banner placeholder */
.ad-banner {
  /* 1. Forceer vaste positie boven alles */
  position: fixed !important;
  z-index: 10001 !important;

  /* 2. CENTREREN: Dit is de cruciale combinatie */
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important; /* Zet een eventuele 'right: 0' uit */

  /* 3. VERHOGEN: 85px zorgt dat hij ruim boven de knoppen zweeft */
  bottom: calc(85px + var(--inset-bottom) + var(--ad-height));

  /* 4. BREEDTE: Niet 100%, anders zie je het centreren niet */
  width: 90% !important;
  max-width: 400px !important;
  
  height: 50px !important;
  
  /* Styling zodat je ziet dat hij zweeft */
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 10px !important;
  display: none; /* Wordt 'flex' via JS */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

/* Zorg dat de banner ook echt getoond wordt */
.ad-banner.active {
  display: flex !important;
}

.ad-badge{
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}
.ad-text{
  font-size:12px;
  opacity:.7;
  font-weight:700;
}
.nav-btn{
  background:none; border:none;
  color: var(--text);
  opacity:.72;
  display:flex; flex-direction:column; align-items:center;
  font-size:10px;
  gap:4px;
}
.nav-btn.active{ opacity:1; color: var(--accent); }
.nav-icon{ width:27px; height:27px; display:block; object-fit:contain; }
[data-palette="ocean"] .nav-icon-tint{ filter:hue-rotate(-50deg) saturate(1.15); }
[data-palette="forest"] .nav-icon-tint{ filter:hue-rotate(-115deg) saturate(1.1); }
[data-palette="sunset"] .nav-icon-tint{ filter:hue-rotate(115deg) saturate(1.15); }

.palette-picker{
  min-width:0;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel);
  padding:12px 14px 14px;
}
.palette-picker legend{ padding:0 6px; font-size:14px; font-weight:800; }
.palette-picker p{ color:var(--muted); font-size:11px; margin-bottom:10px; }
.palette-options{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.palette-option{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:9px 3px;
  border:2px solid var(--border);
  border-radius:12px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.palette-option:has(input:checked){ border-color:var(--accent); background:rgba(var(--accent-rgb),.12); }
.palette-option:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.palette-option input{ position:absolute; opacity:0; width:1px; height:1px; }
.palette-swatch{ width:24px; height:24px; border-radius:50%; border:2px solid var(--text); }
.palette-swatch-purple{ background:linear-gradient(135deg,#f6f7fb 50%,#7c5cff 50%); }
.palette-swatch-ocean{ background:linear-gradient(135deg,#f3f9fc 50%,#176e9a 50%); }
.palette-swatch-forest{ background:linear-gradient(135deg,#f5f9f4 50%,#1c7055 50%); }
.palette-swatch-sunset{ background:linear-gradient(135deg,#fff8f2 50%,#a64c2e 50%); }

/* Menu */
.menu-list{ padding:10px 20px; display:flex; flex-direction:column; gap:10px; }
.website-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  padding:12px 20px 4px;
  color:var(--muted);
  font-size:12px;
}
.website-links a{
  color:var(--muted);
  text-decoration:none;
}
.website-links a:hover,
.website-links a:focus-visible{
  color:var(--accent);
  text-decoration:underline;
}
.settings-link{
  color:var(--text);
  text-decoration:none;
}
.menu-item{
  position: relative;
  background: var(--panel);
  border:1px solid var(--border);
  padding:14px;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:12px;
  color: var(--text);
  cursor:pointer;
  width:100%;
  text-align:left;
}

/* Daily streak block on the right side of the Daily buttons */
.daily-streak{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-size:10px;
  line-height:1.15;
  color: var(--muted);
  text-align:right;
  white-space:nowrap;
}
.daily-streak b{
  color: var(--text);
  font-weight: 900;
}
.daily-streak .ds-line span{ opacity:.9; }
.menu-item:disabled:not(.completed),
.menu-item.disabled:not(.completed){
  opacity: .45;
  filter: grayscale(1);
  pointer-events: none;
}

.status-pill{
  display:none;
  margin-left:8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}
[data-theme="light"] .status-pill{ background: rgba(0,0,0,0.04); }
.menu-item.completed .status-pill{ display:inline-flex; }

/* Daily challenge "Completed!" stamp (green, angled) */
.completed-badge{
  position: absolute;

  /* put it over the middle of the button */
  top: 50%;
  left: 30%;

  /* center it + keep it angled */
  transform: translate(-50%, -50%) rotate(-12deg);

  z-index: 10;
  pointer-events: none;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .4px;

  color: #0b6b2e;
  background: rgba(34,197,94,0.16);
  border: 2px solid rgba(34,197,94,0.55);
}
.menu-item.completed .completed-badge{ display: inline-flex; }

/* When completed, keep button non-clickable but don't grey it out */
.menu-item.completed{
  opacity: 1;
  filter: none;
}
/* Hide the grey pill once completed (we show the green stamp instead) */
.menu-item.completed .status-pill{ display: none !important; }

.menu-item.danger{
  background: rgba(255,77,77,.10);
  border-color: rgba(255,77,77,.55);
}

/* ===== Monthly challenges ===== */
.monthly-home-card,.starter-cup-home-card{
  width:100%;
  border:1px solid rgba(var(--accent-rgb),.48);
  border-radius:18px;
  padding:13px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.20), rgba(255,183,64,.10));
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.starter-cup-home-card{
  background:linear-gradient(135deg, rgba(255,183,64,.19), rgba(137,74,255,.15));
  border-color:rgba(255,183,64,.48);
}
.starter-cup-home-card[hidden]{ display:none; }
.starter-cup-home-card > img{ width:50px; height:50px; flex:0 0 50px; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(0,0,0,.22)); }
.monthly-home-trophy{ font-size:30px; filter:drop-shadow(0 5px 8px rgba(255,183,64,.25)); }
.monthly-home-copy{ min-width:0; display:flex; flex:1; flex-direction:column; gap:2px; }
.monthly-home-copy b{ font-size:14px; }
.monthly-home-copy > span:last-child{ color:var(--muted); font-size:10px; }
.monthly-home-kicker,.monthly-summary-kicker{ color:var(--accent); font-size:9px; font-weight:900; letter-spacing:1.1px; }
.monthly-home-arrow{ color:var(--muted); font-size:28px; }

#monthly{ padding-bottom:calc(100px + var(--inset-bottom)); }
.monthly-hero-bar{ justify-content:space-between; }
.monthly-back,.monthly-header-spacer{
  width:40px;
  height:40px;
  flex:0 0 40px;
}
.monthly-back{
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--panel);
  color:var(--text);
  font-size:20px;
  cursor:pointer;
}
.monthly-back .nav-icon{ margin:auto; width:23px; height:23px; }
.monthly-wrap{ padding:8px 20px 24px; display:flex; flex-direction:column; gap:12px; }
.monthly-mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:5px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel);
}
.monthly-mode-tab{
  border:0;
  border-radius:11px;
  padding:10px;
  background:transparent;
  color:var(--muted);
  font-weight:800;
  cursor:pointer;
}
.monthly-mode-tab.active{ background:var(--accent); color:var(--accent-on); box-shadow:0 6px 18px rgba(var(--accent-rgb),.24); }
.monthly-summary{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:linear-gradient(135deg, var(--card-bg), rgba(255,183,64,.08));
}
.monthly-summary-trophy{
  width:60px;
  height:60px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:31px;
  background:rgba(255,255,255,.06);
  filter:grayscale(1);
  opacity:.48;
}
.monthly-summary-trophy.earned{ filter:none; opacity:1; background:rgba(255,183,64,.15); box-shadow:0 0 26px rgba(255,183,64,.20); }
.monthly-summary-copy{ min-width:0; }
.monthly-summary-copy h2{ margin:2px 0; font-size:19px; }
.monthly-summary-copy p{ margin:0; color:var(--muted); font-size:11px; line-height:1.35; }
.monthly-picker{ display:grid; grid-template-columns:42px 1fr 42px; align-items:center; text-align:center; }
.monthly-picker button{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-size:24px;
  cursor:pointer;
}
.monthly-picker button:disabled{ opacity:.28; cursor:default; }
.monthly-picker b{ font-size:13px; }
.monthly-weekdays,.monthly-calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.monthly-weekdays span{ padding:2px 0; text-align:center; color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }
.monthly-day{
  min-width:0;
  aspect-ratio:1;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  cursor:pointer;
}
.monthly-day.spacer{ border:0; background:transparent; }
.monthly-day-number{ font-size:12px; font-weight:800; }
.monthly-day-state{ min-height:9px; color:var(--muted); font-size:7px; font-weight:900; }
.monthly-day.completed{ border-color:rgba(34,197,94,.55); background:rgba(34,197,94,.14); }
.monthly-day.completed .monthly-day-state{ color:#54d98a; font-size:11px; }
.monthly-day.today{ border:2px solid var(--accent); background:rgba(var(--accent-rgb),.18); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08); }
.monthly-day.today .monthly-day-state{ color:var(--accent); }
.monthly-day.missed{ border-style:dashed; border-color:rgba(255,183,64,.48); }
.monthly-day.missed .monthly-day-state{ color:#ffbd55; font-size:10px; }
.monthly-day.future,.monthly-day.unavailable{ opacity:.34; cursor:default; }
.monthly-day.future .monthly-day-state{ font-size:8px; filter:grayscale(1); }
.monthly-help{ color:var(--muted); font-size:10px; line-height:1.5; padding:2px 4px; }
.monthly-help-dot{ display:inline-block; width:8px; height:8px; border:1px dashed #ffbd55; border-radius:3px; margin-right:4px; }
.monthly-section-heading{ display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--text); font-size:12px; }
.monthly-section-heading small{ color:var(--muted); font-size:9px; }
.monthly-section-heading button{ border:0; background:none; color:var(--accent); font-size:10px; font-weight:800; cursor:pointer; }
.special-events-section,.monthly-cup-shelf{ margin:4px 14px 12px; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--card-bg); }
.special-events-section{ margin:4px 0 0; }
.special-event-list,.monthly-cup-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.special-event-card,.monthly-cup-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  text-align:left;
}
.special-event-card{ cursor:pointer; font:inherit; }
.monthly-cup-item{ cursor:pointer; }
.special-event-card > span:nth-child(2),.monthly-cup-item > span:nth-child(2){ display:flex; flex:1; flex-direction:column; gap:2px; }
.special-event-card small,.monthly-cup-item small{ color:var(--muted); font-size:9px; }
.special-event-icon,.monthly-cup-icon{ width:30px; text-align:center; font-size:20px; }
.special-event-award{ margin-left:auto; }
.special-event-card.earned,.monthly-cup-item.earned{ border-color:rgba(255,183,64,.48); background:rgba(255,183,64,.08); }
.special-event-card[data-theme="halloween"],.trophy-card[data-event-theme="halloween"]{
  background:linear-gradient(135deg, rgba(255,126,35,.13), rgba(104,55,180,.09));
  border-color:rgba(255,126,35,.30);
}
.special-event-card[data-theme="christmas"],.trophy-card[data-event-theme="christmas"]{
  background:linear-gradient(135deg, rgba(32,164,91,.13), rgba(211,48,55,.09));
  border-color:rgba(54,190,110,.30);
}
.special-event-card[data-theme="valentine"],.trophy-card[data-event-theme="valentine"]{
  background:linear-gradient(135deg, rgba(255,105,180,.14), rgba(255,197,214,.08));
  border-color:rgba(255,123,172,.34);
}
.special-event-card[data-theme="easter"],.trophy-card[data-event-theme="easter"]{
  background:linear-gradient(135deg, rgba(23,164,145,.14), rgba(174,83,214,.09));
  border-color:rgba(53,190,160,.32);
}
.special-event-card[data-theme="earth"],.trophy-card[data-event-theme="earth"]{
  background:linear-gradient(135deg, rgba(40,116,210,.15), rgba(76,175,80,.09));
  border-color:rgba(65,145,225,.34);
}
.special-event-card[data-theme="summer"],.trophy-card[data-event-theme="summer"]{
  background:linear-gradient(135deg, rgba(255,166,33,.16), rgba(255,100,44,.08));
  border-color:rgba(255,174,55,.34);
}
.special-event-card[data-theme="flipudoku"],.trophy-card[data-event-theme="flipudoku"]{
  background:linear-gradient(135deg, rgba(137,74,255,.17), rgba(255,183,64,.08));
  border-color:rgba(155,103,255,.38);
}
.special-event-card[data-theme="sudoku"],.trophy-card[data-event-theme="sudoku"]{
  background:linear-gradient(135deg, rgba(191,49,58,.13), rgba(43,104,214,.09));
  border-color:rgba(197,75,85,.30);
}
.special-event-card[data-theme="starter"],.trophy-card[data-event-theme="starter"]{
  background:linear-gradient(135deg, rgba(255,183,64,.17), rgba(137,74,255,.11));
  border-color:rgba(255,183,64,.38);
}

.trophy-room{ padding:4px 14px 24px; display:flex; flex-direction:column; gap:12px; }
.trophy-room-hero{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 2px;
  padding:17px;
  border:1px solid rgba(255,183,64,.34);
  border-radius:20px;
  background:linear-gradient(135deg, rgba(255,183,64,.12), rgba(var(--accent-rgb),.12));
}
.trophy-room-hero-icon{
  width:62px;
  height:62px;
  flex:0 0 62px;
  display:grid;
  place-items:center;
  border-radius:19px;
  background:rgba(255,183,64,.12);
  font-size:34px;
  filter:drop-shadow(0 7px 10px rgba(255,183,64,.20));
}
.trophy-room-hero h2{ margin:2px 0; font-size:21px; }
.trophy-room-hero p{ margin:0; color:var(--muted); font-size:11px; }
.trophy-filters{
  display:grid;
  grid-template-columns:.7fr 1fr 1.5fr;
  gap:5px;
  padding:5px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--panel);
}
.trophy-filter{
  border:0;
  border-radius:10px;
  padding:9px 5px;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.trophy-filter.active{ color:var(--accent-on); background:var(--accent); }
.trophy-room-list,.trophy-room-group{ display:flex; flex-direction:column; gap:9px; }
.trophy-card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.trophy-room-group + .trophy-room-group{ margin-top:5px; }
.trophy-room-group h3{ margin:2px 3px; color:var(--muted); font-size:10px; letter-spacing:.8px; text-transform:uppercase; }
.trophy-card{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card-bg);
  color:var(--text);
  text-align:center;
}
button.trophy-card{ cursor:pointer; }
.trophy-card.earned{ border-color:rgba(255,183,64,.48); box-shadow:inset 0 0 24px rgba(255,183,64,.06); }
.trophy-card.locked{ opacity:.70; }
.trophy-card-icon{
  width:100%;
  height:92px;
  flex:0 0 92px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  font-size:45px;
}
.trophy-card-icon.trophy-card-cup{ overflow:hidden; padding:3px; background:rgba(255,255,255,.045); }
.trophy-card-cup img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.22)); }
.trophy-card.locked .trophy-card-icon{ filter:grayscale(1); opacity:.55; }
.trophy-card-copy{ min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; }
.trophy-card-copy b{ font-size:11px; line-height:1.2; }
.trophy-card-copy small{ color:var(--muted); font-size:8px; line-height:1.2; }
.trophy-card-type{ color:var(--accent); font-size:7px; font-weight:900; letter-spacing:.55px; line-height:1.2; }
.trophy-card-arrow,.trophy-card-award{ display:none; }
.trophy-room-empty{ padding:24px 16px; border:1px dashed var(--border); border-radius:16px; color:var(--muted); text-align:center; font-size:11px; }

.special-event-wrap{ padding:8px 20px 28px; display:flex; flex-direction:column; gap:12px; }
.special-event-hero{
  display:flex;
  align-items:center;
  gap:14px;
  padding:17px;
  border:1px solid rgba(255,183,64,.34);
  border-radius:21px;
  background:linear-gradient(135deg, rgba(255,126,35,.12), rgba(104,55,180,.10));
}
.special-event-prize{
  width:66px;
  height:66px;
  flex:0 0 66px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  font-size:31px;
  filter:grayscale(1);
  opacity:.6;
}
.special-event-prize.earned{ filter:none; opacity:1; background:rgba(255,183,64,.14); box-shadow:0 0 28px rgba(255,183,64,.18); }
.special-event-prize-image{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 9px rgba(0,0,0,.22)); }
.special-event-hero-copy h2{ margin:2px 0; font-size:20px; }
.special-event-hero-copy p{ margin:0; color:var(--muted); font-size:10px; }
.special-event-progress-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card-bg);
}
.special-event-progress-card > span:first-child{ display:flex; flex-direction:column; gap:3px; }
.special-event-progress-card small{ color:var(--muted); font-size:9px; line-height:1.35; }
.special-event-reward-label{ color:var(--muted); font-size:8px; text-align:right; text-transform:uppercase; }
.special-event-reward-label b{ color:#ffbd55; font-size:10px; }
.special-event-board{ display:grid; gap:10px; padding:12px; border:1px solid var(--border); border-radius:20px; background:rgba(255,255,255,.025); }
.special-event-board.board-2{ grid-template-columns:repeat(2,1fr); }
.special-event-board.board-3{ grid-template-columns:repeat(3,1fr); }
.special-event-board.board-4{ grid-template-columns:repeat(4,1fr); gap:7px; }
.special-event-rounds{ display:flex; flex-direction:column; gap:12px; }
.special-event-round{ padding:12px; border:1px solid var(--border); border-radius:20px; background:rgba(255,255,255,.025); }
.special-event-round.earned{ border-color:rgba(255,183,64,.42); background:rgba(255,183,64,.055); }
.special-event-round-title{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.special-event-round-title img{ width:48px; height:48px; object-fit:contain; filter:grayscale(1); opacity:.55; }
.special-event-round.earned .special-event-round-title img{ filter:none; opacity:1; }
.special-event-round-title span{ display:flex; flex-direction:column; gap:2px; }
.special-event-round-title b{ font-size:12px; }
.special-event-round-title small{ color:var(--muted); font-size:9px; }
.special-event-round-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.special-event-board.earned .special-puzzle-tile.completed,
.special-event-round.earned .special-puzzle-tile.completed{ visibility:hidden; }
.cup-reveal-grid{ position:relative; isolation:isolate; gap:0; overflow:hidden; }
.cup-reveal-whole{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:0;
}
.special-event-board > .cup-reveal-whole{
  inset:12px;
  width:calc(100% - 24px);
  height:calc(100% - 24px);
}
.special-puzzle-tile{
  min-width:0;
  aspect-ratio:1;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:0;
  background:color-mix(in srgb, var(--bg) 90%, var(--accent) 10%);
  color:var(--text);
  z-index:1;
}
.special-puzzle-tile.available{ cursor:pointer; border-color:var(--accent); background:color-mix(in srgb, var(--bg) 82%, var(--accent) 18%); box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.08); }
.special-puzzle-tile.completed{ border-color:rgba(34,197,94,.62); background:transparent; }
.special-puzzle-tile.locked{ opacity:1; }
.special-puzzle-tile.locked .special-puzzle-number,
.special-puzzle-tile.locked .special-puzzle-mode,
.special-puzzle-tile.locked small{ opacity:.34; }
.special-puzzle-number{ position:relative; z-index:1; font-size:19px; font-weight:900; }
.special-puzzle-tile.completed .special-puzzle-number{
  position:absolute;
  top:6px;
  left:6px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(18,117,67,.88);
  color:#fff;
  font-size:11px;
  box-shadow:0 2px 7px rgba(0,0,0,.25);
}
.special-puzzle-mode{
  position:absolute;
  top:6px;
  right:7px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:rgba(var(--accent-rgb),.18);
  color:var(--accent);
  font-size:8px;
  font-weight:900;
  z-index:1;
}
.special-puzzle-tile small{ color:var(--muted); font-size:8px; text-transform:capitalize; }
.special-puzzle-tile.completed .special-puzzle-mode,.special-puzzle-tile.completed small{ display:none; }
.special-event-loading{ grid-column:1/-1; padding:28px 10px; color:var(--muted); text-align:center; font-size:11px; }
.special-event-loading.error{ color:var(--error); }
.special-event-legend{ display:flex; flex-wrap:wrap; gap:8px 14px; color:var(--muted); font-size:9px; padding:0 4px; }
.special-event-legend b{ color:var(--accent); }

.win-monthly-progress{
  align-items:center;
  gap:10px;
  margin:-3px 0 12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:15px;
  background:rgba(255,183,64,.08);
  text-align:left;
}
.win-monthly-progress > span:last-child{ display:flex; flex-direction:column; gap:2px; }
.win-monthly-progress small{ color:var(--muted); font-size:9px; }
.win-monthly-icon{ font-size:23px; filter:grayscale(1); opacity:.55; }
.win-monthly-progress.earned{ border-color:rgba(255,183,64,.58); }
.win-monthly-progress.earned .win-monthly-icon{ filter:none; opacity:1; }
.win-monthly-progress.earned[role="button"]{ cursor:pointer; }
.win-monthly-progress.earned[role="button"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.win-card{ max-height:92svh; overflow-y:auto; }

@media (max-width:360px){
  .monthly-wrap{ padding-left:14px; padding-right:14px; }
  .monthly-weekdays,.monthly-calendar-grid{ gap:4px; }
  .monthly-day{ border-radius:10px; }
  .trophy-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trophy-card-icon{ height:108px; flex-basis:108px; }
}

/* Language picker (settings) */
.language-picker{ display:flex; gap:6px; border:1px solid var(--border); border-radius:12px; padding:4px; background:rgba(127,127,127,.07); }
.language-option{ padding:7px 12px; border:0; border-radius:9px; background:transparent; color:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.language-option.active{ color:var(--accent-on); background:var(--accent); box-shadow:0 5px 14px rgba(var(--accent-rgb),.23); }

/* Switches (settings) */
.switch{
  position: relative;
  display: inline-block;
  width: 46px;
  height: 28px;
  flex: 0 0 46px;
}
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border);
  transition: .2s;
  border-radius: 999px;
}
[data-theme="light"] .slider{ background: rgba(0,0,0,0.06); }
.slider:before{
  position:absolute;
  content:"";
  height: 22px;
  width: 22px;
  left: 3px;
  top: 2px;
  background: var(--text);
  transition: .2s;
  border-radius: 999px;
}
.switch input:checked + .slider{
  background: rgba(var(--accent-rgb),.35);
  border-color: rgba(var(--accent-rgb),.65);
}
.switch input:checked + .slider:before{ transform: translateX(18px); }
.menu-item:active{ transform: translateY(1px); }
.item-icon{ font-size:20px; }
.item-content b{ font-size:14px; display:block; }
.item-content span{ font-size:11px; color: var(--muted); }

/* Game top bar */
.game-top-bar{
  padding: 10px 20px;
  padding-top: calc(10px + var(--inset-top));
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:10px; }

.game-title-center{
  justify-self:center;
  text-align:center;
  display:none;
  line-height:1.15;
}
.game-title-center.active{ display:block; }
.game-title-main{
  font-weight:800;
  letter-spacing:.3px;
}
.game-title-date{
  margin-top:2px;
  font-size:12px;
  color: var(--muted);
}
.topbar-left{ justify-self:start; }

.quit-btn{
  background: var(--panel);
  border:1px solid var(--border);
  color: var(--text);
  padding:6px 12px;
  border-radius:10px;
  font-size:12px;
}
.game-info{ justify-self:end; text-align:right; line-height:1.2; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.game-info span{ display:block; font-size:10px; font-weight:800; opacity:.7; }
#gameModeInfo{ display:flex; flex-direction:column; align-items:flex-end; }

/* Timer — always visible in the top-right, both daily and practice */
.game-timer-display{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
  line-height: 1;
}

/* Grid */
.grid-container{ padding:5px 15px; display:flex; justify-content:center; }
.grid{
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width:100%;
  max-width:380px;
  aspect-ratio: 1/1;
  border:2px solid var(--border-strong);
  border-radius:14px;
  overflow:hidden;
  background: transparent;
  gap:0;
  align-items:stretch;
  justify-items:stretch;
}

/* Card flip */
.cell{
  perspective:1000px;
  position:relative;
  background: var(--cell-bg);
  border:1px solid var(--border);
  width:100%;
  height:100%;
}
.cell.box-right{ border-right:2px solid var(--border-strong); }
.cell.box-bottom{ border-bottom:2px solid var(--border-strong); }

.card-inner{
  width:100%; height:100%;
  transition: transform 0.28s cubic-bezier(0.175,0.885,0.32,1.275);
  transform-style: preserve-3d;
}
.cell.flipped .card-inner{ transform: rotateY(180deg); }

.card-front,.card-back{
  transform: rotateY(0deg);
  position:absolute;
  width:100%; height:100%;
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  user-select:none;
}
.card-front .num{
  display:inline-block;
  line-height:1;
}

/* When flipped (showing front), hide back to avoid mirrored 'F' artifacts */
.cell.flipped .card-back{ display:none; }
.cell:not(.flipped) .card-back{ display:flex; }
.card-front{
  background: var(--cell-bg);
  transform: rotateY(180deg);
  color: var(--cell-text-user);
}
.card-back{
  background: rgba(255,255,255,0.06);
  color: var(--accent);
}

/* Classic (no flip) */
.cell.no-flip .card-inner{ transform: none !important; }
.cell.no-flip .card-back{ display:none; }
.cell.no-flip .card-front{ transform:none; position:relative; }

/* Grid load fade-in — disabled */

/* ===== Number pop-in on flip reveal ===== */
@keyframes numRevealPop{
  0%  { transform:scale(0.55); opacity:0; }
  60% { transform:scale(1.18); }
  100%{ transform:scale(1);    opacity:1; }
}
.num-pop{
  display:inline-block;
  animation: numRevealPop 0.32s cubic-bezier(0.175,0.885,0.32,1.5) 0.14s both;
}

/* Completion light wave. JavaScript staggers this cell-by-cell to control
   direction for rows, columns, boxes and completed digits. */
.cell.completion-wave,
.cell.digit-wave{
  overflow:hidden;
}
.cell.completion-wave::before,
.cell.digit-wave::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:5;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    115deg,
    rgba(var(--accent-rgb),0) 14%,
    rgba(var(--accent-rgb),.18) 35%,
    rgba(255,255,255,.76) 50%,
    rgba(var(--accent-rgb),.24) 65%,
    rgba(var(--accent-rgb),0) 86%
  );
  transform:translateX(-62%) scale(.9);
  animation:completionCellWave .46s ease-out both;
}
.cell.digit-wave::before{
  background:radial-gradient(
    circle,
    rgba(255,255,255,.84) 0%,
    rgba(var(--accent-rgb),.34) 38%,
    rgba(var(--accent-rgb),0) 74%
  );
  transform:scale(.35);
  animation:digitCellWave .5s ease-out both;
}

@keyframes completionCellWave{
  0%{ opacity:0; transform:translateX(-62%) scale(.9); }
  28%{ opacity:1; }
  100%{ opacity:0; transform:translateX(62%) scale(1.08); }
}
@keyframes digitCellWave{
  0%{ opacity:0; transform:scale(.35); }
  34%{ opacity:1; }
  100%{ opacity:0; transform:scale(1.34); }
}

@media (prefers-reduced-motion: reduce){
  .cell.completion-wave::before,
  .cell.digit-wave::before{
    animation-duration:.18s;
  }
}

/* Manual animation preference. Gameplay remains fully functional; visual
   state changes happen instantly and error feedback stays visible. */
html[data-animations="off"] .card-inner{ transition:none !important; }
html[data-animations="off"] .num-pop{ animation:none !important; }
html[data-animations="off"] .cell.completion-wave::before,
html[data-animations="off"] .cell.digit-wave::before{ display:none !important; }
html[data-animations="off"] .cell.errorFlash .card-front,
html[data-animations="off"] .cell.errorFlash .card-back{ animation:none !important; }
html[data-animations="off"] .cell.errorFlash::after{
  animation:none !important;
  opacity:1;
  transform:translate(-50%, -50%);
}
html[data-animations="off"] .fireworks{ display:none !important; }
html[data-animations="off"] .win-card{
  animation:none !important;
  transition:none !important;
}

/* States */
.cell.is-given .card-front{ color: var(--cell-text-given); }
.cell.locked.is-given .card-front{ color: var(--cell-text-given); }
.cell.locked.is-user .card-front{ color: var(--cell-text-user); }
.cell.locked.hinted .card-front{ color: #facc15; }
.cell.selected .card-front,
.cell.selected .card-back{ outline: 2px solid rgba(var(--accent-rgb),.65); outline-offset:-2px; }
.cell.hl-rel .card-front,
.cell.hl-rel .card-back{ background: var(--hl-soft); }

.cell.errorFlash .card-front,
.cell.errorFlash .card-back{ animation: shake .35s linear; }

/* Wrong input feedback: small red X that pops + wiggles */
.cell.errorFlash::after{
  content: "✕";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 900;
  color: rgba(255, 70, 70, 0.95);
  text-shadow: 0 2px 10px rgba(255, 70, 70, 0.18);
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  animation: xPop .45s ease-out;
}

@keyframes xPop{
  0%{ opacity:0; transform: translate(-50%, -50%) scale(.65) rotate(0deg); }
  18%{ opacity:1; transform: translate(-50%, -50%) scale(1.15) rotate(-12deg); }
  36%{ opacity:1; transform: translate(-50%, -50%) scale(1.05) rotate(12deg); }
  54%{ opacity:1; transform: translate(-50%, -50%) scale(1.0) rotate(-9deg); }
  72%{ opacity:1; transform: translate(-50%, -50%) scale(1.0) rotate(7deg); }
  100%{ opacity:0; transform: translate(-50%, -50%) scale(.95) rotate(0deg); }
}
@keyframes shake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  50%{ transform: translateX(3px); }
  75%{ transform: translateX(-2px); }
  100%{ transform: translateX(0); }
}

/* Notes */
.note-grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding:4px;
  gap:1px;
  font-size:8px;
  font-weight:700;
  color: var(--muted);
}
.note-grid span{
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.95;
}

/* Controls */
.game-controls{
  display:flex;
  justify-content:space-between;
  padding: 10px 20px;
}
.control-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:9px;
  color: var(--muted);
}
.control-item b{ color: var(--text); }
 .control-icon{
  width:36px; height:36px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  margin-bottom:2px;
  color: var(--text);
}

.hint-ad-badge{
  display:none;
  width:14px;
  height:14px;
  margin-left:4px;
  vertical-align:middle;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.95);
  box-sizing:border-box;
  font-size:8px;
  line-height:12px;
  text-align:center;
  color:#22c55e;
  font-weight:900;
}

.hint-ad-badge.show{
  display:inline-block;
}

.mistake-ad-badge{
  display:none;
  width:14px;
  height:14px;
  margin-left:4px;
  vertical-align:middle;
  border-radius:999px;
  border:1px solid rgba(239,68,68,.95);
  box-sizing:border-box;
  font-size:8px;
  line-height:12px;
  text-align:center;
  color:#ef4444;
  font-weight:900;
}

.mistake-ad-badge.show{
  display:inline-block;
}

.control-icon.is-danger-cue{
  color:#ef4444;
  border-color:rgba(239,68,68,.9);
  box-shadow:0 0 0 1px rgba(239,68,68,.14) inset, 0 0 12px rgba(239,68,68,.16);
}

/* Numpad */
.numpad{
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap:5px;
  padding: 0 15px 15px;
}
.numpad button{
  background: var(--panel);
  border:1px solid var(--border);
  color: var(--text);
  padding: 12px 0;
  border-radius:12px;
  font-weight:900;
  font-size:16px;
}
.numpad button:active{ transform: translateY(1px); }
.numpad button:disabled{ opacity:.35; }
.numpad button.num-disabled{ filter: grayscale(1); }

/* Modals */
.modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.modal-overlay.active{ display:flex; }
.modal-content{
  background: var(--bg);
  padding: 22px;
  border-radius: 24px;
  width: 85%;
  max-width: 320px;
  border: 1px solid var(--border);
  text-align:center;
}
.modal-content h3{ margin:0 0 12px; font-size:16px; }
.modal-menu .menu-item{ justify-content:center; padding:12px; margin-bottom: 8px; }
.close-text{
  background:none;
  border:none;
  color: var(--muted);
  margin-top:10px;
  cursor:pointer;
}
.quit-confirm{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.65);
  color: var(--error);
}

/* Win / Congrats */
.win-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:80;
}
.win-overlay.active{ display:flex; }

.fireworks{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}


.win-overlay .win-card{
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.win-overlay.reveal-card .win-card{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition: opacity .22s ease, transform .22s ease;
}

.win-card{
  position:relative;
  width:min(92vw, 340px);
  padding: 18px 16px 16px;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align:center;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  animation: winPop .28s ease;
}

.win-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top: 2px;
}

.win-icon{
  width:28px;
  height:28px;
  border-radius: 8px;
  display:block;
}

.win-subtitle{
  margin-top: 6px;
}

.win-share-row{
  margin: 10px 0 8px;
  display:flex;
  justify-content:center;
}

.win-share-row .menu-item{
  width: 100%;
  max-width: 220px;
  padding: 10px 12px;
}

.win-share-preview{
  display:none;
  width:100%;
  margin: 10px 0 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}

.win-card.has-share-preview .win-title-row,
.win-card.has-share-preview .win-subtitle,
.win-card.has-share-preview .win-stats{
  display:none;
}

.win-card.has-share-preview .win-share-preview{
  display:block;
}

[data-theme="light"] .win-card{
  background: rgba(255,255,255,0.80);
}

.win-badge{
  width: 54px;
  height: 54px;
  margin: -42px auto 10px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  background: var(--accent);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.25);
}

.win-card h2{
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.2px;
}

.win-subtitle{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
}

.win-stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
[data-theme="light"] .win-stats{ background: rgba(0,0,0,0.04); }

.win-stat-label{
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.win-stat-value{
  font-size: 14px;
  font-weight: 800;
}

.win-pb-badge{
  background: linear-gradient(135deg, var(--accent), var(--accent-flip));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 18px;
  border-radius: 20px;
  text-align: center;
  margin: -4px auto 12px;
  width: fit-content;
  animation: pb-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pb-pop{
  from{ opacity:0; transform:scale(0.6); }
  to  { opacity:1; transform:scale(1);   }
}

.win-actions{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.win-actions .win-share-button{
  color: var(--accent-on);
  border-color: rgba(var(--accent-rgb), .72);
  background: var(--accent);
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), .25);
}

@keyframes winPop{
  from{ transform: scale(0.96); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}


/* Achievements */
.ach-subtitle{ padding: 6px 14px 10px; font-size:10px; letter-spacing:1px; text-transform:uppercase; color: var(--muted); opacity:.85; }

.ach-wrap{ padding: 10px 20px 20px; display:flex; flex-direction:column; gap:12px; }
.ach-section{ background: var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.ach-section summary{ list-style:none; cursor:pointer; padding:14px 14px; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:space-between; }
.ach-section summary::-webkit-details-marker{ display:none; }
.ach-section summary::after{ content:'▾'; opacity:.55; font-size:12px; }
.ach-section[open] summary::after{ content:'▴'; }
.ach-list{ padding: 0 14px 14px; display:flex; flex-direction:column; gap:10px; }

/* ===== Daily streak summary card (Achievements) ===== */
.streak-card{
  margin: 10px 20px 12px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30,41,59,0.70), rgba(15,23,42,0.55));
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}
[data-theme="light"] .streak-card{
  background: linear-gradient(180deg, rgba(2,6,23,0.06), rgba(2,6,23,0.03));
  box-shadow: none;
}

.streak-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.streak-kicker{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .9;
}
.streak-big{
  margin-top: 4px;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  display:flex;
  align-items: baseline;
  gap: 6px;
}
.streak-emoji{ font-size: 18px; }
.streak-unit{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  opacity: .9;
}
.streak-pill{
  margin-top: 2px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
[data-theme="light"] .streak-pill{ background: rgba(0,0,0,0.04); }

.streak-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 360px){
  .streak-grid{ grid-template-columns: 1fr; }
}
.streak-stat .label{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .9;
  margin-bottom: 4px;
}
.streak-stat .value{
  font-size: 14px;
  font-weight: 900;
}

.streak-foot{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size: 11px;
  color: var(--muted);
  opacity: .95;
}
.streak-reset{ white-space: nowrap; }
@media (max-width: 360px){
  .streak-foot{ flex-direction: column; }
  .streak-reset{ white-space: normal; }
}

.ach-item{ display:flex; gap:10px; align-items:flex-start; padding: 10px 10px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,0.04); }
[data-theme="light"] .ach-item{ background: rgba(0,0,0,0.03); }
.ach-dot{ display:none !important; }
.ach-item b{ font-size:13px; }
.ach-item span{ font-size:11px; color: var(--muted); }

/* Locked achievements: keep icons/badges visible, blur ONLY the text */
.ach-text{ display:flex; flex-direction:column; gap:2px; }
.ach-title{ font-size:13px; font-weight:800; }
.ach-desc{ font-size:11px; color: var(--muted); }

.ach-item.locked .ach-title,
.ach-item.locked .ach-desc,
.ach-item.locked-soft .ach-title,
.ach-item.locked-soft .ach-desc{
  filter: blur(6px);
  opacity: .55;
  user-select:none;
}

.ach-day{
  width: 42px;
  flex: 0 0 42px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:1px;
}
.ach-day-label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .7px;
  color: var(--muted);
}
.ach-day-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  min-width: 34px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  border: none;
}

/* Locked achievements: keep the same badge, but muted */
.ach-item.locked .ach-day-num{
  opacity: .35;
  filter: saturate(.2);
}

/* ============================
   General achievements (badge-card style)
   ============================ */

/* The badge "card" row */
.badge-card{
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  padding: 10px 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 60px;
}

/* The icon bubble */
.badge-icon{
  /* Default (will be overridden per group via --achA/--achB) */
  --achA: rgba(var(--accent-rgb),0.95);
  --achB: color-mix(in srgb, var(--accent) 70%, black);
  --achBorder: rgba(var(--accent-rgb),0.55);
  --achGlow: rgba(var(--accent-rgb),0.28);

  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  border: 1px solid var(--achBorder);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.25), rgba(255,255,255,0.02) 40%),
              radial-gradient(circle at top, var(--achA), var(--achB));
  box-shadow: 0 0 14px var(--achGlow);
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Variants */
.badge-icon.unlocked{ filter:none; opacity: 1; }
.badge-icon.progress{
  /* Still locked (shows 🔒), but indicate partial progress subtly */
  box-shadow: 0 0 18px color-mix(in srgb, var(--achGlow) 70%, rgba(255,255,255,0.18));
}
.badge-icon.locked{ opacity: 0.55; filter: saturate(.25); }

/* Text bits */
.badge-title{ font-size: 13px; font-weight: 500; }
.badge-desc{ font-size: 11px; color: var(--text-soft); }
.badge-progress{ margin-top: 2px; font-size: 11px; color: var(--text-soft); }
.badge-progress strong{ color: var(--accent-blue); }
.badge-locked-label{ font-size: 11px; color: var(--locked); }

/* Locked state: dim the icon + title, but keep the description fully readable
   so players can see what they need to do (visibility="visible" achievements).
   Teased achievements show "???" — keep that readable too but slightly muted. */
.badge-card.locked .badge-title{ opacity: 0.55; }
.badge-card.locked .badge-desc{ color: var(--text); opacity: 0.75; }
.badge-card.teased .badge-desc{ color: var(--muted); font-style: italic; }


/* Achievements – Flipudoku accent */
.ach-item.flip .ach-dot{ background: var(--accent-flip); }
.ach-item.flip.unlocked .ach-day-num{
  background: var(--accent-flip);
  border-color: color-mix(in srgb, var(--accent-flip) 65%, transparent);
  color:var(--accent-flip-on,#fff);
}


/* Numpad erase button */
.numpad .numpad-erase{grid-column: span 3;}

/* ===== Achievement Toast ("Achievement Unlocked") ===== */
#toastHost{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(84px + var(--inset-bottom)); /* above bottom nav + gesture area */
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 10050; /* above footer-nav */
}

.toast{
  width: min(420px, calc(100% - 32px));
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(15,17,20,0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);

  display: flex;
  gap: 12px;
  align-items: center;

  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity .2s ease, transform .25s ease;
}

[data-theme="light"] .toast{
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.toast.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* TileSwitch-style achievement badge */
.toast .toast-badge{
  --tileA: rgba(var(--accent-rgb),0.95);
  --tileB: color-mix(in srgb, var(--accent) 70%, black);
  --tileBorder: rgba(var(--accent-rgb),0.65);
  --tileGlow: rgba(var(--accent-rgb),0.35);

  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--tileBorder);
  background: linear-gradient(145deg, var(--tileA), var(--tileB));
  box-shadow:
    0 10px 26px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 10px 18px var(--tileGlow);
}

.toast .toast-badge::before{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.02));
  pointer-events:none;
}

.toast .toast-badge::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  filter: blur(0.2px);
  pointer-events:none;
}

.toast .toast-badge-emoji{
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(0.5px);
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Tone variants based on achievement group */
.toast .toast-badge[data-tone="streak"]{
  --tileA: rgba(34,197,94,0.95);
  --tileB: rgba(14,139,60,0.95);
  --tileBorder: rgba(100,230,160,0.65);
  --tileGlow: rgba(34,197,94,0.28);
}
.toast .toast-badge[data-tone="progress"]{
  --tileA: rgba(250,204,21,0.95);
  --tileB: rgba(161,98,7,0.95);
  --tileBorder: rgba(253,230,138,0.70);
  --tileGlow: rgba(250,204,21,0.22);
}
.toast .toast-badge[data-tone="time"]{
  --tileA: rgba(56,189,248,0.95);
  --tileB: rgba(14,116,144,0.95);
  --tileBorder: rgba(125,211,252,0.70);
  --tileGlow: rgba(56,189,248,0.20);
}
.toast .toast-badge[data-tone="play"]{
  --tileA: rgba(244,114,182,0.95);
  --tileB: rgba(190,24,93,0.95);
  --tileBorder: rgba(249,168,212,0.70);
  --tileGlow: rgba(244,114,182,0.20);
}
.toast .toast-badge[data-tone="mode"]{
  --tileA: rgba(167,139,250,0.95);
  --tileB: rgba(88,28,135,0.95);
  --tileBorder: rgba(196,181,253,0.70);
  --tileGlow: rgba(167,139,250,0.20);
}

.toast .toast-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb),.18);
  border: 1px solid rgba(var(--accent-rgb),.35);
  font-size: 18px;
}

.toast .toast-kicker{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

.toast .toast-title{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
  color: var(--text);
}

.toast .toast-desc{
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted);
  margin-top: 2px;
}


/* === Onboarding === */
body.onboarding-mode .main-header,
body.onboarding-mode .footer-nav{
  display:none;
}



/* Onboarding must NOT inherit app safe-area + bottom-nav padding,
   otherwise the Back/Next buttons get pushed off-screen */
body.onboarding-mode .app{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.onboarding-mode .screen{
  padding-bottom: 0 !important;
  height: 100svh;
}

body.onboarding-mode #onboarding{
  height: 100svh;
  overflow-y: auto; /* allow scroll if needed on tiny screens */
}

/* Use viewport height that behaves well on mobile browsers */
body.onboarding-mode .onb-wrap{
  min-height: 100svh;
}

#onboarding{
  padding: 0;
}

.onb-wrap{
  min-height: 100dvh;
  padding: calc(18px + var(--safe-top)) 16px calc(26px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onb-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.onb-brand{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Onboarding logo (uses favicon-48.png) */
.onb-logo{
  width: 40px;
  height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.onb-logo-img{
  width: 40px;
  height: 40px;
  display:block;
  object-fit: contain;
}

.onb-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.onb-title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
}

.onb-subtitle{
  opacity:.75;
  font-weight: 700;
  font-size: 12px;
}

.onb-progress{
  display:flex;
  gap: 8px;
  align-items:center;
}

.onb-progress .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.18);
}

.onb-progress .dot.active{
  background: rgba(153,96,255,0.9);
  border-color: rgba(153,96,255,0.9);
}

.onb-page{
  display:none;
}

.onb-page.active{
  display:block;
}

.onb-page h2{
  margin: 6px 0 6px;
  font-size: 20px;
}

.onb-page p{
  margin: 0 0 10px;
  opacity: .9;
  line-height: 1.35;
}

.onb-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px;
}

.onb-card-title{
  font-weight: 900;
  margin-bottom: 6px;
}

.onb-card-text{
  opacity: .9;
  line-height: 1.35;
}

.onb-gif{
  width: 100%;
  max-width: 420px;
  display:block;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
}

.onb-links{
  display:grid;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 12px;
}

.menu-item.compact{
  padding: 12px 12px;
}

.onb-checks{
  display:grid;
  gap: 10px;
}

.onb-check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}

.onb-check input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.onb-check span{
  display:grid;
  gap: 2px;
}

.onb-check small{
  opacity:.75;
  font-weight: 650;
  line-height: 1.2;
}

/* Buttons must be next to each other on one line */
.onb-actions{
  margin-top: auto;
  display:flex;
  gap: 10px;
}

.onb-actions .btn{
  flex: 1 1 0;
}

.onb-skip{
  margin-top: 10px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.65);
  font-weight: 800;
  cursor: pointer;
  padding: 8px 0;
}
.onb-skip:hover{
  color: rgba(255,255,255,0.85);
}


/* --- Onboarding: match app/home menu look --- */
.onb-list{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.onb-note{
  cursor: default;
}
.onb-note:active{ transform:none; }

.fb-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb),0.20);
  border: 1px solid rgba(var(--accent-rgb),0.40);
  font-weight: 900;
  letter-spacing: .4px;
}

.onb-nav{
  display:flex;
  gap: 10px;
  margin-top: auto;
}
.onb-nav .menu-item{
  flex: 1 1 0;
  justify-content: center;
  text-align: center;
}
.onb-nav .item-content b{ font-size: 14px; }
.onb-nav .item-content span{ display:none; }
.onb-nav .item-icon{ font-size: 16px; }

.onb-next{
  border-color: rgba(var(--accent-rgb),0.55);
  box-shadow: 0 10px 22px rgba(var(--accent-rgb),0.10);
}
.onb-next:disabled{
  opacity: .45;
  filter: grayscale(1);
  pointer-events: none;
}


/* === Achievements progress header === */
.ach-progress{
  margin: 10px 0 14px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}

/* (removed) Bottom progress bar on Achievements → General */
.ach-progress-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.ach-progress-title{ font-weight: 900; letter-spacing:.2px; }
.ach-progress-meta{ opacity:.85; font-weight: 800; font-size: 12px; }
.ach-progress-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow:hidden;
}
.ach-progress-fill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(168,85,247,0.95), rgba(59,130,246,0.95));
  box-shadow: 0 0 18px rgba(168,85,247,0.35), 0 0 18px rgba(59,130,246,0.25);
  transition: width .25s ease;
}

/* Shiny icon bubble for achievements */
.ach-item .ach-day-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 24px rgba(0,0,0,0.25);
  position: relative;
}
.ach-item .ach-day-num::after{
  content:"";
  position:absolute;
  inset: 3px 6px auto 6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  filter: blur(0.2px);
}

/* Category header inside General achievements */
.ach-cat{
  margin: 12px 0 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 900;
  letter-spacing:.3px;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .9;
}


/* === General achievements: category colors === */
.ach-cat{ position: relative; padding-left: 18px; }
.ach-cat::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: rgba(168,85,247,0.55);
  opacity:.9;
}

.ach-cat--core{ background: rgba(168,85,247,0.10); border-color: rgba(168,85,247,0.22); }
.ach-cat--core::before{ background: rgba(168,85,247,0.75); }

.ach-cat--streaks{ background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.22); }
.ach-cat--streaks::before{ background: rgba(34,197,94,0.75); }

.ach-cat--progress{ background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.22); }
.ach-cat--progress::before{ background: rgba(59,130,246,0.75); }

.ach-cat--time{ background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.22); }
.ach-cat--time::before{ background: rgba(245,158,11,0.80); }

.ach-cat--playstyle{ background: rgba(236,72,153,0.10); border-color: rgba(236,72,153,0.22); }
.ach-cat--playstyle::before{ background: rgba(236,72,153,0.80); }

.ach-cat--mode{ background: rgba(20,184,166,0.10); border-color: rgba(20,184,166,0.22); }
.ach-cat--mode::before{ background: rgba(20,184,166,0.80); }

/* Badge cards inherit group tint (NO left accent line) */
.badge-card[data-group]{
  position: relative;
  overflow: hidden;
}

/* Subtle tint per group */
.badge-card[data-group="Core"]{ background: linear-gradient(0deg, rgba(168,85,247,0.06), rgba(168,85,247,0.06)), var(--card-bg); }
.badge-card[data-group="Streaks"]{ background: linear-gradient(0deg, rgba(34,197,94,0.06), rgba(34,197,94,0.06)), var(--card-bg); }
.badge-card[data-group="Progress"]{ background: linear-gradient(0deg, rgba(59,130,246,0.06), rgba(59,130,246,0.06)), var(--card-bg); }
.badge-card[data-group="Time"]{ background: linear-gradient(0deg, rgba(245,158,11,0.06), rgba(245,158,11,0.06)), var(--card-bg); }
.badge-card[data-group="Playstyle"]{ background: linear-gradient(0deg, rgba(236,72,153,0.06), rgba(236,72,153,0.06)), var(--card-bg); }
.badge-card[data-group="Mode"]{ background: linear-gradient(0deg, rgba(20,184,166,0.06), rgba(20,184,166,0.06)), var(--card-bg); }

/* Circle color per subject (left icon bubble) */
.badge-card[data-group="Core"] .badge-icon{
  --achA: rgba(168,85,247,0.95);
  --achB: rgba(88,28,135,0.95);
  --achBorder: rgba(196,181,253,0.55);
  --achGlow: rgba(168,85,247,0.28);
}
.badge-card[data-group="Streaks"] .badge-icon{
  --achA: rgba(34,197,94,0.95);
  --achB: rgba(14,139,60,0.95);
  --achBorder: rgba(134,239,172,0.55);
  --achGlow: rgba(34,197,94,0.22);
}
.badge-card[data-group="Progress"] .badge-icon{
  --achA: rgba(59,130,246,0.95);
  --achB: rgba(30,64,175,0.95);
  --achBorder: rgba(147,197,253,0.55);
  --achGlow: rgba(59,130,246,0.22);
}
.badge-card[data-group="Time"] .badge-icon{
  --achA: rgba(245,158,11,0.95);
  --achB: rgba(161,98,7,0.95);
  --achBorder: rgba(253,230,138,0.55);
  --achGlow: rgba(245,158,11,0.20);
}
.badge-card[data-group="Playstyle"] .badge-icon{
  --achA: rgba(236,72,153,0.95);
  --achB: rgba(190,24,93,0.95);
  --achBorder: rgba(249,168,212,0.55);
  --achGlow: rgba(236,72,153,0.20);
}
.badge-card[data-group="Mode"] .badge-icon{
  --achA: rgba(20,184,166,0.95);
  --achB: rgba(15,118,110,0.95);
  --achBorder: rgba(153,246,228,0.55);
  --achGlow: rgba(20,184,166,0.20);
}

/* === Locked general achievements: blur (lock icon is inside the left circle) === */
.badge-card.locked .badge-title,
.badge-card.locked .badge-desc,
.badge-card.locked .badge-progress,
.badge-card.locked .badge-locked-label{
  filter: blur(6px);
  opacity: .55;
  user-select:none;
}


/* ============================
   Splash / Loading screen
   ============================ */
.splash{
  position: fixed;
  inset: 0;
  z-index: 30000;

  /* Match the blue loading artwork while it fills every phone ratio. */
  background: #376ddd;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  box-sizing: border-box;
}

/* Fullscreen artwork. Important branding stays inside the safe central area. */
.splash-logo,
.splash-full{
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;

  object-fit: cover;
  object-position: center;

  display: block;
}

/* If you still keep the old text element in HTML, hide it (the PNG already contains text) */
.splash-text{
  display: none;
}

.splash.hide{
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

@media (orientation:landscape){
  .splash-logo,
  .splash-full{ object-fit:contain; }
}


/* ===== Share modal ===== */
.share-modal{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.55);
  z-index:9999;
}
.share-modal.active{ display:flex; }
.share-card{
  width:min(92vw, 440px);
  max-height: calc(100dvh - 24px);
  overflow-y:auto;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--border-strong);
  border-radius:18px;
  padding:14px;
  backdrop-filter: blur(10px);
  box-shadow:0 22px 70px rgba(0,0,0,.38);
}
.share-title{
  color:var(--text);
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:10px;
}
.share-preview{
  width:100%;
  max-height: min(52dvh, 520px);
  object-fit:contain;
  border-radius:16px;
  display:block;
  margin:10px 0 12px;
  border:1px solid var(--border);
}
.share-actions{
  display:flex;
  gap:10px;
}
.share-actions .menu-item{ flex:1; }
.share-platforms{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.share-platform-btn{
  min-width:0;
  min-height:76px;
  padding:9px 5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(0,0,0,.08);
}
.share-platform-btn:active{ transform:scale(.97); }
.share-platform-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.share-platform-icon{
  width:34px;
  height:34px;
  display:block;
}
.share-status{
  min-height:16px;
  margin:9px 2px 0;
  color:var(--muted);
  font-size:11px;
  text-align:center;
}
.share-note{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,0.60);
  text-align:center;
}


/* ===== Achievements tabs + progress (v2) ===== */
.ach-top{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding: 6px 14px 0;
}

.ach-progress{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 12px 12px;
}

.ach-progress-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.ach-progress-title{
  font-weight: 900;
  letter-spacing: .2px;
}

.ach-progress-stats{
  opacity:.85;
  font-weight: 800;
  font-size: 12px;
}

.ach-progress-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow:hidden;
}

.ach-progress-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(239,68,68,0.95), rgba(34,197,94,0.95));
}

.ach-tabs{
  display:flex;
  gap:8px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.ach-tab{
  flex:1;
  border: 0;
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 900;
  letter-spacing: .2px;
  background: transparent;
  color: inherit;
  opacity:.80;
}

.ach-tabs:has(.ach-tab:nth-child(4)) .ach-tab{ padding-left:6px; padding-right:6px; font-size:11px; }

.ach-tab.active{
  opacity:1;
  background: rgba(255,255,255,0.12);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.ach-panels{
  padding: 8px 0 12px;
}

.ach-panel{ display:none; }
.ach-panel.active{ display:block; }

/* ===== Achievements hub: Overview / Badges / Cups ===== */
.achievement-overview-panel,
.achievement-badges-panel{
  padding: 4px 14px 22px;
}

.journey-card{
  position:relative;
  overflow:hidden;
  padding:18px;
  border:1px solid rgba(var(--accent-rgb),.34);
  border-radius:22px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #163b75), #18265c 82%);
  box-shadow:0 14px 34px rgba(15,23,42,.24);
}
.journey-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.journey-heading h2,
.badge-collection-head h2{ margin:3px 0 0; font-size:20px; line-height:1.15; }
.journey-heading > strong{ font-size:26px; line-height:1; }
.journey-kicker{ display:block; font-size:9px; font-weight:900; letter-spacing:.16em; opacity:.72; }
.journey-progress{ height:9px; margin-top:17px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.18); }
.journey-progress span{ display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#fff,#b9e7ff); transition:width .35s ease; }
.journey-count{ margin-top:7px; font-size:11px; opacity:.82; }
.journey-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:17px; }
.journey-stats > div{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:6px; padding:10px 8px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.09); }
.journey-stats > div > span{ grid-row:1 / span 2; font-size:18px; }
.journey-stats b{ font-size:17px; line-height:1; }
.journey-stats small{ margin-top:2px; font-size:9px; opacity:.72; white-space:nowrap; }

.next-goals-section{ margin-top:18px; }
.achievement-section-heading{ display:flex; align-items:flex-end; justify-content:space-between; margin:0 3px 9px; }
.achievement-section-heading span{ display:flex; flex-direction:column; }
.achievement-section-heading small,
.achievement-stats-toggle small{ font-size:9px; font-weight:900; letter-spacing:.14em; color:var(--muted); }
.achievement-section-heading b,
.achievement-stats-toggle b{ margin-top:2px; font-size:16px; }
.achievement-section-heading button{ border:0; padding:7px 4px; background:transparent; color:var(--accent); font-size:12px; font-weight:900; }
.next-goals-group + .next-goals-group{ margin-top:14px; }
.next-goals-group-label{ margin:0 3px 8px; font-size:10px; font-weight:900; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.next-goals{ display:grid; gap:8px; }
.next-goal{ width:100%; display:flex; align-items:center; gap:11px; padding:11px; border:1px solid var(--border); border-radius:15px; color:inherit; text-align:left; background:var(--card-bg); }
.next-goal-icon{ width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:12px; background:rgba(var(--accent-rgb),.12); font-size:19px; }
.next-goal-copy{ min-width:0; flex:1; display:grid; grid-template-columns:1fr auto; gap:3px 8px; }
.next-goal-copy b{ font-size:12px; }
.next-goal-copy small{ font-size:10px; color:var(--muted); }
.next-goal-track{ grid-column:1/-1; height:5px; overflow:hidden; border-radius:999px; background:rgba(127,127,127,.18); }
.next-goal-track i{ display:block; height:100%; border-radius:inherit; background:var(--accent); }
.next-goal-arrow{ color:var(--muted); font-size:22px; }

.achievement-stats-section{ margin-top:12px; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--card-bg); }
.achievement-stats-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border:0; color:inherit; text-align:left; background:transparent; }
.achievement-stats-toggle > span:first-child{ display:flex; flex-direction:column; }
.achievement-stats-chevron{ font-size:22px; transition:transform .2s ease; }
.achievement-stats-toggle[aria-expanded="true"] .achievement-stats-chevron{ transform:rotate(180deg); }
.achievement-streaks{ padding:0 10px 10px; border-top:1px solid var(--border); }
.achievement-streaks[hidden]{ display:none; }
.achievement-streaks .streak-card{ margin:10px 0 0; box-shadow:none; }

.badge-collection-head{ display:flex; align-items:flex-end; justify-content:space-between; padding:5px 2px 12px; }
.badge-collection-head > span:last-child{ color:var(--muted); font-size:11px; font-weight:800; }
.badge-filters{ display:flex; gap:6px; padding:4px; margin-bottom:16px; border:1px solid var(--border); border-radius:14px; background:rgba(127,127,127,.07); overflow-x:auto; }
.badge-filter{ flex:1; min-width:max-content; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:inherit; font-size:11px; font-weight:900; }
.badge-filter.active{ color:var(--accent-on); background:var(--accent); box-shadow:0 5px 14px rgba(var(--accent-rgb),.23); }
.badge-category[hidden]{ display:none !important; }
.badge-category{ margin-bottom:20px; }
.badge-category > h3{ margin:0 2px 9px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.achievement-badges-panel .streak-category > p{ margin:-3px 2px 10px; font-size:11px; color:var(--muted); }
.streak-roll-frame{ position:relative; height:208px; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--card-bg); }
.streak-roll-frame::before,
.streak-roll-frame::after{ content:""; position:absolute; left:0; right:0; height:56px; z-index:2; pointer-events:none; }
.streak-roll-frame::before{ top:0; background:linear-gradient(var(--card-bg),transparent); }
.streak-roll-frame::after{ bottom:0; background:linear-gradient(transparent,var(--card-bg)); }
.streak-roll-marker{ position:absolute; z-index:1; top:50%; left:9px; right:9px; height:64px; transform:translateY(-50%); border:2px solid rgba(var(--accent-rgb),.55); border-radius:15px; background:rgba(var(--accent-rgb),.07); box-shadow:0 0 22px rgba(var(--accent-rgb),.12); pointer-events:none; }
.achievement-badges-panel .streak-category .ach-list{ position:relative; height:100%; overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y mandatory; scrollbar-width:none; display:flex; flex-direction:column; gap:6px; padding:74px 12px; }
.achievement-badges-panel .streak-category .ach-list::-webkit-scrollbar{ display:none; }
.achievement-badges-panel .ach-item{ box-sizing:border-box; flex:0 0 60px; min-height:60px; width:100%; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:13px; text-align:left; scroll-snap-align:center; cursor:pointer; transition:transform .18s ease,opacity .18s ease,border-color .18s ease; }
.achievement-badges-panel .ach-item:not(.current){ opacity:.57; transform:scale(.96); }
.achievement-badges-panel .ach-item.current{ border-color:rgba(var(--accent-rgb),.48); background:rgba(var(--accent-rgb),.1); }
.achievement-badges-panel .ach-day{ width:40px; flex:0 0 40px; margin:0; }
.achievement-badges-panel .ach-day-label{ display:none; }
.achievement-badges-panel .ach-day-num{ width:36px; height:36px; padding:0; border-radius:50%; font-size:13px; }
.achievement-badges-panel .ach-text{ min-width:0; }
.achievement-badges-panel .ach-title{ font-size:12px; line-height:1.2; font-weight:900; }
.achievement-badges-panel .ach-desc{ display:block; margin-top:2px; font-size:10px; line-height:1.2; }
.achievement-badges-panel .ach-item.locked .ach-title,
.achievement-badges-panel .ach-item.locked .ach-desc{ filter:none; user-select:auto; }

.achievement-badges-panel [data-badge-category="general"] .ach-list{ display:flex; flex-direction:column; gap:8px; padding:0; }
.achievement-badges-panel .ach-cat{ margin:12px 1px 1px; font-size:10px; font-weight:900; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.achievement-badges-panel .badge-card{ min-width:0; min-height:68px; padding:10px 12px; display:flex; align-items:center; gap:11px; border-radius:14px; text-align:left; cursor:pointer; }
.achievement-badges-panel .badge-icon{ width:42px; height:42px; font-size:21px; }
.achievement-badges-panel .badge-text{ min-width:0; }
.achievement-badges-panel .badge-title{ font-size:12px; line-height:1.2; font-weight:900; }
.achievement-badges-panel .badge-desc{ display:block; margin-top:3px; font-size:11px; line-height:1.3; }
.achievement-badges-panel .badge-progress{ margin-top:5px; font-size:10px; }
.achievement-badges-panel .ach-item.locked .ach-title,
.achievement-badges-panel .ach-item.locked .ach-desc,
.achievement-badges-panel .badge-card.locked .badge-title,
.achievement-badges-panel .badge-card.locked .badge-desc,
.achievement-badges-panel .badge-card.locked .badge-progress,
.achievement-badges-panel .badge-card.locked .badge-locked-label{ filter:none; user-select:auto; }

.achievement-detail-modal{ position:fixed; inset:0; z-index:20050; display:grid; place-items:end center; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.achievement-detail-modal[hidden]{ display:none; }
.achievement-detail-modal.open{ opacity:1; pointer-events:auto; }
.achievement-detail-backdrop{ position:absolute; inset:0; width:100%; border:0; background:rgba(2,6,23,.66); backdrop-filter:blur(3px); }
.achievement-detail-card{ position:relative; width:min(420px,calc(100% - 24px)); margin-bottom:calc(82px + var(--inset-bottom)); padding:25px 22px 22px; border:1px solid var(--border); border-radius:24px; background:var(--panel); color:var(--text); text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.4); transform:translateY(18px); transition:transform .18s ease; }
.achievement-detail-modal.open .achievement-detail-card{ transform:translateY(0); }
.achievement-detail-close{ position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(127,127,127,.12); color:inherit; font-size:24px; }
.achievement-detail-icon{ width:64px; height:64px; margin:0 auto 10px; display:grid; place-items:center; border-radius:20px; background:rgba(var(--accent-rgb),.13); font-size:34px; }
.achievement-detail-status{ display:inline-block; padding:4px 8px; border-radius:999px; background:rgba(127,127,127,.15); color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.12em; }
.achievement-detail-status.unlocked{ color:#087f5b; background:rgba(16,185,129,.16); }
.achievement-detail-card h2{ margin:10px 0 6px; font-size:21px; }
.achievement-detail-card p{ margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.achievement-detail-progress{ margin-top:12px; color:var(--accent); font-size:12px; font-weight:900; }

@media (max-width:380px){
  .journey-card{ padding:15px; }
  .journey-stats{ gap:5px; }
  .journey-stats > div{ padding:9px 5px; column-gap:4px; }
  .journey-stats small{ font-size:8px; }
  .achievement-badges-panel .ach-item{ gap:9px; padding:10px; }
}



/* Win screen actions: center labels inside buttons */
.win-actions .menu-item{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Difficulty picker shown after tapping Play again */
.win-diff-picker{
  display:none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.win-diff-picker.active{
  display:block;
}
.win-diff-title{
  text-align:center;
  font-weight: 700;
  margin-bottom: 10px;
}
.win-diff-buttons{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:center;
}
.win-diff-buttons .menu-item{
  min-width: 120px;
}
.win-diff-cancel{
  margin-top: 10px;
}


/* Win actions: center button labels */
.win-actions .menu-item{
  justify-content: center;
  text-align: center;
}

/* Difficulty picker as a separate modal popup */
.win-diff-modal{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.win-diff-modal.active{
  display: flex;
}

.win-diff-card{
  width: min(340px, 92vw);
  border-radius: 18px;
  background: rgba(12,16,26,0.94);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.50);
  padding: 14px;
}

.win-diff-title{
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.92);
  text-align: center;
}

.win-diff-buttons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.win-diff-cancel{
  width: 100%;
  opacity: .9;
}
/* ===== Difficulty buttons (stars + color + gradient bar) ===== */
.diff-btn{
  position: relative;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-left: 14px; /* room for the left bar */
}

.diff-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background: var(--diff-bar, rgba(255,255,255,0.25));
  opacity: .95;
}

.diff-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}


.diff-stars{
  font-size:12px;
  letter-spacing:1px;
  opacity:.95;
}

.diff-pill{
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  opacity:.95;
}

/* Color accents (Easy = green, Expert = red) */
.diff-easy{
  --diff-bar: linear-gradient(180deg, rgba(34,197,94,1), rgba(16,185,129,1));
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.10);
}
.diff-easy .diff-stars{ color: rgba(34,197,94,.95); }
.diff-easy .diff-pill{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.14);
}

.diff-medium{
  --diff-bar: linear-gradient(180deg, rgba(250,204,21,1), rgba(245,158,11,1));
  border-color: rgba(250,204,21,.55);
  background: rgba(250,204,21,.10);
}
.diff-medium .diff-stars{ color: rgba(250,204,21,.95); }
.diff-medium .diff-pill{
  border-color: rgba(250,204,21,.45);
  background: rgba(250,204,21,.14);
}

.diff-hard{
  --diff-bar: linear-gradient(180deg, rgba(251,146,60,1), rgba(249,115,22,1));
  border-color: rgba(251,146,60,.55);
  background: rgba(251,146,60,.10);
}
.diff-hard .diff-stars{ color: rgba(251,146,60,.95); }
.diff-hard .diff-pill{
  border-color: rgba(251,146,60,.45);
  background: rgba(251,146,60,.14);
}

.diff-expert{
  --diff-bar: linear-gradient(180deg, rgba(239,68,68,1), rgba(220,38,38,1));
  border-color: rgba(239,68,68,.60);
  background: rgba(239,68,68,.10);
}
.diff-expert .diff-stars{ color: rgba(239,68,68,.95); }
.diff-expert .diff-pill{
  border-color: rgba(239,68,68,.50);
  background: rgba(239,68,68,.14);
}


/* Ensure difficulty picker appears above win overlay when triggered from win screen */
#difficultyModal{ z-index: 95; }


/* Optional: cover unsafe areas with same background color */
body::before, body::after{
  content:"";
  position: fixed;
  left: 0; right: 0;
  background: var(--bg);
  z-index: 2000;
  pointer-events: none;
}
body::before{ top: 0; height: var(--inset-top); }
body::after{ bottom: 0; height: var(--inset-bottom); }

/* Force Back/Next to always have equal height on mobile */
.onb-nav{
  align-items: stretch;          /* make children stretch to same height */
}

.onb-nav .onb-navbtn{
  min-height: 54px;              /* pick the height you like (52–60px) */
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep the label from doing weird wrapping */
.onb-nav .item-content b{
  white-space: nowrap;
  line-height: 1;
}

/* Achievements: prevent extra empty band above fixed bottom nav on phones */
#achievements{
  padding-bottom: 0 !important;
}
#achievements .ach-panel:last-child,
#achievements .ach-list:last-child{
  margin-bottom: 0;
}


/* Never let the gameplay banner sit above the win overlay/buttons */
body.win-open .ad-banner{
  display:none !important;
}


/* Brand strip (menu pages only) */
.brand-strip{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 12px 6px;
  box-sizing: border-box;
}
.brand-strip img{
  width: min(900px, 100%);
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* ===== Pause button & flip counter (topbar-left) ===== */
.topbar-left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pause-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.pause-btn:active { opacity: 0.7; }

/* ===== Pause overlay ===== */
.pause-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}
.pause-overlay.active { display: flex; }

.game-blackout {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 45; /* below modal-overlay (z-index:50) so the quit modal shows on top */
}
.game-blackout.active { display: block; }

.pause-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 40px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.pause-icon { font-size: 36px; line-height: 1; }
.pause-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}
.pause-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.pause-resume-btn {
  width: 100%;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}

/* ===== Resume banner on home ===== */
.resume-banner {
  margin: 0 0 12px 0;
  background: rgba(var(--accent-rgb),.12);
  border: 1px solid rgba(var(--accent-rgb),.35);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.resume-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.resume-icon { font-size: 22px; flex-shrink: 0; }
.resume-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.resume-text b {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resume-text span {
  font-size: 12px;
  color: var(--muted);
}
.resume-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.resume-btn {
  padding: 6px 14px !important;
  font-size: 13px !important;
  white-space: nowrap;
}
.resume-discard {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 6px;
}
.resume-discard:hover { color: var(--text); }

/* ===== Stats tabs inside streak cards ===== */
.stats-tabs{
  display:flex;
  gap:6px;
  margin:10px 0 10px;
}
.stats-tab{
  flex:1;
  padding:5px 0;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.stats-tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-on);
}
[data-theme="light"] .stats-tab.active{
  background:var(--accent);
  color:var(--accent-on);
}
.stats-panel{ display:none; }
.stats-panel.active{ display:block; }

/* Avg / records rows */
.stats-avg-grid{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
}
.stats-avg-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border-soft);
}
[data-theme="light"] .stats-avg-row{
  background:rgba(0,0,0,0.03);
}
.stats-avg-label{
  font-size:12px;
  color:var(--muted);
}
.stats-avg-val{
  font-size:13px;
  font-weight:800;
  color:var(--text);
}