@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* =================================================================
   SUDOKU THEME — all colors, gradients and shadows are tokens here.
   Change a value in :root to re-theme the whole game.
   ================================================================= */
:root{
  /* ---- core game palette (cells, board, text) — WOOD theme ---- */
  --bg:#3a220f;
  --bg-2:#4a2c15;
  --panel:rgba(40,22,10,.82);
  --panel-2:rgba(55,31,14,.85);
  --grid-line:rgba(60,35,15,.35);
  --box-line:#f39a3c;
  --text:#fbe9cf;
  --muted:#d9bc97;
  --accent:#f39a3c;
  --accent-2:#ffb45c;
  --danger:#d8322f;
  --fixed-text:#241509;
  --user-text:#3566b8;       /* digits the player enters (blue) */
  --fixed-alt-text:#c0802f;  /* every other given digit (amber) */
  --selected:#3b2412;
  --peer:#f3dfbc;
  --same-num:#f6cf93;
  --error-bg:#ffb3ab;         /* clash with a digit in the row/column/box (mistake) */
  --error-text:#c8102e;
  --error-ring:#e0323f;
  --warn-bg:#e6d6ff;          /* wrong digit that doesn't clash yet (no mistake counted) */
  --warn-text:#6a24d6;
  --warn-ring:#8b5cf6;

  /* ---- shared primitives ---- */
  --white:#fff;
  --white-05:rgba(255,255,255,.05);
  --white-06:rgba(255,255,255,.06);
  --white-08:rgba(255,255,255,.08);
  --white-10:rgba(255,255,255,.10);
  --white-12:rgba(255,255,255,.12);
  --white-25:rgba(255,255,255,.25);
  --white-92:rgba(255,255,255,.92);
  --shadow-soft:rgba(0,0,0,.12);
  --shadow-medium:rgba(0,0,0,.15);
  --shadow-strong:rgba(0,0,0,.22);
  --shadow-heavy:rgba(0,0,0,.45);
  --shadow-half:rgba(0,0,0,.5);
  --shadow-max:rgba(0,0,0,.55);

  /* ---- wood texture (start screen + game screen) ---- */
  /* matches images/wooden-bg.webp: orange-brown plank, horizontal grain,
     warm glow upper-centre, dark vignette and a few knots */
  --wood-c1:#5e2708;  /* bottom edge */
  --wood-c2:#6e300b;  /* top edge */
  --wood-c3:#d8702a;  /* glow centre */
  --wood-c4:#a84d14;  /* mid plank */
  --wood-grain-dark:rgba(70,28,6,.20);
  --wood-grain-soft:rgba(70,28,6,.12);
  --wood-grain-light:rgba(255,200,140,.12);
  --wood-band:rgba(80,32,8,.16);
  --wood-sheen:rgba(255,165,85,.60);
  --wood-vignette:rgba(40,15,2,.65);
  --wood-knot:rgba(50,20,4,.70);
  --wood-knot-ring:rgba(30,12,3,.22);
  --wood-bg:
    /* knots: dark core + a faint growth ring around it */
    radial-gradient(ellipse 5% 2.4% at 13% 18%,var(--wood-knot) 0 35%,transparent 80%),
    radial-gradient(ellipse 12% 5% at 13% 18%,transparent 30%,var(--wood-knot-ring) 55%,transparent 85%),
    radial-gradient(ellipse 3.5% 1.8% at 86% 38%,var(--wood-knot) 0 35%,transparent 80%),
    radial-gradient(ellipse 8% 3.6% at 86% 38%,transparent 30%,var(--wood-knot-ring) 55%,transparent 85%),
    radial-gradient(ellipse 5% 2.4% at 9% 68%,var(--wood-knot) 0 35%,transparent 80%),
    radial-gradient(ellipse 11% 4.8% at 9% 68%,transparent 30%,var(--wood-knot-ring) 55%,transparent 85%),
    /* edge vignette + central glow */
    radial-gradient(ellipse 85% 75% at 50% 40%,transparent 55%,var(--wood-vignette) 100%),
    radial-gradient(ellipse 70% 38% at 48% 36%,var(--wood-sheen),transparent 72%),
    /* horizontal grain: layers with uneven periods so the lines don't look ruled */
    repeating-linear-gradient(178.8deg,var(--wood-grain-dark) 0 1px,transparent 1px 7px,var(--wood-grain-soft) 7px 8px,transparent 8px 13px),
    repeating-linear-gradient(180.6deg,var(--wood-grain-soft) 0 1px,transparent 1px 23px),
    repeating-linear-gradient(179.4deg,var(--wood-grain-light) 0 2px,transparent 2px 17px,var(--wood-grain-light) 17px 18px,transparent 18px 41px),
    repeating-linear-gradient(180.3deg,var(--wood-band) 0 9px,transparent 9px 37px,var(--wood-grain-soft) 37px 44px,transparent 44px 97px),
    linear-gradient(180deg,var(--wood-c2) 0%,var(--wood-c4) 28%,var(--wood-c3) 42%,var(--wood-c4) 64%,var(--wood-c1) 100%);

  /* ---- page background ---- */
  --page-glow-c1:rgba(160,90,40,.18);
  --page-glow-c2:rgba(120,70,30,.20);
  --page-grad-c1:#2a170a;
  --page-grad-c2:#1f1107;
  --page-grad-c3:#150b04;
  --page-bg:
    radial-gradient(circle at 15% 75%,var(--page-glow-c1),transparent 28%),
    radial-gradient(circle at 88% 88%,var(--page-glow-c2),transparent 30%),
    linear-gradient(145deg,var(--page-grad-c1) 0%,var(--page-grad-c2) 48%,var(--page-grad-c3) 100%);

  /* page loader: warm amber glow behind the mini board, fading to deep brown */
  --loader-glow-c1:rgba(255,168,76,.42);
  --loader-glow-c2:rgba(214,112,38,.22);
  --loader-grad-c1:#5a2c0e;
  --loader-grad-c2:#3a1b08;
  --loader-grad-c3:#1c0d04;
  --loader-bg:
    radial-gradient(ellipse 60% 42% at 50% 46%,var(--loader-glow-c1),transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 50%,var(--loader-glow-c2),transparent 75%),
    linear-gradient(160deg,var(--loader-grad-c1) 0%,var(--loader-grad-c2) 50%,var(--loader-grad-c3) 100%);

  --blur1-border:rgba(200,120,50,.10);
  --blur1-shadow-c1:rgba(220,140,60,.08);
  --blur1-shadow:0 0 100px var(--blur1-shadow-c1);
  --blur2-border:rgba(200,120,50,.12);
  --blur2-shadow-c1:rgba(220,140,60,.10);
  --blur2-shadow:0 0 100px var(--blur2-shadow-c1);

  --watermark-color:rgba(30,14,4,.10);

  /* ---- header / logo / title ---- */
  --logo-grad-c1:#f7a64b;
  --logo-grad-c2:#b8661f;
  --logo-bg:linear-gradient(145deg,var(--logo-grad-c1),var(--logo-grad-c2));
  --logo-shadow-c1:rgba(243,154,60,.28);
  --logo-shadow:0 8px 28px var(--logo-shadow-c1);

  --title-grad-c2:#ffe2b8;
  --title-grad-c3:#f39a3c;
  --title-bg:linear-gradient(90deg,var(--white) 20%,var(--title-grad-c2) 55%,var(--title-grad-c3) 90%);

  --subtitle-text:#e6caa3;

  /* ---- difficulty toolbar (dark brown pills, amber glow when active) ---- */
  --toolbar-radius:19px;
  --diffgroup-bg:linear-gradient(180deg,rgba(120,76,42,.55) 0%,rgba(62,36,17,.62) 100%);
  --diffgroup-border:rgba(235,190,135,.32);
  --diffgroup-inset-c1:rgba(255,225,180,.28);
  --diffgroup-shadow:inset 0 1px 0 var(--diffgroup-inset-c1),0 2px 5px rgba(20,8,0,.30);

  --diffbtn-border:rgba(235,190,135,.32);
  --diffbtn-text:#f7ead6;

  --diffactive-grad-c1:rgba(140,88,46,.62);
  --diffactive-grad-c2:rgba(84,50,22,.66);
  --diffactive-bg:linear-gradient(180deg,var(--diffactive-grad-c1),var(--diffactive-grad-c2));
  --diffactive-border:#ffab52;
  --diffactive-shadow-c1:rgba(255,150,50,.55);
  --diffactive-shadow:0 0 0 1px rgba(255,175,90,.45),0 0 12px var(--diffactive-shadow-c1),inset 0 1px 0 rgba(255,225,180,.3);

  /* ---- stats bar ---- */
  --stat-grad-c1:rgba(78,46,22,.62);
  --stat-grad-c2:rgba(48,27,11,.68);
  --stat-bg:linear-gradient(180deg,var(--stat-grad-c1),var(--stat-grad-c2));
  --stat-border:rgba(235,190,135,.24);
  --stat-shadow:inset 0 1px 0 rgba(255,225,180,.18),0 2px 5px rgba(20,8,0,.30);
  --stat-label:#f0dcc0;
  --mistake-color:#fbe9cf;
  --warning-color:#ff7a4d;

  /* ---- board ---- */
  /* board background shows through the gaps = the thick 3x3 separator lines */
  --board-bg:#2a170a;
  --board-border:#2a170a;
  --board-shadow-c1:transparent;
  --board-shadow-c2:transparent;
  --board-shadow:0 6px 16px rgba(0,0,0,.45);

  --cursor-color:#f39a3c;
  --cursor-glow-c1:rgba(255,150,50,.75);
  --cursor-shadow:0 0 0 2px var(--cursor-color), 0 0 12px var(--cursor-glow-c1);

  /* ivory tiles */
  --cell-bg:linear-gradient(180deg,#fdf6e8 0%,#f1e3c8 100%);
  --cell-border:rgba(90,55,25,.35);
  --cell-shadow:none;

  /* dark wood frame around every 3x3 box */
  --box-bg:rgba(90,55,25,.45); /* thin lines between cells */
  --box-border:rgba(15,6,0,.85);
  --box-shadow:none;
  --box-active-border:#f39a3c;
  --box-active-shadow:inset 0 0 0 2px var(--box-active-border),inset 0 0 12px rgba(255,150,50,.55);

  --cell-empty-bg-c1:#f4e8d1;
  --cell-empty-bg:linear-gradient(180deg,#fbf3e3 0%,var(--cell-empty-bg-c1) 100%);
  --cell-empty-shadow:var(--cell-shadow);

  --selected-grad-c1:#4a2c15;
  --selected-grad-c2:#2a170a;
  --selected-bg:linear-gradient(180deg,var(--selected-grad-c1),var(--selected-grad-c2));
  --selected-text:#ffd79e;

  /* ---- numpad ---- */
  --numpad-border:rgba(20,9,2,.75);
  --numpad-bg:rgba(40,22,10,.72);
  --numpad-shadow:0 10px 30px var(--shadow-medium);

  --numbtn-grad-c1:rgba(120,76,42,.55);
  --numbtn-grad-c2:rgba(62,36,17,.62);
  --numbtn-bg:linear-gradient(180deg,var(--numbtn-grad-c1),var(--numbtn-grad-c2));
  --numbtn-border:rgba(235,190,135,.32);
  --numbtn-inset-c1:rgba(255,225,180,.28);
  --numbtn-shadow:inset 0 1px 0 var(--numbtn-inset-c1),0 2px 5px rgba(20,8,0,.30);
  --numbtn-hover-border:#f39a3c;
  --numbtn-active-bg:#5a3419;
  --numbtn-edge:rgba(35,17,5,.55);

  --numbtnsel-grad-c1:rgba(150,95,50,.65);
  --numbtnsel-grad-c2:rgba(90,54,24,.7);
  --numbtnsel-bg:linear-gradient(180deg,var(--numbtnsel-grad-c1),var(--numbtnsel-grad-c2));
  --numbtnsel-border:#f39a3c;
  --numbtnsel-shadow-c1:rgba(255,150,50,.6);
  --numbtnsel-shadow:0 0 14px var(--numbtnsel-shadow-c1);

  --erase-grad-c1:rgba(120,76,42,.55);
  --erase-grad-c2:rgba(62,36,17,.62);
  --erase-bg:linear-gradient(180deg,var(--erase-grad-c1),var(--erase-grad-c2));
  --erase-text:#ffb36b;

  --undo-grad-c1:rgba(120,76,42,.55);
  --undo-grad-c2:rgba(62,36,17,.62);
  --undo-bg:linear-gradient(180deg,var(--undo-grad-c1),var(--undo-grad-c2));
  --undo-text:#f7ead6;

  /* ---- primary/secondary buttons (chunky 3D game-style) ---- */
  --btnprimary-grad-c1:#f7a64b;
  --btnprimary-grad-c2:#d27a26;
  --btnprimary-bg:linear-gradient(180deg,var(--btnprimary-grad-c1),var(--btnprimary-grad-c2));
  --btnprimary-border:#ffc27a;
  --btnprimary-shadow-c1:rgba(243,154,60,.28);
  --btnprimary-shadow:0 8px 28px var(--btnprimary-shadow-c1);
  --btnprimary-edge:#8a4a14;

  --btnsecondary-bg:linear-gradient(180deg,rgba(120,76,42,.6),rgba(62,36,17,.68));
  --btnsecondary-edge:rgba(35,17,5,.55);
  --btnsecondary-text:#f3e1c6;
  --btnsecondary-border:rgba(235,190,135,.32);

  /* ---- overlays / modal ---- */
  --overlay-bg:rgba(20,10,3,.78);
  --overlay-strong:rgba(0,0,0,.72);

  --modal-grad-c1:#4a2c15;
  --modal-grad-c2:#2a170a;
  --modal-bg:linear-gradient(160deg,var(--modal-grad-c1),var(--modal-grad-c2));
  --modal-border:rgba(243,154,60,.45);
  --modal-glow-c1:rgba(255,150,50,.22);
  --modal-shadow:0 20px 70px var(--shadow-heavy),0 0 35px var(--modal-glow-c1);

  /* ---- time's up modal ---- */
  --timeup-grad-c1:#4a2c15;
  --timeup-grad-c2:#3a220f;
  --timeup-grad-c3:#2a170a;
  --timeup-bg:linear-gradient(160deg,var(--timeup-grad-c1) 0%,var(--timeup-grad-c2) 55%,var(--timeup-grad-c3) 100%);
  --timeup-border:rgba(255,190,110,.40);
  --timeup-glow-c1:rgba(255,160,70,.14);
  --timeup-inset-c1:rgba(255,160,70,.08);
  --timeup-shadow:0 25px 80px var(--shadow-max),0 0 50px var(--timeup-glow-c1),inset 0 0 60px var(--timeup-inset-c1);

  --grid-overlay-line:rgba(255,200,140,.05);
  --timeup-grid-bg:
    linear-gradient(var(--grid-overlay-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-overlay-line) 1px, transparent 1px);

  --corner-border:rgba(255,190,110,.6);
  --corner-dot:#ffb45c;
  --corner-glow-c1:rgba(255,160,70,.85);
  --corner-shadow:0 0 10px 3px var(--corner-glow-c1);

  --gold-grad-c1:#ffe4a0;
  --gold-grad-c2:#ffb84d;
  --gold-grad-c3:#ff9d4d;
  --gold-bg:linear-gradient(90deg,var(--gold-grad-c1),var(--gold-grad-c2) 55%,var(--gold-grad-c3));

  --timeupstat-grad-c1:rgba(90,52,25,.6);
  --timeupstat-grad-c2:rgba(45,25,10,.6);
  --timeupstat-bg:linear-gradient(160deg,var(--timeupstat-grad-c1),var(--timeupstat-grad-c2));
  --timeupstat-border:rgba(255,190,110,.30);
  --gear-color:rgba(255,205,130,.55);

  /* ---- rotate notice ---- */
  --rotate-bg:#0a0704;
  --gold-accent:#f2c14e;

  /* ---- start screen / rules sheet ---- */
  --playbtn-shadow-c1:rgba(243,154,60,.32);
  --playbtn-shadow:0 8px 28px var(--playbtn-shadow-c1);
  --rulesbtn-bg:rgba(40,22,10,.6);
  --rulesbtn-border:rgba(243,154,60,.45);

  --rulesmodal-border:rgba(243,154,60,.40);
  --rulesmodal-glow-c1:rgba(255,150,50,.14);
  --rulesmodal-shadow:0 -10px 50px var(--shadow-half),0 0 35px var(--rulesmodal-glow-c1);
  --rulesmodal-bg-c1:#4a2c15;
  --rulesmodal-bg-c2:#2a170a;
  --rulesmodal-bg:linear-gradient(160deg,var(--rulesmodal-bg-c1),var(--rulesmodal-bg-c2));
  --rulesheading-text:#ffb45c;

  --rulesclose-text:#ffb45c;
  --rulesclose-border:rgba(255,200,140,.30);

  --rulesplay-grad-c1:#f7a64b;
  --rulesplay-grad-c2:#d27a26;
  --rulesplay-bg:linear-gradient(180deg,var(--rulesplay-grad-c1),var(--rulesplay-grad-c2));
  --rulesplay-border:#ffc27a;
  --rulesplay-edge:#8a4a14;
  --rulesplay-shadow-c1:rgba(243,154,60,.32);
  --rulesplay-shadow:0 8px 24px var(--rulesplay-shadow-c1);

  /* ---- start screen: glowing title + grid icon + buttons ---- */
  --neon-cyan:#ffb45c;
  --neon-text:#fff1dc;
  --neon-glow-tight:rgba(255,190,110,.85);
  --neon-glow-mid:rgba(255,150,60,.6);
  --neon-glow-wide:rgba(230,120,40,.4);

  --startbtn-bg:linear-gradient(180deg,rgba(120,76,42,.55),rgba(62,36,17,.62));
  --startbtn-border:rgba(235,190,135,.35);
  --startbtn-text:#f3e1c6;
  --startbtn-shadow-c1:rgba(20,8,0,.32);
  --startbtn-shadow:0 3px 8px var(--startbtn-shadow-c1),inset 0 1px 0 rgba(255,225,180,.28);
  --startbtn-hover-border:#f39a3c;
}

/* ================= RESET ================= */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--numbtnsel-grad-c1); 
  border-radius: 5px;
}

