/* PlayCalm «حدائق الدومينو / Domino Gardens». Garden-bed tints from the PlayCalm palette; every bed also has its own
   pattern, a firm edge and a leaf with its condition, so nothing depends on color alone. Day, night, high contrast. */
/* digits: Albert Sans (SIL OFL 1.1), served from this site (assets/fonts/CREDITS.md) */
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0020, U+0030-0039;
  src: url("../../assets/fonts/albert-sans-digits-500.woff2") format("woff2"); }
:root {
  --dg0: #D9EBE1; --dg0-line: #2D6B4E;   /* sage */
  --dg1: #DAE8F2; --dg1-line: #1E4B68;   /* water blue */
  --dg2: #F3DFD2; --dg2-line: #784020;   /* clay */
  --dg3: #F4E6C8; --dg3-line: #6B4A10;   /* straw gold */
  --dg4: #E6DCF2; --dg4-line: #5A3F7A;   /* lavender */
  --dg5: #F5DCE4; --dg5-line: #8A2F4F;   /* rose */
  --dg-plain: #FFFFFF; --dg-grid: #CFC8B8; --dg-edge-line: #435049;
  --dg-tile: #FFFDF6; --dg-tile-edge: #435049; --dg-pip: #1C2420; --dg-badge-ink: #FFFFFF;
  --dg-pat: .3;
}
:root[data-theme="dark"] {
  --dg0: #20412F; --dg0-line: #84C7A8;
  --dg1: #1E3A50; --dg1-line: #8CC0E4;
  --dg2: #47301F; --dg2-line: #E4A582;
  --dg3: #433817; --dg3-line: #E5C178;
  --dg4: #362A4E; --dg4-line: #C2A8E3;
  --dg5: #4A2839; --dg5-line: #E7A3B8;
  --dg-plain: #26302C; --dg-grid: #3A4843; --dg-edge-line: #B8B3A7;
  --dg-tile: #ECE6D6; --dg-tile-edge: #0F1412; --dg-pip: #1C2420; --dg-badge-ink: #141917;
  --dg-pat: .35;
}
/* high contrast: firm black (or white) edges and rims, stronger patterns, leaves in the text color */
html.pc-contrast:not([data-theme="dark"]) { --dg-grid: #6B6B6B; --dg-edge-line: #000000; --dg-tile-edge: #000000; --dg-pip: #000000; --dg-pat: .55;
  --dg0-line: #0B3D27; --dg1-line: #0B2D44; --dg2-line: #4A2208; --dg3-line: #3D2900; --dg4-line: #34204F; --dg5-line: #5A1530; }
html.pc-contrast[data-theme="dark"] { --dg-grid: #9A9A9A; --dg-edge-line: #FFFFFF; --dg-tile: #FFFFFF; --dg-tile-edge: #000000; --dg-pip: #000000; --dg-pat: .6;
  --dg0-line: #B5F0D2; --dg1-line: #BFE3FF; --dg2-line: #FFD0B3; --dg3-line: #FFE29A; --dg4-line: #E2CCFF; --dg5-line: #FFC9DA; }
html.pc-cb { --dg-pat: .5; }   /* color-blind support: the patterns speak louder */

.dg-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 20px; margin: 12px 0 20px; align-items: start; }
.dg-play { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.dg-play > .pc-focus-row { flex: 1 1 100%; margin: 8px 0; }
.dg-play > .pc-play-board { flex: 1 1 100%; }
.dg-play > .pc-play-ctrl { flex: 1 1 100%; }

/* the board: one square per cell; the garden picture underneath, the dominoes and leaves on top, buttons between */
.dg-board-card { padding: 8px; }
/* the cell: as wide as the phone allows, but never so tall that the dominoes and tools below fall off the first screen —
   --pc-avail (core.js) is the room from the board's top down, --dg-ctrl (domino.js) the height of the controls under it;
   wider fallback fonts (Linux CI, no web fonts) make those rows taller, and the board then gives way */
.dg-board { --cell: min(calc((100vw - 52px) / (var(--cols) + .7)), 84px, max(36px, calc((var(--pc-avail, 640px) - var(--dg-ctrl, 250px) - 30px) / (var(--rows) + .7))));
  position: relative; margin: 0 auto;
  width: calc(var(--cell) * (var(--cols) + .7)); height: calc(var(--cell) * (var(--rows) + .7)); user-select: none; -webkit-user-select: none; }
.dg-art, .dg-top { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dg-top { z-index: 2; }
.dg-grid { position: absolute; inset: calc(var(--cell) * .35); z-index: 3; display: grid; direction: ltr;
  grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--rows), var(--cell)); }
.dg-row { display: contents; }
.dg-cell { appearance: none; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 8px; position: relative; min-width: 0; min-height: 0; }
.dg-cell:focus-visible { outline: 3px solid var(--focus-ring, var(--star)); outline-offset: -3px; }
.dg-cell.anchor { box-shadow: inset 0 0 0 4px var(--star); background: color-mix(in srgb, var(--star) 18%, transparent); }
.dg-cell.anchor::after { content: "1"; content: "1" / ""; position: absolute; inset-inline-start: 6px; bottom: 4px; font: 800 calc(13px * var(--fs, 1)) "Plus Jakarta Sans", sans-serif; color: var(--gold-text); }
.dg-cell.target::before { content: ""; position: absolute; inset: 18%; border: 3px dashed var(--star); border-radius: 50%; }
.dg-board.won .dg-cell { cursor: default; }

/* garden picture (SVG, in cell units) */
.dg-tint.dg-c0 { fill: var(--dg0); } .dg-tint.dg-c1 { fill: var(--dg1); } .dg-tint.dg-c2 { fill: var(--dg2); }
.dg-tint.dg-c3 { fill: var(--dg3); } .dg-tint.dg-c4 { fill: var(--dg4); } .dg-tint.dg-c5 { fill: var(--dg5); }
.dg-pat .dg-pl { fill: none; stroke-width: .024; stroke-linecap: round; opacity: var(--dg-pat); }
.dg-pat .dg-pd { opacity: var(--dg-pat); }
.dg-c0 { --dgl: var(--dg0-line); } .dg-c1 { --dgl: var(--dg1-line); } .dg-c2 { --dgl: var(--dg2-line); }
.dg-c3 { --dgl: var(--dg3-line); } .dg-c4 { --dgl: var(--dg4-line); } .dg-c5 { --dgl: var(--dg5-line); }
.dg-pat .dg-pl { stroke: var(--dgl); } .dg-pat .dg-pd { fill: var(--dgl); }
.dg-plain { fill: var(--dg-plain); }
.dg-cellline { fill: none; stroke: var(--dg-grid); stroke-width: .02; }
.dg-rim { fill: none; stroke: var(--dgl); stroke-width: .12; opacity: .85; }
.dg-rim.off { stroke-dasharray: .14 .09; }   /* a bed that needs another look: its rim breaks into dashes (and its leaf shows !) */
.dg-edge { fill: none; stroke: var(--dg-edge-line); stroke-width: .035; stroke-linecap: square; }
/* dominoes */
.dg-body { fill: var(--dg-tile); stroke: var(--dg-tile-edge); stroke-width: .045; }
.dg-mid { stroke: var(--dg-tile-edge); stroke-width: .03; stroke-linecap: round; }
.dg-pip { fill: var(--dg-pip); }
.dg-top .dg-dom { filter: drop-shadow(0 .03px .02px rgba(28, 36, 32, .25)); }
.dg-dom.sel .dg-body { stroke: var(--star); stroke-width: .09; }
.dg-dom.glow .dg-body { stroke: var(--gold-text); stroke-width: .09; stroke-dasharray: .12 .06; }
/* leaves with the condition, and the ✓ / ! mark */
.dg-leaf { fill: var(--dgl); stroke: var(--card); stroke-width: .04; }
.dg-bt { font-family: "Albert Sans", "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; fill: var(--dg-badge-ink); text-anchor: middle; dominant-baseline: central; direction: ltr; unicode-bidi: bidi-override; }
.dg-mark circle { stroke: var(--card); stroke-width: .035; }
.dg-mark path { fill: none; stroke: var(--card); stroke-width: .05; stroke-linecap: round; stroke-linejoin: round; }
.dg-mark.ok circle { fill: var(--ok-ink); }
.dg-mark.off circle { fill: var(--err-ink); }
html.pc-contrast .dg-leaf { stroke-width: .05; }

/* the dominoes still to place */
.dg-ctrl { margin-top: 8px; }
.dg-tray { --slot: max(52px, var(--tap, 48px)); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dg-piece, .dg-slot { width: var(--slot); height: var(--slot); flex: none; border-radius: 12px; }
.dg-piece { display: grid; place-items: center; padding: 2px; border: 2px solid var(--border); background: var(--raised); cursor: grab; touch-action: pinch-zoom; }
.dg-piece svg { width: 100%; height: 100%; pointer-events: none; }
.dg-piece[aria-pressed="true"] { border: 3px solid var(--primary); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--star); }
.dg-slot { border: 2px dashed var(--border); }
html.pc-tap .dg-piece { cursor: pointer; touch-action: manipulation; }
.dg-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: .92; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); }
.dg-ghost svg { width: 100%; height: 100%; display: block; }
/* five round tools, icons only (Khalid 12:18, like the Sudoku tools); the name is the tooltip and the spoken label */
.dg-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; justify-items: center; }
.dg-tool { --tool: 52px; display: grid; place-items: center; width: max(48px, var(--tool)); height: max(48px, var(--tool)); padding: 0; border: 0; background: none;
  color: var(--primary); cursor: pointer; border-radius: 50%; }
