/* Minik Sudoku — "Sakin su". Tek stil dosyası; renkler tema değişkenlerinden gelir. */

/* Üç tema: Gündüz (varsayılan, açık), Gece (koyu), Gül. Tema düğmesi sırayla
   data-theme'i light → dark → rose yapar; seçilmemişse sistem tercihi. */
:root {
  color-scheme: light;
  --bg: #eef1fb;
  --surface: #ffffff;
  --surface-2: #f4f6fc;
  --chip: #e3e9f8;
  --ink: #16204a;
  --ink-2: #3a4674;
  --muted: #56608a;
  --border: #dfe5f4;
  --line: #e5eaf6;
  --box: #2f55c8;
  --primary: #2f55c8;
  --primary-hover: #2446a8;
  --on-primary: #ffffff;
  --citron: #e7ee9f;
  --citron-border: #d9e08a;
  --on-citron: #1b2248;
  --user: #2f55c8;
  --link: #2446a8;
  --related: #e9effd;
  --same: #d3defe;
  --same-ink: #16204a;
  --sel: #2f55c8;
  --sel-ink: #ffffff;
  --sel-note: #e7ee9f;
  --err-bg: #fde2da;
  --err-ink: #b3321a;
  --hint-area: #f2f6d2;
  --hint-ring: #2f55c8;
  --hint-card: #2f55c8;
  --hint-card-ink: #ffffff;
  --won: #e6efd8;
  --flash: #d3defe;
  --ok-dot: #2f8a5b;
  --ok-ink: #23704a;
  --wave: #2f55c8;
  --wave-alpha: 0.06;
  --focus: #c2410c;
  --shadow-board: 0 2px 6px #1b2e6e0f, 0 18px 44px #1b2e6e17;
  --shadow-soft: 0 1px 2px #1b2e6e12, 0 6px 18px #1b2e6e0f;
  --tile: #e6ecfa;
  --key: #ffffff;
  --key-ink: #2f55c8;
  --theme-chip: #e4ebff;
  --accent: #e7ee9f;
  --accent-ink: #1b2248;
  --lift: 0 2px 4px #1b2e6e14, 0 10px 24px #1b2e6e1a;
  --radius: 18px;
  --display: "Marcellus", Georgia, serif;
  --body: "Manrope", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-travel: cubic-bezier(0.45, 0.05, 0.35, 1);
  --dur-in: 520ms;
  --step: 40ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0b1230;
    --surface: #131c40;
    --surface-2: #18224b;
    --chip: #1d2853;
    --ink: #eef1ff;
    --ink-2: #c8cff0;
    --muted: #9aa4cc;
    --border: #2a3566;
    --line: #253061;
    --box: #7d97f5;
    --primary: #e5ec9e;
    --primary-hover: #eef3b8;
    --on-primary: #111a3c;
    --citron: #e5ec9e;
    --citron-border: #e5ec9e;
    --on-citron: #111a3c;
    --user: #a9bcff;
    --link: #a9bcff;
    --related: #1c2856;
    --same: #2b3b7a;
    --same-ink: #ffffff;
    --sel: #e5ec9e;
    --sel-ink: #111a3c;
    --sel-note: #2446a8;
    --err-bg: #45201c;
    --err-ink: #ff9d85;
    --hint-area: #1f2a5e;
    --hint-ring: #e5ec9e;
    --hint-card: #2446a8;
    --hint-card-ink: #fffef6;
    --won: #1f2c5c;
    --flash: #3a4a9a;
    --ok-dot: #c9d56b;
    --ok-ink: #c9d56b;
    --wave: #2446a8;
    --wave-alpha: 0.26;
    --focus: #ffb86b;
    --shadow-board: 0 18px 44px #00000059;
    --shadow-soft: 0 8px 22px #00000033;
    --tile: #1c2654;
    --key: #141d43;
    --key-ink: #b3c3ff;
    --theme-chip: #1d2853;
    --accent: #e5ec9e;
    --accent-ink: #111a3c;
    --lift: 0 10px 24px #00000047;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1230;
  --surface: #131c40;
  --surface-2: #18224b;
  --chip: #1d2853;
  --ink: #eef1ff;
  --ink-2: #c8cff0;
  --muted: #9aa4cc;
  --border: #2a3566;
  --line: #253061;
  --box: #7d97f5;
  --primary: #e5ec9e;
  --primary-hover: #eef3b8;
  --on-primary: #111a3c;
  --citron: #e5ec9e;
  --citron-border: #e5ec9e;
  --on-citron: #111a3c;
  --user: #a9bcff;
  --link: #a9bcff;
  --related: #1c2856;
  --same: #2b3b7a;
  --same-ink: #ffffff;
  --sel: #e5ec9e;
  --sel-ink: #111a3c;
  --sel-note: #2446a8;
  --err-bg: #45201c;
  --err-ink: #ff9d85;
  --hint-area: #1f2a5e;
  --hint-ring: #e5ec9e;
  --hint-card: #2446a8;
  --hint-card-ink: #fffef6;
  --won: #1f2c5c;
  --flash: #3a4a9a;
  --ok-dot: #c9d56b;
  --ok-ink: #c9d56b;
  --wave: #2446a8;
  --wave-alpha: 0.26;
  --focus: #ffb86b;
  --shadow-board: 0 18px 44px #00000059;
  --shadow-soft: 0 8px 22px #00000033;
  --tile: #1c2654;
  --key: #141d43;
  --key-ink: #b3c3ff;
  --theme-chip: #1d2853;
  --accent: #e5ec9e;
  --accent-ink: #111a3c;
  --lift: 0 10px 24px #00000047;
}
:root[data-theme="rose"] {
  color-scheme: light;
  --bg: #fbf1f4;
  --surface: #ffffff;
  --surface-2: #fdf6f8;
  --chip: #f6e2e8;
  --ink: #3a1624;
  --ink-2: #5e3446;
  --muted: #84596a;
  --border: #f0dbe2;
  --line: #f1dce3;
  --box: #b83a62;
  --primary: #b83a62;
  --primary-hover: #9e2f53;
  --on-primary: #ffffff;
  --citron: #ffdcc8;
  --citron-border: #f5c6ab;
  --on-citron: #5a2a10;
  --user: #b83a62;
  --link: #a3304f;
  --related: #fbebf0;
  --same: #f5d0db;
  --same-ink: #3a1624;
  --sel: #b83a62;
  --sel-ink: #ffffff;
  --sel-note: #ffdcc8;
  --err-bg: #fde0d6;
  --err-ink: #a3240f;
  --hint-area: #fdeee4;
  --hint-ring: #b83a62;
  --hint-card: #b83a62;
  --hint-card-ink: #ffffff;
  --won: #fbe7ee;
  --flash: #f5d0db;
  --ok-dot: #3f9e72;
  --ok-ink: #2b7552;
  --wave: #c2456b;
  --wave-alpha: 0.06;
  --focus: #7a3cc2;
  --shadow-board: 0 2px 6px #6e1b3a0f, 0 18px 44px #6e1b3a17;
  --shadow-soft: 0 1px 2px #6e1b3a12, 0 6px 18px #6e1b3a0f;
  --tile: #f8e5eb;
  --key: #ffffff;
  --key-ink: #b83a62;
  --theme-chip: #fbe3ea;
  --accent: #ffdcc8;
  --accent-ink: #5a2a10;
  --lift: 0 2px 4px #6e1b3a14, 0 10px 24px #6e1b3a1a;
}

/* ---------- Temel ---------- */
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 500 15px/1.45 var(--body);
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[hidden] {
  display: none !important;
}

