:root {
  --paper: #fbf9f2;
  --ink: #555555;
  --pen: #1f3b9b;
  --muted: #64605a;
  --accent: #c62828;
  --pencil-coral: #c62828;
  --rule: rgba(31, 59, 155, .25);
  --handwriting: "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
  --sq: 24px;
  --kagit: var(--paper);
  --izgara: rgba(86, 140, 214, .22);
  --marj: rgba(214, 64, 64, .4);
  color-scheme: light;
  font-synthesis: none;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 18px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  font-family: var(--handwriting);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .22), transparent 70%),
    url("kit/gren.png"), #b6a58a;
}

button, input, select, textarea { font: inherit; color: inherit; }
.content-tools { margin-top: 12px; font-size: 18px; text-align: center; }
.content-tools summary { color: var(--pen); cursor: pointer; min-height: 44px; padding: 10px 6px; text-underline-offset: 4px; text-decoration: underline; text-decoration-color: var(--accent); }
.content-links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; margin: 12px 0; }
.content-links a { color: var(--pen); font-size: 18px; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 5px; text-decoration-color: var(--accent); }
button { -webkit-tap-highlight-color: transparent; }
button:not(:disabled) { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 5px;
}
button:disabled { cursor: default; color: #858076; }
::selection { background: #dce3fa; color: var(--pen); }
input { caret-color: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: #a19988 #eee9dc; }

.notebook {
  width: min(960px, 100%);
  position: relative;
  isolation: isolate;
}
.defterde-return {
  position: absolute; bottom: 100%; left: 8px;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  color: #393732; font-size: 18px; text-decoration: none;
}
.defterde-return:hover { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; }
.paper-back, .paper-surface { position: absolute; inset: 0; pointer-events: none; }
.paper-back { background: #f7f4eb url("kit/gren.png"); }
.paper-back.far {
  z-index: -3;
  inset: 7px 9px 5px 16px;
  transform: translate(4px, 6px);
  background-color: #efebdf;
  box-shadow: 16px 28px 40px -6px rgba(58, 36, 16, .44);
}
.paper-back.near { z-index: -2; inset: 6px 8px 4px 16px; transform: translate(2px, 3px); }
.paper-surface {
  --marj-x: 48px;
  z-index: -1;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent var(--marj-x), var(--marj) var(--marj-x), var(--marj) calc(var(--marj-x) + 1px), transparent calc(var(--marj-x) + 1px)),
    linear-gradient(to right, var(--izgara) .65px, transparent .65px),
    linear-gradient(to bottom, var(--izgara) .65px, transparent .65px),
    url("kit/gren.png");
  background-size: 100% 100%, var(--sq) var(--sq), var(--sq) var(--sq), 256px 256px;
  background-position: 0 0, 1px 0, 1px 0, 0 0;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .85);
  -webkit-mask: var(--paper-edge) center / 100% 100% no-repeat;
  mask: var(--paper-edge) center / 100% 100% no-repeat;
  mask-mode: luminance;
}
.sheet, .tangram-app .sheet.sayfa {
  padding: 16px 28px 14px 60px;
  min-height: 0;
  position: relative;
  background: none;
  border: 0;
  box-shadow: none;
}

.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.title-block { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; min-width: 0; }
h1 { color: var(--pen); width: max-content; font-size: 42px; line-height: 1.1; font-weight: 400; letter-spacing: -.015em; margin: 0; position: relative; padding: 0; transform: rotate(-1.2deg); }
h1 span { display: inline-block; }
.title-line { position: absolute; left: -3px; bottom: -3px; display: block; height: 16px; width: 106%; overflow: visible; }
.subtitle { margin: 0; font-size: 18px; line-height: 1.3; color: var(--ink); }
.wordmark { color: var(--pen); align-self: flex-start; position: relative; flex-shrink: 0; margin-top: 12px; font-size: 25px; transform: rotate(-4deg); }
.wordmark svg { position: absolute; bottom: -5px; left: 0; width: 100%; height: 8px; display: block; overflow: visible; }
h2 { color: var(--pen); font-weight: 400; line-height: 1.3; margin: 0; }
h2:focus { outline: none; }
p { margin: 0; }

.catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 28px 0 18px; }
.catalog-heading h2 { font-size: 28px; }
.catalog-heading p { color: var(--muted); font-size: 19px; margin-top: 3px; }
.search { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--pen); width: 250px; flex-shrink: 0; }
.search svg { width: 23px; height: 23px; flex-shrink: 0; }
.search input { border: 0; border-radius: 0; background: transparent; min-width: 0; width: 100%; height: 44px; padding: 3px; outline-offset: 3px; }
.search input::placeholder { color: var(--muted); opacity: 1; }
svg:not(.scene) circle, .search svg path, .back-button svg path, .sound-button svg path {
  stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.categories { display: flex; flex-wrap: wrap; gap: 0 22px; padding-bottom: 10px; }
.word-button, .category-button {
  position: relative;
  color: var(--pen);
  border: 0;
  background: transparent;
  padding: 6px 3px;
  min-width: 44px;
  min-height: 44px;
  line-height: 1.3;
  touch-action: manipulation;
}
.word-button::after, .category-button::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; bottom: 5px;
  height: 1px;
  background: currentColor;
  opacity: .6;
  transform: rotate(-1.1deg);
}
.category-button::after { opacity: 0; }
.category-button[aria-pressed="true"] { color: var(--accent); }
.category-button[aria-pressed="true"]::after { height: 2px; opacity: .9; }
.category-button:hover, .word-button:not(:disabled):hover { color: var(--accent); }
.word-button:disabled::after { opacity: .35; }
.catalog-grid { list-style: none; padding: 12px 0 18px; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; row-gap: 18px; }
.puzzle-link { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 16px 8px 9px; border: 0; background: transparent; position: relative; }
.puzzle-link svg { width: 100%; height: 130px; overflow: visible; }
.puzzle-link .puzzle-name { color: var(--pen); font-size: 24px; margin-top: 8px; position: relative; }
.puzzle-link .puzzle-name::after { content: ""; position: absolute; bottom: 1px; left: 0; right: 0; height: 2px; background: var(--accent); transform: rotate(-2deg) scaleX(0); transform-origin: left; }
.puzzle-link:hover .puzzle-name::after, .puzzle-link:focus-visible .puzzle-name::after { transform: rotate(-2deg) scaleX(1); }
.puzzle-link:hover svg { transform: translateY(-2px); }
.catalog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rule); min-height: 48px; color: var(--muted); font-size: 18px; }
.footer-note { transform: rotate(-2deg); }
.page-number { color: var(--ink); font-size: 25px; font-variant-numeric: tabular-nums; }
.empty-state { min-height: 420px; display: grid; place-content: center; justify-items: center; gap: 20px; text-align: center; }

