/* One landscape notebook page in the shared Defterde pencil language.
   Grid, spacing and heading scale follow Türk Daması (defterde/games/turkdamasi): the title sits on the left,
   the score and the turn sit centred over the board, each side column carries a coloured player name. */
@font-face {
  font-family: 'Marck Script';
  src: url('assets/fonts/MarckScript-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #4a4a4a;
  --red-pencil: #b4382e;
  --blue-pencil: #1f3b9b;
  --graphite: #555555;
  --quiet-ink: #69645c;
  --paper: #fbf9f2;
  --grid: rgba(86, 140, 214, .32);
  --paper-grid: 24px;
  --paper-margin: 36px;
  --side: 120px;
  --column-gap: 36px;
  --section-gap: 16px;
  --board-h: clamp(200px, calc(100svh - 586px), 320px);
}

html { background: #b6a58a; color-scheme: light; font-synthesis: none; }
html[data-malzeme="kursunkalem"] body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 320px;
  margin: 0;
  padding: calc(56px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  color: var(--ink);
  font: 400 20px/1.4 'Kalam', cursive;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .22), transparent 70%), url('kit/gren.png'), #b6a58a;
  overflow-x: clip;
}
::selection { color: var(--ink); background: #ead2b4; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button svg { pointer-events: none; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
p, h1, h2 { margin: 0; }
input { font: inherit; color: inherit; caret-color: var(--ink); -webkit-user-select: text; user-select: text; accent-color: var(--red-pencil); }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 2px dashed var(--blue-pencil); outline-offset: 3px; }
.seat-0 { --seat: var(--blue-pencil); }
.seat-1 { --seat: var(--red-pencil); }

/* Page */
.notebook { position: relative; width: 100%; max-width: 980px; margin: auto; }
.back-link {
  position: absolute; top: -52px; left: 16px;
  display: inline-flex; align-items: center; min-height: 44px;
  color: #393732; font: 18px/1 'Patrick Hand', cursive;
  text-decoration: none; text-underline-offset: 4px;
}
.back-link:hover { color: var(--blue-pencil); text-decoration: underline; }
.sayfa {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding: 26px 36px 18px 60px;
}
html[data-malzeme="kursunkalem"] .sayfa { box-shadow: none; }
.sayfa::before, .sayfa::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('kit/gren.png') #f7f4eb;
}
.sayfa::before { z-index: -3; transform: translate(4px, 6px); background-color: #efebdf; box-shadow: 16px 28px 40px -6px rgba(58, 36, 16, .44); }
.sayfa::after { z-index: -2; transform: translate(2px, 3px); }
.paper-surface {
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent var(--paper-margin), rgba(214, 64, 64, .6) var(--paper-margin), rgba(214, 64, 64, .6) calc(var(--paper-margin) + 1px), transparent calc(var(--paper-margin) + 1px)),
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px),
    url('kit/gren.png');
  background-size: 100% 100%, var(--paper-grid) var(--paper-grid), var(--paper-grid) var(--paper-grid), 256px 256px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .85);
}

/* Heading and play area share one three-column grid, so the score sits exactly over the board. */
.heading, .play-area {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
  column-gap: var(--column-gap);
  align-items: start;
}
h1 { grid-column: 1 / 3; grid-row: 1; justify-self: start; margin-top: 8px; font: 400 clamp(40px, 4vw, 52px)/1.15 'Marck Script', cursive; color: var(--ink); white-space: nowrap; }
.title-word { padding: 0 .03em .12em 0; }
.heading .signature { position: absolute; top: -40px; right: 12px; font: 22px/1.4 'Patrick Hand', cursive; color: var(--graphite); }
.pencil-underline { position: relative; display: inline-block; }
.pencil-underline > svg { position: absolute; left: -3%; bottom: -.07em; width: 106%; height: .28em; pointer-events: none; overflow: visible; }
.title-word > svg { bottom: -.06em; height: .2em; }
.turn { grid-column: 2; grid-row: 1; min-width: 0; text-align: center; }
.score { display: flex; flex-direction: column; align-items: center; }
.score-label { font-size: 16px; line-height: 1.15; color: var(--quiet-ink); }
.score-line { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-size: 24px; line-height: 1.3; white-space: nowrap; }
.player-name { display: inline-flex; align-items: center; gap: .35em; color: var(--seat); }
.player-dot { display: inline-flex; width: .5em; height: .55em; }
.player-dot svg { width: 100%; height: 100%; overflow: visible; }
.score-number { color: var(--seat); font-variant-numeric: tabular-nums; }
.score-dash { color: var(--quiet-ink); }
.turn-title { margin-top: 6px; font-size: 32px; line-height: 1.25; color: var(--blue-pencil); }
.turn-title.seat-1 { color: var(--red-pencil); }
.turn-title.done { color: var(--ink); }
.turn-instruction { margin-top: 2px; min-height: 1.45em; font-size: 19px; line-height: 1.45; color: var(--quiet-ink); text-wrap: balance; }