/* ---------- Dalgalar ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: var(--wave);
  opacity: var(--wave-alpha);
  /* Oyun alanının arkasında sakin, kenarlarda canlı. */
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 52%, #0000004d 0%, #000 90%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 52%, #0000004d 0%, #000 90%);
}
.backdrop .layer {
  position: absolute;
  inset: -8%;
  will-change: transform;
  animation: drift-a 47s var(--ease-travel) infinite alternate;
}
.backdrop .layer svg,
.art > svg.waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes drift-a {
  to {
    transform: translate3d(-2.5%, 1.5%, 0) scale(1.05);
  }
}
/* Tam renkli dalga sanatı (diyalog başlıkları, duraklatma). */
.art {
  position: relative;
  overflow: hidden;
  background: #2446a8;
  color: #e6ec9f;
}
.art > svg.waves {
  inset: -6%;
  width: 112%;
  height: 112%;
  will-change: transform;
  animation: drift-a 23s var(--ease-travel) infinite alternate;
}

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.35s var(--ease-spring),
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
  }
}
.btn-ghost {
  border-color: var(--border);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 600;
}
@media (hover: hover) {
  .btn-ghost:hover:not(:disabled) {
    background: var(--surface-2);
  }
}
.btn-citron {
  background: var(--citron);
  color: var(--on-citron);
}
.btn-icon {
  width: 44px;
  padding: 0;
  border-color: var(--border);
  background: var(--surface);
  color: var(--ink-2);
}
@media (hover: hover) {
  .btn-icon:hover:not(:disabled) {
    background: var(--surface-2);
  }
}
.btn-small {
  width: 36px;
  min-height: 36px;
}
.btn-plain {
  border-color: transparent;
  background: transparent;
  color: inherit;
}
.btn-block {
  width: 100%;
}
.btn-link {
  min-height: 44px;
  padding: 0 8px;
  color: var(--link);
  font-weight: 700;
}
@media (hover: hover) {
  .btn-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.btn-muted {
  color: var(--muted);
}

/* ---------- Düzen ---------- */
.app {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "bar" "board" "panel";
  gap: 12px;
}
.topbar {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}
.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  flex: none;
}
.brand-name {
  font: 400 22px/1 var(--display);
  letter-spacing: 0.2em;
}
.top-actions {
  display: flex;
  gap: 8px;
}
.label-wide {
  display: none;
}
.top-actions #howtoBtn,
.top-actions #statsBtn {
  width: 44px;
  padding: 0;
}

.bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(6px);
}
.segmented button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out);
}
.segmented button[aria-checked="true"] {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}
.timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 20px var(--body);
  font-variant-numeric: tabular-nums;
}
.timer .btn-small {
  border: 0;
  background: var(--chip);
  color: var(--ink);
}

/* ---------- Tahta ---------- */
.board-area {
  grid-area: board;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.board-wrap {
  position: relative;
  width: min(100%, 560px, calc(100dvh - 340px));
  min-width: min(100%, 300px);
}
.board {
  container-type: inline-size;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  border: 2.5px solid var(--box);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-board);
  user-select: none;
}
.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: 800 clamp(16px, 5.5cqi, 32px) / 1 var(--body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color 0.16s var(--ease-out),
    color 0.16s var(--ease-out);
}
.cell.br {
  border-right: 2px solid var(--box);
}
.cell.bb {
  border-bottom: 2px solid var(--box);
}
.cell.er {
  border-right: 0;
}
.cell.eb {
  border-bottom: 0;
}
.cell:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  z-index: 1;
}
.cell.user {
  color: var(--user);
  font-weight: 600;
}
.cell.related {
  background: var(--related);
}
.cell.same {
  background: var(--same);
  color: var(--same-ink);
}
.cell.hint-area {
  background: var(--hint-area);
}
.cell.selected {
  background: var(--sel);
  color: var(--sel-ink);
}
.cell.selected .notes {
  color: var(--sel-note);
}
.cell.hint-target {
  background: var(--hint-area);
  box-shadow: inset 0 0 0 3px var(--hint-ring);
}
.cell.hint-target::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--hint-ring);
  opacity: 0;
  animation: ping 1.1s var(--ease-out) 2;
}
@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}
.cell.wrong {
  background: var(--err-bg);
  color: var(--err-ink);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--err-ink) 55%, transparent);
}
.cell.wrong::after {
  content: "";
  position: absolute;
  top: 12%;
  right: 12%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--err-ink);
}
.cell.uncertain {
  background: var(--hint-area);
  box-shadow: inset 0 0 0 2px var(--citron-border);
}
.cell.won {
  background: var(--won);
}
.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: 82%;
  height: 82%;
  color: var(--muted);
  font: 700 clamp(9px, 2.1cqi, 13px) / 1 var(--body);
}
.notes span {
  display: grid;
  place-items: center;
}
.notes span.hl {
  color: var(--user);
  font-weight: 800;
}
.cell.selected .notes span.hl {
  color: var(--sel-ink);
}
.pause-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  border-radius: var(--radius);
  overflow: hidden;
  font: 400 26px var(--display);
  letter-spacing: 0.06em;
  color: #fffef6;
}
.pause-cover .art {
  position: absolute;
  inset: 0;
}
.pause-cover > *:not(.art) {
  position: relative;
}
.pause-cover p {
  margin: 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: #2446a8e6;
}
.pause-cover .btn-primary {
  background: #e6ec9f;
  color: #121c3f;
}
.legend {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 18px;
  font-size: 13px;
  color: var(--muted);
}
.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sw {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.sw-given {
  background: var(--surface);
  border: 1.5px solid var(--ink);
}
.sw-user {
  background: var(--user);
}
.sw-wrong {
  background: var(--err-bg);
  border: 1.5px solid var(--err-ink);
}

/* ---------- Panel ---------- */
.panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.meta {
  display: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.card {
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
}
.status {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink-2);
}
.status .icon {
  margin-top: 1px;
  color: var(--ok-dot);
}
.status.error {
  border-color: color-mix(in srgb, var(--err-ink) 35%, transparent);
  background: var(--err-bg);
  color: var(--err-ink);
}
.status.error .icon {
  color: var(--err-ink);
}
.hint {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--hint-card);
  color: var(--hint-card-ink);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--hint-card) 25%, transparent);
}
.hint-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hint-head b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
}
.hint p {
  margin: 0;
  line-height: 1.5;
}
#hintBefore:empty {
  display: none;
}
.hint .before {
  padding: 8px 12px;
  border-radius: 12px;
  background: #ffffff1f;
  font-size: 13px;
}
.hint-actions {
  display: flex;
  gap: 8px;
}
.hint-actions .btn-citron {
  flex: 1;
}
.hint-actions .btn-ghost {
  background: transparent;
  border-color: #ffffff59;
  color: var(--hint-card-ink);
}
.setup-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1.5px dashed var(--box);
}
.setup-banner p {
  margin: 4px 0 0;
  color: var(--muted);
}
.setup-actions {
  display: flex;
  gap: 8px;
}
.setup-actions .btn-primary {
  flex: 1;
}

.tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.tool {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease-spring),
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
@media (hover: hover) {
  .tool:hover:not(:disabled) {
    background: var(--surface-2);
  }
}
.tool:active:not(:disabled) {
  transform: scale(0.96);
}
.tool:disabled {
  opacity: 0.45;
  cursor: default;
}
.tool[aria-pressed="true"],
.tool[aria-pressed="true"]:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}
.tool-citron {
  border-color: var(--citron-border);
  background: var(--citron);
  color: var(--on-citron);
  font-weight: 800;
}
@media (hover: hover) {
  .tool-citron:hover:not(:disabled) {
    background: var(--citron);
    filter: brightness(1.04);
  }
}

