/* MrDodo — kullanıcının lisanslı yazı tipi (./font kitinden), yerelde vendor'landı. */
@font-face {
  font-family: "MrDodo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/MrDodo-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "MrDodo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/MrDodo-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "MrDodo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/MrDodo-Bold.woff2") format("woff2");
}

/* Site ile aynı: Luckiest Guy (başlık/logo/buton) + Quicksand (gövde) — OFL/Apache, yerelde */
@font-face { font-family: "Luckiest Guy"; font-weight: 400; font-display: swap; src: url("../fonts/LuckiestGuy-latinext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Luckiest Guy"; font-weight: 400; font-display: swap; src: url("../fonts/LuckiestGuy-latin.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 300 700; font-display: swap; src: url("../fonts/Quicksand-latinext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Quicksand"; font-weight: 300 700; font-display: swap; src: url("../fonts/Quicksand-latin.woff2") format("woff2"); }

:root {
  --blue: #3f6fe0;
  --blue-deep: #1f3b8f;       /* DentaSave lacivert */
  --cream: #ffffff;            /* logo üst satırı beyaz */
  --red: #36c9b8;              /* CTA → BubbliX mint */
  --good: #36c9b8;
  --panel: rgba(31, 59, 143, 0.9);
  --font: "Quicksand", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;       /* gövde */
  --display: "Luckiest Guy", "Quicksand", "Trebuchet MS", system-ui, sans-serif; /* başlık/logo/buton */
}

/* başlık, logo, buton, skor → Luckiest Guy */
.logo, .cta, .go-title, .scorepill span, .menu-link { font-family: var(--display); text-transform: uppercase; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--blue);
  font-family: var(--font);
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.hidden { display: none !important; }

/* ---------- yükleme ekranı ---------- */
.loading {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 30%, #3f6fe0, var(--blue-deep) 80%);
  transition: opacity .4s ease;
}
.loading.done { opacity: 0; pointer-events: none; }
.loading__box { text-align: center; width: min(360px, 84vw); }
.loading__logo { font-family: var(--display); text-transform: uppercase; font-size: clamp(34px, 11vw, 56px); line-height: .85; color: #fff; text-shadow: 0 5px 0 rgba(0,0,0,.2); }
.loading__logo span { display: block; color: var(--good); }
.loading__bub { display: flex; gap: 10px; justify-content: center; margin: 22px 0 16px; }
.loading__bub span { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.9); animation: loadBub 1s ease-in-out infinite; }
.loading__bub span:nth-child(2) { animation-delay: .15s; } .loading__bub span:nth-child(3) { animation-delay: .3s; }
@keyframes loadBub { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-12px); opacity: 1; } }
.loading__bar { height: 16px; background: rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; }
.loading__fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--good), #7be3d6); border-radius: 999px; transition: width .3s ease; }
.loading__pct { margin-top: 12px; color: #fff; font-weight: 700; font-size: 15px; opacity: .9; }

/* ---------- 2D parallax arka plan (canvas'ın arkasında) ---------- */
#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #cfe0f7; }
.bg-level { position: absolute; inset: 0; display: none; }
.bg-level.is-active { display: block; }
.bg-layer { position: absolute; inset: 0; background-repeat: repeat-x; background-position: 0 bottom; background-size: auto 100%; image-rendering: auto; }

/* ---------- seviye geçiş banner'ı ---------- */
.level-banner {
  position: fixed; top: 22%; left: 50%; transform: translate(-50%, -10px);
  z-index: 18; padding: 12px 30px; border-radius: 18px;
  background: rgba(31, 59, 143, 0.86); color: #fff;
  font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 6vw, 40px); letter-spacing: 1px;
  text-shadow: 0 3px 0 rgba(0,0,0,.25); box-shadow: 0 12px 30px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .4s ease;
}
.level-banner.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- üst bar ---------- */
.iconbtn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  z-index: 15;
  width: 50px; height: 50px;
  border-radius: 14px;
  border: none;
  background: #fff;
  color: var(--blue);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18), 0 10px 22px rgba(0, 0, 0, 0.25);
  transition: transform 0.08s ease;
}
.iconbtn:active { transform: translateY(3px); }
.iconbtn--left { left: 16px; }
.iconbtn--right { right: 16px; }

