:root {
  --bg: #0b2419;
  --panel: #143a26;
  --panel-2: #11331f;
  --line: #1f4d31;
  --gold: #e3bd6e;
  --gold-deep: #b6863a;
  --gold-glow: rgba(227, 189, 110, .35);
  --danger: #ff4d5e;
  --success: #3ddc84;
  --success-deep: #1fae5f;
  --text: #eef2f7;
  --text-dim: #8b97a8;
  --font-display: 'Sora', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }
body { min-height: 100svh; min-height: 100dvh; }   /* iOS dinamik adres çubuğu: içerik tam otursun */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;          /* çift-tık zoom'u kapat (iOS dahil) */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;           /* lastik bant / sayfa kaymasını engelle */
}
/* oyun alanı: jest zoom/pan tamamen kapalı, sadece dokunma=zıpla */
#stage, #game { touch-action: none; }

.hidden { display: none !important; }

/* ---------- top bar ---------- */
#topbar {
  height: 58px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: linear-gradient(180deg, #131a26, #0e1320);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-chick { font-size: 26px; filter: drop-shadow(0 2px 6px rgba(255,200,61,.4)); }
.brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text);
}
.brand-name em { font-style: normal; color: var(--gold); }
.demo-badge {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--bg);
  background: var(--gold);
  border-radius: 4px;
  padding: 3px 7px;
}

.top-right { display: flex; align-items: center; gap: 10px; }

.balance-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 14px;
  min-width: 130px;
}
.balance-label { font-size: 9px; font-weight: 900; letter-spacing: 2px; color: var(--text-dim); }
.balance-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 17px;
  color: var(--gold);
}
.balance-box.flash .balance-value { animation: balFlash .5s ease; }
@keyframes balFlash { 0% { transform: scale(1.25); color: #fff; } 100% { transform: scale(1); } }

.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 18px;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.icon-btn:hover { transform: translateY(-1px); border-color: var(--gold); }
.fair-ok {
  position: absolute; right: -4px; top: -4px;
  width: 16px; height: 16px; line-height: 16px;
  font-size: 10px; font-weight: 900;
  color: #04130a;
  background: var(--success);
  border-radius: 50%;
}

/* ---------- stage ---------- */
#stage { position: relative; flex: 1 1 auto; min-height: 0; }

#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#hud {
  position: absolute;
  top: 14px; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

#hudMult { text-align: center; }
.hud-mult-value {
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--gold);
  text-shadow: 0 0 24px var(--gold-glow), 0 4px 0 rgba(0,0,0,.45);
  line-height: 1;
}
.hud-mult-value.pop { animation: multPop .35s cubic-bezier(.2,2.2,.4,1); }
@keyframes multPop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.hud-mult-win {
  font-weight: 800;
  font-size: 15px;
  color: var(--success);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

#hudNext {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  background: rgba(10,13,20,.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  backdrop-filter: blur(4px);
}
#hudNext b { color: var(--gold); font-family: var(--font-mono); }

#history {
  position: absolute;
  top: 14px; right: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  pointer-events: none;
}
.hist-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10,13,20,.78);
  border: 1px solid var(--line);
  animation: chipIn .3s ease;
}
.hist-chip.win { color: var(--success); border-color: rgba(61,220,132,.4); }
.hist-chip.lose { color: var(--danger); border-color: rgba(255,77,94,.4); }
@keyframes chipIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; } }

.best-box .best-value { color: var(--success); }
.streak-box .streak-value { color: #ff8a3d; }
.streak-box { animation: chipIn .3s ease; }

#flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,40,55,.18), rgba(255,40,55,.42));
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
  z-index: 4;
}
#flash.on { opacity: 1; transition: opacity .05s ease; }