.numpad {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 5px;
}
.key {
  min-height: 60px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--user);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.35s var(--ease-spring),
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
@media (hover: hover) {
  .key:hover:not(:disabled) {
    background: var(--surface-2);
  }
}
.key:active:not(:disabled) {
  transform: scale(0.94);
}
.key:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}
.key b {
  font: 700 24px/1 var(--body);
}
.key small {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.key.done {
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
}
.key.done small {
  color: var(--ok-ink);
}
.panel.note-mode .key b {
  font-size: 17px;
}

.extras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
}
.extras .icon {
  width: 18px;
  height: 18px;
}

/* ---------- Diyaloglar ---------- */
.sheet {
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: auto 0 0;
  padding: 24px 20px calc(22px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 28px 28px 0 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 -16px 50px #0b123040;
}
.sheet[open] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: sheet-in 0.42s var(--ease-out);
}
.sheet::backdrop {
  background: #0b123066;
  backdrop-filter: blur(3px);
  animation: fade-in 0.3s var(--ease-out);
}
@keyframes sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
.sheet h2 {
  margin: 0;
  font: 800 24px/1.2 var(--body);
  letter-spacing: -0.01em;
}
.sheet p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.5;
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sheet-head > .btn-icon {
  flex: none;
}
.sheet-head p {
  margin-top: 6px;
  font-size: 14px;
}
.kicker {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-actions-row {
  flex-direction: row;
  justify-content: flex-end;
}
/* Dalga başlıklı diyalog (kazanma, nasıl oynanır). */
.sheet-art {
  padding-top: 0;
}
.sheet-art > .art {
  margin: 0 -20px;
  height: 150px;
  flex: none;
}
.sheet-art > .art .art-title {
  position: absolute;
  left: 22px;
  bottom: 16px;
  margin: 0;
  font: 400 38px/1 var(--display);
  letter-spacing: 0.06em;
  color: #fffef6;
  text-shadow: 0 2px 18px #12208066;
}
.sheet-art .sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: #2446a8cc;
  color: #fffef6;
}
.rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.rules figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.mini {
  width: 78px;
  height: 78px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}
.mini i {
  border-radius: 6px;
  background: var(--chip);
}
.mini-row i:nth-child(n + 4):nth-child(-n + 6),
.mini-col i:nth-child(3n + 2),
.mini-box i {
  background: var(--box);
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
}
.steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.steps li p {
  margin: 4px 0 0;
  font-size: 14px;
}
.steps li > span {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 999px;
  background: var(--related);
  color: var(--user);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.steps li > span.warm {
  background: var(--citron);
  color: var(--on-citron);
}
.stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.stats div {
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-2);
}
.stats dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.stats dd {
  margin: 4px 0 0;
  font: 800 20px var(--body);
  font-variant-numeric: tabular-nums;
}
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease-spring),
    background-color 0.2s;
}
@media (hover: hover) {
  .choice:hover {
    background: var(--surface-2);
  }
}
.choice:active {
  transform: scale(0.98);
}
.choice .icon {
  width: 24px;
  height: 24px;
  color: var(--user);
}
.choice span {
  display: flex;
  flex-direction: column;
}
.choice small {
  color: var(--muted);
  font-size: 13px;
}
.crop-stage {
  position: relative;
  max-height: 55dvh;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1230;
  display: grid;
  place-items: center;
}
.crop-stage canvas {
  display: block;
  max-width: 100%;
  max-height: 55dvh;
  touch-action: none;
  cursor: crosshair;
}
.crop-hint {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  background: #0b1230d9;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- Arkadaşınla yarış ---------- */
body[data-mode="race"] .solo-only,
body:not([data-mode="race"]) .race-only {
  display: none !important;
}
.btn-race {
  width: 44px;
  padding: 0;
  border-color: var(--citron-border);
  background: var(--citron);
  color: var(--on-citron);
}
.label-mid {
  display: none;
}
@media (hover: hover) {
  .btn-race:hover:not(:disabled) {
    background: color-mix(in srgb, var(--citron) 82%, var(--ink));
  }
}
.rival {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  font-size: 14px;
}
.rival b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rival small {
  grid-column: 3;
  grid-row: 1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rival-dot,
.seat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok-dot);
}
.rival[data-state="away"] .rival-dot {
  background: var(--muted);
}
.rival[data-state="done"] .rival-dot {
  background: var(--primary);
}
.rival-track {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 6px;
  border-radius: 99px;
  background: var(--chip);
  overflow: hidden;
}
.rival-track i {
  display: block;
  height: 100%;
  background: var(--box);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
body[data-mode="race"] .tools {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.race-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fffef6;
  text-align: center;
}
.race-cover .art {
  position: absolute;
  inset: 0;
}
.race-cover > *:not(.art) {
  position: relative;
}
.race-count {
  margin: 0;
  min-width: 2.2em;
  padding: 4px 22px;
  border-radius: 999px;
  background: #2446a8e6;
  font: 400 64px/1.1 var(--display);
  animation: pop 0.4s var(--ease-spring);
}
.race-cover small {
  padding: 4px 12px;
  border-radius: 999px;
  background: #0b1230b3;
  font-size: 13px;
  font-weight: 700;
}
.race-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--citron-border);
  background: var(--citron);
  color: var(--on-citron);
  font-weight: 600;
}
.race-notice[data-type="warn"] {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
}
.race-notice[data-type="error"] {
  border-color: color-mix(in srgb, var(--err-ink) 35%, transparent);
  background: var(--err-bg);
  color: var(--err-ink);
}
.race-notice .icon {
  flex: none;
  margin-top: 1px;
}
.race-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.race-step[hidden],
.race-links:empty {
  display: none;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.field input,
.invite-link input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font: 600 16px var(--body);
}
.field input:focus-visible,
.invite-link input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}
.fine {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.race-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}
.race-level {
  align-self: stretch;
}
.race-level button {
  flex: 1;
  min-height: 44px;
}
.race-rules {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.race-error {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--err-bg);
  color: var(--err-ink) !important;
  font-size: 14px;
  font-weight: 600;
}
.invite-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.invite-link input {
  grid-column: 1 / -1;
  font-size: 14px;
}
.invite-link:has(#raceShare:not([hidden])) {
  grid-template-columns: 1fr 1fr;
}
.invite-link[hidden] {
  display: none;
}
.seats,
.podium {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.seats li,
.podium li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.seats li b,
.podium li b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seats small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.seats li.empty {
  border-style: dashed;
  color: var(--muted);
}
.seats li.empty .seat-dot {
  background: var(--border);
}
.seats li:not(.ready):not(.empty) .seat-dot {
  background: var(--citron-border);
}
.seats li.ready {
  border-color: color-mix(in srgb, var(--ok-dot) 50%, var(--border));
}
.seats li.ready small {
  color: var(--ok-ink);
}
#raceReady[aria-pressed="true"] {
  background: var(--citron);
  color: var(--on-citron);
}
.podium .rank {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--chip);
  font-weight: 800;
}
.podium li.first {
  border-color: var(--citron-border);
  background: color-mix(in srgb, var(--citron) 45%, var(--surface));
}
.podium li.first .rank {
  background: var(--primary);
  color: var(--on-primary);
}
.podium .time {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.result-diff {
  text-align: center;
  font-weight: 700;
}

/* ---------- Hareket ---------- */
/* Açılış: bölümler sırayla yükselir. */
.app > * {
  animation: rise var(--dur-in) var(--ease-out) backwards;
}
.app > .bar {
  animation-delay: calc(var(--step) * 1);
}
.app > .board-area {
  animation-delay: calc(var(--step) * 2);
}
.app > .panel {
  animation-delay: calc(var(--step) * 3);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
/* Yeni oyun: hücreler çapraz dalga halinde belirir (--d: gecikme). */
.board.reveal .cell {
  animation: cell-in 0.36s var(--ease-out) backwards;
  animation-delay: var(--d);
}
@keyframes cell-in {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
}
/* Rakam koyma: küçük yay. */
.cell.pop {
  animation: pop 0.24s var(--ease-spring);
}
@keyframes pop {
  from {
    transform: scale(0.72);
  }
}
/* Satır/sütun/kutu tamamlandı: tek seferlik ışıltı. */
.cell.flash::before,
.board.win .cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--flash);
  opacity: 0;
  animation: flash 0.7s var(--ease-out) backwards;
  animation-delay: var(--d);
  pointer-events: none;
}
.cell.flash > *,
.board.win .cell > * {
  position: relative;
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}
.board.win .cell::before {
  animation-duration: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::backdrop,
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
    transition: none !important;
  }
}