/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
} */
/* ================= PAGE BACKGROUND ================= */
html,body{
  margin:0;
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  background:var(--page-bg);
  color:var(--text);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
body{
  min-height:100vh;
  min-height:100dvh; /* real visible height on mobile (excludes address bar) */
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ================= DECORATIVE BACKGROUND GLOW ================= */
body:before,
body:after{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  filter:blur(2px);
}
body:before{
  width:280px;height:280px;
  left:-150px;bottom:-80px;
  border:55px solid var(--blur1-border);
  box-shadow:var(--blur1-shadow);
}
body:after{
  width:330px;height:330px;
  right:-180px;bottom:-110px;
  border:70px solid var(--blur2-border);
  box-shadow:var(--blur2-shadow);
}

/* ================= LAYOUT WRAPPER ================= */
.wrap{
  width:100%;
  max-width: 360px;
  margin:auto;
  height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));
  position:relative;
  overflow:hidden;
  container-type:size; /* lets controls scale with the screen height (cqh) */
  background:var(--wood-bg);
  /* background: url(../images/wooden-bg.webp); */
}
.wrap.hidden{display:none;}

/* toolbar, stats and controls keep their natural height; the board takes
   whatever is left so the whole game always fits one screen (no scroll) */
.wrap > .toolbar,
.wrap > .stats-bar,
.wrap > .bottom-controls{flex:0 0 auto;position:relative;z-index:1;}

