/* «سودوكو الجريدة»: the page is the 3D paper; the buttons are newsprint lying on the table.
   No letter-spacing on Arabic. Motion is transform and opacity, short, and none with reduced motion. */
:root{--paper:#f3ecdc;--paper2:#fbf7ec;--ink:#171411;--ink2:#5b5248;--red:#b3261e;--brass:#c9973f;--brass2:#a87a2b;--wood:#24160d;
  --news:Amiri,serif;--body:"Markazi Text",Amiri,serif;--ruqaa:"Aref Ruqaa",Amiri,serif;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--wood);color:var(--ink);font-family:var(--body);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;-webkit-appearance:none;appearance:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#stage,#stage canvas{position:fixed;inset:0;display:block;touch-action:none}
#stage canvas{width:100%!important;height:100%!important}
.vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(130% 100% at 50% 42%,transparent 55%,rgba(20,10,4,.55))}
.grainy{background-color:var(--paper);background-image:radial-gradient(rgba(60,40,20,.05) 1px,transparent 1.2px);background-size:3px 3px}

/* the bar: newsprint chips on the table */
.bar{position:fixed;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(var(--st) + 8px) calc(var(--sr) + 10px) 0 calc(var(--sl) + 10px);pointer-events:none}
.bar>*{pointer-events:auto}
.back,.menuBtn,.clock{min-height:44px;display:inline-flex;align-items:center;gap:4px;padding:0 14px;background:var(--paper);color:var(--ink);
  font:700 17px/1 var(--news);text-decoration:none;box-shadow:0 8px 16px -8px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.4) inset}
.back{transform:rotate(1.2deg);padding-inline-start:8px}
.back .ic{width:20px;height:20px}
.menuBtn{transform:rotate(-1.4deg);background:var(--brass);color:#1c130a}
.menuBtn .ic{width:20px;height:20px}
.clock{font:700 20px/1 var(--news);min-width:84px;justify-content:center;background:rgba(23,20,17,.82);color:var(--paper);border-radius:999px;box-shadow:0 6px 14px -6px rgba(0,0,0,.7)}
.clock .ic{display:none;width:22px;height:22px}
.clock.off{min-width:44px;padding:0 10px;opacity:.85}
.clock.off .ic{display:block}
.clock.off #clockText{display:none}
.barStart{display:flex;gap:8px;align-items:center}
/* a narrow phone in class mode: «كل الألعاب» as its arrow, so the hide button fits */
@media (max-width:379px){body.class-mode .back .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}body.class-mode .back{padding:0 10px}}
.hideBtn{min-width:44px;min-height:44px;display:grid;place-items:center;background:var(--paper);color:var(--ink);box-shadow:0 8px 16px -8px rgba(0,0,0,.75);transform:rotate(1deg)}
body:not(.class-mode) .hideBtn{display:none}
.back:active,.menuBtn:active{transform:scale(.96)}

/* the tray: a strip of newsprint with the tools and the digits */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:3;padding:12px calc(var(--sr) + 8px) calc(var(--sb) + 10px) calc(var(--sl) + 8px);
  background:var(--paper);background-image:radial-gradient(rgba(60,40,20,.05) 1px,transparent 1.2px);background-size:3px 3px;
  box-shadow:0 -14px 30px -12px rgba(0,0,0,.65);display:flex;flex-direction:column;gap:8px}
