/* =====================================================
   GUESSGOO — main_page.css
   • CSS custom properties (renk/boyut token sistemi)
   • Dikey (kısa) ekran optimizasyonları
   • Eski telefon performans iyileştirmeleri
   ===================================================== */

/* ====== DESIGN TOKENS ====== */
:root {
  /* Brand */
  --c-purple:        #9A14F8;
  --c-blue:          #0b4fbc;
  --c-purple-dark:   #4C1D95;
  --c-blue-dark:     #1E3A8A;
  --c-purple-mid:    #3B1A7A;

  /* Feedback */
  --c-green:         #01B752;
  --c-yellow:        #EDAB00;
  --c-gray:          #868C97;
  --c-red:           #DC3232;
  --c-gold:          gold;

  /* Alpha helpers */
  --c-white-10:      rgba(255,255,255,0.10);
  --c-white-15:      rgba(255,255,255,0.15);
  --c-white-20:      rgba(255,255,255,0.20);
  --c-white-30:      rgba(255,255,255,0.30);
  --c-white-50:      rgba(255,255,255,0.50);
  --c-black-20:      rgba(0,0,0,0.20);
  --c-black-30:      rgba(0,0,0,0.30);
  --c-purple-a28:    rgba(154,20,248,0.28);
  --c-purple-a55:    rgba(154,20,248,0.55);
  --c-blue-a22:      rgba(11,79,188,0.22);

  /* Gradients */
  --grad-brand:      linear-gradient(135deg, var(--c-blue), var(--c-purple));
  --grad-panel:      linear-gradient(135deg, var(--c-purple-dark), var(--c-blue-dark));
  --grad-panel-from: linear-gradient(160deg, var(--c-purple-dark) 0%, var(--c-purple-mid) 40%, var(--c-blue-dark) 100%);
  --grad-btn:        linear-gradient(135deg, rgba(11,79,188,0.45), rgba(154,20,248,0.45));

  /* Shadows */
  --shadow-block:    0 10px 20px var(--c-black-20), 0 4px 8px rgba(0,0,0,0.18),
                     inset -3px -5px 0 1px var(--c-black-30),
                     inset 0 -2px 4px var(--c-black-20),
                     inset 0 1px 0 var(--c-white-15);
  --shadow-inset:    inset 0 3px 3px 2px var(--c-black-20),
                     inset 0 2px 6px var(--c-black-30);
  --shadow-purple:   0 0 20px rgba(154,20,248,0.30),
                     inset 0 1px 0 var(--c-white-15);

  /* Radii */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  15px;
  --r-xl:  20px;
  --r-pill:999px;

  /* Transitions */
  --t-fast:  0.18s ease;
  --t-med:   0.30s ease;
  --t-slow:  0.45s cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --block-size:    85px;
  --block-fs:      35px;
  --key-w:         110px;
  --key-h:         55px;
  --key-fs:        16px;
  --navbar-h:      88px;
  --navbar-px:     clamp(12px, 4vw, 80px);
  --info-h:        80px;
  --keyboard-pb:   calc(25px + env(safe-area-inset-bottom, 0px));
}

/* ====== GLOBAL ====== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  -webkit-user-select:   none;
  user-select:           none;
  -webkit-touch-callout: none;
  touch-action:          manipulation;
  overscroll-behavior:   none;
  -webkit-tap-highlight-color: transparent;
}

/* ====== PERFORMANCE: Containment ====== */
.statistics-page,
.settings-page,
.game-modes-page {
  contain:    layout style paint;
  min-height: 100vh;
  min-height: 100dvh;
}
.statistics-page-body,
.settings-page-body,
.game-modes-page-body { min-height: 50vh; }

/* ====== CURSOR (Tablet & Mobile) ====== */
@media only screen and (max-width: 1024px) { * { cursor: none !important; } }

/* ====== NO TRANSITIONS (initial load) ====== */
html.no-transitions,
html.no-transitions *,
html.no-transitions *::before,
html.no-transitions *::after {
  transition:        none !important;
  animation-duration: 0s !important;
  animation-delay:    0s !important;
}

/* ====== REDUCED MOTION ====== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01s !important;
    animation-duration:  0.01s !important;
  }
}

/* ====== MOBILE PANEL OPTIMIZATIONS ====== */
@media only screen and (max-width: 1024px) {
  .statistics-page, .game-modes-page, .settings-page {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .statistics-page.translateY,
  .game-modes-page.panel-visible,
  .settings-page.panel-visible { opacity: 1; }

  .statistics-page-body,
  .game-modes-page-body,
  .settings-page-body {
    content-visibility:    auto;
    contain-intrinsic-size: auto 500px;
  }

  .statistics-page-header,
  .game-modes-page-header,
  .settings-page-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(76,29,149,0.96);
  }

  .main-page-navbar-countdown {
    box-shadow: 0 2px 12px var(--c-black-20),
                inset 0 1px 0 var(--c-white-10);
  }
  .main-page-navbar-game-timer {
    display:    flex !important;
    font-size:  11px;
    font-weight:600;
    padding:    4px 8px;
    gap:        4px;
    min-width:  52px;
    border-radius: var(--r-sm);
    background: rgba(154,20,248,0.12);
    border:     1px solid rgba(154,20,248,0.35);
    box-shadow: none;
    flex-shrink:0;
  }
  .main-page-navbar-game-timer i { font-size: 10px; opacity: 0.9; }

  .main-page-keyboard-btn {
    box-shadow: 0 4px 12px var(--c-black-20),
                inset 0 -2px 4px var(--c-black-20);
  }
  .main-page-keyboard-btn:active {
    box-shadow: 0 0 8px var(--c-black-20);
  }
  .main-page-restart-btn {
    box-shadow: 0 6px 16px rgba(0,0,0,0.25),
                inset 0 -2px 4px var(--c-black-20);
  }
  .main-page-open-daily-lock-btn,
  .mobile-open-daily-lock-btn { box-shadow: none; }

  .win-modal-content,
  .lose-modal-content,
  .login-modal-content,
  .register-modal-content {
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  }
}

/* ====== MAIN PAGE ====== */
.main-page {
  position:   fixed;
  inset:      0;
  background: var(--grad-brand);
  user-select:none;
  transition: filter 0.5s ease;
  display:    flex;
  flex-direction: column;
  height:     100vh;
  height:     100dvh;
  min-height: 0;
  overflow:   hidden;
  will-change: contents;
}

.main-page::before {
  content:        '';
  position:       fixed;
  inset:          0;
  z-index:        2200;
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.22s ease-out;
  background:     rgba(0,0,0,0.5);
}
.main-page.focus::before {
  opacity:        1;
  pointer-events: auto;
}
.main-page.focus .main-page-block,
.main-page.focus .main-page-keyboard-btn,
.main-page.focus .main-page-restart-btn,
.main-page.focus .main-page-info-text-wrapper,
.main-page.focus .main-page-icon { pointer-events: none; }

/* ====== NAVBAR ====== */
.main-page-navbar {
  flex-shrink: 0;
  height:      var(--navbar-h);
  padding:     0 var(--navbar-px);
  border-bottom: 1px solid var(--c-white-10);
  position:    relative;
  z-index:     2100;
  overflow:    hidden;
}
.main-page-navbar-wrapper {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  height:          100%;
  width:           100%;
  gap:             8px;
  overflow:        hidden;
}
.main-page-logo-wrapper {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-shrink: 0;
  min-width:   0;
}
.main-page-navbar-logo  { width: 48px; flex-shrink: 0; }
.main-page-navbar-brand {
  color:       white;
  font-size:   clamp(18px, 3vw, 38px);
  font-weight: bold;
  white-space: nowrap;
}

.main-page-navbar-center {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            1 1 0;
  min-width:       0;
  gap:             8px;
  overflow:        hidden;
}

.main-page-navbar-game-timer {
  display:       flex;
  align-items:   center;
  gap:           8px;
  color:         rgba(255,255,255,0.98);
  font-size:     clamp(13px, 1.4vw, 18px);
  font-weight:   700;
  letter-spacing:0.06em;
  padding:       8px 16px;
  background:    linear-gradient(135deg, var(--c-purple-a28), var(--c-blue-a22));
  border:        1px solid rgba(154,20,248,0.55);
  border-radius: var(--r-pill);
  box-shadow:    0 0 20px var(--c-purple-a28), inset 0 1px 0 var(--c-white-15);
  font-variant-numeric: tabular-nums;
  white-space:   nowrap;
  flex-shrink:   0;
}
.main-page-navbar-game-timer i {
  font-size:   16px;
  color:       rgba(200,160,255,0.95);
  text-shadow: 0 0 8px rgba(154,20,248,0.35);
}
.main-page-navbar-game-timer #main-page-game-timer-text {
  text-shadow: 0 0 10px rgba(154,20,248,0.25);
}

.main-page-navbar-countdown {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             clamp(8px, 2vw, 40px);
  color:           white;
  font-size:       clamp(12px, 1.2vw, 16px);
  font-weight:     700;
  padding:         8px 14px;
  background:      var(--c-white-10);
  border:          1px solid rgba(255,255,255,0.22);
  border-radius:   16px;
  box-shadow:      0 0 18px var(--c-purple-a28),
                   0 0 32px var(--c-blue-a22),
                   var(--shadow-inset);
  white-space:     nowrap;
  flex-shrink:     0;
  min-width:       0;
  max-width:       100%;
}
.main-page-navbar-countdown-left {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.main-page-navbar-countdown i { font-size: 18px; color: rgba(255,200,50,0.9); }

.main-page-open-daily-lock-btn {
  width:         38px;
  height:        34px;
  padding:       0;
  display:       grid;
  place-items:   center;
  border-radius: 10px;
  border:        1px solid rgba(255,200,50,0.35);
  background:    rgba(255,200,50,0.16);
  color:         white;
  cursor:        pointer;
  pointer-events:auto;
  transition:    background var(--t-fast), transform var(--t-fast);
}
.main-page-open-daily-lock-btn i        { color: rgba(255,230,140,1); }
.main-page-open-daily-lock-btn:hover    { background: rgba(255,200,50,0.22); }
.main-page-open-daily-lock-btn:active   { transform: scale(0.96); }

.main-page-icon-wrapper {
  display:     flex;
  align-items: center;
  gap:         clamp(6px, 1.5vw, 24px);
  flex-shrink: 0;
}

.main-page-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           clamp(34px, 4vw, 46px);
  height:          clamp(34px, 4vw, 46px);
  border-radius:   var(--r-md);
  border:          1px solid var(--c-white-20);
  background:      var(--c-white-10);
  color:           white;
  font-size:       clamp(14px, 2vw, 22px);
  cursor:          pointer;
  transition:      background var(--t-fast), border-color var(--t-fast),
                   transform 0.1s ease, box-shadow var(--t-fast);
  box-shadow:      0 2px 8px var(--c-black-20),
                   inset 0 1px 0 var(--c-white-15);
  flex-shrink:     0;
}
.main-page-icon:hover {
  background:   var(--c-white-20);
  border-color: var(--c-white-30);
  box-shadow:   0 4px 14px rgba(154,20,248,0.25),
                inset 0 1px 0 var(--c-white-20);
}
.main-page-icon:active {
  transform:  scale(0.92);
  background: rgba(154,20,248,0.25);
  box-shadow: var(--shadow-inset);
}