.bottom-controls{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.wrap:before,
.wrap:after{
  position:absolute;
  font-weight:900;
  font-size:100px;
  line-height:1;
  color:var(--watermark-color);
  pointer-events:none;
}
.wrap:before{content:"5";left:8px;top:105px;transform:rotate(-12deg);}
.wrap:after{content:"9";right:15px;top:115px;transform:rotate(8deg);}

/* ================= HEADER / LOGO / TITLE ================= */
.game-header{
  text-align:center;
  width:100%;
  position:relative;
  z-index:1;
}

.title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.logo-mark{
  width:54px;height:54px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  padding:6px;
  border-radius:13px;
  background:var(--logo-bg);
  box-shadow:var(--logo-shadow);
}
.logo-mark span{
  border:2px solid var(--white-92);
  border-radius:2px;
  background:var(--white-08);
}

h1{
  font-size:clamp(36px,6vw,64px);
  margin:0;
  line-height:1;
  letter-spacing:-1.5px;
  font-weight:800;
  background:var(--title-bg);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.subtitle{
  color:var(--subtitle-text);
  font-size:clamp(12px,1.8vw,16px);
  line-height:1.45;
  max-width:700px;
  margin:12px auto 2px;
}

/* ================= DIFFICULTY TOOLBAR ================= */
.toolbar{
  width:100%;
  max-width:480px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:5px;
}

.back-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  /* aspect-ratio:1/1; */
  border-radius:var(--toolbar-radius);
  background:var(--diffgroup-bg);
  border:1px solid var(--diffgroup-border);
  box-shadow:var(--diffgroup-shadow);
  color:var(--diffbtn-text);
  cursor:pointer;
  transition:.2s ease;
  width: 50px;
}
.back-btn:hover{color:var(--white);border-color:var(--diffactive-border);}
.back-btn svg{width:22px;height:22px;}

.diff-group{
  position:relative;
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  justify-content:center;
  flex:1;
}

.diff-cursor{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:0;
  z-index:0;
  pointer-events:none;
  border-radius:var(--toolbar-radius);
  background:var(--diffactive-bg);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.35) 0%,rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 50%);
  border:1px solid var(--diffactive-border);
  box-shadow:var(--diffactive-shadow);
  opacity:0;
  transition:transform .38s cubic-bezier(.65,0,.35,1.25), width .38s cubic-bezier(.65,0,.35,1.25);
}
.diff-cursor.ready{opacity:1;}

.diff-btn{
  position:relative;
  z-index:1;
  flex:1;
  min-width:0;
  border:1px solid var(--diffbtn-border);
  background:var(--diffgroup-bg);
  color:var(--diffbtn-text);
  padding:12px 10px;
  border-radius:var(--toolbar-radius);
  font-size:11.5px;
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:var(--diffgroup-shadow);
  transition:color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
   background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0) 50%
    );
}
.diff-btn.active{
  color:#ffd08a;
  background:var(--diffactive-bg);
  border-color:var(--diffactive-border);
  box-shadow:var(--diffactive-shadow);
}
/* once the slider is live it paints the active look, so the active button
   turns see-through and the pill glides behind it */
.diff-group:has(.diff-cursor.ready) .diff-btn.active{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* ================= STATS BAR (TIME / MISTAKES) ================= */
.stats-bar{
  width:100%;
  max-width:480px;
  display:flex;
  gap:8px;
}

.stat{
  flex:1 1 0;
  min-width:0; /* equal widths no matter what the text inside measures */
  /* min-height:52px; */
  background:var(--stat-bg);
  border:1px solid var(--stat-border);
  border-radius:15px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:left;
  box-shadow:var(--stat-shadow);
}
.clockStat:before{
  content:"";
  width: 24px;
  height: 24px;
  display: block;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5LjUiIHN0cm9rZT0iI0YzRTFDNiIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTEyIDdWMTJMMTUgMTQiIHN0cm9rZT0iI0YzRTFDNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
}
.mistakeStat::before {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  background-repeat: no-repeat;
  background: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.5%22%20stroke%3D%22%23F3E1C6%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%209L15%2015M15%209L9%2015%22%20stroke%3D%22%23F3E1C6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat;
}

/* sound on/off toggle: square panel matching the Time / Mistakes stats */
.stat.sound-btn{
  position: relative;
  flex:0 0 48px;
  width:48px;
  min-width:48px;
  padding:0;
  -webkit-appearance:none;
  appearance:none;
  color:#f3e1c6;
  font-family:inherit;
  cursor:pointer;
  transition:transform .08s ease, border-color .15s ease, color .15s ease;
}
.stat.sound-btn:hover{border-color:var(--numbtn-hover-border);color:var(--white);}
.stat.sound-btn:active{transform:scale(.94);}
/* icon drawn as a background image like the Time / Mistakes icons — an inline
   SVG with a CSS filter inside this backdrop-filter panel is invisible on iPad Safari */
.stat.sound-btn .sound-ico{
  flex:0 0 auto;
  display:block;
  width:22px;
  height:22px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F3E1C6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%205L6%209H3v6h3l5%204V5z%22%2F%3E%3Cpath%20d%3D%22M15.5%208.5a5%205%200%200%201%200%207%22%2F%3E%3Cpath%20d%3D%22M18.5%205.5a9%209%200%200%201%200%2013%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  background-size: 22px;
}
.stat.sound-btn.muted .sound-ico{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F3E1C6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%205L6%209H3v6h3l5%204V5z%22%2F%3E%3Cpath%20d%3D%22M16%209l6%206M22%209l-6%206%22%2F%3E%3C%2Fsvg%3E");
}
.stat.sound-btn.muted{opacity:.7;}

.stat .label{
  font-size:10px;
  color:var(--stat-label);
  text-transform:uppercase;
  letter-spacing:.6px;
}
.stat .value{
  color:var(--text);
  font-size:18px;
  font-weight:600;
  margin-top:1px;
  font-variant-numeric:tabular-nums; /* every digit the same width, so the ticking timer doesn't jiggle */
  white-space:nowrap;
}
.stat .value.mistakes{color:var(--mistake-color);}
/* fixed-width number slots: the boxes centre their contents, so a value that
   changes width (timer ticking, mistakes 9 → 10) would slide the icon and label */
#timerValue{flex:0 0 auto;width:5ch;text-align:left;}       /* "MM:SS" */
#mistakesValue{flex:0 0 auto;width:2ch;text-align:left;}    /* up to MAX_MISTAKES = 20 */
.clockStat:before,.mistakeStat::before,.stat .label{flex:0 0 auto;}
.stat .value.time-warning{color:var(--warning-color);animation:pulse-warn 1s ease-in-out infinite;}
@keyframes pulse-warn{0%,100%{opacity:1;}50%{opacity:.55;}}

/* ================= SUDOKU BOARD & CELLS ================= */
.board-outer{
  flex:1 1 0;
  min-height:0;
  width:100%;
  max-width:480px;
  display:flex;
  align-items:center;
  justify-content:center;
  container-type:size;
  position:relative;
  z-index:1;
}

#board{
  position:relative;
  /* largest square that fits the leftover space */
  width:min(100cqw,100cqh);
  height:min(100cqw,100cqh);
  display:grid;
  grid-template-columns:repeat(var(--box,3),1fr);
  grid-template-rows:repeat(var(--box-rows,var(--box,3)),1fr);
  gap:3px;
  background:var(--board-bg);
  border:1px solid var(--board-border);
  border-radius:8px;
  overflow:hidden;
  touch-action:manipulation;
  -webkit-user-select:none; /* Safari still needs the prefix */
  user-select:none;
  box-shadow:var(--board-shadow);
}
@supports not (width:1cqw){
  #board{width:100%;height:auto;max-height:100%;aspect-ratio:1/1;}
}

