/* «الملك الأخير» / "Last King" — a calm chess board in PlayCalm colors: paper and soft green squares, one dark ink for
   every piece (told apart by shape), a gold gem on the king. Rings (not color alone) show what can be taken; a dashed
   frame shows a hint. */
:root {
  --lk-lt: #F8F5EE; --lk-dk: #D3E6DB; --lk-ink: #1C2420; --lk-frame: #8FB5A3; --lk-sel: #F4E3B5; --lk-ring: #8A5C0C; --lk-gem: #B87D14;
}
:root[data-theme="dark"] {
  --lk-lt: #34423C; --lk-dk: #1C2B24; --lk-ink: #F1EDE4; --lk-frame: #3E554B; --lk-sel: #4A4024; --lk-ring: #E5C178; --lk-gem: #E5C178;
}
html.pc-contrast:not([data-theme="dark"]) { --lk-lt: #FFFFFF; --lk-dk: #C9C9C9; --lk-ink: #000000; --lk-frame: #000000; --lk-sel: #FFE08A; --lk-ring: #000000; --lk-gem: #7A4E00; }
html.pc-contrast[data-theme="dark"] { --lk-lt: #1A1A1A; --lk-dk: #3A3A3A; --lk-ink: #FFFFFF; --lk-frame: #FFFFFF; --lk-sel: #5A4A00; --lk-ring: #FFD54F; --lk-gem: #FFD54F; }

.lk-layout { display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 1fr); gap: 20px; margin: 14px 0 18px; align-items: start; }
.lk-layout .pc-focus-row { margin: 0; }

/* the board: a square grid that keeps its sides in both languages (a chess board is never mirrored) */
.lk-board-card { padding: 10px; }
.lk-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); aspect-ratio: 1; width: 100%; margin: 0 auto; direction: ltr;
  border: 3px solid var(--lk-frame); border-radius: 10px; overflow: hidden; user-select: none; -webkit-user-select: none;
  touch-action: pinch-zoom; container-type: inline-size; }   /* one finger drags a piece; two fingers still zoom the page */
html.pc-tap .lk-board { touch-action: manipulation; }   /* «اللمس بدل السحب»: nothing is dragged, the page scrolls as usual */
.lk-row { display: contents; }
.lk-sq { --lk-cut: var(--lk-lt); position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: var(--lk-lt);
  color: var(--lk-ink); display: grid; place-items: center; cursor: pointer; }
.lk-sq.dk { --lk-cut: var(--lk-dk); background: var(--lk-dk); }
.lk-sq .lk-pc { width: 86%; height: 86%; pointer-events: none; }
.lk-sq:not(.has) { cursor: default; }
.lk-sq:focus-visible { outline: 4px solid var(--star); outline-offset: -4px; border-radius: 4px; z-index: 1; }
/* the chosen piece: a warm square with a thick frame inside it */
.lk-sq.sel { --lk-cut: var(--lk-sel); background: var(--lk-sel); box-shadow: inset 0 0 0 4px var(--primary); }
/* a piece that can be taken: a ring around it (a shape, not only a color) */
.lk-ring { position: absolute; inset: 7%; border: max(3px, calc(100cqw / var(--n) * .05)) solid var(--lk-ring); border-radius: 50%; pointer-events: none; }
.lk-sq.tgt.over .lk-ring { inset: 3%; border-width: max(5px, calc(100cqw / var(--n) * .08)); }
/* hint: a dashed frame on the piece to move, and a star on the piece it takes */
.lk-sq.hint-from::after { content: ""; position: absolute; inset: 5px; border: 3px dashed var(--lk-ring); border-radius: 6px; pointer-events: none; }
.lk-star { position: absolute; top: 4%; right: 6%; color: var(--lk-ring); font: 800 max(15px, calc(100cqw / var(--n) * .24)) / 1 "Plus Jakarta Sans", sans-serif; pointer-events: none; }
.lk-sq.lifting .lk-pc { opacity: .35; }
.lk-board.done .lk-sq.pK { --lk-cut: var(--lk-sel); background: var(--lk-sel); }
.lk-ghost { position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; color: var(--lk-ink); --lk-cut: var(--lk-lt); display: grid; place-items: center; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.lk-ghost .lk-pc { width: 92%; height: 92%; }
@media (hover: hover) and (pointer: fine) { .lk-sq.has:hover { filter: brightness(.97); } }

/* under the board: pieces left and the latest note, then the two round tools (icons only, Khalid 12:18) */
.lk-line { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 8px 2px 4px; min-height: 1.6em; font-size: calc(16px * var(--fs, 1)); color: var(--text-2); }
.lk-left { font-weight: 700; white-space: nowrap; }
.lk-left b { color: var(--text); font-family: "Plus Jakarta Sans", var(--font-ar); }
.lk-msg { flex: 1 1 200px; min-width: 0; }
.lk-tools { display: flex; justify-content: center; gap: 28px; margin-top: 4px; }
.lk-tool { --tool: 56px; 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%; }
.lk-ico { width: 100%; height: 100%; border-radius: 50%; background: var(--secondary); display: grid; place-items: center; }
.lk-ico svg { width: 48%; height: 48%; }
.lk-tool:disabled { cursor: default; opacity: .5; }
@media (hover: hover) and (pointer: fine) { .lk-tool:not(:disabled):hover .lk-ico { filter: brightness(.96); } }

/* the side card */
.side { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.buddy { max-width: 220px; 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)); }
.daily-days { margin: 0 0 10px; color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }

