/* ==========================================================================
   Fizik Oyunları — "Milimetrik Defter" stili
   Kareli kâğıt, kalın mürekkep çizgileri, ofset gölgeler. games.css'ten sonra yüklenir.
   Haber sayfaları gazete stilinde kalır; bu dosya yalnızca oyun bileşenlerini değiştirir.
   ========================================================================== */

:root {
  --nb-ink: #1b1b1b;
  --nb-ink-2: #3d3d3d;
  --nb-muted: #6b665c;
  --nb-paper: #fbf7ee;
  --nb-cream: #fff8e1;
  --nb-line: #e3eaf5;
  --nb-line-2: #c9d6ec;
  --nb-yellow: #ffd23f;
  --nb-mint: #57c4ad;
  --nb-sand: #e8e4da;
  --nb-font: "Bricolage Grotesque", "Libre Franklin", system-ui, sans-serif;
  --nb-border: 2.5px solid var(--nb-ink);
  --nb-shadow: 5px 5px 0 var(--nb-ink);
  --nb-shadow-sm: 3px 3px 0 var(--nb-ink);
}

/* ---------- sayfa: kareli kâğıt ---------- */
body.fa-games-page {
  background-color: var(--nb-paper);
  background-image:
    linear-gradient(var(--nb-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nb-line) 1px, transparent 1px),
    linear-gradient(var(--nb-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--nb-line-2) 1px, transparent 1px);
  background-size: 12px 12px, 12px 12px, 60px 60px, 60px 60px;
  color: var(--nb-ink);
  font-family: var(--nb-font);
}
.fa-games-page .logo { color: var(--nb-ink); }
.fa-games-page .footer { border-top: var(--nb-border); background: var(--nb-paper); font-family: var(--nb-font); }