/* a torn top edge */
.tray::before{content:"";position:absolute;left:0;right:0;top:-7px;height:8px;background:inherit;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 8V5l3-2 4 2 3-3 5 3 4-2 3 3 5-4 3 3 4-2 3 2 3-1v6z'/%3E%3C/svg%3E") 0 0/40px 8px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 8V5l3-2 4 2 3-3 5 3 4-2 3 3 5-4 3 3 4-2 3 2 3-1v6z'/%3E%3C/svg%3E") 0 0/40px 8px repeat-x}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tools button{position:relative;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink);font:700 16px/1.1 var(--news);border-radius:10px}
.tools button:active{background:rgba(0,0,0,.06)}
.tools button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.tools .sw{position:absolute;top:6px;inset-inline-start:calc(50% + 16px);width:9px;height:9px;border-radius:50%;border:2px solid currentColor;opacity:.5}
.tools [aria-pressed=false] .sw{display:none}
.tools [aria-pressed=true] .sw{background:var(--brass);border-color:var(--brass);opacity:1}
.tools button:disabled{opacity:.35}
.keypad{display:grid;grid-template-columns:repeat(9,1fr);gap:3px}
.keypad button{position:relative;min-height:54px;display:grid;place-items:center;background:var(--paper2);border:1.5px solid var(--ink);color:var(--ink);font:700 30px/1 var(--news);padding-bottom:4px;transition:transform .1s}
.keypad button::before{content:"";position:absolute;inset:-6px -3px}
.keypad button:active{transform:translateY(1px) scale(.96);background:#fff}
.keypad button small{position:absolute;bottom:2px;inset-inline-end:4px;font:600 11px/1 var(--body);color:var(--ink2)}
.keypad button.out{opacity:.32;border-style:dashed}
/* notes: the keys turn to pencil */
body.noting .keypad button{font:700 25px/1 var(--ruqaa);color:#4a4c52;border-color:#8e8a82;border-style:dashed}

/* landscape screens: the tray stands beside the paper as a clipping, digits in a 3×3 block */
@media (min-width:900px) and (min-aspect-ratio:23/20){
  .tray{left:calc(var(--sl) + 28px);right:auto;top:50%;bottom:auto;width:min(330px,28vw,calc(100dvh - 290px));transform:translateY(-46%) rotate(-.8deg);
    padding:18px 18px 20px;box-shadow:0 26px 50px -20px rgba(0,0,0,.8);gap:14px}
  .tray::before{display:none}
  .keypad{grid-template-columns:repeat(3,1fr);gap:8px;order:-1}
  .keypad button{min-height:0;aspect-ratio:1;font-size:clamp(28px,2.6vw,44px)}
  .keypad button small{font-size:13px;bottom:5px;inset-inline-end:7px}
  body.noting .keypad button{font-size:clamp(26px,2.4vw,40px)}
  .tools{grid-template-columns:repeat(2,1fr);gap:8px}
  .tools button{flex-direction:row;gap:8px;min-height:52px;font-size:16px;border:1.5px solid rgba(0,0,0,.18)}
  .tools .sw{position:static;margin-inline-start:2px}
  .bar{padding-left:calc(var(--sl) + 28px);padding-right:calc(var(--sr) + 28px);padding-top:calc(var(--st) + 18px)}
  .clock{position:fixed;left:calc(var(--sl) + 28px + min(330px,28vw) / 2);transform:translateX(-50%);top:calc(var(--st) + 18px);font-size:24px}
}
/* phones on their side and other short, wide windows: a compact tray beside the paper,
   its keys sized from the height so the grid keeps most of the screen */
@media (orientation:landscape) and (max-height:500px){
  .tray{left:calc(var(--sl) + 10px);right:auto;top:calc(var(--st) + 60px);bottom:auto;width:auto;transform:none;padding:10px;gap:8px;box-shadow:0 18px 36px -14px rgba(0,0,0,.8)}
  .tray::before{display:none}
  .keypad{--k:clamp(40px,calc((100dvh - var(--st) - 214px) / 3),64px);grid-template-columns:repeat(3,var(--k));gap:6px;order:-1}
  .keypad button{min-height:0;height:var(--k);width:var(--k);font-size:calc(var(--k) * .5);padding-bottom:2px}
  .keypad button::before{inset:-3px}
  body.noting .keypad button{font-size:calc(var(--k) * .46)}
  .tools{grid-template-columns:repeat(2,1fr);gap:6px}
  .tools button{flex-direction:row;min-height:44px;gap:4px;padding:0 6px;font-size:14px;border:1.5px solid rgba(0,0,0,.18)}
  .tools .ic{width:20px;height:20px}
  .tools .sw{position:static}
  .bar{padding-top:calc(var(--st) + 8px)}
  .clock{position:static;transform:none;font-size:20px}
}
/* TVs and big screens: read from the sofa */
@media (min-width:1700px) and (min-aspect-ratio:23/20){
  .tray{width:440px;padding:24px}
  .clock{left:calc(var(--sl) + 28px + 220px);font-size:32px;min-height:60px;padding:0 24px}
  .back,.menuBtn{font-size:30px;min-height:64px;padding:0 24px}
  .back .ic,.menuBtn .ic{width:28px;height:28px}
  .keypad button small{font-size:18px}
  .tools button{font-size:26px;min-height:72px}
  .tools .ic{width:30px;height:30px}
  #toast{font-size:28px;top:calc(var(--st) + 100px)}
}
/* tablets upright: a bigger row of digits */
@media (min-width:700px) and (max-aspect-ratio:23/20){
  .tray{padding-left:calc(var(--sl) + 40px);padding-right:calc(var(--sr) + 40px);padding-top:16px}
  .keypad{gap:8px}
  .keypad button{min-height:72px;font-size:34px}
  .tools button{min-height:58px;font-size:16px}
}

/* toast: a slip of paper under the bar */
#toast{position:fixed;top:calc(var(--st) + 62px);left:50%;z-index:6;max-width:min(92vw,520px);padding:10px 16px;background:var(--paper);color:var(--ink);
  font:600 17px/1.4 var(--body);text-align:center;box-shadow:0 12px 24px -10px rgba(0,0,0,.7);opacity:0;transform:translate(-50%,-8px) rotate(-.6deg);transition:opacity .2s,transform .2s;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0) rotate(-.6deg)}

/* sheets */
.sheet{position:fixed;inset:0;z-index:8;display:flex;align-items:flex-end;justify-content:center;background:rgba(15,8,3,.5)}
.card{width:100%;max-width:520px;max-height:calc(100% - var(--st) - 24px);overflow-y:auto;background:var(--paper);background-image:radial-gradient(rgba(60,40,20,.05) 1px,transparent 1.2px);background-size:3px 3px;
  padding:6px 18px calc(var(--sb) + 18px);display:flex;flex-direction:column;gap:10px;box-shadow:0 -20px 40px -10px rgba(0,0,0,.6);animation:up .22s ease-out}
@media (min-width:700px){.sheet{align-items:center}.card{padding-bottom:22px;transform:rotate(-.5deg)}}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.chead{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:2px solid var(--ink)}
.chead b{font:700 22px/1 var(--news)}
.x{width:48px;height:48px;display:grid;place-items:center;margin-inline-end:-10px}
.row-label{font:700 15px/1 var(--news);color:var(--ink2);margin-top:6px}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.levels button{min-height:52px;border:1.5px solid var(--ink);background:var(--paper2);font:700 17px/1.1 var(--news);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px}
.levels .daily{grid-column:1/-1;flex-direction:row;gap:10px;background:var(--ink);color:var(--paper)}
.levels .daily small{font:600 15px/1 var(--body);opacity:.8}
.levels button.sure,.mitem.sure{background:var(--red);color:#fff;border-color:var(--red)}
.seg{display:flex;align-items:center;gap:6px;min-height:52px;border-bottom:1px dotted rgba(0,0,0,.2)}
.seg span{flex:1;font:700 17px/1 var(--news)}
.seg button{min-height:44px;padding:0 12px;border:1.5px solid var(--ink);font:600 16px/1 var(--body);background:var(--paper2)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.switch{display:flex;align-items:center;gap:10px;min-height:52px;text-align:start;border-bottom:1px dotted rgba(0,0,0,.2)}
.switch b{font:700 17px/1 var(--news)}
.switch small{flex:1;font:500 15px/1.2 var(--body);color:var(--ink2)}
.switch b:last-of-type{flex:1}
.switch small+i{margin-inline-start:0}
.switch i{width:46px;height:28px;border-radius:99px;background:#cfc6b3;position:relative;flex:none;transition:background .15s}
.switch i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.switch[aria-pressed=true] i{background:var(--ink)}
.switch[aria-pressed=true] i::after{transform:translateX(-18px)}
.mitem{display:flex;align-items:center;gap:10px;min-height:52px;font:700 17px/1 var(--news);text-align:start;border-bottom:1px dotted rgba(0,0,0,.2)}
.mitem .q{width:24px;text-align:center;font:700 20px/1 var(--news)}
.mitem small{margin-inline-start:auto;font:500 14px/1 var(--body);color:var(--ink2)}
@media (hover:none){.mitem small{display:none}}
.mitem.quiet{font:600 16px/1 var(--body);color:var(--ink2);border:0;justify-content:center;text-decoration:underline}
.howto{margin:2px 0;padding-inline-start:26px;font:500 19px/1.55 var(--body);list-style:arabic-indic}
.how-goal{margin:8px 0 0;font:500 19px/1.5 var(--body)}
.how-goal b{font:700 17px/1 var(--news)}
.how-note{margin:0;font:500 17px/1.45 var(--body);color:var(--ink2)}
.howto li{margin-bottom:6px}
.btn{min-height:54px;border-radius:999px;padding:0 26px;font:700 19px/1 var(--news);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.ghost{border:2px solid var(--ink)}

/* the finish */
.finish{align-items:stretch;text-align:center;padding-top:18px}
.dhead{position:relative;display:flex;justify-content:center;align-items:center;min-height:52px}
.dhead .x{position:absolute;top:-6px;inset-inline-end:0}
.finish h2{margin:0;font:700 46px/1.1 var(--ruqaa);color:var(--red)}
.levels.again{grid-template-columns:repeat(4,1fr)}
.finish .row-label{text-align:start}
@media (max-width:699px){.dshot{display:none}}
.dsub{margin:0;font:600 18px/1.4 var(--body);color:var(--ink2)}
.dstats{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.dstats div{padding:8px 4px;display:flex;flex-direction:column;gap:4px}
.dstats div+div{border-inline-start:1px solid rgba(0,0,0,.2)}
.dstats small{font:600 14px/1 var(--body);color:var(--ink2)}
.dstats b{font:700 20px/1.2 var(--news)}
.dshot{width:100%;max-height:34vh;object-fit:contain;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nogl{position:fixed;inset:0;z-index:9;display:grid;place-items:center;padding:20px;background:var(--wood)}
.nogl .card{max-width:420px;padding:22px;text-align:center;animation:none}
.nogl h2{margin:0;font:700 26px/1.3 var(--news)}
.nogl p{margin:0;font:500 19px/1.5 var(--body)}
.nogl .btn{text-decoration:none}
/* the share picture of the page itself (tools/sudoku/og.mjs): just the paper */
body.og .bar,body.og .tray,body.og #toast{display:none}
/* «إخفاء سريع»: a lecture page over everything; its title brings the game back */
.notes{position:fixed;inset:0;z-index:100;background:repeating-linear-gradient(180deg,#fff 0 31px,#c9daf0 31px 32px);color:#222;font-family:system-ui,-apple-system,'SF Arabic','Segoe UI',Tahoma,sans-serif;padding:calc(var(--st) + 24px) calc(var(--sr) + 24px) 24px calc(var(--sl) + 24px);overflow:auto;-webkit-user-select:text;user-select:text}
.notes::before{content:'';position:fixed;top:0;bottom:0;right:calc(var(--sr) + 52px);width:1.5px;background:#f1a6a6}
.ntitle{font-size:22px;font-weight:700;min-height:44px;color:#222;text-align:right;padding-inline-end:40px}
.nmeta{font-size:13px;color:#777;line-height:32px;padding-inline-end:40px}
.nlist{margin:0;padding:0 40px 0 0;font-size:16px;line-height:32px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
body.class-mode *{animation:none!important;transition:none!important}