/* kerfpuzzle.com · tema ve duzen. * Renkler :root belirtecleri; karanlik tema isletim sisteminden ya da * kullanicinin secimiyle (``). Dokunma oncelikli: en az * 44 px hedef, hover'a bagli ozellik yok, tahtada cift dokunma yakinlastirmasi * kapali, guvenli alan paylari (plan §4). */ :root { --bg: #f7f5f0; --surface: #ffffff; --ink: #1c1d21; --muted: #5d6270; --line: #cbc7bd; --line-strong: #2b2d33; --accent: #1f5fbf; --accent-ink: #ffffff; --sel: #c9dcfa; --peer: #eceae4; --same: #dde8fb; --bad: #b83227; --bad-bg: #fbe1dc; --ok: #2d7a4d; --btn: #ebe8e1; --btn-press: #dcd8cf; --hint-area: #fbf0cf; --hint-key: #f3d27a; --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 16px rgb(0 0 0 / 0.06); --radius: 12px; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16181c; --surface: #1f2227; --ink: #eceae4; --muted: #a4a8b1; --line: #3b3f47; --line-strong: #a8acb5; --accent: #8db6ff; --accent-ink: #10131a; --sel: #2e4670; --peer: #252930; --same: #2a3a55; --bad: #ff8b7b; --bad-bg: #4b2521; --ok: #7fd3a0; --btn: #2a2e35; --btn-press: #353a43; --hint-area: #34301f; --hint-key: #5e4d1d; --shadow: none; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #16181c; --surface: #1f2227; --ink: #eceae4; --muted: #a4a8b1; --line: #3b3f47; --line-strong: #a8acb5; --accent: #8db6ff; --accent-ink: #10131a; --sel: #2e4670; --peer: #252930; --same: #2a3a55; --bad: #ff8b7b; --bad-bg: #4b2521; --ok: #7fd3a0; --btn: #2a2e35; --btn-press: #353a43; --hint-area: #34301f; --hint-key: #5e4d1d; --shadow: none; color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); min-height: 100vh; display: flex; flex-direction: column; padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left)); } a { color: var(--accent); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; } /* ------------------------------------------------------------ ust bar */ .bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; max-width: 1040px; width: 100%; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 0 12px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: 0.01em; min-height: 44px; } .logo { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.8; } .links { display: flex; gap: 4px; } .links a { color: var(--muted); text-decoration: none; padding: 10px 12px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; } .links a:hover { color: var(--ink); } /* Uc oyun + marka 360 px'e sigmiyordu (sayfa 11 px yatay tasiyordu, olculdu): * dar ekranda bosluk daralir, yine sigmazsa baglantilar alt satira iner. */ @media (max-width: 479px) { .links { gap: 0; } .links a { padding: 10px 8px; } } main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; } .foot { max-width: 1040px; width: 100%; margin: 48px auto 0; padding: 20px 0 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; } .foot p { margin: 0; } .foot-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 6px; } .foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); } .foot-links a:hover { color: var(--ink); } /* ------------------------------------------------ metin sayfalari (W6) */ .prose { max-width: 720px; } .prose h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 24px 0 12px; } .prose h2 { font-size: 21px; margin: 34px 0 8px; } .prose p { margin: 0 0 14px; line-height: 1.6; max-width: 40em; } .prose .updated { color: var(--muted); font-size: 14px; } .prose .links-out { display: flex; flex-wrap: wrap; gap: 0 18px; } .prose .links-out a { display: inline-flex; align-items: center; min-height: 44px; } .prose .cta { margin-top: 12px; } /* kitaplar (W6) */ .book-list { display: grid; gap: 28px; margin-top: 28px; max-width: 860px; } .book { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 20px; align-items: start; } .book-cover { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); } .book-body h2 { font-size: 21px; margin: 0 0 6px; line-height: 1.25; } .book-body p { margin: 0 0 10px; } .book-sub { color: var(--muted); } .book-count { font-size: 14px; color: var(--muted); } .solved-book { margin: 4px 0 0; } .solved-book a { display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 479px) { .book { grid-template-columns: minmax(0, 110px) 1fr; gap: 14px; } } /* ------------------------------------------------------------ ana sayfa */ .hero { padding: 40px 0 24px; } .hero h1 { font-size: clamp(32px, 6vw, 48px); line-height: 1.1; margin: 0 0 12px; } .lede { font-size: 18px; color: var(--muted); margin: 0; max-width: 34em; } .games { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .game-card { display: flex; gap: 16px; align-items: center; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; } .card-art { width: 84px; height: 84px; flex: none; fill: none; stroke: var(--line-strong); stroke-width: 2; } .card-art .thin { stroke: var(--line); stroke-width: 1; } .card-art .mark { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; } .card-art .solid { fill: var(--line-strong); stroke: none; } .card-body { display: flex; flex-direction: column; gap: 4px; } .card-title { font-weight: 700; font-size: 20px; } .card-text { color: var(--muted); font-size: 14px; } .card-cta { color: var(--accent); font-weight: 600; margin-top: 4px; } /* ------------------------------------------------------------ oyun basligi */ .play-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 8px 0 12px; } .play-head h1 { margin: 0; font-size: 28px; } .navs { display: flex; flex-wrap: wrap; gap: 8px; } .levels { display: flex; background: var(--btn); border-radius: 10px; padding: 3px; gap: 2px; } .levels a { color: var(--muted); text-decoration: none; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 15px; } .levels a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); } /* ------------------------------------------------------------ oyun */ .game { --board: min(calc(100vw - 32px), 62vh, 560px); --pad-w: var(--board); width: 100%; } .status { display: flex; align-items: center; justify-content: space-between; width: var(--board); max-width: 100%; min-height: 44px; margin-bottom: 8px; color: var(--muted); font-size: 15px; } .clock { display: inline-flex; align-items: center; gap: 2px; } .timer { font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; margin-right: 4px; color: var(--ink); } button { font: inherit; color: var(--ink); background: var(--btn); border: 0; border-radius: 10px; min-height: 44px; min-width: 44px; padding: 0 14px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } button:active { background: var(--btn-press); } button:disabled { opacity: 0.4; cursor: default; } button:focus-visible, a:focus-visible, .cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button.primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; } button.danger { background: var(--bad); color: #fff; font-weight: 600; } button.icon { background: transparent; padding: 0; display: inline-grid; place-items: center; } button.icon.on { background: var(--btn); } button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .stage { display: grid; gap: 16px; justify-content: start; } .board-wrap { position: relative; width: var(--board); max-width: 100%; } /* Satir izleri AYRICA tanimlanir ve `minmax(0, 1fr)`dir: yalniz sutun * tanimliyken satirlar icerige gore boyutlaniyordu (notlu satir uzuyor, * obur satirlar daraliyordu; 1920 px'te satir 33-66 px, sutun 62 px). */ .board { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr)); aspect-ratio: 1; width: 100%; border: 2px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--surface); container-type: inline-size; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .brow { display: contents; } .cell { position: relative; display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: calc(100cqi / 9 * 0.58); line-height: 1; color: var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; } .cell[data-c="2"], .cell[data-c="5"] { border-right: 2px solid var(--line-strong); } .cell[data-c="8"] { border-right: 0; } .cell[data-r="2"], .cell[data-r="5"] { border-bottom: 2px solid var(--line-strong); } .cell[data-r="8"] { border-bottom: 0; } .cell.given { color: var(--ink); font-weight: 600; } .cell.peer { background: var(--peer); } .cell.same { background: var(--same); } .cell.sel { background: var(--sel); } .cell.conflict .v { color: var(--bad); } .cell.conflict:not(.given) { background: var(--bad-bg); } .cell.mistake .v { color: var(--bad); text-decoration: underline 0.06em; text-underline-offset: 0.12em; } .cell .v { grid-area: 1 / 1; } .notes { grid-area: 1 / 1; align-self: stretch; justify-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); font-size: calc(100cqi / 9 * 0.24); color: var(--muted); padding: 2px; place-items: center; } .notes .hit { color: var(--accent); font-weight: 700; } .board.hidden .v, .board.hidden .notes { visibility: hidden; } .board.hidden .cell { background: var(--surface); } .game[data-state="solved"] .cell:not(.given) { color: var(--ok); } .game[data-state="solved"] .board { border-color: var(--ok); } .veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: 6px; } .veil[hidden] { display: none; } .veil-title { margin: 0; font-size: 22px; font-weight: 700; } .notice { display: none; position: absolute; inset: auto 12px 12px; margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); text-align: center; } /* Bitis penceresi kapatilinca da sonraki bulmacaya gecilebilsin. */ .when-solved { display: none; } .game[data-state="solved"] .when-solved { display: block; width: 100%; } .game[data-state="loading"] .when-loading, .game[data-state="error"] .when-error, .game[data-state="done"] .when-done { display: block; } .game[data-state="error"] .notice { color: var(--bad); } .game[data-state="loading"] .board, .game[data-state="error"] .board { opacity: 0.35; } /* ------------------------------------------------------------ tus takimi */ .pad { width: var(--board); max-width: 100%; display: grid; gap: 10px; align-content: start; } .tools { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; } .tools button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 4px; font-size: 13px; color: var(--muted); } .tools button svg { color: var(--ink); } .tools [aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .tools [aria-pressed="true"] svg { color: var(--accent-ink); } .digits { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; } .digits button { padding: 0; min-width: 0; min-height: 56px; font-size: 26px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; } .digits button.complete { opacity: 0.35; } /* 9 rakam tek sirada dar telefonda 44 px'in altina duser (412 px'te 37 px, * olculdu): iki sira, 5 + 4. */ @media (max-width: 519px) { .digits { grid-template-columns: repeat(5, 1fr); } .digits button { min-height: 52px; } } .notes-mode .digits button { font-size: 18px; color: var(--muted); } @media (min-width: 860px) { /* 100vw - 368px = 16 px kenar x 2 + 16 px aralik + 300 px tus takimi + * 20 px kaydirma cubugu payi (100vw onu da sayar): yoksa 860-900 px * pencerede tahta + takim sigmiyordu. */ .game { --board: max(420px, min(560px, calc(100vh - 220px), calc(100vw - 368px))); } .stage { grid-template-columns: var(--board) 300px; align-items: start; } .pad { width: 300px; } .digits { grid-template-columns: repeat(3, 1fr); gap: 8px; } .digits button { min-height: 72px; font-size: 30px; } } .hint { margin: 0; color: var(--muted); font-size: 14px; } button svg .solid { fill: currentColor; stroke: none; } /* ------------------------------------------------------------ binary * Hucre olcusu tahtadan: --n izgara, --gut sayac seridi (hucre cinsinden). */ .game[data-game="binairo"] { --gut: 0; } .game[data-game="binairo"].with-counts { --gut: 0.9; } .bboard { --cell: calc(var(--board) / (var(--n) + var(--gut))); display: grid; grid-template-columns: calc(var(--cell) * var(--n)) calc(var(--cell) * var(--gut)); grid-template-rows: calc(var(--cell) * var(--n)) calc(var(--cell) * var(--gut)); user-select: none; -webkit-user-select: none; } .bcells { position: relative; display: grid; /* sudoku `.board` ile ayni sebep: satirlar da esit iz */ grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); border: 2px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--surface); touch-action: manipulation; } .bcell { display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: calc(var(--cell) * 0.52); line-height: 1; color: var(--accent); cursor: pointer; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; } .brow > .bcell:last-child { border-right: 0; } .brow:last-of-type > .bcell { border-bottom: 0; } .bcell.given { color: var(--ink); font-weight: 650; } .bcell.sel { box-shadow: inset 0 0 0 2px var(--accent); } .bcell.conflict { background: var(--bad-bg); color: var(--bad); } .bcell.mistake { color: var(--bad); text-decoration: underline 0.06em; text-underline-offset: 0.12em; } .bedge { position: absolute; transform: translate(-50%, -50%); width: calc(var(--cell) * 0.36); height: calc(var(--cell) * 0.36); display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: calc(var(--cell) * 0.28); line-height: 1; pointer-events: none; } .bcount { display: grid; color: var(--muted); font-size: max(10px, calc(var(--cell) * 0.26)); line-height: 1.15; font-variant-numeric: tabular-nums; } .bcount > div { display: flex; flex-direction: column; justify-content: center; align-items: center; } .bcount.rows { grid-template-rows: repeat(var(--n), 1fr); } .bcount.cols { grid-template-columns: repeat(var(--n), 1fr); } .bcount .full { opacity: 0.4; } .bcount .over { color: var(--bad); font-weight: 700; opacity: 1; } .game[data-game="binairo"]:not(.with-counts) .bcount { display: none; } .bboard.hidden .bcell { color: transparent; background: var(--surface); } .bboard.hidden .bcount, .bboard.hidden .bedge { visibility: hidden; } .game[data-game="binairo"][data-state="solved"] .bcell:not(.given) { color: var(--ok); } .game[data-game="binairo"][data-state="solved"] .bcells { border-color: var(--ok); } .tools.narrow { max-width: 360px; } /* ------------------------------------------------------------ nonogram * --cell, --rcw (satir ipucu seridi), --cch (sutun ipucu seridi) JS'ten: * tahta kutuya sigdirilir, yakinlastirmada kutu kaydirilir ve ipuclari * kenara yapisik kalir. Hucre surukleme boyar (touch-action: none); * kaydirma ipucu seritlerinden. */ .game[data-game="nonogram"] { --board: min(calc(100vw - 32px), 640px); --fill: var(--line-strong); } /* Masaustu tahta + 300 px takim. Bu kural genel kuraldan SONRA durmali: ayni * ozgullukte oldugu icin yukaridaki medya blogundaki kopyasi eziliyordu ve * 860-1000 px pencerede sayfa yatay tasiyordu (olculdu). */ @media (min-width: 860px) { .game[data-game="nonogram"] { --board: min(640px, calc(100vw - 368px)); } } .nboard { max-width: 100%; max-height: 76vh; overflow: auto; overscroll-behavior: contain; width: max-content; } .ngrid { display: grid; grid-template-columns: var(--rcw) repeat(var(--n), var(--cell)); grid-template-rows: var(--cch) repeat(var(--n), var(--cell)); user-select: none; -webkit-user-select: none; } .nrow { display: contents; } .ncorner { position: sticky; top: 0; left: 0; z-index: 3; background: var(--bg); } .nclue { display: flex; background: var(--bg); color: var(--ink); font-size: calc(var(--cell) * 0.5); line-height: 1; font-variant-numeric: tabular-nums; touch-action: pan-x pan-y; } .nclue.across { position: sticky; left: 0; z-index: 2; justify-content: flex-end; align-items: center; padding-right: calc(var(--cell) * 0.3); } .nclue.across span { width: calc(var(--cell) * 0.66); text-align: center; } .nclue.down { position: sticky; top: 0; z-index: 2; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: calc(var(--cell) * 0.3); } .nclue.down span { height: calc(var(--cell) * 0.66); display: flex; align-items: center; } .nclue.cur { background: var(--same); } .nclue.done { color: var(--muted); opacity: 0.45; } .ncell { display: grid; place-items: center; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; } .nrow > .ncell:nth-child(2) { border-left: 2px solid var(--line-strong); } .nrow:nth-child(2) > .ncell { border-top: 2px solid var(--line-strong); } .nrow > .ncell:nth-child(5n + 1), .nrow > .ncell:last-child { border-right: 2px solid var(--line-strong); } .nrow:nth-child(5n + 1) > .ncell, .nrow:last-child > .ncell { border-bottom: 2px solid var(--line-strong); } .ncell.fill { background: var(--fill); } .ncell.cross::after { content: "\00d7"; color: var(--muted); font-size: calc(var(--cell) * 0.7); line-height: 1; } .ncell.sel { box-shadow: inset 0 0 0 2px var(--accent); } .ncell.mistake.fill { background: var(--bad); } .ncell.mistake.cross::after { color: var(--bad); } .nboard.hidden .ncell { background: var(--surface); } .nboard.hidden .ncell::after { content: none; } .game[data-game="nonogram"][data-state="solved"] .ncell { border-color: transparent; } .game[data-game="nonogram"][data-state="solved"] .ncell::after { content: none; } .game[data-game="nonogram"][data-state="solved"] .ncell.fill { background: var(--ink); } .picture { margin: 10px 0 0; font-size: 20px; font-weight: 650; } .picture:empty { display: none; } .solved-name { font-size: 20px; font-weight: 650; margin: 0 0 4px; } .toolswitch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; background: var(--btn); border-radius: 12px; } .toolswitch button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: transparent; color: var(--muted); } .toolswitch [aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); } .zoomed .nboard { touch-action: pan-x pan-y; } /* ------------------------------------------------------------ metin */ .about { max-width: 40em; margin-top: 32px; } .about h2 { font-size: 20px; margin: 0 0 6px; } .about p { margin: 0; color: var(--muted); } .about .more { margin-top: 4px; } .about .more a, .hint-how { display: inline-flex; align-items: center; min-height: 44px; } /* ------------------------------------------------------------ ipucu (W4) * 1. asama: bolge (--hint-area). 2. asama: gerekcenin hucreleri (--hint-key), * hedef hucrede degerin onizlemesi (yesil, yazilmamis), elenen aday ustu cizili. * Secim vurgusundan SONRA durur: ipucu acikken o baskin. */ .hint-panel { display: grid; gap: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--hint-key); border-radius: var(--radius); box-shadow: var(--shadow); } .hint-name { margin: 0; font-weight: 700; font-size: 17px; } .hint-look, .hint-result { margin: 0; } .hint-why p { margin: 0 0 4px; color: var(--muted); } .hint-why:empty { display: none; } .hint-result { font-weight: 600; } .hint-result:empty { display: none; } .hint-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .hint-actions button { flex: 1 1 auto; min-height: 44px; } .hint-how { font-size: 14px; justify-self: start; } .solved-hints { color: var(--muted); } .solved-hints:empty { display: none; } .cell.h-area, .bcell.h-area, .ncell.h-area:not(.fill), .nclue.h-area { background: var(--hint-area); } .cell.h-key, .bcell.h-key { background: var(--hint-key); } .cell.h-target, .bcell.h-target { color: var(--ok); box-shadow: inset 0 0 0 2px var(--ok); } .cell.h-wrong, .bcell.h-wrong, .ncell.h-wrong { box-shadow: inset 0 0 0 2px var(--bad); background: var(--bad-bg); } .notes .gone { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 0.12em; } .notes .cand { color: var(--ink); font-weight: 700; } .ncell.g-fill { background: repeating-linear-gradient(45deg, var(--ok) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 2px var(--ok); } .ncell.g-cross { box-shadow: inset 0 0 0 2px var(--ok); } .ncell.g-cross::after { content: "\00d7"; color: var(--ok); font-size: calc(var(--cell) * 0.7); line-height: 1; } /* ------------------------------------------------------------ rehber (W4) */ .guide { max-width: 860px; } .guide-head h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 24px 0 8px; } .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; } .toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--btn); color: var(--ink); text-decoration: none; font-size: 15px; } .technique { margin: 44px 0 0; scroll-margin-top: 16px; } .technique h2 { margin: 0 0 2px; font-size: 24px; } .technique > p { max-width: 40em; } .bands { margin: 0 0 8px; color: var(--muted); font-size: 14px; } .example { margin: 16px 0 0; display: grid; gap: 14px; } .ex-board { --board: min(420px, calc(100vw - 32px)); --gut: 0; --fill: var(--line-strong); width: var(--board); max-width: 100%; } .example .cell, .example .bcell, .example .ncell { cursor: default; } .example figcaption { display: grid; gap: 8px; align-content: start; max-width: 420px; } .example figcaption p { margin: 0; } .ex-title { font-weight: 700; } .example [data-ex-show] { justify-self: start; min-height: 44px; } .ex-source { font-size: 14px; } .ex-source a { display: inline-flex; align-items: center; min-height: 44px; } .guide-play { margin: 48px 0 0; } .cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; } @media (min-width: 860px) { .example { grid-template-columns: 420px 1fr; align-items: start; } } /* ------------------------------------------------------------ pencereler */ dialog.sheet { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); padding: 20px; width: min(380px, calc(100vw - 32px)); box-shadow: 0 12px 48px rgb(0 0 0 / 0.25); } dialog.sheet::backdrop { background: rgb(0 0 0 / 0.35); } dialog h2 { margin: 0 0 8px; font-size: 22px; } dialog p { margin: 0 0 16px; } .solved-time { font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; } .row { display: flex; gap: 8px; flex-wrap: wrap; } dialog .row { margin-top: 16px; } dialog .row button { flex: 1; } .check { display: flex; align-items: center; gap: 12px; min-height: 44px; } .check input, .theme input { width: 20px; height: 20px; accent-color: var(--accent); } .theme { border: 0; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; } .theme legend { padding: 0; margin-bottom: 4px; color: var(--muted); font-size: 14px; } .theme label { display: flex; align-items: center; gap: 8px; min-height: 44px; } /* ------------------------------------------------------------ W5: baglanti, takvim */ .calendar-head { flex-basis: 100%; margin: 0; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; } .calendar-head .cal-type { color: var(--ink); font-weight: 600; } .calendar-head a { display: inline-flex; align-items: center; min-height: 44px; } .game-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; width: var(--board); max-width: 100%; margin-top: 12px; color: var(--muted); font-size: 15px; } .game-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; } .game-links button { margin-left: auto; font-size: 15px; } .game[data-state="closed"] .when-closed { display: block; position: static; margin: 24px 0; } .game[data-state="closed"] .board-wrap { width: auto; } .game[data-state="closed"] .pad, .game[data-state="closed"] .status, .game[data-state="closed"] [data-board] { display: none; } .solved-note { color: var(--muted); } .solved-note:empty { display: none; } .toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); z-index: 20; max-width: calc(100vw - 32px); } .share-text { width: 100%; font: inherit; font-size: 14px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); resize: vertical; } .notice-inline { color: var(--muted); } .notice-inline a { display: inline-flex; align-items: center; min-height: 44px; } .when-error { display: none; } [data-state="error"] > .when-error { display: block; color: var(--bad); } /* ------------------------------------------------------------ gunluk sayfasi */ .daily, .stats { max-width: 860px; } .today-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; } .today-card { display: grid; gap: 6px; align-content: start; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .today-card h2 { margin: 0; font-size: 22px; } .today-card p { margin: 0; } .today-when, .today-note, .today-streak { color: var(--muted); font-size: 14px; } .today-level { font-weight: 600; } .today-status:empty { display: none; } .today-card .cta { justify-self: start; margin-top: 8px; } .archive { margin-top: 40px; } .archive h2 { font-size: 24px; margin: 0 0 8px; } .arch { margin: 20px 0 0; } .arch-head { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .arch-head h3 { margin: 0 auto 0 0; font-size: 18px; } .arch-month { min-width: 9em; text-align: center; font-variant-numeric: tabular-nums; } .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 420px; margin-top: 8px; } .month-grid .wd { text-align: center; color: var(--muted); font-size: 13px; } .day { display: grid; place-items: center; min-height: 44px; border-radius: 8px; font-variant-numeric: tabular-nums; text-decoration: none; } a.day { background: var(--btn); color: var(--ink); } .day.off { color: var(--line); } a.day.started { box-shadow: inset 0 0 0 2px var(--accent); } a.day.solved { background: var(--accent); color: var(--accent-ink); font-weight: 600; } a.day[aria-current="date"] { outline: 2px solid var(--ink); outline-offset: 1px; } .week-list { display: grid; gap: 6px; max-width: 420px; margin-top: 8px; } .week-list .day { justify-items: start; padding: 0 14px; } /* ------------------------------------------------------------ istatistik */ .stat-type { margin-top: 32px; } .stat-type h2 { margin: 0 0 8px; font-size: 22px; } .stat-type table { border-collapse: collapse; width: 100%; max-width: 640px; font-variant-numeric: tabular-nums; } .stat-type th, .stat-type td { padding: 10px 8px; text-align: right; border-bottom: 1px solid var(--line); } .stat-type th:first-child { text-align: left; font-weight: 600; } .stat-type thead th { color: var(--muted); font-weight: 500; font-size: 14px; } .stat-streak { color: var(--muted); } @media (max-width: 479px) { .stat-type th, .stat-type td { padding: 8px 4px; font-size: 14px; } } @media print { .bar, .pad, .status, .levels, .foot, .about, .game-links, .toast { display: none; } }