/* PlayCalm game options menu (assets/js/options.js) and the small PlayCalm touches on game pages (Khalid 23 Oct 2026).
   Theme colors only (main.css); the coral #E5736B is used only for the gear's center, like the eraser's tip (08:49). */

/* ---------- The coral accent of the play tools (Khalid 23 Oct 2026, 12:18) ----------
   The same soft coral by day and at night; high contrast uses a firmer red so it still stands out. */
:root { --pc-coral: #E5736B; }
html.pc-contrast:not([data-theme="dark"]) { --pc-coral: #C62828; }
html.pc-contrast[data-theme="dark"] { --pc-coral: #FF6B60; }
svg .pc-coral { fill: var(--pc-coral); }
svg .pc-coral-s { stroke: var(--pc-coral); }
svg .pc-fill { fill: currentColor; }

/* ---------- The gear (Lucide "settings", ISC): its drawing, coral center and quarter turn are in main.css ---------- */
.pc-opts-btn { width: 48px; min-width: 48px; padding: 0; color: var(--primary); }
/* open: the button stays marked while the menu is open */
.pc-opts-btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--primary); }

/* ---------- The menu: one dialog, a sheet on phones and tablets, a popover on wide screens ---------- */
dialog.pc-opts { padding: 0; border: 2px solid var(--border); background: var(--card); color: var(--text); overflow: hidden;
  --fs-o: var(--fs, 1); }
dialog.pc-opts[open] { display: flex; flex-direction: column; }
dialog.pc-opts::backdrop { background: rgba(20, 25, 23, .45); }
/* phones and tablets (< 840px): a sheet from the bottom, about 60% of the screen, up to 90% when pulled up; at most 640px wide */
dialog.pc-opts.is-sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 640px;
  max-height: 60vh; max-height: 60dvh; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: pc-opts-up .3s cubic-bezier(.32, .72, 0, 1); transform: none; }
dialog.pc-opts.is-sheet.is-tall { max-height: 90vh; max-height: 90dvh; height: 90vh; height: 90dvh; }
dialog.pc-opts.is-sheet:not(.is-drag) { transition: transform .25s cubic-bezier(.32, .72, 0, 1), max-height .25s ease; }
@keyframes pc-opts-up { from { transform: translateY(100%); } }
/* wide screens (≥ 840px): a popover under the gear (top / left / right set by options.js) */
dialog.pc-opts.is-pop { position: fixed; inset: auto; margin: 0; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100vh - 96px);
  border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); animation: pc-opts-fade .15s ease-out; }
dialog.pc-opts.is-pop::backdrop { background: rgba(20, 25, 23, .14); }
@keyframes pc-opts-fade { from { opacity: 0; transform: translateY(-4px); } }
html.pc-reduce-motion dialog.pc-opts { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { dialog.pc-opts { animation: none !important; transition: none !important; } }

.pc-opts-grip { display: none; }
dialog.pc-opts.is-sheet .pc-opts-grip { display: block; flex: none; height: 22px; touch-action: none; cursor: grab; }
dialog.pc-opts.is-sheet .pc-opts-grip::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 9px auto 0; }
.pc-opts-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px 6px 16px; }
:root[dir="rtl"] .pc-opts-head { padding: 6px 16px 6px 12px; }
dialog.pc-opts.is-pop .pc-opts-head { padding-top: 10px; }
.pc-opts-head h2 { font-size: calc(21px * var(--fs, 1)); margin: 0; min-width: 0; }
.pc-opts-x { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--secondary); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.pc-opts-x svg { width: 22px; height: 22px; }
.pc-opts-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 18px; }
.pc-opts-sec { padding: 10px 0 12px; border-top: 1px solid var(--border); }
.pc-opts-sec:first-child { border-top: 0; padding-top: 2px; }
.pc-opts-sec h3 { font: 800 calc(15px * var(--fs, 1)) / 1.4 var(--font-head); color: var(--text-2); margin: 0 0 6px; }
.pc-opts-l { margin: 10px 0 6px; font-weight: 700; font-size: calc(16px * var(--fs, 1)); }
.pc-opts-note { margin: 6px 0 0; color: var(--text-2); font-size: calc(14px * var(--fs, 1)); line-height: 1.45; }

/* one action per row (New game, Restart, Print, How to play) */
.pc-opts-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: max(48px, var(--tap, 48px)); padding: 6px 10px; margin: 0 -10px; width: calc(100% + 20px);
  border: 0; border-radius: 12px; background: none; color: var(--text); font: 700 calc(17px * var(--fs, 1)) / 1.3 var(--font-ar); text-align: start; text-decoration: none; cursor: pointer; }