/* ====== MAIN BODY ====== */
.main-page-body {
  width:      100%;
  flex:       1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display:    flex;
  flex-direction: column;
  align-items:    center;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,120,255,0.6) var(--c-white-10);
  overscroll-behavior-y: contain;
  contain: layout paint;
}
.main-page-body::-webkit-scrollbar        { width: 10px; }
.main-page-body::-webkit-scrollbar-track  {
  background:    linear-gradient(180deg, var(--c-white-10), rgba(255,255,255,0.02));
  border-radius: 20px;
  margin:        8px 0;
}
.main-page-body::-webkit-scrollbar-thumb  {
  background:    linear-gradient(180deg, rgba(170,130,255,0.9), rgba(90,60,200,0.9));
  border-radius: 20px;
  border:        2px solid var(--c-white-10);
  box-shadow:    0 0 8px rgba(160,120,255,0.6),
                 inset 0 0 6px rgba(255,255,255,0.35);
  transition:    all var(--t-med);
}
.main-page-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(190,150,255,1), rgba(110,80,220,1));
}

/* ====== BLOCKS ====== */
.main-page-blocks {
  width:      75%;
  margin:     0 auto;
  position:   relative;
  flex-shrink:0;
}
.main-page-blocks-layout {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   10px;
  width:                 fit-content;
  margin:                0 auto;
}
.main-page-block {
  width:      var(--block-size);
  height:     var(--block-size);
  border:     none;
  border-radius: var(--r-lg);
  position:   relative;
  transition: transform .4s ease, opacity .4s ease, filter .4s ease;
  background-color: var(--c-white-10);
  display:    flex;
  justify-content: center;
  align-items:     center;
  font-size:  var(--block-fs);
  color:      white;
}
.main-page-block::before {
  content:        '';
  position:       absolute;
  inset:          0;
  border-radius:  13px;
  border:         2px solid white;
  pointer-events: none;
  box-shadow:     var(--shadow-block);
}
.color-feedback {
  width:          100%;
  height:         100%;
  border-radius:  13px;
  position:       absolute;
  pointer-events: none;
  z-index:        -1;
  transition:     .4s ease;
}

/* ====== KEYBOARD ====== */
.main-page-keyboard {
  width:      75%;
  margin:     0 auto;
  transition: filter 1.5s ease;
  filter:     blur(0px);
  pointer-events: auto;
  position:   relative;
}
.main-page-keyboard-layout {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  width:                 fit-content;
  margin:                0 auto;
  gap:                   8px;
  column-gap:            5px;
}
.main-page-keyboard-btn {
  width:         var(--key-w);
  height:        var(--key-h);
  border:        1px solid white;
  display:       flex;
  justify-content: center;
  align-items:   center;
  border-radius: var(--r-lg);
  background-color: rgba(0,0,0,0.1);
  color:         white;
  font-size:     var(--key-fs);
  box-shadow:    var(--shadow-block);
  transition:    opacity .4s ease, filter .4s ease;
}
.main-page-keyboard-btn:active {
  box-shadow: 0 0 1px #888, 2px 2px 4px rgba(68,68,68,0.25),
              -2px 2px 4px rgba(68,68,68,0.25);
  transform:  translateY(2px);
}

.main-page-keyboard-wrapper {
  flex-shrink: 0;
  left:        0;
  right:       0;
  display:     grid;
  place-items: center;
  gap:         10px;
  pointer-events: none;
  padding:     15px 0 var(--keyboard-pb) 0;
}

/* ====== INFO TEXT ====== */
.main-page-info-text-wrapper {
  display:         flex;
  justify-content: center;
  align-items:     center;
  margin-right:    auto;
  margin-left:     auto;
  width:           75%;
  gap:             65px;
  height:          var(--info-h);
  transition:      opacity .4s ease, filter .4s ease;
}
.main-page-info-text {
  background-color: rgba(0,0,0,0.1);
  color:            white;
  border:           1px solid var(--c-white-50);
  border-radius:    var(--r-sm);
  padding:          8px;
  box-shadow:       var(--shadow-inset);
}

/* ====== RESTART / MESSAGE / TROPHY ====== */
.main-page-restart-btn {
  margin:         0 auto;
  width:          250px;
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate3d(-50%, 500px, 0);
  height:         70px;
  display:        flex;
  justify-content:center;
  align-items:    center;
  border:         1px solid white;
  border-radius:  var(--r-lg);
  background:     var(--grad-brand);
  color:          white;
  font-size:      20px;
  font-weight:    bold;
  pointer-events: auto;
  box-shadow:     var(--shadow-block);
  transition:     opacity .4s ease, transform .4s ease;
}
.main-page-message-box {
  position:       absolute;
  top:            20%;
  left:           50%;
  transform:      translate3d(-50%, -50%, 0) scale(0.70);
  width:          300px;
  height:         100px;
  background:     var(--grad-brand);
  z-index:        10;
  border-radius:  var(--r-lg);
  border:         3px solid white;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.18s ease-out,
                  transform 0.45s cubic-bezier(.18,.89,.32,1.28);
  display:        grid;
  place-items:    center;
  color:          white;
  font-size:      15px;
  font-weight:    bold;
  white-space:    pre-line;
  box-shadow:     0 10px 24px var(--c-black-30),
                  inset 0 -2px 4px var(--c-black-20);
}
@media (max-width: 1024px) {
  .main-page-message-box { box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
}

.main-page-win-trophy-icon {
  position:       absolute;
  font-size:      250px;
  color:          var(--c-gold);
  top:            0;
  left:           50%;
  transform:      translate3d(-50%, -150%, 0);
  transition:     transform 0.6s cubic-bezier(.22,1,.36,1),
                  opacity 0.3s ease, visibility 0.3s ease;
  opacity:        0;
  visibility:     hidden;
  z-index:        100;
  pointer-events: none;
  overflow:       visible;
}
.main-page-win-trophy-icon.show { opacity: 1 !important; visibility: visible !important; }
.main-page-win-trophy-icon i {
  filter: drop-shadow(-6px 6px 0 rgba(0,0,0,1))
          drop-shadow(0 8px 16px rgba(0,0,0,1));
}
@media (max-width: 1024px) {
  .main-page-win-trophy-icon i {
    filter: drop-shadow(-4px 4px 0 rgba(0,0,0,.9));
  }
}

/* ====== TOUCH PRESS ====== */
.touch-press {
  opacity:    0.88 !important;
  transition: opacity 0.08s ease !important;
}
.main-page-icon.touch-press {
  opacity:    0.88;
  transform:  scale(0.92);
  transition: opacity 0.08s ease, transform 0.08s ease;
}

/* ====== MOBILE TIMER BAR ====== */
.mobile-game-timer-bar {
  display:         none;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  width:           100%;
  padding:         10px 0;
  pointer-events:  none;
}
.mobile-game-timer-bar .mobile-game-timer-inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         10px 22px;
  border-radius:   var(--r-pill);
  background:      linear-gradient(135deg, rgba(154,20,248,0.25), rgba(11,79,188,0.20));
  border:          1px solid rgba(154,20,248,0.50);
  box-shadow:      0 0 20px rgba(154,20,248,0.25),
                   inset 0 1px 0 var(--c-white-15);
  color:           rgba(255,255,255,0.98);
  font-size:       15px;
  font-weight:     700;
  font-variant-numeric: tabular-nums;
  letter-spacing:  0.08em;
}
.mobile-game-timer-bar i {
  font-size:   14px;
  color:       rgba(200,160,255,0.95);
  text-shadow: 0 0 8px rgba(154,20,248,0.40);
}
.mobile-game-timer-bar #mobile-game-timer-text {
  text-shadow: 0 0 10px rgba(154,20,248,0.30);
}

/* ====== MOBILE COUNTDOWN BAR ====== */
.mobile-countdown-bar {
  width:           75%;
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  border-radius:   14px;
  background:      var(--c-white-10);
  border:          1px solid rgba(255,255,255,0.18);
  box-shadow:      var(--shadow-inset);
  pointer-events:  auto;
  display:         none;
}
.mobile-countdown-left {
  display:     flex;
  align-items: center;
  gap:         8px;
  color:       white;
  font-size:   14px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.mobile-countdown-left i { font-size: 16px; color: rgba(255,200,50,0.9); }

/* ====== STATISTICS PAGE ====== */
.statistics-page {
  height:     75vh;
  max-height: 720px;
  border-top: 1px solid var(--c-white-20);
  transition: transform 250ms ease;
  background: var(--grad-panel-from);
  position:   fixed;
  left:       0; right: 0; bottom: 0;
  transform:  translateY(100%);
  backface-visibility: hidden;
  transition-delay:    0ms;
  pointer-events:      none;
  overflow:            hidden;
  display:             flex;
  flex-direction:      column;
  user-select:         none;
  z-index:             2300;
  contain:             layout paint;
}
.statistics-page.translateY {
  transform:        translate3d(0,0,0);
  opacity:          1;
  pointer-events:   auto;
  transition-delay: 0ms;
}
.statistics-page-scroll {
  flex:       1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,120,255,.5) rgba(255,255,255,.06);
}
.statistics-page-scroll::-webkit-scrollbar       { width: 10px; }
.statistics-page-scroll::-webkit-scrollbar-track {
  background:    rgba(255,255,255,0.06);
  border-radius: 20px;
  margin:        8px 0;
}
.statistics-page-scroll::-webkit-scrollbar-thumb {
  background:    linear-gradient(180deg, rgba(170,130,255,0.9), rgba(90,60,200,0.9));
  border-radius: 20px;
}
.statistics-page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 80px;
  height:          72px;
  border-bottom:   1px solid rgba(255,255,255,0.12);
  position:        sticky;
  top:             0;
  z-index:         20;
  background:      rgba(76,29,149,0.98);
  box-shadow:      0 2px 16px rgba(0,0,0,0.15);
}
.statistics-page-header-text {
  color:          rgba(255,255,255,0.98);
  font-weight:    700;
  font-size:      22px;
  letter-spacing: 0.5px;
}
.statistics-page-header-end {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  width:           135px;
  color:           white;
}
.statistics-page-exit-button,
.game-modes-page-exit-button,
.settings-page-exit-button {
  width:         40px;
  height:        40px;
  border-radius: var(--r-md);
  border:        1px solid var(--c-white-30);
  display:       grid;
  place-items:   center;
  transition:    border-color var(--t-fast), background var(--t-fast), transform 0.1s ease;
  background:    var(--c-white-10);
  color:         white;
  font-size:     14px;
  cursor:        pointer;
  flex-shrink:   0;
}
.statistics-page-exit-button:hover,
.game-modes-page-exit-button:hover,
.settings-page-exit-button:hover {
  background:   var(--c-white-15);
  border-color: var(--c-white-50);
}
.statistics-page-exit-button:active,
.game-modes-page-exit-button:active,
.settings-page-exit-button:active { transform: scale(0.92); }

.statistics-page-share-button {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         8px 14px;
  border-radius:   var(--r-pill);
  border:          1px solid rgba(60,180,120,0.45);
  background:      linear-gradient(135deg, rgba(40,160,100,0.25), rgba(20,100,65,0.25));
  color:           rgba(255,255,255,0.92);
  font-size:       13px;
  font-weight:     600;
  letter-spacing:  0.3px;
  cursor:          pointer;
  transition:      background var(--t-fast), border-color var(--t-fast), transform 0.1s ease;
  white-space:     nowrap;
  flex-shrink:     0;
}
.statistics-page-share-button i {
  font-size: 13px;
  color:     rgba(100,220,160,0.9);
}
.statistics-page-share-button:hover {
  background:   linear-gradient(135deg, rgba(40,160,100,0.38), rgba(20,100,65,0.38));
  border-color: rgba(60,180,120,0.65);
}
.statistics-page-share-button:active { transform: scale(0.95); }
.translateY { transform: translate3d(0,0,0); }