/* «كيف ألعب» / How to play, inside the options menu */
.lk-rules { padding-inline-start: 22px; margin: 8px 0; display: grid; gap: 4px; }
.lk-ph { font-size: calc(17px * var(--fs, 1)); margin: 12px 0 6px; }
.lk-goal { font-weight: 800; color: var(--primary); margin: 4px 0; }
.lk-plist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lk-plist li { display: flex; align-items: center; gap: 12px; }
.lk-hp { --lk-cut: var(--lk-lt); flex: none; width: 52px; height: 52px; border-radius: 10px; background: var(--lk-lt); border: 2px solid var(--lk-frame); color: var(--lk-ink); display: grid; place-items: center; }
.lk-hp .lk-pc { width: 84%; height: 84%; }

/* phones and upright tablets: one column, the board first */
@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (max-height: 479px), (max-width: 699px) {
  .lk-layout { grid-template-columns: minmax(0, 1fr); }
  .side { order: 2; }
}
@media (max-width: 480px) {
  .main-lk { padding: 0 10px; }
  .lk-board-card { padding: 6px; }
  .lk-tool { --tool: 52px; }
}

/* Wide screens (main.css "Wide screens to play"): the board as tall as the screen allows; Full screen, the tools and
   the side card in the column beside it */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 480px) {
  :root:not([data-focus="on"]) .lk-layout.pc-wide { --pc-side-max: 360px; }
  :root:not([data-focus="on"]) .lk-layout.pc-wide .lk-board-card { width: min(var(--pc-h), var(--pc-w)); }
  :root:not([data-focus="on"]) .lk-layout.pc-wide .pc-focus-row { justify-content: flex-start; }
  :root:not([data-focus="on"]) .lk-layout.pc-wide .lk-line { margin-top: 0; }
  :root:not([data-focus="on"]) .lk-layout.pc-wide .lk-msg { display: none; }   /* the buddy's note says it, right below */
  :root:not([data-focus="on"]) .lk-layout.pc-wide .side { gap: 8px; padding: 12px; }
  :root:not([data-focus="on"]) .lk-layout.pc-wide .buddy { max-width: 100px; }
}

/* Full screen for play (shared mode in core.js / main.css): the board as large as the screen allows, the tools below it
   (upright) or beside it (sideways); a solved puzzle's card sits over the board */
:root[data-focus="on"] .lk-board-card { width: min(100cqw, var(--pc-fy) - 250px); padding: 0; border: 0; background: none; box-shadow: none; align-self: center; }
@media (orientation: landscape) { :root[data-focus="on"] .lk-board-card { width: min(60cqw, var(--pc-fy) - 12px); } }

@media (prefers-reduced-motion: no-preference) {
  html:not(.pc-reduce-motion) .lk-sq.has .lk-pc { transition: transform .12s ease-out; }
  html:not(.pc-reduce-motion) .lk-sq.sel .lk-pc { transform: scale(1.06); }
}

/* Printable sheet: A4, black and white, coordinates around the board (letters along the bottom, numbers up the side) */
.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 21px var(--font-head); }
.sheet .s-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 12px; color: #333; }
.pk-rules { text-align: center; margin: -3mm 0 0; font-size: 15px; color: #222; }
.pk-board { --lk-ink: #000; --lk-gem: #555; display: grid; grid-template-columns: 8mm repeat(var(--n), 1fr); width: 125mm; margin: 0 auto; direction: ltr; }
.pk-sq { aspect-ratio: 1; display: grid; place-items: center; color: #000; border: .4mm solid #000; margin: -.2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pk-sq.lt { --lk-cut: #fff; background: #fff; }
.pk-sq.dk { --lk-cut: #D9D9D9; background: #D9D9D9; }
.pk-sq .lk-pc { width: 78%; height: 78%; }
.pk-rank, .pk-file { display: grid; place-items: center; font: 700 14px "Plus Jakarta Sans", sans-serif; color: #333; }
.pk-file { padding-top: 1.5mm; }
.pk-moves h3 { font: 800 17px var(--font-head); margin: 0 0 2mm; }
.pk-blank, .pk-sol { list-style: none; padding: 0; margin: 0 auto; width: 150mm; display: grid; gap: 3.5mm; font-size: 17px; }
.pk-blank li { display: flex; gap: 3mm; align-items: flex-end; }
.pk-blank i { flex: 1; height: 8mm; border-bottom: 1.6px dotted #8A8A8A; }
.pk-sol li { border-bottom: 1px solid #ddd; padding-bottom: 2mm; }
.pk-sol b, .pk-blank b { font-family: "Plus Jakarta Sans", sans-serif; }
.print-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
@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): with the largest text on a narrow phone the card can
   be taller than the board, so the board's card then grows to hold it (both share one grid cell, in the middle) */
.lk-board-card:has(> .pc-end) { display: grid; }
.lk-board-card:has(> .pc-end) > * { grid-area: 1 / 1; }
.lk-board-card:has(> .pc-end) > .lk-board { align-self: center; }
.lk-board-card > .pc-end { position: relative; inset: auto; }