.pc-opts-row svg { flex: none; width: 22px; height: 22px; color: var(--primary); }
.pc-opts-row span { min-width: 0; overflow-wrap: break-word; }
.pc-opts-main { color: var(--primary); }
@media (hover: hover) and (pointer: fine) { .pc-opts-row:hover { background: var(--secondary); } .pc-opts-chip:hover, .pc-opts-color:hover i { filter: brightness(.97); } }

/* segmented choices (level, theme, text size): equal parts in one row; the chosen one has a tick, not only a color */
.pc-opts-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.pc-opts-seg.pc-opts-wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
.pc-opts-chip { min-height: max(48px, var(--tap, 48px)); padding: 4px 8px; border: 2px solid var(--border-strong); border-radius: 12px; background: var(--card); color: var(--text);
  font: 700 calc(16px * var(--fs, 1)) / 1.2 var(--font-ar); cursor: pointer; min-width: 0; overflow-wrap: break-word; }
/* narrow phones with large text: the choices go one under the other, so no word is ever cut */
@media (max-width: 459px) { html.pc-text-large .pc-opts-seg, html.pc-text-xl .pc-opts-seg { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); } }
.pc-opts-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--primary); color: var(--primary); }
.pc-opts-chip[aria-pressed="true"]::before { content: "✓ "; content: "✓ " / ""; }

/* switches */
.pc-opts-sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: max(52px, var(--tap, 48px)); padding: 6px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.pc-opts-sw:last-child { border-bottom: 0; }
.pc-opts-swt { min-width: 0; font-weight: 700; font-size: calc(17px * var(--fs, 1)); line-height: 1.35; }
.pc-opts-swt small { display: block; font-weight: 500; color: var(--text-2); font-size: calc(14px * var(--fs, 1)); }
.pc-opts-sw input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0; border-radius: 999px;
  background: var(--border-strong); cursor: pointer; transition: background .15s; }
.pc-opts-sw input::before { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: inset-inline-start .15s; }
.pc-opts-sw input:checked { background: var(--primary); }
.pc-opts-sw input:checked::before { inset-inline-start: 25px; background: var(--on-primary); }
html.pc-reduce-motion .pc-opts-sw input, html.pc-reduce-motion .pc-opts-sw input::before { transition: none; }
.pc-opts-sw input:focus-visible { outline: 3px solid var(--star); outline-offset: 3px; }

/* board colors: named swatches (the name is always written under the color) and the color wheel */
.pc-opts-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px 6px; }
.pc-opts-color { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: max(48px, var(--tap, 48px)); padding: 4px 2px; border: 0; background: none;
  color: var(--text); font: 600 calc(14px * var(--fs, 1)) / 1.25 var(--font-ar); text-align: center; cursor: pointer; border-radius: 12px; min-width: 0; }