/* ====== STATISTICS BODY ====== */
.statistics-page-body { padding: 48px 56px 64px; color: rgba(255,255,255,0.95); }
.statistics-page-body-no-account-notice {
  display:       none;
  margin-bottom: 28px;
  padding:       20px 26px;
  border:        1px solid rgba(255,193,7,0.45);
  border-radius: 14px;
  background:    rgba(255,193,7,0.1);
  color:         rgba(255,255,255,0.95);
  font-size:     15px;
  letter-spacing:0.3px;
  line-height:   1.55;
  font-weight:   500;
  box-shadow:    0 2px 12px rgba(0,0,0,0.15);
}
.statistics-page-body-layout        { display: flex; flex-direction: column; gap: 56px; }
.statistics-page-body-info-layout   {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   24px;
}
.statistics-page-body-info-box {
  border:        1px solid rgba(255,255,255,0.15);
  width:         100%;
  min-height:    140px;
  box-sizing:    border-box;
  border-radius: 16px;
  padding:       24px 28px;
  display:       flex;
  flex-direction:column;
  gap:           12px;
  justify-content:center;
  background:    var(--c-white-10);
  box-shadow:    0 4px 20px var(--c-black-20),
                 inset 0 1px 0 rgba(255,255,255,0.06);
  transition:    border-color var(--t-fast), box-shadow var(--t-fast);
}
.statistics-page-body-info-box:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow:   0 6px 24px rgba(0,0,0,0.25);
}
.statistics-page-body-info-box-icon-text { display: flex; align-items: center; gap: 16px; }
.statistics-page-body-info-box-icon {
  width:         48px;
  height:        48px;
  border-radius: 14px;
  display:       flex;
  align-items:   center;
  justify-content:center;
  background:    linear-gradient(145deg, rgba(76,29,149,0.5), rgba(30,58,138,0.5));
  border:        1px solid var(--c-white-20);
  color:         rgba(255,255,255,0.95);
}
.statistics-page-body-info-box-text {
  font-size:      15px;
  letter-spacing: 0.4px;
  font-weight:    600;
  color:          rgba(255,255,255,0.88);
}
.statistics-page-body-info {
  font-size:      28px;
  font-weight:    700;
  color:          rgba(255,255,255,0.98);
  letter-spacing: 0.3px;
}
.statistics-page-body-info-box-sub-info {
  font-size:      13px;
  letter-spacing: 0.5px;
  color:          rgba(255,255,255,0.75);
  font-weight:    500;
}

/* ====== WEEKLY SERIES ====== */
.statistics-page-body-weekly-series-layout {
  width:          100%;
  border-radius:  16px;
  padding:        32px;
  box-sizing:     border-box;
  border:         1px solid rgba(255,255,255,0.15);
  background:     linear-gradient(160deg, rgba(76,29,149,0.3) 0%, rgba(30,58,138,0.35) 100%);
  box-shadow:     0 4px 24px var(--c-black-20),
                  inset 0 1px 0 rgba(255,255,255,0.08);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            28px;
}
.statistics-page-body-todays-challenge-layout {
  width:          100%;
  border-radius:  16px;
  padding:        32px;
  box-sizing:     border-box;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            28px;
  border:         1px solid rgba(255,255,255,0.18);
  background:     linear-gradient(160deg, rgba(76,29,149,0.35) 0%, rgba(30,58,138,0.40) 100%);
  box-shadow:     0 4px 24px rgba(0,0,0,0.25),
                  inset 0 1px 0 var(--c-white-10);
}
.statistics-page-body-weekly-series-title-area,
.statistics-page-body-todays-challenge-title-area {
  width:          100%;
  padding-bottom: 18px;
  border-bottom:  1px solid rgba(255,255,255,0.12);
  display:        flex;
  justify-content:center;
  align-items:    center;
}
.statistics-page-body-weekly-series-title  { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; color: rgba(255,255,255,0.98); }
.statistics-page-body-todays-challenge-title { font-size: 24px; font-weight: 700; letter-spacing: 0.6px; color: rgba(255,255,255,0.98); text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.statistics-page-body-weekly-series-days-area   { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.statistics-page-body-weekly-series-days-column { display: flex; gap: 16px; }
.statistics-page-body-weekly-day {
  border-radius:   14px;
  display:         flex;
  flex-direction:  column;
  gap:             12px;
  align-items:     center;
  border:          1px solid rgba(255,255,255,0.15);
  background:      rgba(255,255,255,0.06);
  box-shadow:      0 2px 12px var(--c-black-20),
                   inset 0 1px 0 rgba(255,255,255,0.05);
  width:           56px;
  min-height:      100px;
  padding:         14px 0;
  justify-content: center;
  transition:      border-color var(--t-fast), background var(--t-fast);
}
.statistics-page-body-weekly-day:hover {
  border-color: rgba(255,255,255,0.22);
  background:   var(--c-white-10);
}
.statistics-page-body-weekly-day.is-today {
  border-color: rgba(154,20,248,0.5);
  background:   rgba(154,20,248,0.12);
  box-shadow:   0 0 14px rgba(154,20,248,0.2);
}
.statistics-page-body-weekly-day-text { font-weight: 700; font-size: 13px; color: rgba(255,255,255,0.9); letter-spacing: 0.3px; }
.statistics-page-body-weekly-day-check {
  border-radius: 50%;
  width:         32px;
  height:        32px;
  border:        1px solid rgba(255,255,255,0.4);
  background:    rgba(255,255,255,0.06);
  box-shadow:    inset 0 2px 6px var(--c-black-20);
  transition:    all 0.25s ease;
  position:      relative;
  display:       flex;
  align-items:   center;
  justify-content:center;
}
.statistics-page-body-weekly-day-check.active                 { background: var(--c-white-15); }
.statistics-page-body-weekly-day-check.active.win  {
  background:   linear-gradient(145deg, rgba(50,170,110,0.85), rgba(30,130,85,0.9));
  border-color: rgba(70,200,130,0.6);
  box-shadow:   0 0 12px rgba(60,180,120,0.35);
}
.statistics-page-body-weekly-day-check.active.lose {
  background:   linear-gradient(145deg, rgba(190,60,60,0.8), rgba(130,35,35,0.85));
  border-color: rgba(220,80,80,0.5);
  box-shadow:   0 0 12px rgba(180,50,50,0.3);
}

/* ====== TODAY'S CHALLENGE ====== */
.statistics-page-body-todays-challenge-info-area { width: 100%; max-width: 420px; }
.statistics-page-body-todays-challenge-info      { display: flex; flex-direction: column; gap: 16px; }
.statistics-page-body-todays-challenge-info-box  {
  border:        1px solid rgba(255,255,255,0.15);
  padding:       20px 24px;
  display:       flex;
  justify-content:space-between;
  align-items:   center;
  border-radius: 14px;
  transition:    border-color var(--t-fast), box-shadow var(--t-fast);
  background:    var(--c-white-10);
  box-shadow:    0 2px 12px var(--c-black-20),
                 inset 0 1px 0 rgba(255,255,255,0.06);
}
.statistics-page-body-todays-challenge-info-box:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow:   0 4px 16px rgba(0,0,0,0.22);
}
.statistics-page-body-todays-challenge-info-box-icon-text,
.statistics-page-body-todays-challenge-info-box-value     { display: flex; gap: 14px; align-items: center; }
.statistics-page-body-todays-challenge-info-box-icon {
  height:        46px;
  width:         46px;
  border-radius: 12px;
  display:       flex;
  align-items:   center;
  justify-content:center;
  background:    rgba(255,255,255,0.12);
  border:        1px solid var(--c-white-20);
  color:         rgba(255,255,255,0.95);
}
.statistics-page-body-todays-challenge-info-box-text       { font-size: 16px; letter-spacing: 0.35px; font-weight: 600; color: rgba(255,255,255,0.90); }
.statistics-page-body-todays-challenge-info-box-value-text { font-size: 17px; letter-spacing: 0.4px;  font-weight: 700; color: rgba(255,255,255,0.98); }
.statistics-page-body-todays-challenge-info-box-value-sub-text { font-size: 12px; opacity: 0.88; font-weight: 500; color: rgba(255,255,255,0.85); }
.statistics-page-body-todays-challenge-info-box-value-icon {
  width:         42px;
  height:        42px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content:center;
  border:        1px solid rgba(255,255,255,0.15);
  box-shadow:    0 2px 8px var(--c-black-20);
}
.statistics-page-body-todays-challenge-info-box-value-icon.success  {
  background:   linear-gradient(145deg, rgba(40,160,100,0.85), rgba(25,120,75,0.9));
  border-color: rgba(60,200,120,0.4);
  color:        #fff;
}
.statistics-page-body-todays-challenge-info-box-value-icon.failed   {
  background:   linear-gradient(145deg, rgba(200,70,70,0.8), rgba(130,35,35,0.85));
  border-color: rgba(220,90,90,0.4);
  color:        #fff;
}
.statistics-page-body-todays-challenge-info-box-value-icon.pending  {
  background:   linear-gradient(145deg, rgba(90,95,110,0.6), rgba(60,65,80,0.7));
  border-color: rgba(140,145,160,0.3);
  color:        rgba(255,255,255,0.8);
}

/* ====== GAME MODES PAGE ====== */
.game-modes-page {
  height:      100dvh;
  max-height:  100dvh;
  width:       33%;
  position:    fixed;
  inset:       0;
  background:  var(--grad-panel);
  transform:   translateX(-100%) translateZ(0);
  backface-visibility: hidden;
  transition:  transform 250ms ease;
  pointer-events: none;
  overflow:    hidden;
  display:     flex;
  flex-direction: column;
  user-select: none;
  z-index:     2300;
  contain:     layout paint;
}
.game-modes-page-scroll {
  flex:       1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,120,255,.6) rgba(255,255,255,.08);
}
.game-modes-page-scroll::-webkit-scrollbar { width: 10px; }
.game-modes-page-scroll::-webkit-scrollbar-track {
  background:    rgba(255,255,255,0.06);
  border-radius: 20px;
  margin:        8px 0;
}
.game-modes-page-scroll::-webkit-scrollbar-thumb {
  background:    linear-gradient(180deg, rgba(170,130,255,0.9), rgba(90,60,200,0.9));
  border-radius: 20px;
}
.game-modes-page.panel-visible { transform: translate3d(0,0,0); opacity: 1; pointer-events: auto; }

.game-modes-page-header,
.settings-page-header {
  display:         flex;
  height:          80px;
  align-items:     center;
  justify-content: space-between;
  padding:         0 15px;
  color:           white;
  border-bottom:   1px solid var(--c-white-10);
  position:        sticky;
  top:             0;
  z-index:         20;
  background:      linear-gradient(180deg, rgba(70,40,160,0.98), rgba(60,35,140,0.96));
}
.game-modes-page-header-text,
.settings-page-header-text { font-size: 25px; font-weight: bold; }

.game-modes-page-body,
.settings-page-body { color: white; padding: 10px; display: flex; flex-direction: column; gap: 50px; }
.game-modes-page-body-title { font-size: 20px; font-weight: bold; position: relative; }

.game-modes-page-blurred-container {
  position:   relative;
  width:      100%;
  min-height: 400px;
  display:    flex;
  flex-direction: column;
  gap:        50px;
}
.game-modes-page-coming-soon-label {
  position:   absolute;
  top:        50%;
  left:       50%;
  transform:  translate(-50%,-50%);
  background: rgba(255,170,60,0.95);
  color:      white;
  font-size:  18px;
  font-weight:600;
  padding:    10px 20px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4),
              0 0 20px rgba(255,170,60,0.6),
              0 0 40px rgba(255,170,60,0.4),
              inset 0 0 10px rgba(255,255,255,0.2);
  z-index:        100;
  white-space:    nowrap;
  pointer-events: none;
  text-shadow:    0 0 10px rgba(255,255,255,0.8),
                  0 0 20px rgba(255,170,60,0.6);
}