/* Yarış girişi: 420 px'ten sonra kısa etiket, 560 px'ten sonra tam etiket. */
@media (min-width: 420px) and (max-width: 559px) {
  .btn-race {
    width: auto;
    padding: 0 14px;
  }
  .btn-race .label-mid {
    display: inline;
  }
}

/* ---------- Dar telefon: zorluk seçimi kendi satırında ---------- */
@media (max-width: 419px) {
  .bar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .segmented {
    flex: 1 0 100%;
  }
  .segmented button {
    flex: 1;
  }
}

/* ---------- Geniş ekran ---------- */
@media (min-width: 560px) {
  .label-wide {
    display: inline;
  }
  .label-narrow {
    display: none;
  }
  .top-actions #howtoBtn,
  .top-actions #statsBtn {
    width: auto;
    padding: 0 16px;
  }
  .btn-race {
    width: auto;
    padding: 0 16px;
  }
  .btn-race .label-mid {
    display: none;
  }
  .sheet {
    width: min(460px, calc(100% - 32px));
    margin: auto;
    padding: 26px 24px 24px;
    border-radius: 26px;
    box-shadow: 0 30px 80px #0b123040;
  }
  .sheet-art {
    padding-top: 0;
  }
  .sheet-art > .art {
    margin: 0 -24px;
  }
  .crop-dialog {
    width: min(620px, calc(100% - 32px));
  }
}

@media (min-width: 900px) {
  .app {
    padding: 0 40px 40px;
    grid-template-columns: minmax(0, 560px) minmax(320px, 420px);
    grid-template-areas: "header header" "board bar" "board panel";
    grid-template-rows: auto auto 1fr;
    justify-content: center;
    column-gap: 56px;
    row-gap: 16px;
  }
  .topbar {
    min-height: 88px;
    margin-bottom: 16px;
  }
  .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .brand-name {
    font-size: 28px;
  }
  .board-area {
    align-items: flex-start;
  }
  .board-wrap {
    width: min(100%, 560px, calc(100dvh - 180px));
  }
  .legend {
    display: flex;
  }
  .bar {
    flex-wrap: wrap;
    align-self: start;
  }
  .meta {
    display: block;
  }
  .panel {
    gap: 16px;
  }
  .tool {
    min-height: 68px;
    border-radius: 18px;
  }
  .numpad {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .key {
    min-height: 72px;
    border-radius: 20px;
  }
  .key b {
    font-size: 30px;
  }
  .key small {
    font-size: 12px;
  }
  .panel.note-mode .key b {
    font-size: 22px;
  }
  .extras {
    justify-content: flex-start;
  }
}

/* ==== Paket A: düzen ==== */

/* Küçük ikon düğmeleri (duraklat, ipucu kapat): dokunma hedefi ≥44px. */
.btn-icon.btn-small {
  width: 44px;
  min-height: 44px;
}

/* Yazı boyutu ayarı: "Aa" düğmesi ile Normal/Büyük; localStorage'da saklanır,
   ilk boyamadan önce (index.html'deki satır içi betik) uygulanır. */
#textSizeBtn .text-size-icon {
  font: 800 12px/1 var(--body);
  letter-spacing: -0.02em;
}
:root[data-text-size="large"] body {
  font-size: 16.5px;
}
:root[data-text-size="large"] .cell {
  font: 800 clamp(19px, 6.4cqi, 37px) / 1 var(--body);
}
:root[data-text-size="large"] .notes {
  font: 700 clamp(11px, 2.5cqi, 15px) / 1 var(--body);
}
:root[data-text-size="large"] .key b {
  font-size: 28px;
}
:root[data-text-size="large"] .key small {
  font-size: 12.5px;
}
:root[data-text-size="large"] .tool {
  font-size: 14.5px;
}
:root[data-text-size="large"] .btn {
  font-size: 15.5px;
}
:root[data-text-size="large"] .segmented button {
  font-size: 15px;
}
:root[data-text-size="large"] .timer {
  font-size: 22px;
}
:root[data-text-size="large"] .card,
:root[data-text-size="large"] .status,
:root[data-text-size="large"] .hint,
:root[data-text-size="large"] .setup-banner p {
  font-size: 15.5px;
}
@media (min-width: 900px) {
  :root[data-text-size="large"] .key b {
    font-size: 34px;
  }
}

/* İpucu kartı: dar/kısa ekranlarda tahtanın üstüne biner (main.js konumlar),
   böylece altındaki sayı tuşları yerinde kalır ve sayfa kaymaz. Alternatif
   olan alt sayfa (bottom sheet) yerine bunu seçtik: numpad zaten panelin en
   altında, bir alt sayfa tam onun üstüne oturup onu kapatırdı; tahtanın
   üstü ise ipucu anında göz ardı edilebilecek tek boş alan. */
.hint-overlay {
  position: fixed;
  top: var(--hint-top, 12px);
  left: var(--hint-left, 12px);
  width: var(--hint-width, calc(100% - 24px));
  max-height: var(--hint-max-height, 60dvh);
  overflow-y: auto;
  z-index: 5;
  box-shadow: 0 20px 44px #00000040;
}

/* Sayı tuşları: dar/kısa ekranlarda tek sıra 9 yerine 5+4 iki sıra, her tuş
   ≥44px genişlik (390px'te tek sırada 35px'ti). Tuş DOM'u değişmedi. */
@media (max-width: 480px), (max-height: 520px) and (orientation: landscape) {
  .numpad {
    grid-template-columns: repeat(20, minmax(0, 1fr));
    grid-auto-rows: minmax(44px, auto);
    gap: 6px;
  }
  .key {
    min-height: 44px;
  }
  .key b {
    font-size: 20px;
  }
  .numpad .key:nth-child(1) {
    grid-column: 1 / 5;
    grid-row: 1;
  }
  .numpad .key:nth-child(2) {
    grid-column: 5 / 9;
    grid-row: 1;
  }
  .numpad .key:nth-child(3) {
    grid-column: 9 / 13;
    grid-row: 1;
  }
  .numpad .key:nth-child(4) {
    grid-column: 13 / 17;
    grid-row: 1;
  }
  .numpad .key:nth-child(5) {
    grid-column: 17 / 21;
    grid-row: 1;
  }
  .numpad .key:nth-child(6) {
    grid-column: 3 / 7;
    grid-row: 2;
  }
  .numpad .key:nth-child(7) {
    grid-column: 7 / 11;
    grid-row: 2;
  }
  .numpad .key:nth-child(8) {
    grid-column: 11 / 15;
    grid-row: 2;
  }
  .numpad .key:nth-child(9) {
    grid-column: 15 / 19;
    grid-row: 2;
  }
}

