:root {
    --bg-color: #FAF8F1;       
    --bg-card: #FFFFFF;        
    --bg-keyboard: #EFEBE4;    
    
    --c-text: #3E2723;         /* Ana Koyu Renk */
    --c-sub: #6D4C41;          
    --c-accent: #8D6E63;       
    
    --c-correct: #4CAF50;      
    --c-present: #FBC02D;      
    --c-absent: #9E9E9E;       
    --c-fail: #D32F2F;         

    --shadow: 0 4px 12px rgba(62, 39, 35, 0.08);
    --radius: 16px;
    --font-ui: system-ui, -apple-system, sans-serif;

    --word-len: 5;

    /* BUG FIX: bu üç değişken bazı bileşenlerde (settings-card, menu-item,
       setting-row, nick-edit butonu) kullanılıyordu ama hiç tanımlanmamıştı.
       Fallback (#fff/#333) her zaman kazanıyordu; gece modunda bu yüzden
       o bileşenler beyaz kutu olarak kalıyordu. Işık modu görünümü aynı
       kalsın diye mevcut fallback değerleriyle birebir tanımlandı. */
    --bg-panel: #FFFFFF;
    --bg-main: #F9F9F9;
    --text-main: #333333;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
:root {
    /* Bu değişkenler tarayıcı tarafından otomatik hesaplanır */
    --safe-top: env(safe-area-inset-top, 20px);
    --safe-bottom: env(safe-area-inset-bottom, 20px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* --- EKRAN KİLİDİ (Gerçek Safari'de kritik) ---
   html'in KENDİSİ de overflow:hidden olmazsa, iOS Safari body scroll'u
   kilitli olsa bile üst seviyede lastik gibi geri-sıçrama (rubber-band)
   yapabiliyor; bu da dinamik araç çubuğu her seferinde 100dvh'yi yeniden
   hesaplayıp grid+klavye+action-bar'ın üst üste bindiği/kaymalar olduğu bir
   düzen sıçramasına yol açabiliyor. Bu masaüstü Chrome'da HİÇ görülmez
   (Safari'ye özgü), bu yüzden emülatörde her şey normal görünür. */
html, body {
    height: 100%;
    overflow: hidden !important;
}

/* --- EKSTRA GARANTİ: HEADER VE OYUN ALANI --- */

/* Alt menü veya butonlar varsa alttaki çizginin altında kalmasın */
.bottom-nav, #keyboard-area {
    padding-bottom: 5px;
}
body {
    margin: 0; padding: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none; /* iOS lastik-sıçrama efektini kapat */
    touch-action: manipulation; /* Çift dokunuşla yakınlaştırmayı engelle, tıklama gecikmesini azalt */
    background-color: var(--bg-color);
    color: var(--c-text);
    font-family: var(--font-ui);
    display: flex; flex-direction: column;
}

/* Auth + players profili doğrulanmadan authenticated uygulama hiçbir frame
   render edilmez. Splash ve hesap giriş yüzeyi bu root gate'in dışındadır. */
body.app-access-checking .screen,
body.app-access-blocked .screen {
    display: none !important;
}

.screen { width: 100%; height: 100%; display: flex; flex-direction: column; }
.hide { display: none !important; }
.centered { align-items: center; justify-content: center; text-align: center; }

#screen-game { position: relative; }
.game-initializing-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg-color);
    color: var(--c-text);
    font-weight: 900;
    pointer-events: auto;
}
.game-initializing-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(141, 110, 99, .22);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
#screen-game.game-initializing > :not(.game-initializing-overlay) {
    visibility: hidden;
}
#screen-game.game-initializing .game-initializing-overlay {
    visibility: visible;
}

/* LOADING */
#loading-screen{
  position: fixed;
  inset: 0;
  background: var(--bg-color);
  z-index: 2147483646; /* fly-coin 2147483647, onun 1 altı */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  opacity: 1;
  pointer-events: all;
  transition: opacity .55s ease-out;
}

#loading-screen.fade-out{
  opacity: 0;
  pointer-events: none;
}

#loading-screen.is-hidden{
  display: none !important;
}
/* Splash sürerken auth sonucu hazır olsa bile giriş yüzeyi arkada
   animasyonunu tüketmez; splash kalkınca tek seferde görünür olur. */