/* ====== 24 HOURS MODE ====== */
.game-modes-page-body-24hours-layout {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            20px;
  margin-bottom:  20px;
}
.game-modes-page-body-24hours-box {
  width:      100%;
  padding:    25px;
  border:     2px solid rgba(255,255,255,1);
  border-radius: var(--r-lg);
  display:    flex;
  justify-content: space-between;
  align-items:center;
  position:   relative;
  background: linear-gradient(135deg, rgba(11,79,188,0.6), rgba(154,20,248,0.6));
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4),
              0 0 20px var(--c-purple-a55),
              0 12px 28px rgba(0,0,0,0.45);
  transform:  scale(1);
  transition: all var(--t-med);
}
.game-modes-page-body-24hours-box-icon { border: 1px solid var(--c-white-50); padding: 12px; border-radius: 12px; font-size: 24px; color: var(--c-gold); }
.game-modes-page-body-24hours-texts  { display: flex; flex-direction: column; gap: 5px; flex: 1; margin-left: 20px; }
.game-modes-page-body-24hours-title  { font-size: 22px; font-weight: bold; }
.game-modes-page-body-24hours-text   { font-size: 16px; color: rgba(255,255,255,0.9); }
.game-modes-page-body-24hours-badge  {
  background:   linear-gradient(135deg, rgba(60,180,120,0.9), rgba(30,130,90,0.9));
  color:        white;
  font-size:    12px;
  font-weight:  bold;
  padding:      8px 16px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  box-shadow:   0 2px 8px var(--c-black-30);
}

/* ====== BLURRED MODES ====== */
.game-modes-page-blurred-container .game-modes-page-body-difficulty-layout,
.game-modes-page-blurred-container .game-modes-page-body-point-mode-layout,
.game-modes-page-blurred-container .game-modes-page-body-hint-mode-layout {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            20px;
  position:       relative;
  filter:         blur(3px);
  opacity:        0.6;
  pointer-events: none;
  user-select:    none;
}
.game-modes-page-body-difficulty-box-layout,
.game-modes-page-body-point-mode-box-layout,
.game-modes-page-body-hint-mode-box-layout {
  display:        flex;
  flex-direction: column;
  height:         100%;
  width:          100%;
  gap:            10px;
}
.game-modes-page-body-difficulty-box,
.game-modes-page-body-point-mode-box,
.game-modes-page-body-hint-mode-box {
  padding:       23px;
  border:        1px solid rgba(255,255,255,1);
  border-radius: 13px;
  transition:    background-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
  box-shadow:    var(--shadow-inset);
  display:       flex;
  justify-content:space-between;
  align-items:   center;
  transform:     scale(0.98);
  position:      relative;
  overflow:      hidden;
}
.game-modes-page-body-difficulty-box-icon,
.game-modes-page-body-point-mode-icon,
.game-modes-page-body-hint-mode-icon { border: 1px solid var(--c-white-50); padding: 9px; border-radius: 10px; }

.game-modes-page-body-difficulty-title,
.game-modes-page-body-point-mode-title,
.game-modes-page-body-hint-mode-title  { font-size: 18px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.game-modes-page-body-difficulty-subtitle { font-size: 14px; font-weight: normal; color: rgba(255,255,255,0.7); font-style: italic; }
.game-modes-page-body-difficulty-text,
.game-modes-page-body-point-mode-text,
.game-modes-page-body-hint-mode-text { font-size: 15px; color: rgba(255,255,255,0.8); }
.game-modes-page-body-difficulty-challenge { font-size: 12px; color: rgba(255,200,0,0.9); font-style: italic; margin-top: 4px; font-weight: 500; }
.game-modes-page-body-difficulty-texts,
.game-modes-page-body-point-mode-texts,
.game-modes-page-body-hint-mode-texts { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }

.game-modes-page-body-difficulty-box::before,
.game-modes-page-body-point-mode-box::before,
.game-modes-page-body-hint-mode-box::before {
  content:  "";
  position: absolute;
  inset:    0;
  opacity:  0;
  transition:opacity 0.5s ease;
  z-index:  -1;
}
.game-modes-page-body-difficulty-box.active[data-difficulty="easy"]::before   { opacity:1; background: linear-gradient(135deg, rgba(60,180,120,0.55), rgba(30,130,90,0.55)); }
.game-modes-page-body-difficulty-box.active[data-difficulty="medium"]::before { opacity:1; background: linear-gradient(135deg, rgba(255,170,60,0.55), rgba(180,110,20,0.55)); }
.game-modes-page-body-difficulty-box.active[data-difficulty="hard"]::before   { opacity:1; background: linear-gradient(135deg, rgba(180,50,50,0.6), rgba(110,20,20,0.6)); }
.game-modes-page-body-difficulty-box.active[data-difficulty="easy"]   { transform:scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 14px rgba(80,220,160,0.45), 0 10px 26px rgba(0,0,0,0.4); }
.game-modes-page-body-difficulty-box.active[data-difficulty="medium"] { transform:scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 15px rgba(255,180,90,0.45), 0 10px 26px rgba(0,0,0,0.4); }
.game-modes-page-body-difficulty-box.active[data-difficulty="hard"]   { transform:scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 16px rgba(255,90,90,0.5),  0 12px 28px rgba(0,0,0,0.45); }
.game-modes-page-body-point-mode-box.active[data-point="score"]::before { opacity:1; background: linear-gradient(135deg, rgba(255,204,0,0.55), rgba(180,130,0,0.55)); }
.game-modes-page-body-point-mode-box.active[data-point="time"]::before  { opacity:1; background: linear-gradient(135deg, rgba(0,180,255,0.55), rgba(0,110,200,0.55)); }
.game-modes-page-body-point-mode-box.active[data-point="score"] { transform:scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 18px rgba(255,200,40,0.55), 0 12px 28px rgba(0,0,0,0.45); }
.game-modes-page-body-point-mode-box.active[data-point="time"]  { transform:scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 18px rgba(0,200,255,0.55),  0 12px 28px rgba(0,0,0,0.45); }
.game-modes-page-body-hint-mode-box.active[data-hint="colourful"]::before { opacity:1; background: linear-gradient(135deg, rgba(155,89,182,0.55), rgba(80,60,160,0.55)); }
.game-modes-page-body-hint-mode-box.active[data-hint="classic"]::before   { opacity:1; background: linear-gradient(135deg, rgba(120,30,30,0.6), rgba(60,15,15,0.6)); }
.game-modes-page-body-hint-mode-box.active[data-hint="colourful"] { transform:scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 20px rgba(170,120,255,0.55), 0 10px 26px rgba(0,0,0,0.4); }
.game-modes-page-body-hint-mode-box.active[data-hint="classic"]   { transform:scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 18px rgba(255,80,80,0.55),   0 12px 28px rgba(0,0,0,0.45); }

.game-modes-page::-webkit-scrollbar { width: 10px; }
.game-modes-page::-webkit-scrollbar-track {
  background:    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius: 20px;
  margin:        8px 0;
}
.game-modes-page::-webkit-scrollbar-thumb {
  background:    linear-gradient(180deg, rgba(170,130,255,0.9), rgba(90,60,200,0.9));
  border-radius: 20px;
  border:        2px solid rgba(255,255,255,0.25);
  box-shadow:    0 0 8px rgba(160,120,255,0.6),
                 inset 0 0 6px rgba(255,255,255,0.35);
  transition:    all var(--t-med);
}

/* ====== SETTINGS PAGE ====== */
.settings-page {
  height:      100dvh;
  max-height:  100dvh;
  width:       33%;
  position:    fixed;
  right:       0; top: 0; bottom: 0;
  background:  var(--grad-panel);
  transform:   translateX(100%) translateZ(0);
  overflow:    hidden;
  display:     flex;
  flex-direction: column;
  backface-visibility: hidden;
  transition:  transform 250ms ease;
  pointer-events: none;
  user-select: none;
  z-index:     2300;
  contain:     layout paint;
}
.settings-page-scroll {
  flex:       1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,120,255,.6) rgba(255,255,255,.08);
}
.settings-page-scroll::-webkit-scrollbar { width: 10px; }
.settings-page-scroll::-webkit-scrollbar-track {
  background:    rgba(255,255,255,0.06);
  border-radius: 20px;
  margin:        8px 0;
}
.settings-page-scroll::-webkit-scrollbar-thumb {
  background:    linear-gradient(180deg, rgba(170,130,255,0.9), rgba(90,60,200,0.9));
  border-radius: 20px;
}
.settings-page.panel-visible { transform: translate3d(0,0,0); opacity: 1; pointer-events: auto; }