/* üst çubuklar */
.fa-games-page .g-top, .fa-games-page .gp-bar { background: var(--nb-paper); border-bottom: var(--nb-border); }
.fa-games-page .g-brand b, .gp-title b { font-family: var(--nb-font); font-weight: 800; letter-spacing: -.03em; }
.gp-title .sw { border: 2px solid var(--nb-ink); border-radius: 7px; transform: rotate(-6deg); }
.gp-back, .gp-timer { font-family: var(--nb-font); }
.gp-timer { background: #fff; border: 2px solid var(--nb-ink); border-radius: 8px; padding: 3px 10px; min-width: 0; }
.fa-games-page .iconbtn { color: var(--nb-ink); }
.fa-games-page .iconbtn:hover { background: var(--nb-cream); }

/* başlık alanı */
.fa-games-page .g-hero { font-family: var(--nb-font); }
.fa-games-page .g-date {
  display: inline-block; background: var(--nb-ink); color: var(--nb-paper); font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 4px; transform: rotate(-1.5deg); margin-bottom: 12px; letter-spacing: 0;
}
.fa-games-page .g-hero h1 { font-weight: 800; letter-spacing: -.04em; font-size: 56px; }
.fa-games-page .g-hero h1 em { font-style: normal; background: linear-gradient(transparent 58%, var(--nb-yellow) 58%); padding: 0 4px; }
.fa-games-page .g-hero p { color: var(--nb-ink-2); }
.hub-progress { font-family: var(--nb-font); }
.hub-progress .bar { height: 14px; border: 2px solid var(--nb-ink); background: #fff; }
.hub-progress .bar i { background: var(--nb-yellow); border-radius: 0; border-right: 2px solid var(--nb-ink); }

/* ---------- düğmeler ---------- */
.fa-games-page .pill, .g-modal .pill, .g-help .pill, .cn-actions .pill, .lg-actions .pill {
  font-family: var(--nb-font); border: var(--nb-border); border-radius: 10px; box-shadow: var(--nb-shadow-sm);
  transition: transform .12s, box-shadow .12s;
}
.fa-games-page .pill:hover, .g-modal .pill:hover, .g-help .pill:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--nb-ink); }
.fa-games-page .pill:active, .g-modal .pill:active, .g-help .pill:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--nb-ink); }
.pill-dark { background: var(--nb-ink); color: #fff; }
.pill-light { background: #fff; color: var(--nb-ink); }
.cn-actions .pill:disabled { box-shadow: none; }
.fa-games-page .btn-ghost { border: var(--nb-border); border-radius: 10px; background: #fff; font-family: var(--nb-font); box-shadow: var(--nb-shadow-sm); }

/* ---------- oyun kartları (merkez + ana sayfa + "diğer oyunlar") ---------- */
.hub-card, .tile {
  background: #fff; border: var(--nb-border); border-radius: 14px; box-shadow: var(--nb-shadow);
  font-family: var(--nb-font); transition: transform .15s, box-shadow .15s;
}
.hub-card:hover, .tile:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--nb-ink); }
.hub-card .art, .tile .art { border-bottom: var(--nb-border); }
.hub-card .name, .tile .name { font-weight: 800; letter-spacing: -.03em; }
.hub-card .desc, .tile .desc { color: #4a4a4a; }
.hub-card .kind { background: var(--nb-ink); color: #fff; border-radius: 4px; transform: rotate(-2deg); }
.hub-card .done, .tile .new { background: #fff; color: var(--nb-ink); border: 2px solid var(--nb-ink); border-radius: 4px; transform: rotate(3deg); }
.hub-card .play, .tile .state { background: var(--nb-ink); color: #fff; border-radius: 10px; }
.tile.soon .state { background: var(--nb-sand); color: var(--nb-ink); }
.hub-card .streak { color: var(--nb-ink); font-weight: 600; }
.fa-games-page .g-section h3, .gp-more h3 { font-family: var(--nb-font); font-weight: 800; letter-spacing: -.02em; font-size: 22px; }
.how div { border: var(--nb-border); box-shadow: var(--nb-shadow-sm); border-radius: 12px; font-family: var(--nb-font); }
.how i { background: var(--nb-yellow); color: var(--nb-ink); border: 2px solid var(--nb-ink); }

/* ana sayfadaki oyun bandı: haber sayfasında kareli bir "oyun köşesi" */
.games-band {
  background-color: var(--nb-paper);
  background-image: linear-gradient(var(--nb-line) 1px, transparent 1px), linear-gradient(90deg, var(--nb-line) 1px, transparent 1px);
  background-size: 12px 12px;
  border-top: var(--nb-border); border-bottom: var(--nb-border);
}
.games-band h2 { font-family: var(--nb-font); letter-spacing: -.04em; }
.games-band p { font-family: var(--nb-font); }
.games-band .btn-ghost { border: var(--nb-border); border-radius: 10px; background: #fff; box-shadow: var(--nb-shadow-sm); font-family: var(--nb-font); }
.games-band .tiles { gap: 20px; }

/* sağ sütun kutusu ve makale sonu çağrısı */
.play-promo { border: var(--nb-border); border-radius: 14px; box-shadow: var(--nb-shadow); font-family: var(--nb-font); transition: transform .15s, box-shadow .15s; }
.play-promo:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--nb-ink); }
.play-promo .art { background: #8fd694; color: var(--nb-ink); border-bottom: var(--nb-border); }
.play-promo .art b, .play-promo .art small { font-family: var(--nb-font); }
.play-promo .body { font-family: var(--nb-font); }
.play-promo .body .btn { border-radius: 10px; }
.puzzle-cta {
  background-color: var(--nb-paper);
  background-image: linear-gradient(var(--nb-line) 1px, transparent 1px), linear-gradient(90deg, var(--nb-line) 1px, transparent 1px);
  background-size: 12px 12px;
  border: var(--nb-border); border-radius: 14px; box-shadow: var(--nb-shadow); font-family: var(--nb-font);
}
.puzzle-cta:hover { box-shadow: 8px 8px 0 var(--nb-ink); }
.puzzle-cta .art { border: 2px solid var(--nb-ink); transform: rotate(-4deg); }
.puzzle-cta small { color: var(--nb-ink); background: var(--nb-yellow); padding: 1px 6px; border-radius: 3px; }
.puzzle-cta .go { border-radius: 10px; }

/* ---------- pencereler ---------- */
.g-dialog, .g-help .box {
  background: #fff; border: var(--nb-border); border-radius: 16px; box-shadow: 8px 8px 0 var(--nb-ink); font-family: var(--nb-font);
}
.g-dialog h2, .g-help h2 { font-weight: 800; letter-spacing: -.03em; }
.g-res-art { border: var(--nb-border); transform: rotate(-4deg); }
.g-res-stats { border-top: 2px dashed var(--nb-ink); border-bottom: 2px dashed var(--nb-ink); }
.g-count span { background: var(--nb-yellow); padding: 1px 6px; border-radius: 3px; }
.g-toast { background: var(--nb-ink); font-family: var(--nb-font); border-radius: 10px; box-shadow: 3px 3px 0 var(--nb-yellow); }

/* ---------- Fizikle ---------- */
.fz-tile { border: var(--nb-border); border-radius: 10px; background: #fff; font-family: var(--nb-font); color: var(--nb-ink); }
.fz-tile.filled { border-color: var(--nb-ink); box-shadow: 2px 2px 0 var(--nb-ink); }
.fz-tile.correct, .fz-tile.present, .fz-tile.absent { border-color: var(--nb-ink); }
.fz-tile.correct { background: var(--nb-mint); color: var(--nb-ink); }
.fz-tile.present { background: var(--nb-yellow); color: var(--nb-ink); }
.fz-tile.absent { background: var(--nb-sand); color: #8a8578; }
.fz-key { background: #fff; border: 2px solid var(--nb-ink); border-radius: 8px; font-family: var(--nb-font); color: var(--nb-ink); box-shadow: 2px 2px 0 var(--nb-ink); }
.fz-key:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--nb-ink); filter: none; }
.fz-key.correct { background: var(--nb-mint); color: var(--nb-ink); }
.fz-key.present { background: var(--nb-yellow); color: var(--nb-ink); }
.fz-key.absent { background: var(--nb-sand); color: #8a8578; }
.fz-demo { border: 2px solid var(--nb-ink); color: var(--nb-ink); }
.fz-demo.correct { background: var(--nb-mint); } .fz-demo.present { background: var(--nb-yellow); } .fz-demo.absent { background: var(--nb-sand); color: #8a8578; }

/* ---------- Bağlantı ---------- */
.cn { font-family: var(--nb-font); }
.cn-tile { background: #fff; border: var(--nb-border); border-radius: 10px; font-family: var(--nb-font); box-shadow: 2px 2px 0 var(--nb-ink); }
.cn-tile:hover { background: var(--nb-cream); }
.cn-tile.on { background: var(--nb-ink); color: #fff; box-shadow: none; transform: translate(2px, 2px); }
.cn-group { border: var(--nb-border); border-radius: 10px; box-shadow: var(--nb-shadow-sm); color: var(--nb-ink); }
.cn-mist i { border: 2px solid var(--nb-ink); background: #fff; }
.cn-mist i.on { background: var(--nb-ink); }

/* ---------- mantık ızgaraları ---------- */
.lg-grid { border: 3px solid var(--nb-ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--nb-ink); }
.lg-cell { border-right-color: rgba(27,27,27,.22); border-bottom-color: rgba(27,27,27,.22); }
.at .lg-cell.br { border-right-width: 3px; }
.at .lg-cell.bb { border-bottom-width: 3px; }
.at-x { color: rgba(27,27,27,.5); font-family: var(--nb-font); }
.yk .lg-cell { background: #fff; }
.yk .lg-cell.given { background: var(--nb-cream); }
.yk-q { border: 2.5px solid var(--nb-ink); color: var(--nb-ink); font-family: var(--nb-font); }
.yk-q.plus { background: #ff8c69; }
.yk-q.minus { background: #7cc6fe; }
.yk-edge { border: 2px solid var(--nb-ink); color: var(--nb-ink); box-shadow: none; }
.yk-msg { font-family: var(--nb-font); }
.dv .lg-cell { background: #fff; }
.dv .lg-cell.on { background: #fff3b0; }
.dv-wire polyline { stroke: var(--nb-ink); }
.dv-num { background: var(--nb-ink); border: 2px solid var(--nb-ink); font-family: var(--nb-font); }
.dv .lg-cell.head::after { background: var(--nb-ink) !important; }
.dv .lg-cell.head .dv-num { box-shadow: 0 0 0 4px var(--nb-yellow); }
.dv-prog { font-family: var(--nb-font); color: var(--nb-ink-2); }

/* ---------- Günün Bilim İnsanı ---------- */
.fa-game {
  --fa-accent: #1b1b1b; --fa-ink: #1b1b1b; --fa-muted: #5f5a50; --fa-soft: #fff8e1; --fa-line: #1b1b1b; --fa-ok: #1b1b1b; --fa-ok-soft: #d7f2e9;
  background: #fff; border: var(--nb-border); border-radius: 16px; box-shadow: var(--nb-shadow); font-family: var(--nb-font);
}
.fa-game .fa-title { font-family: var(--nb-font); letter-spacing: -.03em; }
.fa-game .fa-clue { border: 2px solid var(--nb-ink); }
.fa-game .fa-clue.is-locked { border: 2px dashed rgba(27,27,27,.35); }
.fa-game .fa-clue-n { background: var(--nb-yellow); color: var(--nb-ink); border: 2px solid var(--nb-ink); }
.fa-game .is-locked .fa-clue-n { background: #fff; color: var(--nb-muted); border-color: rgba(27,27,27,.35); }
.fa-game .fa-input { border: var(--nb-border); border-radius: 10px; font-family: var(--nb-font); }
.fa-game .fa-btn { border: var(--nb-border); border-radius: 10px; box-shadow: var(--nb-shadow-sm); font-family: var(--nb-font); }
.fa-game .fa-guess { border: 1.5px solid var(--nb-ink); }
.fa-game .fa-guess.is-bad { background: #ffd9cc; color: var(--nb-ink); }
.fa-game .fa-guess.is-ok { background: #d7f2e9; color: var(--nb-ink); }
.fa-game .fa-card { border: var(--nb-border); box-shadow: var(--nb-shadow-sm); }
.fa-game .fa-card.is-won { background: #d7f2e9; }
.fa-game .fa-card.is-lost { background: #ffd9cc; }
.fa-game .fa-dist-bar { background: #b8b2a4; border: 1.5px solid var(--nb-ink); border-radius: 3px; color: var(--nb-ink); }
.fa-game .fa-dist-bar.is-today { background: var(--nb-mint); }
.fa-game .fa-read { color: var(--nb-ink); text-decoration: underline; text-decoration-color: var(--nb-yellow); text-decoration-thickness: 4px; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .fa-games-page .g-hero h1 { font-size: 38px; }
  .hub-card, .tile { box-shadow: var(--nb-shadow-sm); }
  .hub-card .art, .tile .art { border-bottom: 0; border-right: var(--nb-border); }
  .fz-tile { border-width: 2px; }
}

/* ---------- sonuç paylaşımı ---------- */
.g-share-title { margin: 4px 0 8px; font-family: var(--nb-font); font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.g-share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 6px; }
.g-sh { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; border: 2px solid var(--nb-ink); border-radius: 12px; background: #fff; color: var(--nb-ink); box-shadow: 2px 2px 0 var(--nb-ink); cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s, color .12s; }
.g-sh:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--nb-ink); color: #fff; }
.g-sh:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--nb-ink); }
.g-sh-whatsapp:hover { background: #25d366; }
.g-sh-x:hover { background: #000; }
.g-sh-facebook:hover { background: #1877f2; }
.g-sh-telegram:hover { background: #229ed9; }
.g-sh-linkedin:hover { background: #0a66c2; }
.g-sh-copy:hover, .g-sh-more:hover { background: var(--nb-ink); }
.g-sh-copy.done { background: var(--nb-mint); color: var(--nb-ink); }
.fa-game .g-share-row { justify-content: flex-start; }

/* ---------- sıralamalar ---------- */
.lb { margin-top: 16px; text-align: left; font-family: var(--nb-font); }
.lb.loading { opacity: .6; }
.lb h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lb h3 small { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--nb-muted); }
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px solid var(--nb-ink); border-radius: 12px; overflow: hidden; font-size: 14px; background: #fff; }
.lb-table th { background: var(--nb-cream); text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-bottom: 2px solid var(--nb-ink); }
.lb-table td { padding: 8px 10px; border-bottom: 1px dashed rgba(27,27,27,.25); overflow-wrap: break-word; }
.lb-table tr:last-child td { border-bottom: 0; }
.lb-table td.r, .lb-table th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-rank { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; font-weight: 800; font-size: 13px; border: 2px solid var(--nb-ink); background: #fff; }
.lb-rank.g1 { background: #ffd23f; } .lb-rank.g2 { background: #e3e3e3; } .lb-rank.g3 { background: #f2b48a; }
.lb-table tr.me td { background: #e7f6f0; font-weight: 800; }
.lb-table tr.gap td { text-align: center; color: var(--nb-muted); padding: 4px; font-size: 12px; }
.lb-me { margin: 8px 0 0; font-size: 13px; }
.lb-me b { background: var(--nb-yellow); padding: 1px 6px; border-radius: 3px; }
.lb-me a { text-decoration: underline; cursor: pointer; }
.lb-wait, .lb-empty { font-size: 14px; color: var(--nb-ink-2); margin: 6px 0; }
.lb-err { display: block; color: #b3261e; font-weight: 700; margin-top: 6px; }
.lb-err:empty { display: none; }
.lb-open { width: 100%; padding: 10px 12px; border: 2px dashed var(--nb-ink); border-radius: 12px; background: var(--nb-cream); font: 800 14px var(--nb-font); cursor: pointer; }
.join { margin-top: 0; padding: 14px; border: 2px dashed var(--nb-ink); border-radius: 12px; background: var(--nb-cream); text-align: left; font-family: var(--nb-font); }
.lb .join.lb-rename { margin-top: 10px; }
.join > b { font-size: 16px; }
.join p { margin: 4px 0 10px; font-size: 13px; color: var(--nb-ink-2); line-height: 1.4; }
.join-row { display: flex; gap: 8px; }
.join input { flex: 1; min-width: 0; height: 42px; border: 2px solid var(--nb-ink); border-radius: 10px; padding: 0 12px; font: 600 15px var(--nb-font); background: #fff; }
.join input:focus { outline: 3px solid var(--nb-yellow); outline-offset: 1px; }
.join-row button { height: 42px; padding: 0 16px; border: 2px solid var(--nb-ink); border-radius: 10px; background: var(--nb-ink); color: #fff; font: 800 14px var(--nb-font); box-shadow: 2px 2px 0 var(--nb-ink); cursor: pointer; }
.join-row button:disabled { opacity: .5; }
.join > small { display: block; margin-top: 8px; font-size: 12px; color: var(--nb-muted); }
.join .skip { display: inline-block; margin-top: 6px; font-size: 12px; text-decoration: underline; color: var(--nb-muted); background: none; border: 0; padding: 0; font-weight: 600; cursor: pointer; font-family: var(--nb-font); }
.lb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.lb-tabs button { padding: 6px 12px; border: 2px solid var(--nb-ink); border-radius: 999px; font: 700 13px var(--nb-font); background: #fff; cursor: pointer; color: var(--nb-ink); }
.lb-tabs button.on { background: var(--nb-ink); color: #fff; }
.lb-intro { margin: -6px 0 10px; font-family: var(--nb-font); font-size: 14px; color: var(--nb-ink-2); }
#liderler .lb { max-width: 760px; }
.fa-game .lb { margin-top: 14px; }
@media (max-width: 480px) {
  .lb-table { font-size: 13px; }
  .lb-table th, .lb-table td { padding: 7px 6px; }
  .lb-table th { font-size: 10px; letter-spacing: .02em; }
  .lb-week th:nth-child(4), .lb-week td:nth-child(4) { display: none; } /* "Oynanan" dar ekranda gizli */
  .lb-rank { min-width: 24px; height: 24px; font-size: 12px; }
}