/* ═══════════════ GUESS THE COVER — oyun ve siralama sayfasi ═══════════════
 * Yalnizca game.html yukluyor (body.page-game). Ana sayfanin (home.css)
 * hareket dili burada da gecerli: sicak tepe isigi, Cormorant baslik,
 * ince cizgi ayirmalar, altta yuzen hap nav, tan vurgu.
 * Karar notlari: design-system/DIRECTION.md "Guess the Cover".
 *
 * Bu dosya style.css'e dokunmaz; oyunun tum gorunumu burada.
 */

.page-game {
  --gm-w: min(1080px, 92%);
  --tan: 210, 180, 140;          /* --accent rgb */
  --ok: 127, 176, 131;
  --no: 217, 139, 139;
  --gold: 214, 176, 106;
  --silver: 196, 192, 184;
  --bronze: 185, 132, 96;
  --hair: #211f1c;
  /* style.css'teki --faint (#7d776d) 12 piksellik metinde AA esiginin
     hemen altinda kaliyordu; bu sayfada bir tik acigi kullaniyoruz. */
  --faint: #8a8377;
}

/* Sayfanin ustunde duran sicak isik: plak dukkani lambasi (ana sayfadaki
   huzmenin durgun hali). Icerigin arkasinda, tiklamayi engellemiyor. */
.page-game .gm-glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1400px, 150vw);
  height: 720px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(242, 206, 150, 0.16), rgba(var(--tan), 0.05) 45%, rgba(var(--tan), 0) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Lamba (min(1400px, 150vw)) icerigin iki yanindan tasiyor; 1400px'ten dar
 * her ekranda yatay kaydirma cubugu cikariyordu. `clip` kaydirma kabi
 * olusturmuyor: reklam rayindaki sticky ve alttaki yuzen nav bozulmuyor.
 * Ayni cozum album.css ve home.css'teki sahnede de kullaniliyor. */
.page-game main { position: relative; overflow-x: clip; }
.page-game .game-page {
  position: relative;
  z-index: 1;
  width: var(--gm-w);
  margin: 0 auto 96px;
  padding-top: 40px;
}

/* ── Baslik ───────────────────────────────────────────────────────────── */
/* Solda ne oldugu, sagda bir kapagin ne degerinde oldugu. Genis ekranda
   yan yana; dar ekranda merdiven basligin altina geciyor. */
.page-game .game-head {
  margin: 8px 0 40px;
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 861px) {
  .page-game .game-head { grid-template-columns: minmax(0, 34ch) minmax(0, 1fr); }
}
.page-game .game-head-copy { max-width: 34ch; }

/* Puan merdiveni: sayi solda, ne zaman oldugu sagda, aralarinda kil cizgi.
   Sayilar Cormorant ve tabular, boylece basamaklar hizali okunuyor. */
.page-game .gm-worth { max-width: 34rem; }
.page-game .gm-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.page-game .gm-stages li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
}
.page-game .gm-stage-pts {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 2.6ch;
  text-align: right;
}
.page-game .gm-stage-t {
  font-size: var(--text-xs);
  color: var(--muted);
}
/* Ilk satir en degerlisi: biraz daha parlak duruyor. */
.page-game .gm-stages li:first-child .gm-stage-pts { font-size: 1.85rem; color: var(--text); }
.page-game .gm-worth-note {
  margin-top: 12px;
  font-size: var(--text-xs);
  color: var(--faint);
  line-height: 1.6;
  max-width: 42ch;
}
.page-game .game-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.9rem, 7vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.page-game .game-head p {
  margin-top: 14px;
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* Bolum basligi + oluk: ana sayfadaki .home-head'in sade hali */
.page-game .gm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 20px;
}
.page-game .gm-head h2,
.page-game .gm-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.page-game .gm-head p {
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: 44ch;
}

/* ── Oyuncu satiri ────────────────────────────────────────────────────── */
.page-game .player-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 26px;
}
.page-game .player-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='10.5' r='5.2' fill='%23555'/%3E%3Cellipse cx='14' cy='25' rx='9.5' ry='6.5' fill='%23555'/%3E%3C/svg%3E")
    center/cover no-repeat;
}
.page-game .player-meta { flex: 1; min-width: 0; }
.page-game .player-name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-game .player-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}
.page-game .player-sub a { color: var(--accent); text-decoration: none; }
.page-game .player-sub a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-game .player-elo { text-align: right; flex: 0 0 auto; }
.page-game .player-elo-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.page-game .player-elo-label {
  font-size: var(--text-xs);
  color: var(--faint);
}