body.splash-active #account-entry-screen {
    display: none !important;
}
.loading-logo { width: min(52vw, 220px); height: auto; margin-bottom: 18px; }
#floating-letters { font-size: 2rem; font-weight: 900; color: var(--c-text); letter-spacing: 3px; margin-bottom: 20px; }
.loader-container { width: 150px; height: 6px; background: #E0E0E0; border-radius: 4px; overflow: hidden; }
.loading-bar-fill { height: 100%; width: 0%; background: var(--c-correct); transition: width 0.1s; }
.loading-percent { margin-top: 10px; font-weight: bold; font-size: 0.9rem; color: var(--c-sub); }

/* İLK KURULUM — OPSİYONEL HESAP GİRİŞİ */
.account-entry-screen {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        calc(20px + env(safe-area-inset-top))
        calc(18px + env(safe-area-inset-right))
        calc(20px + env(safe-area-inset-bottom))
        calc(18px + env(safe-area-inset-left));
    background: var(--bg-color);
    overflow-y: auto;
}

/* SETTINGS + PROFILE DAILY REWARD — compact grouped layout */
#settings-modal {
    align-items: center;
    padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
}
#settings-modal .settings-card {
    width: min(100%, 410px);
    max-width: 410px;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 0;
    overflow: hidden;
    text-align: left;
    background: #fbf8f1;
    border: 1px solid rgba(93, 64, 55, 0.14);
    box-shadow: 0 16px 44px rgba(62, 39, 35, 0.28);
}
.settings-header {
    min-height: 58px;
    padding: 12px 14px 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(93, 64, 55, 0.12);
    background: #fff;
}
.settings-header h2 { margin: 0; color: #3E2723; font-size: 1.28rem; }
.settings-close-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5D4037;
    font: 400 2rem/1 sans-serif;
    cursor: pointer;
    touch-action: manipulation;
}
.settings-close-icon:active { background: rgba(93, 64, 55, 0.1); transform: scale(0.94); }
.settings-scroll {
    max-height: calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 15px 14px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.settings-section { margin: 0 0 17px; }
.settings-section > h3,
.settings-account-section > h3 {
    margin: 0 4px 7px;
    color: #6D4C41;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}
.settings-account-section { margin-top: 0; }
.settings-group {
    overflow: hidden;
    border: 1px solid rgba(121, 85, 72, 0.16);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(62, 39, 35, 0.035);
}
#settings-modal .setting-row,
#settings-modal .settings-action-row,
#settings-modal .settings-provider-row {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    border-bottom: 1px solid rgba(121, 85, 72, 0.12);
    border-radius: 0;
    background: transparent;
    color: #3E2723;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
}
#settings-modal .settings-group > :last-child,
#settings-modal .google-account-card > :last-child,
#settings-modal .google-account-anonymous > :last-child,
#settings-modal .email-account-card > :last-child,
#settings-modal #email-account-anonymous > :last-child { border-bottom: 0; }
#settings-modal .settings-action-row { cursor: pointer; touch-action: manipulation; }
#settings-modal .settings-action-row:not(:disabled):active { background: #FFF8E1; }
.settings-row-icon,
.provider-logo {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
}
.settings-row-copy,
.settings-action-copy { min-width: 0; flex: 1; }
.settings-row-arrow { color: #BCAAA4; font-size: 1.35rem; font-weight: 700; }
#settings-modal .toggle-switch { width: 43px; height: 24px; flex: 0 0 43px; }
#settings-modal .slider:before { width: 18px; height: 18px; left: 3px; bottom: 3px; }
#settings-modal input:checked + .slider:before { transform: translateX(19px); }
#settings-modal .google-account-card {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#settings-modal .google-account-linked,
#settings-modal .google-account-anonymous { width: 100%; }
#settings-modal .google-account-anonymous { display: block; }
#settings-modal .email-account-card,
#settings-modal #email-account-linked,
#settings-modal #email-account-anonymous { width: 100%; }
#settings-modal .email-account-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#settings-modal .email-account-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
#settings-modal .email-account-copy strong { color: #3E2723; font-size: 0.88rem; }
#settings-modal .email-account-copy span {
    overflow: hidden;
    color: #8D6E63;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#settings-modal .google-profile-photo {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border: 1px solid rgba(93, 64, 55, 0.15);
    box-shadow: none;
}
#settings-modal .google-account-copy { gap: 1px; }
#settings-modal .google-account-copy strong { color: #3E2723; font-size: 0.88rem; }
#settings-modal .google-account-copy span { color: #8D6E63; font-size: 0.72rem; }
.google-provider-logo { background: #fff; border: 1px solid #dadce0; color: #4285F4; font-weight: 900; }
.apple-provider-logo { background: #222; color: #fff; font-size: 0.64rem; }
.facebook-provider-logo { background: #1877F2; color: #fff; font: 900 1.1rem/1 Arial, sans-serif; }
.email-provider-logo { background: #FFF3E0; color: #8D6E63; }
.provider-soon-label {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: #F5F1EA;
    color: #9A8E84;
    font-size: 0.66rem;
    font-weight: 800;
}
#settings-modal .is-disabled { opacity: 0.6; cursor: default; }
.connected-state { flex: 0 0 auto; color: #2E7D32; font-size: 0.7rem; font-weight: 900; }
#settings-modal .delete-account-row { color: #C62828; }
#settings-modal .delete-account-row .settings-row-arrow { color: #E57373; }
.settings-footer {
    padding: 2px 4px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #9B8E84;
    font-size: 0.7rem;
    text-align: center;
}
.profile-daily-reward-card {
    width: 100%;
    max-width: 400px;
    padding: 17px;
    border: 1px solid #FFE082;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(62, 39, 35, 0.06);
}
.profile-daily-reward-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
    text-align: left;
}
.profile-daily-reward-gift {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border-radius: 13px;
    background: #FFF3E0;
    font-size: 1.35rem;
}
.profile-daily-reward-heading h3 { margin: 0 0 2px; color: #5D4037; font-size: 1rem; }
.profile-daily-reward-heading p { margin: 0; color: #8D6E63; font-size: 0.76rem; }
.profile-daily-reward-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-daily-reward-days .daily-login-reward-day { position: relative; min-height: 66px; }
.daily-reward-check {
    position: absolute;
    top: 3px;
    right: 5px;
    color: #2E7D32;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 1000;
}
.profile-daily-reward-card .daily-login-reward-status { margin: 12px 0 8px; text-align: center; }
.profile-daily-reward-claim {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    background: #4CAF50;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
}
.profile-daily-reward-claim:disabled { background: #BDBDBD; cursor: default; }
.daily-login-reward-claim.is-claimed,
.profile-daily-reward-claim.is-claimed {
    background: #bdbdbd !important;
    color: #666 !important;
    box-shadow: none !important;
    opacity: 1;
}
[data-theme="dark"] #settings-modal .settings-card,
[data-theme="dark"] #settings-modal .settings-scroll { background: #1E1E1E; }
[data-theme="dark"] #settings-modal .settings-header,
[data-theme="dark"] #settings-modal .settings-group,
[data-theme="dark"] .profile-daily-reward-card { background: #292929; border-color: #48423A; }
[data-theme="dark"] .settings-header h2,
[data-theme="dark"] .settings-close-icon,
[data-theme="dark"] #settings-modal .setting-row,
[data-theme="dark"] #settings-modal .settings-action-row,
[data-theme="dark"] #settings-modal .settings-provider-row,
[data-theme="dark"] #settings-modal .google-account-copy strong,
[data-theme="dark"] #settings-modal .email-account-copy strong,
[data-theme="dark"] .profile-daily-reward-heading h3 { color: #F4EEE5; }
[data-theme="dark"] #settings-modal .setting-row,
[data-theme="dark"] #settings-modal .settings-action-row,
[data-theme="dark"] #settings-modal .settings-provider-row { border-color: #45413B; }
[data-theme="dark"] #settings-modal .settings-action-row:not(:disabled):active { background: #383229; }
[data-theme="dark"] #settings-modal .delete-account-row { color: #FF8A80; }
[data-theme="dark"] .profile-daily-reward-gift { background: rgba(255, 179, 0, 0.16); }
@media (max-height: 620px) {
    #settings-modal {
        align-items: stretch;
        padding-top: max(6px, env(safe-area-inset-top));
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }
    #settings-modal .settings-card {
        margin: auto;
        max-height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    .settings-scroll { padding-top: 10px; }
}
.account-entry-card {
    width: min(100%, 390px);
    padding: 28px 22px 22px;
    border: 1px solid rgba(141, 110, 99, 0.18);
    border-radius: 22px;
    background: var(--bg-card);
    box-shadow: 0 12px 34px rgba(62, 39, 35, 0.12);
    text-align: center;
}
.account-entry-logo {
    display: block;
    width: auto;
    height: 58px;
    margin: 0 auto 16px;
    object-fit: contain;
}
.account-entry-card h1 {
    margin: 0 0 8px;
    color: var(--c-text);
    font-size: 1.65rem;
}
.account-entry-card > p {
    margin: 0 auto 22px;
    color: var(--c-sub);
    font-size: 0.92rem;
    line-height: 1.45;
}
.account-provider-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.account-provider-btn {
    position: relative;
    width: 100%;
    min-height: 48px;
    padding: 10px 54px 10px 16px;
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid #dadce0;
    border-radius: 12px;
    background: #fff;
    color: #3c4043;
    font-size: 0.95rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}
.account-provider-btn:disabled {
    cursor: default;
}
.account-provider-btn small {
    position: absolute;
    right: 13px;
    color: var(--c-sub);
    font-size: 0.7rem;
    font-weight: 700;
}
.account-provider-btn.disabled-provider {
    opacity: 0.48;
}
.continue-guest-btn {
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
    touch-action: manipulation;
}
.continue-guest-btn.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    opacity: 0.72;
    cursor: wait;
    text-decoration: none;
}
.continue-guest-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid rgba(62, 39, 35, 0.22);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
[data-theme="dark"] .account-entry-card,
[data-theme="dark"] .account-provider-btn {
    background: #2C2C2C;
    border-color: #555;
    color: #F1F1F1;
}

.guest-reminder-backdrop {
    z-index: 2147483646;
    padding:
        calc(18px + env(safe-area-inset-top))
        calc(18px + env(safe-area-inset-right))
        calc(18px + env(safe-area-inset-bottom))
        calc(18px + env(safe-area-inset-left));
}
.guest-reminder-card {
    width: min(100%, 360px);
}
.guest-reminder-card h2 {
    margin: 0 0 12px;
    color: var(--c-text);
    font-size: 1.3rem;
}
.guest-reminder-card p {
    margin: 0 0 18px;
    color: var(--c-sub);
    font-size: 0.92rem;
    line-height: 1.5;
}
.guest-reminder-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.guest-reminder-actions .modal-opt {
    min-height: 44px;
    margin-top: 0;
    touch-action: manipulation;
}

.daily-login-reward-backdrop {
    z-index: 2147483644;
    padding:
        calc(16px + env(safe-area-inset-top))
        calc(16px + env(safe-area-inset-right))
        calc(16px + env(safe-area-inset-bottom))
        calc(16px + env(safe-area-inset-left));
}
.daily-login-reward-card {
    position: relative;
    width: min(100%, 390px);
    max-width: 390px;
    padding: 24px 18px 20px;
}
.daily-login-reward-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--c-sub);
    font-size: 1.8rem;
    cursor: pointer;
    touch-action: manipulation;
}
.daily-login-reward-icon {
    font-size: 2.5rem;
    line-height: 1;
}
.daily-login-reward-card h2 {
    margin: 8px 0 4px;
    color: var(--c-text);
    font-size: 1.4rem;
}
.daily-login-reward-subtitle {
    margin: 0 0 16px;
    color: var(--c-sub);
    font-size: 0.87rem;
}
.daily-login-reward-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.daily-login-reward-day {
    min-height: 70px;
    padding: 8px 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(141, 110, 99, 0.2);
    border-radius: 12px;
    background: var(--bg-color);
    color: var(--c-text);
}
.daily-login-reward-day strong {
    font-size: 0.72rem;
}
.daily-login-reward-day span {
    color: #E65100;
    font-size: 0.82rem;
    font-weight: 900;
}
.daily-login-reward-day.is-today {
    border: 2px solid #FF9800;
    background: #FFF3E0;
    box-shadow: 0 3px 10px rgba(255, 152, 0, 0.2);
    transform: translateY(-2px);
}
.daily-login-reward-day.is-claimed {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.12);
}
.daily-login-reward-day.day-seven {
    grid-column: span 2;
}
.daily-login-reward-status {
    min-height: 20px;
    margin: 14px 0 8px;
    color: var(--c-sub);
    font-size: 0.84rem;
    font-weight: 700;
}
.daily-login-reward-claim {
    min-height: 46px;
    margin-top: 0;
    touch-action: manipulation;
}
[data-theme="dark"] .daily-login-reward-day.is-today {
    background: rgba(255, 152, 0, 0.2);
    color: #fff;
}

/* HEADER */
.main-header {
    /* Çentik/Dynamic Island payı body'ye değil DOĞRUDAN header'a: header bu
       kadar daha uzun olur, içerik (align-items:center ile) bu uzamış
       kutunun ortasına düşer ve çentiğin altına girmeden altına yerleşir.
       Body'yi de ayrıca aşağı itmediğimiz için alan israf edilmez. */
    height: calc(60px + env(safe-area-inset-top));
    box-sizing: border-box;
    flex-shrink: 0; /* Kısa ekranlarda header sıkışıp ezilmesin — sıkışması gereken home-center */

    /* DEĞİŞİKLİK BURADA: */
    padding-left: 0;      /* Sol taraf: DUBA GİBİ SIFIR (En sola yapışır) */
    padding-right: 20px;  /* Sağ taraf: 20px içeride (Profil simgesi kesilmez) */

    display: flex;
    justify-content: space-between; 
    align-items: center;
    background: var(--bg-card); 
    box-shadow: var(--shadow); 
    z-index: 50; 
    position: relative;
}

.header-left, .header-right { display: flex; align-items: center; }
.header-left { cursor: pointer; justify-content: center; pointer-events: auto; z-index: 1001; }
.header-right { gap: 8px; flex-wrap: nowrap; }

.home-logo { height: 42px; width: auto; object-fit: contain; display: block; }
.app-logo { height: 40px; width: auto; object-fit: contain; display: block; }

.icon-btn {
    padding: 8px; cursor: pointer; color: var(--c-text);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background 0.1s;
    z-index: 100; position: relative;
}
.icon-btn:active { background: #eee; }
.icon-btn svg, button svg { pointer-events: none; }

.stat-pill {
    background: #F5F5F5; padding: 5px 10px; border-radius: 20px;
    font-size: 0.85rem; font-weight: bold; color: var(--c-sub);
    white-space: nowrap; display: flex; align-items: center;
}

/* ANA SAYFA */
.home-center {
    flex: 1;
    min-height: 0; /* KRİTİK: içerik sığmazsa scroll güvenlik ağı düzgün çalışsın */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    /* Kısa ekranlarda (iPhone SE vb) boşluklar otomatik daralsın ki scroll'a hiç gerek kalmasın */
    padding: clamp(10px, 3dvh, 20px) 20px;
    gap: clamp(8px, 2dvh, 15px);
    overflow-y: auto; /* Son çare güvenlik ağı — normalde gerekmemeli */
}
.menu-grid { display: grid; grid-template-columns: 1fr; gap: clamp(8px, 1.5dvh, 12px); width: 100%; max-width: 360px; }
.mode-card {
    background: var(--bg-card); padding: clamp(8px, 2dvh, 12px) 15px; border-radius: var(--radius);
    box-shadow: var(--shadow); display: flex; align-items: center; gap: 15px;
    cursor: pointer; transition: transform 0.1s; border: 1px solid transparent;
}
.mode-card:active { transform: scale(0.97); background: #FDFDFD; }
.daily-card { background: #FFF8E1; } /* Çerçeve kaldırıldı, zemin sarı */

.icon-circle {
    width: clamp(36px, 8dvh, 44px); height: clamp(36px, 8dvh, 44px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}
.classic-bg { background: #E8F5E9; }
.marathon-bg { background: #E3F2FD; }
.daily-bg { background: #FFF8E1; }
.free-bg { background: #EFEBE9; }

.card-info { text-align: left; }
.card-title { font-weight: 800; font-size: 1.1rem; color: var(--c-text); }
.card-sub { font-size: 0.85rem; color: var(--c-sub); margin-top: 2px; }

.stats-row { display: flex; gap: 10px; width: 100%; max-width: 360px; flex-shrink: 0; }
.stats-btn {
    flex: 1; background: var(--bg-card); border: none; padding: clamp(8px, 2dvh, 12px);
    border-radius: var(--radius); box-shadow: var(--shadow);
    font-weight: bold; color: var(--c-accent); cursor: pointer;
    pointer-events: auto; z-index: 10;
}
.text-btn { background: none; border: none; text-decoration: underline; color: var(--c-sub); font-size: 0.9rem; cursor: pointer; flex-shrink: 0; }

/* Ana sayfa başlığı (index.html içindeki inline style'ı ezer) — kısa
   ekranlarda başlık da daralarak menü kartlarına yer açsın. */
.main-title {
    font-size: clamp(1.6rem, 6dvh, 2.5rem) !important;
    margin-bottom: clamp(8px, 2dvh, 20px) !important;
    transform: translateY(-12px);
}

/* OYUN EKRANI */
.game-header {
    height: 50px; display: flex; justify-content: space-between; align-items: center;
    padding: 0 15px; background: var(--bg-color); flex-shrink: 0;
    z-index: 50; position: relative;
}
.game-header-left { display: flex; align-items: center; gap: 10px; }
.game-logo-icon { color: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.game-logo-img { height: 32px; width: auto; object-fit: contain; }

.game-stats { display: flex; gap: 8px; align-items: center; }
.g-stat {
    background: #ECE6D8; padding: 4px 10px; border-radius: 12px;
    font-size: 0.85rem; font-weight: bold; color: var(--c-text);
    display: flex; gap: 5px; align-items: center;
    font-variant-numeric: tabular-nums; /* Rakamlar oynama yapmaz */
    min-width: 80px; /* Sabit genişlik */
    justify-content: center;
}
.g-stat.time { min-width: 80px; }
.g-stat.score { min-width: auto; } /* Skor kutusu esnek kalsın */
.g-stat.ratios { min-width: auto; }
.g-stat.ratios { background: #ECE6D8; padding: 4px 12px; font-size: 0.95rem; gap: 12px; }
.ok { color: var(--c-correct); } .fail { color: var(--c-fail); }

.exit-btn {
    background: none; border: none; cursor: pointer; padding: 8px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto; z-index: 100; position: relative;
}
/* SVG tıklamayı yutmasın */
.exit-btn svg { pointer-events: none; }

.progress-track { width: 100%; height: 4px; background: #E0E0E0; flex-shrink: 0; }
.progress-fill { width: 100%; height: 100%; background: var(--c-accent); transition: width 0.2s linear; }

.grid-wrapper { position: relative; }
.round-transition-loading {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: block;
    background: transparent;
    cursor: wait;
}
.round-transition-loading.hide { display: none; }
.game-grid {
    opacity: 1;
    transform: scale(1);
    transition: opacity 180ms ease, transform 180ms ease;
}
.screen.round-loading .game-grid {
    opacity: 0;
    transform: scale(.985);
}
.screen.round-loading .keyboard-box,
.screen.round-loading .bottom-action-bar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}
.screen:not(.round-loading) .keyboard-box,
.screen:not(.round-loading) .bottom-action-bar {
    opacity: 1;
    transition: opacity 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
    .game-grid,
    .screen.round-loading .keyboard-box,
    .screen.round-loading .bottom-action-bar,
    .screen:not(.round-loading) .keyboard-box,
    .screen:not(.round-loading) .bottom-action-bar {
        transition: none;
    }
}

/* JOKER BAR */
.joker-container {
    display: flex; justify-content: center; align-items: center; gap: 15px;
    padding: 10px 0; flex-shrink: 0;
}
.joker-wallet {
    background: rgba(0,0,0,0.05); padding: 5px 12px; border-radius: 20px;
    font-weight: bold; font-size: 0.9rem; color: #8D6E63; border: 1px solid #D7CCC8;
}
.joker-item {
    position: relative; width: 48px; height: 48px;
    border-radius: 14px; border: 2px solid #D7CCC8;
    background: white; color: var(--c-text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.joker-item:active { transform: scale(0.95); }
.joker-item:disabled { opacity: 0.5; filter: grayscale(1); }
.joker-badge {
    position: absolute; top: -8px; right: -8px;
    background: var(--c-text); color: white;
    font-size: 0.65rem; padding: 2px 6px; border-radius: 10px;
    border: 2px solid white; font-weight: bold; pointer-events: none;
}
.joker-badge::after {
    content:''; position: absolute; bottom:-4px; left:4px;
    border-width: 4px 4px 0; border-style: solid;
    border-color: var(--c-text) transparent;
}

/* GRID ALANI */
/* --- GRID SİSTEMİ REVİZYONU (Solution 1: Elastic Grid) --- */

/* Grid Kapsayıcısı: Asla taşmaz, kaydırma çubuğu çıkmaz */
.grid-wrapper {
    flex: 1;
    min-height: 0; /* KRİTİK: flex kolonda bu olmadan içerik taşabilir/scroll gerekebilir */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden; /* Scroll yasak */
    padding: 10px 0; /* Üstten alttan az boşluk */
    /* Klavye ile Header arasındaki alanı doldurur */
}

/* Oyun Tahtası: Sabit oranlarda durur */
.game-grid {
    display: flex;           /* Grid yerine Flex kullanıyoruz (Dikey) */
    flex-direction: column;  /* Satırlar alt alta */
    gap: 5px;                /* Satır arası boşluk */

    width: 100%;
    height: 100%;            /* Wrapper'ın tamamını kullan */
    min-height: 0;
    max-width: 350px;        /* Çok genişlemesin */

    /* Yükseklik Sınırı: Ekranın %50'sini geçmesin ki klavyeye yer kalsın.
       (Aşağıda "YENİ OYUN DÜZENİ" bölümünde 50vh olarak override ediliyor —
       gerçek/etkili tavan odur, bu satır onunla çakışmasın diye bilerek aynı
       değerlere yakın tutuluyor.) */
    max-height: 55vh;

    padding: 5px;
    box-sizing: border-box;
}

/* Satır: Esnek yapıda */
.row { 
    display: flex;           /* Harfler yan yana */
    flex: 1;                 /* Mevcut yüksekliği eşit paylaşın */
    gap: 5px;                /* Harf arası boşluk */
    justify-content: center; /* Ortala */
    
    /* reveal satırı kapalıyken yer kaplamasın */
    min-height: 0;           
}

/* Gizli Satır (Reveal) */
/* Gizli Satır Ayarı - REZERVE ALAN MANTIĞI */
.row.reveal { 
    display: flex !important; /* Her zaman flex olsun, yer kaplasın */
    visibility: hidden;       /* Ama görünmesin */
    opacity: 0;
}

/* Cevap açıldığında görünür olsun */
.row.reveal.show { 
    visibility: visible !important;
    opacity: 1;
}

/* Kutu (Tile): Büyüklüğü otomatik ayarlanır */
.tile {
    /* Sabit width/height SİLİNDİ. */
    width: auto;       /* Genişlik otomatik */
    height: 100%;      /* Satırın yüksekliği kadar ol */
    aspect-ratio: 1/1; /* Her zaman kare kal */

    /* Geri kalan stiller aynı */
    background: #fff;
    border: 2px solid #D7CCC8;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Fontu biraz responsive yapmak gerekebilir ama şimdilik kalsın */
    font-weight: 800;
    color: var(--c-text);
    user-select: none;
}

/* Küçük ekranlarda (iPhone SE vb) harfler taşmasın diye fontu kısalım */
@media (max-height: 600px) {
    .tile { font-size: 1.2rem; }
    .game-grid { max-height: 50vh; }
}
.tile.correct { background: var(--c-correct); color: white; border-color: var(--c-correct); }
.tile.present { background: var(--c-present); color: white; border-color: var(--c-present); }
.tile.absent { background: var(--c-absent); color: white; border-color: var(--c-absent); }
.tile.fail {
    background: #C62828;
    color: #fff;
    border-color: #8E0000;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 2px 0 #8E0000;
}
.tile.hint { color: rgba(0,0,0,0.25); }
.tile.pop { animation: pop 0.1s; border-color: var(--c-text); }
.tile.dance { animation: pop 0.4s ease-in-out; }

/* KONTROLLER */
.controls-area {
    background: var(--bg-keyboard);
    padding: 10px 5px calc(10px + env(safe-area-inset-bottom)) 5px; 
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
    flex-shrink: 0; z-index: 100;
}
.action-row { display: flex; justify-content: center; gap: 15px; margin-bottom: 10px; }
.action-btn {
    border: none; padding: 8px 16px; border-radius: 20px;
    font-weight: bold; font-size: 0.9rem; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 5px;
}
.action-btn.pass { background: white; color: var(--c-accent); border: 2px solid var(--c-accent); }
.action-btn.enter { background: var(--c-text); color: white; border: 2px solid var(--c-text); }
.action-btn:active { transform: translateY(1px); }

/* Fiyat görünümlü PAS butonu için */
.btn-pass.premium-gold {
    background: #FFF9C4 !important; border-color: #FBC02D !important;
    color: #F57F17 !important;
}

.keyboard-box {
    display: flex; flex-direction: column; gap: 6px;
    width: 100%; max-width: 500px; margin: 0 auto;
}
.vk-row { display: flex; justify-content: center; gap: 4px; }
.vk-key {
    flex: 1; height: 46px; border-radius: 6px; border: none;
    background: #FFF; color: var(--c-text);
    font-size: 1.2rem; font-weight: bold;
    cursor: pointer; box-shadow: 0 2px 0 #D7CCC8;
    display: flex; align-items: center; justify-content: center;
}
.vk-key:active { background: #E0E0E0; transform: translateY(2px); box-shadow: none; }
.vk-key.action-key { flex: 1.5; background: #D7CCC8; }
.vk-key.correct { background: var(--c-correct); color: white; box-shadow: 0 2px 0 #388E3C; }
.vk-key.present { background: var(--c-present); color: white; box-shadow: 0 2px 0 #F9A825; }
.vk-key.absent { background: var(--c-absent); color: white; opacity: 0.6; box-shadow: 0 2px 0 #616161; }

/* MODAL / OYUN SONU */
.modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 2000;
    display: flex; align-items: center; justify-content: center;
}
.modal-content {
    background: var(--bg-card); padding: 25px; border-radius: var(--radius);
    width: 85%; max-width: 320px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.modal-content.wide { max-width: 500px; }
.modal-opt {
    width: 100%; padding: 12px; margin-top: 10px;
    background: #F5F5F5; border: none; border-radius: 8px;
    font-weight: bold; color: var(--c-text); cursor: pointer;
}
.modal-opt.primary { background: var(--c-correct); color: white; }
.modal-opt.danger { background: var(--c-fail); color: white; }
.modal-close { background: #000000; border: 1px solid #000000; color: #ffffff; margin-top: 15px; padding: 8px 20px; border-radius: 20px; cursor: pointer; }

.email-link-card {
    position: relative;
    width: min(88%, 350px);
    max-width: 350px;
    padding: 24px 20px 20px;
    text-align: left;
}
#email-link-modal {
    /* Welcome/account-entry ekranının üzerinde açılmalı. Önceki genel modal
       z-index'i (2000), first-launch ekranının arkasında bırakıyordu. */
    z-index: 2147483647;
}
.email-link-card h3 { margin: 0 32px 8px 0; color: var(--c-text); }
.email-link-card > p { margin: 0 0 16px; color: var(--c-sub); font-size: 0.86rem; line-height: 1.45; }
.email-link-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}
.email-link-card label {
    display: block;
    margin: 0 0 6px;
    color: var(--c-text);
    font-size: 0.78rem;
    font-weight: 800;
}
.email-link-card input {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border: 1px solid rgba(121, 85, 72, 0.28);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--c-text);
    font: 600 1rem/1 inherit;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
}
.email-link-card input:focus {
    border-color: #C99A2E;
    box-shadow: 0 0 0 3px rgba(201, 154, 46, 0.14);
}
.email-link-card .email-otp-input {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.35em;
}
.email-code-destination { margin-bottom: 12px !important; word-break: break-word; }
.email-resend-button {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: #8D6E63;
    font: 800 0.78rem/1.2 inherit;
    cursor: pointer;
}
.email-resend-button:disabled { opacity: 0.55; cursor: default; }
.email-link-status {
    min-height: 20px;
    margin: 12px 0 0 !important;
    font-size: 0.78rem !important;
    font-weight: 700;
}
.email-link-status.is-error { color: #C62828 !important; }
.email-link-status.is-success { color: #2E7D32 !important; }

#endInfo {
    font-weight: 800; font-size: 1.2rem; margin: 15px 0;
    text-shadow: none !important; opacity: 1 !important;
}
/* Oyun Sonu Mesaj Renkleri - Temaya Göre Değişir */
.end-msg-win { 
    color: #2E7D32 !important; /* Gündüz: Koyu Yeşil */
    font-weight: 800;
}
.end-msg-fail { 
    color: #D32F2F !important; /* Gündüz: Koyu Kırmızı */
    font-weight: 800;
}

/* Gece Modu (Dark Mode) İçin Renkler */
[data-theme="dark"] .end-msg-win { 
    color: #81C784 !important; /* Gece: Açık Parlak Yeşil */
}
[data-theme="dark"] .end-msg-fail { 
    color: #E57373 !important; /* Gece: Açık Parlak Kırmızı */
}
#msg { height: 24px; color: var(--c-fail); font-weight: bold; font-size: 0.95rem; margin-top: 5px; text-align: center; }
#toast {
    position: fixed; bottom: 140px; left: 50%; transform: translateX(-50%);
    background: rgba(40,40,40,0.95); color: white;
    padding: 12px 24px; border-radius: 30px; z-index: 9999;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
#toast.show { opacity: 1; }

/* SKOR TABLOSU PANELİ */
.score-panel {
    background: #FAF8F1; padding: 0; border-radius: 24px; overflow: hidden;
    width: 90%; max-width: 400px; height: 70vh; display: flex; flex-direction: column;
}
.panel-header {
    background: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #eee; flex-shrink: 0;
}
.panel-header h3 { margin: 0; color: #3E2723; font-size: 1.2rem; }
.icon-close { background: none; border: none; font-size: 1.5rem; color: #888; cursor: pointer; }
.tab-row { padding: 10px; display: flex; gap: 5px; justify-content: center; background: #fff; flex-shrink: 0; }
.tab-btn {
    flex: 1; padding: 8px; border: none; background: transparent; color: #8D6E63;
    font-weight: 600; border-bottom: 3px solid transparent; cursor: pointer; transition: all 0.2s;
}
.tab-btn.active { color: #3E2723; border-bottom-color: #3E2723; }

.sub-tabs { display: flex; justify-content: center; gap: 8px; padding-bottom: 10px; background: #fff; }
.chip-btn {
    padding: 4px 12px; border-radius: 12px; border: 1px solid #ddd;
    background: #fff; color: #666; font-size: 0.8rem; cursor: pointer;
}
.chip-btn.active { background: #3E2723; color: #fff; border-color: #3E2723; }

.table-container { flex: 1; overflow-y: auto; padding: 10px; background: #FAF8F1; }
.fancy-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.fancy-table tbody tr { background: #FFFFFF; box-shadow: 0 2px 5px rgba(0,0,0,0.03); transition: transform 0.1s; }
.fancy-table tbody tr td { padding: 12px 10px; font-size: 0.95rem; color: #3E2723; font-weight: 600; }
.fancy-table tbody tr td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.fancy-table tbody tr td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

.rank-badge {
    display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 0.8rem; font-weight: bold; color: #555; background: #eee;
}
.rank-1 { background: #FFD700; color: #fff; box-shadow: 0 2px 5px rgba(255, 215, 0, 0.4); }
.rank-2 { background: #C0C0C0; color: #fff; }
.rank-3 { background: #CD7F32; color: #fff; }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--c-sub); text-align: center; }
.empty-state span { font-size: 1rem; margin-bottom: 1px; display: block; }
.spinner { width: 20px; height: 20px; border: 3px solid #ddd; border-top-color: #3E2723; border-radius: 50%; animation: spin 1s linear infinite; display: inline-block; margin-right: 5px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* PROFİL SAYFASI */
#screen-profile { justify-content: flex-start !important; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.profile-header-bar {
    flex-shrink: 0; width: 100%; z-index: 50; position: relative; padding: 15px;
    background: var(--bg-card); border-bottom: 1px solid rgba(0,0,0,0.1);
    color: var(--c-text); display: flex; justify-content: space-between; align-items: center;
}
.profile-header-bar h3 { margin: 0; color: var(--c-text); font-size: 1.2rem; }
.profile-content { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; align-items: center; padding-bottom: 80px; width: 100%; }

.profile-card {
    background: #fff; width: 100%; max-width: 400px; border-radius: 20px; padding: 20px;
    box-shadow: 0 4px 15px rgba(62, 39, 35, 0.06); text-align: center;
}
.profile-card.hero { background: linear-gradient(135deg, #fff 0%, #FFF8E1 100%); border: 1px solid #FFE082; }

.google-account-card {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid rgba(141, 110, 99, 0.18);
    border-radius: 14px;
    background: var(--bg-card);
    text-align: left;
}
.settings-account-section {
    margin-top: 18px;
    text-align: left;
}
.settings-account-section > h3 {
    margin: 0 0 9px;
    color: var(--c-text);
    font-size: 1rem;
}
.google-account-linked,
.google-account-anonymous {
    display: flex;
    align-items: center;
    gap: 14px;
}
.google-account-anonymous {
    justify-content: space-between;
    flex-wrap: wrap;
}
.google-profile-photo {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}
.google-account-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    color: var(--c-text);
}
.google-account-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.google-account-copy span {
    color: var(--c-sub);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.google-account-copy .google-account-label {
    color: #2E7D32;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.google-link-btn {
    min-height: 44px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #dadce0;
    border-radius: 10px;
    background: #fff;
    color: #3c4043;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
.google-link-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}
.profile-provider-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.profile-provider-soon {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid rgba(141, 110, 99, 0.18);
    border-radius: 9px;
    background: transparent;
    color: var(--c-sub);
    font-size: 0.74rem;
    opacity: 0.55;
}
.google-g {
    color: #4285F4;
    font-size: 1.15rem;
    font-weight: 900;
}
[data-theme="dark"] .google-account-card,
[data-theme="dark"] .google-link-btn {
    background: #2C2C2C;
    border-color: #555;
    color: #F1F1F1;
}

.avatar-container { width: 100px; height: 100px; margin: 0 auto 15px; position: relative; cursor: pointer; }
.avatar-container img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.edit-badge {
    position: absolute; bottom: 0; right: 0; background: #3E2723; color: #fff;
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; border: 2px solid #fff;
}

.nick-row { display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 15px; }
#p-nick-edit { border: none; background: transparent; font-size: 1.2rem; font-weight: 800; color: #3E2723; text-align: center; width: 150px; }
#p-nick-edit {
    user-select: text;
    -webkit-user-select: text;
    touch-action: manipulation;
}
#p-nick-edit:focus { outline: none; border-bottom: 2px solid #3E2723; }
.small-btn { font-size: 0.75rem; padding: 4px 10px; border-radius: 12px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.small-btn.primary { background: #4CAF50; color: #fff; border-color: #4CAF50; }

.rank-display { margin-top: 10px; width: 100%; }
#p-rank-name { font-weight: bold; color: #FF8F00; display: block; margin-bottom: 5px; }
.xp-bar-track { width: 100%; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin-bottom: 5px; }
.xp-bar-fill { height: 100%; background: #FFB300; transition: width 0.3s; }
.xp-details { display: flex; justify-content: space-between; width: 100%; margin-top: 6px; font-size: 0.85rem; font-weight: 600; color: var(--c-sub); }
.xp-details b { font-weight: 800; color: var(--c-text); }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 400px; }
.stat-box {
    background: #fff; padding: 15px; border-radius: 16px; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.stat-icon { font-size: 1.5rem; margin-bottom: 5px; }
.stat-val { font-size: 1.2rem; font-weight: 800; color: #3E2723; }
.stat-label { font-size: 0.8rem; color: #888; }

.badges-list-container { flex: 1; overflow-y: auto; padding: 15px; background: #FAF8F1; }
.badge-item {
    display: flex; align-items: center; gap: 15px; background: #fff; padding: 12px; margin-bottom: 10px;
    border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); opacity: 0.6; filter: grayscale(1); transition: all 0.3s;
}
.badge-item.unlocked { opacity: 1; filter: grayscale(0); border-left: 4px solid #4CAF50; }
.badge-icon { font-size: 2rem; }
.badge-info h4 { margin: 0 0 4px 0; color: #3E2723; font-size: 1rem; }
.badge-info p { margin: 0; color: #666; font-size: 0.8rem; line-height: 1.2; }

.avatar-selection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-height: 300px; overflow-y: auto; padding: 10px; }
.avatar-selection-grid img { width: 100%; border-radius: 50%; cursor: pointer; border: 3px solid transparent; padding: 2px; }
.avatar-selection-grid img.active-selection { border-color: #4CAF50; background: #E8F5E9; transform: scale(1.05); }
.modal-actions { display: flex; gap: 10px; padding-top: 15px; border-top: 1px solid #eee; width: 100%; }

.panic-visual { background-color: #FFEBEE !important; color: #D32F2F !important; border: 1px solid #D32F2F !important; animation: pulse 1s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }

/* Bu kısmı CSS dosyanda güncelle */
.fly-coin {
    position: fixed;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23FFD700' stroke='%23DAA520' stroke-width='2'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' font-size='18' font-weight='bold' fill='%23B8860B'%3E%24%3C/text%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2147483647; /* En yüksek katman */
    opacity: 0; 
}
.fly-coin::after { content: '$'; color: #F57F17; font-weight: 900; font-family: sans-serif; }
.wallet-pulse { animation: wallet-bump 0.3s ease-in-out; }
@keyframes wallet-bump { 0% { transform: scale(1); } 50% { transform: scale(1.3); color: #FFD700; } 100% { transform: scale(1); } }

/* ================= GECE MODU (TEK BLOK HALİNDE) ================= */
[data-theme="dark"] {
    --bg-color: #121212; --bg-card: #1E1E1E; --bg-keyboard: #2C2C2C;
    --c-text: #E0E0E0; --c-sub: #B0BEC5; --c-accent: #90CAF9;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    --c-fail: #EF5350; --c-present: #FDD835; --c-correct: #66BB6A;

    /* BUG FIX: gece moduna göre tanımlandı (bkz. :root açıklaması) */
    --bg-panel: #1E1E1E;
    --bg-main: #2A2A2A;
    --text-main: #E0E0E0;
}

[data-theme="dark"] .mode-card, 
[data-theme="dark"] .profile-card, 
[data-theme="dark"] .score-panel, 
[data-theme="dark"] .panel-header, 
[data-theme="dark"] .sub-tabs, 
[data-theme="dark"] .chip-btn, 
[data-theme="dark"] .modal-content,
[data-theme="dark"] .profile-header-bar {
    background: var(--bg-card) !important; color: var(--c-text); border-color: #333;
}

[data-theme="dark"] .vk-key { background: #424242; color: #fff; box-shadow: 0 2px 0 #212121; }
[data-theme="dark"] .vk-key:active { background: #616161; }
[data-theme="dark"] .joker-item, [data-theme="dark"] .main-header, [data-theme="dark"] .game-header { background: #1E1E1E; border-color: #555; color: #fff; }

[data-theme="dark"] .fancy-table tbody tr { background: #252525; color: #E0E0E0; }
[data-theme="dark"] .fancy-table tbody tr td { color: #E0E0E0; }

[data-theme="dark"] h3, [data-theme="dark"] h2, [data-theme="dark"] .card-title { color: #E0E0E0 !important; }
[data-theme="dark"] .icon-btn { color: #E0E0E0; }

[data-theme="dark"] .modal-opt { background-color: #313030 !important; color: #FFFFFF !important; border: 1px solid #ffffff !important; }
[data-theme="dark"] .modal-opt.primary { background-color: var(--c-correct) !important; }
[data-theme="dark"].modal-close { background: transparent; border: 1px solid #000000; color: #ffffff; margin-top: 15px; padding: 8px 20px; border-radius: 20px; cursor: pointer; }

/* Oyun Izgarası Dark */
[data-theme="dark"] .tile { background-color: #252525 !important; border-color: #3e3e3e !important; color: #ffffff !important; }
[data-theme="dark"] .tile.correct { background-color: var(--c-correct) !important; border-color: var(--c-correct) !important; }
[data-theme="dark"] .tile.present { background-color: var(--c-present) !important; border-color: var(--c-present) !important; color: #3E2723 !important; }
[data-theme="dark"] .tile.absent { background-color: var(--c-absent) !important; border-color: var(--c-absent) !important; }
[data-theme="dark"] .tile.fail { background-color: var(--c-fail) !important; border-color: var(--c-fail) !important; color: #ffffff !important; }
[data-theme="dark"] .tile.fail {
    background-color: #E53935 !important;
    border-color: #FF8A80 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 2px 0 #9A0007;
}

#screen-end {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
#screen-end .end-btns {
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100% - 24px));
    flex: 0 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
}
#screen-end #shareScore {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 auto;
}

[data-theme="dark"] .g-stat, [data-theme="dark"] .stat-pill { background-color: #2C2C2C !important; color: #E0E0E0 !important; }
[data-theme="dark"] .stat-box { background-color: #1E1E1E !important; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
[data-theme="dark"] .stat-label, [data-theme="dark"] .xp-details { color: #aaa !important; }
[data-theme="dark"] .stat-val, [data-theme="dark"] .xp-details b { color: #FFFFFF !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.15); }
[data-theme="dark"] input { color: #fff !important; }

[data-theme="dark"] .action-btn {
    background-color: #2C2C2C !important; color: #E0E0E0 !important;
    border: 2px solid #555 !important; box-shadow: 0 4px 0 #151515 !important;
}
[data-theme="dark"] .action-btn.enter { background-color: #1B5E20 !important; border-color: #2E7D32 !important; color: #FFF !important; }
[data-theme="dark"] .joker-badge { background-color: #FF5252 !important; color: #FFFFFF !important; font-weight: 700 !important; }

/* Zaman jokeri normal oyun düzeninde yerini korur. Görünürlüğü zorlamak,
   round-loading sırasında gizlenen action bar içinden tek başına sızmasına
   neden oluyordu; görünürlük artık üst barın durumunu takip eder. */
#btnAddTime { display: flex !important; }
#progressWrap { display: none !important; }
/* ================================================= */
/* GECE MODU: ROZETLER VE LİSTE DÜZELTMESİ */
/* ================================================= */

/* Listenin arka planını koyulaştır */
[data-theme="dark"] .badges-list-container {
    background-color: #121212 !important; /* Ana koyu zemin */
}

/* Her bir rozet kartını koyulaştır */
[data-theme="dark"] .badge-item {
    background-color: #1E1E1E !important; /* Kart zemini */
    border: 1px solid #333 !important;    /* Hafif çerçeve */
    box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
}

/* Kartın içindeki Başlık (Örn: İlk Adım) */
[data-theme="dark"] .badge-info h4 {
    color: #FFFFFF !important;
}

/* Kartın içindeki Açıklama metni */
[data-theme="dark"] .badge-info p {
    color: #B0BEC5 !important; /* Okunabilir gri */
}

/* Eğer henüz kazanılmamışsa (kilitliyse) daha soluk yap */
[data-theme="dark"] .badge-item:not(.unlocked) {
    background-color: #1a1a1a !important;
    opacity: 0.5 !important;
}
/* EKLENECEK CSS KODLARI - STYLE.CSS EN ALTI */

/* 1. Loading ekranını en üste garanti alalım */
#loading-screen {
    z-index: 2147483647 !important; /* Maksimum değer */
}

/* 2. Puanlar Tablosu Gece Modu Düzeltmesi */
[data-theme="dark"] .table-container,
[data-theme="dark"] .score-panel, 
[data-theme="dark"] .panel-header, 
[data-theme="dark"] .tab-row, 
[data-theme="dark"] .sub-tabs {
    background-color: #1E1E1E !important; /* Koyu gri */
    border-color: #333 !important;
    color: #E0E0E0 !important;
}

/* Tablo satırları gece modu */
[data-theme="dark"] .fancy-table tbody tr {
    background-color: #2C2C2C !important;
    color: #FFF !important;
}

/* Tab butonları gece modu */
[data-theme="dark"] .tab-btn {
    color: #888 !important;
}
[data-theme="dark"] .tab-btn.active {
    color: #FFF !important;
    border-bottom-color: #FFF !important;
}
[data-theme="dark"] .main-title {
    background: linear-gradient(45deg, #FFF, #CCC) !important;
    -webkit-background-clip: text !important;
     background-clip: text !important; /* <-- BU EKLENDİ */
    -webkit-text-fill-color: transparent !important;
}
/* --- KLAVYE DÜZELTMELERİ (HİSSİYAT VE RENK) --- */
.vk-key {
    transition: transform 0.1s, background-color 0.2s; /* Yumuşak geçiş */
    box-shadow: 0 4px 0 rgba(0,0,0,0.2); /* Tuşun altındaki gölge (3D hissi) */
    position: relative;
    top: 0;
}

/* Tıklanınca tuşun içeri göçmesi */
.vk-key:active {
    transform: translateY(4px) !important; /* Aşağı it */
    box-shadow: 0 0 0 rgba(0,0,0,0) !important; /* Gölgeyi yok et */
}

/* Klavye Renkleri - Gece Modunu EZECEK Şekilde */
.vk-key.correct { 
    background-color: #4CAF50 !important; 
    color: white !important; 
    border-color: #4CAF50 !important;
    box-shadow: 0 4px 0 #2E7D32 !important; /* Yeşil gölge */
}
.vk-key.present { 
    background-color: #FBC02D !important; 
    color: black !important; /* Sarı üstüne siyah yazı daha okunur */
    border-color: #FBC02D !important;
    box-shadow: 0 4px 0 #F57F17 !important;
}
.vk-key.absent { 
    background-color: #3e3e3e !important; 
    color: #888 !important; 
    opacity: 0.6 !important;
    box-shadow: none !important;
}

/* --- LOADING EKRANI DÜZELTMESİ --- */
#loading-screen {
    z-index: 99999 !important;
    opacity: 1;
    transition: opacity 0.5s ease-out; /* Kaybolurken yavaşça sön */
}
#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}
/* ================= GHOST İLK HARF STİLİ ================= */

/* Genel ghost görünümü (üst grid + alt satır) */
.tile.ghost {
    opacity: 0.45;                            /* Silik dursun */
    font-weight: 600;                         /* Normalden biraz daha hafif */
    color: var(--c-text);                     /* Aynı yazı rengi */
    background: #FFFFFF;                      /* Normal kutu gibi */
    border-color: #D7CCC8;                    /* Normal kutu çerçevesi */
    box-shadow: none;                         /* Parlama olmasın */
    transform: none !important;
    text-shadow: none !important;
}

/* Yeri bilinen ve doğru yerde olan ghost (aşağıdaki satırda) */
.tile.ghost.correct {
    background: rgba(76, 175, 80, 0.14);      /* Çok hafif yeşil zemin */
    border-color: var(--c-correct);           /* Yeşil çerçeve */
    color: #2E7D32;                           /* Koyu yeşil yazı */
}

/* Dark mode için ghost */
[data-theme="dark"] .tile.ghost {
    background: #252525 !important;
    border-color: #3e3e3e !important;
    color: #E0E0E0 !important;
    opacity: 0.5 !important;
}

[data-theme="dark"] .tile.ghost.correct {
    background: rgba(102, 187, 106, 0.2) !important;
    border-color: var(--c-correct) !important;
    color: #C8E6C9 !important;
}

/* POP efekti: kullanıcı gerçekten bir harf girdiğinde */
.tile.pop {
    animation: pop 0.1s;
    border-color: var(--c-text);
    opacity: 1 !important;
    font-weight: 800 !important;  /* Artık gerçek giriş gibi kalın */
}
/* Coin Animasyonu İçin - Bunu CSS'in En Altına Koy */
.fly-coin {
    position: fixed;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23FFD700' stroke='%23DAA520' stroke-width='2'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' font-size='18' font-weight='bold' fill='%23B8860B'%3E%24%3C/text%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2147483647 !important; /* Her şeyin üstünde olsun */
    opacity: 0;
}
.header-container {
    padding-right: 20px; /* Sağ taraftan 20px boşluk bırakır */
    /* Eğer width: 100% kullanıyorsan taşmayı önlemek için şunu da ekle: */
    box-sizing: border-box; 
}
/* ============================
   NASIL OYNANIR EKRANI
   ============================ */

.rules-wrapper {
  position: relative;
  max-width: 380px;
  margin: 12px auto;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--bg-card, #ffffff);         /* 🔹 Light/Dark temaya göre değişecek */
  color: var(--c-text, #222222);               /* 🔹 Temaya göre metin rengi */
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
}
.btn-rules-back-top {
  position: sticky;
  top: 10px;
  left: 10px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.4);
  background: rgba(0,0,0,0.06);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
}

.btn-rules-back-top:hover {
  background: rgba(0,0,0,0.12);
}

/* Dark mode’da tersini yapalım: daha açık */
body[data-theme="dark"] .btn-rules-back-top {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .btn-rules-back-top:hover {
  background: rgba(255,255,255,0.14);
}

.rules-wrapper::-webkit-scrollbar {
  width: 6px;
}

.rules-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.rules-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
}


.rules-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.rules-sub {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.4;
  margin-bottom: 16px;
}

/* Renk açıklamaları */
.rules-legend {
  margin-bottom: 16px;
  border-radius: 14px;
  padding: 10px 10px 6px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.legend-tile {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.03);
}

.tile-correct {
  background: var(--c-correct, #4CAF50);
  border-color: rgba(0,0,0,0.4);
  color: #fff;
}

.tile-present {
  background: var(--c-present, #FBC02D);
  border-color: rgba(0,0,0,0.4);
  color: #3a2b00;
}

.tile-absent {
  background: var(--c-absent, #9E9E9E);
  border-color: rgba(0,0,0,0.4);
  color: #111;
}

.legend-text {
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Örnek satır */
.rules-example {
  margin-bottom: 18px;
}

.example-label {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 6px;
}

.example-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.rules-example-text {
  font-size: 0.8rem;
  opacity: 0.8;
  line-height: 1.3;
}

/* Adım adım */
.rules-steps {
  margin-bottom: 18px;
}

.rules-steps h3 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.rules-steps ol {
  padding-left: 18px;
  margin: 0;
}

.rules-steps li {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* Geri dön butonu */
.btn-rules-back {
  width: 100%;
  margin-top: 8px;
  padding: 10px 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.65);
  background: #111111;              /* 🔹 LIGHT MODE: koyu buton */
  color: #fdfaf4;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-rules-back:hover {
  background: #000000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.btn-rules-back:active {
  transform: scale(0.97);
}

/* DARK MODE: arka plan siyahken buton açık renk */
body[data-theme="dark"] .btn-rules-back {
  background: #f5f2e9;
  color: #3E2723;
  border-color: rgba(255,255,255,0.55);
}

body[data-theme="dark"] .btn-rules-back:hover {
  background: #fffaf0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}


.btn-rules-back:hover {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.btn-rules-back:active {
  transform: scale(0.97);
}
/* Ek bilgi bölümleri (Jokerler & Modlar) */
.rules-section {
  margin-bottom: 18px;
}

.rules-section h3 {
  font-size: 0.95rem;
  margin-bottom: 8px;
}

/* Joker satırları */
.rules-chip-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rules-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
}

.chip-emoji {
  font-size: 1.2rem;
  width: 26px;
  text-align: center;
}

.chip-text {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  line-height: 1.3;
}

.chip-text strong {
  font-size: 0.86rem;
}

/* Mod kartları */
.rules-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.rules-card {
  padding: 10px 10px 9px;
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 0.82rem;
  line-height: 1.35;
}

.rules-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.rules-card-title span {
  font-size: 1.1rem;
}

.rules-card-title strong {
  font-size: 0.9rem;
}

/* Biraz daha geniş ekranlarda kartları yan yana yapalım */
@media (min-width: 480px) {
  .rules-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}
body[data-theme="dark"] .rules-wrapper {
  background: var(--bg-dark, #151515);
  color: var(--txt, #f5f5f5);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

body[data-theme="dark"] .rules-legend,
body[data-theme="dark"] .rules-chip,
body[data-theme="dark"] .rules-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
/* Oyun Sonu Açıklama Yazısı (Ah be... yazısı) */
.reason-text {
    font-size: 1.1rem;
    margin-top: 12px;
    font-weight: 800;
    color: #D32F2F !important; /* Gündüz: Koyu Kırmızı (Okunur) */
    opacity: 1;
}

/* Gece Modunda Açık Renk Olsun */
[data-theme="dark"] .reason-text {
    color: #E57373 !important; /* Gece: Açık Kırmızı */
}
/* --- YENİ OYUN DÜZENİ (Referans Görsel Tarzı) --- */

/* 1. Header Düzenlemesi */
.game-header {
    justify-content: space-between;
    padding: 0 10px;
    height: 50px;
}
.game-stats-center {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
    justify-content: center;
}

/* 2. Grid (6 Satırlık Yer Tutucu) */
.game-grid {
    /* 6 satıra göre hesapla ama esnek olsun */
    max-height: 50vh; 
    /* Kutular arası boşluk */
    gap: 6px; 
}
/* Satırlar her zaman eşit yükseklikte */
.row { flex: 1; }

/* 3. Klavye (Biraz yukarı çekelim) */
.keyboard-box {
    margin-bottom: 10px;
    padding: 0 5px;
}

/* 4. BOTTOM ACTION BAR (En Önemli Kısım) */
.bottom-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    gap: 10px;
    background: transparent;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Yuvarlak Butonlar (Jokerler ve Pas) */
.round-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    transition: transform 0.1s;
    position: relative;
}
.round-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* Sol Taraftaki Joker Grubu */
.left-actions {
    display: flex;
    gap: 8px;
}
.joker-btn {
    background-color: #FFB74D; /* Turuncu tonu */
    color: white;
}
.joker-btn .price-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #3E2723;
    color: #fff;
    font-size: 9px;
    padding: 2px 4px;
    border-radius: 6px;
    font-weight: bold;
}

/* Orta Büyük Submit Butonu */
.big-submit-btn {
    flex: 1; /* Kalan boşluğu doldur */
    height: 50px;
    background-color: #64B5F6; /* Mavi tonu */
    color: white;
    border: none;
    border-radius: 25px; /* Tam oval */
    font-size: 1.1rem;
    font-weight: 900;
    box-shadow: 0 5px 0 #1976D2;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.big-submit-btn:active {
    transform: translateY(5px);
    box-shadow: none;
}

/* Sağdaki Pas Butonu */
.pass-btn {
    background-color: #4DB6AC; /* Teal tonu */
    color: white;
}

/* 5. REKLAM ALANI */
.ad-banner {
    height: 80px; /* Standart banner yüksekliği */
    width: 100%;
    background-color: transparent;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    flex-shrink: 0; /* Asla küçülmesin */
    margin-top: auto; /* En alta it */
}

/* Küçük ekran düzeltmesi */
@media (max-height: 650px) {
    .game-grid { max-height: 40vh; }
    .round-btn { width: 40px; height: 40px; font-size: 1rem; }
    .big-submit-btn { height: 42px; font-size: 1rem; }
    .ad-banner { height: 40px; }
}
/* --- DÜZELTMELER: JOKER BOYUTU VE MESAJ GİZLEME --- */

/* 1. Mesaj Alanını Tamamen Yok Et */
#msg {
    display: none !important; /* Görünmez yapar ve yer kaplamaz */
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

/* 2. Joker Butonlarını Küçült ve Kibarlaştır */
.bottom-action-bar {
    padding: 5px 15px; /* Üst/alt boşluğu biraz kıstık */
    gap: 8px;
}

.left-actions {
    gap: 6px; /* Jokerler arası boşluk */
}

.round-btn {
    width: 40px !important;  /* Çapı 48px'ten 40px'e düşürdük */
    height: 40px !important;
    font-size: 1.1rem !important; /* İkonu da hafif küçülttük */
    border-radius: 50%;
    flex-shrink: 0; /* Asla sıkışmasınlar */
}

/* Jokerlerdeki Fiyat Etiketini Ayarla */
.joker-btn .price-badge {
    font-size: 8px !important;
    padding: 1px 3px !important;
    bottom: -4px !important;
    right: -4px !important;
    border-radius: 4px !important;
}

/* Gönder Butonu Ayarı (Daha orantılı olsun) */
.big-submit-btn {
    height: 44px !important; /* Jokerlerle uyumlu yükseklik */
    font-size: 1rem !important;
    border-radius: 22px !important;
}

/* Pas Butonu (Kapsül şeklinde kalsın istiyorsan) */
.pass-btn {
    width: auto !important; /* Yuvarlak değil geniş olsun */
    padding: 0 15px !important;
    height: 40px !important;
    border-radius: 20px !important; /* Kapsül şekli */
    font-size: 0.9rem !important;
    font-weight: bold;
    display: flex;
    gap: 5px;
}
/* --- KÜÇÜK EKRANLAR İÇİN ACTION BAR DÜZENLEMESİ --- */

.bottom-action-bar {
    display: flex;
    flex-wrap: nowrap; /* Asla alt satıra inme */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom)) 8px; /* Safari toolbar/home indicator kontrolleri kapatmasın */
    gap: 0; /* Elemanlar arası boşluğu manuel yöneteceğiz */
    box-sizing: border-box;
    flex-shrink: 0; /* Dar ekranlarda sıkışıp tıklama alanı küçülmesin */
}

/* 1. SOL GRUP (Jokerler) */
.left-actions {
    display: flex;
    gap: 4px; /* Jokerler birbirine yakınlaşsın */
    flex: 0 0 auto; /* Genişliği içeriği kadar olsun, büzüşmesin */
    margin-right: 5px;
}

/* 2. ORTA GRUP (Gönder Butonu) */
#enterBtn.big-submit-btn {
    flex: 1; /* Kalan tüm boşluğu bu doldursun (Ortalar) */
    width: auto; /* Sabit genişlik iptal */
    min-width: 80px; /* Çok da küçülmesin */
    margin: 0 5px; /* Sağdan soldan hafif boşluk */
    white-space: nowrap; /* Yazı taşmasın */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. SAĞ GRUP (Pas Butonu) */
#passBtn.pass-btn {
    flex: 0 0 auto; /* İçeriği kadar yer kaplasın */
    margin-left: 5px;
    white-space: nowrap;
}

/* --- TELEFONLARA ÖZEL HASSAS AYAR (Responsive) --- */
@media (max-width: 380px) {
    /* Çok küçük ekranlarda (iPhone SE, S8 vb.) */
    
    /* Joker butonlarını biraz daha ufalt */
    .round-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }
    
    /* Pas butonu içindeki yazıyı küçült */
    .pass-btn {
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 0.8rem !important;
    }
    
    /* Gönder butonu yazı boyutu ve yüksekliği */
    #enterBtn.big-submit-btn {
        height: 40px !important;
        font-size: 0.95rem !important;
    }
    
    /* Joker fiyat etiketlerini mikroskopik yap */
    .joker-btn .price-badge {
        font-size: 8px !important;
        padding: 1px 2px !important;
        right: -2px !important;
    }
}
/* --- YENİ EKLENTİLER --- */

/* 1. Oyun İçi Cüzdan Stili */
.g-stat.wallet {
    background: #FFF8E1; /* Altın sarısımsı zemin */
    color: #F57F17;      /* Koyu turuncu yazı */
    border: 1px solid #FFE082;
    min-width: auto;     /* İçeriğe göre uzasın */
    padding: 4px 12px;
}

/* Gece Modunda Cüzdan */
[data-theme="dark"] .g-stat.wallet {
    background: #3E2723 !important;
    color: #FFD700 !important;
    border-color: #5D4037 !important;
}

/* 2. HARCAMA ANİMASYONU (Floating Text) - OKUNABİLİRLİK */
.floating-cost {
    position: fixed;
    font-size: 1.5rem;       /* Yazıyı büyüttük */
    font-weight: 900;        /* Kalınlaştırdık */
    color: #D32F2F;          /* Parlak Kırmızı */
    text-shadow: 
        -1px -1px 0 #fff,  
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;      /* Beyaz dış kontur (Outline) sayesinde her zeminde okunur */
    pointer-events: none;
    z-index: 99999;
    animation: floatDownFade 1s forwards; /* Aşağı doğru süzülme */
}

/* Aşağı doğru düşüp kaybolma animasyonu */
@keyframes floatDownFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 50px) scale(0.8); /* 50px aşağı iner */
    }
}

/* Gece Modunda Outline Siyah Olsun (Göz almasın) */
[data-theme="dark"] .floating-cost {
    color: #FF5252;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* Pasif harfler (Q, W, X) için stil */
.vk-key.passive-key {
    opacity: 0.25 !important;
    background-color: rgba(0,0,0,0.1) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Gece modu için uyumluluk */
[data-theme="dark"] .vk-key.passive-key {
    background-color: rgba(255,255,255,0.05) !important;
}
/* --- GECE MODU: MODAL BUTON RENKLERİ --- */

/* Çıkış Onay Modalı (Exit Confirm Backdrop) */
[data-theme="dark"] #btn-exit-yes {
    background-color: #c62828 !important; /* Koyu Kırmızı - Evet/Çıkış */
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(198, 40, 40, 0.4);
}

[data-theme="dark"] #btn-exit-no {
    background-color: #2E7D32 !important; /* Koyu Yeşil - Hayır/İptal */
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.4);
}

/* Diğer Onay Modalları (Custom Confirm Modal - Yeni yaptığımız) */
[data-theme="dark"] #custom-confirm-modal #btn-confirm-yes {
    background-color: #2E7D32 !important; /* Koyu Yeşil - Başlat/Onayla */
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.4);
}

[data-theme="dark"] #custom-confirm-modal #btn-confirm-no {
    background-color: #424242 !important; /* Koyu Gri - İptal */
    color: #e0e0e0 !important;
}
/* --- GECE MODU TAB DÜZELTMESİ --- */

/* Tab Butonları (Puanlarım, Global Skorlar vb.) */
[data-theme="dark"] .tab-btn {
    color: #888; /* Pasifken gri olsun */
    background: transparent;
}

/* Seçili Olan Tab (Aktif) */
[data-theme="dark"] .tab-btn.active {
    color: #fff !important; /* Seçiliyken BEYAZ olsun */
    border-bottom: 2px solid #4CAF50; /* Altında yeşil çizgi */
    background: rgba(255, 255, 255, 0.05); /* Hafif bir arka plan */
}

/* Alt Seçenekler (4 Harf, 5 Harf, Kolay, Zor vb. - Chip Butonlar) */
[data-theme="dark"] .chip-btn {
    background-color: #333;
    color: #ccc;
    border: 1px solid #444;
}

[data-theme="dark"] .chip-btn.active {
    background-color: #ffffff !important; /* Seçiliyken Yeşil */
    color: #000000 !important;
    border-color: #ffffff !important;
}
.round-btn.pass-paid {
    background-color: #FFB300; /* Pas butonu rengi */
    color: white;
    border: none;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.round-btn.pass-paid:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* Küçük butonun üzerindeki fiyat etiketi (Siyah/Kahverengi kutucuk) */
.round-btn .price-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #3E2723; /* Soldaki ikonlarla aynı koyu arka plan */
    color: #fff;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 6px;
    font-weight: bold;
    border: 2px solid #fff; /* Etrafında beyaz kontur olsun */
    line-height: 1;
    z-index: 10;
}

/* Gece modu uyumu */
[data-theme="dark"] .round-btn .price-badge {
    border-color: #333; /* Gece modunda kontur koyu olsun */
}
/* Ayarlar Kartı */
.settings-card {
    background: var(--bg-panel, #fff);
    padding: 25px;
    border-radius: 20px;
    width: 90%;
    max-width: 360px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Menü Öğeleri */
.settings-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%; /* Kutunun tamamını kaplasın */
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* İkonu sola, Oku sağa iter */
    width: 100%; /* Buton genişliği ful olsun */
    
    /* Görsel Makyaj */
    background: var(--bg-main, #f9f9f9);
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-main, #333);
    transition: all 0.2s;
    font-family: inherit; /* Fontun bozulmaması için */
}

.menu-item:active {
    transform: scale(0.98);
    background: #e8e8e8;
}
.menu-item .icon {
    font-size: 1.3rem;
    width: 30px;        /* İkonların genişliği sabit olsun ki hizalar kaymasın */
    text-align: center;
}

.menu-item .text {
    flex: 1;            /* KRİTİK NOKTA: Kalan tüm boşluğu yazı kaplasın */
    text-align: left;   /* Yazıyı sola yasla */
    padding-left: 15px; /* İkonla yazı arasına boşluk */
    font-weight: 600;
}

.menu-item .arrow {
    font-size: 1.4rem;
    color: #bbb;
    font-weight: bold;
}

/* ==========================================================================
   Splash sonrası karşılama + ana menü görsel yenilemesi
   ========================================================================== */
.account-entry-screen {
    align-items: stretch;
    padding:
        max(18px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
    background:
        radial-gradient(circle at 50% 8%, rgba(251, 192, 45, .14), transparent 34%),
        linear-gradient(180deg, #FFF8E1 0%, #FAF8F1 38%, #FAF8F1 100%);
    overflow: hidden auto;
}
.account-entry-card {
    position: relative;
    z-index: 2;
    width: min(100%, 410px);
    min-height: 100%;
    margin: auto;
    padding: clamp(24px, 7dvh, 62px) 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}
.account-entry-brand {
    animation: entry-rise .42s ease both;
}
.account-entry-logo {
    width: clamp(142px, 48vw, 210px);
    height: clamp(74px, 15dvh, 112px);
    margin: 0 auto 2px;
    object-fit: contain;
}
.account-entry-slogan {
    margin: 0;
    color: #8D6E63;
    font-size: clamp(.79rem, 3.2vw, .9rem);
    font-weight: 750;
    letter-spacing: .01em;
}
.account-entry-copy {
    margin: clamp(18px, 3.5dvh, 30px) 0 20px;
    animation: entry-rise .42s .07s ease both;
}
.account-entry-card .account-entry-copy h1 {
    margin: 0 0 8px;
    color: #3E2723;
    font-size: clamp(1.65rem, 7vw, 2rem);
    line-height: 1.15;
}
.account-entry-card .account-entry-copy p {
    margin: 0;
    color: #6D4C41;
    font-size: clamp(.88rem, 3.6vw, .98rem);
    line-height: 1.55;
}
.account-provider-list {
    gap: 11px;
}
.account-provider-btn {
    grid-template-columns: 26px 1fr 22px;
    min-height: 54px;
    padding: 10px 16px;
    gap: 12px;
    border-color: #D7CCC8;
    border-radius: 17px;
    color: #3E2723;
    font-size: .96rem;
    font-weight: 780;
    text-align: center;
    box-shadow: 0 5px 16px rgba(62, 39, 35, .055);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.account-provider-btn:nth-child(1) { animation: entry-rise .4s .14s ease both; }
.account-provider-btn:nth-child(2) { animation: entry-rise .4s .21s ease both; }
.account-provider-btn:hover {
    border-color: #BCAAA4;
    box-shadow: 0 7px 19px rgba(62, 39, 35, .1);
}
.account-provider-btn:active { transform: scale(.985); }
.account-provider-btn:focus-visible,
.continue-guest-btn:focus-visible,
.main-header button:focus-visible,
.mode-card:focus-visible,
.stats-btn:focus-visible,
.text-btn:focus-visible,
.account-entry-legal a:focus-visible {
    outline: 3px solid rgba(245, 127, 23, .42);
    outline-offset: 2px;
}
.provider-icon {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}
.provider-chevron {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #8D6E63;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.account-entry-divider {
    margin: 17px 0 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #8D6E63;
    font-size: .78rem;
    animation: entry-rise .4s .27s ease both;
}
.account-entry-divider::before,
.account-entry-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #D7CCC8;
}
.continue-guest-btn {
    min-height: 48px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    color: #6D4C41;
    text-decoration: none;
    animation: entry-rise .4s .33s ease both;
    transition: color .15s ease, background .15s ease;
}
.continue-guest-btn:hover,
.continue-guest-btn:active {
    color: #3E2723;
    background: rgba(141, 110, 99, .07);
}
.guest-outline-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}
.account-entry-legal {
    margin: auto 0 0;
    padding-top: clamp(18px, 4dvh, 32px);
    color: #8D6E63;
    font-size: .72rem;
    line-height: 1.55;
    animation: entry-rise .4s .39s ease both;
}
.account-entry-legal a {
    color: #6D4C41;
    font-weight: 750;
    text-underline-offset: 2px;
}
.entry-letter-field {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.entry-letter-field span {
    position: absolute;
    width: clamp(42px, 13vw, 58px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(141, 110, 99, .15);
    border-radius: 13px;
    background: rgba(255, 255, 255, .34);
    color: rgba(109, 76, 65, .13);
    font-size: 1.25rem;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(62, 39, 35, .025);
    animation: entry-tile-float 9s ease-in-out infinite alternate;
}
.entry-letter-field span:nth-child(1) { top: 5%; left: -13px; transform: rotate(-13deg); --tile-rot: -13deg; }
.entry-letter-field span:nth-child(2) { top: 13%; right: -18px; transform: rotate(10deg); --tile-rot: 10deg; animation-delay: -2s; }
.entry-letter-field span:nth-child(3) { top: 40%; left: -30px; transform: rotate(8deg); --tile-rot: 8deg; animation-delay: -4s; }
.entry-letter-field span:nth-child(4) { top: 48%; right: -31px; transform: rotate(-11deg); --tile-rot: -11deg; animation-delay: -6s; }
.entry-letter-field span:nth-child(5) { bottom: 17%; left: -18px; transform: rotate(13deg); --tile-rot: 13deg; animation-delay: -3s; }
.entry-letter-field span:nth-child(6) { bottom: 7%; right: -13px; transform: rotate(-8deg); --tile-rot: -8deg; animation-delay: -5s; }
.entry-letter-field span:nth-child(7) { bottom: -22px; left: 24%; transform: rotate(6deg); --tile-rot: 6deg; animation-delay: -7s; }

/* Header işlevleri aynı; yalnız daha dengeli, erişilebilir yüzey. */
.main-header {
    height: calc(62px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(141, 110, 99, .1);
    box-shadow: 0 3px 14px rgba(62, 39, 35, .065);
}
.header-left,
.icon-btn {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
}
.header-left {
    padding: 5px;
    cursor: pointer;
}
.header-left .home-logo { height: 36px; }
.header-right { gap: 4px; }
.icon-btn { padding: 9px; }
.stat-pill {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(141, 110, 99, .1);
    background: #FFF9EE;
}
.home-center {
    position: relative;
    justify-content: flex-start;
    padding: clamp(10px, 2.1dvh, 18px) clamp(18px, 5vw, 24px) max(14px, env(safe-area-inset-bottom));
    gap: clamp(8px, 1.35dvh, 12px);
}
.home-hero {
    width: 100%;
    max-width: 360px;
    padding: 0 4px clamp(4px, .8dvh, 8px);
    text-align: center;
    animation: home-rise .35s ease both;
}
.home-hero h1 {
    margin: 1px 0 3px;
    color: #3E2723;
    font-size: clamp(1.22rem, 5.2vw, 1.55rem);
    line-height: 1.2;
}
.home-hero p {
    margin: 0;
    color: #6D4C41;
    font-size: clamp(.78rem, 3.25vw, .88rem);
}
.menu-grid {
    max-width: 380px;
    gap: clamp(8px, 1.25dvh, 11px);
}
.mode-card {
    width: 100%;
    min-height: clamp(72px, 10.5dvh, 84px);
    padding: 10px 14px;
    border: 1px solid rgba(141, 110, 99, .14);
    border-radius: 17px;
    box-shadow: 0 5px 15px rgba(62, 39, 35, .065);
    font-family: inherit;
    text-align: left;
}
.mode-card:nth-child(1) { animation: home-rise .35s .04s ease both; }
.mode-card:nth-child(2) { animation: home-rise .35s .09s ease both; }
.mode-card:nth-child(3) { animation: home-rise .35s .14s ease both; }
.mode-card:nth-child(4) { animation: home-rise .35s .19s ease both; }
.mode-card:hover {
    border-color: rgba(141, 110, 99, .28);
    box-shadow: 0 7px 18px rgba(62, 39, 35, .095);
}
.mode-card:active { transform: scale(.985); }
.daily-card {
    border-color: rgba(251, 192, 45, .35);
    background: #FFF8E1;
}
.icon-circle {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}
.card-info { min-width: 0; flex: 1; }
.card-title { font-size: 1.03rem; }
.card-sub { font-size: .8rem; }
.mode-chevron {
    margin-left: auto;
    color: #8D6E63;
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1;
}
.stats-row {
    max-width: 380px;
    animation: home-rise .35s .24s ease both;
}
.stats-btn {
    min-height: 48px;
    border: 1px solid rgba(141, 110, 99, .13);
    box-shadow: 0 4px 13px rgba(62, 39, 35, .06);
}
.text-btn {
    min-height: 44px;
    padding: 8px 14px;
    text-underline-offset: 3px;
    animation: home-rise .35s .29s ease both;
}

[data-theme="dark"] .account-entry-screen {
    background:
        radial-gradient(circle at 50% 8%, rgba(251, 192, 45, .08), transparent 34%),
        #121212;
}
[data-theme="dark"] .account-entry-card {
    background: transparent;
}
[data-theme="dark"] .account-entry-card .account-entry-copy h1,
[data-theme="dark"] .home-hero h1 { color: #E0E0E0; }
[data-theme="dark"] .account-entry-card .account-entry-copy p,
[data-theme="dark"] .account-entry-slogan,
[data-theme="dark"] .account-entry-legal,
[data-theme="dark"] .home-hero p { color: #B0BEC5; }
[data-theme="dark"] .account-entry-legal a { color: #E0E0E0; }
[data-theme="dark"] .account-provider-btn {
    border-color: #4A4A4A;
    background: #2A2A2A;
    color: #E0E0E0;
}
[data-theme="dark"] .account-entry-divider::before,
[data-theme="dark"] .account-entry-divider::after { background: #4A4A4A; }
[data-theme="dark"] .entry-letter-field span {
    border-color: rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.08);
}
[data-theme="dark"] .stat-pill,
[data-theme="dark"] .daily-card { background: #2A2A2A; }

@keyframes entry-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes home-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes entry-tile-float {
    /* margin-top yerine transform: translateY() — reflow/layout thrash
       yaratmadan aynı 8px'lik dikey hareket mesafesini korur. rotate(var(--tile-rot))
       her karo için nth-child kuralındaki statik döndürmeyle birleştirilir,
       böylece animasyon o dönüşü ezmez. */
    from { transform: rotate(var(--tile-rot, 0deg)) translateY(-3px); }
    to { transform: rotate(var(--tile-rot, 0deg)) translateY(5px); }
}

@media (max-height: 680px) {
    .account-entry-card { padding-top: 12px; }
    .account-entry-logo { height: 68px; }
    .account-entry-copy { margin: 10px 0 13px; }
    .account-provider-btn { min-height: 50px; }
    .account-entry-divider { margin-top: 10px; }
    .account-entry-legal { padding-top: 10px; }
    .mode-card { min-height: 67px; }
    .icon-circle { width: 40px; height: 40px; }
}
@media (max-width: 340px) {
    .account-entry-screen { padding-left: 15px; padding-right: 15px; }
    .account-entry-logo { width: 136px; }
    .account-provider-btn { min-height: 52px; padding: 9px 13px; }
    .home-center { padding-left: 12px; padding-right: 12px; }
    .main-header { padding-left: 3px; padding-right: 3px; }
    .header-right { gap: 1px; }
    .stat-pill { padding-inline: 6px; font-size: .72rem; }
}
@media (min-width: 700px) {
    .account-entry-screen,
    #screen-home { background-color: #ECEFF5; }
    .account-entry-card,
    #screen-home {
        width: min(100%, 460px);
        margin-inline: auto;
    }
    #screen-home {
        box-shadow: 0 0 38px rgba(62,39,35,.12);
    }
}

/* ==========================================================================
   Ana menü — mockup oranlarına yaklaştırılmış marka ve kart hiyerarşisi
   ========================================================================== */
#screen-home {
    background:
        radial-gradient(circle at 15% 22%, rgba(251, 192, 45, .09), transparent 24%),
        linear-gradient(180deg, #FFFDF7 0%, #FAF8F1 56%, #FFF8E1 100%);
}
#screen-home .home-center {
    position: relative;
    isolation: isolate;
    justify-content: flex-start;
    padding: clamp(14px, 2.2dvh, 22px) clamp(18px, 5.2vw, 24px) max(16px, env(safe-area-inset-bottom));
    gap: clamp(10px, 1.35dvh, 13px);
}
/* Tablet/geniş ekran (aynı eşik zaten yukarıda #screen-home'u 460px'e
   sabitleyip ortalamak için kullanılıyor, satır ~2812): telefon
   genişliklerinde üstte hizalı (flex-start) kalan menü, tablet boy
   oranında (9:16, telefona göre çok daha "kare") ekranın büyük kısmını
   boş bırakıyordu çünkü dikeyde hiç ortalanmıyordu. Sadece bu genişlikte
   dikey ortalamayı geri açıyoruz; telefon davranışı (flex-start, yukarıdaki
   kural) değişmedi. */
@media (min-width: 700px) {
    #screen-home .home-center { justify-content: center; }
}
.home-decoration {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.home-deco-tile {
    position: absolute;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(141, 110, 99, .1);
    border-radius: 13px;
    background: rgba(255, 255, 255, .22);
    color: rgba(141, 110, 99, .12);
    font-size: 1.15rem;
    font-weight: 900;
}
.home-deco-tile.tile-a { top: 7%; left: -25px; transform: rotate(-13deg); }
.home-deco-tile.tile-r { top: 18%; right: -27px; transform: rotate(12deg); }
.home-deco-star {
    position: absolute;
    color: rgba(245, 127, 23, .24);
    font-size: 14px;
}
.home-deco-star.star-one { top: 28%; left: 8%; }
.home-deco-star.star-two { top: 11%; right: 17%; font-size: 10px; }
.home-deco-path {
    position: absolute;
    top: 14%;
    right: 2%;
    width: 94px;
    fill: none;
    stroke: rgba(141, 110, 99, .12);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 3 5;
}
#screen-home .home-hero {
    max-width: 390px;
    padding: clamp(8px, 1.6dvh, 16px) 6px clamp(6px, 1dvh, 10px);
}
#screen-home .home-hero h1 {
    margin: 0 0 5px;
    font-size: clamp(1.18rem, 5.1vw, 1.48rem);
    font-weight: 850;
    letter-spacing: -.018em;
}
#screen-home .home-hero p {
    font-size: clamp(.8rem, 3.4vw, .92rem);
    line-height: 1.35;
}
#screen-home .menu-grid {
    max-width: 390px;
    gap: clamp(10px, 1.35dvh, 12px);
}
#screen-home .mode-card {
    min-height: clamp(84px, 10.6dvh, 92px);
    padding: 11px 15px 11px 13px;
    gap: 14px;
    border: 1px solid rgba(141, 110, 99, .15);
    border-radius: 19px;
    background: rgba(255, 255, 255, .94);
    box-shadow:
        0 8px 22px rgba(62, 39, 35, .075),
        0 2px 5px rgba(62, 39, 35, .045);
}
#screen-home .mode-card:hover {
    border-color: rgba(141, 110, 99, .3);
    box-shadow:
        0 10px 25px rgba(62, 39, 35, .11),
        0 3px 6px rgba(62, 39, 35, .05);
}
#screen-home .mode-card .icon-circle {
    width: clamp(60px, 16vw, 68px);
    height: clamp(60px, 16vw, 68px);
    flex: 0 0 auto;
    border-radius: 18px;
    font-size: clamp(1.7rem, 7vw, 2.05rem);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
#screen-home .classic-bg {
    background: linear-gradient(145deg, #EAF6E8, #FFF8E1);
}
#screen-home .marathon-bg {
    background: linear-gradient(145deg, #E3F2FD, #EDF6FA);
}
#screen-home .daily-bg {
    background: linear-gradient(145deg, #FFF3C4, #FFE7A1);
}
#screen-home .free-bg {
    background: linear-gradient(145deg, #EFEBF4, #E9E4EC);
}
#screen-home .card-title {
    color: #3E2723;
    font-size: clamp(1.05rem, 4.3vw, 1.2rem);
    font-weight: 900;
    line-height: 1.15;
}
#screen-home .card-sub {
    margin-top: 5px;
    color: #6D4C41;
    font-size: clamp(.79rem, 3.25vw, .9rem);
    line-height: 1.25;
}
#screen-home .mode-chevron {
    align-self: center;
    color: #8D6E63;
    font-size: 1.85rem;
}
#screen-home .daily-card {
    position: relative;
    border-color: rgba(245, 127, 23, .28);
    background: linear-gradient(100deg, #FFF8E1, #FFF3E0);
    box-shadow:
        0 9px 23px rgba(245, 127, 23, .1),
        0 2px 5px rgba(62, 39, 35, .045);
}
.home-daily-badge {
    position: absolute;
    top: 10px;
    right: 40px;
    padding: 4px 8px;
    border: 1px solid rgba(245, 127, 23, .2);
    border-radius: 999px;
    background: #FBC02D;
    color: #5D4037;
    font-size: .61rem;
    font-weight: 950;
    letter-spacing: .06em;
}
#screen-home .stats-row {
    max-width: 390px;
    gap: 11px;
}
#screen-home .stats-btn {
    min-height: 54px;
    padding: 10px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(141, 110, 99, .14);
    border-radius: 17px;
    background: rgba(255, 255, 255, .94);
    color: #6D4C41;
    box-shadow: 0 6px 17px rgba(62, 39, 35, .07);
    font-size: clamp(.78rem, 3.2vw, .9rem);
}
#screen-home .stats-btn span {
    font-size: 1.15rem;
}
#screen-home .text-btn {
    color: #6D4C41;
    font-weight: 700;
}
#screen-home .main-header .stat-pill {
    min-height: 32px;
    padding-inline: 10px;
    font-size: .82rem;
    box-shadow: inset 0 0 0 1px rgba(251, 192, 45, .1);
}

[data-theme="dark"] #screen-home {
    background:
        radial-gradient(circle at 15% 22%, rgba(251, 192, 45, .045), transparent 24%),
        #121212;
}
[data-theme="dark"] #screen-home .mode-card,
[data-theme="dark"] #screen-home .stats-btn {
    border-color: rgba(255,255,255,.09);
    background: #1E1E1E;
}
[data-theme="dark"] #screen-home .daily-card {
    border-color: rgba(251,192,45,.28);
    background: linear-gradient(100deg, #29251C, #27211B);
}
[data-theme="dark"] #screen-home .card-title { color: #E0E0E0; }
[data-theme="dark"] #screen-home .card-sub,
[data-theme="dark"] #screen-home .stats-btn { color: #B0BEC5; }
[data-theme="dark"] .home-deco-tile {
    border-color: rgba(255,255,255,.05);
    background: rgba(255,255,255,.015);
    color: rgba(255,255,255,.055);
}

@media (max-height: 690px) {
    #screen-home .home-center {
        padding-top: 7px;
        gap: 7px;
    }
    #screen-home .home-hero {
        padding-bottom: 2px;
    }
    #screen-home .home-hero h1 { font-size: 1.05rem; margin-bottom: 2px; }
    #screen-home .home-hero p { font-size: .73rem; }
    #screen-home .menu-grid { gap: 7px; }
    #screen-home .mode-card {
        min-height: 65px;
        padding-block: 7px;
    }
    #screen-home .mode-card .icon-circle {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 1.45rem;
    }
    #screen-home .card-title { font-size: .96rem; }
    #screen-home .card-sub { margin-top: 2px; font-size: .72rem; }
    #screen-home .stats-btn { min-height: 44px; }
    #screen-home .text-btn { min-height: 36px; padding-block: 4px; }
    .home-daily-badge { top: 7px; padding: 3px 6px; }
}
@media (max-width: 340px) {
    #screen-home .home-center { padding-inline: 12px; }
    #screen-home .mode-card { gap: 10px; padding-inline: 10px; }
    #screen-home .mode-card .icon-circle {
        width: 52px;
        height: 52px;
    }
    #screen-home .stats-row { gap: 7px; }
    #screen-home .stats-btn { gap: 5px; padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-decoration * { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .account-entry-brand,
    .account-entry-copy,
    .account-provider-btn,
    .account-entry-divider,
    .continue-guest-btn,
    .account-entry-legal,
    .entry-letter-field span,
    .home-hero,
    .mode-card,
    .stats-row,
    .text-btn {
        animation: none !important;
        transition: none !important;
    }
}

.play-store-state {
    padding: 22px 12px;
    border: 1px dashed rgba(141, 110, 99, 0.28);
    border-radius: 12px;
    color: var(--c-sub);
    font-size: 0.88rem;
    line-height: 1.45;
    text-align: center;
}
.play-coin-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 13px 14px;
    border: 1px solid rgba(141, 110, 99, 0.18);
    border-radius: 12px;
    background: var(--bg-card);
}
.play-coin-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.play-coin-copy strong {
    color: var(--c-text);
    font-size: 1rem;
}
.play-coin-copy span {
    color: var(--c-sub);
    font-size: 0.82rem;
    font-weight: 700;
}
.play-purchase-btn {
    min-width: 94px;
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: #4CAF50;
    color: #fff;
    font-weight: 800;
    touch-action: manipulation;
}
.play-purchase-btn:disabled {
    opacity: 0.62;
}
/* Uzun Metinler İçin Kaydırma Kutusu */
.scroll-box {
    max-height: 250px;       /* Yükseklik sınırı */
    overflow-y: auto;        /* Dikey kaydırma */
    text-align: left;        /* Sola yasla */
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
}

/* Gece Modu Desteği */
[data-theme="dark"] .settings-card { background: #222; color: #fff; }
[data-theme="dark"] .menu-item { background: #333; border-color: #444; color: #eee; }
[data-theme="dark"] .scroll-box { background: #333; border-color: #444; color: #ccc; }
/* 1. Header'ı Tek Satıra Sabitleme */
#info-bar, .header-bar {
    display: flex !important;
    flex-wrap: nowrap !important; /* Asla alt satıra geçme */
    align-items: center;
    justify-content: space-between;
    white-space: nowrap; /* Metinlerin kaymasını engelle */
    overflow-x: auto; /* Çok daralırsa kaydırılabilir olsun ama patlamasın */
    overflow-y: hidden;
    padding: 10px 5px;
    gap: 5px;
}

/* Küçük ekranlarda badge içindeki yazıları biraz küçült */
@media (max-width: 380px) {
    .stat-badge {
        font-size: 0.85rem !important;
        padding: 4px 8px !important;
    }
}

/* 2. Joker Butonlarının Eşit Görünmesi (Disabled Durumu) */
/* Tüm joker butonlarını hedefliyoruz */
#info-left-group button:disabled,
.joker-btn:disabled,
#btnAddTime:disabled,
#btnHint:disabled,
#btnLife:disabled {
    opacity: 0.5 !important;
    filter: grayscale(100%) !important;
    background-color: rgba(255, 255, 255, 0.1) !important; /* Hepsine aynı şeffaf zemin */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Hepsine aynı silik çerçeve */
    color: #aaa !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}

/* Aktif halleri için de standart (Zaten varsa gerek yok ama garanti olsun) */
#info-left-group button, .joker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Yuvarlak butonlar için */
    border-radius: 50%; 
    width: 45px;
    height: 45px;
    padding: 0;
}
/* --- 1. HEADER (Üst Bilgi Çubuğu) SABİTLEME --- */
#info-bar, .header-bar {
    display: flex !important;
    flex-wrap: nowrap !important; /* Asla alt satıra inme */
    align-items: center;
    justify-content: space-between;
    white-space: nowrap !important; /* Yazıların kaymasını engelle */
    overflow: hidden; /* Taşarsa gizle (veya overflow-x: auto ile kaydırılabilir yap) */
    width: 100%;
    box-sizing: border-box;
    padding: 10px 5px;
}

/* Mobilde yazı boyutunu biraz küçültüp sığmasını garantile */
@media (max-width: 380px) {
    #info-bar span, .stat-badge {
        font-size: 0.8rem !important;
        padding: 4px 6px !important;
    }
}
/* --- 1. PROFİL EKRANI KAYDIRMAYI KAPAT --- */
#screen-profile {
    overflow: hidden !important; /* Kaydırmayı engelle */
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

.profile-content {
    /* İçerik ortalansın ve sığsın */
    justify-content: flex-start;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* --- 2. AYARLAR İÇİN TOGGLE SWITCH (Aç/Kapa Butonu) --- */
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-main, #f9f9f9);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-main, #333);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider { background-color: #4CAF50; }
input:checked + .slider:before { transform: translateX(22px); }

/* Gece Modu Uyumu */
[data-theme="dark"] .setting-row { background: #333; border-color: #444; color: #eee; }
/* --- HEADER HİZALAMA DÜZELTMESİ --- */

/* 1. Header'ın kendisini dikeyde ortala */
.game-header {
    display: flex;
    align-items: center; /* Dikey ortalama — çentik payı yüksekliğe eklenince içerik bu sayede ortalanıp altına düşer */
    height: calc(50px + env(safe-area-inset-top)); /* Header yüksekliğini sabitle + çentik payı */
    box-sizing: border-box;
    overflow: hidden; /* Dışarı taşanları gizle */
}

/* 2. Ortadaki istatistik grubunu hizala */
.game-stats-center {
    display: flex;
    align-items: center; /* Kutuları dikeyde ortala */
    justify-content: center;
    gap: 8px;
    height: 100%;
}

/* 3. Tüm kutucukları (Altın, Süre, Puan, Can) eşitle */
/* 3. Tüm kutucukları (Altın, Süre, Puan, Can) eşitle */
.g-stat {
    display: flex;
    align-items: center;
    justify-content: center; /* İçerik kısa olsa bile ortada dursun */
    height: 32px !important;
    
    /* --- DEĞİŞİKLİK BURADA BAŞLIYOR --- */
    min-width: 75px; /* Sayı artsa da kutu hep en az bu genişlikte kalsın */
    /* ---------------------------------- */
    
    padding: 0 8px !important; /* Padding'i biraz kıstım çünkü width verdik */
    border-radius: 16px;
    font-size: 0.85rem !important;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0; 
    box-sizing: border-box;
    text-align: center; /* Yazıyı ortala */
}

/* OPSİYONEL: Sadece 'Can' kutusu (kalp) sayı artmayacağı için daha dar olabilir */
.g-stat:last-child {
    min-width: 50px; 
}

/* 4. Cüzdan kutusu için özel ayar (Rengi kalsın ama boyutu uysun) */
.g-stat.wallet {
    min-width: auto; /* Gereksiz genişlemeyi önle */
    /* Diğer g-stat ayarları zaten yukarıdan miras alacak */
}
/* --- AVATAR KUTUSUNU DİKEY UZATMA (4 SÜTUN) --- */

/* 1. Izgara Ayarları */
.avatar-selection-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Her satırda 4 tane */
    gap: 12px !important;         /* Aralarındaki boşluk */
    
    /* Yükseklik sınırını KALDIRIYORUZ, içeriğe göre uzayacak */
    max-height: none !important; 
    height: auto !important;
    overflow: visible !important; /* İç scroll'u kapat */
    
    padding: 10px 5px !important;
}

/* 2. Resim Boyutları */
.avatar-selection-grid img {
    width: 55px !important;  /* Boyutları netleştirdik */
    height: 55px !important;
    margin: 0 auto !important; /* Hücre içinde ortala */
}

/* 3. Beyaz Kutunun (Modal) Kendisi */
/* İçerik uzadıkça beyaz kutu da aşağı doğru uzasın */
#avatar-modal .modal-content {
    height: auto !important;       /* Otomatik yükseklik */
    max-height: 85vh !important;   /* Ekranın %85'ini geçmesin (butonlar kaybolmasın diye) */
    overflow-y: auto !important;   /* Eğer ekran çok küçükse tüm kutu kaydırılabilsin */
    display: flex;
    flex-direction: column;
}
.btn-settings-close {
  width: 100%;
  margin-top: 8px;
  padding: 10px 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.65);
  background: #111111;              /* 🔹 LIGHT MODE: koyu buton */
  color: #fdfaf4;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-settings-close:hover {
  background: #000000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.btn-settings-close:active {
  transform: scale(0.97);
}



body[data-theme="dark"] .btn-settings-close {
  background: #f5f2e9;
  color: #3E2723;
  border-color: rgba(255,255,255,0.55);
}

body[data-theme="dark"] .btn-settings-close:hover {
  background: #fffaf0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}


.btn-settings-close:hover {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.btn-settings-close:active {
  transform: scale(0.97);
}

.btn-back-about {
  width: 100%;
  margin-top: 8px;
  padding: 10px 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.65);
  background: #111111;              /* 🔹 LIGHT MODE: koyu buton */
  color: #fdfaf4;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-back-about:hover {
  background: #000000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.btn-back-about:active {
  transform: scale(0.97);
}

body[data-theme="dark"] .btn-back-about {
  background: #f5f2e9;
  color: #3E2723;
  border-color: rgba(255,255,255,0.55);
}

body[data-theme="dark"] .btn-back-about:hover {
  background: #fffaf0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}


.btn-back-about:hover {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.btn-back-about:active {
  transform: scale(0.97);
}

.btn-back-contact {
  width: 100%;
  margin-top: 8px;
  padding: 10px 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.65);
  background: #111111;              /* 🔹 LIGHT MODE: koyu buton */
  color: #fdfaf4;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-back-contact:hover {
  background: #000000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.btn-back-contact:active {
  transform: scale(0.97);
}


body[data-theme="dark"] .btn-back-contact {
  background: #f5f2e9;
  color: #3E2723;
  border-color: rgba(255,255,255,0.55);
}

body[data-theme="dark"] .btn-back-contact:hover {
  background: #fffaf0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}


.btn-back-contact:hover {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.btn-back-contact:active {
  transform: scale(0.97);
}
.send-mail {
  width: 100%;
  margin-top: 8px;
  padding: 10px 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.65);
  background: #10df4e;             
  color: #fdfaf4;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.1s ease, box-shadow 0.15s ease;
}


.send-mail :hover {
  background: #000000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.send-mail :active {
  transform: scale(0.97);
}

body[data-theme="dark"] .send-mail {
  background: #10df4e;
  color: #3E2723;
  border-color: rgba(255,255,255,0.55);
}

body[data-theme="dark"] .send-mail:hover {
  background: #fffaf0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}


.send-mail:hover {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.send-mail:active {
  transform: scale(0.97);
}
/* --- 6 HARF TAŞMA DÜZELTMESİ --- */

/* Satırların ortalanmasını ve boşlukların sıkışmasını sağla */
.row {
    justify-content: center !important;
    gap: 4px !important; /* Boşluğu biraz kıstık */
}

/* Kutuların boyutu artık ana .tile kuralında YÜKSEKLİK-ÖNCELİKLİ olarak
   (satırın flex ile aldığı gerçek alana göre) hesaplanıyor — burada genişlik/
   yükseklik/aspect-ratio zorlanmıyor (eskiden buradaki !important kurallar
   ana kuralı eziyordu, bu da grid'in dikeyde taşmasına yol açabiliyordu).
   Sadece çok büyük ekranlarda kutunun devasa olmaması ve harf sayısı
   arttıkça yazının küçülmesi burada korunuyor. */
.tile {
    font-size: calc(34px - (var(--word-len) * 2px)) !important;
}
/* --- Z FOLD & DAR EKRAN İÇİN FULLY RESPONSIVE HEADER --- */

@media (max-width: 380px) {

    /* 1. Header Konteyner Ayarı */
    header, #top-bar, .header-container {
        padding-left: 2px !important;  /* Kenar boşluklarını neredeyse sıfırla */
        padding-right: 2px !important;
        gap: 2px !important;           /* Elemanlar arası boşluğu minimum yap */
        justify-content: space-between !important; /* Eşit dağıt */
        flex-wrap: nowrap !important;  /* Asla alt satıra geçme */
        overflow: hidden !important;   /* Scroll barı engelle */
    }

    /* 2. Logo Ayarı (Sabit kalsın ama küçülsün) */
    #logoLink img, .game-logo {
        height: 24px !important; /* Logoyu küçült */
        width: auto !important;
        flex-shrink: 0; /* Logo asla ezilmesin */
    }

    /* 3. İkon Butonları (Sepet, Ayarlar, Profil, Tema) */
    /* Bunları sabitleyelim ki ezilip kaybolmasınlar */
    .icon-btn, #btn-theme-toggle, #btn-profile-nav, #btn-store-nav, button.icon-only {
        width: 26px !important;  /* Buton genişliği */
        height: 26px !important; /* Buton yüksekliği */
        padding: 0 !important;   /* İç boşluğu sil */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0; /* Bu butonlar asla ekran dışına itilmesin! */
    }

    /* İkonların içindeki SVG'leri küçült */
    .icon-btn svg, button svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* 4. Rozetler (Alev ve Altın) - Esnek Olanlar Bunlar */
    /* Yer kalmazsa bunlar biraz sıkışsın ama okunur kalsın */
    .status-badge, .wallet-badge, .circle-badge {
        height: 24px !important;
        padding: 0 4px !important; /* Rozet iç boşluğunu azalt */
        font-size: 10px !important; /* Yazı boyutu */
        gap: 2px !important; /* İkon ve sayı arası boşluk */
        
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* ÖNEMLİ: Sığmazsa bunlar küçülsün */
        flex-shrink: 1; 
        min-width: 0; /* Flexbox taşmasını önler */
    }
    
    /* Rozet içindeki emojileri (🔥, 💰) biraz küçült */
    .status-badge span, .wallet-badge span {
        font-size: 10px !important; 
    }
}

/* Bu son kural eski dar-ekran sıkıştırmasını yalnız ana header aksiyonlarında
   erişilebilir 44px dokunma alanıyla dengeler. */
@media (max-width: 380px) {
    .main-header .icon-btn,
    .main-header #btn-theme-toggle,
    .main-header #btn-profile-nav,
    .main-header #btn-store-nav,
    .main-header #logoLink {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    .main-header .header-right { gap: 0 !important; }
    .main-header .stat-pill {
        min-width: 0;
        padding-inline: 5px;
        font-size: .68rem;
    }
}
.history-empty-play:hover,
.history-empty-play:focus-visible {
  transform: scale(1.05);
}