.game-topline { margin: 10px 0 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 18px; }
.back-button { display: inline-flex; align-items: center; gap: 10px; }
.back-button svg { width: 26px; height: 20px; }
.back-button::after { left: 37px; }
.puzzle-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.puzzle-heading h2 { font-size: 34px; }
.puzzle-heading p { color: var(--muted); font-size: 18px; margin-top: 1px; }
.difficulty { display: inline-flex; gap: 9px; align-items: center; color: var(--muted); font-size: 19px; }
.difficulty-mark { display: inline-block; width: 6px; height: 6px; background: #829b7d; border-radius: 50%; box-shadow: 1px 1px 2px #829b7d55; }
.scene-wrap { position: relative; }
.scene { display: block; width: 100%; overflow: visible; }
.pencil-note { position: absolute; top: 150px; right: 0; font-size: 20px; line-height: 1.6; color: var(--muted); transform: rotate(-5deg); pointer-events: none; }
.pencil-note span { padding-left: 12px; }
[data-complete="true"] .pencil-note { display: none; }
.piece { cursor: grab; outline: none; touch-action: none; }
.scene { touch-action: pan-y; }
.scene.is-dragging, .scene.is-dragging .piece,
.scene.is-carrying, .scene.is-carrying .piece { cursor: grabbing; }
.scene[data-preview="true"] .piece { pointer-events: none; }
.piece[data-zone="board"]:not([aria-pressed="true"]) .piece-label { visibility: hidden; }
.piece:focus-visible .selection-ring, .piece[aria-pressed="true"] .selection-ring { opacity: 1; }
.selection-ring { opacity: 0; transition: opacity .1s; }
.piece-label { font-family: var(--handwriting); fill: var(--muted); font-size: 14px; }
.selection-status { min-height: 31px; text-align: center; color: var(--muted); font-size: 18px; }
.placement-status { min-height: 25px; text-align: center; color: var(--muted); font-size: 16px; }
.selection-actions { display: flex; justify-content: center; gap: 24px; font-size: 16px; }
.completion { text-align: center; margin: 22px 0 8px; }
.completion p:first-child { color: #506b4b; font-size: 32px; }
.completion button { margin: 0 12px; }
.completion #next-status { font-size: 18px; color: var(--muted); }
.play-help, .keyboard-help { font-size: 16px; color: var(--muted); max-width: 70ch; margin: 18px auto 0; }
.input-help { margin: 8px 0 12px; }
.input-help strong { color: var(--pen); font-weight: 400; }
.touch-help { display: none; }
@media (hover: none) {
  .mouse-help { display: none; }
  .touch-help { display: inline; }
}
.keyboard-help { margin-top: 6px; }
.keyboard-help summary { cursor: pointer; width: fit-content; min-height: 44px; padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; }
.keyboard-help summary:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
.touch-lens {
  position: fixed; z-index: 10; pointer-events: none; width: 124px; height: 124px;
  border-radius: 50%; overflow: hidden; border: 1px solid #69645b;
  background: var(--paper); box-shadow: 2px 4px 8px #49474133;
}
.touch-lens svg { display: block; width: 100%; height: 100%; }
.game-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 20px; }
.control-group { display: flex; gap: 20px; }
.sound-button svg { width: 28px; height: 28px; display: block; }
.sound-button::after { display: none; }
.preview-notice { max-width: 780px; font-size: 16px; color: #3e3a33; text-align: center; margin-top: 20px; line-height: 1.6; user-select: text; }

@media (max-width: 800px) {
  body { padding: 20px 16px 32px; }
  .sheet, .tangram-app .sheet.sayfa { padding: 14px 20px 12px 46px; }
  .paper-surface { --marj-x: 34px; }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .pencil-note { font-size: 17px; top: 115px; }
  .control-group { gap: 12px; }
  .game-controls { justify-content: center; font-size: 17px; gap: 8px 14px; }
}

@media (max-width: 580px) {
  body { font-size: 19px; padding: max(10px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .sheet, .tangram-app .sheet.sayfa { padding: 10px 12px 10px 30px; }
  .paper-surface { --marj-x: 20px; }
  h1 { font-size: 36px; }
  .subtitle { font-size: 16px; }
  .wordmark { margin-top: 7px; font-size: 21px; }
  .catalog-heading { display: block; margin: 24px 0 14px; }
  .catalog-heading h2 { font-size: 24px; }
  .catalog-heading p { font-size: 17px; }
  .search { margin-top: 15px; width: 100%; }
  .categories { column-gap: 16px; padding-bottom: 2px; }
  .category-button { font-size: 18px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 16px; padding-top: 10px; }
  .puzzle-link { padding: 12px 0 5px; }
  .puzzle-link svg { height: 116px; }
  .puzzle-link .puzzle-name { font-size: 21px; margin-top: 4px; }
  .catalog-footer { font-size: 15px; gap: 8px; margin-top: 16px; }
  .footer-note { display: none; }
  .page-number { font-size: 21px; }
  .empty-state { min-height: 330px; }
  .game-topline { font-size: 15px; margin: 8px 0 12px; }
  .back-button { gap: 5px; }
  .back-button svg { width: 21px; }
  .back-button::after { left: 28px; }
  .puzzle-heading h2 { font-size: 31px; }
  .puzzle-heading p { font-size: 16px; }
  .difficulty { font-size: 16px; }
  .pencil-note { display: none; }
  .selection-status { font-size: 18px; min-height: 27px; }
  .placement-status { font-size: 16px; min-height: 22px; }
  .selection-actions { font-size: 15px; gap: 22px; }
  .play-help, .keyboard-help { font-size: 17px; }
  .game-controls { gap: 4px 12px; font-size: 18px; margin-top: 8px; padding-top: 9px; }
  .control-group { justify-content: space-evenly; flex: 1 1 100%; gap: 6px; }
  .preview-notice { font-size: 14px; max-width: 38ch; margin: 14px 8px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .puzzle-link svg { transition: transform .18s ease-out; }
  .puzzle-link .puzzle-name::after { transition: transform .18s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .sheet { background: Canvas; }
  .piece:focus-visible .selection-ring, .piece[aria-pressed="true"] .selection-ring { stroke: Highlight; }
  button:focus-visible, input:focus-visible { outline-color: Highlight; }
}

/* Katalog ve öğrenme: aynı sayfada sözcükler, küçük işaretler. */
.catalog-tools { display:flex;flex-wrap:wrap;align-items:end;gap:12px 24px;margin:12px 0 20px; }
.catalog-tools label { display:grid;gap:3px;font-size:18px; }
.catalog-tools select { font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;min-height:44px;max-width:100%;padding:4px 22px 4px 0; }
.catalog-progress { color:var(--muted);margin:0 0 12px;font-size:18px; }
.catalog-grid li { position:relative; }
.puzzle-tick { position:absolute;top:8px;left:12px;width:24px;height:24px;stroke:#456447;fill:none;stroke-width:2.5; }
.favorite-command { position:absolute;right:4px;top:0;min-width:44px;min-height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);cursor:pointer; }
.favorite-command svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5; }
.favorite-command[aria-pressed="true"] { color:var(--accent); }
.favorite-command[aria-pressed="true"] svg { fill:currentColor;fill-opacity:.15; }
.pagination { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.pagination span { white-space:nowrap; }
.learning-controls { display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin:8px 0;font-size:18px; }
.learning-controls label { min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer; }
.learning-controls input { width:20px;height:20px;accent-color:var(--accent); }
#tutorial-note { color:var(--muted);max-width:46ch; }
.game-topline { flex-wrap:wrap;gap:8px 20px; }
.storage-status { margin:12px auto;max-width:70ch;text-align:center;padding:0 16px;color:var(--ink); }
.game-controls { z-index:5; }
.word-button[href] { text-decoration:none;display:inline-flex;align-items:center; }
@media(max-width:580px) {
 .catalog-tools { gap:10px 16px; }
 .catalog-tools label { flex:1 1 130px; }
 .catalog-footer { flex-wrap:wrap;gap:12px; }
 .pagination { justify-content:center;flex:1 0 100%; }
 .game-controls { position:sticky;bottom:0;background:var(--paper);padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -5px 12px rgba(76,66,50,.08); }
 .game-topline .word-button { font-size:18px; }
}

@media print {
  .paper-back { display: none; }
  body { padding: 0; background: white; }
  .game-controls { position: static; box-shadow: none; }
}

/* Defterde yırtık kâğıt kenarı (Kakuro ile aynı satır içi kopya; file:// üzerinde de çalışır). */
:root { --paper-edge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20960%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cdefs%3E%3Cmask%20id%3D%22tears%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221440%22%20height%3D%22960%22%3E%0A%20%20%3Crect%20width%3D%221440%22%20height%3D%22960%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%3Cg%20fill%3D%22%23000%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%2078Q14%2072%2020%2078L24%2088Q23%2097%2015%20101L0%2098Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20181Q13%20175%2020%20181L23%20191Q20%20200%2012%20201L0%20198Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20281Q14%20276%2021%20282L24%20293Q20%20302%2012%20301L0%20298Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20384Q14%20378%2020%20384L23%20395Q20%20404%2012%20403L0%20400Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20485Q14%20480%2021%20486L24%20497Q19%20506%2012%20505L0%20501Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20586Q13%20581%2020%20587L24%20598Q20%20606%2012%20607L0%20603Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20689Q14%20683%2021%20689L24%20700Q20%20709%2012%20708L0%20704Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20790Q13%20785%2020%20791L24%20801Q20%20810%2012%20811L0%20807Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20893Q14%20886%2021%20892L24%20903Q20%20912%2012%20912L0%20907Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3C%2Fmask%3E%3C%2Fdefs%3E%0A%20%20%3Cpath%20fill%3D%22%23fff%22%20mask%3D%22url%28%23tears%29%22%20d%3D%22M23%204L118%206%20171%203%20255%205%20302%203%20397%206%20481%203%20562%205%20641%202%20714%205%20794%203%20872%205%20953%203%201034%205%201119%202%201206%205%201284%203%201379%205%201427%203%201435%2014%201432%2077%201435%20151%201432%20219%201436%20303%201433%20377%201435%20448%201432%20527%201436%20612%201433%20690%201436%20760%201432%20836%201435%20913%201431%20951%201367%20956%201293%20953%201220%20957%201146%20954%201069%20957%20997%20953%20916%20956%20844%20954%20769%20958%20692%20954%20612%20957%20536%20954%20452%20957%20372%20954%20296%20957%20219%20953%20145%20957%2069%20954%2017%20951%2012%20934%2014%20883%2010%20845%2012%20809%209%20788%2014%20774%2012%20747%2014%20722%209%20705%2013%20686%2011%20660%2013%20635%209%20612%2013%20594%2011%20565%2014%20541%209%20518%2013%20499%2011%20475%2014%20451%2010%20426%2013%20405%2011%20381%2014%20357%209%20336%2013%20316%2011%20292%2014%20270%2010%20246%2014%20225%2011%20201%2014%20179%209%20156%2013%20135%2011%20112%2014%2091%209%2070%2014%2051%2013%2031Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); }