:root {
  --bg:#f4f1ea; --paper:#fff; --ink:#1a1a1a; --muted:#6b6b6b;
  --line:#1a1a1a; --line-soft:#c9c4b8; --black-cell:#1a1a1a;
  --accent:#b3122b; --accent-soft:#fbe4e8;
  --hl:#dbeafe; --active:#ffd43b;
  --correct:#2b8a3e; --wrong:#e03131;
  --good-bg:#d3f9d8; --wrong-bg:#ffe3e3;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cell:40px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);}
body{padding:10px 10px 40px;}
.wrap{max-width:880px;margin:0 auto;}

header.masthead{text-align:center;border-bottom:3px double var(--line);padding-bottom:6px;}
.brand{font-family:var(--serif);font-weight:700;letter-spacing:.5px;font-size:clamp(20px,5vw,30px);}
.sub{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:clamp(11px,3vw,14px);}
.dateline{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);
  border-bottom:1px solid var(--line-soft);padding:5px 2px;margin-bottom:8px;}
.dateline strong{color:var(--ink);}

.cluebar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;border-radius:10px;padding:8px 6px;margin-bottom:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);}
.cluebar button{flex:0 0 auto;width:34px;height:34px;border:none;border-radius:8px;
  background:rgba(255,255,255,.18);color:#fff;font-size:18px;cursor:pointer;}
.cluebar button:active{background:rgba(255,255,255,.35);}
.cluebar .body{flex:1 1 auto;min-width:0;line-height:1.25;}
.cluebar .tag{font-size:11px;font-weight:700;letter-spacing:.5px;opacity:.9;text-transform:uppercase;}
.cluebar .txt{font-size:15px;font-weight:600;}

.layout{display:grid;grid-template-columns:1fr;gap:18px;justify-items:center;}

/* min-width:0 → grid/flex öğesinin içeriğinden (geniş ızgara) küçülebilmesi;
   böylece tüm sayfa yatay kayacağına yalnızca .board-scroll içi kayar. */
.board-col{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:100%;}
.board-scroll{max-width:100%;overflow:auto;border:1px solid var(--line-soft);
  border-radius:6px;background:var(--paper);-webkit-overflow-scrolling:touch;}
/* Izgara çizgileri her hücrenin kendi kenarlığıdır (gap + arka plan sızması
   değil). Büyük hücre boyutlarında derleyicinin 1px boşlukları yutup çizgileri
   kaybetmesini önler. Çizgi yalnız sağ+alt; tahta üst+sol kenarı tamamlar. */
.board{display:grid;background:var(--paper);gap:0;padding:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);}
.cell{position:relative;width:var(--cell);height:var(--cell);background:var(--paper);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);
  font-weight:600;font-size:calc(var(--cell)*.5);text-transform:uppercase;cursor:pointer;
  user-select:none;color:var(--ink);}
.cell.black{background:var(--black-cell);cursor:default;}
.cell .num{position:absolute;top:1px;left:2px;font-family:var(--sans);font-weight:600;
  font-size:calc(var(--cell)*.27);color:var(--muted);line-height:1;}
.cell.hl{background:var(--hl);}
.cell.active{background:var(--active);}
.cell.correct{color:var(--correct);}
.cell.wrong{color:var(--wrong);}
.cell.fl-good{background:var(--good-bg)!important;}
.cell.fl-bad{background:var(--wrong-bg)!important;}

.zoom{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);}
.zoom button{width:30px;height:30px;border:1px solid var(--line);background:var(--paper);
  border-radius:6px;font-size:16px;cursor:pointer;}

.controls{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;}
button.ctl{font-size:13px;padding:7px 11px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);border-radius:6px;cursor:pointer;}
button.ctl:hover{background:#f0ece2;}
.toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;
  padding:7px 11px;border:1px solid var(--line);border-radius:6px;background:var(--paper);}
.toggle input{accent-color:var(--accent);}

.clues{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:480px){.clues{grid-template-columns:1fr 1fr;}}
.cluelist h3{font-family:var(--serif);font-size:14px;margin:0 0 6px;border-bottom:2px solid var(--line);
  padding-bottom:4px;text-transform:uppercase;letter-spacing:1px;}
/* İpucu listesi kendi içinde kayar (sayfayı uzatmaz). position:relative →
   etkin ipucunu listenin içinde konumlamak için. overscroll-behavior →
   liste sonuna gelince sayfanın kaymasını engeller. */
.cluelist ol{list-style:none;margin:0;padding:0;position:relative;
  max-height:44vh;overflow-y:auto;overscroll-behavior:contain;}