#banner {
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-display);
  pointer-events: none;
  z-index: 5;
  animation: bannerIn .45s cubic-bezier(.2,2,.4,1);
}
#banner .banner-big {
  font-size: 64px;
  line-height: 1;
  text-shadow: 0 6px 0 rgba(0,0,0,.5), 0 0 44px currentColor;
}
#banner .banner-sub {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  margin-top: 10px;
  text-shadow: 0 3px 10px rgba(0,0,0,.7);
}
#banner .banner-tier {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 3px;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 0 26px var(--gold-glow), 0 3px 0 rgba(0,0,0,.5);
  animation: tierPulse .7s ease infinite alternate;
}
@keyframes tierPulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
#banner .banner-reveal {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  color: #ff8a3d;
  margin-top: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
#banner.win { color: var(--gold); }
#banner.win .banner-sub { color: var(--success); }
#banner.lose { color: var(--danger); }
#banner.lose .banner-sub { color: var(--text-dim); }
@keyframes bannerIn {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

#toast {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  background: rgba(17,22,31,.95);
  border: 1px solid var(--danger);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  border-radius: 10px;
  padding: 10px 20px;
  z-index: 6;
  animation: chipIn .25s ease;
}

/* ---------- controls ---------- */
#controls {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 26px;
  padding: 14px 18px 16px;
  background: linear-gradient(180deg, #10151f, #0c1018);
  border-top: 1px solid var(--line);
  z-index: 5;
  flex-wrap: wrap;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));  /* home bar altına girmesin */
}

.ctrl-group { display: flex; flex-direction: column; gap: 7px; }
.ctrl-label { font-size: 10px; font-weight: 900; letter-spacing: 2.5px; color: var(--text-dim); }

.bet-row { display: flex; gap: 6px; }
#betInput {
  width: 110px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--gold);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 6px;
  outline: none;
}
#betInput:focus { border-color: var(--gold); }
.bet-mod {
  width: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  transition: background .12s;
}
.bet-mod:hover { background: #1d2635; }
.bet-chips { display: flex; gap: 6px; }
.chip {
  flex: 1;
  padding: 9px 0;
  min-height: 34px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dim);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.chip:hover { color: var(--gold); border-color: var(--gold); }

.diff-row { display: flex; gap: 6px; }
.diff-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
}
.diff-btn small {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  color: var(--text-dim);
}
.diff-btn:hover { transform: translateY(-1px); }
.diff-btn.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, #2a2410, #1c180b);
  box-shadow: 0 0 14px rgba(255,200,61,.18);
}
.diff-btn.active small { color: var(--gold); }
.diff-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.action-group { justify-content: flex-end; }
#runButtons { display: flex; gap: 10px; }

.btn-main {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 1px;
  border: none;
  border-radius: 14px;
  padding: 15px 38px;
  cursor: pointer;
  color: #1a1404;
  transition: transform .1s, filter .15s, box-shadow .15s;
}
.btn-main:active { transform: translateY(2px); }
.btn-main:disabled { filter: grayscale(.75) brightness(.6); cursor: not-allowed; }