.box{
  display:grid;
  grid-template-columns:repeat(var(--box,3),1fr);
  grid-template-rows:repeat(var(--box,3),1fr);
  position:relative;
  gap:1px;
  background:var(--box-bg);
  box-shadow:var(--box-shadow);
}
/* the 3x3 box holding the selected cell glows amber (drawn on top of the cells) */
.box:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:0;
  box-shadow:var(--box-active-shadow);
  transition:none;
}
.box:has(.cell.selected):after{opacity:0;} /* box glow disabled: it flickered on every tap */

.cell-cursor{
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0;
  border-radius:0;
  box-shadow:var(--cursor-shadow);
  pointer-events:none;
  opacity:0;
  z-index:3;
  transition:none;
  will-change:transform;
}
.cell-cursor.active{opacity:1;}

.cell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cell-bg);
  border:0;
  border-radius:0;
  box-shadow:var(--cell-shadow);
  font-size:clamp(13px,5.6cqmin,26px); /* scales with the board */
  font-weight:600;
  color:var(--user-text);
  cursor:pointer;
  isolation:isolate; /* lets the glass layer sit between the tile color and the digit */
}
/* glass finish on every tile: glossy top half, bright top edge, soft bottom edge.
   z-index:-1 keeps it above the tile's background but under the digit. */
.cell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.28) 42%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,0) 82%,
      rgba(120,70,30,.10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 1px 0 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(120,70,30,.22);
}
/* on the dark selected tile the gloss is dimmer so it reads as polished glass, not a wash */
.cell.selected::before{
  background:linear-gradient(180deg,rgba(255,220,170,.28) 0%,rgba(255,220,170,.08) 45%,rgba(255,255,255,0) 50%);
  box-shadow:inset 0 1px 0 rgba(255,220,170,.45);
}
/* keep the red / purple outlines bold: lighter gloss, no edge lines over them */
.cell.error::before,
.cell.warn::before{
  background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.12) 42%,rgba(255,255,255,0) 50%);
  box-shadow:none;
}

/* Easy 4x4 board: drawn a bit smaller than the 9x9 so the cells are not oversized */
#board.size-4{width:min(78cqw,78cqh);height:min(78cqw,78cqh);}
#board.size-4 .cell{font-size:clamp(20px,9cqmin,40px);}

/* Medium 6×9 board (two rows of 3×3 boxes): 3:2 wide, the largest that fits */
#board.wide{width:min(100cqw,150cqh);height:min(66.667cqw,100cqh);}
#board.wide .cell{font-size:clamp(13px,min(5.6cqw,8.3cqh),26px);}
@supports not (width:1cqw){
  #board.wide{aspect-ratio:3/2;}
}

.cell.empty{
  background:var(--cell-empty-bg);
  box-shadow:var(--cell-empty-shadow);
}


.cell.fixed{color:var(--fixed-text);font-weight:600;cursor:default;}
.cell.fixed.alt{color:var(--fixed-alt-text);}
.cell.error{
  background:var(--error-bg)!important;
  color:var(--error-text)!important;
  font-weight:800;
  box-shadow:inset 0 0 0 2.5px var(--error-ring),inset 0 0 10px rgba(224,50,63,.45)!important;
}
.cell.warn{
  background:var(--warn-bg)!important;
  color:var(--warn-text)!important;
  font-weight:800;
  box-shadow:inset 0 0 0 2.5px var(--warn-ring),inset 0 0 10px rgba(139,92,246,.45); /* no !important, or it would block the pulse */
  animation:warnPulse 1.6s ease-in-out infinite;
}
@keyframes warnPulse{
  0%,100%{box-shadow:inset 0 0 0 2.5px var(--warn-ring),inset 0 0 6px rgba(139,92,246,.35);}
  50%{box-shadow:inset 0 0 0 2.5px var(--warn-ring),inset 0 0 14px rgba(139,92,246,.7);}
}
.cell.peer{background:var(--peer);}
.cell.same-num{background:var(--same-num);}
.cell.selected{
  background:var(--selected-bg);
  color:var(--selected-text);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6);
  z-index:2;
}

/* ================= ACTION ROW (undo / hint / restart / new game) ================= */
.action-row{
  width:100%;
  max-width:480px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:8px;
}