/* Dar telefon (≤480px): tahtaya ayrılan yükseklik, iki sıralı tuş takımına
   göre büyütüldü (yoksa numpad ekranın altından taşardı). */
@media (max-width: 480px) {
  .board-wrap {
    width: min(100%, 560px, calc(100dvh - 400px));
  }
}

/* Yatay telefon (844×390, 740×360 gibi): tahta solda, araçlar + sayı tuşları
   sağda, sayfa kaydırmasız. Tablet/masaüstü (≥900px) bu bloktan etkilenmez. */
@media (max-height: 520px) and (orientation: landscape) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
  .app {
    height: 100dvh;
    max-height: 100dvh;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    /* Sabit (auto değil) sütun: board-wrap'in min(%100, ...) genişliği,
       auto/intrinsic sütunlarda yüzdesi 0'a çözüldüğü için tahtayı
       görünmez yapıyordu (0px sütun genişliği). */
    grid-template-columns: calc(100dvh - 16px) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "board header" "board bar" "board panel";
    column-gap: 12px;
    row-gap: 6px;
  }
  .topbar {
    min-height: 34px;
  }
  .brand-name {
    display: none;
  }
  .top-actions {
    gap: 6px;
  }
  /* Yatay modda genişlik kısıtlı: geniş ekran etiketlerini değil, kompakt
     (simge + kısa etiket / yalnız simge) biçimi kullan. */
  .label-wide {
    display: none;
  }
  .btn-race {
    width: auto;
    padding: 0 12px;
  }
  .btn-race .label-mid {
    display: inline;
  }
  .top-actions #howtoBtn {
    width: 44px;
    padding: 0;
  }
  .board-area {
    height: 100%;
    min-height: 0;
    justify-content: center;
    gap: 0;
    padding: 0;
  }
  .board-wrap {
    width: min(100%, calc(100dvh - 16px));
    margin: auto;
  }
  .legend,
  .meta {
    display: none;
  }
  .bar {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .bar .btn {
    padding: 0 10px;
    font-size: 12.5px;
    min-height: 38px;
  }
  .segmented {
    padding: 3px;
  }
  .segmented button {
    padding: 0 8px;
    min-height: 30px;
    font-size: 12.5px;
  }
  .timer {
    font-size: 16px;
    gap: 4px;
  }
  .panel {
    min-height: 0;
    overflow-y: auto;
    gap: 6px;
  }
  .tool {
    min-height: 44px;
    font-size: 11.5px;
  }
  .key {
    min-height: 44px;
  }
  .key b {
    font-size: 18px;
  }
}

/* ==== Paket B: ilerleme ==== */
.stats-levels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stats-level {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--surface-2);
}
.stats-level h3 {
  margin: 0 0 8px;
  font: 700 15px var(--body);
  color: var(--ink-2);
}
.stats-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stats-4 div {
  padding: 10px 12px;
  background: var(--surface);
}
.stats-4 dd {
  font-size: 17px;
}

/* ==== Entegrasyon: üst menü ==== */
/* Yarış + istatistik üst çubukta kalır; yardım, yazı boyutu ve tema dar ya da
   kısa (yatay telefon) ekranda "Ayarlar" menüsüne girer. Geniş ekranda menü
   kutusu display: contents olur, düğmeler eskisi gibi satırda görünür. */
.top-menu-btn {
  display: none;
}
@media (min-width: 560px) and (min-height: 521px),
  (min-width: 560px) and (orientation: portrait) {
  .top-menu[popover] {
    display: contents;
  }
}
@media (max-width: 559px), (max-height: 520px) and (orientation: landscape) {
  .top-menu-btn {
    display: inline-flex;
  }
  .top-menu:popover-open {
    position: fixed;
    inset: 64px 16px auto auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-soft);
  }
  .top-menu .btn {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 14px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    font-weight: 500;
  }
  @media (hover: hover) {
    .top-menu .btn:hover:not(:disabled) {
      background: var(--chip);
      box-shadow: none;
      transform: none;
    }
  }
  .top-menu .btn:active:not(:disabled) {
    background: var(--chip);
  }
  .top-menu #howtoBtn,
  .top-menu #statsBtn {
    width: 100%;
    padding: 0 14px;
  }
  .top-menu .label-wide {
    display: none;
  }
  .top-menu .label-narrow {
    display: inline !important;
    position: static !important;
    width: auto;
    height: auto;
    clip: auto;
    margin: 0;
    overflow: visible;
    white-space: nowrap;
  }
  .top-menu #textSizeBtn::after,
  .top-menu #themeBtn::after {
    content: attr(aria-label);
  }
  .top-menu #textSizeBtn[aria-pressed="true"]::after {
    content: "Büyük yazı · açık";
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .top-menu:popover-open {
    inset: 8px 8px auto auto;
  }
}

/* ==== Paket D: önce rakam ==== */
/* Rakam-önce giriş: hücre seçili değilken tuşa basınca o rakam "etkin" olur.
   Etkin tuş rengin yanında çerçeve farkıyla da ayrışır (renk körlüğü);
   hedef hücreler nokta + çerçeveyle işaretlenir, yalnız arka plan rengine
   dayanmaz. */
.key.active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  box-shadow:
    inset 0 0 0 2px var(--on-primary),
    var(--shadow-soft);
}
@media (hover: hover) {
  /* .key:hover:not(:disabled) daha yüksek özgüllükte olduğundan açıkça ez. */
  .key.active:hover:not(:disabled) {
    background: var(--primary);
  }
}
.key.active b,
.key.active small {
  color: var(--on-primary);
}
.cell.target {
  box-shadow: inset 0 0 0 2px var(--primary);
}
.cell.target::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  transform: translateX(-50%);
}
.cell.target.same {
  box-shadow: inset 0 0 0 2px var(--same-ink);
}
/* ==== Paket C: günlük ==== */
/* Tek satır: dar ekranlarda dahi numpad'i aşağı itmemesi için ortadaki metin
   kısalır (ellipsis), ikon/rozet/düğme sabit kalır — dikey yer kaplamaz. */
.daily-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
}
.daily-card > .icon {
  flex: none;
  color: var(--box);
}
.daily-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}
.daily-text b {
  flex: none;
  color: var(--ink);
  font-size: 13px;
}
.daily-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--muted);
}
.daily-done {
  flex: none;
  color: var(--ok-ink);
  font-weight: 800;
}
.daily-streak {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}
.daily-btn {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
}
.daily-win-streak {
  margin: -4px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  text-align: center;
}
.daily-win-streak:empty {
  display: none;
}
@media (max-width: 380px) {
  .daily-text b {
    display: none; /* çok dar ekranda yalnız tarih/zorluk ve düğme kalsın */
  }
}

/* ==== Entegrasyon: günlük kartın yeri ==== */
/* Kart .bar içinde: geniş ekranda kendi satırında tam kart; dar telefonda ve
   yatay telefonda süre ile "Yeni oyun" arasındaki boşlukta kompakt "Günlük"
   düğmesi (tahtanın altında dikey yer kaplamaz). */
