/* Kanguinn Sudoku — round 11 play screen (S01–S03, design-spec R11.7). Board first: a square board inside 8px
   phone gutters, thin cell lines and thick box lines, a two-row LTR keypad, Normal/Notes + Undo by the keypad,
   everything less used behind ⋯ and the gear. Shared sheets, bars and buttons come from games.css.
   The board keeps a left-to-right grid in Arabic too (spatially fixed). */
.sudoku{
  --sd-peer:#EEF0F2; --sd-same:#DDEFE2; --sd-sel:#BFE3CB; --sd-sel-ring:var(--g-sudoku);
  --sd-clash-ink:#A4442B; --sd-clash-bg:#F6E1DA; --sd-region:#EEF7F0;
  --sd-cell:var(--g-paper); --sd-thin:var(--g-line2); --sd-thick:var(--ink,#111315);
  --sd-given:var(--ink,#111315); --sd-mine:var(--g-sudoku-ink); --sd-note:var(--ink-2,#3A3D41); --sd-auto:var(--ink-3,#6B6F75);
}
/* on phones the play screen keeps only the site's first header row */
@media (max-width:760px){ html[data-look] body.sudoku .top > .wrap :is(.nav,.sec-actions){display:none} }
.sd-page{width:100%;max-width:1080px;margin-inline:auto;padding:0 8px 40px}
.sd-gamehead{position:relative;display:flex;align-items:center;justify-content:space-between;height:48px;border-bottom:1px solid var(--line)}
.sd-icos{position:relative;display:flex;align-items:center;gap:4px}
.sd-ico{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink,var(--fg));cursor:pointer;text-decoration:none}
.sd-ico svg,.sd-level svg,.sd-pause svg,.sd-undo svg,.sd-erase svg,.sd-hint-x svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sd-ico svg{width:22px;height:22px}
.sd-ico:hover,.sd-ico[aria-expanded="true"]{background:var(--g-tile2)}
.sd-ico:focus-visible,.sd-level:focus-visible,.sd-pause:focus-visible,.sd-undo:focus-visible,.sd-key:focus-visible,.sd-mode button:focus-visible,.sd-menu button:focus-visible{outline:2px solid var(--ink,var(--fg));outline-offset:2px}

/* menus (⋯ and the difficulty picker) overlay the board: nothing below moves */
.sd-menu{position:absolute;z-index:30;top:calc(100% + 4px);inset-inline-end:0;width:208px;padding:6px 0;border-radius:10px;background:var(--g-paper);box-shadow:var(--sh-pop,0 14px 32px -14px rgba(15,20,25,.28),0 0 0 1px var(--line))}
.sd-menu[hidden]{display:none}
.sd-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 16px;border:0;background:none;color:var(--ink,var(--fg));font:400 15px var(--font,var(--ar));text-align:start;cursor:pointer}
.sd-menu button:hover,.sd-menu button:focus-visible{background:var(--g-tile2)}
.sd-menu button.danger{color:var(--g-danger)}
.sd-menu hr{height:1px;margin:6px 0;border:0;background:var(--line)}
.sd-levelmenu{top:44px;inset-inline:50% auto;transform:translateX(50%);width:200px}
.sd-levelmenu button[aria-checked="true"]{font-weight:500;background:var(--g-tile2)}
.sd-levelmenu small{margin-inline-start:auto;font-size:12px}

/* layout: phones stack; ≥1000 board at the start, controls at the end */
.sd-play{display:flex;flex-direction:column;align-items:center}
.sd-boardcol{display:flex;flex-direction:column;align-items:center;width:min(100%,480px)}
.sd-controls{display:flex;flex-direction:column;align-items:center;width:min(100% - 32px,448px)}
@media (min-width:1000px){
  .sd-page{padding-inline:32px}
  .sd-play{flex-direction:row;align-items:flex-start;justify-content:center;gap:40px;padding-top:4px}
  .sd-boardcol{width:520px;flex:none}
  .sd-controls{width:320px;margin-top:56px}
}

