/* PlayCalm Calm Jigsaw («الأحجية»): the board (a square of the picture), the tray of loose pieces beside it on wide
   screens and under it on phones (a strip that scrolls sideways), and the header pill [⏸ 00:01]. Theme colors only. */
.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)); }
.daily-note { margin: 0; color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }
.jg-layout { display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 1fr); gap: 20px; margin: 16px 0; align-items: start; }
.jg-main { min-width: 0; }
/* a piece near the right or left edge draws its knob room past the board: never a sideways page scroll */
.main-jg { overflow-x: clip; }
.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; font-size: calc(17px * var(--fs, 1)); }
.stat { color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }

/* ---------- The board ---------- */
.jg-board-card { position: relative; padding: 8px; }
.jg-board { position: relative; width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--border); 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 board); one finger moves a piece, never the page */
  touch-action: pinch-zoom; }
.jg-board.has-sel { cursor: crosshair; box-shadow: inset 0 0 0 3px var(--primary); }
.jg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* «أظهر الصورة خفيفة»: a pale picture under the pieces (and the whole picture, softly, once it is complete) */
.jg-ghost { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; opacity: .2; filter: grayscale(.3); pointer-events: none; }
.jg-ghost.is-full { opacity: 1; filter: none; transition: opacity .6s ease-out; }
:root[data-theme="dark"] .jg-ghost:not(.is-full) { opacity: .16; }

/* ---------- Pieces ---------- */
.jg-pc { position: absolute; display: block; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: grab;
  -webkit-tap-highlight-color: transparent; }