@media(min-width:760px){.cluelist ol{max-height:68vh;}}
.cluelist ol::-webkit-scrollbar{width:8px;}
.cluelist ol::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:4px;}
.cluelist ol::-webkit-scrollbar-track{background:transparent;}
.cluelist li{display:flex;gap:8px;font-size:13px;line-height:1.4;padding:4px 6px;border-radius:5px;cursor:pointer;}
.cluelist li:hover{background:#efeadf;}
.cluelist li.sel{background:var(--hl);}
.cluelist li .n{font-weight:700;min-width:18px;text-align:right;}

.banner{display:none;text-align:center;margin:0 auto 12px;max-width:560px;background:var(--good-bg);
  border:1px solid #2f9e44;color:#1b5e20;padding:11px;border-radius:8px;font-size:15px;font-weight:600;}
.banner.show{display:block;}

.archive{display:flex;justify-content:space-between;gap:8px;margin-top:18px;
  font-size:13px;border-top:1px solid var(--line-soft);padding-top:10px;}
.archive a{color:var(--accent);text-decoration:none;}
.archive a:hover{text-decoration:underline;}
.archive a.disabled{color:var(--line-soft);pointer-events:none;}

.demo-badge{text-align:center;background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent);border-radius:8px;padding:7px 10px;margin-bottom:10px;
  font-size:12px;font-weight:600;}
.notice{text-align:center;background:var(--paper);border:1px solid var(--line-soft);
  border-radius:10px;padding:38px 22px;margin:16px 0;}
.notice-h{font-family:var(--serif);font-size:21px;font-weight:700;margin-bottom:10px;}
.notice-p{color:var(--muted);font-size:14px;line-height:1.55;max-width:420px;margin:0 auto 18px;}
.notice-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:9px 17px;border-radius:8px;font-size:14px;font-weight:600;}

.hidden-input{position:fixed;opacity:0;pointer-events:none;width:1px;height:1px;left:-9999px;top:0;}
.foot{text-align:center;color:var(--muted);font-size:11px;margin-top:22px;}

/* ---- Marka başlığı + alt bilgi (açılış/arşiv + oyuncu) ---- */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-bottom:3px double var(--line);padding-bottom:12px;margin-bottom:6px;}
.logo-link{display:block;width:min(46vw,210px);line-height:0;}
.logo{display:block;width:100%;height:auto;}
.header-link{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  color:var(--ink);font-size:.86rem;font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--accent);padding:2px 1px 3px;transition:color .12s;}
.header-link:hover{color:var(--accent);}
.header-link svg{width:16px;height:16px;flex:none;}

.page-title{text-align:center;margin:18px 0 2px;}
.page-title h1{font-family:var(--serif);font-weight:700;letter-spacing:.3px;
  font-size:clamp(22px,5.4vw,32px);margin:0;}

.page-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:40px;border-top:1px solid var(--line-soft);padding-top:18px;
  color:var(--muted);font-size:12px;}
.page-footer a{color:var(--accent);text-decoration:none;}
.page-footer a:hover{text-decoration:underline;}

/* ---- Arşiv / genel sayfa ---- */
.lead{font-family:var(--serif);color:var(--muted);font-size:14px;line-height:1.6;
  text-align:center;max-width:560px;margin:14px auto 6px;}
.section-h{font-family:var(--serif);font-size:13px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--muted);border-bottom:2px solid var(--line);padding-bottom:5px;margin:26px 0 14px;}

a.hero{display:flex;gap:18px;align-items:center;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);transition:box-shadow .15s,transform .15s;}
a.hero:hover{box-shadow:0 8px 22px rgba(0,0,0,.12);transform:translateY(-2px);}
.hero-grid{flex:0 0 auto;}
.preview-board{display:grid;gap:0;--mini-cell:22px;
  border-top:1px solid var(--line);border-left:1px solid var(--line);}
.mcell{position:relative;width:var(--mini-cell);height:var(--mini-cell);background:var(--paper);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.mcell.black{background:var(--black-cell);}
.mcell .mnum{position:absolute;top:0;left:1px;line-height:1;color:var(--muted);
  font-size:calc(var(--mini-cell)*.42);}
.hero-meta{flex:1 1 auto;min-width:0;}
.hero-kicker{font-size:12px;font-weight:600;color:var(--muted);}
.hero-title{font-family:var(--serif);font-size:clamp(18px,4vw,24px);font-weight:700;margin:4px 0 6px;}
.hero-sub{font-size:13px;color:var(--muted);}
.hero-cta{display:inline-block;margin-top:14px;background:var(--accent);color:#fff;
  padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;}
.hero-empty{background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;
  padding:30px 22px;text-align:center;color:var(--muted);font-size:14px;line-height:1.55;}

.month{font-family:var(--serif);font-size:15px;font-weight:700;margin:22px 0 10px;
  border-bottom:1px solid var(--line-soft);padding-bottom:5px;}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;}
a.day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line-soft);
  border-radius:8px;padding:10px 4px;transition:border-color .12s,background .12s;}
a.day:hover{border-color:var(--accent);background:var(--accent-soft);}
a.day.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.day .dnum{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1;}
.day .dwd{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.day .dno{font-size:10px;color:var(--muted);}
.empty{text-align:center;color:var(--muted);padding:30px;}

@media(max-width:460px){a.hero{flex-direction:column;text-align:center;}.hero-meta{text-align:center;}}