.dg-ico { width: 100%; height: 100%; border-radius: 50%; background: var(--secondary); display: grid; place-items: center; }
.dg-ico svg { width: 48%; height: 48%; }
.dg-tool[disabled] { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .dg-tool:not([disabled]):hover .dg-ico { filter: brightness(.96); } }
.dg-strike { stroke-width: 2.2; }

/* the side card: message, win, today's note, the beds in words */
.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; }
.daily-days { margin: 0 0 10px; color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }
.dg-note { margin: 0; color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }
.dg-beds-t { font-size: calc(18px * var(--fs, 1)); }
.dg-beds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dg-bedrow { display: flex; align-items: center; gap: 10px; font-size: calc(16px * var(--fs, 1)); min-height: 36px; }
.dg-sw { width: 32px; height: 32px; flex: none; border-radius: 6px; }
.dg-swrim { fill: none; stroke: var(--dgl); stroke-width: .1; }
.dg-bedtxt { flex: 1; min-width: 0; }
.dg-bedtxt b { font-family: "Albert Sans", "Plus Jakarta Sans", sans-serif; display: inline-block; min-width: 2.2em; }
.dg-st { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--border); color: var(--text-2); }
.dg-bedrow.ok .dg-st { background: var(--ok-ink); border-color: var(--ok-ink); color: var(--card); }
.dg-bedrow.off .dg-st { background: var(--err-ink); border-color: var(--err-ink); color: var(--card); }