/* ── Mod secimi ───────────────────────────────────────────────────────── */
.page-game .modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 26px;
}
.page-game .mode-card {
  position: relative;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  background: linear-gradient(180deg, rgba(244, 241, 234, 0.026), rgba(244, 241, 234, 0));
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: 18px 20px 20px;
  overflow: hidden;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
.page-game .mode-card:hover { border-color: rgba(var(--tan), 0.34); transform: translateY(-2px); }
.page-game .mode-card.on {
  border-color: rgba(var(--tan), 0.55);
  background: linear-gradient(180deg, rgba(var(--tan), 0.1), rgba(var(--tan), 0.02) 70%);
}
.page-game .mode-card.on::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--accent);
}
.page-game .mode-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 6px;
}
.page-game .mode-card.on .mode-name { color: var(--accent); }
.page-game .mode-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.6;
}

/* ── Secim kutulari (tur, hiz) ────────────────────────────────────────── */
.page-game .game-card { margin-top: 22px; }
.page-game .card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.page-game .card-head h3,
.page-game .game-card > h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.page-game .card-head h3 { margin-bottom: 0; }
.page-game .card-head .card-note { font-size: var(--text-xs); color: var(--faint); }

.page-game .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.page-game .chip {
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--hair);
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.page-game .chip:hover:not(:disabled) { border-color: rgba(var(--tan), 0.4); color: var(--text); }
.page-game .chip.on {
  background: rgba(var(--tan), 0.14);
  border-color: rgba(var(--tan), 0.6);
  color: var(--accent);
}
.page-game .chip:disabled { opacity: 0.3; cursor: not-allowed; }

/* Baslat: ana sayfanin acik hapi, tan topuzlu */
.page-game .game-start {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: 26px;
  padding: 6px 8px 6px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(244, 241, 234, 0.94);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.page-game .game-start::after {
  content: "";
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d0d0d'%3E%3Cpath d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E")
    center/14px no-repeat;
  box-shadow: 0 0 0 0 rgba(var(--tan), 0.5);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.page-game .game-start:hover:not(:disabled) { background: #fff; }
.page-game .game-start:hover:not(:disabled)::after {
  transform: rotate(-12deg) scale(1.06);
  box-shadow: 0 0 22px 2px rgba(var(--tan), 0.45);
}
.page-game .game-start:disabled { opacity: 0.45; cursor: default; }

.page-game .game-msg { color: var(--muted); font-size: var(--text-sm); }
.page-game .game-msg.error { color: rgb(var(--no)); }
.page-game .game-msg a { color: var(--accent); }

/* ═══════════════ Siralama (#rankings) ═══════════════
 * Referans duzeni: baslik, filtre haplari, uc one cikan kart, sonra tablo.
 * Gosterilen her sey API'nin gercekten dondurdugu alan:
 * dereceli -> rank, username, avatar_url, rating, peak, games
 * casual   -> rank, username, avatar_url, score, correct, rounds, best_streak
 * Hareket oku / gunluk gecmis verisi YOK, uydurulmuyor. */

.page-game .gm-rank { margin-top: 84px; scroll-margin-top: 90px; }

.page-game .gm-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.page-game .gm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 15px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-pill);
  background: rgba(244, 241, 234, 0.02);
  transition: border-color 0.18s ease;
}
.page-game .gm-pill:hover { border-color: rgba(var(--tan), 0.34); }
.page-game .gm-pill:focus-within { border-color: rgba(var(--tan), 0.6); }
.page-game .gm-pill-k {
  font-size: var(--text-xs);
  color: var(--faint);
}
.page-game .gm-pill select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text);
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b8b2a7' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 2 6 6.2 10.5 2'/%3E%3C/svg%3E")
    right 2px center/11px no-repeat;
  border: 0;
  padding: 2px 18px 2px 0;
  cursor: pointer;
  max-width: 190px;
}
.page-game .gm-pill select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.page-game .gm-pill select option { background: var(--surface); color: var(--text); }
.page-game .gm-pill.is-off { opacity: 0.4; }
.page-game .gm-pill.is-off select { cursor: not-allowed; }
.page-game .gm-filter-note {
  font-size: var(--text-xs);
  color: var(--faint);
  max-width: 34ch;
  line-height: 1.5;
}