.bar {
  flex-wrap: wrap;
}
.bar > .daily-card {
  flex: 1 0 100%;
  order: 10;
}
.bar {
  column-gap: 8px;
}
.bar > .timer {
  gap: 6px;
}
@media (max-width: 419px), (max-height: 520px) and (orientation: landscape) {
  .bar > .daily-card {
    flex: 0 1 auto;
    order: 0;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    gap: 4px;
  }
  .bar > .daily-card .daily-text,
  .daily-streak-long {
    display: none;
  }
  .daily-label-long {
    display: none;
  }
  .bar > .daily-card .daily-label-short {
    display: inline;
  }
}
.daily-label-short {
  display: none;
}
@media (max-height: 520px) and (orientation: landscape) {
  .bar {
    flex-wrap: nowrap;
  }
}
@media (max-width: 419px) {
  .bar {
    column-gap: 8px;
  }
  .bar > #newBtn {
    padding: 0 14px;
  }
  #dailyPlayBtn {
    padding: 0 10px;
  }
}
@media (max-width: 419px) and (max-height: 760px) {
  /* Kısa telefon: araçlar simge + yazı yan yana, 44px (sayı paneli ekranda kalsın) */
  .tool {
    min-height: 44px;
    flex-direction: row;
    gap: 6px;
  }
}
@media (max-width: 419px), (max-height: 520px) and (orientation: landscape) {
  /* Kompakt kart: bugün çözüldüyse takvim yerine ✓; seri yalnız geniş kartta
     (kazanma diyaloğunda da görünür). */
  .bar > .daily-card:has(.daily-done:not([hidden])) > .icon,
  .bar > .daily-card .daily-streak {
    display: none;
  }
}
@media (max-width: 419px) and (max-height: 760px) {
  .tool {
    white-space: nowrap;
    padding: 0 6px;
  }
}
@media (max-width: 419px), (max-height: 520px) and (orientation: landscape) {
  /* Kompakt kart ikincil düğme görünümünde: "Yeni oyun" ile yarışmasın. */
  .bar > .daily-card {
    padding-left: 12px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--border);
    gap: 0;
  }
  .bar > .daily-card .daily-btn {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    padding: 0 14px 0 6px;
  }
  .bar > .daily-card .daily-done {
    padding-right: 2px;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  /* Yatay telefon: dar dikey ekrandaki gibi zorluk kendi satırında, altında
     süre · Günlük · Yeni oyun. Panel kendi içinde kayar; sayfa kaymaz ama
     alttaki bağlantılar (Çözümü göster) erişilebilir kalır. */
  .bar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .segmented {
    flex: 1 0 100%;
  }
  .segmented button {
    flex: 1;
  }
  .panel {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ==== Sakin su: tasarım dili ==== */
/* Tuvaldeki "Seçilen yön": karolu tahta (hücreler hep kare), hap sayı tuşları,
   yuvarlak araçlar, çerçeve yerine ton + yumuşak gölge, tek tema düğmesi.
   Hareketler kısa ve tek seferlik; hareket azaltmada hepsi kapanır. */
:root {
  --art-bg: #2f55c8;
  --art-fg: #e7ee9f;
}
:root[data-theme="dark"] {
  --art-bg: #2446a8;
  --art-fg: #e5ec9e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --art-bg: #2446a8;
    --art-fg: #e5ec9e;
  }
}
:root[data-theme="rose"] {
  --art-bg: #b83a62;
  --art-fg: #ffd6e0;
}
.art {
  background: var(--art-bg);
  color: var(--art-fg);
}
/* Diyalog başlığındaki dalga sabit durur (sürekli hareket yok). */
.art > svg.waves {
  animation: none;
}
.icon {
  stroke-width: 1.8;
}

/* ---- Düğmeler: basınca hafif çöker, üstüne gelince yükselir ---- */
.btn-ghost,
.btn-icon {
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}
.btn:active:not(:disabled),
.key:active:not(:disabled) {
  transform: translateY(1px) scale(0.95);
  transition-duration: 0.08s;
}
@media (hover: hover) {
  .btn-primary:hover:not(:disabled),
  .btn-ghost:hover:not(:disabled),
  .btn-icon:hover:not(:disabled),
  .btn-citron:hover:not(:disabled),
  .btn-race:hover:not(:disabled),
  .key:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--lift);
  }
}
.segmented {
  border-color: transparent;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

/* ---- Tahta: karolar içinde yuvarlak, her zaman kare hücreler ---- */
.board {
  position: relative;
  padding: 1.6%;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-board);
  grid-template-columns:
    repeat(3, minmax(0, 10fr)) minmax(0, 1.6fr) repeat(3, minmax(0, 10fr))
    minmax(0, 1.6fr) repeat(3, minmax(0, 10fr));
  grid-template-rows:
    repeat(3, minmax(0, 10fr)) minmax(0, 1.6fr) repeat(3, minmax(0, 10fr))
    minmax(0, 1.6fr) repeat(3, minmax(0, 10fr));
}
/* 3×3 kutuların renkli karoları (tema rengini maske ile boyar). */
.board::before {
  content: "";
  position: absolute;
  inset: 1.6%;
  background: var(--tile);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.2 93.2' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='31.2' y='0' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='62.4' y='0' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='0' y='31.2' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='31.2' y='31.2' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='62.4' y='31.2' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='0' y='62.4' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='31.2' y='62.4' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='62.4' y='62.4' width='30.8' height='30.8' rx='4.6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.2 93.2' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='31.2' y='0' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='62.4' y='0' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='0' y='31.2' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='31.2' y='31.2' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='62.4' y='31.2' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='0' y='62.4' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='31.2' y='62.4' width='30.8' height='30.8' rx='4.6'/%3E%3Crect x='62.4' y='62.4' width='30.8' height='30.8' rx='4.6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.board > [role="row"] > .cell {
  aspect-ratio: 1;
  border: max(2px, 0.72cqi) solid transparent;
  border-radius: clamp(7px, 2.3cqi, 12px);
  background-clip: padding-box;
  font-size: clamp(15px, 5.1cqi, 30px);
}
.board > [role="row"] > .cell.br,
.board > [role="row"] > .cell.bb {
  border-color: transparent;
}
.cell.flash::before,
.board.win .cell::before {
  border-radius: inherit;
}
.board > [role="row"]:nth-child(1) > .cell {
  grid-row: 1;
}
.board > [role="row"]:nth-child(2) > .cell {
  grid-row: 2;
}
.board > [role="row"]:nth-child(3) > .cell {
  grid-row: 3;
}
.board > [role="row"]:nth-child(4) > .cell {
  grid-row: 5;
}
.board > [role="row"]:nth-child(5) > .cell {
  grid-row: 6;
}
.board > [role="row"]:nth-child(6) > .cell {
  grid-row: 7;
}
.board > [role="row"]:nth-child(7) > .cell {
  grid-row: 9;
}
.board > [role="row"]:nth-child(8) > .cell {
  grid-row: 10;
}
.board > [role="row"]:nth-child(9) > .cell {
  grid-row: 11;
}
.board > [role="row"] > .cell:nth-child(1) {
  grid-column: 1;
}
.board > [role="row"] > .cell:nth-child(2) {
  grid-column: 2;
}
.board > [role="row"] > .cell:nth-child(3) {
  grid-column: 3;
}
.board > [role="row"] > .cell:nth-child(4) {
  grid-column: 5;
}
.board > [role="row"] > .cell:nth-child(5) {
  grid-column: 6;
}
.board > [role="row"] > .cell:nth-child(6) {
  grid-column: 7;
}
.board > [role="row"] > .cell:nth-child(7) {
  grid-column: 9;
}
.board > [role="row"] > .cell:nth-child(8) {
  grid-column: 10;
}
.board > [role="row"] > .cell:nth-child(9) {
  grid-column: 11;
}

/* ---- Durum: kart değil, ince bir satır ---- */
.status {
  min-height: 22px;
  padding: 0 4px;
  align-items: center;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
}
.status .icon {
  width: 16px;
  height: 16px;
  color: var(--ok-dot);
}

/* ---- Araçlar: yuvarlak simge + altında etiket ---- */
.tool {
  min-height: 0;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
}
.tool .icon {
  width: 50px;
  height: 50px;
  padding: 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.35s var(--ease-spring),
    box-shadow 0.2s,
    background-color 0.2s;
}
@media (hover: hover) {
  .tool:hover:not(:disabled) {
    background: transparent;
  }
  .tool:hover:not(:disabled) .icon {
    transform: translateY(-1px);
    box-shadow: var(--lift);
  }
}
.tool:active:not(:disabled) {
  transform: none;
}
.tool:active:not(:disabled) .icon {
  transform: translateY(1px) scale(0.93);
  transition-duration: 0.08s;
}
.tool[aria-pressed="true"],
.tool[aria-pressed="true"]:hover {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}
.tool[aria-pressed="true"] .icon {
  background: var(--primary);
  color: var(--on-primary);
}
.tool-citron,
.tool-citron:hover {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  filter: none;
}
.tool-citron .icon {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}

/* ---- Sayı tuşları: hap ---- */
.key {
  border: 0;
  border-radius: 999px;
  background: var(--key);
  color: var(--key-ink);
  box-shadow: var(--shadow-soft);
}
@media (hover: hover) {
  .key:hover:not(:disabled) {
    background: var(--key);
  }
}
/* Biten rakam: soluk ama okunur (opaklık yerine ton; kontrast ≥4,5:1). */
.key.done {
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
}

/* ---- Günlük düğmesi (üst satır) ---- */
.bar > .daily-card {
  background: var(--theme-chip);
  box-shadow: none;
}
.bar > .daily-card > .icon {
  color: var(--link);
}
/* Geniş ekranda "Oyna" limon haptır; yazısı limon üstü mürekkep kalır. */
.bar > .daily-card .daily-btn.btn-citron {
  color: var(--on-citron);
}
@media (max-width: 419px), (max-height: 520px) and (orientation: landscape) {
  .bar > .daily-card .daily-btn.btn-citron {
    color: var(--link);
  }
}

/* ---- Tema düğmesi: tek düğme, üç amblem ---- */
.theme-btn {
  position: relative;
  overflow: hidden;
  background: var(--theme-chip);
}
@media (hover: hover) {
  .theme-btn:hover:not(:disabled) {
    background: var(--theme-chip);
  }
}
.theme-btn .emb {
  position: absolute;
  inset: 0;
  width: 30px;
  height: 30px;
  margin: auto;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.theme-btn .emb-day,
:root[data-theme="dark"] .theme-btn .emb-night,
:root[data-theme="rose"] .theme-btn .emb-rose {
  opacity: 1;
}
:root[data-theme="dark"] .theme-btn .emb-day,
:root[data-theme="rose"] .theme-btn .emb-day {
  opacity: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-btn .emb-day {
    opacity: 0;
  }
  :root:not([data-theme]) .theme-btn .emb-night {
    opacity: 1;
  }
}
.theme-btn .emb * {
  transform-box: fill-box;
}
.theme-btn .e-petal {
  opacity: 0;
}
/* Gündüz: dalga yükselir, güneş doğar. */
.theme-btn[data-anim="light"] .e-waves {
  animation: tb-tide 0.6s var(--ease-out) both;
}
.theme-btn[data-anim="light"] .e-sun {
  animation: tb-sunrise 0.6s var(--ease-spring) 0.16s both;
}
@keyframes tb-tide {
  from {
    transform: translateY(14px);
  }
}
@keyframes tb-sunrise {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
}
/* Gece: ay yükselir, ışıklar bir kez parlar. */
.theme-btn[data-anim="dark"] .e-moon {
  transform-origin: 60% 60%;
  animation: tb-moon 0.7s var(--ease-spring) both;
}
.theme-btn[data-anim="dark"] .e-spark {
  transform-origin: center;
  animation: tb-twinkle 0.9s var(--ease-out) 0.2s both;
}
.theme-btn[data-anim="dark"] .e-spark-2 {
  animation-delay: 0.38s;
}
@keyframes tb-moon {
  from {
    transform: translate(-6px, 10px) rotate(-25deg);
    opacity: 0;
  }
}
@keyframes tb-twinkle {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  45% {
    transform: scale(1.6);
    opacity: 1;
  }
}
/* Gül: sap topraktan çıkar, yapraklar açılır, gül açar, bir yaprak süzülür. */
.theme-btn[data-anim="rose"] .e-stem {
  transform-origin: 50% 100%;
  animation: tb-grow 0.35s var(--ease-out) both;
}
.theme-btn[data-anim="rose"] .e-leaf {
  animation: tb-unfurl 0.3s var(--ease-spring) 0.24s both;
}
.theme-btn[data-anim="rose"] .e-leaf-1 {
  transform-origin: 100% 100%;
}
.theme-btn[data-anim="rose"] .e-leaf-2 {
  transform-origin: 0 100%;
  animation-delay: 0.32s;
}
.theme-btn[data-anim="rose"] .e-head {
  transform-origin: 50% 90%;
  animation: tb-bloom 0.55s var(--ease-spring) 0.4s both;
}
.theme-btn[data-anim="rose"] .e-petal {
  animation: tb-petal 0.8s var(--ease-out) 0.75s both;
}
@keyframes tb-grow {
  from {
    transform: scaleY(0);
  }
}
@keyframes tb-unfurl {
  from {
    transform: scale(0);
  }
}
@keyframes tb-bloom {
  from {
    transform: scale(0.15) rotate(-20deg);
    opacity: 0;
  }
}
@keyframes tb-petal {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-30deg);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(3px, 12px) rotate(20deg);
  }
}
/* Sayfa: yeni tema, düğmeden yayılan bir daireyle gelir (View Transitions). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: theme-reveal 0.7s var(--ease-out);
}
@keyframes theme-reveal {
  from {
    clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0));
  }
  to {
    clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0));
  }
}

/* ---- Kısa telefon: araçlar dikey kalır, disk küçülür ---- */
@media (max-width: 419px) and (max-height: 760px) {
  .tool {
    min-height: 0;
    flex-direction: column;
    gap: 3px;
    padding: 0;
    font-size: 11.5px;
  }
  .tool .icon {
    width: 40px;
    height: 40px;
    padding: 11px;
  }
}
/* ---- Dar ekran + büyük yazı: Günlük yalnız simge (ad ekran okuyucuda kalır) ---- */
@media (max-width: 419px) {
  :root[data-text-size="large"] .bar > .daily-card {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
  }
  :root[data-text-size="large"] .bar > .daily-card .daily-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
  }
  :root[data-text-size="large"] .bar > .daily-card .daily-label-short {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  :root[data-text-size="large"] .bar > .daily-card .daily-done {
    position: absolute;
    top: -2px;
    right: -2px;
    padding: 0;
    font-size: 12px;
  }
}
@media (max-width: 419px) and (max-height: 760px) {
  :root[data-text-size="large"] .key {
    gap: 0;
  }
  :root[data-text-size="large"] .key b {
    font-size: 22px;
  }
  :root[data-text-size="large"] .numpad {
    row-gap: 5px;
  }
}
/* Büyük yazıda tek satıra sığmaz: zorluk kendi satırında, altında süre ve Yeni oyun. */
:root[data-text-size="large"] .bar > .segmented {
  flex: 1 0 100%;
}
:root[data-text-size="large"] .bar > .segmented button {
  flex: 1;
}
:root[data-text-size="large"] .bar > #newBtn {
  margin-left: auto;
}