.settings-page-body-layout { padding: 25px; display: flex; flex-direction: column; gap: 35px; }
.settings-page-body-box {
  border:        1px solid white;
  padding:       20px;
  border-radius: 13px;
  background:    var(--c-white-10);
  box-shadow:    var(--shadow-inset);
}
.settings-page-body-profile-container   { display: flex; flex-direction: column; gap: 20px; }
.settings-page-body-profile-layout      { display: flex; align-items: center; gap: 25px; }
.settings-page-body-profile-photo {
  border:        1px solid var(--c-white-10);
  border-radius: 50%;
  width:         90px;
  height:        90px;
  display:       flex;
  justify-content:center;
  align-items:   center;
  box-shadow:    var(--shadow-inset);
  background:    linear-gradient(135deg, rgba(11,79,188,0.45), rgba(154,20,248,0.45));
}
.settings-page-body-profile-photo img { border-radius: 50%; width: 85%; height: 85%; }
.settings-page-body-profile-info { display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.settings-page-body-nickname-container {
  display:         flex;
  align-items:     center;
  gap:             6px;
  position:        relative;
  flex:            1;
  justify-content: flex-end;
  min-width:       0;
  max-width:       100%;
}
.settings-page-body-nickname-input {
  font-size:      16px;
  font-weight:    600;
  background:     transparent;
  border:         none;
  color:          white;
  text-align:     right;
  padding:        4px 6px;
  border-radius:  var(--r-sm);
  transition:     all var(--t-med);
  flex:           1;
  min-width:      0;
  max-width:      150px;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.settings-page-body-nickname-input:focus     { outline: 2px solid var(--c-white-50); background: var(--c-white-10); }
.settings-page-body-nickname-input:read-only { cursor: default; }
.settings-page-body-nickname-edit-btn {
  background:    var(--c-white-10);
  border:        1px solid var(--c-white-30);
  border-radius: 6px;
  padding:       5px 8px;
  color:         white;
  cursor:        pointer;
  transition:    all var(--t-med);
  display:       flex;
  align-items:   center;
  justify-content:center;
  font-size:     11px;
  flex-shrink:   0;
  white-space:   nowrap;
}
.settings-page-body-nickname-edit-btn:hover  { background: var(--c-white-20); }
.settings-page-body-nickname-edit-btn:active { transform: scale(0.95); }
.settings-page-body-nickname   { font-size: 20px; font-weight: bold; }
.settings-page-body-level-info { font-size: 14px; font-weight: bold; }
.settings-page-body-coins-info { font-size: 18px; font-weight: bold; }
.settings-page-body-coins-icon { color: var(--c-gold); }
.settings-page-body-coins-text { font-size: 13px; font-weight: lighter; margin-left: 5px; }
.settings-page-body-profile-buttons { display: flex; align-items: center; justify-content: space-around; }
.settings-page-body-theme-market-button,
.settings-page-body-edit-profile-button {
  padding:        10px;
  border:         1px solid var(--c-white-10);
  width:          43%;
  color:          white;
  border-radius:  13px;
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            10px;
  background:     var(--grad-btn);
  box-shadow:     var(--shadow-block);
  font-weight:    600;
  font-size:      15px;
}
.settings-page-body-theme-market-button:active,
.settings-page-body-edit-profile-button:active {
  box-shadow: 0 0 1px #888, 2px 2px 4px rgba(68,68,68,0.25), -2px 2px 4px rgba(68,68,68,0.25);
  transform:  translateY(2px);
}
.settings-page-body-premium-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.settings-page-body-premium-title  { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 18px; font-weight: 600; }
.settings-page-body-premium-check-icon {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  background:    var(--grad-btn);
  display:       flex;
  align-items:   center;
  justify-content:center;
  color:         #fff;
  font-size:     14px;
  border:        1px solid var(--c-white-10);
  box-shadow:    var(--shadow-inset);
}
.settings-page-body-premium-manage-btn {
  background:     var(--grad-btn);
  border:         1px solid var(--c-white-10);
  color:          white;
  padding:        6px 12px;
  border-radius:  7px;
  font-size:      12px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow:     var(--shadow-block);
}
.settings-page-body-premium-manage-btn:active {
  box-shadow: 0 0 1px #888, 2px 2px 4px rgba(68,68,68,0.25);
  transform:  translateY(2px);
}
.next-billing       { color: #8b92b0; font-size: 13px; margin-bottom: 25px; }
.subscription-label { color: #8b92b0; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-weight: 600; }
.progress-container { display: flex; align-items: center; gap: 12px; }
.progress-bar {
  flex:          1;
  height:        8px;
  background:    var(--c-white-20);
  border-radius: 10px;
  overflow:      hidden;
  position:      relative;
  border:        1px solid var(--c-white-10);
}
.progress-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--c-purple) 0%, #00a8cc 100%);
  border-radius: 10px;
  width:         50%;
  transition:    width var(--t-med);
  box-shadow:    0 0 10px rgba(0,212,255,0.5);
}
.progress-text { font-size: 13px; font-weight: 600; min-width: 80px; text-align: right; }
.settings-page-body-settings-container { display: flex; flex-direction: column; gap: 20px; }
.settings-page-body-settings-text { font-size: 17px; font-weight: bold; }
.settings-page-body-layout-item {
  display:        flex;
  gap:            10px;
  border:         1px solid white;
  padding:        20px;
  border-radius:  13px !important;
  background:     var(--grad-btn);
  box-shadow:     var(--shadow-inset);
  justify-content:space-between;
  align-items:    center;
  overflow:       auto;
  position:       relative;
}
.settings-page-body-layout-item-icon-text { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.settings-page-body-layout-item-subtext   { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 4px; }

.settings-page-toggle-btn {
  width:         45px;
  border:        2px solid white;
  border-radius: 15px;
  padding:       3px;
  display:       flex;
  align-items:   center;
  background:    rgba(128,0,128,0.1);
  transition:    background .5s ease;
  cursor:        pointer;
}
.settings-page-toggle-btn.active               { background: rgba(128,0,128,1); }
.settings-page-toggle-btn.active .settings-page-toggle { transform: translateX(20px); }
.settings-page-toggle {
  background:    white;
  width:         20px;
  height:        20px;
  border-radius: 50%;
  transition:    .3s ease;
}
.settings-page-body-layout-item-icon-text span {
  border:         1px solid rgba(154,20,248,0.40);
  border-radius:  10px;
  padding:        0;
  display:        flex;
  align-items:    center;
  justify-content:center;
  box-shadow:     var(--shadow-inset), 0 0 8px rgba(154,20,248,0.15);
  width:          34px;
  height:         34px;
  background:     linear-gradient(135deg, rgba(154,20,248,0.22), rgba(11,79,188,0.22));
  color:          rgba(210,170,255,0.95);
  font-size:      15px;
  flex-shrink:    0;
}
.settings-page-body-layout-item-icon-text span i,
.settings-page-body-layout-item-icon-text span svg {
  color:   inherit;
  display: block;
}
.settings-page-body-layout-item-value-text {
  display:     flex;
  align-items: center;
  gap:         8px;
  color:       rgba(255,255,255,0.75);
  font-size:   14px;
  font-weight: 500;
  flex-shrink: 0;
}

.statistics-page-exit-button i,
.game-modes-page-exit-button i,
.settings-page-exit-button i {
  color:     rgba(255,255,255,0.9);
  font-size: 13px;
}
.statistics-page-share-button i { color: rgba(100,220,160,0.9); }
.game-modes-page-body-24hours-box-icon i,
.game-modes-page-body-difficulty-box-icon i,
.game-modes-page-body-point-mode-icon i,
.game-modes-page-body-hint-mode-icon i {
  color: white;
  font-size: 20px;
}
.settings-page-body-layout-item > .settings-page-body-layout-item-icon-text {
  color: rgba(255,255,255,0.95);
}
.settings-page-body-layout-item > .settings-page-body-layout-item-icon-text > div {
  font-size:   15px;
  font-weight: 600;
  color:       rgba(255,255,255,0.95);
}
.how-to-play-section-title i { color: rgba(180,130,255,0.9) !important; }
.daily-lock-modal-icon i       { color: rgba(255,200,50,0.9); }
.daily-lock-modal-overall-stat-icon i { color: rgba(200,160,255,0.9); }
.settings-page-language-wrapper { position: relative; margin-bottom: 0; }
.settings-page-language-wrapper.has-dropdown-open { margin-bottom: 12px; }
.settings-page-language-wrapper.has-dropdown-open + .settings-page-body-layout-item { margin-top: 12px; }
.settings-page-language-dropdown {
  margin-top:    8px;
  border:        1px solid var(--c-white-30);
  border-radius: 13px;
  background:    rgba(255,255,255,0.05);
  overflow:      hidden;
  animation:     slideDown 0.3s ease;
  box-shadow:    0 4px 12px var(--c-black-20),
                 inset 0 2px 4px rgba(0,0,0,0.1);
  position:      relative;
  z-index:       10;
}
@keyframes slideDown {
  from { opacity:0; transform: translate3d(0,-10px,0); }
  to   { opacity:1; transform: translate3d(0,0,0); }
}
.settings-page-language-option {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         15px 20px;
  cursor:          pointer;
  transition:      background var(--t-med);
  border-bottom:   1px solid var(--c-white-10);
}
.settings-page-language-option:last-child { border-bottom: none; }
.settings-page-language-option:hover      { background: var(--c-white-10); }
.settings-page-language-option.active     { background: rgba(11,79,188,0.3); }
.settings-page-language-option.active i   { display: inline-block !important; color: white; }

/* ====== ACCOUNT / LOGOUT ====== */
body.logged-in #settings-account-actions-box { display: block !important; }
body.logged-in #settings-logout-button       { display: flex !important; }
.settings-page-logout-button {
  width:          100%;
  padding:        15px 20px;
  border:         1px solid rgba(255,100,100,0.5);
  border-radius:  13px;
  background:     linear-gradient(135deg, rgba(220,50,50,0.3), rgba(180,30,30,0.3));
  color:          white;
  font-size:      16px;
  font-weight:    600;
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            10px;
  cursor:         pointer;
  transition:     all var(--t-med);
  box-shadow:     var(--shadow-inset);
}
.settings-page-logout-button:hover  { background: linear-gradient(135deg, rgba(220,50,50,0.4), rgba(180,30,30,0.4)); border-color: rgba(255,100,100,0.7); }
.settings-page-logout-button:active { transform: translateY(2px); box-shadow: var(--shadow-inset); }

.settings-page-body-branding-text {
  text-align: center;
  font-size:  15px;
}
.settings-page-body-branding-copyright {
  display:     flex;
  justify-content:center;
  align-items: center;
  gap:         5px;
  font-size:   13px;
  color:       rgba(255,255,255,0.7);
  margin-top:  5px;
}
.settings-account-buttons-wrapper { display: flex; flex-direction: column; gap: 15px; padding: 20px 0; }
.settings-account-btn { width: 100%; }

/* ====== WIN / LOSE MODAL ====== */
.win-modal, .lose-modal {
  position:       fixed;
  inset:          0;
  z-index:        5000;
  display:        none;
  align-items:    center;
  justify-content:center;
  opacity:        0;
  transition:     opacity var(--t-med);
}
.win-modal.active, .lose-modal.active { display: flex; opacity: 1; }
.win-modal-overlay, .lose-modal-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.win-modal-content, .lose-modal-content {
  position:   relative;
  z-index:    1;
  background: var(--grad-panel);
  border:     2px solid var(--c-white-30);
  border-radius: var(--r-xl);
  padding:    40px;
  max-width:  500px;
  width:      90%;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--shadow-inset);
  transform:  scale(0.8);
  opacity:    0;
  transition: transform 0.4s cubic-bezier(.16,1,.3,1), opacity 0.4s ease;
}
.win-modal.active .win-modal-content,
.lose-modal.active .lose-modal-content { transform: scale(1); opacity: 1; }

.win-modal-close-btn, .lose-modal-close-btn {
  position:       absolute;
  top:            15px; right: 15px;
  width:          35px; height: 35px;
  border:         1px solid var(--c-white-30);
  border-radius:  50%;
  background:     var(--c-white-10);
  color:          white;
  font-size:      16px;
  display:        flex;
  align-items:    center;
  justify-content:center;
  cursor:         pointer;
  transition:     all var(--t-med);
  z-index:        10;
  box-shadow:     var(--shadow-inset);
}
.win-modal-close-btn:hover, .lose-modal-close-btn:hover { background: var(--c-white-20); transform: scale(1.1); }
.win-modal-close-btn:active,.lose-modal-close-btn:active { transform: scale(0.95); }
.win-modal-header,.lose-modal-header { text-align: center; margin-bottom: 30px; }
.win-modal-title,.lose-modal-title   { font-size: 32px; font-weight: bold; color: white; margin-bottom: 10px; }
.win-modal-subtitle,.lose-modal-subtitle { font-size: 18px; color: rgba(255,255,255,0.8); }
.win-modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.win-modal-stat-box {
  background:    var(--c-white-10);
  border:        1px solid var(--c-white-20);
  border-radius: 15px;
  padding:       20px;
  text-align:    center;
  box-shadow:    var(--shadow-inset);
}
.win-modal-stat-icon  { font-size: 24px; color: var(--c-gold); margin-bottom: 10px; }
.win-modal-stat-value { font-size: 28px; font-weight: bold; color: white; margin-bottom: 5px; }
.win-modal-stat-label { font-size: 14px; color: rgba(255,255,255,0.7); }
.win-modal-cta,.lose-modal-cta {
  background:    var(--c-white-10);
  border:        1px solid var(--c-white-20);
  border-radius: 15px;
  padding:       20px;
  margin-bottom: 20px;
  text-align:    center;
}
.win-modal-cta-text,.lose-modal-cta-text { color: rgba(255,255,255,0.9); font-size: 16px; margin-bottom: 15px; }
.win-modal-cta-buttons,.lose-modal-cta-buttons { display: flex; gap: 10px; justify-content: center; }
.win-modal-actions,.lose-modal-actions { display: flex; gap: 15px; justify-content: center; }
.win-modal-btn,.lose-modal-btn {
  padding:        12px 24px;
  border:         1px solid var(--c-white-30);
  border-radius:  var(--r-md);
  background:     linear-gradient(135deg, rgba(11,79,188,0.6), rgba(154,20,248,0.6));
  color:          white;
  font-size:      16px;
  font-weight:    600;
  cursor:         pointer;
  transition:     all var(--t-med);
  box-shadow:     var(--shadow-block);
}
.win-modal-btn:hover,.lose-modal-btn:hover {
  transform:  translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35), var(--shadow-block);
}
.win-modal-btn:active,.lose-modal-btn:active {
  transform:  translateY(0);
  box-shadow: 0 0 1px #888, 2px 2px 4px rgba(68,68,68,0.25);
}
.win-modal-btn-share      { background: linear-gradient(135deg, rgba(60,180,120,0.6), rgba(30,130,90,0.6)); }
.win-modal-btn-restart,
.lose-modal-btn-restart   { background: linear-gradient(135deg, rgba(154,20,248,0.6), rgba(11,79,188,0.6)); }
.win-modal-btn-login, .win-modal-btn-register,
.lose-modal-btn-login, .lose-modal-btn-register { padding: 10px 20px; font-size: 14px; }

/* ====== LOSE MODAL EXTRAS ====== */
.lose-modal-answer {
  background:    var(--c-white-10);
  border:        1px solid var(--c-white-20);
  border-radius: 15px;
  padding:       25px;
  margin-bottom: 25px;
  text-align:    center;
  box-shadow:    var(--shadow-inset);
}
.lose-modal-answer-label  { font-size: 16px; color: rgba(255,255,255,0.8); margin-bottom: 15px; }
.lose-modal-answer-value  { font-size: 42px; font-weight: bold; color: white; letter-spacing: 4px; font-family: monospace; }
.lose-modal-motivation    {
  background:    rgba(255,255,255,0.05);
  border:        1px solid var(--c-white-10);
  border-radius: 15px;
  padding:       20px;
  margin-bottom: 25px;
  text-align:    center;
}
.lose-modal-motivation-text { font-size: 16px; color: rgba(255,255,255,0.9); line-height: 1.6; }
.lose-modal-actions     { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; }
.lose-modal-btn-share   {
  background:     linear-gradient(135deg, rgba(60,180,120,0.6), rgba(30,130,90,0.6));
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            10px;
}
.lose-modal-bonus-text { font-size: 14px; color: rgba(255,215,0,0.9); text-align: center; animation: bonusPulse 2s ease-in-out infinite; }
.lose-modal-bonus-text.bonus-used    { color: rgba(255,255,255,0.5); animation: none; }
.lose-modal-bonus-text.bonus-granted { color: rgba(100,255,100,1); font-weight: bold; }
@keyframes bonusPulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50%       { opacity:0.7; transform:scale(1.02); }
}