/* difficulty + timer row (44px); it also hosts the hint banner */
.sd-status{position:relative;display:grid;width:100%;height:44px;margin:6px 0 4px}
.sd-status > *{grid-area:1 / 1}
.sd-status-in{display:flex;align-items:center;justify-content:center;gap:20px}
.sd-status.hinting .sd-status-in{visibility:hidden}
.sd-level{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--ink,var(--fg));font:500 17px var(--font,var(--ar));cursor:pointer}
.sd-level svg{width:16px;height:16px;stroke-width:2}
.sd-level:hover,.sd-level[aria-expanded="true"]{background:var(--g-tile2)}
.sd-timer{display:inline-flex;align-items:center;gap:4px}
.sd-timer[hidden]{display:none}
.sd-timer b{min-width:3.6ch;font:400 16px var(--font,var(--ar));font-variant-numeric:tabular-nums;color:var(--ink-2,var(--muted));text-align:center}
.sd-pause{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink,var(--fg));cursor:pointer}
.sd-pause svg{width:16px;height:16px;stroke-width:2.4}
.sd-pause:hover{background:var(--g-tile2)}
.sd-pause:disabled{opacity:.35;cursor:default}
/* hint banner: a pill in the same 44px slot (no layout shift) */
.sd-hint{z-index:5;display:flex;align-items:center;gap:6px;min-width:0;height:44px;padding:0 4px 0 0;padding-inline:12px 4px;border-radius:22px;background:var(--g-paper);box-shadow:inset 0 0 0 1px var(--g-sudoku);color:var(--ink,var(--fg))}
.sd-hint[hidden]{display:none}
.sd-hint.bad{box-shadow:inset 0 0 0 1px var(--g-danger)}
.sd-hint.none{box-shadow:inset 0 0 0 1px var(--g-line2)}
.sd-hint-t{flex:1;min-width:0;margin:0;font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sd-hint-acts{display:flex;align-items:center;gap:2px;flex:none}
.sd-why-btn{min-height:32px;padding:0 10px;border:0;border-radius:16px;background:var(--g-tile2);color:var(--ink,var(--fg));font:500 12.5px var(--font,var(--ar));cursor:pointer;white-space:nowrap}
.sd-hint-x{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink,var(--fg));cursor:pointer}
.sd-hint-x svg{width:18px;height:18px;stroke-width:2}
.sd-why{position:absolute;z-index:6;top:6px;inset-inline:6px;padding:12px 14px;border-radius:10px;background:var(--g-paper);box-shadow:var(--sh-pop,0 14px 32px -14px rgba(15,20,25,.28),0 0 0 1px var(--line));font-size:14px;line-height:1.7}
.sd-why.low{top:auto;bottom:6px}
.sd-why[hidden]{display:none}
.sd-why p{margin:0}

/* the board */
.sd-board-wrap{position:relative;width:min(100vw - 16px,480px)}
@media (min-width:1000px){.sd-board-wrap{width:520px}}
.sd-board{display:grid;grid-template-rows:repeat(9,1fr);aspect-ratio:1;width:100%;border:2px solid var(--sd-thick);background:var(--sd-cell);user-select:none;-webkit-user-select:none;transition:opacity .3s}
.sd-board.loading{opacity:.4}
.sd-r{display:grid;grid-template-columns:repeat(9,1fr);min-height:0}
.sd-r:nth-child(3),.sd-r:nth-child(6){border-bottom:2px solid var(--sd-thick)}
.sd-r:not(:nth-child(3)):not(:nth-child(6)):not(:last-child) .sd-cell{border-bottom:1px solid var(--sd-thin)}
.sd-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-right:1px solid var(--sd-thin);border-radius:0;background:var(--sd-cell);color:var(--sd-given);
  font:500 calc(min(100vw - 16px,480px) / 9 * .56)/1 'Onest',var(--font,var(--ar));font-variant-numeric:tabular-nums lining-nums;cursor:pointer;outline:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .1s}
