/* PlayCalm Picture Logic («صور الأرقام», temporary name). Theme colors only (main.css variables), day and night. */
.sd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 0; }
.sd-head h1 { font-size: calc(28px * var(--fs, 1)); }
.ng-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 20px; margin: 16px 0; align-items: start; }
.ng-board-card { position: relative; padding: 8px; --pc-phone-min: .6; }   /* phones: how small the board may get (core.js) */
/* a finished picture keeps room for the end card over it */
.ng-board-card:has(> .pc-end) { min-height: min(440px, 92vh); display: grid; place-items: center; }

/* ---------- The board ----------
   The numbers sit in their own column (left) and row (top), like on paper; the board reads left to right in both
   languages so a row's numbers stay in their order. --cell is one square: the room divided by the squares plus the space
   the numbers need (--rc numbers beside the rows, --cc above the columns, a little more with bigger text). */
.ng-board {
  --fk: min(var(--fs, 1), 1.15);                                   /* how much bigger text makes the numbers */
  --cw: calc(var(--n) + var(--rc) * .62 * var(--fk) + .6);           /* the board's width in squares */
  --ch: calc(var(--n) + var(--cc) * .62 * var(--fk) + .6);           /* and its height */
  --cmin: 14px; --cmax: calc(46px * var(--fs, 1));
  --cell: clamp(var(--cmin), calc((min(100vw, 1180px) - 52px) / var(--cw)), var(--cmax));
  --ng-line: var(--border); --ng-group: var(--border-strong); --ng-frame: var(--text-2); --ng-fill: var(--primary);
  position: relative; display: grid; grid-template-columns: auto repeat(var(--n), var(--cell)); width: max-content; margin: 0 auto;
  direction: ltr; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  /* two fingers zoom the page (owner 2026-10-22 10:18: pinch zoom on every grid board); one finger paints squares */
  touch-action: pinch-zoom;
}
/* Kids Corner: big squares (48px or more on phones from 360px wide) */
:root[data-kids="1"] .ng-board { --cmin: 40px; --cmax: 64px; }
.ng-row { display: contents; }
.ng-corner { min-width: 0; }
.ng-cc, .ng-rc { color: var(--text); font: 700 max(10px, calc(var(--cell) * .48 * var(--fk))) / 1.2 "Plus Jakarta Sans", var(--font-head); font-variant-numeric: tabular-nums;
  border-radius: 6px; transition: color .2s, opacity .2s; }
.ng-cc { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 2px 0 calc(var(--cell) * .14); }
.ng-cc span { display: block; min-height: calc(var(--cell) * .58 * var(--fk)); line-height: calc(var(--cell) * .58 * var(--fk)); }
.ng-rc { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--cell) * .18); padding: 0 calc(var(--cell) * .2) 0 4px; }
.ng-rc span { min-width: calc(var(--cell) * .42 * var(--fk)); text-align: center; }
/* a line whose filled squares already give its numbers: the numbers rest in a softer color (never a judgment) */
.ng-cc.done, .ng-rc.done { color: var(--text-2); opacity: .5; }
.ng-cc.on-line, .ng-rc.on-line { background: var(--accent-soft); color: var(--primary); opacity: 1; }

.ng-cell { width: var(--cell); height: var(--cell); padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer; border-radius: 0;
  background: var(--card); border: 0; border-right: 1px solid var(--ng-line); border-bottom: 1px solid var(--ng-line); }
.ng-rc + .ng-cell { border-left: 2px solid var(--ng-frame); }
.ng-cell:last-child { border-right: 2px solid var(--ng-frame); }
.ng-row:nth-child(2) .ng-cell { border-top: 2px solid var(--ng-frame); }
.ng-row:last-child .ng-cell { border-bottom: 2px solid var(--ng-frame); }
.ng-cell.gx { border-right: 2px solid var(--ng-group); }            /* a firmer line every five squares, to count easily */
.ng-cell.gy { border-bottom: 2px solid var(--ng-group); }
.ng-cell.on-line { background: var(--accent-soft); }
.ng-cell[data-v="1"] { background: var(--ng-fill); }
.ng-x { width: 58%; height: 58%; fill: none; stroke: var(--text-2); stroke-width: 1.3; stroke-linecap: round; }
.ng-cell:focus-visible { outline: 3px solid var(--star); outline-offset: -3px; position: relative; z-index: 1; }   /* keyboard only */
.ng-cell.hint { box-shadow: inset 0 0 0 3px var(--star); animation: ngPulse 1s ease-in-out 3; position: relative; z-index: 1; }
@keyframes ngPulse { 50% { transform: scale(1.12); } }