/* ── Uc one cikan kart ── */
.page-game .gm-highs {
  display: grid;
  grid-template-columns: 1.1fr 1.25fr 0.85fr;
  gap: 12px;
  margin-bottom: 26px;
}
.page-game .gm-highs:empty { display: none; }
.page-game .gm-high {
  position: relative;
  min-height: 132px;
  padding: 16px 18px 18px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(244, 241, 234, 0.03), rgba(244, 241, 234, 0));
  overflow: hidden;
}
.page-game .gm-high-k {
  display: block;
  font-size: var(--text-xs);
  color: var(--faint);
  margin-bottom: 14px;
}
.page-game .gm-high-lead { display: flex; align-items: center; gap: 12px; }
.page-game .gm-high-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='10.5' r='5.2' fill='%23555'/%3E%3Cellipse cx='14' cy='25' rx='9.5' ry='6.5' fill='%23555'/%3E%3C/svg%3E")
    center/cover no-repeat;
}
.page-game .gm-high-who { min-width: 0; flex: 1; }
.page-game .gm-high-name {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-game .gm-high-name:hover { color: var(--accent); }
.page-game .gm-high-sub { display: block; font-size: var(--text-xs); color: var(--muted); }
.page-game .gm-high-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  display: block;
}
.page-game .gm-high-unit { font-size: var(--text-xs); color: var(--faint); }
.page-game .gm-high-foot {
  display: block;
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}
.page-game .gm-peak-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid var(--hair);
  color: var(--muted);
}
.page-game .gm-peak-mark.is-peak { color: rgb(var(--ok)); border-color: rgba(var(--ok), 0.45); }

/* Yayilma cubugu: her oyuncu kendi yerinde bir cizgi. Kalabalik sol
   uctaysa merdiven sikisik demek; bu, elde olan gercek veriden cikiyor. */
.page-game .gm-spread {
  position: relative;
  height: 34px;
  margin-top: 14px;
}
.page-game .gm-spread-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--tan), 0.12), rgba(var(--tan), 0.32));
}
.page-game .gm-spread-tick {
  position: absolute;
  top: 6px;
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: rgba(244, 241, 234, 0.55);
  transform: translateX(-1px);
}
.page-game .gm-spread-tick.is-top { background: var(--accent); height: 24px; top: 3px; }
.page-game .gm-spread-ends {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ── Tablo ── */
.page-game .gm-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.page-game .gm-board-head h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
}
.page-game .card-note { font-size: var(--text-xs); color: var(--faint); }

.page-game .board {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(244, 241, 234, 0.014);
}
.page-game .board-head-row,
.page-game .board-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 88px 92px 128px;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
}
.page-game .board-head-row {
  border-bottom: 1px solid var(--hair);
  background: rgba(244, 241, 234, 0.02);
}
.page-game .board-head-row span {
  font-size: var(--text-xs);
  color: var(--faint);
}
.page-game .board-head-row .gm-num,
.page-game .board-row .gm-num { text-align: right; }
.page-game .board-row {
  position: relative;
  border-bottom: 1px solid var(--hair);
  font-size: var(--text-sm);
  transition: background-color 0.2s ease;
}
.page-game .board-row:last-child { border-bottom: 0; }
.page-game .board-row:hover { background: rgba(244, 241, 234, 0.028); }
.page-game .board-row.is-1 { background: linear-gradient(90deg, rgba(var(--gold), 0.11), rgba(var(--gold), 0) 62%); }
.page-game .board-row.is-2 { background: linear-gradient(90deg, rgba(var(--silver), 0.07), rgba(var(--silver), 0) 62%); }
.page-game .board-row.is-3 { background: linear-gradient(90deg, rgba(var(--bronze), 0.08), rgba(var(--bronze), 0) 62%); }
.page-game .board-row.is-me { box-shadow: inset 2px 0 0 var(--accent); }