/* Side columns: a coloured name, a quiet label, then the drawing — the same order on every side. */
.side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.side-name { font-size: 22px; font-weight: 400; line-height: 1.3; color: var(--seat, var(--ink)); }
.side-label { font-size: 16px; line-height: 1.2; color: var(--quiet-ink); }
.opponent { grid-column: 1; }
.stock { grid-column: 3; }
.opponent-tiles { display: grid; grid-template-columns: repeat(3, 22px); gap: 8px; justify-content: center; margin-top: 10px; }
.opponent-tiles .tile { width: 22px; height: 44px; }
.opponent-tiles .tile:nth-child(3n + 1) { transform: rotate(-1.5deg); }
.opponent-tiles .tile:nth-child(3n + 2) { transform: translateY(-1px) rotate(.6deg); }
.opponent-tiles.revealed { grid-template-columns: repeat(3, 26px); }
.opponent-tiles.revealed .tile { width: 26px; height: 52px; transform: none; }
.stock-drawing { position: relative; width: 40px; height: 52px; margin-top: 10px; }
.stock-drawing .tile { position: absolute; width: 22px; height: 44px; left: 2px; top: 4px; }
.stock .draw-command { margin-top: 4px; }

/* Board */
.board-region { grid-column: 2; position: relative; min-width: 0; }
.board-guide { position: absolute; inset: 0 0 auto; width: 100%; height: var(--board-h); pointer-events: none; overflow: visible; }
.board-viewport { position: relative; width: 100%; height: var(--board-h); overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.board-viewport, .hand, .opponent-tiles.revealed { scrollbar-width: thin; scrollbar-color: #aaa391 transparent; }
.board-viewport:focus-visible { outline-offset: -3px; }
.board-space { position: relative; width: 720px; height: 288px; }
.board-world { position: absolute; width: 1px; height: 1px; }
.tile { position: relative; display: block; width: 52px; height: 104px; flex-shrink: 0; }
.tile-face { display: block; width: 100%; height: 100%; overflow: visible; }
.placed { position: absolute; width: 48px; height: 96px; margin-left: -24px; margin-top: -48px; }
.placed .tile { width: 100%; height: 100%; }
.placed.is-new > .tile { animation: place-stone 160ms cubic-bezier(.16,1,.3,1); }
.placed.last-played::after { content: ""; position: absolute; inset: -4px; border: 1.5px dashed var(--red-pencil); border-radius: 6px; opacity: .55; pointer-events: none; }
@keyframes place-stone { from { opacity: .45; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
.preview-tile { opacity: .35; }
.end-point { position: absolute; width: 76px; min-height: 48px; padding: 0 4px; border: 0; background: transparent; text-align: center; line-height: 1; }
.end-number { font-size: 24px; color: var(--ink); }
.end-caption { display: block; margin-top: 3px; font-size: 14px; color: var(--quiet-ink); }
.end-point:not(:disabled):hover .end-caption { color: var(--red-pencil); }
.end-point[aria-pressed="true"] .end-caption { color: var(--red-pencil); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.end-shortcuts { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 36px; }
.end-shortcuts .small-command { min-height: 36px; font-size: 16px; text-decoration: none; }
.end-shortcuts [data-jump="left"] { justify-self: start; }
.end-shortcuts [data-jump="right"] { justify-self: end; }
.scroll-note { color: var(--quiet-ink); font-size: 14px; }
.board-empty { position: absolute; width: 260px; margin: -18px 0 0 -130px; color: var(--quiet-ink); font-size: 21px; text-align: center; }

/* Hand */
.hand-region { min-width: 0; text-align: center; }
.hand-heading { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.hand-heading .small-command { min-height: 32px; font-size: 16px; }
.hand { display: flex; justify-content: safe center; align-items: center; gap: 20px; min-height: 128px; padding: 10px 18px 18px; overflow-x: auto; }
.hand-tile { position: relative; flex: 0 0 48px; width: 48px; height: 96px; padding: 0; border: 0; background: none; cursor: var(--kalem-imlec); scroll-margin: 14px; }
.hand-tile .tile { width: 100%; height: 100%; }
.hand-tile .selection-mark { display: none; position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); overflow: visible; }
.hand-tile[aria-pressed="true"] .selection-mark { display: block; }
.hand-tile .playable-mark { position: absolute; left: -1px; width: calc(100% + 2px); height: 12px; bottom: -13px; overflow: visible; }
.hand-tile:focus-visible { outline-offset: 8px; }
.hand-tile[aria-disabled="true"] { cursor: default; }
.hand-tile[aria-disabled="true"] .tile { opacity: .62; }
@media (hover: hover) {
  .hand-tile:not([aria-disabled="true"]):hover .tile { translate: 0 -3px; }
}
.move-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 16px; min-height: 44px; }
.selection-note { color: var(--quiet-ink); font-size: 16px; }

/* Word commands: graphite words with a pencil line underneath (Kit.kalem.dugmeAltiCiz). */
.word-button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 5px 4px 10px; border: 0; background: none; font-size: 23px; line-height: 1.25; white-space: nowrap; color: var(--ink); }
.word-button .yazi { position: relative; }
.word-button .cerceve { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.word-button:disabled { color: #8a8783; }
.word-button:disabled .cerceve { opacity: .35; }
.word-button:not(:disabled):hover { color: #1b367c; }
.play-command { font-size: 24px; }
.draw-command { font-size: 21px; }
.small-command { border: 0; padding: 4px 2px; min-height: 44px; min-width: 44px; background: none; font-size: 17px; color: var(--quiet-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.small-command:not(:disabled):hover { color: var(--blue-pencil); }
.small-command:disabled { opacity: .55; }

/* Footer: game mode on the left (opens settings), word commands and the speaker on the right. */
.footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 2px; }
.mode { min-height: 44px; padding: 4px 0; border: 0; background: none; font-size: 17px; color: var(--quiet-ink); text-align: left; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mode:hover { color: var(--blue-pencil); }
.commands { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 22px; }
.sound { display: inline-flex; flex-direction: column; align-items: center; min-width: 44px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--quiet-ink); }
.sound svg { display: block; width: 34px; height: 31px; overflow: visible; }
.sound-text { font-size: 12px; line-height: 1; }

.result-note { max-width: 640px; margin: 4px auto 0; padding: 8px 0; border-block: 1px solid var(--graphite); }
.result-note h2 { color: var(--red-pencil); font-size: 30px; font-weight: 400; line-height: 1.25; }
.result-note h2.seat-0 { color: var(--blue-pencil); }
.result-note p { margin: 4px 0; font-size: 18px; }
.result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; }

.no-script { color: var(--red-pencil); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Paper notes (settings, help, handover). */
.paper-note {
  color: var(--ink); font: 400 20px/1.5 'Kalam', cursive;
  box-sizing: border-box; width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 32px);
  padding: 28px; border: 0; border-radius: 0;
  box-shadow: 16px 28px 40px -6px rgba(58, 36, 16, .44);
  background: url('kit/gren.png'), var(--paper); overflow: auto;
  scrollbar-color: var(--graphite) var(--paper);
}
.paper-note::backdrop { background: rgba(58, 36, 16, .18); }
.paper-note h2 { font: 400 36px/1.25 'Marck Script', cursive; }
.paper-note p { margin: 12px 0; }
.note-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.note-heading form { margin: 0; }
.note-small { font-size: 17px; color: var(--quiet-ink); }
.primary-command { color: var(--red-pencil); font-size: 22px; }
.help-note { width: min(640px, calc(100% - 24px)); }
.help-note strong { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.rules { margin: 12px 0; padding-left: 26px; }
.rules li { padding-left: 4px; margin-block: 8px; }
.handover-note { text-align: center; }
.paper-note fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.paper-note legend { color: var(--quiet-ink); font-size: 16px; padding: 0; }
.choice-options { display: flex; flex-wrap: wrap; gap: 0 12px; }
.choice { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 6px 8px; cursor: pointer; font-size: 20px; color: var(--quiet-ink); }
.choice span { display: block; line-height: 1.2; white-space: nowrap; }
.choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice-ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible; visibility: hidden; }
.choice:has(input:checked) { color: var(--ink); }
.choice:has(input:checked) .choice-ring { visibility: visible; }
.choice:has(input:focus-visible) { outline: 2px dashed var(--blue-pencil); outline-offset: 3px; }
.choice:has(input:disabled) { opacity: .55; cursor: default; }
.setup-row { display: flex; gap: 22px; margin: 12px 0; }
.setup-row label { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; color: var(--quiet-ink); font-size: 16px; }
.setup-row input { width: 100%; min-height: 44px; padding: 4px 2px; font-size: 20px; color: var(--ink); border: 0; border-bottom: 1px solid var(--graphite); background: transparent; border-radius: 0; }

/* Narrower desktops keep the grid, with slimmer side columns. */
@media (max-width: 1000px) {
  :root { --side: 100px; --column-gap: 24px; }
  .sayfa { padding: 22px 24px 16px 52px; }
  .commands { gap: 6px 16px; }
  .word-button { font-size: 21px; }
  .footer { flex-direction: column-reverse; gap: 0; }
  .commands { justify-content: center; }
  .mode { font-size: 15px; text-align: center; white-space: normal; }
}

/* Tablets and phones: the sides become one row each above the board. */
@media (max-width: 760px) {
  :root { --board-h: 240px; }
  html[data-malzeme="kursunkalem"] body { justify-content: flex-start; }
  .play-area { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .side { grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-align: left; }
  .side-name { font-size: 20px; }
  .opponent { grid-row: 1; }
  .stock { grid-row: 2; }
  .board-region { grid-column: 1; grid-row: 3; }
  .opponent-tiles { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
  .opponent-tiles .tile, .opponent-tiles.revealed .tile { width: 18px; height: 36px; }
  .stock-drawing { width: 34px; height: 40px; margin: 0; }
  .stock-drawing .tile { width: 18px; height: 36px; top: 2px; }
  .stock .draw-command { margin: 0 0 0 auto; }
}

@media (max-width: 599px) {
  :root { --paper-grid: 20px; --paper-margin: 7px; --board-h: 220px; --section-gap: 10px; }
  html[data-malzeme="kursunkalem"] body { padding: calc(48px + env(safe-area-inset-top, 0px)) 8px 12px; font-size: 18px; }
  .sayfa::before { transform: translate(2px, 3px); }
  .sayfa::after { transform: translate(1px, 1.5px); }
  .back-link { top: -48px; left: 10px; }
  .sayfa { padding: 14px 12px 12px 18px; }
  .heading { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
  h1 { grid-column: 1; margin: 0; font-size: clamp(36px, 10vw, 44px); }
  .heading .signature { top: -38px; font-size: 20px; }
  .turn { grid-column: 2; text-align: right; }
  .score { align-items: flex-end; }
  .score-label { font-size: 14px; }
  .score-line { gap: 6px; font-size: clamp(16px, 4.6vw, 20px); }
  .turn-title { margin-top: 2px; font-size: 22px; }
  .turn-instruction { font-size: 15px; line-height: 1.3; }
  .side-name { font-size: 18px; }
  .side-label { font-size: 15px; }
  .end-shortcuts .small-command { padding-inline: 0; font-size: 15px; }
  .scroll-note { font-size: 13px; }
  .hand { gap: 15px; min-height: 120px; padding: 10px 10px 18px; }
  .hand-tile { flex-basis: 44px; width: 44px; height: 88px; }
  .hand-tile .selection-mark { inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); }
  .play-command { font-size: 22px; }
  .selection-note { font-size: 15px; }
  .commands { column-gap: 14px; }
  .word-button { font-size: 20px; padding-inline: 2px; }
  .sound { flex-direction: row; gap: 4px; }
  .sound svg { width: 24px; height: 22px; }
  .sound-text { font-size: 14px; }
  .mode { font-size: 14px; }
  .paper-note { padding: 18px; font-size: 18px; }
  .paper-note h2 { font-size: 32px; }
  .choice { font-size: 19px; }
  .choice-options { gap: 0 8px; }
  .result-note h2 { font-size: 26px; }
  .result-note p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .hand-tile[aria-pressed="true"], .end-point[aria-pressed="true"], .choice:has(input:checked) { outline: 2px solid Highlight; }
  .hand-tile[aria-disabled="false"] { border-bottom: 2px solid CanvasText; }
  .tile-face { forced-color-adjust: none; }
}
@media print {
  .back-link, .sayfa::before, .sayfa::after { display: none; }
  .paper-note, .paper-surface { box-shadow: none; }
}