/* the finished picture: the grid lines and marks go, the squares take the picture's own calm colors (fading in) */
.ng-board.is-done .ng-cell { cursor: default; border-color: transparent; background: transparent; }
.ng-board.is-done .ng-cell[data-v="1"] { background: var(--pc, var(--ng-fill)); }
.ng-board.is-done :is(.ng-cc, .ng-rc) { opacity: .35; }
.ng-board.is-revealing .ng-cell { animation: ngLines 1.4s ease both; }
.ng-board.is-revealing .ng-cell[data-v="1"] { animation: ngReveal 1.4s ease .1s both; }
@keyframes ngReveal { from { background: var(--ng-fill); } }
@keyframes ngLines { from { border-color: var(--ng-line); } }
@media (prefers-reduced-motion: reduce) { .ng-cell.hint, .ng-board.is-revealing .ng-cell { animation: none !important; } }
html.pc-reduce-motion .ng-cell.hint, html.pc-reduce-motion .ng-board.is-revealing .ng-cell { animation: none !important; }

/* the picture on the end card, small */
.ng-pic { margin: 0 auto 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ng-thumb { width: 72px; height: 72px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); padding: 4px; box-sizing: content-box; }
.ng-pic figcaption { color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }
.ng-pic figcaption b { color: var(--text); }
.ng-best { margin: 0 0 8px; color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }

/* ---------- Clock pill and pause (as in Sudoku, Khalid 08:18) ---------- */
.ng-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; min-width: 48px; padding: 0 12px; flex: none;
  border: 2px solid var(--border-strong); border-radius: 999px; background: var(--card); color: var(--text); box-shadow: 0 2px 0 var(--border-strong);
  cursor: pointer; direction: ltr; font: 700 calc(19px * min(var(--fs, 1), 1.1)) / 1 "Plus Jakarta Sans", sans-serif; font-variant-numeric: tabular-nums; }
.ng-pill svg { width: 20px; height: 20px; flex: none; color: var(--primary); }
.ng-pill b { font-weight: 700; color: var(--text-2); }
.ng-pill[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--primary); }
.ng-pill[disabled] { opacity: .5; cursor: default; }
@media (max-width: 399px) { .ng-pill { padding: 0 8px; gap: 4px; } }
@media (max-width: 379px) { .ng-pill { padding: 0 6px; font-size: 17px; } }
@media (max-width: 359px) { .ng-pill { padding: 0 8px; gap: 4px; font-size: 17px; } }
.ng-status:empty { display: none; }
.ng-status { display: flex; justify-content: flex-end; margin-top: 10px; }
.ng-paused { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--card); border-radius: inherit; font: 800 calc(22px * var(--fs, 1)) var(--font-head); text-align: center; padding: 12px; }
.ng-paused p { margin: 0; }
.ng-paused .pc-logo-pause { margin-bottom: 8px; }
.ng-paused .btn svg { width: 20px; height: 20px; }

/* ---------- Tools: Fill / Mark empty (what a tap does), Undo, Hint — icons only, names for screen readers (Khalid 12:18) ---------- */
.ng-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 10px; }
.ng-modes { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--raised); border: 1px solid var(--border); }
.ng-tool { --tool: 56px; display: grid; place-items: center; width: max(48px, var(--tool)); height: max(48px, var(--tool)); padding: 0; flex: none;
  border: 0; border-radius: 50%; background: var(--secondary); color: var(--primary); cursor: pointer; }