.page-game .board-rank {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.page-game .gm-medal {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  color: #1a1509;
  background: radial-gradient(circle at 34% 28%, #f0dca6, var(--accent) 58%, #9d7f52);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.page-game .board-row.is-2 .gm-medal { background: radial-gradient(circle at 34% 28%, #f2f0ec, #c4c0b8 58%, #8b8880); }
.page-game .board-row.is-3 .gm-medal { background: radial-gradient(circle at 34% 28%, #e3b28c, #b98460 58%, #7d573c); }
.page-game .gm-rank-plain { width: 28px; text-align: center; }

.page-game .gm-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.page-game .board-row img,
.page-game .board-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--border);
}
.page-game .board-dot {
  background: var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='10.5' r='5.2' fill='%23555'/%3E%3Cellipse cx='14' cy='25' rx='9.5' ry='6.5' fill='%23555'/%3E%3C/svg%3E")
    center/cover no-repeat;
}
.page-game .gm-who-text { min-width: 0; }
.page-game .board-name {
  display: block;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-game .board-name:hover { color: var(--accent); }
.page-game .board-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-game .board-score {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.page-game .board-meta {
  font-size: var(--text-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.page-game .board-meta .gm-off {
  display: block;
  font-size: var(--text-xs);
  color: var(--faint);
}
.page-game .board-meta .gm-off.is-peak { color: rgb(var(--ok)); }

/* Konum cubugu: dereceli'de tablonun en dusugu ile en yuksegi arasinda
   nerede durdugu, casual'da dogru/tur orani. Ikisi de satirin kendi
   sayilarindan; gecmis verisi olmadigi icin kivrimli bir cizgi yok. */
.page-game .gm-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-end;
}
.page-game .gm-bar-track {
  position: relative;
  flex: 1;
  max-width: 78px;
  height: 6px;
  border-radius: 999px;
  background: rgba(244, 241, 234, 0.08);
  overflow: hidden;
}
.page-game .gm-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--tan), 0.55), var(--accent));
  transform-origin: left center;
}
.page-game .gm-bar-v {
  font-size: var(--text-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}
/* Sayi hucreleri: genis ekranda satirin kendi sutunlari (display: contents),
   dar ekranda tek bir satir halinde altta toplaniyorlar. */
.page-game .gm-stack { display: contents; }
.page-game .gm-cell-label { display: none; }

.page-game .board-empty {
  display: block;
  padding: 26px 18px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.page-game .board-empty a { color: var(--accent); }
.page-game .gm-rank-foot {
  margin-top: 12px;
  font-size: var(--text-xs);
  color: var(--faint);
  line-height: 1.6;
}

/* ═══════════════ Oynanis ═══════════════ */
.page-game #playScreen { padding-top: 12px; }
.page-game .play-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.page-game .play-bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-game .play-bar-right { display: flex; align-items: center; gap: 14px; }
.page-game .round-label {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}
.page-game .pips { display: flex; gap: 5px; align-items: center; }
.page-game .pip {
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: rgba(244, 241, 234, 0.13);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.page-game .pip.now { background: var(--accent); transform: scaleY(1.9); }
.page-game .pip.ok { background: rgb(var(--ok)); }
.page-game .pip.no { background: rgb(var(--no)); }
.page-game .score-wrap { display: inline-flex; align-items: baseline; gap: 4px; }
.page-game .score-live {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
  position: relative;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.page-game .score-live.is-bump { animation: gm-bump 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); }
@keyframes gm-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); color: #f2e3c8; }
  100% { transform: scale(1); }
}
.page-game .score-unit { font-size: var(--text-xs); color: var(--faint); }
.page-game .score-live .gain {
  position: absolute;
  right: 0;
  top: -6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  color: rgb(var(--ok));
  animation: gm-gain 1.1s ease forwards;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes gm-gain {
  from { opacity: 0; transform: translateY(6px); }
  30%  { opacity: 1; }
  to   { opacity: 0; transform: translateY(-18px); }
}
.page-game .streak-flag {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  border: 1px solid rgba(var(--tan), 0.4);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.page-game .quit-btn {
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 1px solid var(--hair);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.page-game .quit-btn:hover { color: rgb(var(--no)); border-color: rgba(var(--no), 0.5); }

/* Kapak: plak kilifindan disari tasan disk (ana sayfadaki sahnenin akrabasi) */
.page-game .sleeve { position: relative; width: min(400px, 78vw); margin: 0 auto 18px; }
.page-game .sleeve-disc {
  position: absolute;
  top: 50%;
  right: -13%;
  transform: translateY(-50%);
  width: 82%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  z-index: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  transition: right 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.page-game .sleeve-disc-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(255,255,255,0.07), transparent 22%,
                   rgba(255,255,255,0.04) 48%, transparent 72%, rgba(255,255,255,0.07)),
    radial-gradient(circle at 50% 50%, #d2b48c 0 11%, #141414 11.5% 12.5%, transparent 12.5%),
    repeating-radial-gradient(circle at 50% 50%, #141414 0 3px, #1a1a1a 3px 6px);
  /* Plak bilerek donmuyor: DIRECTION.md "Neden plak donmuyor" — donen bir
     plak "caliyor" der ve kol plagin disinda duran logoyla celisir. Oluklar
     ve konic parlama sabit duruyor, canlilik kilifin acilmasindan geliyor. */
}
/* Tur bitince kilif acilir gibi disk biraz daha disari cikiyor */
.page-game .sleeve.is-open .sleeve-disc { right: -26%; }

.page-game .cover-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.75);
  transition: box-shadow 0.45s ease;
}
.page-game .cover-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bulanikligi bu filtre saglamiyor: sunucu zaten o asamanin
     cozunurlugunden fazlasini gondermiyor (bkz. routes/game.js).
     Buradaki blur yalnizca buyutulmus pikselin kenarini yumusatiyor. */
  transition: filter 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform: scale(1.06);
}
.page-game .cover-stage.revealed img { filter: none !important; transform: scale(1); }
.page-game .cover-stage.is-right { outline: 2px solid rgba(var(--ok), 0.85); outline-offset: -1px; }
.page-game .cover-stage.is-wrong { outline: 2px solid rgba(var(--no), 0.75); outline-offset: -1px; }
/* Cevap anindaki isik: dogru cevapta kapagin uzerinden bir parlama gecer */
.page-game .cover-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255, 242, 214, 0.5) 50%, rgba(255,255,255,0) 62%);
}
.page-game .cover-stage.is-right .cover-flash { animation: gm-flash 0.9s cubic-bezier(0.3, 0.6, 0.2, 1) 0.05s both; }
@keyframes gm-flash {
  from { opacity: 0; transform: translateX(-55%); }
  40%  { opacity: 1; }
  to   { opacity: 0; transform: translateX(55%); }
}
.page-game .sleeve.is-wrong { animation: gm-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes gm-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
/* Yeni tur: kapak ve siklar kisa bir yukselisle geliyor */
.page-game .sleeve.is-new { animation: gm-enter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.page-game .options.is-new .opt { animation: gm-enter 0.44s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.page-game .options.is-new .opt:nth-child(2) { animation-delay: 0.05s; }
.page-game .options.is-new .opt:nth-child(3) { animation-delay: 0.1s; }
.page-game .options.is-new .opt:nth-child(4) { animation-delay: 0.15s; }
@keyframes gm-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Sayac */
.page-game .timer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(400px, 78vw);
  margin: 0 auto 24px;
}
.page-game .timer-track {
  flex: 1;
  height: 4px;
  background: rgba(244, 241, 234, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.page-game .timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(var(--tan), 0.5), var(--accent));
  transform-origin: left center;
}
.page-game .timer-fill.low { background: rgb(var(--no)); }
.page-game .timer-secs {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 26px;
  text-align: right;
}

/* Siklar */
.page-game .options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.page-game .opt {
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(244, 241, 234, 0.028), rgba(244, 241, 234, 0));
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  color: var(--text);
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
  display: flex;
  gap: 11px;
  align-items: baseline;
  min-width: 0;
}
.page-game .opt:hover:not(:disabled) { border-color: rgba(var(--tan), 0.45); transform: translateY(-2px); }
.page-game .opt:disabled { cursor: default; }
.page-game .opt .opt-key {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--faint);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 1px 6px;
  flex: 0 0 auto;
}
.page-game .opt .opt-text { min-width: 0; }
.page-game .opt .opt-title { display: block; font-weight: 700; font-size: 0.9rem; overflow-wrap: anywhere; }
.page-game .opt .opt-artist { display: block; font-size: var(--text-xs); color: var(--muted); }
.page-game .opt.right {
  border-color: rgba(var(--ok), 0.6);
  background: rgba(var(--ok), 0.14);
  animation: gm-pop 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.page-game .opt.wrong { border-color: rgba(var(--no), 0.6); background: rgba(var(--no), 0.13); }
.page-game .opt.right .opt-key { border-color: rgba(var(--ok), 0.6); color: rgb(var(--ok)); }
.page-game .opt.wrong .opt-key { border-color: rgba(var(--no), 0.6); color: rgb(var(--no)); }
@keyframes gm-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Tur sonu */
.page-game .reveal { margin-top: 20px; text-align: center; animation: gm-enter 0.35s ease; }
.page-game .reveal-verdict {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.1;
  margin-bottom: 4px;
}
.page-game .reveal-verdict.ok { color: rgb(var(--ok)); }
.page-game .reveal-verdict.no { color: rgb(var(--no)); }
.page-game .reveal-album { color: var(--muted); font-size: var(--text-sm); }
.page-game .reveal-album a { color: var(--accent); text-decoration: none; }
.page-game .reveal-album a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-game .reveal-next {
  margin-top: 16px;
  padding: 11px 26px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  background: rgba(244, 241, 234, 0.94);
  color: var(--bg);
  border: 0;
  transition: background-color 0.18s ease;
}
.page-game .reveal-next:hover { background: #fff; }

/* ── Oynanis yerlesimi ────────────────────────────────────────────────────
   Dar ekranda kapak ustte, sorulan sey altta: varsayilan blok akisi, kilif
   ve sayac kendi icinde ortali. 901px'ten itibaren iki sutun — kapak solda,
   soru sagda — ana sayfadaki Guess the Cover sahnesinin ayni duzeni. */
.page-game .gm-ask {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin-bottom: 18px;
}

/* ── 761-900px: iki sutuna genis degil, telefon kadar dar da degil ──
   Bu bant uzun sure hicbir kurala girmiyordu: `min-width: 901px` iki sutun
   kurali da, `max-width: 760px` sikistirmalari da uygulanmiyordu. Sonuc
   olculdu — 800x700'de sayac ~670px'e dusuyor ve DORT SIKKIN DORDU de
   katlamanin altinda kaliyordu, yani oyuncu sayac akarken kaydirmak zorunda.
   Bant her yarim ekran dizustu penceresi ve her dikey tablet demek.

   Coozum dar ekrandakinin aynisi (bkz. asagidaki max-width: 760px bloku ve
   DIRECTION.md'deki olcum tablosu): kapak ekran yuksekligine baglaniyor ve
   turun parcalari arasindaki bosluklar kisaliyor. Fark: siklar burada iki
   sutunda kaliyor (genislik yetiyor, iki satir dort satirdan kisa) ve yuzen
   nav duruyor — site basligi cekilse de gezinme kaybolmuyor. */
@media (min-width: 761px) and (max-width: 900px) {
  .page-game .gm-play-art { padding-right: 0; }
  .page-game .sleeve,
  .page-game .timer-row { width: min(400px, 78vw, 36vh); }
  .page-game.is-playing header { display: none; }
  .page-game .game-page { padding-top: 16px; }
  .page-game .play-bar { margin-bottom: 14px; }
  .page-game .sleeve { margin-bottom: 12px; }
  .page-game .timer-row { margin-bottom: 14px; }
  .page-game .gm-ask { font-size: 1.3rem; margin-bottom: 12px; }
  .page-game .opt { padding: 9px 13px; gap: 9px; }
  .page-game .opt .opt-title { font-size: 0.88rem; line-height: 1.25; }
}

@media (min-width: 901px) {
  .page-game .gm-play {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
  }
  /* Disk kilifin sag kenarindan tasiyor (acikken genisligin %26'si kadar).
     Tasma payi kendi sutununda duruyor, siklarin uzerine binmiyor. */
  .page-game .gm-play-art { padding-right: 104px; }
  .page-game .sleeve,
  .page-game .timer-row {
    width: 100%;
    max-width: 360px;
    margin-left: 0;
    margin-right: 0;
  }
  .page-game .timer-row { margin-bottom: 0; }
  /* Soru, kapagin ust kenariyla ayni cizgiden basliyor. Sutun `start`
     hizali: tur sonu metni acilinca kapak yerinden oynamiyor. */
  .page-game .gm-play-ask { padding-top: 2px; }
  .page-game .reveal { text-align: left; }
}

/* ═══════════════ Sonuc ═══════════════ */
.page-game #resultScreen { padding-top: 8px; }
.page-game .result-top { text-align: center; padding: 10px 0 6px; }
.page-game .score-big {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 6.4rem);
  line-height: 0.95;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.page-game .score-sub { color: var(--muted); font-size: var(--text-sm); }
.page-game .score-note { color: var(--accent); font-weight: 600; font-size: var(--text-sm); margin-top: 6px; }

.page-game .rating-move {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px auto 0;
  padding: 14px 20px;
  max-width: 360px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(var(--tan), 0.06), rgba(244, 241, 234, 0));
}
.page-game .rating-move .from { color: var(--muted); font-size: 1rem; font-weight: 600; }
.page-game .rating-move .arrow { color: var(--faint); }
.page-game .rating-move .to {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--text);
}
.page-game .rating-move .delta { font-size: var(--text-sm); font-weight: 700; }
.page-game .rating-move .delta.up { color: rgb(var(--ok)); }
.page-game .rating-move .delta.down { color: rgb(var(--no)); }
.page-game .rating-rank { text-align: center; color: var(--muted); font-size: var(--text-xs); margin-top: 10px; }

.page-game .result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
  flex-wrap: wrap;
}
.page-game .result-actions button {
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  background: rgba(244, 241, 234, 0.94);
  color: var(--bg);
  border: 0;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.page-game .result-actions button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--hair);
}
.page-game .result-actions button:hover { background: #fff; color: var(--bg); }
.page-game .result-actions button.ghost:hover { background: rgba(244, 241, 234, 0.06); color: var(--text); border-color: rgba(var(--tan), 0.4); }

.page-game .result-block { margin-top: 44px; }
.page-game .recap { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px; }
.page-game .recap a { text-decoration: none; color: inherit; display: block; }
.page-game .recap img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: transform 0.2s ease;
}
.page-game .recap a:hover img { transform: translateY(-3px); }
.page-game .recap .recap-mark {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-game .recap .ok { color: rgb(var(--ok)); }
.page-game .recap .no { color: rgb(var(--no)); }

/* Sonuc ekrani acilisi: JS sinifi koyuyor, konuldugunda animasyon basliyor.
   Sinif hic konmazsa icerik oldugu gibi gorunur (gizleme yok). */
.page-game #resultScreen.is-in > * { animation: gm-enter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.page-game #resultScreen.is-in > *:nth-child(2) { animation-delay: 0.1s; }
.page-game #resultScreen.is-in > *:nth-child(3) { animation-delay: 0.18s; }

/* ── Cikis uyarisi ── */
.page-game .sv-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 8, 8, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.page-game .sv-modal.open { display: flex; }
.page-game .sv-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  max-width: 420px;
  width: 100%;
  animation: gm-enter 0.24s ease;
}
.page-game .sv-modal-box h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.page-game .sv-modal-box p { color: var(--muted); font-size: var(--text-sm); margin-bottom: 20px; }
.page-game .sv-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.page-game .sv-modal-actions button {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
}
.page-game .sv-modal-actions .stay { background: rgba(244, 241, 234, 0.94); color: var(--bg); border: 0; }
.page-game .sv-modal-actions .leave { background: transparent; color: rgb(var(--no)); border: 1px solid rgba(var(--no), 0.4); }
.page-game .sv-modal-actions button:hover { opacity: 0.9; }