.tool-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:clamp(44px,9cqh,64px);
  padding:6px 4px;
  /* glossy top highlight layered over the brown key fill */
  background:
    linear-gradient(to bottom,rgba(255,255,255,.35) 0%,rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 50%),
    var(--numbtn-bg);
  color:var(--diffbtn-text);
  border:1px solid var(--numbtn-border);
  border-radius:14px;
  font-family:inherit;
  font-size:10px;
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  /* same raised 3D key as the number pad */
  box-shadow:
    0 3px 0 var(--numbtn-edge),
    0 6px 14px rgba(0,0,0,.35),
    inset 0 1px 0 var(--numbtn-inset-c1);
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease, opacity .2s ease;
}
.tool-btn svg{width:20px;height:20px;flex:0 0 auto;}
.tool-btn:hover{border-color:var(--numbtn-hover-border);color:var(--white);}
.tool-btn:active{
  transform:translateY(3px);
  box-shadow:0 0 0 var(--numbtn-edge), 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 var(--numbtn-inset-c1);
}
.tool-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;}
.tool-btn:disabled:active{box-shadow:0 3px 0 var(--numbtn-edge),0 6px 14px rgba(0,0,0,.35),inset 0 1px 0 var(--numbtn-inset-c1);}
.tool-btn{color:var(--white);}
.tool-btn.hint{position:relative;}
/* hints left: same frosted-glass pill as the number-key counts */
.tool-btn .hint-count{
  position:absolute;
  top:3px;
  right:3px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:8px;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  color:var(--white);
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 3px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.tool-btn.hint .hint-count{
  /* pink pill so the hints-left count stands out on the wood key */
  color:#a3246a;
  background:linear-gradient(180deg,#fff0f7 0%,#ffc9e3 100%);
  border-color:#ffffff;
  box-shadow:inset 0 1px 0 #ffffff,0 1px 3px rgba(0,0,0,.35),0 0 7px rgba(255,170,210,.6);
}

/* ================= GLASSY TEXT & PANELS =================
   Level buttons and Time/Mistakes bar: frosted panels; all of these plus
   the tool buttons get bright, lifted text so labels read clearly on the wood. */
.diff-btn,
.stat{
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  backdrop-filter:blur(6px) saturate(140%);
  border-color:rgba(255,235,205,.38);
}
.diff-btn,
.tool-btn span,
.stat .label,
.stat .value{
  text-shadow:0 1px 2px rgba(20,8,0,.8),0 0 8px rgba(255,210,150,.28);
}
.diff-btn{color:var(--white);font-weight:600;}
.diff-btn.active{
  color:#ffe0a8;
  text-shadow:0 1px 2px rgba(20,8,0,.8),0 0 10px rgba(255,170,70,.7);
}
.stat .label{color:#fff3e0;font-weight:600;}
.stat .value{color:var(--white);font-weight:700;}
.stat .value.time-warning{
  color:var(--warning-color);
  text-shadow:0 1px 2px rgba(20,8,0,.8),0 0 10px rgba(255,110,60,.7);
}
.tool-btn span{font-weight:600;}
.tool-btn svg{filter:drop-shadow(0 1px 1.5px rgba(20,8,0,.75));}
.tool-btn .hint-count{text-shadow:0 1px 1px rgba(20,8,0,.6);}
.tool-btn.hint .hint-count{text-shadow:none;}

/* digit revealed by a hint: locked like a given, but in its own green color */
.cell.hinted{color:#2e8b57;font-weight:700;cursor:default;}
.cell.hinted.selected{color:#7ee0a5;}
.cell.hint-pop{animation:hintPop .5s ease;}
@keyframes hintPop{
  0%{transform:scale(.6);box-shadow:0 0 0 0 rgba(255,180,92,.9);}
  60%{transform:scale(1.12);box-shadow:0 0 14px 4px rgba(255,180,92,.7);}
  100%{transform:scale(1);box-shadow:none;}
}

/* ================= NUMBER PAD (2 rows: 1–5 / 6–9 + erase) ================= */
.numpad{
  width:100%;
  max-width:480px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}

.num-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:clamp(44px,8cqh,58px);
  padding:0;
  background:var(--numbtn-bg);
  color:var(--diffbtn-text);
  border:1px solid var(--numbtn-border);
  border-radius:14px;
  font-family:inherit;
  cursor:pointer;
   background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0) 50%
    );
  box-shadow:
    0 3px 0 var(--numbtn-edge),
    0 6px 14px rgba(0,0,0,.35),
    inset 0 1px 0 var(--numbtn-inset-c1);
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease, opacity .2s ease;
}
.num-btn .num-val{
  font-size:clamp(20px,6.2vw,26px);
  font-weight:700;
  line-height:1;
  color:var(--white);
  /* dark lift + faint warm glow so the digit stands off the wood */
  text-shadow:0 1px 2px rgba(20,8,0,.75),0 0 8px rgba(255,200,130,.35);
}
/* "how many left" count: small frosted-glass pill */
.num-btn .num-left{
  position:absolute;
  top:3px;
  right:3px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:8px;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  color:var(--white);
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 3px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  text-shadow:0 1px 1px rgba(20,8,0,.6);
}
.num-btn .num-left:empty{display:none;}
.num-btn[hidden]{display:none;} /* digits above the board size (5–9 on Easy) */
.num-btn:hover{border-color:var(--numbtn-hover-border);}
.num-btn:active{
  transform:translateY(3px);
  box-shadow:0 0 0 var(--numbtn-edge), 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 var(--numbtn-inset-c1);
}
.num-btn.selected-num{
  background:var(--numbtnsel-bg);
  border-color:var(--numbtnsel-border);
  box-shadow:0 3px 0 var(--numbtn-edge), var(--numbtnsel-shadow), inset 0 1px 0 var(--numbtn-inset-c1);
}
.num-btn.selected-num .num-left{
  color:var(--fixed-text);
  background:linear-gradient(180deg,rgba(255,236,200,.95),rgba(255,190,110,.85));
  border-color:rgba(255,240,210,.9);
  text-shadow:none;
}
/* every copy of this digit is on the board */
.num-btn.done{opacity:.35;}

.num-btn.erase-key{
  background:var(--erase-bg);
  color:var(--erase-text);
  border-color:var(--numbtn-border);
  box-shadow:0 3px 0 var(--numbtn-edge), 0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 var(--numbtn-inset-c1);
}
.num-btn.erase-key svg{width:24px;height:24px;}
.num-btn:disabled{opacity:.4;cursor:not-allowed;}
.num-btn:disabled:active{transform:none;}

/* ================= PRIMARY / SECONDARY BUTTONS ================= */
.btn-primary,.btn-secondary{
    padding: 12px 18px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}
.btn-primary{
  background:var(--btnprimary-bg);
  color:var(--white);
  border:1px solid var(--btnprimary-border);
  box-shadow:0 4px 0 var(--btnprimary-edge), var(--btnprimary-shadow);
}
.btn-primary:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 var(--btnprimary-edge);
}
.btn-secondary{
  background:var(--btnsecondary-bg);
  color:var(--btnsecondary-text);
  border:1px solid var(--btnsecondary-border);
  box-shadow:0 4px 0 var(--btnsecondary-edge);
}
.btn-secondary:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 var(--btnsecondary-edge);
}
/* win popup can show 3 buttons (Close / Play Again / Next) — keep them on small phones */
#winOverlay .modal-actions{flex-wrap:wrap;}
#winOverlay .modal-actions button{padding:12px 12px;}

/* ================= OVERLAYS & MODAL (WIN POPUP) ================= */
.overlay{
  position:fixed;
  inset:0;
  background:var(--overlay-bg);
  -webkit-backdrop-filter:blur(8px); /* Safari < 18 only knows the prefixed name */
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:50;
}
.overlay.hidden{display:none;}
.modal{
  position:relative;
  background:var(--modal-bg);
  border:1px solid var(--modal-border);
  border-radius:22px;
  padding:15px;
  max-width:420px;
  width:100%;
  text-align:center;
  box-shadow:var(--modal-shadow);
}
.modal h2{margin:0 0 8px;font-size:20px;color:var(--rulesheading-text);}
.modal p{color:var(--muted);margin:5px 0 18px;font-size:14px;}
.modal .modal-stats{display:flex;justify-content:center;gap:28px;margin-bottom:20px;}
.modal .modal-stats div{font-size:12px;color:var(--muted);}
.modal .modal-stats b{display:block;font-size:20px;color:var(--text);}
.modal .modal-actions{display:flex;justify-content:center;gap:10px;}
.modal .modal-actions .btn-secondary{
  color:var(--rulesclose-text);
  border-color:var(--rulesclose-border);
}
.modal .modal-actions .btn-primary{
  background:var(--rulesplay-bg);
  border-color:var(--rulesplay-border);
  box-shadow:0 4px 0 var(--rulesplay-edge), var(--rulesplay-shadow);
}
.modal .modal-actions .btn-primary:active{
  box-shadow:0 1px 0 var(--rulesplay-edge);
}

/* ================= TIME'S UP MODAL ================= */
.time-up-modal{
  /* compact + fluid: shrinks with the screen, never wider than 320px */
  width:100%;
  max-width:min(320px,100%);
  padding:clamp(24px,7vw,30px) clamp(14px,5vw,20px) clamp(20px,6vw,24px);
  background:var(--timeup-bg);
  border:1px solid var(--timeup-border);
  box-shadow:var(--timeup-shadow);
  overflow:hidden;
}
.time-up-modal:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--timeup-grid-bg);
  background-size:24px 24px;
  pointer-events:none;
}
.time-up-corner{
  position:absolute;
  width:clamp(20px,6vw,26px);height:clamp(20px,6vw,26px);
  border:3px solid var(--corner-border);
  pointer-events:none;
}
.time-up-corner:before{
  content:"";
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--corner-dot);
  box-shadow:var(--corner-shadow);
}
.time-up-corner.tl{top:12px;left:12px;border-right:0;border-bottom:0;border-radius:10px 0 0 0;}
.time-up-corner.tl:before{top:-5px;left:-5px;}
.time-up-corner.tr{top:12px;right:12px;border-left:0;border-bottom:0;border-radius:0 10px 0 0;}
.time-up-corner.tr:before{top:-5px;right:-5px;}
.time-up-corner.bl{bottom:12px;left:12px;border-right:0;border-top:0;border-radius:0 0 0 10px;}
.time-up-corner.bl:before{bottom:-5px;left:-5px;}
.time-up-corner.br{bottom:12px;right:12px;border-left:0;border-top:0;border-radius:0 0 10px 0;}
.time-up-corner.br:before{bottom:-5px;right:-5px;}