.pc-opts-color span { overflow-wrap: break-word; max-width: 100%; }
.pc-opts-color i { position: relative; display: block; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--border-strong); }
.pc-opts-color[aria-pressed="true"] i, .pc-opts-custom.is-on i { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--primary); }
.pc-opts-color[aria-pressed="true"] i::after, .pc-opts-custom.is-on i::after { content: "✓"; content: "✓" / ""; position: absolute; inset-inline-end: -10px; top: -10px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--primary); color: var(--on-primary); font: 800 14px/22px system-ui, sans-serif; text-align: center; }
.pc-opts-custom i { background: conic-gradient(#E5484D, #F5A524, #F5D90A, #46A758, #12A594, #0091FF, #8E4EC6, #E5484D); }
.pc-opts-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.pc-opts-custom:has(input:focus-visible) i { outline: 3px solid var(--star); outline-offset: 3px; }

/* How to play */
.pc-opts-sec-how { padding-bottom: 4px; }
.pc-opts-how summary { list-style: none; }
.pc-opts-how summary::-webkit-details-marker { display: none; }
.pc-opts-howbody { padding: 2px 0 6px; color: var(--text); font-size: calc(16px * var(--fs, 1)); line-height: 1.6; }
.pc-opts-howbody ul { margin: 0; padding-inline-start: 22px; }
.pc-opts-howbody li + li { margin-top: 4px; }
.pc-opts-howbtn { margin-top: 10px; width: 100%; min-height: max(48px, var(--tap, 48px)); }

/* the inline question before a puzzle in progress is replaced («أكمل لعبي» is the calm, focused choice) */
.pc-opts-ask { padding: 4px 0 6px; }
.pc-opts-ask h3 { font: 800 calc(20px * var(--fs, 1)) / 1.35 var(--font-head); margin: 0 0 6px; color: var(--text); }
.pc-opts-ask p { margin: 0 0 14px; color: var(--text-2); }
.pc-opts-askb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-opts-askb .btn { min-height: max(52px, var(--tap, 48px)); line-height: 1.25; padding: 6px 12px; white-space: normal; }
@media (max-width: 359px) { .pc-opts-askb { grid-template-columns: 1fr; } }
html.pc-text-xl .pc-opts-askb { grid-template-columns: 1fr; }

/* ---------- PlayCalm touches (Khalid 08:42) ---------- */
/* the four-piece logo in its colors: day (Khalid 08:50) and the night logo's own colors */
:root { --lg-b: #2F6A8F; --lg-y: #D49A2A; --lg-g: #2F7A5A; --lg-r: #A0562E; }
:root[data-theme="dark"] { --lg-b: #8CC0E4; --lg-y: #E5C178; --lg-g: #84C7A8; --lg-r: #E4A582; }
.pc-logo-fx { display: block; overflow: visible; }
.pc-lg path { stroke: var(--card); stroke-width: 22; stroke-linejoin: round; }
.pc-lg-b path { fill: var(--lg-b); } .pc-lg-y path { fill: var(--lg-y); } .pc-lg-g path { fill: var(--lg-g); } .pc-lg-r path { fill: var(--lg-r); }
/* win card: the last piece drops in and settles (short and calm) */
.pc-logo-win { width: 64px; height: 64px; margin: 0 auto 8px; }
.pc-logo-win .pc-lg-y { animation: pc-lg-drop .9s cubic-bezier(.25, .8, .3, 1) .2s both; }
@keyframes pc-lg-drop { 0% { transform: translateY(-420px); opacity: 0; } 55% { transform: translateY(20px); opacity: 1; } 75% { transform: translateY(-8px); } 100% { transform: none; } }
/* pause screen: the pieces drift slowly apart, and come back together on resume (.is-back) */
.pc-logo-pause { width: 76px; height: 76px; }
.pc-logo-pause .pc-lg-b { --dx: -110px; --dy: -110px; } .pc-logo-pause .pc-lg-y { --dx: 110px; --dy: -110px; }
.pc-logo-pause .pc-lg-g { --dx: 110px; --dy: 110px; } .pc-logo-pause .pc-lg-r { --dx: -110px; --dy: 110px; }
.pc-logo-pause .pc-lg { animation: pc-lg-apart 2.4s ease-in-out .15s both; }
.pc-logo-pause.is-back .pc-lg { animation: pc-lg-back .4s ease-in both; }
@keyframes pc-lg-apart { to { transform: translate(var(--dx), var(--dy)); } }
@keyframes pc-lg-back { from { transform: translate(var(--dx), var(--dy)); } to { transform: none; } }
html.pc-reduce-motion .pc-logo-fx .pc-lg { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .pc-logo-fx .pc-lg { animation: none !important; transform: none !important; } }
/* «حللته دون تلميح / Solved without a hint»: a filled puzzle piece with a white tick, words beside it, #245445 / #78B8A2 */
.pc-stamp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; color: var(--primary);
  font: 800 calc(17px * var(--fs, 1)) / 1.3 var(--font-head); }
.pc-stamp svg { width: 32px; height: 32px; flex: none; }
.pc-stamp-p { fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pc-stamp-c { fill: none; stroke: var(--card); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- The end card, centered over the board (Khalid 12:44, every game) ---------- */
*:has(> .pc-end) { position: relative; }
.pc-end { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 10px;
  background: color-mix(in srgb, var(--page) 45%, transparent); border-radius: inherit; }
.pc-end-card { width: min(340px, 100%); margin: 0; padding: 16px 18px 16px; text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
  animation: pc-end-in .3s ease-out both; }
@keyframes pc-end-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
html.pc-reduce-motion .pc-end-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .pc-end-card { animation: none; } }
.pc-end .pc-logo-win { width: 56px; height: 56px; margin: 0 auto 6px; }
.pc-end.is-still .pc-lg { animation: none !important; transform: none !important; }
.pc-end-card h2 { margin: 0 0 6px; color: var(--primary); font-size: calc(21px * var(--fs, 1)); line-height: 1.35; }
.pc-end-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin: 0 0 8px; color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }
.pc-end-meta b { color: var(--text); }
.pc-end-text { margin: 0 0 12px; }
.pc-end .pc-stamp { margin: 0 0 10px; }
.pc-end-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.pc-end-acts .btn { flex: 1 1 auto; min-height: max(52px, var(--tap, 48px)); white-space: normal; line-height: 1.25; }

@media print { .pc-opts-btn, dialog.pc-opts, .pc-end { display: none !important; } }