.scorepill {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 14;
  background: #fff;
  border-radius: 16px;
  padding: 8px 26px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.16), 0 12px 26px rgba(0, 0, 0, 0.28);
}
.scorepill span {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

/* ---------- ipucu banner ---------- */
.hint {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 80px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 13;
  max-width: 90vw;
  text-align: center;
  background: rgba(31, 59, 200, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 15px;
  line-height: 1.4;
  backdrop-filter: blur(6px);
  animation: hintIn 0.4s ease;
}
.hint b { color: var(--cream); }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- overlay ortak ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: 24px;
  background: radial-gradient(120% 120% at 50% 30%, rgba(60, 90, 240, 0.35), rgba(20, 38, 130, 0.9));
  animation: fade 0.4s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- başlangıç ekranı ---------- */
.home { text-align: center; z-index: 2; }
.logo {
  font-size: clamp(54px, 16vw, 120px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -2px;
  color: var(--cream);
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
  transform: rotate(-3deg);
}
.logo span {
  display: block;
  color: var(--red);
  -webkit-text-stroke: 3px #fff;
  transform: rotate(5deg) translateX(10px);
}
.tag {
  margin: 26px auto 30px;
  max-width: 30ch;
  font-size: clamp(15px, 4vw, 19px);
  font-weight: 600;
  line-height: 1.45;
}

.cta {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(180deg, #41ddca, var(--red));
  border: none;
  border-radius: 999px;
  padding: 16px 52px;
  cursor: pointer;
  box-shadow: 0 6px 0 #1fa896, 0 14px 28px rgba(54, 201, 184, 0.45);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #1fa896, 0 8px 16px rgba(54, 201, 184, 0.4); }

/* game-over butonları: dikey istif, ortalı */
#gameover .cta { display: block; margin: 12px auto 0; }
/* Siteye Dön → Tekrar Dene boyutunda, ikincil (lacivert) görünüm */
.cta--alt { background: linear-gradient(180deg, #4a6cff, var(--blue-deep)); box-shadow: 0 6px 0 #142a6b, 0 14px 28px rgba(20, 42, 107, 0.45); }
.cta--alt:active { transform: translateY(4px); box-shadow: 0 2px 0 #142a6b, 0 8px 16px rgba(20, 42, 107, 0.4); }
/* alt seçenekler (Lider Tablosu / Ödüller) — daha küçük */
.go-extra { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.cta--sm { display: inline-flex !important; margin: 0 !important; font-size: 15px; padding: 11px 20px; background: rgba(255,255,255,0.14); box-shadow: 0 4px 0 rgba(0,0,0,0.22); }
.cta--sm:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.22); }

/* ---------- WIN + FIRÇALAMA GÖREVİ ---------- */
.win-stars { font-size: 40px; color: #ffd23f; text-shadow: 0 3px 0 #c98e00; letter-spacing: 6px; margin-bottom: 4px; animation: starpop .5s ease; }
@keyframes starpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bm-timer { position: relative; width: 200px; height: 200px; margin: 6px auto 16px; }
.bm-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.bm-track { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 10; }
.bm-bar { fill: none; stroke: var(--good); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 339.292; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.bm-time { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 48px; color: #fff; }
#brushmission .cta, #win .cta { display: block; margin: 10px auto 0; }

/* baloncuk katmanı — ŞEFFAF: sadece yükselen baloncuklar ekranı kaplar */
#bmFoam {
  position: absolute; inset: 0; height: 100%;
  z-index: 5; pointer-events: none; overflow: hidden; background: transparent;
}
/* yükselen tekil baloncuklar (JS ile eklenir) — tüm ekranı kaplayarak yukarı süzülür */
.bm-bubble {
  position: absolute; bottom: -8%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(214,236,255,.45) 60%, rgba(214,236,255,.12));
  box-shadow: inset 0 0 8px rgba(255,255,255,.7), 0 0 6px rgba(255,255,255,.25);
  animation: bmRise linear infinite;
}
@keyframes bmRise {
  0%   { transform: translateY(0) translateX(0) scale(.6); opacity: 0; }
  12%  { opacity: .95; }
  88%  { opacity: .95; }
  100% { transform: translateY(-112vh) translateX(var(--dx, 0)) scale(1.15); opacity: 0; }
}

/* panel köpüğün ÜSTÜNDE ve tam görünür kalsın (çerçeve + açıklama dahil) */
#brushmission .panel { position: relative; z-index: 6; }
#brushmission .bm-time { text-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* ---------- GUI: çizgi-film oyun arayüzü (pakete göre, markaya renklenmiş) ---------- */
/* dairesel parlak ikon butonları (duraklat / ses) */
.iconbtn {
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #6f9bff 0%, var(--blue) 55%, var(--blue-deep) 100%);
  color: #fff;
  box-shadow: 0 5px 0 var(--blue-deep), 0 9px 16px rgba(0,0,0,.25), inset 0 3px 4px rgba(255,255,255,.45);
  text-shadow: 0 2px 2px rgba(0,0,0,.25);
}
.iconbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--blue-deep), 0 5px 10px rgba(0,0,0,.25), inset 0 3px 4px rgba(255,255,255,.45); }
.iconbtn { display: grid; place-items: center; }
.iconbtn svg { width: 22px; height: 22px; grid-area: 1 / 1; } /* üst üste hizala */
.iconbtn .snd-off { display: none; }
.iconbtn.muted .snd-on { display: none; }
.iconbtn.muted .snd-off { display: block; }
/* butonlar: glow yok — sadece düz bevel + üst parlama */
.cta { border: none; box-shadow: 0 6px 0 #1fa896, inset 0 3px 5px rgba(255,255,255,.5); text-shadow: 0 2px 2px rgba(0,0,0,.18); }
.cta:active { box-shadow: 0 2px 0 #1fa896, inset 0 3px 5px rgba(255,255,255,.5); }
.cta--alt { box-shadow: 0 6px 0 #142a6b, inset 0 3px 5px rgba(255,255,255,.35); }
.cta--alt:active { box-shadow: 0 2px 0 #142a6b, inset 0 3px 5px rgba(255,255,255,.35); }
.cta--sm { box-shadow: 0 4px 0 rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.3); }
/* oyun-bitti fırçalama ipucu */
.brush-tip { color: var(--cream); font-weight: 700; margin: 2px 0 14px; font-size: 15px; line-height: 1.35; }
.brush-tip b { color: var(--good); }
/* skor pili: bombeli kenar */
.scorepill { border: 3px solid #cfe0f7; box-shadow: 0 5px 0 rgba(31,59,143,.25), 0 10px 20px rgba(0,0,0,.2), inset 0 2px 3px rgba(255,255,255,.7); }
/* paneller: kalın yumuşak kenar */
.panel { border: 3px solid rgba(255,255,255,.18); box-shadow: 0 24px 80px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.12); }

/* uçuşan hediye emojileri */
.floatprize {
  position: fixed;
  font-size: clamp(40px, 9vw, 84px);
  z-index: 1;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
  animation: bob 4s ease-in-out infinite;
}
.fp1 { top: 22%; left: 8%;  animation-delay: 0s; }
.fp2 { bottom: 16%; left: 12%; animation-delay: .6s; }
.fp3 { top: 16%; right: 10%; animation-delay: 1.1s; }
.fp4 { top: 46%; right: 14%; animation-delay: 1.6s; }
.fp5 { bottom: 14%; right: 9%; animation-delay: .9s; }
.fp6 { top: 50%; left: 6%; animation-delay: 1.9s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(6deg); } }

/* menü linkleri (siteye dön / ödüller / kod tanımla) */
.menu-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 18px; }
.menu-link { color: #fff; opacity: .85; font-weight: 700; font-size: 15px; text-decoration: none; border-bottom: 2px solid rgba(255,255,255,.4); padding-bottom: 1px; }
.menu-link:hover { opacity: 1; border-bottom-color: #fff; }
.earn-note { color: var(--good); font-weight: 700; margin: 4px 0 16px; font-size: 15px; }

/* ---------- panel (game over / pause) ---------- */
.panel {
  width: min(440px, 100%);
  background: var(--panel);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  padding: 36px 30px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  z-index: 2;
}
.panel--sm { width: min(340px, 100%); }

.go-title { font-size: 30px; font-weight: 900; letter-spacing: 1px; color: var(--cream); margin-bottom: 6px; }
.go-score { margin: 14px 0; }
.go-score__num { font-size: 64px; font-weight: 900; color: #fff; line-height: 1; }
.go-score__lbl { font-size: 13px; letter-spacing: 3px; opacity: 0.7; text-transform: uppercase; }

.prize {
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  padding: 18px; margin-bottom: 24px;
}
.prize__img { font-size: 44px; }
.prize__txt { margin-top: 8px; font-size: 15px; }
.prize__txt strong { color: var(--good); }

/* toplanan megafon için uçan etiket */
.floattxt {
  position: fixed; z-index: 12;
  font-weight: 900; font-size: 26px;
  color: var(--cream);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: floatup 0.9s ease-out forwards;
}
@keyframes floatup {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -70px) scale(1.5); }
}