.time-up-modal h2{
  position:relative;
  font-size:clamp(19px,6vw,24px);
  line-height:1.2;
  background:var(--gold-bg);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.time-up-modal p{
  position:relative;
  font-size:clamp(11.5px,3.4vw,13px);
  line-height:1.5;
  margin:4px 0 clamp(12px,4vw,16px);
}
.time-up-modal .modal-stats{position:relative;gap:clamp(10px,4vw,16px);margin-bottom:clamp(14px,4.5vw,18px);}
.time-up-modal .modal-stats div{
  position:relative;
  flex:1;
  background:var(--timeupstat-bg);
  border:1px solid var(--timeupstat-border);
  border-radius:12px;
  padding:clamp(8px,2.6vw,11px) 6px;
  min-width:0;
  font-size:clamp(10px,3vw,11.5px);
}
.time-up-modal .modal-stats div:before,
.time-up-modal .modal-stats div:after{
  content:"⚙";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:var(--gear-color);
}
.time-up-modal .modal-stats div:before{left:-7px;}
.time-up-modal .modal-stats div:after{right:-7px;}
.time-up-modal .modal-stats b{font-size:clamp(16px,5vw,19px);color:var(--white);}
.time-up-modal .modal-actions{position:relative;gap:8px;}
/* buttons share the row evenly and shrink instead of overflowing */
.time-up-modal .modal-actions button{
  flex:1 1 0;
  min-width:0;
  padding:clamp(9px,2.8vw,11px) 8px;
  font-size:clamp(10.5px,3vw,11.5px);
  border-radius:12px;
}


.stageWrap {
  width: 360px;
  height: 599px;
  margin: 0 auto;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* box-shadow: 0 10px 40px rgba(0, 0, 0, .6); */
  transform-origin: center center;
}

/* ================= START SCREEN ================= */
#startScreen{
  height: 100%;
  width:100%;
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:  70px;
  padding:24px;
  text-align:center;
  background-image: url("https://akm-img-a-in.tosshub.com/sites/games/sudoku/images/home-bg1.webp");
  background-size: 100% 100%;
    background-repeat: no-repeat;
  position:relative;
  overflow:hidden;
}
#startScreen.hidden{display:none;}
#startScreen .sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
}
.landing-title-img{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.landing-brand-logo{max-width:100%;height:auto;}

.sudoku-neon-title{
  margin:0;
  font-size:clamp(50px,11vw,52px);
  font-family:"Arial Black","Arial Bold",Gadget,sans-serif;
  font-weight:900;
  letter-spacing:1px;
  line-height:1;
  text-transform:uppercase;
  /* glossy gold face: bright highlight on top, deeper amber toward the bottom */
  color:#f5c46a;
  background:linear-gradient(180deg,
    #fff6d8 0%,
    #ffe29a 22%,
    #f7c25a 45%,
    #e39a2c 62%,
    #f4b54a 80%,
    #ffd98a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(255,236,190,.55);
  /* drop-shadow (not text-shadow) so it works with the transparent gradient fill:
     stacked offsets form the bevelled 3D edge, then a warm outer glow */
  filter:
    drop-shadow(0 1px 0 #c77a1e)
    drop-shadow(0 1px 0 #a85f12)
    drop-shadow(0 1px 0 #8a4a0a)
    drop-shadow(0 3px 3px rgba(40,15,0,.6))
    drop-shadow(0 0 10px rgba(255,170,60,.55))
    drop-shadow(0 0 22px rgba(255,140,30,.35));
}

.sudoku-grid-icon{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  width:min(170px,42vw);
  height:min(170px,42vw);
  /* dark wood frame with ivory tiles, like one 3x3 box of the game board */
  gap:5px;
  padding:6px;
  border:1px solid rgba(15,6,0,.85);
  border-radius:10px;
  background:linear-gradient(180deg,#5a3419 0%,#3a210e 55%,#2a170a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,210,150,.35),
    inset 0 -2px 4px rgba(0,0,0,.45),
    0 0 0 1px rgba(200,130,60,.35),
    0 8px 18px rgba(0,0,0,.45);
}
.sudoku-grid-icon .grid-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(16px,4.5vw,26px);
  font-weight:600;
  color:var(--fixed-text);
  background:var(--cell-bg);
  border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 2px rgba(0,0,0,.45);
}
.sudoku-grid-icon .grid-cell.amber{color:var(--fixed-alt-text);}
.sudoku-grid-icon .grid-cell.blue{color:var(--user-text);}

#startBottom{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  max-width:160px;
}

#startScreen{container-type:size;}
@supports (width:1cqw){
  #startScreen{
    --bg-w:max(100cqw + 48px, (100cqh + 48px) * .6259);
    --logo-mid:calc(var(--bg-w) * .212);
    --btn-mid:calc(var(--bg-w) * .262);
  }
  /* wrapper spans from the screen's left edge (cancelling the 24px padding)
     to twice the centre point, and centres the logo inside it */
  .landing-title-img{
    align-self:flex-start;
    width:calc(2 * var(--logo-mid));
    margin-left:-24px;
  }
  .landing-title-img .landing-brand-logo{max-width:calc(2 * var(--logo-mid) - 24px);}
  /* buttons keep their 160px, shrinking only if the panel gets narrower */
  #startBottom{
    --btn-w:min(160px, calc(2 * var(--btn-mid) - 16px));
    width:var(--btn-w);
    max-width:none;
    margin-left:calc(var(--btn-mid) - 24px - var(--btn-w) / 2);
  }
  /* labels stay on one line even when the buttons shrink on tiny screens */
  #startBottom .pillBtn{white-space:nowrap;padding-left:10px;padding-right:10px;}
}
.pillBtn{
  padding:15px 24px;
  border-radius:16px;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  letter-spacing:.8px;
  cursor:pointer;
  color:var(--white);
  text-shadow:0 1px 2px rgba(20,8,0,.8),0 0 8px rgba(255,210,150,.3);
  transition:transform .08s ease,box-shadow .08s ease,border-color .15s ease,filter .15s ease;
}
.pillBtn:hover{filter:brightness(1.08);}
/* raised 3D key: press it down on tap */
.pillBtn:active{transform:translateY(3px);}

/* PLAY — the main call to action: solid gold, glowing */
#playBtn{
  font-size:18px;
  letter-spacing:2px;
  color:#3a1d05;
  text-shadow:0 1px 0 rgba(255,240,210,.6);
  background:linear-gradient(180deg,#ffd98a 0%,#f7a64b 48%,#d27a26 100%);
  border:1px solid #ffe2a8;
  box-shadow:
    0 4px 0 #8a4a12,
    0 8px 18px rgba(0,0,0,.45),
    0 0 18px rgba(255,170,60,.45),
    inset 0 1px 0 rgba(255,250,235,.8);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
/* round dark badge holding a ▶, nudging forward: "tap to play" */
#playBtn .play-icon{
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border-radius:50%;
  background:#3a1d05;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 1px 0 rgba(255,240,210,.6);
}
#playBtn .play-icon svg{
  width:14px;height:14px;
  fill:#ffd98a;
  margin-left:2px; /* optical centre of the triangle */
  animation:playNudge 1.2s ease-in-out infinite;
}
#playBtn:active{
  box-shadow:0 1px 0 #8a4a12,0 3px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,250,235,.8);
  animation:none;
}
/* soft breathing scale (transform only, stays smooth) */
@keyframes playPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
@keyframes playNudge{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(3px,0,0);}}


/* Rules — glassy wood key, same family as the in-game buttons */
#rulesBtn{
  background:var(--startbtn-bg);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.35) 0%,rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 50%);
  border:1px solid rgba(255,235,205,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:
    0 3px 0 var(--numbtn-edge),
    0 6px 14px rgba(0,0,0,.35),
    inset 0 1px 0 var(--numbtn-inset-c1);
}
#rulesBtn:hover{border-color:var(--startbtn-hover-border);}
#rulesBtn:active{box-shadow:0 0 0 var(--numbtn-edge),0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 var(--numbtn-inset-c1);}

/* ================= RULES MODAL (app-style bottom sheet) ================= */