/* ====== HOW TO PLAY MODAL ====== */
.how-to-play-modal {
  position:       fixed;
  inset:          0;
  z-index:        5000;
  display:        flex;
  align-items:    center;
  justify-content:center;
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transition:     opacity 0.4s ease, visibility 0.4s ease;
}
.how-to-play-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
.how-to-play-modal-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity:    0;
  transition: opacity 0.4s ease;
}
.how-to-play-modal.active .how-to-play-modal-overlay { opacity: 1; }
.how-to-play-modal-content {
  position:      relative;
  z-index:       1;
  background:    var(--grad-panel);
  border:        2px solid var(--c-white-30);
  border-radius: 0;
  padding:       40px;
  max-width:     600px;
  width:         90%;
  max-height:    90vh;
  max-height:    90dvh;
  overflow-y:    auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,120,255,0.6) var(--c-white-10);
  box-shadow:    0 20px 60px rgba(0,0,0,0.5), var(--shadow-inset);
  transform:     scale(0.9) translateY(30px);
  opacity:       0;
  transition:    transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.6s ease;
}
.how-to-play-modal.active .how-to-play-modal-content { transform: scale(1) translateY(0); opacity: 1; }
.how-to-play-modal-close-btn {
  position:       absolute;
  top:            15px; right: 15px;
  width:          35px; height: 35px;
  border:         1px solid var(--c-white-30);
  border-radius:  50%;
  background:     var(--c-white-10);
  color:          white;
  font-size:      16px;
  display:        flex;
  align-items:    center;
  justify-content:center;
  cursor:         pointer;
  transition:     all var(--t-med);
  z-index:        10;
  box-shadow:     var(--shadow-inset);
}
.how-to-play-modal-close-btn:hover  { background: var(--c-white-20); transform: scale(1.1); }
.how-to-play-modal-close-btn:active { transform: scale(0.95); }
.how-to-play-modal-header  { text-align: center; margin-bottom: 30px; }
.how-to-play-modal-title   { font-size: 32px; font-weight: bold; color: white; margin-bottom: 10px; }
.how-to-play-modal-subtitle{ font-size: 16px; color: rgba(255,255,255,0.8); }
.how-to-play-modal-body    { display: flex; flex-direction: column; gap: 25px; margin-bottom: 30px; }
.how-to-play-section {
  background:    rgba(255,255,255,0.05);
  border:        1px solid var(--c-white-10);
  border-radius: 15px;
  padding:       20px;
}
.how-to-play-section-title { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: bold; color: white; margin-bottom: 15px; }
.how-to-play-section-title i { font-size: 24px; color: rgba(154,20,248,0.9); }
.how-to-play-section-text  { font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.6; }
.how-to-play-feedback-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom:12px;
  padding:     10px;
  background:  rgba(255,255,255,0.03);
  border-radius:var(--r-sm);
}
.how-to-play-feedback-item:last-child { margin-bottom: 0; }
.how-to-play-feedback-color {
  width:         24px; height: 24px;
  border-radius: 50%;
  border:        2px solid var(--c-white-30);
  flex-shrink:   0;
}
.how-to-play-mode-item {
  margin-bottom: 10px;
  padding:       10px;
  background:    rgba(255,255,255,0.03);
  border-radius: var(--r-sm);
}
.how-to-play-mode-item:last-child { margin-bottom: 0; }
.how-to-play-modal-actions { display: flex; justify-content: center; gap: 15px; }
.how-to-play-modal-btn {
  padding:       14px 32px;
  border:        2px solid var(--c-white-30);
  border-radius: var(--r-md);
  background:    linear-gradient(135deg, rgba(154,20,248,0.8), rgba(11,79,188,0.8));
  color:         white;
  font-size:     16px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--t-med);
  box-shadow:    var(--shadow-inset);
}
.how-to-play-modal-btn:hover  { background: var(--grad-brand); transform: translateY(-2px); box-shadow: 0 4px 12px var(--c-purple-a55), var(--shadow-inset); }
.how-to-play-modal-btn:active { transform: translateY(0); }

/* ====== DAILY LOCK MODAL ====== */
.daily-lock-modal {
  position:       fixed;
  inset:          0;
  z-index:        5000;
  display:        flex;
  align-items:    center;
  justify-content:center;
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transition:     opacity 0.4s ease, visibility 0.4s ease;
}
.daily-lock-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
.daily-lock-modal-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity:    0;
  transition: opacity 0.4s ease;
}
.daily-lock-modal.active .daily-lock-modal-overlay { opacity: 1; }
.daily-lock-modal-content {
  position:      relative;
  z-index:       1;
  background:    var(--grad-panel);
  border:        2px solid var(--c-white-30);
  border-radius: var(--r-xl);
  padding:       40px;
  max-width:     500px;
  width:         90%;
  max-height:    90vh;
  max-height:    90dvh;
  overflow-y:    auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,120,255,0.6) var(--c-white-10);
  box-shadow:    0 20px 60px rgba(0,0,0,0.5), var(--shadow-inset);
  transform:     scale(0.9) translateY(30px);
  opacity:       0;
  transition:    transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.6s ease;
}
.daily-lock-modal.active .daily-lock-modal-content { transform: scale(1) translateY(0); opacity: 1; }
.daily-lock-modal-header { text-align: center; margin-bottom: 30px; }
.daily-lock-modal-icon   { font-size: 60px; color: rgba(255,200,50,0.9); margin-bottom: 20px; display: flex; justify-content: center; }
.daily-lock-modal-title  { font-size: 28px; font-weight: bold; color: white; margin-bottom: 10px; }
.daily-lock-modal-subtitle { font-size: 16px; color: rgba(255,255,255,0.8); }
.daily-lock-modal-body   { margin-bottom: 30px; }
.daily-lock-modal-info-box {
  background:    rgba(255,255,255,0.05);
  border:        1px solid var(--c-white-10);
  border-radius: 15px;
  padding:       20px;
  margin-bottom: 20px;
}
.daily-lock-modal-info-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         12px 0;
  border-bottom:   1px solid var(--c-white-10);
}
.daily-lock-modal-info-item:last-child  { border-bottom: none; }
.daily-lock-modal-info-label { font-size: 14px; color: rgba(255,255,255,0.7); }
.daily-lock-modal-info-value { font-size: 16px; font-weight: 600; color: white; }
.daily-lock-modal-stats {
  background:    rgba(255,255,255,0.05);
  border:        1px solid var(--c-white-10);
  border-radius: 15px;
  padding:       20px;
}
.daily-lock-modal-stats-title { font-size: 16px; font-weight: 600; color: white; margin-bottom: 15px; text-align: center; }
.daily-lock-modal-stats-grid  { display: grid; grid-template-columns: 1fr; gap: 12px; }
.daily-lock-modal-stat-item   {
  text-align:    center;
  padding:       15px;
  background:    rgba(255,255,255,0.05);
  border:        1px solid var(--c-white-10);
  border-radius: 12px;
}
.daily-lock-modal-stat-label  { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.daily-lock-modal-stat-value  { font-size: 24px; font-weight: bold; color: white; }
.daily-lock-modal-overall-stats {
  margin-top:    24px;
  padding:       20px;
  background:    rgba(255,255,255,0.05);
  border:        1px solid var(--c-white-10);
  border-radius: 15px;
}
.daily-lock-modal-overall-stats-title { font-size: 16px; font-weight: 600; color: white; margin-bottom: 16px; text-align: center; }
.daily-lock-modal-overall-stats-grid  {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}
.daily-lock-modal-overall-stat-box {
  padding:        14px;
  background:     rgba(255,255,255,0.05);
  border:         1px solid var(--c-white-10);
  border-radius:  12px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
}
.daily-lock-modal-overall-stat-icon-text { display: flex; align-items: center; gap: 10px; }
.daily-lock-modal-overall-stat-icon {
  width:         36px; height: 36px;
  border-radius: 10px;
  display:       flex;
  align-items:   center;
  justify-content:center;
  background:    var(--c-white-10);
  border:        1px solid rgba(255,255,255,0.15);
  color:         rgba(255,255,255,0.95);
  font-size:     16px;
}
.daily-lock-modal-overall-stat-text  { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); letter-spacing: 0.3px; }
.daily-lock-modal-overall-stat-value { font-size: 20px; font-weight: bold; color: white; }
.daily-lock-modal-overall-stat-sub   { font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 500; }
.daily-lock-modal-user-info { margin-bottom: 25px; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 12px; border: 1px solid var(--c-white-10); }
.daily-lock-modal-user-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.daily-lock-modal-user-item:last-child { margin-bottom: 0; }
.daily-lock-modal-user-label { color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 500; }
.daily-lock-modal-user-value { color: white; font-size: 16px; font-weight: 600; }
.daily-lock-modal-actions    { display: flex; justify-content: center; gap: 15px; margin-top: 30px; flex-wrap: wrap; }
.daily-lock-modal-auth-buttons { display: flex; gap: 15px; width: 100%; justify-content: center; }
.daily-lock-modal-btn {
  padding:       14px 40px;
  border:        2px solid var(--c-white-30);
  border-radius: var(--r-md);
  background:    linear-gradient(135deg, rgba(154,20,248,0.8), rgba(11,79,188,0.8));
  color:         white;
  font-size:     16px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--t-med);
  box-shadow:    var(--shadow-inset);
}
.daily-lock-modal-btn:hover  { background: var(--grad-brand); transform: translateY(-2px); box-shadow: 0 4px 12px var(--c-purple-a55), var(--shadow-inset); }
.daily-lock-modal-btn:active { transform: translateY(0); }

