:root{
  color-scheme:light;
  --ink:#121932;--muted:#69708a;--primary:#5148c8;--primary2:#2c91ea;
  --surface:#ffffff;--panel:#ffffffec;--line:#d6dbea;--soft:#f3f1ff;
  --cell:#ffffff;--cell-peer:#eef4ff;--cell-same:#e4edff;--cell-selected:#d8e6ff;
  --cell-error:#ffe8e8;--given:#1f46b8;--entry:#151b3d;--note:#667085;
  --ok:#198754;--danger:#c43e3e;--shadow:0 24px 70px #2d376419;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}
body{background:radial-gradient(circle at 85% 0,#dcd4ff 0,transparent 32%),linear-gradient(145deg,#faf9ff,#edf6ff);min-height:100vh}
body.dark{--ink:#f6f8ff;--muted:#c2cbe0;--surface:#252d40;--panel:#293348f2;--line:#4a5875;--soft:#344058;--cell:#283247;--cell-peer:#344158;--cell-same:#3b4b68;--cell-selected:#496184;--cell-error:#653b42;--given:#9fc2ff;--entry:#f7f8ff;--note:#c0c9dc;--shadow:0 24px 64px #00000045;background:radial-gradient(circle at 80% 0,#46436d 0,transparent 32%),linear-gradient(145deg,#1d2637,#27344b)}
button,input,select{font:inherit}
a{color:inherit}
.hidden{display:none!important}
.shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:18px 0 34px}
.brand{display:flex;justify-content:center;margin:2px 0 14px}.brand img{width:min(330px,80vw);height:auto}
.page{background:var(--panel);border:1px solid #ffffff66;border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(18px);padding:clamp(18px,3vw,32px)}
.topline{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-weight:900;font-size:12px;color:var(--primary)}
h1{font-size:clamp(28px,4.4vw,44px);margin:8px 0 7px;line-height:1.06}
p{line-height:1.55;color:var(--muted)}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.pill{padding:6px 11px;border-radius:999px;background:var(--soft);color:var(--primary);font-weight:800;font-size:12px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);width:42px;height:42px;border-radius:13px;cursor:pointer;font-size:19px}.icon-btn:hover{transform:translateY(-1px)}
.game-layout{display:grid;grid-template-columns:minmax(300px,560px) minmax(250px,1fr);gap:28px;align-items:start;margin-top:22px}
.game-panel{min-width:0}.board-wrap{position:relative}
.grid{display:grid;aspect-ratio:1;background:#545b73;border:2.5px solid #545b73;gap:1px;border-radius:14px;overflow:hidden;user-select:none;touch-action:manipulation}
.cell{position:relative;display:grid;place-items:center;background:var(--cell);border:0;color:var(--entry);font-weight:800;font-size:clamp(16px,2.9vw,27px);cursor:pointer;min-width:0;padding:0}
.cell.given{color:var(--given);font-weight:900;cursor:default}.cell.peer{background:var(--cell-peer)}.cell.same{background:var(--cell-same)}.cell.selected{background:var(--cell-selected);outline:3px solid color-mix(in srgb,var(--primary) 75%,transparent);outline-offset:-3px;z-index:2}.cell.error{background:var(--cell-error);color:var(--danger)}
.cell.box-right{box-shadow:inset -2px 0 0 #4f5873}.cell.box-bottom:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#4f5873;z-index:1}
.cell.diag:before{content:"";position:absolute;inset:7%;border-radius:8px;background:color-mix(in srgb,var(--primary) 10%,transparent);pointer-events:none}
.cell .notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:clamp(7px,1.2vw,11px);font-weight:700;color:var(--note);line-height:1}.cell .notes span{display:grid;place-items:center}
.cell .value{position:relative;z-index:1}
.game-status{display:flex;justify-content:space-between;gap:10px;margin:10px 2px 12px;color:var(--muted);font-size:13px;font-weight:700}.mistakes.danger{color:var(--danger)}
.pad{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;margin-top:12px}.num{border:0;background:linear-gradient(160deg,var(--primary),var(--primary2));color:white;border-radius:11px;height:45px;font-weight:900;font-size:18px;cursor:pointer}.num.used{opacity:.36}.num:hover{filter:brightness(1.06)}
.tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:8px}.tool{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;height:41px;cursor:pointer;font-weight:800;font-size:13px}.tool.active{background:var(--soft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 35%,var(--line))}
.side{display:grid;gap:12px}.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}.card h2,.card h3{margin:0 0 9px}.card p{margin:0}
.actions{display:grid;gap:9px}.btn{appearance:none;border:0;border-radius:13px;padding:13px 15px;font-size:15px;font-weight:850;text-decoration:none;text-align:center;cursor:pointer;display:block}.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}.store{background:#11172e;color:#fff}.secondary{background:var(--soft);color:var(--primary)}
.settings-grid{display:grid;gap:8px}.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}.setting:last-child{border-bottom:0}.setting input[type=checkbox]{width:18px;height:18px}
.code{font:11px/1.42 Consolas,monospace;overflow-wrap:anywhere;color:var(--muted);background:var(--soft);padding:10px;border-radius:10px;margin-top:9px;max-height:86px;overflow:auto}
.status{padding:11px;border-radius:12px;background:#fff4d9;color:#704b00;margin:10px 0}.success{background:#e8f7ef;color:#136b40}
.ad-slot{min-height:90px;border:1px dashed var(--line);border-radius:15px;display:grid;place-items:center;color:var(--muted);font-size:12px;background:color-mix(in srgb,var(--surface) 80%,transparent);text-align:center;padding:12px}
.completion{position:absolute;inset:0;display:grid;place-items:center;background:rgba(16,23,46,.68);z-index:5;border-radius:14px;padding:22px;backdrop-filter:blur(2px)}.completion-card{background:var(--surface);color:var(--ink);border:1px solid color-mix(in srgb,var(--primary) 12%,var(--line));border-radius:22px;padding:22px 22px 20px;text-align:center;width:min(390px,92%);box-shadow:0 24px 60px rgba(10,22,52,.26)}.completion-card .big{font-size:46px;line-height:1;margin:0 0 7px}.completion-card h2{margin:6px 0 7px;font-size:1.15rem;line-height:1.35}.completion-card p{margin:5px 0 12px}.completion-card #completeMessage{color:var(--muted);font-size:.84rem;line-height:1.5}.completion-time{font-weight:800;color:var(--muted)}.game-over-actions{display:grid;gap:8px;margin-top:8px}.game-over-actions.hidden{display:none!important}.game-over-actions .btn{min-height:44px}.game-over-actions .reward{background:linear-gradient(135deg,#e9b93f,#f08a42);color:#fff;box-shadow:0 9px 22px rgba(225,151,53,.22)}
.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:18px}
.settings-drawer{position:fixed;inset:0;z-index:20;background:#10172e77;display:grid;justify-items:end}.drawer{width:min(390px,90vw);height:100%;background:var(--surface);padding:22px;box-shadow:-15px 0 40px #0002;overflow:auto}.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.drawer h2{margin:0}
@media(max-width:820px){.game-layout{grid-template-columns:1fr}.side{grid-template-columns:1fr 1fr}.side .wide{grid-column:1/-1}.pad{gap:5px}.num{height:42px}}
@media(max-width:620px){.shell{width:min(100% - 16px,1180px);padding-top:10px}.page{padding:16px;border-radius:22px}.game-layout{gap:18px}.side{grid-template-columns:1fr}.pad{grid-template-columns:repeat(5,1fr)}.tools{grid-template-columns:repeat(3,1fr)}.brand img{width:min(270px,82vw)}}

/* Variant rendering */
.cell.jig-top{border-top:2px solid var(--jig-color)!important}
.cell.jig-bottom{border-bottom:2px solid var(--jig-color)!important}
.cell.jig-left{border-left:2px solid var(--jig-color)!important}
.cell.jig-right{border-right:2px solid var(--jig-color)!important}
.cell[class*="jig-"]{box-sizing:border-box}

.cell.killer-cell{position:relative}
.cell.killer-top{border-top:1.5px dashed #b26b27}
.cell.killer-bottom{border-bottom:1.5px dashed #b26b27}
.cell.killer-left{border-left:1.5px dashed #b26b27}
.cell.killer-right{border-right:1.5px dashed #b26b27}
.cage-sum{
  position:absolute;left:3px;top:2px;z-index:3;padding:1px 3px;border-radius:4px;
  background:color-mix(in srgb,var(--cell) 82%,transparent);color:#8b4d13;
  font-size:clamp(8px,1.2vw,11px);font-weight:950;line-height:1
}
body.dark .cage-sum{color:#ffbf79}

.board-wrap.sandwich{padding-top:32px;padding-left:32px}
.sandwich-top{
  position:absolute;left:32px;right:0;top:0;height:32px;
  display:grid;grid-template-columns:repeat(9,1fr);align-items:center;text-align:center;
  color:var(--ink);font-size:12px;font-weight:900
}
.sandwich-left{
  position:absolute;left:0;top:32px;bottom:0;width:32px;
  display:grid;grid-template-rows:repeat(9,1fr);align-items:center;text-align:center;
  color:var(--ink);font-size:12px;font-weight:900
}
.board-wrap.sandwich .completion{inset:32px 0 0 32px}
.tool:disabled{opacity:.38;cursor:not-allowed}
@media(max-width:620px){
  .board-wrap.sandwich{padding-top:26px;padding-left:26px}
  .sandwich-top{left:26px;height:26px;font-size:10px}
  .sandwich-left{top:26px;width:26px;font-size:10px}
  .board-wrap.sandwich .completion{inset:26px 0 0 26px}
}

/* Web player theme families mirror the app's visual families. */
body[data-family="warmSepia"]{--primary:#9a633f;--primary2:#d08a52;--lav:#f4eadf;--cell-selected:#ead8c6;--cell-peer:#f5eee7;--cell-same:#efe2d3}
body[data-family="gray"]{--primary:#566074;--primary2:#8490a6;--lav:#eef1f5;--cell-selected:#dde3eb;--cell-peer:#f0f2f5;--cell-same:#e5e9ef}
body[data-family="sage"]{--primary:#557b68;--primary2:#78a28b;--lav:#edf5f0;--cell-selected:#d9eadf;--cell-peer:#eef6f1;--cell-same:#e3efe7}
body[data-family="blue"]{--primary:#315fc3;--primary2:#2a9adf;--lav:#e9f1ff;--cell-selected:#d5e4ff;--cell-peer:#edf4ff;--cell-same:#e1ecff}
body[data-family="lavender"]{--primary:#6d58c9;--primary2:#9a78e6;--lav:#f0ebff;--cell-selected:#e2d8ff;--cell-peer:#f2eeff;--cell-same:#e9e2ff}
.setting select{
  min-width:132px;border:1px solid var(--line);border-radius:9px;background:var(--surface);
  color:var(--ink);padding:7px 9px;font-size:12px
}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{
  scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important
}

.web-store-badge{
  display:flex;align-items:center;justify-content:flex-start;gap:12px;
  min-height:58px;padding:10px 15px;border-radius:14px;background:#0c0f16;color:#fff;
  border:1px solid #2a2f3a;text-decoration:none;box-shadow:0 9px 22px #10172e18;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease
}
.web-store-badge:hover{transform:translateY(-1px);box-shadow:0 13px 28px #10172e26;filter:brightness(1.05);text-decoration:none}
.web-store-badge .store-logo{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px}
.web-store-badge .store-logo svg{width:30px;height:30px;display:block}
.web-store-badge .store-copy{display:grid;gap:1px;line-height:1.03;text-align:left}
html[dir="rtl"] .web-store-badge .store-copy{text-align:right}
.web-store-badge small{font-size:9px;letter-spacing:.09em;color:#d5d8df;font-weight:750}
.web-store-badge strong{font-size:18px;letter-spacing:-.015em;color:#fff;font-weight:650}
.web-store-badge.microsoft .store-logo svg{width:27px;height:27px}
body.disable-motion *,body.disable-motion *::before,body.disable-motion *::after{
  scroll-behavior:auto!important;animation:none!important;transition:none!important
}

.difficulty-picker{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  margin:0 0 12px
}
.difficulty-picker a{
  display:flex;align-items:center;justify-content:center;min-height:38px;
  padding:7px 8px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);color:var(--muted);text-decoration:none;
  font-size:12px;font-weight:850;white-space:nowrap
}
.difficulty-picker a:hover{text-decoration:none;border-color:var(--primary);color:var(--primary)}
.difficulty-picker a.active{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;border-color:transparent;box-shadow:0 7px 17px rgba(44,94,214,.18)
}
@media(max-width:760px){
  .difficulty-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Large, priority-first play area across every web Sudoku variant and difficulty. */
.shell{
  width:min(1760px,calc(100% - 24px));
}
.page{
  padding:clamp(18px,2.2vw,30px);
}
.game-layout{
  grid-template-columns:minmax(700px,940px) minmax(280px,330px);
  gap:26px;
  justify-content:center;
}
.game-panel{
  width:100%;
  max-width:940px;
  margin-inline:auto;
}
.board-wrap,.grid{
  width:100%;
}
.side{
  min-width:0;
  max-width:330px;
}
.grid{
  border-radius:16px;
}
.cell{
  font-size:clamp(19px,2.25vw,32px);
}
.num{
  height:52px;
  font-size:20px;
}
.tool{
  height:44px;
  font-size:13px;
}
@media(min-width:1500px){
  .game-layout{
    grid-template-columns:minmax(780px,980px) minmax(290px,340px);
    gap:30px;
  }
  .game-panel{max-width:980px}
  .cell{font-size:clamp(20px,1.9vw,34px)}
  .num{height:54px;font-size:21px}
}
@media(max-width:1280px){
  .game-layout{
    grid-template-columns:minmax(0,900px);
    justify-content:center;
  }
  .game-panel{
    max-width:900px;
  }
  .side{
    max-width:900px;
    width:100%;
    margin-inline:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .side .wide{grid-column:1/-1}
}
@media(max-width:760px){
  .shell{width:min(100% - 10px,1760px)}
  .page{padding:12px}
  .game-panel{max-width:none}
  .cell{font-size:clamp(17px,5.2vw,28px)}
  .num{height:46px;font-size:18px}
  .side{grid-template-columns:1fr}
  .side .wide{grid-column:auto}
}

/* Desktop gameplay: grid stays large, while numbers and tools sit beside it. */
.game-panel{
  display:grid;
  grid-template-columns:minmax(520px,720px) 190px;
  grid-template-areas:
    "difficulty difficulty"
    "status status"
    "board controls";
  gap:0 18px;
  align-items:start;
  max-width:930px;
}
.difficulty-picker{grid-area:difficulty}
.game-status{grid-area:status}
.board-wrap{grid-area:board;max-width:720px}
.game-controls{
  grid-area:controls;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  position:sticky;
  top:18px;
}
.pad{
  display:grid;
  gap:8px;
  margin-top:0;
}
.pad.pad-9{grid-template-columns:repeat(3,minmax(0,1fr))}
.pad.pad-16{grid-template-columns:repeat(4,minmax(0,1fr))}
.num{
  width:100%;
  min-width:0;
  height:54px;
  border-radius:12px;
  font-size:20px;
}
.tools{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:0;
}
.tool{
  width:100%;
  height:44px;
}
.game-layout{
  grid-template-columns:minmax(730px,930px) minmax(270px,320px);
  gap:24px;
  align-items:start;
  justify-content:center;
}
.side{
  max-width:320px;
}
@media(max-width:1260px){
  .game-layout{
    grid-template-columns:minmax(0,930px);
  }
  .game-panel{
    grid-template-columns:minmax(500px,720px) 180px;
    max-width:918px;
  }
  .side{
    max-width:918px;
    width:100%;
    margin-inline:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .side .wide{grid-column:1/-1}
}
@media(max-width:860px){
  .game-panel{
    display:block;
    max-width:720px;
  }
  .game-controls{
    position:static;
    margin-top:12px;
  }
  .pad.pad-9{grid-template-columns:repeat(9,minmax(0,1fr))}
  .pad.pad-16{grid-template-columns:repeat(8,minmax(0,1fr))}
  .tools{grid-template-columns:repeat(5,minmax(0,1fr))}
  .num{height:46px;font-size:18px}
}
@media(max-width:620px){
  .pad.pad-9{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pad.pad-16{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tools{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* FINAL desktop gameplay layout: large board + generous controls; supporting content below. */
body{background:#f7faff}
.global-site-header + .shell > .brand{display:none}
.shell{width:min(1280px,calc(100% - 28px));padding-top:26px}
.page{padding:24px 26px 30px;border-radius:22px}
.game-layout{display:grid;grid-template-columns:1fr;gap:20px}
.game-panel{
  display:grid;
  grid-template-columns:minmax(560px,680px) 230px;
  grid-template-areas:
    "difficulty difficulty"
    "status status"
    "board controls";
  gap:0 22px;
  justify-content:center;
  align-items:start;
  max-width:980px;
  width:100%;
  margin-inline:auto;
}
.difficulty-picker{grid-area:difficulty;margin:2px 0 14px}
.game-status{grid-area:status;margin-bottom:8px}
.board-wrap{grid-area:board;width:100%;max-width:680px}
.game-controls{
  grid-area:controls;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  position:sticky;
  top:92px;
}
.pad{display:grid;gap:10px;margin:0}
.pad.pad-9{grid-template-columns:repeat(3,minmax(0,1fr))}
.pad.pad-16{grid-template-columns:repeat(4,minmax(0,1fr))}
.num{
  height:62px;
  min-width:0;
  border-radius:14px;
  font-size:24px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(55,91,210,.15);
}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.tool{
  height:50px;
  border-radius:13px;
  font-size:14px;
  font-weight:850;
}
.tools .tool:last-child:nth-child(odd){grid-column:1/-1}
.side{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr) minmax(260px,.85fr);
  gap:14px;
  max-width:980px;
  width:100%;
  margin:6px auto 0;
}
.side .wide{grid-column:auto}
.side .card,.side .actions,.side .ad-slot{min-width:0}
.side .actions{display:grid;gap:9px;align-content:start}
.side .web-store-badge{display:none}
.side .card.wide h2{font-size:1.05rem;margin-bottom:6px}
.side .card.wide p,.side .card p{font-size:.82rem;line-height:1.5}
.side .ad-slot{min-height:100px}
.side .card:nth-of-type(2),.side .card:nth-of-type(3){display:none}
.side #openApp,.side #copyLink{min-height:44px}
@media(max-width:1040px){
  .game-panel{grid-template-columns:minmax(500px,650px) 210px;gap:0 18px}
  .num{height:58px}
  .side{grid-template-columns:1fr 1fr}
  .side .ad-slot{grid-column:1/-1}
}
@media(max-width:820px){
  .shell{width:min(100% - 14px,1280px)}
  .page{padding:16px 14px}
  .game-panel{display:block;max-width:680px}
  .game-controls{position:static;margin-top:14px}
  .pad.pad-9{grid-template-columns:repeat(9,minmax(0,1fr))}
  .pad.pad-16{grid-template-columns:repeat(8,minmax(0,1fr))}
  .num{height:46px;font-size:18px;border-radius:10px}
  .tools{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tools .tool:last-child:nth-child(odd){grid-column:auto}
  .tool{height:44px;font-size:12px}
  .side{grid-template-columns:1fr}
  .side .ad-slot{grid-column:auto}
}
@media(max-width:560px){
  .difficulty-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pad.pad-9{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pad.pad-16{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tools{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 2026-09-29 viewport-fit correction:
   keep the entire Sudoku board visible on ordinary desktop/laptop screens,
   with number/tool controls beside it instead of forcing vertical scrolling. */
@media(min-width:821px){
  .shell{
    width:min(1240px,calc(100% - 24px));
    padding-top:12px;
    padding-bottom:20px;
  }
  .page{
    padding:14px 20px 20px;
    border-radius:20px;
  }
  .topline{
    gap:8px;
  }
  .topline h1{
    font-size:clamp(30px,3.15vw,38px);
    margin:4px 0 3px;
  }
  .topline p{
    margin:8px 0 0;
    line-height:1.42;
  }
  .meta{
    margin-top:8px;
  }
  .game-layout{
    margin-top:10px;
    gap:12px;
  }
  .game-panel{
    --board-fit:min(610px,calc(100vh - 325px),calc(100vw - 500px));
    width:max-content;
    max-width:100%;
    grid-template-columns:var(--board-fit) 210px;
    grid-template-areas:
      "difficulty difficulty"
      "status status"
      "board controls";
    gap:0 18px;
    justify-content:center;
    margin-inline:auto;
  }
  .difficulty-picker{
    margin:0 0 8px;
    gap:6px;
  }
  .difficulty-picker a{
    min-height:34px;
    padding:6px 7px;
    font-size:11px;
  }
  .game-status{
    margin:5px 2px 7px;
    font-size:12px;
  }
  .board-wrap{
    width:var(--board-fit);
    max-width:var(--board-fit);
  }
  .game-controls{
    width:210px;
    gap:10px;
    position:sticky;
    top:84px;
  }
  .pad{
    gap:8px;
  }
  .num{
    height:52px;
    font-size:21px;
    border-radius:12px;
  }
  .tools{
    gap:8px;
  }
  .tool{
    height:44px;
    font-size:12px;
  }
  .side{
    max-width:848px;
    margin-top:4px;
  }
}
@media(min-width:821px) and (max-height:820px){
  .shell{padding-top:8px}
  .page{padding-top:11px}
  .topline h1{font-size:30px}
  .topline p{margin-top:4px;font-size:14px}
  .meta{margin-top:5px}
  .game-layout{margin-top:7px}
  .game-panel{
    --board-fit:min(545px,calc(100vh - 290px),calc(100vw - 500px));
    grid-template-columns:var(--board-fit) 200px;
    gap:0 16px;
  }
  .game-controls{width:200px}
  .difficulty-picker a{min-height:31px;font-size:10.5px}
  .game-status{margin:4px 2px 5px}
  .num{height:46px;font-size:19px}
  .tool{height:40px;font-size:11.5px}
}

/* Mobile overflow correction: no Sudoku board or difficulty row may widen the page. */
@media(max-width:820px){
  html,body{max-width:100%;overflow-x:hidden}
  .shell,.page,.topline,.game-layout,.game-panel,.board-wrap,.grid,.game-controls,.difficulty-picker{
    min-width:0;
    max-width:100%;
  }
  .shell{width:100%;padding-left:7px;padding-right:7px}
  .page{width:100%;overflow:hidden}
  .game-panel{width:100%}
  .board-wrap,.grid{width:100%!important}
  .difficulty-picker{width:100%}
  .difficulty-picker a{
    min-width:0;
    white-space:normal;
    text-align:center;
    line-height:1.1;
  }
  .game-controls{width:100%}
}
@media(max-width:560px){
  .page{padding-left:10px;padding-right:10px}
  .topline h1{font-size:28px}
  .topline p{font-size:14px}
  .difficulty-picker{gap:6px}
  .difficulty-picker a{padding:6px 3px;font-size:10.5px}
}

@media(max-width:820px){
  .shell{
    width:100vw!important;
    max-width:100vw!important;
    margin:0!important;
    padding:8px 7px 24px!important;
  }
  .page{
    width:calc(100vw - 14px)!important;
    max-width:calc(100vw - 14px)!important;
    margin:0!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .game-layout,.game-panel{
    width:100%!important;
    max-width:100%!important;
  }
  .board-wrap{
    width:calc(100vw - 34px)!important;
    max-width:calc(100vw - 34px)!important;
  }
  .grid{
    width:100%!important;
    max-width:100%!important;
  }
  .difficulty-picker{
    width:calc(100vw - 34px)!important;
    max-width:calc(100vw - 34px)!important;
  }
  .difficulty-picker a{
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* ===== FINAL RESPONSIVE GAME LAYOUT AUDIT 2026-09-30 =====
   Desktop: board + numeric/tool controls + app/download sidebar.
   Mobile/tablet: board never exceeds viewport; controls flow underneath. */
@media(min-width:1181px){
  .game-layout{
    display:grid!important;
    grid-template-columns:minmax(0,820px) 286px!important;
    gap:20px!important;
    align-items:start!important;
    justify-content:center!important;
    max-width:1140px!important;
    margin:12px auto 0!important;
  }
  .game-panel{
    --board-fit:min(600px,calc(100vh - 300px),calc(100vw - 720px));
    display:grid!important;
    grid-template-columns:var(--board-fit) 190px!important;
    grid-template-areas:
      "difficulty difficulty"
      "status status"
      "board controls"!important;
    gap:0 18px!important;
    width:max-content!important;
    max-width:100%!important;
    margin:0!important;
  }
  .board-wrap{
    width:var(--board-fit)!important;
    max-width:var(--board-fit)!important;
  }
  .game-controls{
    width:190px!important;
    position:sticky!important;
    top:86px!important;
  }
  .num{height:54px!important;font-size:21px!important}
  .tool{height:45px!important;font-size:12px!important}
  .side{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:286px!important;
    max-width:286px!important;
    margin:0!important;
    position:sticky!important;
    top:84px!important;
  }
  .side .wide{grid-column:auto!important}
  .side .web-store-badge{display:flex!important}
  .side .card:nth-of-type(2),
  .side .card:nth-of-type(3){display:none!important}
  .side .card,.side .ad-slot{padding:14px!important}
  .side .card h2{font-size:1rem!important}
  .side .card p{font-size:.79rem!important}
  .side .web-store-badge{min-height:52px!important;padding:8px 11px!important}
  .side .web-store-badge strong{font-size:15px!important}
  .side .web-store-badge small{font-size:8px!important}
  .side .ad-slot{min-height:82px!important}
  .page>.ad-slot{max-width:1126px;margin-left:auto!important;margin-right:auto!important}
}
@media(min-width:821px) and (max-width:1180px){
  .game-layout{
    grid-template-columns:1fr!important;
    max-width:930px!important;
    margin-inline:auto!important;
  }
  .side{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    max-width:930px!important;
    width:100%!important;
    margin-inline:auto!important;
    position:static!important;
  }
  .side .web-store-badge{display:flex!important}
  .side .card:nth-of-type(2),
  .side .card:nth-of-type(3){display:none!important}
  .side .ad-slot{grid-column:1/-1!important}
}
@media(max-width:820px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  .shell{
    width:100%!important;
    max-width:100%!important;
    padding:8px 6px 24px!important;
    margin:0!important;
  }
  .page{
    width:100%!important;
    max-width:100%!important;
    padding:14px 10px 18px!important;
    margin:0!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  .topline,.topline>div:first-child{min-width:0!important;width:100%!important}
  .topline{display:grid!important;grid-template-columns:1fr auto!important;align-items:start!important}
  .topline>div:first-child{grid-column:1/-1!important}
  .top-actions{grid-column:2!important}
  .topline h1{font-size:clamp(27px,8vw,36px)!important;overflow-wrap:anywhere}
  .topline p{font-size:13px!important;max-width:100%!important}
  .game-layout{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin-top:12px!important;
  }
  .game-panel{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .difficulty-picker{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .difficulty-picker a{
    min-width:0!important;
    min-height:36px!important;
    padding:6px 3px!important;
    font-size:10px!important;
    white-space:normal!important;
    line-height:1.08!important;
    overflow-wrap:anywhere!important;
  }
  .board-wrap,.grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .game-controls{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    margin-top:12px!important;
    gap:10px!important;
  }
  .pad{width:100%!important;gap:7px!important}
  .pad.pad-9{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .pad.pad-16{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .num{
    width:100%!important;
    min-width:0!important;
    height:46px!important;
    font-size:18px!important;
  }
  .tools{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .tools .tool:last-child:nth-child(odd){grid-column:1/-1!important}
  .tool{width:100%!important;min-width:0!important;height:43px!important;font-size:11px!important}
  .side{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    margin:16px 0 0!important;
    position:static!important;
  }
  .side .web-store-badge{display:flex!important;width:100%!important}
  .side .card:nth-of-type(2),
  .side .card:nth-of-type(3){display:none!important}
  .side .ad-slot{grid-column:auto!important}
}
@media(max-width:420px){
  .page{padding-left:8px!important;padding-right:8px!important}
  .pad.pad-16{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .num{height:43px!important;font-size:17px!important}
  .difficulty-picker a{font-size:9.5px!important}
}

/* Medium-height desktop fit: keep the full board in view without shrinking tall displays. */
@media(min-width:1181px) and (min-height:821px) and (max-height:960px){
  .game-panel{
    --board-fit:min(580px,calc(100vh - 325px),calc(100vw - 720px));
  }
}

/* 2026-09-30 final play-area cleanup:
   remove the promotional sidebar and dedicate that space to Sudoku controls. */
.game-links{
  display:grid;
  gap:8px;
  margin-top:2px;
}
.game-links .btn{min-height:44px}

@media(min-width:1181px){
  .game-layout{
    grid-template-columns:minmax(0,1040px)!important;
    max-width:1040px!important;
    gap:0!important;
  }
  .game-panel{
    --board-fit:min(610px,calc(100vh - 300px),calc(100vw - 610px));
    grid-template-columns:var(--board-fit) minmax(260px,300px)!important;
    gap:0 24px!important;
    max-width:980px!important;
    width:max-content!important;
    margin-inline:auto!important;
  }
  .game-controls{
    width:286px!important;
    gap:12px!important;
    top:84px!important;
  }
  .num{
    height:64px!important;
    font-size:24px!important;
    border-radius:14px!important;
  }
  .tools{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .tool{
    height:48px!important;
    font-size:13px!important;
  }
  .tools .tool:last-child:nth-child(odd){grid-column:1/-1!important}
  .game-links{grid-template-columns:1fr!important}
  .side{display:none!important}
  .page>.ad-slot{
    max-width:980px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media(min-width:821px) and (max-width:1180px){
  .game-panel{
    --board-fit:min(590px,calc(100vh - 300px),calc(100vw - 360px));
    grid-template-columns:var(--board-fit) minmax(220px,250px)!important;
    gap:0 18px!important;
    width:max-content!important;
  }
  .game-controls{width:236px!important}
  .num{height:56px!important}
  .side{display:none!important}
}

@media(max-width:820px){
  .side{display:none!important}
  .game-links{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
}
@media(max-width:460px){
  .game-links{grid-template-columns:1fr}
}

/* Keep the complete board visible on common 900px-high desktop screens. */
@media(min-width:1181px) and (min-height:821px) and (max-height:960px){
  .game-panel{
    --board-fit:min(570px,calc(100vh - 330px),calc(100vw - 610px));
  }
}

/* Gameplay polish: clearer Jigsaw regions, rewarded Auto Notes, ads and feedback. */
.cell.jig-top{border-top:3px solid #44536f!important}
.cell.jig-left{border-left:3px solid #44536f!important}
.cell.jig-bottom{border-bottom:3px solid #44536f!important}
.cell.jig-right{border-right:3px solid #44536f!important}
body.dark .cell.jig-top,
body.dark .cell.jig-left,
body.dark .cell.jig-bottom,
body.dark .cell.jig-right{border-color:#a7b3cc!important}
.cell.jigsaw-region-peer:not(.selected):not(.error){
  box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--primary) 12%,transparent);
}
.cell.jigsaw-region-peer .value{font-weight:950}
.rewarded-tool{
  position:relative;
  border-color:color-mix(in srgb,#f0a52b 55%,var(--line))!important;
}
.rewarded-tool:after{
  content:"AD";
  position:absolute;
  top:4px;
  right:5px;
  min-width:20px;
  padding:2px 4px;
  border-radius:999px;
  background:#f0a52b;
  color:#231900;
  font-size:8px;
  font-weight:950;
  line-height:1;
}
html[dir="rtl"] .rewarded-tool:after{right:auto;left:5px}
.notes.notes-16{
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  font-size:clamp(5px,.75vw,8px);
}
.ad-side{min-height:74px;margin-top:10px}
.ad-below-game{min-height:92px;margin-top:22px}
.ad-after-guide{min-height:92px;margin-top:18px}
.variant-guide{
  margin-top:20px;
  padding:clamp(18px,2.5vw,28px);
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface);
  box-shadow:0 12px 32px rgba(35,52,95,.07);
}
.variant-guide h2{margin:0 0 8px;font-size:clamp(22px,3vw,30px)}
.variant-guide h3{margin:20px 0 7px;font-size:16px;color:var(--primary)}
.variant-guide p{margin:0 0 8px}
.variant-guide ul{margin:8px 0 0;padding-inline-start:22px;color:var(--muted);line-height:1.65}
.variant-guide .guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.variant-guide .guide-card{padding:14px;border-radius:15px;background:var(--soft)}
@media(max-width:700px){.variant-guide .guide-grid{grid-template-columns:1fr}.ad-side{display:none}}
@keyframes cellPop{0%{transform:scale(.92)}55%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes cellError{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes cellHint{0%{box-shadow:inset 0 0 0 2px #f0b132,0 0 0 0 rgba(240,177,50,.35)}70%{box-shadow:inset 0 0 0 3px #f0b132,0 0 0 10px rgba(240,177,50,0)}100%{box-shadow:inset 0 0 0 2px #f0b132,0 0 0 0 rgba(240,177,50,0)}}
@keyframes solvedGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 18px rgba(73,185,126,.36))}}
.cell.fx-pop{animation:cellPop .24s ease-out}
.cell.fx-error{animation:cellError .32s ease-out}
.cell.fx-hint{animation:cellHint .7s ease-out}
body.fx-complete .game-panel{animation:solvedGlow .85s ease}
body.reduce-motion .cell.fx-pop,
body.reduce-motion .cell.fx-error,
body.reduce-motion .cell.fx-hint{animation-duration:.12s}
body.disable-motion .cell.fx-pop,
body.disable-motion .cell.fx-error,
body.disable-motion .cell.fx-hint,
body.disable-motion.fx-complete .game-panel{animation:none!important}
@media(min-width:1181px){
  .tools{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ad-side{width:286px}
}

/* Stronger Jigsaw region reading: region border wins over normal cell lines. */
.cell.jig-top{border-top-width:4px!important;border-top-color:#33435f!important}
.cell.jig-left{border-left-width:4px!important;border-left-color:#33435f!important}
.cell.jig-bottom{border-bottom-width:4px!important;border-bottom-color:#33435f!important}
.cell.jig-right{border-right-width:4px!important;border-right-color:#33435f!important}
body.dark .cell.jig-top,
body.dark .cell.jig-left,
body.dark .cell.jig-bottom,
body.dark .cell.jig-right{border-color:#b9c5dc!important}
.cell.jigsaw-region-peer:not(.selected):not(.error){
  box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--primary) 18%,transparent)!important;
}

.variant-guide .guide-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap
}
.variant-guide .guide-heading h2{margin:0}
.variant-guide .guide-heading span{
  padding:6px 10px;border-radius:999px;background:var(--soft);
  color:var(--primary);font-size:11px;font-weight:900;letter-spacing:.06em
}
.variant-guide .guide-lead{max-width:900px;font-size:15px;line-height:1.7;color:var(--muted)}
.variant-guide .guide-grid-full{margin-top:16px;align-items:stretch}
.variant-guide .guide-card h3{margin-top:0}
.variant-guide .guide-card h4{margin:14px 0 6px;font-size:13px;color:var(--text)}
.variant-guide .guide-card p,
.variant-guide .guide-card li{line-height:1.65}
.variant-guide .guide-card ol,
.variant-guide .guide-card ul{margin:8px 0 0;padding-inline-start:22px;color:var(--muted)}


/* ===== 2026-09-30 gameplay parity + AdSense-safe web controls ===== */
.game-actionbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  margin:10px 0 4px;
  flex-wrap:wrap;
}
.game-action{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--ink);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(25,45,84,.05);
}
.game-action:hover{border-color:var(--primary);color:var(--primary)}
.game-action:focus-visible,.color-trigger:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary) 30%,transparent);
  outline-offset:2px;
}
.paused-overlay{
  position:absolute;
  inset:0;
  z-index:7;
  display:grid;
  place-items:center;
  padding:22px;
  border-radius:16px;
  background:color-mix(in srgb,#11182f 78%,transparent);
  backdrop-filter:blur(4px);
}
.paused-card{
  width:min(300px,88%);
  display:grid;
  gap:15px;
  padding:24px;
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow);
  text-align:center;
  color:var(--ink);
}
.paused-card strong{font-size:1.35rem}
.pad-tools{position:relative;display:grid}
.color-trigger{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--ink);
  font-weight:850;
  cursor:pointer;
}
.color-trigger[aria-expanded="true"]{
  border-color:var(--primary);
  color:var(--primary);
  background:var(--soft);
}
.color-tray{
  position:absolute;
  z-index:25;
  top:calc(100% + 7px);
  left:0;
  right:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 18px 42px rgba(25,45,84,.22);
}
.color-tray button{
  min-height:36px;
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  border-radius:10px;
  cursor:pointer;
}
.color-tray .color-clear{
  background:var(--surface);
  color:var(--danger);
  font-size:22px;
  font-weight:900;
}
.cell.user-colored:not(.error){
  background:var(--user-cell-color)!important;
}
.cell.user-colored.selected{
  outline-color:var(--primary)!important;
}
.cell{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.solve-rate-toast{
  position:fixed;
  z-index:2500;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  width:min(560px,calc(100vw - 28px));
  padding:13px 16px;
  border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line));
  border-radius:14px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 18px 44px rgba(25,45,84,.22);
  text-align:center;
  font-weight:850;
}
.game-store-links{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.game-store-links .compact-store{
  min-height:50px;
  padding:7px 10px;
}
.game-store-links .compact-store .store-logo{
  width:28px;height:28px;flex-basis:28px;
}
.game-store-links .compact-store .store-logo svg{
  width:25px;height:25px;
}
.game-store-links .compact-store strong{font-size:14px}
.game-store-links .compact-store small{font-size:7.5px}
.ad-slot.ad-unconfigured{display:none!important}

/* Leave clean desktop gutters for AdSense Auto ads side rails. */
@media(min-width:1500px){
  .shell{width:min(1240px,calc(100% - 300px))!important}
}
@media(max-width:820px){
  .game-actionbar{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .game-actionbar::-webkit-scrollbar{display:none}
  .game-action{
    flex:0 0 auto;
    min-height:36px;
    padding:6px 9px;
    font-size:11px;
  }
  .color-tray{
    grid-template-columns:repeat(7,minmax(0,1fr));
  }
  .game-store-links{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:520px){
  .game-action span{display:none}
  .game-action{
    width:38px;
    min-width:38px;
    padding:6px;
    font-size:16px;
  }
  .color-tray{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .game-store-links{grid-template-columns:1fr}
}

/* Keep every 9x9 web variant on the same physical cell size.
   Sandwich clues occupy a gutter outside the board instead of shrinking it. */
@media(min-width:821px){
  .board-wrap.sandwich{
    box-sizing:content-box!important;
    margin-left:-32px;
  }
}

/* 2026-09-30 wider page shell + strict equal board cells + mobile top fit */
.shell{width:min(1480px,calc(100% - 28px))!important}
.game-layout{
  grid-template-columns:minmax(360px,680px) minmax(290px,1fr)!important;
  gap:28px!important
}
.grid{
  grid-auto-rows:minmax(0,1fr)!important;
  width:100%;
  max-width:100%;
}
.cell{aspect-ratio:auto!important}
@media(max-width:980px){
  .game-layout{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  .shell{width:100%!important;padding:6px 5px 26px!important}
  .page{padding:12px 8px 16px!important;border-radius:18px!important;overflow:hidden}
  .topline{gap:8px!important;margin-bottom:2px}
  .topline>div:first-child{min-width:0;width:100%}
  .topline h1{
    font-size:clamp(25px,8.4vw,34px)!important;
    line-height:1.02!important;
    margin:6px 0!important;
    overflow-wrap:anywhere
  }
  .topline p{font-size:13px!important;margin:5px 0 8px!important}
  .game-layout{margin-top:10px!important;gap:12px!important}
  .game-status{margin:7px 2px 8px!important}
  .grid{border-radius:10px!important}
  .difficulty-picker{margin-top:6px!important}
  .side{margin-top:3px!important}
}

/* Pass-rate notice: visible near the game like the reference, then fades away. */
.solve-rate-toast{
  position:relative!important;
  left:auto!important;bottom:auto!important;transform:none!important;
  width:min(620px,100%)!important;
  margin:10px auto 4px!important;
  padding:11px 16px!important;
  border:0!important;
  border-radius:11px!important;
  background:linear-gradient(135deg,#3559b7,#337edb)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(42,80,170,.20)!important;
  text-align:center!important;
  font-size:13px!important;
  font-weight:800!important;
}


/* 2026-09-30 hard mobile board clamp: never exceed the physical viewport. */
@media(max-width:820px){
  .shell,
  .page,
  .game-layout,
  .game-panel,
  .board-wrap,
  .grid,
  .game-controls{
    box-sizing:border-box!important;
  }
  .board-wrap{
    inline-size:min(100%,calc(100dvw - 32px))!important;
    width:min(100%,calc(100dvw - 32px))!important;
    max-width:calc(100dvw - 32px)!important;
    margin-inline:auto!important;
  }
  #grid.grid{
    inline-size:100%!important;
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:1/1!important;
    overflow:hidden!important;
  }
  .game-panel{
    inline-size:100%!important;
    overflow:visible!important;
  }
  .difficulty-picker{
    inline-size:100%!important;
    width:100%!important;
    max-width:100%!important;
  }
}
@media(max-width:440px){
  .page{
    padding-top:10px!important;
  }
  .topline{
    margin-bottom:0!important;
  }
  .topline h1{
    font-size:clamp(23px,6.8vw,28px)!important;
    line-height:1.04!important;
    margin:4px 0 5px!important;
  }
  .topline p{
    margin:3px 0 6px!important;
    line-height:1.35!important;
  }
  .meta{
    margin-top:5px!important;
  }
  .solve-rate-toast{
    margin:6px auto 3px!important;
    padding:9px 10px!important;
    font-size:11.5px!important;
  }
  .game-actionbar{
    margin:5px 0 2px!important;
  }
  .difficulty-picker{
    margin:5px 0 8px!important;
  }
  .game-status{
    margin:4px 2px 5px!important;
  }
}


/* ===== Sudoku Pro custom confirmation / reward dialogs ===== */
body.modal-open{overflow:hidden}
.pro-modal{
  position:fixed;
  inset:0;
  z-index:4000;
  display:grid;
  place-items:center;
  padding:20px;
}
.pro-modal.hidden{display:none!important}
.pro-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,21,43,.54);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.pro-modal-card{
  position:relative;
  z-index:1;
  width:min(430px,calc(100vw - 32px));
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:14px 16px;
  padding:22px;
  border:1px solid color-mix(in srgb,var(--primary) 16%,var(--line));
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--primary) 12%,transparent),transparent 38%),
    var(--surface);
  box-shadow:0 28px 80px rgba(11,25,58,.32);
  transform:translateY(10px) scale(.975);
  opacity:.2;
  transition:transform .18s ease,opacity .18s ease;
}
.pro-modal-card.modal-enter{
  transform:translateY(0) scale(1);
  opacity:1;
}
.pro-modal-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:color-mix(in srgb,var(--primary) 13%,var(--surface));
  color:var(--primary);
  font-size:28px;
  font-weight:900;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 13%,transparent);
}
.pro-modal-copy{min-width:0;padding-top:2px}
.pro-modal-copy h2{
  margin:0 0 6px;
  color:var(--ink);
  font-size:1.2rem;
  line-height:1.2;
}
.pro-modal-copy p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.58;
}
.pro-modal-actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);
  gap:9px;
  margin-top:5px;
}
.pro-modal-btn{
  min-height:45px;
  border:0;
  border-radius:13px;
  padding:10px 13px;
  font:850 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.pro-modal-btn:hover{transform:translateY(-1px)}
.pro-modal-btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 22%,transparent);
}
.pro-modal-btn.secondary{
  background:var(--soft);
  color:var(--ink);
  border:1px solid var(--line);
}
.pro-modal.reward .pro-modal-icon{
  color:#7a4d00;
  background:#fff3cf;
  box-shadow:inset 0 0 0 1px #f3d47d;
}
.pro-modal.warning .pro-modal-icon{
  color:#a75a00;
  background:#fff0dd;
  box-shadow:inset 0 0 0 1px #f5c98d;
}
.pro-modal.danger .pro-modal-icon{
  color:#c3353b;
  background:#ffeaec;
  box-shadow:inset 0 0 0 1px #f5c1c6;
}
.pro-modal.danger .pro-modal-btn.primary{
  background:linear-gradient(135deg,#d8434d,#ef6a52);
  box-shadow:0 10px 24px rgba(216,67,77,.22);
}
html[dir="rtl"] .pro-modal-card{
  grid-template-columns:minmax(0,1fr) 58px;
}
html[dir="rtl"] .pro-modal-icon{grid-column:2}
html[dir="rtl"] .pro-modal-copy{grid-column:1;grid-row:1}
@media(max-width:520px){
  .pro-modal{padding:14px}
  .pro-modal-card{
    width:min(100%,390px);
    grid-template-columns:48px minmax(0,1fr);
    gap:12px;
    padding:18px;
    border-radius:20px;
  }
  .pro-modal-icon{width:48px;height:48px;border-radius:15px;font-size:23px}
  .pro-modal-copy h2{font-size:1.08rem}
  .pro-modal-copy p{font-size:.84rem}
  .pro-modal-actions{grid-template-columns:1fr}
  .pro-modal-btn{min-height:44px}
  html[dir="rtl"] .pro-modal-card{grid-template-columns:minmax(0,1fr) 48px}
}


/* Compact app install prompt for shared puzzle / shared strategy pages. */
.top-install-prompt{
  width:min(720px,100%);
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px 8px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--primary) 5%,var(--surface)));
  box-shadow:0 6px 18px rgba(23,41,71,.05);
}
.top-install-copy{display:grid;min-width:0}
.top-install-copy strong{color:var(--ink);font-size:13px}
.top-install-copy small{
  color:var(--muted);
  font-size:10.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.top-install-google{
  flex:0 0 auto;
  min-height:34px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 10px;
  border-radius:10px;
  background:#101522;
  color:#fff;
  text-decoration:none;
  font-size:11px;
  font-weight:850;
}
.top-install-google:hover{filter:brightness(1.07);text-decoration:none}
.top-install-google .store-logo{width:20px;height:22px;display:grid;place-items:center}
.top-install-google svg{width:18px;height:21px;display:block}
@media(max-width:520px){
  .top-install-prompt{
    margin-bottom:5px;
    padding:6px 7px 6px 9px;
    border-radius:11px;
  }
  .top-install-copy strong{font-size:11.5px}
  .top-install-copy small{font-size:9px;max-width:170px}
  .top-install-google{
    min-height:31px;
    padding:4px 8px;
    font-size:10px;
  }
}


/* Final small-phone safety gutter: full board remains visible edge-to-edge. */
@media(max-width:480px){
  .board-wrap{
    width:calc(100dvw - 48px)!important;
    inline-size:calc(100dvw - 48px)!important;
    max-width:calc(100dvw - 48px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #grid.grid{
    width:100%!important;
    inline-size:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .difficulty-picker{
    width:calc(100dvw - 48px)!important;
    max-width:calc(100dvw - 48px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* ===== Final 2026-09-30 gameplay/layout overrides ===== */
.game-panel{
  grid-template-areas:
    "actions actions"
    "difficulty difficulty"
    "status status"
    "board controls"!important;
}
.game-actionbar{
  grid-area:actions!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0 0 10px!important;
  width:100%!important;
}
.game-action{
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  padding:7px 8px!important;
}
.solve-rate-toast{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:min(680px,100%)!important;
  margin:12px auto 16px!important;
  padding:10px 14px!important;
  z-index:auto!important;
}
@media(max-width:760px){
  .game-actionbar{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
}
@media(max-width:460px){
  .game-actionbar{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    overflow:visible!important;
  }
  .game-action{
    min-height:36px!important;
    padding:5px!important;
  }
  .game-action span{display:none!important}
}


/* Pass-rate message: inside the board's lower third, never above the puzzle. */
.board-wrap .solve-rate-toast{
  position:absolute!important;
  left:6%!important;
  right:6%!important;
  top:70%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:10px 12px!important;
  z-index:8!important;
  pointer-events:none!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(60,84,205,.96),rgba(42,146,230,.96))!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(22,55,120,.24)!important;
  font-size:clamp(10px,1.4vw,13px)!important;
}
@media(max-width:520px){
  .board-wrap .solve-rate-toast{
    left:4%!important;
    right:4%!important;
    padding:8px 9px!important;
    font-size:10px!important;
  }
}


/* ===== Compact game header + small upper-right game actions ===== */
.page{
  position:relative!important;
  padding:14px 18px 20px!important;
}
.topline{
  min-height:64px!important;
  padding-right:230px!important;
  gap:8px!important;
  margin:0!important;
}
.topline h1{
  font-size:clamp(25px,3vw,34px)!important;
  margin:3px 0 3px!important;
  line-height:1.02!important;
}
.topline p{
  margin:0!important;
  font-size:13px!important;
  line-height:1.35!important;
  max-width:900px!important;
}
.eyebrow{font-size:10px!important}
.meta{
  margin-top:5px!important;
  gap:5px!important;
}
.pill{
  padding:4px 8px!important;
  font-size:10px!important;
}
.game-layout{
  margin-top:7px!important;
}
.game-panel{
  grid-template-areas:
    "difficulty difficulty"
    "status status"
    "board controls"!important;
}
.game-actionbar{
  position:absolute!important;
  top:14px!important;
  right:18px!important;
  left:auto!important;
  z-index:11!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  width:auto!important;
  margin:0!important;
}
.game-action{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  font-size:15px!important;
  box-shadow:0 4px 12px rgba(29,48,84,.07)!important;
}
.game-action span{display:none!important}
.difficulty-picker{
  margin:0 0 5px!important;
  gap:5px!important;
}
.difficulty-picker a{
  min-height:31px!important;
  padding:5px 7px!important;
  font-size:10px!important;
}
.game-status{
  margin:3px 2px 5px!important;
  font-size:11px!important;
}
.shell{
  padding-top:8px!important;
}
@media(max-width:820px){
  .page{padding:10px 8px 16px!important}
  .topline{
    min-height:0!important;
    padding-right:0!important;
    padding-bottom:4px!important;
  }
  .topline h1{font-size:clamp(22px,7vw,28px)!important}
  .topline p{
    font-size:11px!important;
    line-height:1.28!important;
    max-width:100%!important;
  }
  .game-actionbar{
    position:static!important;
    display:flex!important;
    justify-content:flex-end!important;
    width:100%!important;
    margin:2px 0 4px!important;
  }
  .game-action{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    border-radius:10px!important;
    font-size:14px!important;
  }
  .game-panel{
    display:block!important;
  }
  .difficulty-picker{
    margin-bottom:4px!important;
  }
  .game-status{
    margin:2px 2px 4px!important;
  }
}
@media(max-width:460px){
  .page{padding:8px 6px 14px!important}
  .topline h1{font-size:22px!important}
  .topline p{display:none!important}
  .eyebrow{font-size:9px!important}
  .meta{margin-top:3px!important}
  .game-actionbar{gap:4px!important}
  .game-action{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    min-height:32px!important;
  }
  .difficulty-picker a{
    min-height:29px!important;
    font-size:9px!important;
    padding:4px 5px!important;
  }
}

/* ===== Strong, obvious visual feedback ===== */
@keyframes cellCorrectStrong{
  0%{transform:scale(.9);filter:brightness(.94)}
  45%{
    transform:scale(1.11);
    box-shadow:inset 0 0 0 3px rgba(38,178,108,.72),0 0 0 7px rgba(38,178,108,.12);
    filter:brightness(1.08)
  }
  100%{transform:scale(1);box-shadow:none;filter:none}
}
@keyframes unitSweep{
  0%{transform:scale(.96);filter:brightness(1)}
  40%{
    transform:scale(1.045);
    filter:brightness(1.17);
    box-shadow:inset 0 0 0 3px rgba(36,185,126,.72);
    background:color-mix(in srgb,#9ff0bf 46%,var(--cell))
  }
  100%{transform:scale(1);filter:none;box-shadow:none}
}
@keyframes unitBoardGlow{
  0%,100%{filter:none}
  48%{filter:drop-shadow(0 0 16px rgba(43,187,125,.4))}
}
@keyframes hintBoardGlow{
  0%,100%{filter:none}
  35%{filter:drop-shadow(0 0 16px rgba(245,181,47,.48))}
  70%{filter:drop-shadow(0 0 6px rgba(245,181,47,.24))}
}
@keyframes notesBoardGlow{
  0%,100%{filter:none}
  45%{filter:drop-shadow(0 0 18px rgba(86,112,237,.4))}
}
@keyframes confettiFlash{
  0%{opacity:0;transform:scale(.92)}
  25%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.04)}
}

.cell.fx-correct{
  animation:cellCorrectStrong .52s cubic-bezier(.2,.8,.2,1)!important;
  z-index:6!important;
}
.cell.fx-unit-complete{
  animation:unitSweep .72s ease var(--fx-unit-delay,0ms) both!important;
  z-index:5!important;
}
.board-wrap.fx-unit-board .grid{
  animation:unitBoardGlow .88s ease!important;
}
.board-wrap.fx-hint-board .grid{
  animation:hintBoardGlow 1.05s ease!important;
}
.board-wrap.fx-notes-board .grid{
  animation:notesBoardGlow 1.05s ease!important;
}
.cell.fx-hint{
  animation:cellHint 1.05s ease-out!important;
  z-index:7!important;
}
body.fx-complete .board-wrap::before{
  content:""!important;
  position:absolute!important;
  inset:-12px!important;
  z-index:12!important;
  pointer-events:none!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 10% 18%,#ffd75a 0 4px,transparent 5px),
    radial-gradient(circle at 22% 75%,#5ee0a0 0 4px,transparent 5px),
    radial-gradient(circle at 42% 12%,#6aa8ff 0 4px,transparent 5px),
    radial-gradient(circle at 64% 80%,#ff7fa6 0 4px,transparent 5px),
    radial-gradient(circle at 82% 18%,#9f83ff 0 4px,transparent 5px),
    radial-gradient(circle at 92% 66%,#ffd75a 0 4px,transparent 5px)!important;
  animation:confettiFlash .9s ease-out!important;
}
body.reduce-motion .cell.fx-correct,
body.reduce-motion .cell.fx-unit-complete,
body.reduce-motion .board-wrap.fx-unit-board .grid,
body.reduce-motion .board-wrap.fx-hint-board .grid,
body.reduce-motion .board-wrap.fx-notes-board .grid{
  animation-duration:.16s!important;
}
body.disable-motion .cell.fx-correct,
body.disable-motion .cell.fx-unit-complete,
body.disable-motion .board-wrap.fx-unit-board .grid,
body.disable-motion .board-wrap.fx-hint-board .grid,
body.disable-motion .board-wrap.fx-notes-board .grid,
body.disable-motion.fx-complete .board-wrap::before{
  animation:none!important;
}


/* Hide the redundant intro line on normal /play pages to bring the board higher. */
body.web-play-page #intro{display:none!important}

/* Medium screens: keep floating stores visible but away from the number pad. */
@media(max-width:1180px){
  .floating-store-dock{
    width:auto!important;
    left:auto!important;
    right:12px!important;
    top:auto!important;
    bottom:12px!important;
    transform:none!important;
    grid-template-columns:repeat(2,54px)!important;
    justify-items:stretch!important;
  }
  html[dir="rtl"] .floating-store-dock{
    left:12px!important;
    right:auto!important;
  }
  .floating-store,
  .floating-store:hover{
    width:54px!important;
    min-width:54px!important;
    height:46px!important;
    padding:0!important;
    justify-content:center!important;
  }
  .floating-store::after,
  .floating-store:hover::after,
  .floating-store span,
  .floating-store:hover span{display:none!important}
}


/* Persistent cell-color palette: stays open until the user closes it. */
.color-tray-head{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:30px;
  padding:0 2px 2px;
  color:var(--ink);
  font-size:11px;
  font-weight:850;
}
.color-tray .color-tray-close{
  width:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  height:28px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--line)!important;
  border-radius:9px!important;
  background:var(--soft)!important;
  color:var(--ink)!important;
  font-size:18px!important;
  line-height:1!important;
}
.color-tray .color-tray-close:hover{
  color:var(--danger)!important;
  border-color:color-mix(in srgb,var(--danger) 38%,var(--line))!important;
}
.color-tray [data-cell-color]{
  position:relative;
  transition:transform .13s ease,box-shadow .13s ease,border-color .13s ease!important;
}
.color-tray [data-cell-color]:hover{
  transform:translateY(-1px);
}
.color-tray [data-cell-color].active{
  border-color:var(--primary)!important;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent),
    inset 0 0 0 2px rgba(255,255,255,.65)!important;
}
.color-tray [data-cell-color].active::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#17233d;
  font-size:15px;
  font-weight:950;
  text-shadow:0 1px 2px rgba(255,255,255,.9);
  pointer-events:none;
}
.color-tray .color-clear.active::after{
  color:var(--danger);
}


/* Persistent paint palette: active swatch is explicit and remains active until the user closes the palette. */
.color-tray [data-cell-color].active::after{
  content:"✓"!important;
}


/* ===== Variant board readability: Killer + 16x16 ===== */
.grid.grid-16 .cell{
  font-size:clamp(10px,1.05vw,16px)!important;
  font-weight:780!important;
}
.grid.grid-16 .cell.given{
  font-weight:900!important;
}
.grid.grid-16 .cell .value{
  font-size:inherit!important;
  line-height:1!important;
}
.grid.grid-16 .notes.notes-16{
  inset:1px!important;
  font-size:clamp(4px,.58vw,7px)!important;
  line-height:.9!important;
}
.grid.variant-killer .cell{
  transition:background-color .12s ease,box-shadow .12s ease,outline-color .12s ease;
}
.grid.variant-killer .cell.box-right{
  box-shadow:inset -1px 0 0 rgba(66,77,101,.34);
}
.grid.variant-killer .cell.box-bottom:after{
  height:1px!important;
  background:rgba(66,77,101,.34)!important;
}
.grid.variant-killer .cell.killer-top{
  border-top:2.5px dashed #b86a25!important;
}
.grid.variant-killer .cell.killer-bottom{
  border-bottom:2.5px dashed #b86a25!important;
}
.grid.variant-killer .cell.killer-left{
  border-left:2.5px dashed #b86a25!important;
}
.grid.variant-killer .cell.killer-right{
  border-right:2.5px dashed #b86a25!important;
}
.grid.variant-killer .cell.killer-cage-peer:not(.selected):not(.error){
  background:color-mix(
    in srgb,
    var(--killer-cage-color, #f3efe7) 66%,
    var(--primary) 34%
  )!important;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb,var(--primary) 34%,transparent),
    inset 0 0 22px color-mix(in srgb,var(--primary) 8%,transparent)!important;
}
.grid.variant-killer .cell.selected{
  outline:3px solid color-mix(in srgb,var(--primary) 88%,#fff 12%)!important;
  outline-offset:-3px!important;
}
.grid.variant-killer .cage-sum{
  left:2px!important;
  top:1px!important;
  padding:1px 3px!important;
  border-radius:5px!important;
  background:color-mix(in srgb,var(--killer-cage-color,#fff) 74%,#fff 26%)!important;
  color:#8a4b12!important;
  border:1px solid rgba(174,101,36,.20)!important;
  font-size:clamp(7px,.78vw,10px)!important;
  line-height:1!important;
  box-shadow:0 1px 2px rgba(100,60,20,.08);
}
body.dark .grid.variant-killer .cell.killer-top,
body.dark .grid.variant-killer .cell.killer-bottom,
body.dark .grid.variant-killer .cell.killer-left,
body.dark .grid.variant-killer .cell.killer-right{
  border-color:#d6a16d!important;
}
body.dark .grid.variant-killer .cage-sum{
  background:color-mix(in srgb,var(--killer-cage-color,#262b3b) 80%,#121620 20%)!important;
  color:#ffd0a2!important;
  border-color:rgba(235,180,125,.24)!important;
}
@media(max-width:620px){
  .grid.grid-16 .cell{
    font-size:clamp(9px,3vw,12px)!important;
  }
  .grid.variant-killer .cell.killer-top{border-top-width:2px!important}
  .grid.variant-killer .cell.killer-bottom{border-bottom-width:2px!important}
  .grid.variant-killer .cell.killer-left{border-left-width:2px!important}
  .grid.variant-killer .cell.killer-right{border-right-width:2px!important}
  .grid.variant-killer .cage-sum{
    font-size:6.5px!important;
    padding:1px 2px!important;
  }
}


/* ===== Final 2026-09-30 gameplay polish ===== */
.solve-rate-toast{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:min(620px,calc(100% - 24px))!important;
  margin:12px auto 16px!important;
  padding:10px 14px!important;
  border:1px solid #bfe4d7!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#edf9f4,#e8f5f1)!important;
  color:#245b4a!important;
  box-shadow:0 8px 20px rgba(49,108,87,.10)!important;
  font-weight:850!important;
  text-align:center!important;
  z-index:auto!important;
}
.grid{
  align-items:stretch!important;
  justify-items:stretch!important;
  grid-auto-flow:row!important;
}
.grid .cell{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.grid .cell>*{
  box-sizing:border-box!important;
}
@media(max-width:520px){
  .solve-rate-toast{
    width:min(620px,calc(100% - 16px))!important;
    padding:9px 10px!important;
    font-size:11px!important;
  }
}

/* Selection must never change the apparent cell size. */
.grid .cell.selected{
  outline:none!important;
  background:
    linear-gradient(var(--primary),var(--primary)) top/100% 2px no-repeat,
    linear-gradient(var(--primary),var(--primary)) bottom/100% 2px no-repeat,
    linear-gradient(var(--primary),var(--primary)) left/2px 100% no-repeat,
    linear-gradient(var(--primary),var(--primary)) right/2px 100% no-repeat,
    var(--cell-selected)!important;
  z-index:2!important;
}
.grid.variant-killer .cell.selected{
  outline:none!important;
  background:
    linear-gradient(var(--primary),var(--primary)) top/100% 2px no-repeat,
    linear-gradient(var(--primary),var(--primary)) bottom/100% 2px no-repeat,
    linear-gradient(var(--primary),var(--primary)) left/2px 100% no-repeat,
    linear-gradient(var(--primary),var(--primary)) right/2px 100% no-repeat,
    var(--cell-selected)!important;
}

/* Pass-rate notice: overlay in the lower third of the board without changing layout. */
.board-wrap{position:relative!important}
.board-wrap .solve-rate-toast{
  position:absolute!important;
  left:50%!important;
  top:70%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(78%,480px)!important;
  margin:0!important;
  padding:9px 13px!important;
  border:1px solid #b7ddcf!important;
  border-radius:12px!important;
  background:rgba(237,249,244,.96)!important;
  color:#245b4a!important;
  box-shadow:0 9px 24px rgba(49,108,87,.14)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  text-align:center!important;
  font-weight:850!important;
  pointer-events:none!important;
  z-index:12!important;
}
@media(max-width:520px){
  .board-wrap .solve-rate-toast{
    width:84%!important;
    padding:8px 9px!important;
    font-size:10.5px!important;
  }
}

@keyframes cellSelectGlow{
  0%{box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent)}
  45%{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--primary) 40%,transparent)}
  100%{box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent)}
}
.cell.fx-pop{
  animation:cellSelectGlow .24s ease-out!important;
  transform:none!important;
}


/* ===== Equal-cell visual geometry: all heavy rule lines are overlays, never borders ===== */
.cell{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  overflow:visible!important;
}
.cell.box-right{box-shadow:none!important}
.cell.box-bottom::after{display:none!important}
.cell.jig-top,
.cell.jig-right,
.cell.jig-bottom,
.cell.jig-left,
.cell.killer-top,
.cell.killer-right,
.cell.killer-bottom,
.cell.killer-left{
  border:0!important;
}
.cell-edge-overlay{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  box-sizing:border-box;
  border:0 solid transparent;
  border-radius:0;
}
.cell.box-right>.cell-edge-overlay{
  border-right:2px solid #4f5873;
}
.cell.box-bottom>.cell-edge-overlay{
  border-bottom:2px solid #4f5873;
}
.grid.variant-killer .cell.box-right>.cell-edge-overlay{
  border-right-width:1px;
  border-right-color:rgba(66,77,101,.42);
}
.grid.variant-killer .cell.box-bottom>.cell-edge-overlay{
  border-bottom-width:1px;
  border-bottom-color:rgba(66,77,101,.42);
}
.cell.jig-top>.cell-edge-overlay{border-top:4px solid #33435f}
.cell.jig-right>.cell-edge-overlay{border-right:4px solid #33435f}
.cell.jig-bottom>.cell-edge-overlay{border-bottom:4px solid #33435f}
.cell.jig-left>.cell-edge-overlay{border-left:4px solid #33435f}
body.dark .cell.jig-top>.cell-edge-overlay,
body.dark .cell.jig-right>.cell-edge-overlay,
body.dark .cell.jig-bottom>.cell-edge-overlay,
body.dark .cell.jig-left>.cell-edge-overlay{
  border-color:#b9c5dc;
}
.grid.variant-killer .cell.killer-top>.cell-edge-overlay{
  border-top:2.5px dashed #b86a25;
}
.grid.variant-killer .cell.killer-right>.cell-edge-overlay{
  border-right:2.5px dashed #b86a25;
}
.grid.variant-killer .cell.killer-bottom>.cell-edge-overlay{
  border-bottom:2.5px dashed #b86a25;
}
.grid.variant-killer .cell.killer-left>.cell-edge-overlay{
  border-left:2.5px dashed #b86a25;
}
body.dark .grid.variant-killer .cell.killer-top>.cell-edge-overlay,
body.dark .grid.variant-killer .cell.killer-right>.cell-edge-overlay,
body.dark .grid.variant-killer .cell.killer-bottom>.cell-edge-overlay,
body.dark .grid.variant-killer .cell.killer-left>.cell-edge-overlay{
  border-color:#e8a866;
}

/* Effects remain visible but never scale a cell or alter perceived geometry. */
@keyframes cellCorrectStable{
  0%{
    filter:brightness(.96);
    box-shadow:inset 0 0 0 1px rgba(38,178,108,.24);
  }
  45%{
    filter:brightness(1.09);
    box-shadow:inset 0 0 0 4px rgba(38,178,108,.72),0 0 0 5px rgba(38,178,108,.10);
  }
  100%{
    filter:none;
    box-shadow:none;
  }
}
@keyframes unitSweepStable{
  0%{filter:brightness(1)}
  40%{
    filter:brightness(1.16);
    box-shadow:inset 0 0 0 3px rgba(36,185,126,.72);
    background:color-mix(in srgb,#9ff0bf 46%,var(--cell));
  }
  100%{
    filter:none;
    box-shadow:none;
  }
}
.cell.fx-correct{
  animation:cellCorrectStable .52s cubic-bezier(.2,.8,.2,1)!important;
  transform:none!important;
}
.cell.fx-unit-complete{
  animation:unitSweepStable .72s ease var(--fx-unit-delay,0ms) both!important;
  transform:none!important;
}

/* Softer pass-rate notice: calm sage, lower visual weight. */
.board-wrap .solve-rate-toast{
  background:rgba(244,249,247,.97)!important;
  border-color:#c9ddd5!important;
  color:#31594e!important;
  box-shadow:0 8px 22px rgba(55,96,82,.11)!important;
}


/* Killer cells: cage rules are overlay-only; no physical borders may shrink content. */
.grid.variant-killer .cell.killer-top,
.grid.variant-killer .cell.killer-right,
.grid.variant-killer .cell.killer-bottom,
.grid.variant-killer .cell.killer-left{
  border:0!important;
  border-width:0!important;
}


/* ===== Cache 118: centered / larger game workspace ===== */
@media(min-width:1181px){
  .game-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center!important;
    align-items:start!important;
    width:100%!important;
    max-width:100%!important;
    margin-inline:auto!important;
  }
  .game-panel{
    --board-fit:min(660px,calc(100vh - 255px),calc(100vw - 490px))!important;
    width:max-content!important;
    max-width:100%!important;
    grid-template-columns:var(--board-fit) 250px!important;
    column-gap:24px!important;
    justify-content:center!important;
    margin-inline:auto!important;
  }
  .board-wrap{
    width:var(--board-fit)!important;
    max-width:var(--board-fit)!important;
  }
  .game-controls{
    width:250px!important;
    gap:11px!important;
  }
  .pad.pad-9{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .pad.pad-16{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .num{
    height:64px!important;
    font-size:23px!important;
    border-radius:12px!important;
  }
  .tools{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .tool{
    height:48px!important;
    font-size:12px!important;
  }
}

/* Physical icon/order direction is stable in Arabic; only the text language changes. */
.game-actionbar,
.game-actionbar .game-action{
  direction:ltr!important;
  unicode-bidi:isolate!important;
}
html[dir="rtl"] .game-actionbar{
  right:18px!important;
  left:auto!important;
}
html[dir="rtl"] .game-actionbar .game-action{
  transform:none!important;
}

/* Pass-rate notice stays centered physically in RTL and gets a gentle glow. */
@keyframes solveRateSoftGlow{
  0%{opacity:0;box-shadow:0 0 0 rgba(59,126,103,0)}
  18%{opacity:1;box-shadow:0 0 0 4px rgba(91,160,136,.10),0 8px 24px rgba(55,96,82,.12)}
  48%{box-shadow:0 0 0 8px rgba(91,160,136,.07),0 10px 28px rgba(55,96,82,.16)}
  78%{opacity:1;box-shadow:0 0 0 4px rgba(91,160,136,.08),0 8px 22px rgba(55,96,82,.12)}
  100%{opacity:0;box-shadow:0 0 0 rgba(59,126,103,0)}
}
.board-wrap .solve-rate-toast{
  left:50%!important;
  right:auto!important;
  top:70%!important;
  bottom:auto!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  animation:solveRateSoftGlow 1.8s ease-in-out both!important;
}
html[dir="rtl"] .board-wrap .solve-rate-toast{
  left:50%!important;
  right:auto!important;
  transform:translate(-50%,-50%)!important;
  direction:rtl!important;
  text-align:center!important;
}

/* Killer: lighter cage walls, clearly different cage-sum badges. */
.grid.variant-killer .cell.killer-top>.cell-edge-overlay{
  border-top:1.75px dashed rgba(181,116,54,.62)!important;
}
.grid.variant-killer .cell.killer-right>.cell-edge-overlay{
  border-right:1.75px dashed rgba(181,116,54,.62)!important;
}
.grid.variant-killer .cell.killer-bottom>.cell-edge-overlay{
  border-bottom:1.75px dashed rgba(181,116,54,.62)!important;
}
.grid.variant-killer .cell.killer-left>.cell-edge-overlay{
  border-left:1.75px dashed rgba(181,116,54,.62)!important;
}
.grid.variant-killer .cage-sum{
  color:#34486f!important;
  background:rgba(255,250,244,.96)!important;
  border:1px solid #ead8c3!important;
  box-shadow:0 1px 3px rgba(52,72,111,.10)!important;
  font-weight:950!important;
}
body.dark .grid.variant-killer .cage-sum{
  color:#dbe7ff!important;
  background:rgba(39,48,68,.94)!important;
  border-color:#7f6b55!important;
}
body.dark .grid.variant-killer .cell.killer-top>.cell-edge-overlay,
body.dark .grid.variant-killer .cell.killer-right>.cell-edge-overlay,
body.dark .grid.variant-killer .cell.killer-bottom>.cell-edge-overlay,
body.dark .grid.variant-killer .cell.killer-left>.cell-edge-overlay{
  border-color:rgba(224,172,112,.65)!important;
}


/* ===== Cache 119: left gameplay rail + viewport-safe board ===== */
@media(min-width:821px){
  .topline{
    min-height:44px!important;
    padding-right:0!important;
  }
  .game-panel{
    --board-fit:min(660px,calc(100dvh - 235px),calc(100vw - 350px))!important;
    grid-template-columns:48px var(--board-fit) 220px!important;
    grid-template-areas:
      ". difficulty difficulty"
      ". status status"
      "actions board controls"!important;
    column-gap:14px!important;
    row-gap:0!important;
    align-items:start!important;
  }
  .game-actionbar{
    grid-area:actions!important;
    position:sticky!important;
    top:86px!important;
    left:auto!important;
    right:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:48px!important;
    margin:0!important;
    z-index:6!important;
  }
  .game-action{
    width:48px!important;
    min-width:48px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:12px!important;
    font-size:16px!important;
  }
  .game-action span{display:none!important}
  .difficulty-picker{grid-area:difficulty!important}
  .game-status{
    grid-area:status!important;
    position:relative!important;
    min-height:24px!important;
    align-items:center!important;
  }
  .board-wrap{grid-area:board!important}
  .game-controls{
    grid-area:controls!important;
    width:220px!important;
  }
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:48px calc(var(--board-fit) + 32px) 220px!important;
  }
  .board-wrap.sandwich{
    width:calc(var(--board-fit) + 32px)!important;
    max-width:calc(var(--board-fit) + 32px)!important;
    box-sizing:border-box!important;
    margin-left:0!important;
  }
  .game-status .solve-rate-toast{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
    width:min(46%,360px)!important;
    margin:0!important;
    padding:5px 10px!important;
    border:1px solid #c9ddd5!important;
    border-radius:999px!important;
    background:rgba(244,249,247,.98)!important;
    color:#31594e!important;
    box-shadow:0 6px 16px rgba(55,96,82,.10)!important;
    font-size:10.5px!important;
    line-height:1.2!important;
    text-align:center!important;
    pointer-events:none!important;
    z-index:5!important;
    animation:solveRateSoftGlow 1.8s ease-in-out both!important;
  }
}


/* The pass-rate notice lives in the status strip, never over puzzle cells. */
.game-status{position:relative!important}
.game-status .solve-rate-toast{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(58%,320px)!important;
  margin:0!important;
  padding:4px 8px!important;
  border:1px solid #c9ddd5!important;
  border-radius:999px!important;
  background:rgba(244,249,247,.98)!important;
  color:#31594e!important;
  box-shadow:0 5px 14px rgba(55,96,82,.09)!important;
  font-size:10px!important;
  line-height:1.15!important;
  font-weight:800!important;
  text-align:center!important;
  pointer-events:none!important;
  z-index:5!important;
  animation:solveRateSoftGlow 1.8s ease-in-out both!important;
}
html[dir="rtl"] .game-status .solve-rate-toast{
  left:50%!important;
  right:auto!important;
  transform:translate(-50%,-50%)!important;
  direction:rtl!important;
}

@media(min-width:1181px){
  .page{padding-top:12px!important}
  .topline{min-height:38px!important}
  .game-panel{
    --board-fit:min(680px,calc(100dvh - 280px),calc(100vw - 500px))!important;
    grid-template-columns:112px var(--board-fit) 240px!important;
    column-gap:14px!important;
  }
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:112px calc(var(--board-fit) + 32px) 240px!important;
  }
  .game-actionbar{width:112px!important}
  .game-action{
    width:112px!important;
    min-width:112px!important;
    height:42px!important;
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    padding:0 10px!important;
    font-size:15px!important;
  }
  .game-action span{
    display:inline!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }
  .game-controls{width:240px!important}
  .game-status .solve-rate-toast{
    width:min(44%,350px)!important;
    font-size:10.5px!important;
  }
}

@media(min-width:821px) and (max-width:1180px){
  .game-panel{
    --board-fit:min(610px,calc(100dvh - 270px),calc(100vw - 350px))!important;
  }
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:48px calc(var(--board-fit) + 32px) 220px!important;
  }
}

@media(min-width:1181px){
  .game-panel:has(.board-wrap.sandwich){
    --board-fit:min(648px,calc(100dvh - 312px),calc(100vw - 532px))!important;
  }
}

/* ===== Cache 119: smaller gameplay headings across game pages ===== */
.topline h1{
  font-size:clamp(22px,2.6vw,30px)!important;
  line-height:1.04!important;
  margin:2px 0 3px!important;
}
.topline p{
  font-size:12px!important;
  line-height:1.32!important;
}


/* Cache 119: keep the desktop game anatomy physical in both LTR and RTL.
   Action rail stays left, puzzle stays centered, number/tools stay right. */
@media(min-width:821px){
  .game-panel{
    direction:ltr!important;
    unicode-bidi:isolate!important;
  }
  html[dir="rtl"] .difficulty-picker,
  html[dir="rtl"] .game-status,
  html[dir="rtl"] .game-controls{
    direction:rtl!important;
    unicode-bidi:isolate!important;
  }
  html[dir="rtl"] .game-actionbar{
    left:auto!important;
    right:auto!important;
  }
}


/* ===== Cache 119b: owner-requested difficulty rail ===== */
@media(min-width:821px){
  .topline{
    min-height:44px!important;
    padding-right:230px!important;
  }
  .game-panel{
    --board-fit:min(680px,calc(100dvh - 245px),calc(100vw - 430px))!important;
    grid-template-columns:112px var(--board-fit) 240px!important;
    grid-template-areas:
      ". status status"
      "difficulty board controls"!important;
    column-gap:14px!important;
    row-gap:4px!important;
    align-items:start!important;
  }
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:112px calc(var(--board-fit) + 32px) 240px!important;
  }
  .difficulty-picker{
    grid-area:difficulty!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:112px!important;
    margin:0!important;
  }
  .difficulty-picker a{
    width:100%!important;
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:7px 8px!important;
    font-size:10.5px!important;
    line-height:1.1!important;
    border-radius:11px!important;
    text-align:center!important;
  }
  .game-status{
    grid-area:status!important;
    margin:0 2px 5px!important;
    min-height:22px!important;
  }
  .board-wrap{grid-area:board!important}
  .game-controls{
    grid-area:controls!important;
    width:240px!important;
  }
  .game-actionbar{
    position:absolute!important;
    top:14px!important;
    right:18px!important;
    left:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    width:auto!important;
    margin:0!important;
    z-index:11!important;
  }
  .game-action{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:11px!important;
    font-size:15px!important;
  }
  .game-action span{display:none!important}
  html[dir="rtl"] .game-actionbar{
    right:18px!important;
    left:auto!important;
  }
  html[dir="rtl"] .difficulty-picker{
    direction:rtl!important;
  }
}

@media(min-width:821px) and (max-width:1180px){
  .game-panel{
    grid-template-columns:96px var(--board-fit) 210px!important;
    column-gap:12px!important;
  }
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:96px calc(var(--board-fit) + 32px) 210px!important;
  }
  .difficulty-picker{width:96px!important;gap:6px!important}
  .difficulty-picker a{
    min-height:38px!important;
    padding:6px 5px!important;
    font-size:9.5px!important;
  }
  .game-controls{width:210px!important}
}


/* Exact shared puzzles have no level switcher: never reserve an empty rail. */
@media(min-width:1181px){
  .game-panel:not(:has(.difficulty-picker)){
    grid-template-columns:var(--board-fit) 240px!important;
    grid-template-areas:
      "status status"
      "board controls"!important;
  }
  .game-panel:not(:has(.difficulty-picker)):has(.board-wrap.sandwich){
    grid-template-columns:calc(var(--board-fit) + 32px) 240px!important;
  }
}
@media(min-width:821px) and (max-width:1180px){
  .game-panel:not(:has(.difficulty-picker)){
    grid-template-columns:var(--board-fit) 210px!important;
    grid-template-areas:
      "status status"
      "board controls"!important;
  }
  .game-panel:not(:has(.difficulty-picker)):has(.board-wrap.sandwich){
    grid-template-columns:calc(var(--board-fit) + 32px) 210px!important;
  }
}


/* Shared exact-puzzle pages include the install prompt, so use their own viewport cap. */
@media(min-width:821px){
  .game-panel:not(:has(.difficulty-picker)){
    --board-fit:min(620px,calc(100dvh - 325px),calc(100vw - 360px))!important;
  }
}


/* ===== Cache 121: screenshot-driven gameplay spacing / controls polish ===== */
.board-wrap .solve-rate-toast{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:72%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(64%,390px)!important;
  padding:6px 12px!important;
  margin:0!important;
  border:1px solid #c9ddd5!important;
  border-radius:999px!important;
  background:rgba(244,249,247,.94)!important;
  color:#31594e!important;
  box-shadow:0 7px 20px rgba(55,96,82,.12)!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:850!important;
  text-align:center!important;
  pointer-events:none!important;
  z-index:4!important;
  animation:solveRateSoftGlow 1.8s ease-in-out both!important;
}
html[dir="rtl"] .board-wrap .solve-rate-toast{
  left:50%!important;
  right:auto!important;
  transform:translate(-50%,-50%)!important;
  direction:rtl!important;
}

@media(min-width:821px){
  .game-panel{
    --board-fit:min(680px,calc(100dvh - 235px),calc(100vw - 500px))!important;
    grid-template-columns:120px var(--board-fit) 270px!important;
    grid-template-areas:
      ". status ."
      "difficulty board controls"!important;
    column-gap:30px!important;
    row-gap:6px!important;
    justify-content:center!important;
    align-items:start!important;
  }
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:120px calc(var(--board-fit) + 32px) 270px!important;
  }
  .game-status{
    grid-area:status!important;
    width:100%!important;
    min-height:24px!important;
    margin:0 0 4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    font-size:11px!important;
  }
  #timerWrap{
    margin-left:auto!important;
    color:var(--muted)!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }
  html[dir="rtl"] #timerWrap{
    margin-left:0!important;
    margin-right:auto!important;
  }
  .difficulty-picker{
    grid-area:difficulty!important;
    width:120px!important;
    height:var(--board-fit)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    align-items:stretch!important;
    gap:0!important;
    margin:0!important;
  }
  .difficulty-picker a{
    width:100%!important;
    min-height:44px!important;
    padding:8px 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:13px!important;
    font-size:10.5px!important;
    box-shadow:0 5px 14px rgba(38,64,116,.045)!important;
  }
  .game-controls{
    grid-area:controls!important;
    width:270px!important;
    height:var(--board-fit)!important;
    min-height:var(--board-fit)!important;
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
    align-self:start!important;
    position:static!important;
  }
  .pad{
    margin:0!important;
  }
  .pad.pad-9{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .pad.pad-9 .num{
    height:58px!important;
    border-radius:14px!important;
    font-size:23px!important;
    box-shadow:0 7px 18px rgba(55,91,210,.14)!important;
  }
  .pad.pad-16{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .pad.pad-16 .num{
    height:47px!important;
    border-radius:12px!important;
    font-size:18px!important;
    box-shadow:0 6px 14px rgba(55,91,210,.13)!important;
  }
  .pad-tools{margin:0!important}
  .color-trigger{
    min-height:42px!important;
    border-radius:12px!important;
  }
  .tools{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin:0!important;
  }
  .tool{
    height:42px!important;
    border-radius:12px!important;
    font-size:11.5px!important;
  }
  .game-store-links{
    margin-top:auto!important;
    gap:8px!important;
  }
  .game-store-links .compact-store{
    min-height:46px!important;
    border-radius:13px!important;
  }

  .game-actionbar{
    position:absolute!important;
    top:12px!important;
    right:18px!important;
    left:auto!important;
    width:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    z-index:12!important;
  }
  .game-action{
    position:relative!important;
    width:42px!important;
    min-width:42px!important;
    height:40px!important;
    min-height:40px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:1px solid color-mix(in srgb,var(--primary) 15%,var(--line))!important;
    border-radius:13px!important;
    background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary) 4%,var(--surface)))!important;
    color:var(--ink)!important;
    box-shadow:0 7px 18px rgba(31,66,120,.08)!important;
    font-size:15px!important;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
  }
  .game-action:hover{
    transform:translateY(-1px)!important;
    border-color:color-mix(in srgb,var(--primary) 42%,var(--line))!important;
    box-shadow:0 10px 22px rgba(31,66,120,.13)!important;
  }
  .game-action span{
    display:block!important;
    position:absolute!important;
    top:calc(100% + 6px)!important;
    left:50%!important;
    transform:translateX(-50%) translateY(-2px)!important;
    padding:5px 8px!important;
    border-radius:8px!important;
    background:#18233f!important;
    color:#fff!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .14s ease,transform .14s ease!important;
    box-shadow:0 6px 16px rgba(18,35,70,.18)!important;
  }
  .game-action:hover span,
  .game-action:focus-visible span{
    opacity:1!important;
    transform:translateX(-50%) translateY(0)!important;
  }

  /* Exact shared puzzles have no difficulty rail. */
  .game-panel:not(:has(.difficulty-picker)){
    --board-fit:min(620px,calc(100dvh - 315px),calc(100vw - 380px))!important;
    grid-template-columns:var(--board-fit) 270px!important;
    grid-template-areas:
      "status ."
      "board controls"!important;
    column-gap:32px!important;
  }
  .game-panel:not(:has(.difficulty-picker)):has(.board-wrap.sandwich){
    grid-template-columns:calc(var(--board-fit) + 32px) 270px!important;
  }
}

@media(min-width:821px) and (max-width:1180px){
  .game-panel{
    grid-template-columns:102px var(--board-fit) 224px!important;
    column-gap:22px!important;
  }
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:102px calc(var(--board-fit) + 32px) 224px!important;
  }
  .difficulty-picker{width:102px!important}
  .game-controls{width:224px!important}
  .game-panel:not(:has(.difficulty-picker)){
    grid-template-columns:var(--board-fit) 224px!important;
    column-gap:24px!important;
  }
  .game-panel:not(:has(.difficulty-picker)):has(.board-wrap.sandwich){
    grid-template-columns:calc(var(--board-fit) + 32px) 224px!important;
  }
  .pad.pad-9{gap:9px!important}
  .pad.pad-9 .num{height:54px!important}
  .pad.pad-16 .num{height:43px!important;font-size:16px!important}
}


/* Cache 121 follow-up: physical-right timer and Sandwich side-height parity. */
@media(min-width:821px){
  html[dir="rtl"] #timerWrap{
    margin-left:auto!important;
    margin-right:0!important;
    direction:ltr!important;
  }
  .game-panel:has(.board-wrap.sandwich) .difficulty-picker,
  .game-panel:has(.board-wrap.sandwich) .game-controls{
    height:calc(var(--board-fit) + 32px)!important;
    min-height:calc(var(--board-fit) + 32px)!important;
  }

  #gameBackBtn{
    color:#2a579c!important;
    background:linear-gradient(145deg,#f8fbff,#eef5ff)!important;
  }
  #pauseBtn{
    color:#4d54b9!important;
    background:linear-gradient(145deg,#fbfaff,#f2f0ff)!important;
  }
  #howToBtn{
    color:#7651b9!important;
    background:linear-gradient(145deg,#fdfbff,#f5efff)!important;
  }
  #gameShareBtn{
    color:#1376a8!important;
    background:linear-gradient(145deg,#f6fcff,#eaf8ff)!important;
  }
  #gameSettingsBtn{
    color:#44526c!important;
    background:linear-gradient(145deg,#fbfcfe,#f1f4f8)!important;
  }
}


/* ===== Cache 122: keep side designs strong, move them farther from the board ===== */
@media(min-width:1181px){
  .game-panel{
    --board-fit:min(680px,calc(100dvh - 235px),calc(100vw - 590px))!important;
    grid-template-columns:136px var(--board-fit) 314px!important;
    column-gap:44px!important;
  }
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:136px calc(var(--board-fit) + 32px) 314px!important;
  }

  .difficulty-picker{
    width:136px!important;
    height:var(--board-fit)!important;
    min-height:var(--board-fit)!important;
    justify-content:space-between!important;
  }
  .difficulty-picker a{
    min-height:48px!important;
    padding:10px 12px!important;
    border-radius:14px!important;
    font-size:11px!important;
    font-weight:850!important;
  }

  .game-controls{
    width:314px!important;
    height:var(--board-fit)!important;
    min-height:var(--board-fit)!important;
    gap:10px!important;
  }
  .pad.pad-9{
    gap:11px!important;
  }
  .pad.pad-9 .num{
    height:62px!important;
    border-radius:15px!important;
    font-size:25px!important;
    box-shadow:0 8px 20px rgba(55,91,210,.16)!important;
  }
  .pad.pad-16{
    gap:9px!important;
  }
  .pad.pad-16 .num{
    height:45px!important;
    border-radius:12px!important;
    font-size:18px!important;
    box-shadow:0 6px 16px rgba(55,91,210,.14)!important;
  }
  .color-trigger{
    min-height:44px!important;
    border-radius:13px!important;
    font-size:14px!important;
  }
  .tools{
    gap:10px!important;
  }
  .tool{
    height:46px!important;
    border-radius:13px!important;
    font-size:12.5px!important;
  }
  .game-store-links{
    margin-top:auto!important;
    gap:8px!important;
  }
  .game-store-links .compact-store{
    min-height:43px!important;
    padding:6px 11px!important;
    border-radius:13px!important;
  }

  .game-panel:not(:has(.difficulty-picker)){
    --board-fit:min(620px,calc(100dvh - 315px),calc(100vw - 430px))!important;
    grid-template-columns:var(--board-fit) 314px!important;
    column-gap:44px!important;
  }
  .game-panel:not(:has(.difficulty-picker)):has(.board-wrap.sandwich){
    grid-template-columns:calc(var(--board-fit) + 32px) 314px!important;
  }

  .game-panel:has(.board-wrap.sandwich) .difficulty-picker,
  .game-panel:has(.board-wrap.sandwich) .game-controls{
    height:calc(var(--board-fit) + 32px)!important;
    min-height:calc(var(--board-fit) + 32px)!important;
  }
}

@media(min-width:821px) and (max-width:1180px){
  .game-panel{
    --board-fit:min(610px,calc(100dvh - 245px),calc(100vw - 440px))!important;
    grid-template-columns:116px var(--board-fit) 250px!important;
    column-gap:30px!important;
  }
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:116px calc(var(--board-fit) + 32px) 250px!important;
  }
  .difficulty-picker{width:116px!important}
  .difficulty-picker a{
    min-height:42px!important;
    padding:8px!important;
    font-size:10px!important;
  }
  .game-controls{width:250px!important}
  .pad.pad-9{gap:10px!important}
  .pad.pad-9 .num{height:58px!important;font-size:22px!important}
  .pad.pad-16{gap:8px!important}
  .pad.pad-16 .num{height:43px!important;font-size:16px!important}
  .tool{height:44px!important;font-size:11.5px!important}
  .game-panel:not(:has(.difficulty-picker)){
    grid-template-columns:var(--board-fit) 250px!important;
    column-gap:30px!important;
  }
  .game-panel:not(:has(.difficulty-picker)):has(.board-wrap.sandwich){
    grid-template-columns:calc(var(--board-fit) + 32px) 250px!important;
  }
}

/* Preserve the existing rail/button visual language; this batch changes spacing and size, not identity. */
.difficulty-picker a{
  border:1px solid var(--line)!important;
  background:var(--surface)!important;
  color:var(--muted)!important;
}
.difficulty-picker a.active{
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--primary),var(--primary2))!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(68,88,214,.20)!important;
}


/* ===== Cache 122: harden cell geometry + variant edge visibility ===== */
.grid .cell{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
}

/* Subtle per-cell seam stays visible without changing geometry. */
.grid.variant-killer .cell>.cell-edge-overlay{
  box-shadow:inset 0 0 0 .65px rgba(79,88,115,.34);
}
.grid.variant-jigsaw .cell>.cell-edge-overlay{
  box-shadow:inset 0 0 0 .55px rgba(79,88,115,.26);
}

/* Cage and jigsaw boundaries stay visually dominant over the base seams. */
.grid.variant-killer .cell.killer-top>.cell-edge-overlay{
  border-top:2px dashed rgba(181,116,54,.76)!important;
}
.grid.variant-killer .cell.killer-right>.cell-edge-overlay{
  border-right:2px dashed rgba(181,116,54,.76)!important;
}
.grid.variant-killer .cell.killer-bottom>.cell-edge-overlay{
  border-bottom:2px dashed rgba(181,116,54,.76)!important;
}
.grid.variant-killer .cell.killer-left>.cell-edge-overlay{
  border-left:2px dashed rgba(181,116,54,.76)!important;
}
.grid.variant-jigsaw .cell.jig-top>.cell-edge-overlay{
  border-top:4px solid #33435f!important;
}
.grid.variant-jigsaw .cell.jig-right>.cell-edge-overlay{
  border-right:4px solid #33435f!important;
}
.grid.variant-jigsaw .cell.jig-bottom>.cell-edge-overlay{
  border-bottom:4px solid #33435f!important;
}
.grid.variant-jigsaw .cell.jig-left>.cell-edge-overlay{
  border-left:4px solid #33435f!important;
}

body.dark .grid.variant-killer .cell>.cell-edge-overlay{
  box-shadow:inset 0 0 0 .65px rgba(193,202,225,.30);
}
body.dark .grid.variant-jigsaw .cell>.cell-edge-overlay{
  box-shadow:inset 0 0 0 .55px rgba(193,202,225,.22);
}


/* ===== Cache 124: compact page head, real toolbar, balanced side rails ===== */
.global-site-header + .shell{padding-top:4px!important}
.page{padding-top:14px!important}
.topline{min-height:0!important;gap:10px!important}
.topline h1{font-size:clamp(21px,2vw,28px)!important;margin:3px 0 2px!important;line-height:1.05!important}
.topline #intro{font-size:12px!important;margin:0!important;line-height:1.35!important}
.topline .eyebrow{font-size:10px!important}
.meta{margin-top:5px!important}
.game-layout{margin-top:2px!important}

@media(min-width:1181px){
  .game-panel{
    --board-fit:min(680px,calc(100dvh - 195px),calc(100vw - 640px))!important;
    grid-template-columns:148px var(--board-fit) 320px!important;
    column-gap:52px!important;
    position:relative!important;
  }
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:148px calc(var(--board-fit) + 32px) 320px!important;
  }
  .difficulty-picker{
    width:148px!important;height:var(--board-fit)!important;min-height:var(--board-fit)!important;
    padding:10px!important;gap:14px!important;justify-content:flex-start!important;align-content:start!important;
    border:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;border-radius:18px!important;
    background:color-mix(in srgb,var(--surface) 80%,transparent)!important
  }
  .difficulty-picker a{min-height:47px!important;padding:9px 10px!important;border-radius:13px!important}
  .game-controls{
    width:320px!important;height:var(--board-fit)!important;min-height:var(--board-fit)!important;
    gap:8px!important;display:flex!important;flex-direction:column!important
  }
  .pad.pad-9{gap:12px!important}.pad.pad-9 .num{height:56px!important;font-size:24px!important;border-radius:15px!important}
  .pad.pad-16{gap:8px!important}.pad.pad-16 .num{height:43px!important;font-size:17px!important;border-radius:12px!important}
  .color-trigger{min-height:42px!important}
  .tools{gap:10px!important}.tool{height:42px!important;font-size:12px!important}
  .game-store-links{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:0!important}
  .game-store-links .compact-store{min-height:44px!important;padding:5px 8px!important}
  .game-store-links .store-logo{width:25px!important;height:25px!important;flex-basis:25px!important}
  .game-store-links .store-copy small{font-size:6.5px!important}.game-store-links .store-copy strong{font-size:10.5px!important}
  .ad-side.adsense-banner-compact{min-height:56px!important;margin-top:auto!important}
  .game-panel:has(.board-wrap.sandwich) .difficulty-picker,
  .game-panel:has(.board-wrap.sandwich) .game-controls{
    height:calc(var(--board-fit) + 32px)!important;min-height:calc(var(--board-fit) + 32px)!important
  }
  .game-actionbar{
    top:-54px!important;right:0!important;left:auto!important;width:auto!important;
    display:flex!important;gap:4px!important;padding:5px!important;border:1px solid var(--line)!important;
    border-radius:15px!important;background:color-mix(in srgb,var(--surface) 92%,transparent)!important;
    box-shadow:0 10px 24px rgba(31,66,120,.09)!important
  }
  .game-action{
    width:auto!important;min-width:70px!important;height:36px!important;min-height:36px!important;
    padding:0 10px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
    border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;font-size:13px!important
  }
  #howToBtn{min-width:92px!important}
  .game-action span{
    display:inline!important;position:static!important;opacity:1!important;transform:none!important;
    padding:0!important;background:transparent!important;color:inherit!important;box-shadow:none!important;
    font-size:10px!important;line-height:1!important
  }
  .game-action:hover{transform:none!important;background:var(--soft)!important}
}

@media(min-width:821px) and (max-width:1180px){
  .game-panel{column-gap:34px!important}
  .difficulty-picker{gap:10px!important;justify-content:flex-start!important}
  .game-action span{display:none!important}
}
@media(max-width:820px){
  .topline h1{font-size:22px!important}
  .game-actionbar{gap:6px!important}
}


/* Cache 124b: raise the playable board without shrinking the controls. */
.topline h1{font-size:clamp(20px,1.75vw,25px)!important}
.topline #intro{font-size:11.5px!important}
.meta{gap:6px!important;margin-top:4px!important}
.meta .pill{padding:4px 8px!important;font-size:10px!important}
.game-layout{margin-top:-8px!important}
.game-status{min-height:18px!important;margin:0 2px 4px!important;font-size:11px!important}
@media(min-width:1181px){
  .game-actionbar{top:-48px!important}
}


/* ===== Cache 126: optical cell parity + full-height right controls + matched toolbar ===== */

/* Draw standard section lines over the board instead of making selected cells look narrower/taller. */
.grid.grid-9:not(.variant-jigsaw):not(.variant-killer),
.grid.grid-16{
  position:relative!important;
}
.grid.grid-9:not(.variant-jigsaw):not(.variant-killer) .cell.box-right>.cell-edge-overlay,
.grid.grid-9:not(.variant-jigsaw):not(.variant-killer) .cell.box-bottom>.cell-edge-overlay,
.grid.grid-16 .cell.box-right>.cell-edge-overlay,
.grid.grid-16 .cell.box-bottom>.cell-edge-overlay{
  border-right:0!important;
  border-bottom:0!important;
}
.grid.grid-9:not(.variant-jigsaw):not(.variant-killer)::after,
.grid.grid-16::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  border-radius:inherit;
}
.grid.grid-9:not(.variant-jigsaw):not(.variant-killer)::after{
  background:
    linear-gradient(to right,transparent calc(33.3333% - 1px),#4f5873 calc(33.3333% - 1px),#4f5873 calc(33.3333% + 1px),transparent calc(33.3333% + 1px)),
    linear-gradient(to right,transparent calc(66.6667% - 1px),#4f5873 calc(66.6667% - 1px),#4f5873 calc(66.6667% + 1px),transparent calc(66.6667% + 1px)),
    linear-gradient(to bottom,transparent calc(33.3333% - 1px),#4f5873 calc(33.3333% - 1px),#4f5873 calc(33.3333% + 1px),transparent calc(33.3333% + 1px)),
    linear-gradient(to bottom,transparent calc(66.6667% - 1px),#4f5873 calc(66.6667% - 1px),#4f5873 calc(66.6667% + 1px),transparent calc(66.6667% + 1px));
}
.grid.grid-16::after{
  background:
    linear-gradient(to right,transparent calc(25% - 1px),#4f5873 calc(25% - 1px),#4f5873 calc(25% + 1px),transparent calc(25% + 1px)),
    linear-gradient(to right,transparent calc(50% - 1px),#4f5873 calc(50% - 1px),#4f5873 calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(to right,transparent calc(75% - 1px),#4f5873 calc(75% - 1px),#4f5873 calc(75% + 1px),transparent calc(75% + 1px)),
    linear-gradient(to bottom,transparent calc(25% - 1px),#4f5873 calc(25% - 1px),#4f5873 calc(25% + 1px),transparent calc(25% + 1px)),
    linear-gradient(to bottom,transparent calc(50% - 1px),#4f5873 calc(50% - 1px),#4f5873 calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(to bottom,transparent calc(75% - 1px),#4f5873 calc(75% - 1px),#4f5873 calc(75% + 1px),transparent calc(75% + 1px));
}

@media(min-width:1181px){
  .game-controls{
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    gap:0!important;
  }
  .pad.pad-9{gap:14px!important}
  .pad.pad-9 .num{height:58px!important}
  .pad.pad-16{gap:9px!important}
  .pad.pad-16 .num{height:45px!important}
  .pad-tools{margin:0!important}
  .tools{gap:12px!important}
  .tool{height:44px!important}

  /* Keep the compact ad as a separated content block, never wedged between number keys. */
  .ad-side.adsense-banner-compact{
    margin:14px 0 18px!important;
    min-height:58px!important;
    flex:0 0 auto!important;
  }
  .game-store-links{margin:0!important}

  /* Same width as the number/helper rail. */
  .game-actionbar{
    width:320px!important;
    min-width:320px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;
    padding:4px!important;
  }
  .game-action{
    width:100%!important;
    min-width:0!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 4px!important;
    gap:4px!important;
    font-size:12px!important;
  }
  #howToBtn{min-width:0!important}
  .game-action span{
    min-width:0!important;
    font-size:8.5px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}


/* ===== Cache 127: soft pastel helper-tool palette ===== */
#colorBtn{
  background:linear-gradient(145deg,#fff8fb,#fff1f6)!important;
  border-color:#ead6df!important;
  color:#70495a!important;
}
#notesToggle{
  background:linear-gradient(145deg,#f8faff,#f0f4ff)!important;
  border-color:#d7dff4!important;
  color:#455a8a!important;
}
#autoNotesBtn{
  background:linear-gradient(145deg,#fffaf0,#fff3d9)!important;
  border-color:#ecd8a6!important;
  color:#705720!important;
}
#eraseBtn{
  background:linear-gradient(145deg,#fff9f9,#fff0f2)!important;
  border-color:#ebd2d6!important;
  color:#81505a!important;
}
#undoBtn{
  background:linear-gradient(145deg,#f6fcfa,#edf8f3)!important;
  border-color:#cfe5dc!important;
  color:#3f6759!important;
}
#hintBtn{
  background:linear-gradient(145deg,#fffdf3,#fff8dc)!important;
  border-color:#ebdea8!important;
  color:#705f24!important;
}
#resetBtn{
  background:linear-gradient(145deg,#faf8ff,#f2effb)!important;
  border-color:#ddd5ef!important;
  color:#5d527c!important;
}
#colorBtn:hover{background:#ffeef5!important;border-color:#dfbdcc!important}
#notesToggle:hover{background:#ebf0ff!important;border-color:#c1cef0!important}
#autoNotesBtn:hover{background:#ffefc9!important;border-color:#e4c271!important}
#eraseBtn:hover{background:#ffecef!important;border-color:#e1bcc3!important}
#undoBtn:hover{background:#e8f7f0!important;border-color:#b7d9ca!important}
#hintBtn:hover{background:#fff4c9!important;border-color:#dfc96f!important}
#resetBtn:hover{background:#eee9fa!important;border-color:#cfc3e9!important}

body.dark #colorBtn{background:#362831!important;border-color:#614452!important;color:#f1d8e3!important}
body.dark #notesToggle{background:#283044!important;border-color:#445272!important;color:#dbe4ff!important}
body.dark #autoNotesBtn{background:#3a3222!important;border-color:#6a5730!important;color:#f8e6b6!important}
body.dark #eraseBtn{background:#382a2d!important;border-color:#65434a!important;color:#f4d8dd!important}
body.dark #undoBtn{background:#26352f!important;border-color:#3e6253!important;color:#d8eee4!important}
body.dark #hintBtn{background:#38331f!important;border-color:#665d31!important;color:#f6eabb!important}
body.dark #resetBtn{background:#302c3d!important;border-color:#514a68!important;color:#e6def7!important}


/* ===== Cache 127: Pause must conceal the puzzle completely ===== */
.paused-overlay{
  background:color-mix(in srgb,var(--surface) 97%,#44506a 3%)!important;
  -webkit-backdrop-filter:blur(13px) saturate(.55)!important;
  backdrop-filter:blur(13px) saturate(.55)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 65%,transparent)!important;
}
body.dark .paused-overlay{
  background:color-mix(in srgb,#101726 97%,#000 3%)!important;
  -webkit-backdrop-filter:blur(13px) saturate(.45)!important;
  backdrop-filter:blur(13px) saturate(.45)!important;
}
.paused-card{
  border:1px solid color-mix(in srgb,var(--primary) 14%,var(--line))!important;
  box-shadow:0 18px 48px rgba(26,42,76,.18)!important;
}


/* ===== Cache 127: use the lower left rail for fast mode navigation ===== */
.variant-quick-nav{
  margin-top:auto!important;
  padding-top:9px!important;
  border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
}
.variant-quick-nav-title{
  grid-column:1/-1!important;
  display:block!important;
  margin:0 2px 2px!important;
  color:var(--muted)!important;
  font-size:8.5px!important;
  font-weight:950!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}
.difficulty-picker .variant-quick-nav a{
  width:100%!important;
  min-width:0!important;
  min-height:27px!important;
  height:27px!important;
  padding:4px 3px!important;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important;
  border-radius:8px!important;
  background:color-mix(in srgb,var(--surface) 92%,var(--soft))!important;
  color:var(--muted)!important;
  box-shadow:none!important;
  font-size:8.5px!important;
  font-weight:820!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.difficulty-picker .variant-quick-nav a:hover{
  border-color:color-mix(in srgb,var(--primary) 34%,var(--line))!important;
  background:color-mix(in srgb,var(--primary) 5%,var(--surface))!important;
  color:var(--primary)!important;
}
.difficulty-picker .variant-quick-nav a.current{
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line))!important;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface))!important;
  color:var(--primary)!important;
  box-shadow:inset 3px 0 0 var(--primary)!important;
}
html[dir="rtl"] .difficulty-picker .variant-quick-nav a.current{
  box-shadow:inset -3px 0 0 var(--primary)!important;
}

@media(min-width:821px) and (max-width:1180px){
  .variant-quick-nav{gap:4px!important;padding-top:7px!important}
  .difficulty-picker .variant-quick-nav a{
    min-height:25px!important;
    height:25px!important;
    font-size:7.8px!important;
  }
}
@media(max-width:820px){
  .variant-quick-nav{
    grid-column:1/-1!important;
    margin-top:2px!important;
    padding-top:7px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .variant-quick-nav-title{
    grid-column:1/-1!important;
    text-align:start!important;
    font-size:8px!important;
  }
  .difficulty-picker .variant-quick-nav a{
    min-height:31px!important;
    height:31px!important;
    font-size:9px!important;
  }
}


/* Cache 127: Sandwich clue gutters reduce rail height, so keep mode nav fully inside. */
@media(min-width:821px){
  .game-panel:has(.board-wrap.sandwich) .variant-quick-nav{
    padding-top:5px!important;
    gap:4px!important;
  }
  .game-panel:has(.board-wrap.sandwich) .difficulty-picker .variant-quick-nav a{
    min-height:23px!important;
    height:23px!important;
    font-size:7.8px!important;
  }
  .game-panel:has(.board-wrap.sandwich) .variant-quick-nav-title{
    margin-bottom:0!important;
    font-size:7.8px!important;
  }
}

/* ===== Cache 129b: use empty left-rail space for mode navigation ===== */
@media(min-width:821px){
  .difficulty-picker .variant-quick-nav{
    margin-top:10px!important;
  }
  .difficulty-picker .variant-quick-nav a{
    min-height:34px!important;
    height:34px!important;
    font-size:10px!important;
    padding:6px 5px!important;
  }
  .difficulty-picker .variant-quick-nav-title{
    font-size:9px!important;
    margin-bottom:3px!important;
  }
}


/* ===== Cache 131: vertical mode rail + continuous hero play CTA glow ===== */

/* The mode list is a navigation stack, matching the difficulty stack above it.
   Keep it in the same left rail and use the available vertical space. */
@media(min-width:821px){
  .difficulty-picker .variant-quick-nav{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    margin-top:12px!important;
    padding-top:10px!important;
    gap:7px!important;
    flex:0 0 auto!important;
  }
  .difficulty-picker .variant-quick-nav-title{
    width:100%!important;
    margin:0 2px 2px!important;
  }
  .difficulty-picker .variant-quick-nav a{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    height:34px!important;
    min-height:34px!important;
    flex:0 0 34px!important;
    align-items:center!important;
    justify-content:center!important;
    padding:6px 8px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }
  /* Give the six difficulties and six modes the same clear vertical rhythm. */
  .difficulty-picker > a{
    flex:0 0 42px!important;
    min-height:42px!important;
    height:42px!important;
  }
}
@media(min-width:821px) and (max-width:1180px){
  .difficulty-picker > a{
    flex-basis:39px!important;
    min-height:39px!important;
    height:39px!important;
  }
  .difficulty-picker .variant-quick-nav{
    gap:6px!important;
    margin-top:9px!important;
    padding-top:8px!important;
  }
  .difficulty-picker .variant-quick-nav a{
    height:31px!important;
    min-height:31px!important;
    flex-basis:31px!important;
    font-size:9px!important;
  }
}

/* Hero "Start playing now" remains visibly active at all times. */
.hero-play-first .hero-web-play-cta{
  position:relative!important;
  overflow:visible!important;
  animation:sudokuHeroPlayGlow 2.2s ease-in-out infinite!important;
}
.hero-play-first .hero-web-play-cta::after{
  content:""!important;
  position:absolute!important;
  inset:-4px!important;
  z-index:-1!important;
  border-radius:inherit!important;
  background:linear-gradient(135deg,#4660df,#2f91e9)!important;
  opacity:.55!important;
  filter:blur(11px)!important;
  animation:sudokuHeroPlayGlowHalo 2.2s ease-in-out infinite!important;
  pointer-events:none!important;
}
@keyframes sudokuHeroPlayGlow{
  0%,100%{
    box-shadow:0 8px 20px rgba(47,112,231,.26),0 0 0 0 rgba(47,145,233,0);
  }
  50%{
    box-shadow:0 10px 26px rgba(47,112,231,.38),0 0 0 5px rgba(47,145,233,.10);
  }
}
@keyframes sudokuHeroPlayGlowHalo{
  0%,100%{opacity:.42;transform:scale(.985)}
  50%{opacity:.72;transform:scale(1.02)}
}
@media(prefers-reduced-motion:reduce){
  .hero-play-first .hero-web-play-cta,
  .hero-play-first .hero-web-play-cta::after{
    animation:none!important;
  }
  .hero-play-first .hero-web-play-cta{
    box-shadow:0 10px 28px rgba(47,112,231,.38),0 0 0 4px rgba(47,145,233,.10)!important;
  }
}


/* ===== Cache 132: fit the full vertical mode stack beside the board ===== */
@media(min-width:821px){
  .difficulty-picker{
    gap:8px!important;
  }
  .difficulty-picker > a{
    flex:0 0 40px!important;
    min-height:40px!important;
    height:40px!important;
  }
  .difficulty-picker .variant-quick-nav{
    margin-top:6px!important;
    padding-top:7px!important;
    gap:5px!important;
  }
  .difficulty-picker .variant-quick-nav-title{
    margin:0 2px 2px!important;
    line-height:1.1!important;
  }
  .difficulty-picker .variant-quick-nav a{
    height:34px!important;
    min-height:34px!important;
    flex-basis:34px!important;
    padding:6px 8px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }
}
@media(min-width:821px) and (max-width:1180px){
  .difficulty-picker{
    gap:7px!important;
  }
  .difficulty-picker > a{
    flex-basis:38px!important;
    min-height:38px!important;
    height:38px!important;
  }
  .difficulty-picker .variant-quick-nav{
    margin-top:5px!important;
    padding-top:6px!important;
    gap:4px!important;
  }
  .difficulty-picker .variant-quick-nav a{
    height:30px!important;
    min-height:30px!important;
    flex-basis:30px!important;
    font-size:9px!important;
  }
}

/* ===== 2026-10-01: Quick Play space cleanup + game-over choices ===== */
@media(min-width:901px){
  .portal-quick-card-wide .quick-play-control-card{
    min-height:410px!important;
    padding:18px 20px!important;
  }
  .portal-quick-card-wide .quick-level-picker{
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    align-content:stretch!important;
    gap:12px!important;
  }
  .portal-quick-card-wide .quick-level-picker a{
    height:82px!important;
    min-height:82px!important;
    justify-content:flex-start!important;
    text-align:left!important;
    padding:10px 14px!important;
    gap:12px!important;
  }
  html[dir="rtl"] .portal-quick-card-wide .quick-level-picker a{text-align:right!important}
  .portal-quick-card-wide .quick-level-picker a span{width:38px!important;height:38px!important;flex-basis:38px!important}
  .portal-quick-card-wide .quick-level-picker a strong{font-size:.9rem!important}
  .portal-quick-card-wide .quick-explore-card{padding:17px!important}
  .portal-quick-card-wide .quick-explore-links>a{min-height:92px!important;padding:9px 12px!important}
  .portal-quick-card-wide .quick-thumb{width:112px!important;height:74px!important}
}
@media(max-width:900px){.portal-quick-card-wide .quick-level-picker a{min-height:58px!important;height:58px!important}}
/* ===== 2026-10-01: RTL game header + clearer completion modal ===== */
@media(min-width:821px){
  .topline{padding-right:340px!important}
  html[dir="rtl"] .topline{padding-right:340px!important;padding-left:0!important}
}
/* ===== 2026-10-01: clearer pass-rate toast ===== */
.board-wrap .solve-rate-toast{
  width:min(72%,460px)!important;
  min-height:36px!important;
  box-sizing:border-box!important;
  padding:8px 16px!important;
  border:1px solid #9fd5c1!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#eafaf3,#dff4ed)!important;
  color:#1f5c49!important;
  box-shadow:0 9px 24px rgba(42,104,83,.16),0 0 0 4px rgba(91,160,136,.07)!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:900!important;
}
html[dir="rtl"] .board-wrap .solve-rate-toast{
  direction:rtl!important;
  text-align:center!important;
}
@media(max-width:700px){
  .board-wrap .solve-rate-toast{
    width:min(84%,460px)!important;
    min-height:34px!important;
    padding:7px 12px!important;
    font-size:10.5px!important;
  }
}
/* ===== Cache 133: screenshot fixes — header separation, status spacing, completion layering ===== */
@media(min-width:821px){
  .topline{padding-right:430px!important;padding-left:0!important}
  html[dir="rtl"] .topline{padding-right:0!important;padding-left:430px!important}
  html[dir="rtl"] .game-actionbar{right:auto!important;left:0!important}
}
.game-status{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  align-items:center!important;
  width:100%!important;
  direction:ltr!important;
}
.game-status #mistakes{justify-self:start!important}
.game-status #timerWrap{justify-self:end!important;margin:0!important;direction:ltr!important}
html[dir="rtl"] .game-status #mistakes{direction:rtl!important;text-align:right!important}
.board-wrap .completion{z-index:20!important}

/* Cache 133b: keep transient pass-rate notice above every board overlay. */
.board-wrap .solve-rate-toast{z-index:18!important;isolation:isolate!important}

/* ===== Cache 134: stronger, clearer interface typography across gameplay ===== */
html,body,button,input,select,textarea{
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  text-rendering:optimizeLegibility;
}
html[dir="rtl"] body,html[dir="rtl"] button,html[dir="rtl"] input,
html[dir="rtl"] select,html[dir="rtl"] textarea{
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
body{font-weight:500}
.difficulty-picker>a{font-size:13px!important;font-weight:900!important}
.difficulty-picker .variant-quick-nav-title{
  font-size:11px!important;font-weight:900!important;line-height:1.25!important;
}
.difficulty-picker .variant-quick-nav a{
  font-size:11px!important;font-weight:850!important;line-height:1.2!important;
}
.tool{font-size:14px!important;font-weight:850!important}
.game-status{font-size:14px!important;font-weight:800!important}
.setting{font-size:14px!important;font-weight:650!important}
.game-actionbar button,.game-actionbar a,.btn,.pill{font-weight:850!important}
.card h2,.card h3,.drawer h2{font-weight:850}
@media(max-width:700px){
  .difficulty-picker>a{font-size:12.5px!important}
  .difficulty-picker .variant-quick-nav a{font-size:10.5px!important}
  .tool{font-size:13.5px!important}
}

/* Cache 153: top settings ownership + stable game action hover */
#gameSettingsBtn{display:none!important}
.game-actionbar{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.game-action{min-width:0!important;transform:none!important;transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease!important}
.game-action:hover,.game-action:focus-visible{transform:none!important}
.game-action span{transform:none!important;max-width:100%!important}
@media(min-width:1181px){.game-actionbar{grid-template-columns:repeat(4,minmax(0,1fr))!important}.game-action{padding-inline:8px!important}.game-action span{font-size:10px!important}}

/* Cache 160: three balanced game action buttons */
#gameBackBtn,#gameSettingsBtn{display:none!important}
.game-actionbar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.game-actionbar .game-action{width:100%!important;min-width:0!important;margin:0!important;justify-content:center!important}
@media(min-width:1181px){
  .game-actionbar{width:320px!important;gap:8px!important;padding:5px!important}
  .game-actionbar .game-action{width:100%!important;min-width:0!important;padding:0 12px!important}
  #howToBtn{min-width:0!important}
}
@media(min-width:821px) and (max-width:1180px){
  .game-actionbar{width:100%!important;gap:10px!important}
}
@media(max-width:820px){
  .game-actionbar{width:100%!important;gap:8px!important}
}

/* Cache 161: use the full mode rail — Classic is the base game, not a variant shortcut */
@media(min-width:821px){
  .difficulty-picker{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .difficulty-picker .variant-quick-nav{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    margin-top:8px!important;
    padding-top:9px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:space-between!important;
    gap:10px!important;
  }
  .difficulty-picker .variant-quick-nav-title{
    flex:0 0 auto!important;
    margin:0 2px 1px!important;
    font-size:11px!important;
  }
  .difficulty-picker .variant-quick-nav a{
    flex:0 0 40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:8px 10px!important;
    border-radius:12px!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1.1!important;
  }
}
@media(min-width:821px) and (max-width:1180px){
  .difficulty-picker .variant-quick-nav{gap:8px!important}
  .difficulty-picker .variant-quick-nav a{
    flex-basis:38px!important;
    height:38px!important;
    min-height:38px!important;
    font-size:12.5px!important;
  }
}

/* Cache 162: hide only the currently active mode and redistribute the other five */
.variant-quick-nav a[hidden]{display:none!important}
@media(min-width:821px){
  .difficulty-picker .variant-quick-nav{justify-content:space-between!important}
}

/* Cache 163: soft pastel colors for mode buttons */
.variant-quick-nav a[data-variant-nav="classic"]{background:#eef4ff!important;border-color:#c7d8ff!important;color:#3f63c9!important}
.variant-quick-nav a[data-variant-nav="sudokuX"]{background:#f3edff!important;border-color:#d8c6ff!important;color:#7a58d8!important}
.variant-quick-nav a[data-variant-nav="jigsaw"]{background:#ecfbf3!important;border-color:#bfe7cf!important;color:#2f9c67!important}
.variant-quick-nav a[data-variant-nav="killer"]{background:#fff4ea!important;border-color:#ffd4b3!important;color:#d9862f!important}
.variant-quick-nav a[data-variant-nav="sandwich"]{background:#fff0f6!important;border-color:#f7c9db!important;color:#cc5f92!important}
.variant-quick-nav a[data-variant-nav="sixteenBySixteen"]{background:#eef9fc!important;border-color:#c3e7ef!important;color:#3e8fa2!important}
.variant-quick-nav a:hover{transform:translateY(-1px)!important;box-shadow:0 8px 18px rgba(26,42,76,.07)!important}

/* Cache 164: Sandwich uses the same full-size mode rail as every other variant */
@media(min-width:821px){
  .game-panel:has(.board-wrap.sandwich) .variant-quick-nav{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    margin-top:8px!important;
    padding-top:9px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:space-between!important;
    gap:10px!important;
  }
  .game-panel:has(.board-wrap.sandwich) .variant-quick-nav-title{
    margin:0 2px 1px!important;
    font-size:11px!important;
    line-height:1.25!important;
  }
  .game-panel:has(.board-wrap.sandwich) .difficulty-picker .variant-quick-nav a{
    flex:0 0 40px!important;
    min-height:40px!important;
    height:40px!important;
    padding:8px 10px!important;
    border-radius:12px!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1.1!important;
  }
}
@media(min-width:821px) and (max-width:1180px){
  .game-panel:has(.board-wrap.sandwich) .variant-quick-nav{gap:8px!important}
  .game-panel:has(.board-wrap.sandwich) .difficulty-picker .variant-quick-nav a{
    flex-basis:38px!important;
    min-height:38px!important;
    height:38px!important;
    font-size:12.5px!important;
  }
}

/* Cache 165: canonical desktop rail sizing across every Sudoku variant */
@media(min-width:821px){
  #difficultyPicker{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  #difficultyPicker > a{
    flex:0 0 40px!important;
    min-height:40px!important;
    height:40px!important;
    padding:8px 10px!important;
    border-radius:12px!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1.1!important;
  }
  #variantQuickNav{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    margin-top:8px!important;
    padding-top:9px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:space-between!important;
    gap:10px!important;
  }
  #variantQuickNavTitle{
    flex:0 0 auto!important;
    margin:0 2px 1px!important;
    font-size:11px!important;
    line-height:1.25!important;
    font-weight:900!important;
  }
  #variantQuickNav a:not([hidden]){
    flex:0 0 40px!important;
    min-height:40px!important;
    height:40px!important;
    padding:8px 10px!important;
    border-radius:12px!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1.1!important;
  }
  #variantQuickNav a[hidden]{display:none!important}
}
@media(min-width:821px) and (max-width:1180px){
  #difficultyPicker > a,
  #variantQuickNav a:not([hidden]){
    flex-basis:38px!important;
    min-height:38px!important;
    height:38px!important;
    font-size:12.5px!important;
  }
  #variantQuickNav{gap:8px!important}
}

/* Cache 166: stable cross-page game transitions */
html{scrollbar-gutter:stable;overflow-y:scroll}
.shell{transition:opacity .14s ease,transform .14s ease}
html.game-page-loading .shell{opacity:0;transform:translateY(2px);pointer-events:none}
html.game-page-ready .shell{opacity:1;transform:none}
html.game-page-leaving .shell{opacity:0;transform:translateY(-2px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.shell{transition:none!important;transform:none!important}}

/* Cache 167: Sandwich board parity — keep the 9x9 grid exactly the same size as other modes */
@media(min-width:821px){
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:148px calc(var(--board-fit) + 32px) 320px!important;
  }
  .board-wrap.sandwich{
    width:calc(var(--board-fit) + 32px)!important;
    max-width:calc(var(--board-fit) + 32px)!important;
    min-width:calc(var(--board-fit) + 32px)!important;
    padding-top:32px!important;
    padding-left:32px!important;
    box-sizing:border-box!important;
    margin:0!important;
  }
  .board-wrap.sandwich > .grid{
    width:var(--board-fit)!important;
    min-width:var(--board-fit)!important;
    max-width:var(--board-fit)!important;
    height:var(--board-fit)!important;
    min-height:var(--board-fit)!important;
    max-height:var(--board-fit)!important;
    aspect-ratio:1/1!important;
  }
}
@media(min-width:821px) and (max-width:1180px){
  .game-panel:has(.board-wrap.sandwich){
    grid-template-columns:116px calc(var(--board-fit) + 32px) 250px!important;
  }
}

/* Cache 169: Sandwich must inherit the exact same board-fit as every 9x9 mode */
@media(min-width:1181px){
  .game-panel:has(.board-wrap.sandwich){
    --board-fit:min(680px,calc(100dvh - 195px),calc(100vw - 640px))!important;
  }
}
@media(min-width:821px) and (max-width:1180px){
  .game-panel:has(.board-wrap.sandwich){
    --board-fit:min(610px,calc(100dvh - 245px),calc(100vw - 440px))!important;
  }
}

/* Cache 170: soft pastel game action buttons */
#pauseBtn{
  color:#6652b8!important;
  border-color:#d9ccfb!important;
  background:linear-gradient(145deg,#f8f5ff,#eee8ff)!important;
  box-shadow:0 5px 14px rgba(102,82,184,.10)!important;
}
#howToBtn{
  color:#2f7f5b!important;
  border-color:#c5e8d6!important;
  background:linear-gradient(145deg,#f4fcf8,#e7f8ef)!important;
  box-shadow:0 5px 14px rgba(47,127,91,.09)!important;
}
#gameShareBtn{
  color:#2476a5!important;
  border-color:#bfdff4!important;
  background:linear-gradient(145deg,#f3faff,#e3f3ff)!important;
  box-shadow:0 5px 14px rgba(36,118,165,.10)!important;
}
#pauseBtn:hover,#pauseBtn:focus-visible{
  background:linear-gradient(145deg,#f1ebff,#e3d9ff)!important;
  border-color:#c8b8f4!important;
  box-shadow:0 7px 17px rgba(102,82,184,.15)!important;
}
#howToBtn:hover,#howToBtn:focus-visible{
  background:linear-gradient(145deg,#ecfaf3,#d9f3e6)!important;
  border-color:#adddc4!important;
  box-shadow:0 7px 17px rgba(47,127,91,.14)!important;
}
#gameShareBtn:hover,#gameShareBtn:focus-visible{
  background:linear-gradient(145deg,#eaf7ff,#d5edff)!important;
  border-color:#a7d4ef!important;
  box-shadow:0 7px 17px rgba(36,118,165,.15)!important;
}
body.dark #pauseBtn{color:#d7ccff!important;border-color:#5a4b82!important;background:linear-gradient(145deg,#332d49,#3a3155)!important}
body.dark #howToBtn{color:#bcebd1!important;border-color:#3e7058!important;background:linear-gradient(145deg,#253c32,#29483a)!important}
body.dark #gameShareBtn{color:#b9e3fb!important;border-color:#3b6880!important;background:linear-gradient(145deg,#263b48,#29495b)!important}


/* ===== Cache 179: stable mode rail + explicit Ready/Start gate ===== */
.ready-overlay{
  position:absolute;
  inset:0;
  z-index:19;
  display:grid;
  place-items:center;
  padding:22px;
  border-radius:16px;
  background:color-mix(in srgb,var(--surface) 46%,transparent);
  -webkit-backdrop-filter:blur(2.4px) saturate(.72);
  backdrop-filter:blur(2.4px) saturate(.72);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent);
}
.ready-card{
  width:min(360px,88%);
  display:grid;
  gap:11px;
  padding:26px 24px;
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));
  border-radius:20px;
  background:var(--surface);
  box-shadow:0 20px 52px rgba(26,42,76,.18);
  text-align:center;
  color:var(--ink);
}
.ready-kicker{
  color:var(--primary);
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ready-card strong{
  font-size:clamp(1.35rem,3vw,1.8rem);
  line-height:1.12;
}
.ready-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.ready-start{
  width:100%;
  min-height:48px;
  margin-top:4px;
  font-weight:950;
  font-size:14px;
}
body.dark .ready-overlay{
  background:color-mix(in srgb,#101726 58%,transparent);
}
body.game-awaiting-start .pad,
body.game-awaiting-start .pad-tools,
body.game-awaiting-start .tools{
  pointer-events:none!important;
  opacity:.48!important;
  filter:saturate(.65);
}
body.game-awaiting-start #pauseBtn{
  opacity:.48!important;
  cursor:not-allowed!important;
}
#pauseBtn:disabled{pointer-events:none!important}

/* Desktop/laptop: keep all six difficulties + five alternate modes inside
   the exact height of the board rail. Nothing may extend over content below. */
@media(min-width:821px){
  #difficultyPicker{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    gap:5px!important;
    padding:8px!important;
  }
  #difficultyPicker > a{
    flex:0 0 34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:6px 7px!important;
    border-radius:10px!important;
    font-size:11px!important;
    line-height:1.05!important;
  }
  #variantQuickNav{
    flex:1 1 0!important;
    min-height:0!important;
    width:100%!important;
    margin:4px 0 0!important;
    padding:6px 0 0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto repeat(5,minmax(0,1fr))!important;
    align-content:stretch!important;
    gap:5px!important;
    overflow:hidden!important;
    border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;
  }
  #variantQuickNavTitle{
    margin:0 2px!important;
    align-self:center!important;
    font-size:9px!important;
    line-height:1.15!important;
  }
  #variantQuickNav a:not([hidden]){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    flex:none!important;
    padding:3px 6px!important;
    border-radius:9px!important;
    font-size:10px!important;
    line-height:1!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}
@media(min-width:821px) and (max-width:1180px){
  #difficultyPicker > a{
    flex-basis:32px!important;
    height:32px!important;
    min-height:32px!important;
    font-size:10.5px!important;
  }
  #variantQuickNav{gap:4px!important;padding-top:5px!important}
  #variantQuickNav a:not([hidden]){font-size:9.5px!important}
}
@media(min-width:821px) and (max-height:700px){
  #difficultyPicker{
    gap:4px!important;
    padding:6px!important;
  }
  #difficultyPicker > a{
    flex-basis:29px!important;
    height:29px!important;
    min-height:29px!important;
    padding:4px 6px!important;
    font-size:10px!important;
  }
  #variantQuickNav{
    margin-top:2px!important;
    padding-top:4px!important;
    gap:3px!important;
  }
  #variantQuickNavTitle{font-size:8px!important}
  #variantQuickNav a:not([hidden]){font-size:9px!important}
}

/* On phones/tablets the picker is a normal compact grid above the board. */
@media(max-width:820px){
  #difficultyPicker{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    padding:0!important;
    gap:6px!important;
    border:0!important;
    background:transparent!important;
  }
  #difficultyPicker > a{
    min-height:36px!important;
    height:auto!important;
    padding:6px 4px!important;
  }
  #variantQuickNav{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:auto!important;
    gap:5px!important;
    margin-top:2px!important;
    padding-top:7px!important;
    overflow:visible!important;
  }
  #variantQuickNavTitle{grid-column:1/-1!important}
  #variantQuickNav a:not([hidden]){
    min-height:32px!important;
    height:auto!important;
    padding:6px 4px!important;
    font-size:10px!important;
  }
  .ready-overlay{padding:14px;border-radius:12px}
  .ready-card{width:min(330px,92%);padding:21px 18px;border-radius:17px}
  .ready-card p{font-size:12px}
}

/* ===== Cache 180: reveal the board shape but conceal every clue before Start ===== */
body.game-awaiting-start #grid{
  filter:blur(2.6px) saturate(.62) contrast(.92);
  opacity:.78;
  transform:scale(1.012);
  transform-origin:center;
  transition:filter .16s ease,opacity .16s ease,transform .16s ease;
}
body.game-awaiting-start #grid .value,
body.game-awaiting-start #grid .notes,
body.game-awaiting-start #grid .cage-sum{
  filter:blur(8px)!important;
  opacity:.14!important;
  user-select:none!important;
}
body.game-awaiting-start #sandwichTop,
body.game-awaiting-start #sandwichLeft{
  filter:blur(7px)!important;
  opacity:.16!important;
  user-select:none!important;
}