.rules-modal{
  max-width:360px;
  width:100%;
  text-align:left;
  background:var(--rulesmodal-bg);
  border:1px solid var(--rulesmodal-border);
  border-radius:24px;
  padding:10px 8px calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:var(--rulesmodal-shadow);
  animation:sheet-up .22s ease-out;
}
@keyframes sheet-up{
  from{transform:translateY(28px);opacity:.5;}
  to{transform:translateY(0);opacity:1;}
}
.sheet-grabber{
  display:block;
  width:40px;
  height:5px;
  border-radius:999px;
  background:var(--white-25);
  margin:6px auto 12px;
}
.rules-modal h2{text-align:center;margin-bottom:14px;font-size:19px;color:var(--rulesheading-text);}
/* both sections scroll together inside the sheet */
.rules-body{
  max-height:370px;
  overflow-y:auto;
  margin:0 0 18px;
  padding:0 4px;
}
.rules-section{
  margin:6px 0 2px;
  padding:0 2px 6px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--accent-2);
  border-bottom:1px solid rgba(255,180,92,.35);
}
.rules-section:not(:first-child){margin-top:16px;}
.rules-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.rules-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:13px;
  line-height:1.5;
  color:var(--text);
  background:none;
  border:none;
  border-bottom:1px solid var(--white-08);
  border-radius:0;
  padding:13px 2px;
}
.rules-list li:last-child{border-bottom:none;}
.rules-list li span.rule-icon{
  flex:0 0 auto;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  background:var(--white-06);
  border-radius:10px;
}
.rules-list li .rule-hi{display:block;}
.rules-list li .rule-title{display:block;font-size:13.5px;font-weight:700;color:var(--white);margin-bottom:1px;}
/* mini cells showing the red / purple highlight colors */
.rule-swatch{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:5px;
  font-size:13px;font-weight:800;
}
.rule-swatch.swatch-error{background:var(--error-bg);color:var(--error-text);box-shadow:inset 0 0 0 2px var(--error-ring);}
.rule-swatch.swatch-warn{background:var(--warn-bg);color:var(--warn-text);box-shadow:inset 0 0 0 2px var(--warn-ring);}
.rules-modal .modal-actions{margin-top:4px;gap:10px;}
.rules-modal .modal-actions .btn-secondary,
.rules-modal .modal-actions .btn-primary{flex:1;}
.rules-modal .modal-actions .btn-secondary{
  color:var(--rulesclose-text);
  border-color:var(--rulesclose-border);
}
.rules-modal .modal-actions .btn-primary{
  background:var(--rulesplay-bg);
  border-color:var(--rulesplay-border);
  box-shadow:0 4px 0 var(--rulesplay-edge), var(--rulesplay-shadow);
}
.rules-modal .modal-actions .btn-primary:active{
  box-shadow:0 1px 0 var(--rulesplay-edge);
}


/* ================= ROTATE / PORTRAIT NOTICE ================= */
/* shown only on phones held in landscape (short viewport); portrait hides it */
.rotate-notice{ display:none; }
@media (orientation:landscape) and (max-height:500px){
  .rotate-notice{
    display:flex;position:fixed;inset:0;z-index:9999;
    align-items:center;justify-content:center;text-align:center;
    padding:24px;
    background:url("https://akm-img-a-in.tosshub.com/sites/epaper/games/anarkali/assets/bg-cave.webp") center/cover no-repeat, var(--rotate-bg);
  }
  .rotate-notice::after{ content:"";position:absolute;inset:0;background:var(--overlay-strong); }
  .rotate-inner{ position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:420px; }
  .rotate-inner svg{ width:52px;height:52px;color:var(--gold-accent);animation:rotateHint 2s ease-in-out infinite; }
  .rotate-hi{ font-weight:800;font-size:18px;line-height:1.3;color:var(--white); }
  .rotate-en{ font-weight:600;font-size:13px;color:var(--gold-accent); }
  @keyframes rotateHint{ 0%,60%,100%{ transform:rotate(0); } 30%{ transform:rotate(-90deg); } }
}
/* ==============when-screen is greater than 1440px======= */
@media (min-height: 620px) and (min-width: 1440px) {
    .stageWrap {
        height: 620px;
    }
}



/* ================= RESPONSIVE: MOBILE ================= */
@media (max-width:700px){
  .wrap{padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));gap:8px;}
  .wrap:before,.wrap:after,
  body:before,body:after{display:none;}

  .game-header{flex:0 0 auto;}
  .title-row{gap:8px;}
  .logo-mark{width:26px;height:26px;padding:3px;border-radius:7px;gap:2px;}
  h1{font-size:20px;letter-spacing:-0.5px;}
  .subtitle{display:none;}

  .toolbar{--toolbar-radius:13px;}
  .back-btn{width:44px;}
  .diff-btn{padding:10px 6px;}

  .stats-bar{gap:6px;}
  .stat{min-height:40px;padding:5px 8px;gap:6px;border-radius:10px;}
  .stat .label{font-size:8px;}
  .stat .value{font-size:14px;}
  .stat.sound-btn{flex-basis:40px;width:40px;min-width:40px;}
  .stat.sound-btn .sound-ico{width:20px;height:20px; background-size: 20px;}

  #board{gap:2px;border-width:2px;border-radius:6px;}

}

/* short screens (small phones / address bar visible): tighten the chrome
   so the board keeps as much room as possible */
@media (max-height:680px){
  .wrap{gap:6px;padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));}
  .bottom-controls{gap:6px;}
  .diff-btn{padding:8px 6px;}
  .stat{min-height:34px;padding:3px 8px;}
  .tool-btn{gap:1px;font-size:10px;padding:4px;}
  .tool-btn svg{width:16px;height:16px;}
  .numpad{gap:6px;}
}

@media (max-width:480px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none;}
  body{align-items:stretch;}
  #startScreen, .wrap{max-width:100%;border-radius:0;}
  .stageWrap{
    width:100%;
    height:100vh;
    height:100dvh; /* exact visible viewport — no page scroll */
    border-radius:0;
  }
}

/* ================= RESPONSIVE: DESKTOP ================= */
/* desktop players use the keyboard (1–9), so the on-screen numpad is hidden */
/* @media (min-width:1025px){
  .numpad{display:none;}
} */

/* ================= PAGE LOADER ================= */
/* full-screen wood cover with a mini 3×3 board filling in cell by cell */
.page-loader{
  position:fixed;
  inset:0;
  z-index:10000; /* above everything, including the rotate notice */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:var(--loader-bg);
  color:var(--text);
  transition:opacity .45s ease, visibility .45s ease;
}
.page-loader.done{opacity:0;visibility:hidden;pointer-events:none;}

.loader-grid{
  display:grid;
  grid-template-columns:repeat(3,34px);
  grid-auto-rows:34px;
  gap:4px;
  padding:6px;
  border-radius:12px;
  background:rgba(40,16,3,.55);
  box-shadow:0 10px 24px var(--shadow-heavy), inset 0 1px 0 var(--numbtn-inset-c1);
}
.loader-grid span{
  display:grid;
  place-items:center;
  border-radius:6px;
  background:linear-gradient(180deg,#fffaf0,#f1e2c8);
  font-weight:800;
  font-size:18px;
  color:transparent;
  animation:loaderCell 2.4s ease-in-out infinite;
}
/* fill order snakes around the board */
.loader-grid span:nth-child(1){animation-delay:0s;}
.loader-grid span:nth-child(2){animation-delay:.12s;}
.loader-grid span:nth-child(3){animation-delay:.24s;}
.loader-grid span:nth-child(6){animation-delay:.36s;}
.loader-grid span:nth-child(5){animation-delay:.48s;}
.loader-grid span:nth-child(4){animation-delay:.6s;}
.loader-grid span:nth-child(7){animation-delay:.72s;}
.loader-grid span:nth-child(8){animation-delay:.84s;}
.loader-grid span:nth-child(9){animation-delay:.96s;}
@keyframes loaderCell{
  0%,8%    {color:transparent;transform:scale(1);}
  14%      {color:var(--accent);transform:scale(1.12);}
  22%,70%  {color:#2a1608;transform:scale(1);}
  80%,100% {color:transparent;transform:scale(1);}
}

.loader-text{
  margin:0;
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  /* same gold gradient as the progress bar */
  background:var(--gold-bg);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 2px var(--shadow-half));
}
.loader-dots::after{content:"";animation:loaderDots 1.2s steps(4,end) infinite;}
@keyframes loaderDots{
  0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%,100%{content:"...";}
}

.loader-bar{
  width:140px;
  height:5px;
  border-radius:3px;
  overflow:hidden;
  background:rgba(40,16,3,.5);
}
.loader-bar i{
  display:block;
  width:40%;
  height:100%;
  border-radius:inherit;
  background:var(--gold-bg);
  animation:loaderBar 1.1s ease-in-out infinite;
}
@keyframes loaderBar{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(250%);}
}