.ng-ico { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.ng-ico svg { width: 48%; height: 48%; }
/* the chosen mode: the whole button turns green (#245445, a light icon), screen readers hear "pressed" */
.ng-controls { --ng-tool-on: #245445; --ng-tool-on-ink: #FDFBF7; }
.ng-tool[aria-pressed="true"] { background: var(--ng-tool-on); color: var(--ng-tool-on-ink); }
.ng-tool[disabled] { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .ng-tool:not([disabled]):hover { filter: brightness(.96); } }

.side { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.buddy { max-width: 200px; margin: 0 auto; width: 100%; }
.bubble { background: var(--raised); border: 2px solid var(--border); border-radius: 14px; padding: 10px 14px; font-weight: 600; min-height: 56px; }
.stat { color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }

@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 479px), (max-width: 699px) { .ng-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .main-ng { padding: 0 8px; } .ng-board-card { padding: 6px; } }

/* Phones (main.css "Phones: everything needed to play"): the squares get smaller only when the tools would otherwise fall
   below the screen (core.js sets --pc-phone-bw); two fingers zoom in on big boards (owner 2026-10-22 10:18) */
@media (max-width: 599px) and (min-height: 480px) {
  :root:not([data-focus="on"]) .ng-board { --cell: clamp(var(--cmin), min((100vw - 36px) / (var(--cw) - .3), (var(--pc-phone-bw, 100vw) - 22px) / (var(--cw) - .3)), var(--cmax)); }
  :root:not([data-focus="on"]) .ng-board-card { min-width: min-content; }
  :root:not([data-focus="on"]) .ng-tools { margin-top: 8px; }
}
/* Wide screens (main.css "Wide screens to play"): the board as large as the room allows, the tools in the side column */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 480px) {
  :root:not([data-focus="on"]) .ng-layout.pc-wide .ng-board { --cmax: 60px; --cell: clamp(var(--cmin), min((var(--pc-h) - 28px) / var(--ch), (var(--pc-w) - 28px) / var(--cw)), var(--cmax)); }
  :root:not([data-focus="on"]) .ng-layout.pc-wide .ng-tools { justify-content: flex-start; margin-top: 0; }
}
/* short sideways phones */
@media (orientation: landscape) and (max-height: 479px) {
  :root:not([data-focus="on"]) .ng-board { --cell: clamp(var(--cmin), calc((100dvh - 40px) / var(--ch)), var(--cmax)); }
}

/* Full screen for play (shared mode in core.js / main.css): the board as large as the screen allows, the tools below
   (upright) or beside (sideways) */
:root[data-focus="on"] .ng-board-card { padding: 0; border: 0; background: none; box-shadow: none; align-self: center; }
/* (the numbers' column takes a little less than --cw counts, so the whole width can go to the board here) */
:root[data-focus="on"] .ng-board { --cmax: 72px; --cell: clamp(var(--cmin), min((100cqw - 6px) / (var(--cw) - .55), (var(--pc-fy) - 170px) / var(--ch)), var(--cmax)); }
:root[data-focus="on"] .ng-controls .ng-status { margin-top: 0; }
@media (orientation: landscape) {
  :root[data-focus="on"] .ng-board { --cell: clamp(var(--cmin), min((60cqw - 12px) / var(--cw), (var(--pc-fy) - 12px) / var(--ch)), var(--cmax)); }
}

/* Accessibility (docs/team/A11Y.md) */
/* color-blind support: the hint square also gets a dashed ring; the current line's numbers are underlined */
html.pc-cb .ng-cell.hint { outline: 3px dashed var(--text); outline-offset: -5px; }
html.pc-cb :is(.ng-cc, .ng-rc).on-line span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* high contrast: firmer lines, solid black / white fill */
html.pc-contrast .ng-board { --ng-line: var(--border-strong); --ng-group: var(--text); --ng-frame: var(--text); --ng-fill: var(--text); }
html.pc-contrast .ng-x { stroke: var(--text); stroke-width: 1.8; }
@media print {
  .site-header, .site-footer, .no-print, .ng-controls, .side { display: none !important; }
  .ng-board { --ng-fill: #000 !important; --ng-line: #777 !important; --ng-frame: #000 !important; --ng-group: #000 !important; }
}