/* «كيف ألعب», inside the options menu */
.dg-help-list { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; font-size: calc(17px * var(--fs, 1)); }
.dg-help-ex { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.dg-help-ex li { display: flex; align-items: center; gap: 10px; }
.dg-help-leaf { width: 54px; height: 27px; flex: none; }

@media (max-width: 560px) {
  .dg-board-card { padding: 6px; }
}
@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 479px), (max-width: 699px) { .dg-layout { grid-template-columns: 1fr; } .side { order: 2; } }

/* Wide screens (main.css "Wide screens to play"): the board as tall as the screen allows; the dominoes and the tools
   in the side column beside it; the side card below them */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 480px) {
  :root:not([data-focus="on"]) .dg-layout.pc-wide { --pc-side-max: 400px; }
  :root:not([data-focus="on"]) .dg-layout.pc-wide .dg-board { --cell: min(calc((var(--pc-h) - 24px) / (var(--rows) + .7)), calc((var(--pc-w) - 24px) / (var(--cols) + .7)), 128px); }
  :root:not([data-focus="on"]) .dg-layout.pc-wide .dg-board-card { padding: 10px; }
  :root:not([data-focus="on"]) .dg-layout.pc-wide .dg-tray { --slot: max(70px, var(--tap, 48px)); gap: 8px; justify-content: flex-start; }
  :root:not([data-focus="on"]) .dg-layout.pc-wide .dg-ctrl { margin-top: 0; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 480px) and (max-height: 720px) {
  :root:not([data-focus="on"]) .dg-layout.pc-wide { --pc-side-max: 340px; }
  :root:not([data-focus="on"]) .dg-layout.pc-wide .dg-tray { --slot: max(52px, var(--tap, 48px)); }
  :root:not([data-focus="on"]) .dg-layout.pc-wide .dg-tool { --tool: 46px; }
}
/* landscape phones (main.css): the board fills the height, the dominoes beside it */
@media (orientation: landscape) and (max-height: 479px) {
  :root:not([data-focus="on"]) .dg-play .dg-board { --cell: min(calc((100dvh - 40px) / (var(--rows) + .7)), calc((55vw - 40px) / (var(--cols) + .7))); }
}

/* Full screen for play (shared mode in core.js / main.css): the board as large as the screen allows, the dominoes and
   tools below it (upright) or beside it (sideways) */
:root[data-focus="on"] .dg-board-card { padding: 0; border: 0; background: none; box-shadow: none; align-self: center; }
:root[data-focus="on"] .dg-board { --cell: min(calc((100cqw - 16px) / (var(--cols) + .7)), calc((var(--pc-fy) - 300px) / (var(--rows) + .7)), 132px); }
:root[data-focus="on"] .dg-ctrl { margin-top: 0; }
@media (orientation: landscape) {
  :root[data-focus="on"] .dg-board { --cell: min(calc((var(--pc-fy) - 16px) / (var(--rows) + .7)), calc(60cqw / (var(--cols) + .7)), 132px); }
  :root[data-focus="on"] .dg-ctrl { max-width: 440px; }
}

/* Printable sheet (A4, black and white): beds by pattern and firm edges, leaves as white labels */
.sheet-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 20px 0; }
.sheet-fit { position: relative; width: 100%; max-width: 210mm; }
.sheet { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: 210mm; height: 297mm; box-sizing: border-box; background: #fff; color: #000; padding: 14mm; box-shadow: var(--shadow); border: 1px solid #ccc; display: flex; flex-direction: column; gap: 7mm; }
.sheet h2 { text-align: center; font: 800 15pt var(--font-head); }
.sheet h3 { font: 800 12pt var(--font-head); margin: 0; }
.sheet .s-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 9pt; color: #333; }
.print-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dg-sheet { --dg0: #FFFFFF; --dg1: #FFFFFF; --dg2: #FFFFFF; --dg3: #FFFFFF; --dg4: #FFFFFF; --dg5: #FFFFFF;
  --dg0-line: #333; --dg1-line: #333; --dg2-line: #333; --dg3-line: #333; --dg4-line: #333; --dg5-line: #333;
  --dg-plain: #FFFFFF; --dg-grid: #9A9A9A; --dg-edge-line: #000; --dg-tile: #FFFFFF; --dg-tile-edge: #000; --dg-pip: #000; --dg-pat: .5; --card: #FFFFFF; }
.dg-pboard { --pc: min(30mm, calc(160mm / (var(--cols) + .7)), calc(125mm / (var(--rows) + .7))); position: relative; margin: 0 auto;
  width: calc(var(--pc) * (var(--cols) + .7)); height: calc(var(--pc) * (var(--rows) + .7)); }
.dg-pboard svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dg-sheet .dg-rim { stroke-width: .06; }
.dg-sheet .dg-edge { stroke-width: .06; }
.dg-sheet .dg-leaf { fill: #fff; stroke: #000; stroke-width: .035; }
.dg-sheet .dg-bt { fill: #000; }
.dg-ppieces { display: flex; flex-wrap: wrap; gap: 3mm; justify-content: center; }
.dg-ppieces svg { width: 22mm; height: 22mm; }
.dg-legend { margin: 0; text-align: center; font: 600 10pt var(--font-ar); color: #222; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff !important; }
  .site-header, .site-footer, .print-tools, .no-print { display: none !important; }
  .sheet-wrap { margin: 0; gap: 0; }
  .sheet-fit { height: auto !important; max-width: none; position: static; }
  .sheet { position: static; transform: none !important; box-shadow: none; border: 0; width: 210mm; height: 297mm; page-break-after: always; break-after: page; }
}

/* The end card over the board (options.js, Khalid 23 Oct 2026, 12:44): a small garden can be shorter than the card, so the
   board's card then grows to hold it (the card and the board share one grid cell, both in the middle) — the card never
   spills over the header or the dominoes */
.dg-board-card:has(> .pc-end) { display: grid; }
.dg-board-card:has(> .pc-end) > * { grid-area: 1 / 1; }
.dg-board-card:has(> .pc-end) > .dg-board { align-self: center; }
.dg-board-card > .pc-end { position: relative; inset: auto; }