@media (prefers-reduced-motion:reduce){
  .loader-grid span{animation:none;color:#2a1608;}
  .loader-bar i,.loader-dots::after{animation:none;}
}

/* ================= START SCREEN ANIMATION =================
   Only transform + opacity are animated (GPU-composited) so it stays smooth
   on phones; soft ease-out curves, no hard bounces. */
#startScreen > :not(.start-digits){position:relative;z-index:1;}

/* entrance: Aaj Tak logo drops, SUDOKU scales in, buttons rise */
.start-anim-drop{animation:startDrop .8s cubic-bezier(.22,1,.36,1) .1s both;}
.start-anim-pop {animation:startPop  .9s cubic-bezier(.34,1.3,.64,1) .35s both;}
.start-anim-rise{animation:startRise .8s cubic-bezier(.22,1,.36,1) .7s both;}
/* held on the first frame, under the page loader, until body gets .loaded
   (declared after the shorthands above, which would otherwise reset it) */
.start-anim-drop,.start-anim-pop,.start-anim-rise{animation-play-state:paused;}
body.loaded .start-anim-drop,
body.loaded .start-anim-pop,
body.loaded .start-anim-rise{animation-play-state:running;}

@keyframes startDrop{from{opacity:0;transform:translate3d(0,-30px,0);}to{opacity:1;transform:none;}}
@keyframes startPop {from{opacity:0;transform:scale(.7);}to{opacity:1;transform:none;}}
@keyframes startRise{from{opacity:0;transform:translate3d(0,24px,0);}to{opacity:1;transform:none;}}

/* SUDOKU logo: gentle float; the shine rides along inside the same box */
.logo-float{
  position:relative;
  animation:logoFloat 4s ease-in-out 1.4s infinite;
  will-change:transform;
}
.logo-float img{display:block;}
/* the mask clips to the logo's letters (the webp has transparency);
   the band inside slides with transform only, no repaint */
.logo-shine{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask:url("https://akm-img-a-in.tosshub.com/sites/games/sudoku/images/sudoka-logo.webp") center/100% 100% no-repeat;
  mask:url("https://akm-img-a-in.tosshub.com/sites/games/sudoku/images/sudoka-logo.webp") center/100% 100% no-repeat;
}
.logo-shine::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:40%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,250,225,.8) 50%,transparent 100%);
  transform:translate3d(-120%,0,0);
  animation:logoShine 4s cubic-bezier(.45,0,.55,1) 1.4s infinite;
  will-change:transform;
}
@keyframes logoFloat{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,-6px,0);}}
@keyframes logoShine{
  0%      {transform:translate3d(-120%,0,0);}
  40%,100%{transform:translate3d(260%,0,0);}
}

/* digits floating up like numbers being placed on the board */
.start-digits{position:absolute;inset:0;pointer-events:none;z-index:0;}
.start-digits span{
  position:absolute;
  left:var(--x);
  bottom:-40px;
  font-weight:800;
  font-size:26px;
  color:#fff1d6;
  text-shadow:0 0 10px rgba(255,170,60,.9),0 2px 3px rgba(40,15,0,.6);
  opacity:0;
  animation:digitFloat var(--t,6s) linear var(--d,0s) infinite;
  will-change:transform,opacity;
}
.start-digits span:nth-child(odd){font-size:20px;color:#ffc877;}
@keyframes digitFloat{
  0%  {opacity:0;transform:translate3d(0,0,0) rotate(0);}
  15% {opacity:.85;}
  75% {opacity:.5;}
  100%{opacity:0;transform:translate3d(0,-640px,0) rotate(20deg);}
}

@media (prefers-reduced-motion:reduce){
  .start-anim-drop,.start-anim-pop,.start-anim-rise,
  .logo-float,.logo-shine::before,
  #playBtn,#playBtn .play-icon svg{animation:none;}
  .start-digits{display:none;}
}

/* ================= WARNING-CELL TIP ================= */
/* small speech bubble next to the purple cell; board stays visible behind */
.warn-tip-overlay{
  background:rgba(20,8,2,.25);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  display:block;
  padding:0;
}
.warn-tip-overlay.hidden{display:none;}
.warn-tip{
  position:absolute;
  /* fluid: narrower on small phones, capped on large screens; JS also caps it to the game area */
  width:clamp(180px,70vw,250px);
  box-sizing:border-box;
  padding:clamp(8px,2.4vw,12px) clamp(10px,3vw,14px);
  border-radius:14px;
  background:#fffaf2;
  color:#3a1d05;
  border:2px solid var(--warn-ring);
  box-shadow:0 0 0 4px rgba(139,92,246,.18),0 12px 28px var(--shadow-heavy);
  font-size:clamp(11.5px,3.3vw,13px);
  line-height:1.45;
  --arrow-x:50%;
}
/* pops out of the cell it points at */
.warn-tip.pop{
  transform-origin:var(--arrow-x) 100%;
  animation:warnTipPop .35s cubic-bezier(.34,1.4,.64,1) both;
}
.warn-tip.below.pop{transform-origin:var(--arrow-x) 0;}
@keyframes warnTipPop{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:none;}}

.warn-tip-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.warn-tip-head b{font-size:14px;color:var(--warn-text);}
.warn-tip-sample{
  flex:0 0 auto;
  width:28px;height:28px;
  display:grid;
  place-items:center;
  border-radius:6px;
  font-size:16px;
  font-weight:800;
  background:var(--warn-bg);
  color:var(--warn-text);
  animation:warnPulse 1.6s ease-in-out infinite;
}
.warn-tip p{margin:0 0 8px;}
.warn-tip p b{color:var(--warn-text);}
.warn-tip-ok{
  display:block;
  margin-left:auto;
  padding:6px 16px;
  border:0;
  border-radius:10px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--white);
  background:linear-gradient(180deg,#a78bfa,#7c3aed);
  box-shadow:0 3px 0 #5b21b6,0 5px 10px rgba(91,33,182,.35);
  cursor:pointer;
  transition:transform .08s ease,box-shadow .08s ease;
}
.warn-tip-ok:active{transform:translateY(3px);box-shadow:0 0 0 #5b21b6,0 2px 5px rgba(91,33,182,.3);}
/* arrow: bottom edge by default (bubble above the cell), top edge when below */
.warn-tip-arrow{
  position:absolute;
  left:var(--arrow-x);
  bottom:-8px;
  width:14px;height:14px;
  margin-left:-7px;
  background:#fffaf2;
  border-right:2px solid var(--warn-ring);
  border-bottom:2px solid var(--warn-ring);
  transform:rotate(45deg);
}
.warn-tip.below .warn-tip-arrow{
  bottom:auto;
  top:-8px;
  transform:rotate(225deg);
}
@media (prefers-reduced-motion:reduce){ .warn-tip.pop,.warn-tip-sample{animation:none;} }

/* ================= SELECTED CELL: no blink, static frame ================= */
/* no sliding / fading on the selected cell: it flickered on first tap */
.cell{transition:none !important;}
.cell-cursor{transition:none !important;display:none !important;}
.box:after{transition:none !important;}
.box:has(.cell.selected):after{opacity:0 !important;}
/* static orange frame drawn on the selected cell itself (no moving element, so no blink) */
/* corner cells follow the board's rounded corners (board radius 8px minus its 1px border) */
.cell.selected::before{border-radius:inherit;}
/* 9x9 board (3x3 boxes) and the 6x9 wide board */
#board:not(.size-4) .box:nth-child(1) .cell:nth-child(1).selected{border-top-left-radius:7px;}
#board:not(.size-4) .box:nth-child(3) .cell:nth-child(3).selected{border-top-right-radius:7px;}
#board:not(.size-4) .box:nth-child(7) .cell:nth-child(7).selected{border-bottom-left-radius:7px;}
#board:not(.size-4):not(.wide) .box:nth-child(9) .cell:nth-child(9).selected{border-bottom-right-radius:7px;}
#board.wide .box:nth-child(4) .cell:nth-child(7).selected{border-bottom-left-radius:7px;}
#board.wide .box:nth-child(6) .cell:nth-child(9).selected{border-bottom-right-radius:7px;}
/* 4x4 board (2x2 boxes) */
#board.size-4 .box:nth-child(1) .cell:nth-child(1).selected{border-top-left-radius:7px;}
#board.size-4 .box:nth-child(2) .cell:nth-child(2).selected{border-top-right-radius:7px;}
#board.size-4 .box:nth-child(3) .cell:nth-child(3).selected{border-bottom-left-radius:7px;}
#board.size-4 .box:nth-child(4) .cell:nth-child(4).selected{border-bottom-right-radius:7px;}
.cell.selected{box-shadow:inset 0 0 0 1px #f39a3c, inset 0 0 10px rgba(255,150,50,.55) !important;}