@media (min-width:1000px){.sd-cell{font-size:calc(520px / 9 * .56)}}
.sd-cell:nth-child(3),.sd-cell:nth-child(6){border-right:2px solid var(--sd-thick)}
.sd-cell:last-child{border-right:0}
.sd-cell.given{font-weight:600;color:var(--sd-given)}
.sd-cell.mine{font-weight:500;color:var(--sd-mine)}
.sd-cell.line,.sd-cell.box{background:var(--sd-peer)}
.sd-cell.h-region{background:var(--sd-region)}
.sd-cell.same{background:var(--sd-same)}
.sd-cell.clash{background:var(--sd-clash-bg);color:var(--sd-clash-ink)}
.sd-cell.sel{background:var(--sd-sel);box-shadow:inset 0 0 0 2px var(--sd-sel-ring)}
.sd-board.noting .sd-cell.sel{box-shadow:inset 0 0 0 2px var(--sd-sel-ring),inset 0 0 0 4px var(--sd-sel)}
.sd-board.noting .sd-cell.sel::before{content:'';position:absolute;top:3px;inset-inline-end:3px;width:5px;height:5px;border-radius:50%;background:var(--sd-sel-ring)}
.sd-cell.wrong{background:var(--sd-clash-bg);color:var(--sd-clash-ink);box-shadow:inset 0 0 0 1px var(--g-danger)}
.sd-cell.h-focus{box-shadow:inset 0 0 0 2px var(--g-sudoku)}
.sd-cell.h-target{outline:2px dashed var(--g-sudoku);outline-offset:-4px;z-index:1}
.sd-cell.h-elim::after{content:'';position:absolute;inset:18%;border-radius:2px;background:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--g-sudoku) 22%,transparent) 4px 6px)}
.sd-board .sd-cell:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--sd-sel-ring),inset 0 0 0 4px var(--ink,var(--fg))}
.sd-notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:6%}
.sd-notes i{display:grid;place-items:center;font:400 calc(min(100vw - 16px,480px) / 9 * .26)/1 'Onest',var(--font,var(--ar));font-style:normal;color:var(--sd-note)}
@media (min-width:1000px){.sd-notes i{font-size:calc(520px / 9 * .26)}}
.sd-notes i.a{color:var(--sd-auto);opacity:.6}
.sd-cell.sel .sd-notes i.m{color:var(--ink,var(--fg))}
.sd-board.done .sd-cell{animation:sdWave .7s cubic-bezier(.3,1.3,.5,1) both}
.sd-board.done .sd-r:nth-child(2) .sd-cell{animation-delay:.03s}.sd-board.done .sd-r:nth-child(3) .sd-cell{animation-delay:.06s}.sd-board.done .sd-r:nth-child(4) .sd-cell{animation-delay:.09s}.sd-board.done .sd-r:nth-child(5) .sd-cell{animation-delay:.12s}.sd-board.done .sd-r:nth-child(6) .sd-cell{animation-delay:.15s}.sd-board.done .sd-r:nth-child(7) .sd-cell{animation-delay:.18s}.sd-board.done .sd-r:nth-child(8) .sd-cell{animation-delay:.21s}.sd-board.done .sd-r:nth-child(9) .sd-cell{animation-delay:.24s}
@keyframes sdWave{40%{background:var(--sd-same)}}