/* ── Dock: altta yuzen hap nav (ana sayfadakinin ayni) ── */
.page-game .sv-dock {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  transform: translateX(-50%);
  border: 1px solid rgba(244, 241, 234, 0.09);
  border-radius: var(--radius-pill);
  background: rgba(18, 16, 13, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.page-game .sv-dock a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.page-game .sv-dock a:hover { color: var(--text); background: rgba(244, 241, 234, 0.05); }
.page-game .sv-dock .is-active { color: var(--text); background: rgba(244, 241, 234, 0.08); }
.page-game .sv-dock .is-active::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.page-game .sv-dock-rank { color: var(--accent); }
.page-game .sv-dock-game-icon {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: conic-gradient(from 40deg, #d2b48c, #7a5d44, #e8d5b5, #8f7758, #d2b48c);
  filter: blur(0.8px);
  transition: filter 0.3s ease;
}
.page-game .sv-dock a:hover .sv-dock-game-icon { filter: none; }
.page-game footer { padding-bottom: 88px; }

/* Bolum acilislari (game-motion.js). Sinif yoksa icerik zaten gorunur. */
.page-game .gm-reveal.is-ready { opacity: 0; }
.page-game .gm-reveal.is-in { animation: gm-enter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ── Dar ekranlar ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .page-game .gm-highs { grid-template-columns: 1fr 1fr; }
  .page-game .gm-high:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .page-game .sv-dock { display: none; }
  .page-game footer { padding-bottom: 0; }
  .page-game .game-page { padding-top: 24px; }
  .page-game .modes { grid-template-columns: 1fr; }
  .page-game .options { grid-template-columns: 1fr; }
  .page-game .round-label { display: none; }

  /* Sure isliyor: kapak ve dort sik ayni ekranda durmali, yoksa oyuncu
     sayac akarken kaydirmak zorunda kaliyor. Dar ekranda kapagi ekran
     yuksekligine bagliyoruz ve turun parcalari arasindaki bosluklari
     kisaltiyoruz. Kapak yine sayfanin en buyuk ogesi. */
  .page-game .sleeve,
  .page-game .timer-row { width: min(400px, 78vw, 36vh); }
  /* Tur sururken site basligi cekiliyor (game.js `is-playing`): 121 piksel
     geri geliyor ve dort sik katlanmanin ustune cikiyor. Sayfa ayni seyi
     `.game-head` icin zaten yapiyor. Turdan cikis play-bar'daki Quit. */
  .page-game.is-playing header { display: none; }
  .page-game .game-page { padding-top: 12px; }
  .page-game .play-bar { margin-bottom: 14px; }
  .page-game .sleeve { margin-bottom: 12px; }
  .page-game .timer-row { margin-bottom: 14px; }
  .page-game .gm-ask { font-size: 1.25rem; margin-bottom: 12px; }
  /* Satirlar sikisiyor: baslik ve sanatci yan yana degil, daha az
     dolgu ile alt alta kaliyor; okunurluk ayni, yukseklik dusuyor. */
  .page-game .opt { padding: 9px 13px; gap: 9px; }
  .page-game .opt .opt-title { font-size: 0.86rem; line-height: 1.25; }
  .page-game .game-start { width: 100%; justify-content: space-between; }

  /* Tablo satirlari yigiliyor: rozet + oyuncu ustte, sayilar altta
     kendi etiketleriyle. Ayni isaretleme, farkli yerlesim. */
  .page-game .board-head-row { display: none; }
  .page-game .board-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "rank who"
      "nums nums";
    gap: 10px 12px;
    padding: 14px 15px;
  }
  .page-game .board-rank { grid-area: rank; }
  .page-game .gm-who { grid-area: who; }
  .page-game .gm-stack {
    grid-area: nums;
    display: flex;
    align-items: baseline;
    gap: 6px 18px;
    flex-wrap: wrap;
    padding-left: 45px;
  }
  .page-game .gm-cell-label {
    display: inline;
    font-size: var(--text-xs);
    color: var(--faint);
    margin-right: 5px;
  }
  .page-game .gm-stack .board-score { font-size: 1.35rem; text-align: left; }
  .page-game .gm-stack .board-meta { text-align: left; }
  .page-game .gm-stack .board-meta .gm-off { display: inline; margin-left: 6px; }
  .page-game .gm-stack .gm-bar { flex: 0 0 auto; }
  .page-game .gm-stack .gm-bar-track { width: 58px; max-width: 58px; }
}

@media (max-width: 420px) {
  .page-game .gm-highs { grid-template-columns: 1fr; }
  .page-game .gm-high:nth-child(3) { grid-column: auto; }
  .page-game .gm-stack { padding-left: 0; }
}

/* ── Azaltilmis hareket ───────────────────────────────────────────────────
   Oyunun kendi bilgi veren gecisleri (bulaniklik, sayac) kaliyor; suslemeler
   ve kendiliginden baslayan hareketler duruyor. */
@media (prefers-reduced-motion: reduce) {
  .page-game .sleeve.is-wrong,
  .page-game .sleeve.is-new,
  .page-game .options.is-new .opt,
  .page-game .opt.right,
  .page-game .score-live.is-bump,
  .page-game .cover-stage.is-right .cover-flash,
  .page-game #resultScreen.is-in > *,
  .page-game .reveal,
  .page-game .gm-reveal.is-in,
  .page-game .sv-modal-box { animation: none !important; }
  .page-game .gm-reveal.is-ready { opacity: 1; }
  .page-game .cover-stage img { transition: filter 0.3s linear; }
}