/* Shared app shell for the Quizz One logic games. */
:root{
  --gq-ink:#172033;
  --gq-muted:#536078;
  --gq-page:#f5f7fb;
  --gq-surface:#ffffff;
  --gq-surface-soft:#edf2ff;
  --gq-line:#cbd5e1;
  --gq-primary:#075985;
  --gq-primary-strong:#0c4a6e;
  --gq-primary-soft:#dff3ff;
  --gq-success:#087443;
  --gq-danger:#b4234d;
  --gq-shadow:0 12px 30px rgba(15,23,42,.10);
  color-scheme:light;
}
html[data-theme="dark"]{
  --gq-ink:#f8fafc;
  --gq-muted:#b8c3d5;
  --gq-page:#101827;
  --gq-surface:#182235;
  --gq-surface-soft:#22314a;
  --gq-line:#43516a;
  --gq-primary:#4cc9f0;
  --gq-primary-strong:#8ee7ff;
  --gq-primary-soft:#123d5b;
  --gq-success:#5de3a7;
  --gq-danger:#ff8eae;
  --gq-shadow:0 14px 36px rgba(0,0,0,.28);
  color-scheme:dark;
}
*{scrollbar-color:var(--gq-line) transparent}
html.gq-app,html.gq-app body{min-height:100%;overflow-x:hidden!important;overflow-y:auto!important}
html.gq-app body{
  height:auto!important;
  color:var(--gq-ink)!important;
  background:
    radial-gradient(circle at 4% 0%,rgba(76,201,240,.18),transparent 26rem),
    radial-gradient(circle at 100% 100%,rgba(129,140,248,.14),transparent 28rem),
    var(--gq-page)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
html.gq-app body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.7;
  background-image:linear-gradient(rgba(148,163,184,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.10) 1px,transparent 1px);
  background-size:32px 32px;
}
html.gq-app button,html.gq-app select,html.gq-app input{font:inherit}
html.gq-app button{min-height:44px}
html.gq-app button:focus-visible,html.gq-app a:focus-visible,html.gq-app select:focus-visible,html.gq-app input:focus-visible{
  outline:3px solid #f59e0b!important;outline-offset:3px!important;
}
/* Main game pages */
html.gq-app .app,html.gq-app .page{
  width:min(100%,1120px);height:auto!important;min-height:100dvh;margin:0 auto;padding:0 max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
}
html.gq-app .app{display:grid;grid-template-rows:auto 1fr auto;gap:14px}
html.gq-app .topbar,html.gq-app .page>header,html.gq-app body>header{
  min-height:72px;margin:0 -14px;padding:12px max(18px,env(safe-area-inset-right));
  border:0!important;border-bottom:1px solid var(--gq-line)!important;border-radius:0!important;
  color:var(--gq-ink)!important;background:color-mix(in srgb,var(--gq-page) 88%,transparent)!important;
  box-shadow:none!important;backdrop-filter:blur(16px);position:sticky!important;top:0;z-index:20;
}
html.gq-app .topbar:after,html.gq-app body>header:after{content:none!important}
html.gq-app .brand-title,html.gq-app .brand,html.gq-app .brand-copy{color:var(--gq-ink)!important;text-shadow:none!important}
html.gq-app .brand-title{font-size:clamp(1.25rem,4vw,1.65rem)!important;letter-spacing:-.035em!important;font-weight:800!important}
html.gq-app .brand-sub{color:var(--gq-muted)!important;font-size:.77rem!important;font-weight:600!important;letter-spacing:0!important}
html.gq-app .brand-mark,html.gq-app .brandIcon,html.gq-app .badge{
  background:linear-gradient(135deg,var(--gq-primary),#6366f1)!important;border:0!important;box-shadow:none!important;border-radius:12px!important;
}
html.gq-app .header-actions{gap:8px!important}
html.gq-app .icon-btn,html.gq-app .theme-toggle,html.gq-app .gq-theme-toggle{
  min-width:44px;height:44px!important;border:1px solid var(--gq-line)!important;border-radius:13px!important;
  color:var(--gq-ink)!important;background:var(--gq-surface)!important;box-shadow:0 2px 8px rgba(15,23,42,.08)!important;
}
html.gq-app .icon-btn.red{color:#fff!important;background:var(--gq-danger)!important;border-color:var(--gq-danger)!important}
html.gq-app .theme-toggle{width:66px!important}
html.gq-app .theme-toggle .knob,html.gq-app .theme-toggle-thumb{background:var(--gq-primary)!important;border-color:var(--gq-primary)!important;box-shadow:none!important}
html.gq-app .theme-toggle .track-icon,html.gq-app .theme-toggle-sun,html.gq-app .theme-toggle-moon{color:var(--gq-muted)!important}
html.gq-app .game{width:100%;padding:8px 0!important;gap:14px!important;align-content:center!important}
html.gq-app .board-zone,html.gq-app .puzzle-zone{padding:0!important}
html.gq-app .board-shell,html.gq-app .metal-shell{
  width:auto!important;max-width:100%!important;padding:clamp(8px,1.5vw,14px)!important;border:1px solid var(--gq-line)!important;border-radius:22px!important;
  background:var(--gq-surface)!important;box-shadow:var(--gq-shadow)!important;
}
html.gq-app .board,html.gq-app .puzzle-grid{
  border-color:var(--gq-ink)!important;border-radius:12px!important;box-shadow:none!important;
}
html.gq-app .cell,html.gq-app .board-cell{background:var(--gq-surface)!important;color:var(--gq-ink)!important}
html.gq-app .cell.given,html.gq-app .cell.fixed{background:var(--gq-surface-soft)!important;color:var(--gq-primary-strong)!important}
html.gq-app .cell.selected,html.gq-app .board-cell.selected{background:#fef3c7!important;color:#422006!important}
html.gq-app .cell.same,html.gq-app .cell.peer,html.gq-app .board-cell.related{background:var(--gq-primary-soft)!important}
html.gq-app .cell.error,html.gq-app .board-cell.error{background:#ffe4e6!important;color:#8a1538!important}
html.gq-app .board-cell.filled{background:var(--gq-primary)!important}
html.gq-app .keypad-wrap,html.gq-app .mode-wrap{
  width:min(100%,560px)!important;padding:8px!important;border:1px solid var(--gq-line)!important;border-radius:18px!important;background:var(--gq-surface)!important;box-shadow:var(--gq-shadow)!important;
}
html.gq-app .keypad{gap:8px!important}
html.gq-app .num-btn,html.gq-app .value-btn,html.gq-app .mode-btn,html.gq-app .control-btn,html.gq-app .modal-btn,
html.gq-app .btn,html.gq-app .btnMini,html.gq-app .tab,html.gq-app .choice-btn,html.gq-app .option-btn{
  min-height:44px!important;border:1px solid var(--gq-line)!important;border-radius:12px!important;color:var(--gq-ink)!important;
  background:var(--gq-surface)!important;box-shadow:none!important;font-weight:750!important;text-shadow:none!important;
}
html.gq-app .num-btn:hover,html.gq-app .value-btn:hover,html.gq-app .mode-btn:hover,html.gq-app .control-btn:hover,html.gq-app .btn:hover,html.gq-app .btnMini:hover,html.gq-app .choice-btn:hover,html.gq-app .option-btn:hover{background:var(--gq-surface-soft)!important}
html.gq-app .num-btn.selected,html.gq-app .num-btn.active,html.gq-app .value-btn.active,html.gq-app .mode-btn.active,
html.gq-app .option-btn.selected,html.gq-app .choice-btn.selected,html.gq-app .tab.active,html.gq-app .btn.primary,html.gq-app .modal-btn:not(.secondary):not(.rules-btn),html.gq-app .control-btn.green{
  color:#fff!important;border-color:var(--gq-primary)!important;background:var(--gq-primary)!important;
}
html[data-theme="dark"].gq-app .num-btn.selected,html[data-theme="dark"].gq-app .num-btn.active,html[data-theme="dark"].gq-app .value-btn.active,html[data-theme="dark"].gq-app .mode-btn.active,
html[data-theme="dark"].gq-app .option-btn.selected,html[data-theme="dark"].gq-app .choice-btn.selected,html[data-theme="dark"].gq-app .tab.active,html[data-theme="dark"].gq-app .btn.primary,html[data-theme="dark"].gq-app .modal-btn:not(.secondary):not(.rules-btn),html[data-theme="dark"].gq-app .control-btn.green{color:#062235!important}
html.gq-app .control-row{width:min(100%,560px)!important;gap:8px!important}
html.gq-app .control-btn.red,html.gq-app .btn.danger,html.gq-app .btnMini.danger,html.gq-app .modal-btn.secondary{color:#fff!important;background:var(--gq-danger)!important;border-color:var(--gq-danger)!important}
html[data-theme="dark"].gq-app .control-btn.red,html[data-theme="dark"].gq-app .btn.danger,html[data-theme="dark"].gq-app .btnMini.danger,html[data-theme="dark"].gq-app .modal-btn.secondary{color:#4a0820!important}
html.gq-app .zero-btn{background:var(--gq-primary-soft)!important}
html.gq-app .one-btn{background:var(--gq-ink)!important;color:var(--gq-surface)!important;border-color:var(--gq-ink)!important}
html.gq-app .legal-footer{padding:8px!important;color:var(--gq-muted)!important}
/* Dialogues */
html.gq-app .modal{background:rgba(15,23,42,.62)!important;backdrop-filter:blur(8px)}
html.gq-app .modal-card,html.gq-app .modalBox{
  width:min(calc(100% - 28px),480px)!important;border:1px solid var(--gq-line)!important;border-radius:24px!important;
  background:var(--gq-surface)!important;color:var(--gq-ink)!important;box-shadow:0 28px 70px rgba(0,0,0,.30)!important;
}
html.gq-app .modal-inner,html.gq-app .modalBox{padding:clamp(20px,5vw,32px)!important}
html.gq-app .modal h1,html.gq-app .modalBox h1,html.gq-app .modal p,html.gq-app .option-title,html.gq-app .win-info,html.gq-app .rules{color:var(--gq-ink)!important;text-shadow:none!important}
html.gq-app .rules{background:var(--gq-surface-soft)!important;border-radius:12px;padding:12px}
/* Alternative user/admin pages */
html.gq-app .wrap{width:min(100%,1120px)!important;margin:0 auto!important;padding:22px 0 36px!important}
html.gq-app .stage{width:100%!important;max-width:none!important}
html.gq-app .card,html.gq-app .panel,html.gq-app .exportCard{
  border:1px solid var(--gq-line)!important;border-radius:20px!important;background:var(--gq-surface)!important;color:var(--gq-ink)!important;box-shadow:var(--gq-shadow)!important;
}
html.gq-app .card{padding:clamp(16px,3vw,28px)!important}
html.gq-app .panel{padding:16px!important}
html.gq-app .title,html.gq-app h3{color:var(--gq-ink)!important;letter-spacing:-.02em!important}
html.gq-app .pill{background:var(--gq-surface-soft)!important;border:1px solid var(--gq-line)!important;color:var(--gq-ink)!important;border-radius:999px!important}
html.gq-app .hr{background:var(--gq-line)!important}
html.gq-app select,html.gq-app input{
  min-height:44px!important;border:1px solid var(--gq-line)!important;border-radius:10px!important;background:var(--gq-surface)!important;color:var(--gq-ink)!important;
}
html.gq-app .boardWrap,html.gq-app .boardScroller{border-radius:16px!important;background:var(--gq-surface-soft)!important}
html.gq-app .gq-theme-toggle{display:inline-grid!important;place-items:center;cursor:pointer;font-size:1.2rem}
html.gq-app body>header .header-inner{gap:12px}
html.gq-app body>header .tabs{margin-left:auto}
html.gq-app body>footer{color:var(--gq-muted)!important;background:transparent!important}
html.gq-app body>footer a{background:var(--gq-surface)!important;color:var(--gq-ink)!important;border-color:var(--gq-line)!important;box-shadow:none!important}
@media (max-width:640px){
  html.gq-app .app,html.gq-app .page{padding-inline:10px}
  html.gq-app .topbar,html.gq-app .page>header,html.gq-app body>header{margin-inline:-10px;padding-inline:12px;min-height:64px}
  html.gq-app .brand-sub{display:none}
  html.gq-app .icon-btn{width:42px!important}
  html.gq-app .game{gap:10px!important}
  html.gq-app .board-shell,html.gq-app .metal-shell{border-radius:16px!important;padding:6px!important}
  html.gq-app .control-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html.gq-app .control-row .control-btn:last-child:nth-child(odd){grid-column:1/-1}
  html.gq-app .wrap{padding-top:12px!important}
  html.gq-app .card{border-radius:16px!important;padding:14px!important}
  html.gq-app .topSelectGrid,html.gq-app .grid2,html.gq-app .adminCols,html.gq-app .adminGrid,html.gq-app .stack.two{grid-template-columns:1fr!important}
  html.gq-app .tabs{gap:4px!important}
  html.gq-app .tab{min-width:0!important;padding-inline:10px!important}
}
@media (prefers-reduced-motion:reduce){html.gq-app *,html.gq-app *:before,html.gq-app *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* --------------------------------------------------------------------------
   Mobile-first game surfaces (v2)
   The source pages contain several generations of styling. These selectors
   are intentionally page-scoped so every visible layer has one clear owner.
   -------------------------------------------------------------------------- */
html.gq-sudoku{--gq-primary:#3347b8;--gq-primary-strong:#243486;--gq-primary-soft:#e8ebff;--gq-page:#f6f7ff}
html.gq-takuzu{--gq-primary:#086b66;--gq-primary-strong:#075450;--gq-primary-soft:#dff7f3;--gq-page:#f3fbfa}
html.gq-nono{--gq-primary:#8d356d;--gq-primary-strong:#6f2855;--gq-primary-soft:#fbe7f4;--gq-page:#fff7fb}
html[data-theme="dark"].gq-sudoku{--gq-primary:#9cabff;--gq-primary-strong:#c5ceff;--gq-primary-soft:#29345c;--gq-page:#111527}
html[data-theme="dark"].gq-takuzu{--gq-primary:#63dfd1;--gq-primary-strong:#9af1e8;--gq-primary-soft:#153f40;--gq-page:#0d1b1c}
html[data-theme="dark"].gq-nono{--gq-primary:#ff9bd2;--gq-primary-strong:#ffc7e7;--gq-primary-soft:#4d2744;--gq-page:#21121d}

html:is(.gq-sudoku,.gq-takuzu,.gq-nono) body{
  background:
    radial-gradient(circle at 12% -10%,color-mix(in srgb,var(--gq-primary) 21%,transparent),transparent 34rem),
    radial-gradient(circle at 110% 100%,rgba(99,102,241,.12),transparent 34rem),
    var(--gq-page)!important;
}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .app{
  width:min(100%,920px)!important;
  gap:0!important;
  padding-inline:max(12px,env(safe-area-inset-left))!important;
}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .topbar{
  margin-inline:calc(-1 * max(12px,env(safe-area-inset-left)))!important;
  padding-inline:max(14px,env(safe-area-inset-left))!important;
  background:var(--gq-surface)!important;
  border-bottom:1px solid var(--gq-line)!important;
}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .game{
  width:100%!important;
  max-width:820px!important;
  margin-inline:auto!important;
  padding:16px 0 10px!important;
  gap:12px!important;
  align-content:start!important;
}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.board-shell,.metal-shell){
  padding:10px!important;
  border:1px solid var(--gq-line)!important;
  border-radius:20px!important;
  background:var(--gq-surface)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.12)!important;
}
html.gq-sudoku .board-shell{
  width:var(--board-shell-size,calc(var(--board-size) + 22px))!important;
  height:var(--board-shell-size,calc(var(--board-size) + 22px))!important;
}
html.gq-takuzu .board-shell{width:calc(var(--board-size) + 22px)!important}
html.gq-nono .metal-shell{width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain}
html.gq-nono .puzzle-grid{border-color:var(--gq-ink)!important;background:var(--gq-surface-soft)!important}

html.gq-sudoku .board{border:2px solid var(--gq-ink)!important;border-radius:10px!important;background:var(--gq-line)!important}
html.gq-sudoku .cell{
  border-color:var(--gq-line)!important;
  color:var(--gq-ink)!important;
  background:var(--gq-surface)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html.gq-sudoku .cell.block-dark{background:color-mix(in srgb,var(--gq-surface-soft) 58%,var(--gq-surface))!important}
html.gq-sudoku .cell.given{background:var(--gq-primary-soft)!important;color:var(--gq-primary-strong)!important}
html.gq-sudoku .cell.peer:not(.selected){background:color-mix(in srgb,var(--gq-primary-soft) 55%,var(--gq-surface))!important}
html.gq-sudoku .cell.same:not(.selected){background:color-mix(in srgb,var(--gq-primary-soft) 82%,var(--gq-surface))!important;color:var(--gq-primary-strong)!important}
html.gq-sudoku .cell.selected{background:#facc15!important;color:#312006!important;box-shadow:inset 0 0 0 3px #713f12!important}
html.gq-sudoku .cell.error{background:#be123c!important;color:#fff!important;box-shadow:inset 0 0 0 3px #fff!important}
html.gq-sudoku .cell .notes{color:var(--gq-muted)!important}

html.gq-takuzu .board{border:2px solid var(--gq-ink)!important;border-radius:12px!important;background:var(--gq-line)!important}
html.gq-takuzu .cell{border-color:var(--gq-line)!important;background:var(--gq-surface)!important;box-shadow:none!important}
html.gq-takuzu .cell.peer:not(.selected){background:var(--gq-primary-soft)!important}
html.gq-takuzu .cell.selected{background:#facc15!important;box-shadow:inset 0 0 0 3px #713f12!important}
html.gq-takuzu .token{
  width:72%!important;height:72%!important;border:2px solid currentColor!important;box-shadow:none!important;background:transparent!important;font-weight:850!important;
}
html.gq-takuzu .token.zero{color:#075985!important}
html.gq-takuzu .token.one{color:#7c2d12!important}
html[data-theme="dark"].gq-takuzu .token.zero{color:#7dd3fc!important}
html[data-theme="dark"].gq-takuzu .token.one{color:#fdba74!important}
html.gq-takuzu .cell.given .token{background:var(--gq-surface-soft)!important}
html.gq-takuzu .cell:not(.given) .token{outline:3px solid var(--gq-success)!important;outline-offset:2px!important}
html.gq-takuzu .cycle-hint{
  width:100%;margin:0;padding:10px 14px;border:1px solid var(--gq-line);border-radius:14px;
  color:var(--gq-muted);background:var(--gq-surface);font-size:clamp(.78rem,2.8vw,1rem);font-weight:750;text-align:center;
}

html.gq-nono .corner,html.gq-nono .col-clues,html.gq-nono .row-clues{background:var(--gq-surface-soft)!important;color:var(--gq-ink)!important}
html.gq-nono .clue-line{color:var(--gq-ink)!important;border-color:var(--gq-line)!important}
html.gq-nono .clue-line.complete{color:var(--gq-success)!important;background:color-mix(in srgb,var(--gq-success) 14%,transparent)!important}
html.gq-nono .board-cell{background:var(--gq-surface)!important;border-color:var(--gq-line)!important;box-shadow:none!important}
html.gq-nono .board-cell.selected{background:#facc15!important;box-shadow:inset 0 0 0 3px #713f12!important}
html.gq-nono .fill-mark{width:88%!important;height:88%!important;border:0!important;border-radius:14%!important;background:var(--gq-primary-strong)!important;box-shadow:none!important}
html.gq-nono .cross-mark{color:var(--gq-muted)!important;opacity:1!important}
html.gq-nono .cross-mark:before,html.gq-nono .cross-mark:after{background:currentColor!important}

html:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.keypad-wrap,.mode-wrap){
  width:100%!important;
  padding:8px!important;
  border:1px solid var(--gq-line)!important;
  border-radius:16px!important;
  background:var(--gq-surface)!important;
  box-shadow:0 6px 18px rgba(15,23,42,.08)!important;
}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .control-row{width:100%!important;gap:8px!important}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.num-btn,.value-btn,.mode-btn,.control-btn){
  min-height:48px!important;
  border:1px solid var(--gq-line)!important;
  border-radius:12px!important;
  background:var(--gq-surface-soft)!important;
  color:var(--gq-ink)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font-weight:800!important;
}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.num-btn,.value-btn,.mode-btn,.control-btn):active{transform:scale(.97)!important}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.num-btn.active,.value-btn.active,.mode-btn.active,.control-btn.active,.control-btn.green){
  background:var(--gq-primary)!important;border-color:var(--gq-primary)!important;color:#fff!important;
}
html[data-theme="dark"]:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.num-btn.active,.value-btn.active,.mode-btn.active,.control-btn.active,.control-btn.green){color:#071b27!important}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.control-btn.red,.erase-btn){background:var(--gq-danger)!important;border-color:var(--gq-danger)!important;color:#fff!important}
html[data-theme="dark"]:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.control-btn.red,.erase-btn){color:#4a0820!important}

/* Every modal surface and every label is tied to the active color scheme. */
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal{
  align-items:flex-start!important;
  padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom))!important;
  overflow-y:auto!important;
  background:rgba(7,14,28,.70)!important;
}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal-card{
  width:min(100%,520px)!important;
  margin:auto!important;
  padding:0!important;
  border:1px solid var(--gq-line)!important;
  border-radius:24px!important;
  background:var(--gq-surface)!important;
  overflow:hidden!important;
}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal-inner{
  padding:clamp(20px,5vw,32px)!important;
  border:0!important;
  border-radius:0!important;
  background:var(--gq-surface)!important;
  color:var(--gq-ink)!important;
}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal :is(h1,p,.option-title,.rules,.win-info,.loading){color:var(--gq-ink)!important;text-shadow:none!important}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal h1{font-size:clamp(2rem,9vw,3.25rem)!important;line-height:1.05!important;letter-spacing:-.045em!important}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .option-title{font-size:.78rem!important;letter-spacing:.08em!important}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .option-btn{
  min-height:48px!important;background:var(--gq-surface-soft)!important;color:var(--gq-ink)!important;border-color:var(--gq-line)!important;
}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .option-btn.selected{background:var(--gq-primary)!important;color:#fff!important;border-color:var(--gq-primary)!important}
html[data-theme="dark"]:is(.gq-sudoku,.gq-takuzu,.gq-nono) .option-btn.selected{color:#071b27!important}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal-btn{background:var(--gq-primary)!important;color:#fff!important;border-color:var(--gq-primary)!important}
html[data-theme="dark"]:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal-btn{color:#071b27!important}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal-btn.rules-btn{background:var(--gq-surface-soft)!important;color:var(--gq-ink)!important;border-color:var(--gq-line)!important}
html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .rules{background:var(--gq-surface-soft)!important;border:1px solid var(--gq-line)!important}

/* Emoji version: same quiet app shell, while retaining the emoji identity. */
html.gq-emoji body{background:linear-gradient(160deg,#f4f5ff,#eef9ff 52%,#fff5fb)!important;color:var(--gq-ink)!important}
html[data-theme="dark"].gq-emoji body{background:linear-gradient(160deg,#14172a,#10202a 52%,#241523)!important}
html.gq-emoji .topbar{width:min(calc(100% - 24px),820px)!important}
html.gq-emoji .game{width:min(100%,820px)!important}
html.gq-emoji :is(.board-shell,.side-card,.modalBox){background:var(--gq-surface)!important;border:1px solid var(--gq-line)!important;box-shadow:var(--gq-shadow)!important}
html.gq-emoji .modalBox :is(h2,p,label){color:var(--gq-ink)!important;text-shadow:none!important}
html.gq-emoji .modalBox :is(.choice-btn,.world-btn){background:var(--gq-surface-soft)!important;color:var(--gq-ink)!important;border-color:var(--gq-line)!important;box-shadow:none!important}
html.gq-emoji .modalBox :is(.choice-btn.selected,.world-btn.selected){background:var(--gq-primary)!important;color:#fff!important;border-color:var(--gq-primary)!important}
html.gq-emoji .topbar button,html.gq-emoji .sideBtns button{background:var(--gq-primary)!important;color:#fff!important;border:0!important;box-shadow:none!important}
html.gq-emoji .emojiBtn{background:var(--gq-surface-soft)!important;color:var(--gq-ink)!important;border-color:var(--gq-line)!important;box-shadow:none!important}
html.gq-app label{color:var(--gq-ink)!important}

@media (orientation:portrait){
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .app{width:100%!important;max-width:840px!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .topbar{
    min-height:clamp(62px,16vw,112px)!important;
    padding-block:clamp(9px,2.5vw,18px)!important;
  }
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .brand-title{font-size:clamp(1.35rem,5.5vw,2.55rem)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .brand-sub{display:block!important;font-size:clamp(.7rem,2.7vw,1.15rem)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.icon-btn,.theme-toggle){height:clamp(44px,11.3vw,76px)!important;border-radius:clamp(12px,3vw,20px)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .icon-btn{width:clamp(44px,11.3vw,76px)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .theme-toggle{width:clamp(62px,16.5vw,108px)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .game{padding-top:clamp(10px,3vw,22px)!important;gap:clamp(8px,2.4vw,16px)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.keypad-wrap,.mode-wrap){padding:clamp(6px,1.8vw,12px)!important;border-radius:clamp(14px,3.7vw,24px)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.num-btn,.value-btn,.mode-btn,.control-btn){
    min-height:clamp(44px,11.5vw,78px)!important;
    border-radius:clamp(10px,2.8vw,18px)!important;
    font-size:clamp(.82rem,3.5vw,1.35rem)!important;
  }
  html.gq-sudoku .num-btn,html.gq-takuzu .value-btn{font-size:clamp(1.1rem,5vw,2rem)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .control-row{gap:clamp(5px,1.7vw,12px)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal-card{width:min(calc(100vw - 24px),720px)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal-inner{padding:clamp(20px,6vw,48px)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .modal h1{font-size:clamp(2rem,9vw,4.5rem)!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) :is(.option-btn,.modal-btn){min-height:clamp(48px,12vw,78px)!important;font-size:clamp(.9rem,3.6vw,1.35rem)!important}
}

@media (orientation:portrait) and (max-width:430px){
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .brand-sub{display:none!important}
  html:is(.gq-sudoku,.gq-takuzu,.gq-nono) .control-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html.gq-sudoku .control-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html:is(.gq-takuzu,.gq-nono) .control-row .control-btn:last-child{grid-column:1/-1!important}
}

@media (orientation:portrait) and (min-width:431px){
  html.gq-sudoku .control-row{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html.gq-takuzu .control-row,html.gq-nono .control-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media (orientation:landscape){
  html.gq-takuzu .board-zone{grid-column:1;grid-row:1/3}
  html.gq-takuzu .cycle-hint{grid-column:2;grid-row:1;align-self:end}
  html.gq-takuzu .control-row{grid-column:2;grid-row:2;align-self:start}
}

@media (orientation:portrait){
  html.gq-emoji .topbar,html.gq-emoji .game,html.gq-emoji aside{width:min(calc(100% - 20px),820px)!important}
  html.gq-emoji .game{padding-inline:0!important;gap:clamp(10px,2.8vw,20px)!important}
  html.gq-emoji .board-shell{width:100%!important;padding:clamp(8px,2.5vw,18px)!important;border-radius:clamp(18px,5vw,32px)!important}
  html.gq-emoji :is(.topbar button,.sideBtns button){min-height:clamp(50px,13vw,82px)!important;font-size:clamp(.9rem,3.8vw,1.35rem)!important}
  html.gq-emoji .emojiBtn{min-height:clamp(50px,13vw,82px)!important;font-size:clamp(1.45rem,6vw,2.6rem)!important;border-radius:clamp(12px,3.8vw,24px)!important}
  html.gq-emoji .modalBox{width:min(calc(100vw - 24px),700px)!important;padding:clamp(18px,5vw,38px)!important}
  html.gq-emoji .modalBox h2{font-size:clamp(1.7rem,7vw,3.5rem)!important}
  html.gq-emoji .modalBox :is(.choice-btn,.world-btn){min-height:clamp(64px,17vw,108px)!important}
}