:root{
  --bg:#E8F3FF; --panel:#fff; --panel-bd:#D6E6F7;
  --text:#17324D; --subtext:#3F6E9C; --focus:#2EC4B6;
  --accent:#5B8DEF; --accent-soft:#DDE8FF; --ok:#38B000; --warn:#E63946;
  --maxw:960px; --radius-xl:24px; --radius-lg:18px;
}

@font-face{ font-family:'ttkb'; src:url('../css/ttkb.otf'); }


body.game{
  margin:0;
  background: radial-gradient(60% 60% at 50% 20%, rgba(91,141,239,.10), transparent 60%), var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  font-size:18px; line-height:1.45;
}

.shell{ max-width:var(--maxw); margin:0 auto; padding:16px; }
.board{
  background:var(--panel);
  border:2px solid var(--panel-bd);
  border-radius:var(--radius-xl);
  padding:16px;
  box-shadow:0 6px 22px rgba(23,50,77,.06);
  margin-bottom:12px;
}
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.status{ font-weight:800; color:var(--subtext); font-size:18px; }
.controls{ display:flex; gap:10px; flex-wrap:wrap; }

/* ——— 3D “yastığa basma” buton ——— */
.btn-3d{
  -webkit-tap-highlight-color: transparent;
  appearance:none; border:0; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 20px; min-height:56px; min-width:56px; border-radius:20px;
  font-weight:800; font-size:18px; color:var(--text);
  background: linear-gradient(180deg,#fff 0%, #F3F7FF 100%);
  box-shadow:
    0 10px 20px rgba(23,50,77,.12),     /* dış yumuşak */
    inset 0 2px 0 rgba(255,255,255,.9), /* üst parlaklık */
    inset 0 -4px 8px rgba(23,50,77,.08),/* iç gölge */
    0 1px 0 #fff;                       /* kenar çizgisi efekti */
  transition: transform .12s ease, box-shadow .12s ease;
  border:2px solid #CFE1F5;
}
.btn-3d:hover{
  box-shadow:
    0 12px 24px rgba(23,50,77,.14),
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -5px 10px rgba(23,50,77,.10),
    0 1px 0 #fff;
  border-color: var(--accent);
}
.btn-3d:focus-visible{ outline:4px solid var(--focus); outline-offset:2px; }

/* Basılı/aktif: yastığa gömülme */
.btn-3d:active,
.btn-3d.is-pressed{
  transform: translateY(3px);
  box-shadow:
    0 6px 12px rgba(23,50,77,.12),
    inset 0 2px 4px rgba(23,50,77,.08),
    inset 0 -2px 0 rgba(23,50,77,.04);
}

/* Kilitli görünüm */
.btn-3d[disabled]{ opacity:.55; cursor:not-allowed; }

/* Mute özel (topbar) */
#mute{ padding:12px 16px; font-size:18px; }

/* En alt Başla alanı */
.start-area{ display:flex; justify-content:center; }
.btn-start{ min-width:200px; font-size:20px; }
/* Üst süre göstergesi */
.timer{
  position: relative;
  height: 18px;
  border: 2px solid var(--panel-bd);
  border-radius: 999px;
  background: #F1F7FF;
  overflow: hidden;
}
.timer .bar{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, #5B8DEF, #2EC4B6);
  transition: width 0.2s linear;
}
.timer .text{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: var(--text);
  mix-blend-mode: multiply;
}

/* Tekrar Dinle – “bizimle birlikte gelsin” (floating button) */
.replay-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; padding: 0;
}
/* Timer'ı her zaman görünür yap: */
.board[aria-label="Süre"]{
  position: fixed;
  top: 8px; left: 12px; right: 12px;
  z-index: 10000;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(23,50,77,.08);
  border: 1px solid rgba(214,230,247,.8);
}

/* Timer bar içi (mevcut timer sınıflarınla uyumlu) */
.timer{
  position: relative;
  height: 18px;
  border: 2px solid var(--panel-bd);
  border-radius: 999px;
  background: #F1F7FF;
  overflow: hidden;
}
.timer .bar{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, #5B8DEF, #2EC4B6);
  transition: width 0.2s linear;
}
.timer .text{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: var(--text);
  mix-blend-mode: multiply;
}

/* Üstte sabit timer, içerik üzerinde duracağı için gövdeye tepeden boşluk verelim */
body.game { padding-top: 72px; }  /* timer yüksekliğine göre ayarla */

.btn-egg .label {
  font-family: 'ttkb';
  font-weight: normal;
  font-size: 20px;
  letter-spacing: 0.2px;
}