/* ==== Sakin su: yarış anları ==== */
/* Yarış pencerelerinde dalga başlığı kısalır; iki oyuncu rozeti başlığın
   alt kenarına oturur ve davetten sonuca kadar yüz yüze durur. */
.race-sheet > .art,
#raceResult > .art {
  height: 108px;
}
.race-sheet > .art .art-title,
#raceResult > .art .art-title {
  top: 18px;
  bottom: auto;
  font-size: 30px;
}
.sheet-art .sheet-close {
  background: color-mix(in srgb, var(--art-bg) 80%, transparent);
  box-shadow: none;
}
.duel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: -34px 0 2px;
}
#raceDialog[data-view="message"] .duel {
  display: none;
}
.duel-vs {
  font: 800 12px/1 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.avatar {
  position: relative;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow:
    0 0 0 4px var(--surface),
    var(--lift);
  font: 400 28px/1 var(--display);
  transition:
    transform 0.4s var(--ease-spring),
    background-color 0.25s,
    opacity 0.25s;
}
.avatar[data-slot="rival"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.avatar[data-state="empty"] {
  background: var(--surface);
  color: var(--muted);
  outline: 2px dashed var(--border);
  outline-offset: -7px;
}
.avatar[data-state="away"] {
  opacity: 0.5;
}
.avatar[data-state="winner"] {
  transform: translateY(-3px) scale(1.06);
}
.avatar .badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ok-dot);
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--surface);
  transform: scale(0);
  transition: transform 0.45s var(--ease-spring);
}
.avatar .badge .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}
.avatar .i-win,
.avatar[data-state="winner"] .i-ok {
  display: none;
}
.avatar[data-state="winner"] .i-win {
  display: block;
}
.avatar[data-state="ready"] .badge,
.avatar[data-state="winner"] .badge {
  transform: scale(1);
}
.avatar[data-state="winner"] .badge {
  background: #f5b83d;
  color: #3a2a05;
}
/* Kazanan: tek seferlik küçük kutlama (8 nokta dışa açılıp söner). */
.avatar.celebrate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 999px;
  box-shadow:
    0 -46px var(--accent),
    33px -33px var(--primary),
    46px 0 var(--accent),
    33px 33px var(--primary),
    0 46px var(--accent),
    -33px 33px var(--primary),
    -46px 0 var(--accent),
    -33px -33px var(--primary);
  animation: duel-burst 0.9s var(--ease-out) 0.2s both;
  pointer-events: none;
}
@keyframes duel-burst {
  from {
    transform: scale(0.35);
    opacity: 1;
  }
  to {
    transform: scale(1.2);
    opacity: 0;
  }
}
/* Bekleme odası: hazır olan sıcak renkle öne çıkar. */
.seats li.ready {
  border-color: transparent;
  background: color-mix(in srgb, var(--ok-dot) 12%, var(--surface));
}
.seats li,
.podium li {
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}
.podium li.first {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 45%, var(--surface));
}
/* Üst çubukta rakip: baş harfli küçük rozet. */
.rival-dot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font: 800 11px/1 var(--body);
}
.rival[data-state="done"] .rival-dot {
  background: var(--primary);
  color: var(--on-primary);
}
.rival[data-state="away"] .rival-dot {
  background: var(--chip);
  color: var(--muted);
}
.rival {
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}