.btn-start {
  background: linear-gradient(180deg, #ffd968, var(--gold) 45%, var(--gold-deep));
  box-shadow: 0 5px 0 #9c6e0a, 0 10px 26px var(--gold-glow);
}
.btn-start:hover:not(:disabled) { filter: brightness(1.08); }
.btn-start:active { box-shadow: 0 3px 0 #9c6e0a; }

.btn-step {
  background: linear-gradient(180deg, #ffd968, var(--gold) 45%, var(--gold-deep));
  box-shadow: 0 5px 0 #9c6e0a, 0 10px 26px var(--gold-glow);
  padding: 15px 28px;
}
.step-arrow { font-family: var(--font-body); font-weight: 900; }

.btn-cash {
  background: linear-gradient(180deg, #6cf0a8, var(--success) 45%, var(--success-deep));
  box-shadow: 0 5px 0 #0e6b3a, 0 10px 26px rgba(61,220,132,.3);
  color: #03130a;
  padding: 15px 24px;
  font-size: 16px;
}
.btn-cash:not(:disabled) { animation: cashPulse 1.6s ease infinite; }
@keyframes cashPulse {
  0%, 100% { box-shadow: 0 5px 0 #0e6b3a, 0 10px 26px rgba(61,220,132,.3); }
  50% { box-shadow: 0 5px 0 #0e6b3a, 0 10px 38px rgba(61,220,132,.55); }
}
#btnCashAmt { font-family: var(--font-mono); font-size: 14px; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(4,6,10,.72);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 18px;
}
.modal-card {
  width: min(640px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: modalIn .25s cubic-bezier(.2,1.6,.4,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; } }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: var(--panel);
}
.modal-head h2 { font-size: 17px; font-weight: 900; }
.modal-close {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}
.modal-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 13px; }
.fair-desc { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); }
.fair-desc b { color: var(--gold); font-family: var(--font-mono); font-size: 12.5px; }

.fair-field label { display: block; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: var(--text-dim); margin-bottom: 5px; }
.fair-field label small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.mono { font-family: var(--font-mono); font-size: 12px; }
.fair-field code {
  display: block;
  background: #0b0f17;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  word-break: break-all;
  color: #9fd8ff;
}
.fair-row { display: flex; gap: 7px; }
.fair-row input {
  flex: 1;
  background: #0b0f17;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--text);
  outline: none;
}
.fair-row input:focus { border-color: var(--gold); }
.btn-small {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-weight: 800;
  cursor: pointer;
}
.btn-small:hover { background: rgba(255,200,61,.1); }
.btn-small:disabled { opacity: .4; cursor: not-allowed; }

.fair-divider { height: 1px; background: var(--line); }
.modal-body h3 { font-size: 14px; font-weight: 900; }
.fair-empty { font-size: 13px; color: var(--text-dim); }

.fair-round-grid { display: flex; flex-direction: column; gap: 9px; }
.fair-steps-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11.5px; }
.fair-steps-table th, .fair-steps-table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
}
.fair-steps-table th { color: var(--text); font-size: 10.5px; letter-spacing: 1px; }
.fair-steps-table .ok { color: var(--success); }
.fair-steps-table .bad { color: var(--danger); }
.verify-result { font-weight: 800; font-size: 13px; }
.verify-result.ok { color: var(--success); }
.verify-result.bad { color: var(--danger); }
.fair-selftest { font-size: 12.5px; color: var(--text-dim); }
.fair-selftest b { color: var(--success); }
.fair-selftest b.bad { color: var(--danger); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  #controls { gap: 14px; padding: 10px 12px 12px; }
  .btn-main { font-size: 15px; padding: 13px 22px; }
  .hud-mult-value { font-size: 38px; }
  .diff-btn { padding: 7px 9px; font-size: 11px; }
}
/* mobile header fit (<=440px) */
@media (max-width: 440px) {
  html, body { overflow-x: hidden; }            /* yatay kaydırmayı kesin engelle */
  #topbar { padding-left: 8px !important; padding-right: 8px !important; gap: 6px !important; flex-wrap: nowrap; }
  .best-box, .streak-box { display: none !important; }
  .brand-name { font-size: 14px !important; white-space: nowrap; }
  .brand .demo-badge { display: none !important; }
  .brand { gap: 6px !important; min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .top-right { gap: 6px !important; flex: 0 0 auto; }
  .balance-box { padding: 4px 8px !important; }
  .balance-label { font-size: 8px !important; }
  .balance-value { font-size: 13px !important; }
  .icon-btn { width: 38px !important; height: 38px !important; }
}
/* çok dar / eski telefonlar (<=380px): oyun adını gizle, her şeyi sığdır */
@media (max-width: 380px) {
  .brand-name { display: none !important; }
  .brand .han-salon { padding: 6px 9px !important; font-size: 12px !important; margin-right: 4px !important; }
  .brand-chick { font-size: 22px !important; }
  .top-right { gap: 5px !important; }
  .icon-btn { width: 36px !important; height: 36px !important; font-size: 15px !important; }
  .balance-box { padding: 3px 7px !important; }
  .balance-label { font-size: 7px !important; letter-spacing: 1px !important; }
  .balance-value { font-size: 12px !important; }
}

/* ============================================================
   QA TUR (10 cihaz) DÜZELTMELERİ — 2026-06-20
   ============================================================ */

/* A) MASAÜSTÜ = YATAY/GENİŞ (Mert: masaüstünde yatay olsun). Çok geniş 4K'da
   absürt gerilmesin diye büyük bir cap; aksi halde tam ekran landscape. */
@media (min-width: 1500px) {
  html { background: #06100b; }
  body {
    max-width: 1500px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px rgba(227,189,110,.10);
  }
}

/* B) KISA EKRAN (yatay/landscape telefon + çok kısa cihazlar):
   kontroller kompaktlaşsın, oyun alanı büyüsün, taşma olmasın */
@media (max-height: 560px) {
  html, body { overflow-x: hidden; }
  #topbar { height: 46px; }
  .best-box, .streak-box { display: none !important; }   /* yatayda da gizle (taşmayı bitirir) */
  .brand-name { font-size: 13px; white-space: nowrap; }
  .brand .demo-badge { display: none; }
  .icon-btn { width: 36px; height: 36px; }
  .balance-box { padding: 4px 9px; }
  #controls { gap: 12px; padding: 7px 12px 9px; }
  .ctrl-label { font-size: 9px; margin-bottom: 3px; }
  .bet-chips .chip { min-height: 28px; padding: 5px 0; }
  .diff-btn { padding: 5px 8px; }
  .btn-main { padding: 10px 18px; font-size: 14px; }
}

/* C) YATAY UYARI: dikey oyun yatayda sıkışır — nazik "telefonu dik tut" ipucu */
#rotateHint {
  display: none;
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(6,16,11,.96);
  color: var(--text);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  font-family: var(--font-body);
}
#rotateHint .rh-emoji { font-size: 52px; animation: rhSpin 2.4s ease-in-out infinite; }
#rotateHint b { font-family: var(--font-display); color: var(--gold); font-size: 20px; }
#rotateHint span { color: var(--text-dim); font-size: 14px; max-width: 280px; line-height: 1.6; }
@keyframes rhSpin { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(78deg)} }
/* sadece gerçek yatay telefon (kısa + geniş + dokunmatik) */
@media (max-height: 430px) and (orientation: landscape) and (pointer: coarse) {
  #rotateHint { display: flex; }
}

/* ============================================================
   MERT GERİBİLDİRİM DÜZELTMELERİ — 2026-06-20 (oyun her zaman <=480 sütun)
   ============================================================ */

/* 1) TOPBAR her zaman kompakt (çerçeve 480'e sığsın; TAVUK/Salon kırpılmasın)
   NOT: REKOR/SERİ artık global gizli DEĞİL; aşağıdaki son katmanda dar ekranda gizli,
   masaüstünde (yer varken) görünür yapılıyor. */
#topbar { padding: 0 12px; gap: 8px; }
.brand { gap: 7px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.brand-name { font-size: 16px; white-space: nowrap; }     /* tek satır, kırpılmasın */
.brand .demo-badge { display: none; }                      /* yer açmak için */
.brand-chick { font-size: 23px; }
.top-right { gap: 8px; flex: 0 0 auto; }
.balance-box { min-width: 0; padding: 4px 11px; order: 2; }/* BAKİYE en sağa */
.top-right .icon-btn { order: 1; width: 38px; height: 38px; }
.balance-value { font-size: 15px; }

/* 2) DİL BUTONU (🌐 EN) kaldırıldı */
#hoLangBtn { display: none !important; }

/* 3) SOHBET artık TOPBAR'da (💬 #btnChat) — yüzen FAB gizli (çakışma yok) */
.hc-fab { display: none !important; }

/* 4) GEÇMİŞ çubukları yatay (sola doğru) — dikey/aşağı değil */
#history { flex-direction: row-reverse !important; flex-wrap: wrap-reverse; max-width: 70%; }

/* C4 — Coin / Elmas para birimi seçici */
.cur-switch {
  display: flex; gap: 6px; margin-bottom: 8px;
  background: rgba(0,0,0,.22); padding: 3px; border-radius: 11px;
  border: 1px solid var(--line);
}
.cur-opt {
  flex: 1; padding: 6px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-dim);
  font: 800 12px var(--font-body); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.cur-opt.is-on[data-cur="coin"]    { background: linear-gradient(180deg,#f3cf6e,#cf9a34); color: #2a1c05; }
.cur-opt.is-on[data-cur="diamond"] { background: linear-gradient(180deg,#7fe7ff,#39b6e0); color: #06222c; }

/* C-fix1 — Oyunlar menüsü overlay (gerçek 6 oyun kartı, Okey üye-ol modalı DEĞİL) */
.gm-ov{
  position:fixed; inset:0; z-index:100001;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(5,12,8,.78); backdrop-filter:blur(7px);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.gm-ov.on{ opacity:1; pointer-events:auto; }
.gm-card-wrap{
  width:min(560px,100%); max-height:88vh; overflow:auto;
  background:linear-gradient(180deg,#143523,#0d2417);
  border:1px solid rgba(227,189,110,.32); border-radius:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.7); padding:18px;
  transform:translateY(14px) scale(.97); transition:transform .25s cubic-bezier(.2,1.4,.4,1);
}
.gm-ov.on .gm-card-wrap{ transform:none; }
.gm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.gm-head span{ font-family:var(--font-display); font-size:19px; color:var(--gold); letter-spacing:1px; }
.gm-x{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:rgba(0,0,0,.25); color:var(--text); font-size:16px; cursor:pointer; }
.gm-x:hover{ border-color:var(--gold); color:var(--gold); }
.gm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gm-card{ text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:7px;
  background:rgba(0,0,0,.2); border:1px solid var(--line); border-radius:14px; padding:8px;
  transition:transform .18s ease, border-color .18s ease; }
.gm-card:hover{ transform:translateY(-4px); border-color:var(--gold); }
.gm-img{ position:relative; aspect-ratio:1/1; border-radius:11px; overflow:hidden; }
.gm-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.gm-badge{ position:absolute; left:6px; bottom:6px; font:800 8px var(--font-body); letter-spacing:1px;
  background:var(--gold); color:#2a1c05; padding:3px 6px; border-radius:6px; }
.gm-card.gm-cur{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-glow); }
.gm-name{ font-weight:800; font-size:12.5px; text-align:center; }
.gm-foot{ margin-top:14px; text-align:center; font-size:11.5px; color:var(--text-dim); }
@media (max-width:380px){ .gm-grid{ grid-template-columns:repeat(2,1fr); } }

/* C-fix3 — MASAÜSTÜ kontroller daha dolu/büyük (minik/boş görünmesin) */
@media (min-width: 900px) {
  #controls { gap: 48px; padding: 16px 40px 20px; }
  .ctrl-label { font-size: 11px; }
  .btn-main { font-size: 17px; padding: 16px 44px; }
  .diff-btn { padding: 10px 18px; font-size: 13px; }
  .chip { min-height: 38px; font-size: 13px; }
  .bet-mod { font-size: 16px; }
  #betInput { font-size: 18px; }
  .cur-opt { padding: 8px 14px; font-size: 13px; }
}

/* ============================================================
   KOMPAKT KONTROLLER — oyun alanı büyüsün (kontroller %38→~%24)
   ============================================================ */
#controls { gap: 14px; padding: 9px 12px 10px; }
.ctrl-label { font-size: 8px; letter-spacing: 2px; margin-bottom: 1px; opacity: .8; }
.ctrl-group { gap: 5px; }
.cur-switch { margin-bottom: 5px; padding: 2px; }
.cur-opt { padding: 5px 8px; font-size: 11.5px; }
.bet-row { gap: 5px; }
#betInput { padding: 6px 4px; font-size: 15px; }
.bet-mod { width: 38px; font-size: 13px; }
.bet-chips { gap: 5px; }
.chip { min-height: 28px; padding: 5px 0; font-size: 11px; }
/* ZORLUK butonları: tek satır kompakt pill (maks xNN küçük yan satır) */
.diff-row { gap: 5px; }
.diff-btn { padding: 6px 11px; font-size: 12px; gap: 0; }
.diff-btn small { font-size: 8.5px; }
.btn-main { font-size: 16px; padding: 12px 26px; border-radius: 12px; }
#runButtons { gap: 8px; }

/* dar mobil (<=440): daha da kompakt — etiket gizle, maks gizle, oyun alanı maksimum */
@media (max-width: 440px) {
  #controls { gap: 8px; padding: 7px 8px 9px; }
  .ctrl-label { display: none; }              /* BAHİS/ZORLUK yazıları gereksiz yer kaplıyor */
  .diff-btn small { display: none; }          /* "maks xNN" mobilde gizli (i ile öğrenilir) */
  .diff-btn { padding: 8px 12px; font-size: 12.5px; }
  .cur-switch { margin-bottom: 4px; }
  .btn-main { font-size: 15px; padding: 12px 22px; }
}
/* masaüstünde maks görünür kalsın (yer var) */
@media (min-width: 900px) {
  .diff-btn small { display: block; font-size: 10px; }
  .ctrl-label { display: block; font-size: 10px; }
}

/* oyun alanını biraz daha büyüt: üst çubuğu+banner inceltir, kontrolü biraz daha kıs (mobil) */
@media (max-width: 600px) {
  #topbar { height: 50px; }
  #hoGuestBar { padding-top: 5px !important; padding-bottom: 5px !important; font-size: 11.5px !important; }
  #controls { padding: 7px 10px 8px; gap: 10px; }
  .cur-switch { margin-bottom: 3px; }
  .chip { min-height: 26px; padding: 4px 0; }
}

/* ============================================================
   PREMIUM SANAT KATMANI (2026-06-20) — AAA görsel yön
   ============================================================ */

/* Sora display: ağırlık + harf aralığı (Bungee'nin yerini tutar, premium) */
.brand-name, .hud-mult-value, .btn-main, #banner .banner-big,
#banner .banner-tier, .gm-head span, #rotateHint b {
  font-weight: 800; letter-spacing: .3px;
}
.brand-name { letter-spacing: .6px; font-size: 17px; }

/* TOPBAR: cam + altın ince çizgi */
#topbar {
  background: linear-gradient(180deg, rgba(16,24,20,.92), rgba(9,15,12,.96));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(227,189,110,.22), 0 4px 18px rgba(0,0,0,.4);
}
/* BAKİYE: premium altın kutu */
.balance-box {
  background: linear-gradient(180deg, rgba(40,33,16,.7), rgba(22,18,10,.85));
  border: 1px solid rgba(227,189,110,.4);
  box-shadow: inset 0 1px 0 rgba(255,235,180,.12), 0 2px 8px rgba(0,0,0,.35);
}
.balance-value { text-shadow: 0 0 10px rgba(227,189,110,.3); }
/* İKON butonları: cam + altın hover glow */
.icon-btn {
  background: linear-gradient(180deg, rgba(30,40,33,.85), rgba(16,22,18,.92));
  border: 1px solid rgba(227,189,110,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.icon-btn:hover { border-color: var(--gold); box-shadow: 0 0 14px rgba(227,189,110,.3); }

/* KONTROL PANELİ: cam + altın ince üst çizgi + derinlik */
#controls {
  background: linear-gradient(180deg, rgba(14,22,17,.96), rgba(7,12,9,.99));
  backdrop-filter: blur(12px);
  border-top: 1px solid transparent;
  box-shadow: 0 -1px 0 rgba(227,189,110,.28), 0 -10px 30px rgba(0,0,0,.45);
}
/* OYNA / butonlar: zengin altın + üst parlaklık (shine) */
.btn-start, .btn-step {
  background: linear-gradient(180deg, #ffe79a 0%, #f0c463 42%, #c2902f 100%);
  box-shadow: 0 4px 0 #8c6210, 0 8px 24px rgba(227,189,110,.4), inset 0 1px 0 rgba(255,255,255,.6);
  position: relative; overflow: hidden;
}
.btn-cash {
  background: linear-gradient(180deg, #9af7c4 0%, #46d68a 42%, #1c9c5a 100%);
  box-shadow: 0 4px 0 #0d6b3a, 0 8px 24px rgba(61,220,132,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-main { text-shadow: 0 1px 0 rgba(255,255,255,.25); }
/* ZORLUK aktif: premium altın */
.diff-btn {
  background: linear-gradient(180deg, rgba(28,38,31,.85), rgba(15,21,17,.92));
  border: 1px solid rgba(227,189,110,.18);
}
.diff-btn.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, #3a3115, #221b0c);
  box-shadow: 0 0 16px rgba(227,189,110,.3), inset 0 1px 0 rgba(255,235,180,.15);
}
/* bahis input/çip premium */
#betInput {
  background: linear-gradient(180deg, rgba(30,40,33,.8), rgba(16,22,18,.9));
  border: 1px solid rgba(227,189,110,.3); text-shadow: 0 0 8px rgba(227,189,110,.25);
}
.chip { border: 1px solid rgba(227,189,110,.22); }
.chip:hover { background: rgba(227,189,110,.08); }
.cur-switch { background: rgba(0,0,0,.35); border: 1px solid rgba(227,189,110,.2); }

/* HUD çarpan: premium altın, glow, ince */
.hud-mult-value {
  color: #ffe9a8;
  text-shadow: 0 0 30px rgba(227,189,110,.55), 0 3px 0 rgba(0,0,0,.5);
  letter-spacing: 1px;
}
#hudNext {
  background: rgba(8,14,10,.78); border: 1px solid rgba(227,189,110,.25);
  color: #cdd6c8; letter-spacing: 2px;
}
#hudNext b { color: var(--gold); }

/* MİSAFİR BANNER: koyu premium (sarı çubuk yerine) */
#hoGuestBar {
  background: linear-gradient(180deg, rgba(18,26,21,.96), rgba(10,16,12,.98)) !important;
  color: #cdd6c8 !important;
  box-shadow: 0 1px 0 rgba(227,189,110,.22), 0 3px 12px rgba(0,0,0,.4) !important;
  backdrop-filter: blur(8px);
}
#hoGuestBar a[href*="okey"] { color: var(--gold) !important; border-color: rgba(227,189,110,.4) !important; }
#hoGuestBar a[href*="kayit"] { background: linear-gradient(180deg,#f0c463,#c2902f) !important; color: #1c1405 !important; }

/* DEMO rozeti: premium altın ince */
.demo-badge { background: linear-gradient(180deg,#f0c463,#c2902f); color:#1c1405; letter-spacing:1.5px; }

/* premium ChatGPT topbar ikonları (emoji yerine) */
.icon-btn img { width: 22px; height: 22px; object-fit: contain; display: block; margin: 0 auto;
  filter: drop-shadow(0 0 4px rgba(227,189,110,.35)); pointer-events: none; }
.icon-btn { display: flex; align-items: center; justify-content: center; padding: 0; }

/* para birimi pill ikonu (coin.png) */
.cur-opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cur-opt img { width: 16px; height: 16px; object-fit: contain; }
/* elmas: 404 yerine vektör gem (ağ isteği yok) */
.cur-gem {
  width: 14px; height: 14px; display: inline-block;
  background: linear-gradient(135deg, #bdf3ff, #5cc6ee 45%, #2f9fce);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  box-shadow: 0 0 6px rgba(90, 200, 240, .55);
}

/* ============================================================
   SIFIR-KUSUR DENETİM DÜZELTMELERİ — 2026-06-20
   ============================================================ */

/* a11y: ekran okuyucu metni (görünmez ama okunur) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Sorumlu oyun kutusu (yardım modalı) */
.resp-box {
  font-size: 12px; line-height: 1.6; color: rgba(238,242,247,.72);
  background: rgba(0,0,0,.25); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.resp-box b { color: var(--gold); }

/* Ses ikonu: <img> korunur; kapalıyken kırmızı slash + soluk (emoji ezmesi yok) */
.icon-btn.is-muted img { opacity: .4; }
.icon-btn.is-muted::after {
  content: ''; position: absolute; left: 8px; right: 8px; top: 50%;
  height: 2px; background: var(--danger); transform: rotate(-20deg);
  border-radius: 2px; box-shadow: 0 0 4px rgba(255,77,94,.6);
}

/* Tur sırasında bahis/zorluk gizlenir → oyun alanı büyür, kontroller tek odak */
#controls.in-round .bet-group,
#controls.in-round .diff-group { display: none; }
#controls.in-round { justify-content: center; }

/* ÇARPILDIN/banner: küçük ekranda taşmasın (clamp) */
#banner { max-width: 100vw; padding: 0 10px; }
#banner .banner-big { font-size: clamp(38px, 13vw, 64px); }
#banner .banner-sub { font-size: clamp(15px, 5.2vw, 22px); word-break: break-word; }
#banner .banner-tier { font-size: clamp(15px, 4.6vw, 22px); }

/* Dokunma hedefleri: en kötü cihazda bile yeterli (≥40px), butonlar sıkışmasın */
.icon-btn { min-width: 40px; min-height: 40px; }
.diff-btn { min-height: 42px; }
.bet-chips .chip { min-height: 36px; }
.cur-opt { min-height: 34px; }
.bet-mod { min-height: 40px; }

/* betInput mobilde ≥16px (iOS odak-zoom tetiklemesin) */
@media (max-width: 600px) { #betInput { font-size: 16px; } }

/* Yatay telefon uyarısı eşiği genişletildi (büyük telefonlar da kapsanır) */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  #rotateHint { display: flex; }
}

/* Hareket azaltma tercihi: tüm animasyon/geçiş kapanır (sağlık + a11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn-cash:not(:disabled) { animation: none !important; }
  #banner { animation: none !important; }
  #rotateHint .rh-emoji { animation: none !important; }
}

/* Masaüstü: kontroller ortada toplansın, dev boşluk/gerilme olmasın */
@media (min-width: 900px) {
  #controls { max-width: 920px; margin: 0 auto; width: 100%; }
  #history { max-width: 360px; }
}

/* Topbar ikonları net görünsün (bulanık ölçek olmasın) */
.icon-btn img { image-rendering: -webkit-optimize-contrast; }

/* ============================================================
   DOĞRULAMA PANELİ DÜZELTMELERİ (2. tur) — 2026-06-20
   ============================================================ */

/* REKOR/SERİ: dar/kısa ekranda gizli, masaüstünde (yer varken) görünür (regresyon fix) */
.best-box, .streak-box { display: none; }
@media (min-width: 900px) and (min-height: 561px) {
  .best-box { display: flex; }
  .streak-box:not(.hidden) { display: flex; }
}

/* Masaüstü kontroller: ferah düzen GERÇEKTEN uygulansın (kaynak-sıra galibi) */
@media (min-width: 900px) {
  #controls { gap: 44px !important; padding: 16px 40px 20px !important; }
  .diff-btn { padding: 10px 18px !important; font-size: 13px !important; }
  .bet-chips .chip { min-height: 38px !important; font-size: 13px !important; }
  #betInput { font-size: 18px !important; }
}

/* HUD çarpan ile geçmiş çipleri çakışmasın: geçmişi çarpanın altına indir */
#history { top: 70px; }
@media (max-width: 600px) { #history { top: 62px; max-width: 56%; } }

/* Dokunma hedefleri: kesin ≥40px (küçük ekran kurallarını ez) */
.icon-btn { min-width: 40px !important; min-height: 40px !important; }
.cur-opt { min-height: 40px !important; }
.bet-mod { min-height: 40px !important; }
.bet-chips .chip { min-height: 40px !important; }
.diff-btn { min-height: 42px !important; }

/* Kayıp banner alt satırı: daha okunur (WCAG) */
#banner.lose .banner-sub { color: #c8d0dc; text-shadow: 0 2px 10px rgba(0,0,0,.85); }

/* Klavye odak görünürlüğü (erişilebilirlik) */
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Kontrast: küçük etiketler WCAG için biraz daha açık */
.ctrl-label, .balance-label, .diff-btn small { color: #aab4c2; }

/* 861-899px ara bandı: ne mobil-kompakt ne boşluk; dengeli ara düzen */
@media (min-width: 861px) and (max-width: 899px) {
  #controls { gap: 24px; padding: 12px 20px 14px; }
}