.jg-pc svg { display: block; width: 100%; height: 100%; overflow: visible; }
.jg-pc .jg-line { fill: none; stroke: rgba(30, 30, 30, .55); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.jg-pc .jg-hit { fill: transparent; stroke: none; }
/* on the board: only the piece's own shape takes a finger (its box overlaps the neighbors' knobs) */
.jg-board .jg-pc { pointer-events: none; }
.jg-board .jg-pc .jg-hit { pointer-events: fill; }
.jg-pc.is-loose svg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.jg-pc.is-done { cursor: default; }
.jg-pc.is-done .jg-line { stroke: rgba(30, 30, 30, .16); stroke-width: 1; }
.jg-board-card.is-won .jg-pc.is-done { opacity: 0; transition: opacity .6s ease-out; }   /* the finished picture, without seams */
.jg-pc.is-sel .jg-line, .jg-pc.is-held .jg-line { stroke: var(--primary); stroke-width: 4; }
.jg-pc.is-sel svg, .jg-pc.is-held svg { filter: drop-shadow(0 0 3px var(--primary)) drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.jg-pc.is-lifted { visibility: hidden; }
.jg-pc:focus { outline: none; }
.jg-pc:focus-visible .jg-line { stroke: var(--star); stroke-width: 5; }
.jg-pc:focus-visible { outline: 3px dashed var(--star); outline-offset: 2px; border-radius: 6px; }
/* a piece that just settled or joined: one soft glow (never with reduced motion) */
.jg-pc.is-flash svg { animation: jg-glow .9s ease-out; }
@keyframes jg-glow { 30% { filter: drop-shadow(0 0 6px var(--star)) brightness(1.08); } }
html.pc-reduce-motion .jg-pc.is-flash svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .jg-pc.is-flash svg { animation: none; } .jg-ghost.is-full, .jg-board-card.is-won .jg-pc.is-done { transition: none; } }
html.pc-reduce-motion .jg-ghost.is-full, html.pc-reduce-motion .jg-board-card.is-won .jg-pc.is-done { transition: none; }
/* the piece being dragged floats above everything (it is drawn at its board size) */
.jg-layer { position: fixed; inset: 0 auto auto 0; width: 0; height: 0; z-index: 60; pointer-events: none; }
.jg-layer .jg-pc { position: fixed; cursor: grabbing; }
.jg-layer .jg-pc svg { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }

/* ---------- The bar (pill in full screen, hint, count) and the tray ---------- */
.jg-side { min-width: 0; }
.jg-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 24px; }
.jg-pillbox:empty { display: none; }
.jg-count { margin: 0; color: var(--text-2); font-weight: 600; font-size: calc(16px * var(--fs, 1)); }
/* the hint beside the tray (never a lone button in a row of its own on a phone, Khalid 22 Oct 21:24) */
.jg-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.jg-row > .jg-tray { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.jg-count b { color: var(--text); font-family: "Plus Jakarta Sans", sans-serif; }
.jg-tool { width: 52px; height: 52px; min-width: 52px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.jg-tool svg { width: 26px; height: 26px; }
.jg-tool[disabled] { opacity: .45; }
/* phones and narrow screens: one row that scrolls sideways (a finger along the strip scrolls it, across it lifts a piece) */
.jg-tray { --jg-tray-h: 96px; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-top: 8px; padding: 8px;
  min-height: calc(var(--jg-tray-h) + 20px); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  border: 2px dashed var(--border-strong); border-radius: 14px; background: var(--card); touch-action: pan-x pinch-zoom; scrollbar-width: thin; }
.jg-tray .jg-pc { position: relative; flex: none; }
:root[data-kids="1"] .jg-tray { --jg-tray-h: 112px; }   /* Kids Corner: bigger pieces in the box too */
.jg-tray-note { margin: 0 auto; padding: 0 8px; color: var(--text-2); font-size: calc(15px * var(--fs, 1)); flex: 1 0 100%; text-align: center; white-space: normal; }
.jg-tray.tap .jg-pc, .jg-board.tap .jg-pc { cursor: pointer; }

/* the pill [⏸ 00:01] (as in Sudoku): the whole pill pauses and resumes; the time keeps one width */
.jg-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 19px / 1 "Plus Jakarta Sans", sans-serif; font-variant-numeric: tabular-nums; }
.jg-pill svg { width: 20px; height: 20px; flex: none; color: var(--primary); }
.jg-pill b { font-weight: 700; color: var(--text-2); }
.jg-pill[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--primary); }
.jg-pill[disabled] { opacity: .5; cursor: default; }
@media (max-width: 359px) { .jg-pill { padding: 0 8px; gap: 4px; font-size: 17px; } }
/* paused: the board waits under a calm cover; the logo's four pieces drift apart (options.css) */
.jg-paused { position: absolute; inset: 0; z-index: 40; 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; }
.jg-paused p { margin: 0; }
.jg-paused .pc-logo-pause { margin-bottom: 8px; }
.jg-paused .btn svg { width: 20px; height: 20px; }
.jg-tray.is-paused > * { visibility: hidden; }   /* the loose pieces rest too */
.daily-days { margin: 0 0 10px; 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) { .jg-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .main-jg { padding: 0 10px; }
  .jg-board-card { padding: 6px; }
}
/* larger screens with the side column: the tray is a box of pieces that scrolls down */
@media (min-width: 700px) and (orientation: landscape) and (min-height: 480px) {
  .jg-row { flex-direction: column; align-items: stretch; }
  .jg-row > .jg-tool { align-self: flex-start; }
  .jg-tray { --jg-tray-h: 120px; flex-wrap: wrap; align-content: flex-start; justify-content: center; overflow-x: hidden; overflow-y: auto;
    max-height: max(220px, calc(var(--pc-h, 70vh) - 140px)); touch-action: pan-y pinch-zoom; }   /* (jigsaw.js fits it exactly) */
}

/* Full screen for play (shared mode in core.js / main.css): the board as large as the screen allows, the tray below it
   (upright) or beside it (sideways) */
:root[data-focus="on"] .jg-board-card { width: min(100cqw, var(--pc-fy) - 230px); padding: 0; border: 0; background: none; box-shadow: none; align-self: center; }
:root[data-focus="on"] .jg-bar { margin-top: 0; }
:root[data-focus="on"] .jg-row { margin-top: 0; }
@media (orientation: landscape) {
  :root[data-focus="on"] .jg-board-card { width: min(var(--pc-fy), 60cqw); }
  :root[data-focus="on"] .jg-row { align-items: flex-start; }   /* the hint beside the box: the board keeps the whole height */
  :root[data-focus="on"] .jg-tray { --jg-tray-h: 110px; flex-wrap: wrap; align-content: flex-start; justify-content: center; overflow-x: hidden; overflow-y: auto;
    max-height: calc(var(--pc-fy) - 160px); min-height: 0; touch-action: pan-y pinch-zoom; }
}
/* Wide screens (main.css "Wide screens to play"): the board as tall as the screen allows, the tray in the side column */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 480px) {
  :root:not([data-focus="on"]) .jg-layout.pc-wide .jg-board-card { width: min(var(--pc-h), var(--pc-w)); }
  :root:not([data-focus="on"]) .jg-layout.pc-wide .jg-bar { margin-top: 0; }
}
@media print { .jg-tray, .jg-bar { display: none; } }