/* paused: frosted glass over the board; digits fade so nothing can be read through it */
.sd-paused{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;color:var(--ink,var(--fg));
  background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sd-paused p{margin:0;font-weight:500}
.sd-board-wrap.paused .sd-paused{display:flex}
.sd-board-wrap.paused .sd-board{filter:blur(3px)}
.sd-board-wrap.paused .sd-cell{color:transparent!important}
.sd-board-wrap.paused .sd-notes{visibility:hidden}
.sd-done{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:12px;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:sdIn .4s var(--ease,ease)}
.sd-done[hidden]{display:none}
.sd-done-in{width:min(340px,100%);padding:22px 18px;border-radius:12px;background:var(--g-paper);box-shadow:0 26px 60px -30px rgba(0,0,0,.4),inset 0 0 0 1px var(--line);text-align:center}
.sd-done-in .sd-k{margin:0;font-size:13px;color:var(--g-sudoku-ink);font-weight:500}
.sd-done-in h2{margin:2px 0 6px;font:300 44px/1.1 'Onest',var(--font,var(--ar));font-variant-numeric:tabular-nums}
.sd-done-in p{margin:6px 0;font-size:14.5px;line-height:1.6}
.sd-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
@keyframes sdIn{from{opacity:0}}

/* mode + undo row */
.sd-moderow{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:12px}
.sd-mode{display:inline-flex;height:36px;padding:2px;border-radius:8px;background:var(--g-tile2)}
.sd-mode button{min-width:92px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--ink,var(--fg));font:400 15px var(--font,var(--ar));cursor:pointer;transition:background-color .15s,color .15s}
.sd-mode button[aria-checked="true"]{background:var(--ink,#111315);color:#fff;font-weight:500}
.sd-mode button:disabled{opacity:.45;cursor:default}
.sd-undo{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:72px;height:36px;padding:0 12px;border:0;border-radius:8px;background:var(--g-tile2);color:var(--ink,var(--fg));font:400 14px var(--font,var(--ar));cursor:pointer}
.sd-undo svg{width:16px;height:16px}
.sd-undo:disabled{opacity:.45;cursor:default}
.sd-modetoast{position:absolute;inset-inline:0;top:-2px;margin:auto;width:max-content;max-width:100%;padding:8px 14px;border-radius:999px;background:var(--ink,#111315);color:#fff;font:500 14px var(--font,var(--ar));pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.sd-modetoast.show{opacity:1;transform:none}

/* the keypad: 1–5 / 6–9 ⌫, left to right whatever the page direction */
.sd-pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;margin-top:8px}
.sd-key{position:relative;display:grid;place-items:center;height:52px;padding:0;border:0;border-radius:8px;background:var(--g-tile2);box-shadow:inset 0 -1px 0 var(--g-line2);color:var(--ink,var(--fg));font:500 26px/1 'Onest',var(--font,var(--ar));font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation;transition:background-color .1s,transform .1s}
@media (max-width:359px){.sd-key{height:48px}}
@media (min-width:1000px){.sd-key{height:56px}}
.sd-key:active:not(:disabled){background:var(--g-sand);transform:translateY(1px)}
@media (hover:hover){.sd-key:hover:not(:disabled){background:color-mix(in srgb,var(--g-tile2) 85%,var(--ink,#000))}}
.sd-key.full span{opacity:.35}
.sd-key:disabled{opacity:.4;cursor:default}
.sd-erase svg{width:26px;height:26px}
/* notes mode shows on the keys themselves: small digit top-left + a pencil dot */
.sd-pad.noting .sd-key[data-n]{place-items:start;padding:7px 9px}
.sd-pad.noting .sd-key[data-n] span{font-size:16px}
.sd-pad.noting .sd-key[data-n]::after{content:'';position:absolute;bottom:8px;right:9px;width:4px;height:4px;border-radius:50%;background:var(--g-sudoku)}
.sd-below{margin:16px 0 0}
.sd-below .g-link{color:var(--ink-2,var(--muted))}
.sd-archnote{margin:4px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3,var(--muted));text-align:center}
.sd-archnote[hidden]{display:none}
.sd-who{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 10px;margin:4px 0 0;font-size:12px;color:var(--ink-3,var(--muted))}
.sd-who .g-link{font-size:12px;min-height:32px;text-decoration:underline;text-underline-offset:3px}
.sd-save{margin:0;font-size:11.5px;color:var(--ink-3,var(--muted));min-height:16px}

.sd-toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:90;max-width:calc(100vw - 32px);padding:11px 18px;border-radius:10px;background:var(--ink,#111315);color:var(--bg,#fff);font:500 14px var(--font,var(--ar));box-shadow:0 18px 40px -20px rgba(0,0,0,.4);transition:opacity .3s,transform .3s}
.sd-toast.out{opacity:0;transform:translate(-50%,8px)}
@media (prefers-reduced-motion:reduce){.sd-board.done .sd-cell,.sd-done{animation:none}.sd-modetoast,.sd-key,.sd-cell{transition:none}.sd-key:active:not(:disabled){transform:none}}

/* dark: dark.css (12u) — the site's look, or this page's own setting (look.js); the board stays white paper by default */
/* r11 review: comfortable touch targets */
.sd-ico,.sd-pause{width:44px;height:44px}
.sd-mode{height:44px}
.sd-undo{height:44px}
.sd-hint-x{width:44px;height:44px}
.sd-who .g-link{min-height:44px;display:inline-flex;align-items:center}
/* 12u: Sudoku's own look, beside the help icon: تلقائي (مثل الموقع) → فاتح → داكن (look.js applies it before paint) */
.sd-theme svg g{display:none}
.sd-theme[data-t="auto"] .t-auto,.sd-theme[data-t="light"] .t-light,.sd-theme[data-t="dark"] .t-dark{display:inline}