/* ====== DATA MANAGEMENT / OFFLINE ====== */
.settings-data-buttons  { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.settings-data-button {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     14px 18px;
  border:      1px solid var(--c-white-20);
  border-radius:var(--r-md);
  background:  var(--c-white-10);
  color:       white;
  font-size:   14px;
  font-weight: 600;
  cursor:      pointer;
  transition:  all 0.2s ease;
  width:       100%;
}
.settings-data-button:hover  { background: var(--c-white-15); border-color: var(--c-white-30); transform: translateX(3px); }
.settings-data-button:active { transform: scale(0.98); }
.settings-data-button span   { font-size: 18px; width: 24px; text-align: center; }
.settings-data-button.success { background: rgba(40,167,69,0.3); border-color: rgba(40,167,69,0.5); }
.settings-data-button-danger  { border-color: rgba(220,80,80,0.4); background: rgba(220,80,80,0.15); }
.settings-data-button-danger:hover { background: rgba(220,80,80,0.25); border-color: rgba(220,80,80,0.6); }

#offline-indicator {
  position:       fixed;
  top:            10px;
  left:           50%;
  transform:      translateX(-50%) translateY(-100px);
  background:     linear-gradient(135deg, #ff6b6b, #ee5a5a);
  color:          white;
  padding:        10px 20px;
  border-radius:  25px;
  font-size:      14px;
  font-weight:    600;
  display:        flex;
  align-items:    center;
  gap:            8px;
  z-index:        100000;
  box-shadow:     0 4px 15px rgba(255,107,107,0.4);
  transition:     transform 0.3s ease-out;
  pointer-events: none;
}
#offline-indicator.visible { transform: translateX(-50%) translateY(0); }
#offline-indicator i       { font-size: 16px; }

/* =====================================================
   RESPONSIVE BREAKPOINTS
   ===================================================== */

/* ====== MOBILE ≤ 1000px ====== */
@media only screen and (max-width: 1000px) {
  :root {
    --block-size:  55px;
    --block-fs:    24px;
    --key-w:       70px;
    --key-h:       48px;
    --key-fs:      15px;
    --navbar-h:    56px;
    --navbar-px:   15px;
    --info-h:      60px;
    --keyboard-pb: calc(15px + env(safe-area-inset-bottom, 0px));
  }

  .main-page-navbar { padding: 0 var(--navbar-px); height: var(--navbar-h); overflow: hidden; }
  .main-page-logo-wrapper   { gap: 8px; flex-shrink: 0; }
  .main-page-navbar-logo    { width: 32px; }
  .main-page-navbar-brand   { font-size: clamp(16px, 4.5vw, 24px); }
  .main-page-navbar-center  { display: flex !important; flex: 1 1 0; min-width: 0; overflow: hidden; }
  .main-page-navbar-game-timer    { display: none !important; }
  .main-page-navbar-countdown     { display: none !important; }
  .mobile-game-timer-bar          { display: flex !important; }
  .main-page-icon-wrapper   { gap: clamp(5px, 2.5vw, 14px); flex-shrink: 0; }
  .main-page-icon {
    width:     clamp(32px, 8vw, 42px);
    height:    clamp(32px, 8vw, 42px);
    font-size: clamp(13px, 3.8vw, 18px);
    border-radius: 10px;
  }

  .main-page-keyboard-wrapper {
    position:       fixed;
    bottom:         0; left: 0; right: 0;
    z-index:        2050;
    background:     transparent;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    padding:        8px 0 calc(12px + env(safe-area-inset-bottom, 0px)) 0;
  }
  .main-page-body {
    padding-bottom: calc(300px + env(safe-area-inset-bottom, 0px));
  }
  .main-page-blocks,
  .main-page-keyboard,
  .main-page-info-text-wrapper { width: 92%; }

  .main-page-blocks-layout  { row-gap: 7px; column-gap: 5px; }
  .main-page-keyboard-layout{ column-gap: 4px; row-gap: 8px; }
  .main-page-info-text      { font-size: 13px; }
  .main-page-info-text-wrapper { gap: 10px; }

  .mobile-countdown-bar {
    width:        75%;
    box-shadow:   0 0 18px rgba(154,20,248,0.35), 0 0 32px rgba(11,79,188,0.22), var(--shadow-inset);
    border-color: rgba(154,20,248,0.35);
    display:      flex;
  }

  .main-page-win-trophy-icon { font-size: 180px; }
  .main-page-restart-btn     { width: 200px; height: 50px; font-size: 15px; }
  .main-page-message-box     { width: 220px; height: 60px; font-size: 14px; }

  .statistics-page { height: 75dvh; max-height: 90dvh; min-height: 40dvh; border-radius: 0; }
  .statistics-page-header     { padding: 0 clamp(16px, 5vw, 50px); height: clamp(52px, 9vh, 72px); }
  .statistics-page-header-text { font-size: clamp(15px, 4.5vw, 22px); }
  .statistics-page-header-end { width: auto; gap: 10px; }
  .statistics-page-share-button { font-size: clamp(11px, 3vw, 14px); padding: 6px clamp(8px, 2.5vw, 14px); }
  .statistics-page-exit-button,
  .game-modes-page-exit-button,
  .settings-page-exit-button   { height: 32px; width: 32px; border-radius: 10px; }

  .game-modes-page { width: 100%; }
  .settings-page   { width: 100%; }

  .statistics-page-body { padding: clamp(16px, 4vw, 40px); }
  .statistics-page-body-layout  { gap: 40px; }
  .statistics-page-body-info-layout { gap: clamp(10px, 3vw, 20px); }
  .statistics-page-body-info-box { padding: clamp(12px, 3vw, 20px); flex-direction: column; min-height: auto; }
  .statistics-page-body-info-box-icon { width: 36px; height: 36px; }
  .statistics-page-body-info-box-text { font-size: clamp(11px, 3vw, 15px); }
  .statistics-page-body-info-box-icon-text { gap: 10px; }
  .statistics-page-body-info-box-sub-info { font-size: clamp(9px, 2.5vw, 13px); }
  .statistics-page-body-info { font-size: clamp(20px, 6vw, 28px); }
  .statistics-page-body-weekly-series-title { font-size: clamp(15px, 4.5vw, 22px); }
  .statistics-page-body-todays-challenge-title { font-size: clamp(16px, 5vw, 24px); }
  .statistics-page-body-todays-challenge-info-box-text { font-size: clamp(12px, 3.5vw, 16px); }
  .statistics-page-body-todays-challenge-info-box-value-text { font-size: clamp(13px, 3.8vw, 17px); }

  .game-modes-page-header-text,
  .settings-page-header-text { font-size: clamp(16px, 5vw, 24px); }
  .game-modes-page-body-24hours-title { font-size: clamp(16px, 5vw, 22px); }
  .game-modes-page-body-24hours-text  { font-size: clamp(12px, 3.5vw, 16px); }
  .game-modes-page-body-difficulty-title,
  .game-modes-page-body-point-mode-title,
  .game-modes-page-body-hint-mode-title { font-size: clamp(14px, 4vw, 18px); }
  .game-modes-page-body-difficulty-text,
  .game-modes-page-body-point-mode-text,
  .game-modes-page-body-hint-mode-text  { font-size: clamp(12px, 3.2vw, 15px); }

  .settings-page-body-nickname   { font-size: clamp(15px, 4.5vw, 20px); }
  .settings-page-body-level-info { font-size: clamp(11px, 3vw, 14px); }
  .settings-page-body-coins-info { font-size: clamp(14px, 4vw, 18px); }
  .settings-page-body-settings-text { font-size: clamp(14px, 4vw, 17px); }
  .settings-page-body-layout-item > .settings-page-body-layout-item-icon-text > div {
    font-size: clamp(12px, 3.5vw, 15px);
  }
  .settings-page-body-layout-item-subtext { font-size: clamp(10px, 2.8vw, 12px); }
  .settings-page-logout-button { font-size: clamp(13px, 4vw, 16px); }

  /* Modallar */
  .win-modal-content, .lose-modal-content {
    max-width: clamp(300px, 88vw, 500px);
    width:     clamp(300px, 88vw, 500px);
    padding:   clamp(20px, 5vw, 36px) clamp(16px, 5vw, 30px);
    border-radius: 18px;
  }
  .how-to-play-modal-content {
    max-width: clamp(300px, 88vw, 560px);
    width:     clamp(300px, 88vw, 560px);
    padding:   clamp(20px, 5vw, 36px) clamp(16px, 5vw, 30px);
  }
  .daily-lock-modal-content {
    max-width: clamp(300px, 88vw, 500px);
    width:     clamp(300px, 88vw, 500px);
    padding:   clamp(20px, 5vw, 36px) clamp(16px, 5vw, 30px);
    border-radius: 18px;
  }
  .win-modal-title, .lose-modal-title,
  .how-to-play-modal-title, .daily-lock-modal-title {
    font-size: clamp(18px, 5.5vw, 28px);
  }
  .win-modal-subtitle, .lose-modal-subtitle,
  .how-to-play-modal-subtitle, .daily-lock-modal-subtitle {
    font-size: clamp(12px, 3.5vw, 17px);
  }
  .win-modal-stat-value { font-size: clamp(16px, 5vw, 24px); }
  .win-modal-stat-label { font-size: clamp(9px, 2.5vw, 13px); }
  .win-modal-stats      { gap: clamp(6px, 2vw, 14px); }
  .win-modal-stat-box   { padding: clamp(10px, 3vw, 18px) clamp(8px, 2.5vw, 14px); }
  .win-modal-btn, .lose-modal-btn,
  .how-to-play-modal-btn, .daily-lock-modal-btn {
    font-size: clamp(13px, 3.5vw, 16px);
    padding:   clamp(10px, 3vw, 14px) clamp(16px, 5vw, 28px);
  }
  .win-modal-actions, .lose-modal-actions { flex-direction: column; gap: 10px; }
  .win-modal-btn, .lose-modal-btn { width: 100%; padding: 12px 20px; }
  .lose-modal-answer-value { font-size: clamp(22px, 7vw, 36px); letter-spacing: 2px; }
}

/* ====== KÜÇÜK DİKEY EKRANLAR: ≤ 667px yükseklik ====== */
@media only screen and (max-height: 667px) {
  :root {
    --block-size:   44px;
    --block-fs:     19px;
    --key-w:        68px;
    --key-h:        40px;
    --key-fs:       13px;
    --navbar-h:     40px;
    --info-h:       44px;
    --keyboard-pb:  calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .main-page-navbar { height: var(--navbar-h) !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .main-page-navbar-brand { font-size: 18px; }
  .main-page-navbar-logo  { width: 26px; }
  .main-page-icon         { width: 30px; height: 30px; font-size: 14px; }
  .main-page-blocks { margin-top: 6px !important; }
  .main-page-blocks-layout { gap: 5px; }
  .mobile-game-timer-bar { padding: 0; }
  .mobile-game-timer-bar .mobile-game-timer-inner { padding: 5px 12px; font-size: 11px; gap: 6px; }
  .main-page-info-text-wrapper { height: var(--info-h); gap: 10px; }
  .main-page-info-text { font-size: 10px; padding: 4px 6px; }
  .main-page-keyboard-wrapper { gap: 4px; padding-top: 5px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .main-page-keyboard-layout  { row-gap: 5px; column-gap: 4px; }
  .main-page-keyboard-btn { height: var(--key-h); font-size: var(--key-fs); border-radius: 9px; }
  .main-page-body { padding-bottom: calc(235px + env(safe-area-inset-bottom, 0px)) !important; }
  .main-page-restart-btn { width: 160px; height: 40px; font-size: 13px; }
}

/* ====== ÇOK KÜÇÜK DİKEY EKRANLAR: ≤ 568px yükseklik ====== */
@media only screen and (max-height: 568px) {
  :root {
    --block-size:   38px;
    --block-fs:     16px;
    --key-w:        62px;
    --key-h:        36px;
    --key-fs:       12px;
    --navbar-h:     36px;
    --info-h:       36px;
    --keyboard-pb:  calc(4px + env(safe-area-inset-bottom, 0px));
  }

  .main-page-navbar { height: var(--navbar-h) !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .main-page-navbar-brand { font-size: 16px; }
  .main-page-navbar-logo  { width: 22px; }
  .main-page-icon         { width: 28px; height: 28px; font-size: 13px; }
  .main-page-blocks { margin-top: 4px !important; }
  .main-page-blocks-layout { gap: 4px; }
  .mobile-game-timer-bar { padding: 0; }
  .mobile-game-timer-bar .mobile-game-timer-inner { padding: 4px 10px; font-size: 10px; gap: 5px; }
  .main-page-info-text-wrapper { height: var(--info-h); gap: 8px; }
  .main-page-info-text { font-size: 9px; padding: 3px 5px; }
  .main-page-keyboard-wrapper { gap: 3px; padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .main-page-keyboard-layout  { row-gap: 4px; column-gap: 3px; }
  .main-page-keyboard-btn { height: var(--key-h); font-size: var(--key-fs); border-radius: 8px; }
  .main-page-body { padding-bottom: calc(205px + env(safe-area-inset-bottom, 0px)) !important; }
  .main-page-restart-btn { width: 140px; height: 36px; font-size: 11px; }
}

/* ====== AŞIRI KISA: ≤ 480px yükseklik ====== */
@media only screen and (max-height: 480px) {
  :root {
    --block-size:   32px;
    --block-fs:     14px;
    --key-w:        56px;
    --key-h:        32px;
    --key-fs:       11px;
    --navbar-h:     32px;
    --info-h:       30px;
  }

  .main-page-navbar { height: var(--navbar-h) !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .main-page-navbar-brand { font-size: 14px; }
  .main-page-navbar-logo  { width: 20px; }
  .main-page-icon         { width: 26px; height: 26px; font-size: 12px; }
  .main-page-icon-wrapper { gap: 4px; }
  .main-page-blocks-layout { gap: 3px; }
  .mobile-game-timer-bar .mobile-game-timer-inner { padding: 3px 8px; font-size: 9px; gap: 4px; }
  .mobile-game-timer-bar i { font-size: 9px; }
  .main-page-info-text-wrapper { height: var(--info-h); gap: 6px; }
  .main-page-info-text { font-size: 8px; padding: 2px 4px; }
  .main-page-keyboard-wrapper { gap: 2px; padding-top: 3px; padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px)); }
  .main-page-keyboard-layout { row-gap: 3px; column-gap: 3px; }
  .main-page-keyboard-btn    { height: var(--key-h); font-size: var(--key-fs); border-radius: 7px; }
  .main-page-body { padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important; }
  .main-page-restart-btn { width: 120px; height: 32px; font-size: 10px; }
}

/* ====== MOBILE SMALL ≤ 480px (width) ====== */
@media only screen and (max-width: 480px) {
  :root { --key-w: 65px; --navbar-h: 52px; }

  .win-modal-content, .lose-modal-content,
  .how-to-play-modal-content, .daily-lock-modal-content {
    max-width: 92vw;
    width:     92vw;
    padding:   22px 15px;
    border-radius: 16px;
  }
  .win-modal-title, .lose-modal-title,
  .how-to-play-modal-title, .daily-lock-modal-title {
    font-size: clamp(16px, 5.5vw, 22px);
  }
  .win-modal-subtitle, .lose-modal-subtitle {
    font-size: clamp(11px, 3.5vw, 14px);
  }
  .lose-modal-answer-value { font-size: clamp(20px, 6vw, 28px); letter-spacing: 2px; }
  .win-modal-btn, .lose-modal-btn,
  .how-to-play-modal-btn, .daily-lock-modal-btn {
    font-size: clamp(12px, 4vw, 15px);
    width: 100%;
  }
  .win-modal-actions, .lose-modal-actions,
  .how-to-play-modal-actions, .daily-lock-modal-actions { flex-direction: column; gap: 10px; }

  .statistics-page-header  { padding: 0 14px; }
  .statistics-page-header-text { font-size: clamp(13px, 4.5vw, 18px); }
  .statistics-page-header-end  { width: auto; gap: 8px; }
  .statistics-page-share-button {
    font-size: clamp(10px, 3vw, 13px);
    padding:   5px 10px;
    gap:       5px;
  }
  .statistics-page-exit-button,
  .game-modes-page-exit-button,
  .settings-page-exit-button { width: 28px; height: 28px; }
  .statistics-page-body { padding: 14px; }
  .statistics-page-body-info-layout { grid-template-columns: 1fr 1fr; gap: 10px; }
  .statistics-page-body-info-box { padding: 12px; min-height: 90px; }
  .statistics-page-body-info { font-size: clamp(18px, 5.5vw, 24px); }
  .statistics-page-body-weekly-series-layout,
  .statistics-page-body-todays-challenge-layout { padding: 18px; }
  .statistics-page-body-weekly-day { width: 44px; min-height: 88px; }
  .statistics-page-body-weekly-day-text { font-size: 11px; }
  .statistics-page-body-weekly-series-days-column { gap: 8px; }

  .game-modes-page-body-24hours-box { padding: 16px; flex-direction: column; gap: 12px; text-align: center; }
  .game-modes-page-body-24hours-texts { margin-left: 0; align-items: center; }
  .game-modes-page-body-24hours-title { font-size: clamp(14px, 5vw, 18px); }
  .game-modes-page-body-24hours-text  { font-size: clamp(11px, 3.5vw, 14px); }
  .game-modes-page-body-24hours-badge { font-size: 10px; padding: 6px 12px; }
  .game-modes-page-header-text,
  .settings-page-header-text { font-size: clamp(15px, 5vw, 20px); }
  .game-modes-page-body-difficulty-box,
  .game-modes-page-body-point-mode-box,
  .game-modes-page-body-hint-mode-box { padding: 16px; }
  .game-modes-page-blurred-container { min-height: 300px; }
  .game-modes-page-coming-soon-label { font-size: 14px; padding: 6px 14px; }

  .settings-page-body-layout { padding: 15px; gap: 24px; }
  .settings-page-body-box { padding: 15px; }
  .settings-page-body-profile-photo { width: 72px; height: 72px; }
  .settings-page-body-nickname { font-size: clamp(14px, 4.5vw, 18px); }
  .settings-page-body-coins-info { font-size: clamp(13px, 4vw, 16px); }
  .settings-page-logout-button { padding: 12px 16px; font-size: clamp(12px, 3.8vw, 15px); }
  #offline-indicator { padding: 8px 16px; font-size: 12px; top: 5px; }
}

/* ====== MOBILE MD ≤ 768px ====== */
@media only screen and (max-width: 768px) {
  .game-modes-page-blurred-container    { min-height: 350px; }
  .game-modes-page-coming-soon-label    { font-size: 15px; padding: 8px 16px; }
  .daily-lock-modal-user-info           { padding: 15px; margin-bottom: 18px; }
  .daily-lock-modal-user-item           { flex-direction: column; align-items: flex-start; gap: 8px; }
  .daily-lock-modal-auth-buttons        { flex-direction: column; gap: 10px; }
  .daily-lock-modal-btn-login,
  .daily-lock-modal-btn-register        { max-width: 100%; width: 100%; }
  .account-info-modal                   { padding: 0 20px; box-sizing: border-box; }
  .account-info-modal-content           { width: 100%; max-width: none; padding: 28px 24px; }
  .settings-account-info-inline         { display: none !important; }
  .settings-page-account-info-mobile-row{ display: block !important; }
}
@media only screen and (min-width: 769px) {
  .settings-page-account-info-mobile-row { display: none !important; }
}

/* ====== TABLET 768px–1024px ====== */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  :root {
    --block-size: 65px;
    --block-fs:   28px;
    --key-w:      85px;
    --key-h:      50px;
    --key-fs:     16px;
    --navbar-h:   68px;
    --navbar-px:  40px;
  }

  .main-page-logo-wrapper  { gap: 12px; }
  .main-page-navbar-logo   { width: 50px; }
  .main-page-navbar-brand  { font-size: 32px; }
  .main-page-icon-wrapper  { gap: 25px; }
  .main-page-icon          { font-size: 20px; padding: 10px; }
  .main-page-navbar-center { display: flex; gap: 20px; }
  .main-page-navbar-countdown { font-size: 14px; padding: 6px 12px; }

  .main-page-blocks,
  .main-page-keyboard,
  .main-page-info-text-wrapper { width: 85%; max-width: 550px; }
  .main-page-blocks-layout  { row-gap: 8px; column-gap: 6px; }
  .main-page-keyboard-layout{ column-gap: 5px; row-gap: 8px; }
  .main-page-info-text      { font-size: 14px; }
  .main-page-restart-btn    { width: 220px; height: 55px; font-size: 16px; }
  .main-page-message-box    { width: 260px; height: 70px; font-size: 15px; }

  .settings-page      { width: 75%; }
  .game-modes-page    { width: 75%; }
  .statistics-page    { width: 100%; height: 75dvh; max-height: 90dvh; min-height: 40dvh; }

  .statistics-page-header  { padding: 0 40px; height: 70px; }
  .statistics-page-header-text { font-size: clamp(18px, 3.5vw, 22px); }
  .statistics-page-body    { padding: 30px; }
  .statistics-page-body-info-layout { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .statistics-page-body-info-box { padding: 20px; height: 140px; }
  .statistics-page-body-info { font-size: 26px; }

  .game-modes-page-header-text,
  .settings-page-header-text { font-size: clamp(18px, 3.5vw, 25px); }

  .win-modal-content, .lose-modal-content {
    max-width: clamp(380px, 72vw, 560px);
    width:     clamp(380px, 72vw, 560px);
    padding:   35px 25px;
  }
  .win-modal-title, .lose-modal-title,
  .how-to-play-modal-title, .daily-lock-modal-title {
    font-size: clamp(22px, 4vw, 32px);
  }
  .lose-modal-answer-value { font-size: 36px; letter-spacing: 3px; }
  .win-modal-btn, .lose-modal-btn { padding: 14px 24px; font-size: 15px; }

  .how-to-play-modal-content {
    max-width: clamp(380px, 72vw, 620px);
    width:     clamp(380px, 72vw, 620px);
    padding:   35px 25px;
  }
  .daily-lock-modal-content {
    max-width: clamp(380px, 72vw, 560px);
    width:     clamp(380px, 72vw, 560px);
    padding:   35px 25px;
  }
  .daily-lock-modal-auth-buttons { flex-direction: column; gap: 12px; }
  .daily-lock-modal-btn-login,
  .daily-lock-modal-btn-register { max-width: 100%; }

  .game-modes-page-blurred-container { min-height: 380px; }
  .game-modes-page-coming-soon-label { font-size: 20px; padding: 14px 28px; }
}