/* Geri sayım: gürültülü desen yerine bulanık tahta, halka içinde büyük rakam. */
@property --ring {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.race-cover {
  gap: 14px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
}
.race-cover .art {
  display: none;
}
.race-count {
  position: relative;
  width: 128px;
  height: 128px;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--lift);
  font: 400 68px/1 var(--display);
  animation: none;
}
.race-count::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 999px;
  background: conic-gradient(var(--primary) calc(var(--ring) * 1turn), var(--chip) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
}
.race-count.tick {
  animation: count-pop 0.45s var(--ease-spring);
}
.race-count.tick::before {
  animation: ring-fill 1s linear both;
}
.race-count[data-go] {
  background: var(--primary);
  color: var(--on-primary);
  font: 800 30px/1 var(--body);
}
.race-count[data-go]::before {
  opacity: 0;
}
@keyframes count-pop {
  from {
    transform: scale(0.72);
    opacity: 0.2;
  }
}
@keyframes ring-fill {
  from {
    --ring: 0;
  }
  to {
    --ring: 1;
  }
}
.race-cover small {
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
}

/* Mola: tahta tamamen örtülür ama desen sakin bir doku olarak kalır. */
.pause-cover {
  border-radius: 24px;
  background: var(--surface);
  color: var(--ink);
}
.pause-cover .art {
  background: transparent;
  color: var(--art-bg);
  opacity: 0.1;
}
.pause-cover p {
  padding: 0;
  background: transparent;
  font-size: 34px;
}
.pause-cover .btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

/* ==== Yayın denetimi: etkileşim durumları ve erişilebilirlik ==== */
/* Kurallar DESIGN.md'de: her düğmenin hover (yalnız fareyle), basılı, odak ve
   devre dışı hali görünür; dokunma hedefi ≥44px; odak halkası zeminle ≥3:1. */

/* Odak halkası seçili hücrenin ve dalga başlığının rengine karışmasın. */
.cell.selected:focus-visible {
  outline-color: var(--sel-ink);
}
.sheet-art .sheet-close:focus-visible {
  outline-color: #fffef6;
}
/* Araç düğmesinde halka görünen diski izler, saydam kutuyu değil. */
.tool:focus-visible {
  outline: none;
}
.tool:focus-visible .icon {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Mola örtüsü odaklanan hücrenin de üstünde. */
.pause-cover {
  z-index: 2;
}

/* Zorluk seçimi: fareyle üstünde, basılı ve devre dışı halleri. */
.segmented button:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (hover: hover) {
  .segmented button:hover:not(:disabled):not([aria-checked="true"]) {
    background: var(--chip);
    color: var(--ink);
  }
}
.segmented button:active:not(:disabled) {
  transform: scale(0.96);
  transition-duration: 0.08s;
}
.segmented button {
  transition:
    background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out),
    transform 0.2s var(--ease-out);
}

/* Hücre: fareyle üstünde ince halka (arka plan renkleri durumlara ayrılmış). */
@media (hover: hover) {
  .cell:not(.selected):not(.hint-target):hover {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
  }
}

/* Telefonda zorluk düğmeleri de 44px dokunma hedefi. */
@media (max-width: 559px) {
  .segmented button {
    min-height: 44px;
  }
}
/* Yatay telefonda görünen yükseklik kısa kalır; dokunma alanı görünmez bir
   katmanla 44px'e uzar. */
@media (max-height: 520px) and (orientation: landscape) {
  .bar .btn,
  .segmented button {
    position: relative;
  }
  .bar .btn::before,
  .segmented button::before {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
  .segmented button::before {
    inset: -7px 0;
  }
  /* Dalga başlığı kısa ekranda alanın yarısını yemesin. */
  .sheet-art > .art,
  .race-sheet > .art,
  #raceResult > .art {
    height: 72px;
  }
  .sheet-art > .art .art-title {
    font-size: 28px;
    bottom: 12px;
  }
}

/* İstek sürerken düğme: soluk değil, dönen halkayla "çalışıyor" der. Hareket
   azaltmada halka durur ama görünür kalır. */
.btn.is-busy {
  opacity: 0.85;
  cursor: progress;
}
.btn.is-busy::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: busy-spin 0.8s linear infinite;
}
@keyframes busy-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Geniş ve yüksek masaüstü: tahta 560px'te küçük kalmasın; oran aynı. */
@media (min-width: 1600px) and (min-height: 1000px) {
  .app {
    max-width: 1300px;
    grid-template-columns: minmax(0, 680px) minmax(320px, 460px);
  }
  .board-wrap {
    width: min(100%, 680px, calc(100dvh - 200px));
  }
}