/* =========================================================
   İngilizcelen — OYUN KİTİ (ortak oyun tasarımı)
   Tüm oyunlar aynı başlangıç ekranı, üst bar, butonlar ve
   sonuç ekranını kullanır. Renkler ui-shell.css ile aynı.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@600;700;800;900&display=swap');

:root{
  --gk-bg:#1B1740; --gk-panel:#2A2560; --gk-panel-2:#221D52; --gk-line:#3A3480; --gk-shadow:#0C0A22;
  --gk-text:#FFFFFF; --gk-muted:#C9C3F0;
  --gk-gold:#FFD23F; --gk-gold-d:#C99A00;
  --gk-green:#22C55E; --gk-green-d:#15803D;
  --gk-red:#EF4444; --gk-red-d:#B91C1C;
  --gk-blue:#3B82F6; --gk-blue-d:#1D4ED8;
  --gk-purple:#7C3AED; --gk-purple-d:#4C1D95;
  --gk-accent:var(--gk-purple); --gk-accent-d:var(--gk-purple-d);
  --gk-radius:24px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body.gk-body, body.gk-body.has-shell{
  font-family:'Nunito',sans-serif; color:var(--gk-text); background:radial-gradient(1400px 900px at 50% 40%, #1E0B4A 0%, #0C0626 60%, #05030F 100%) fixed !important;
  -webkit-tap-highlight-color:transparent;
}
.gk-hidden{ display:none !important; }
button{ font-family:inherit; }

/* ---------- Sahne ---------- */
.gk-stage{ min-height:100vh; display:flex; flex-direction:column; padding:18px 24px 24px; gap:16px; max-width:1600px; margin:0 auto; }
.gk-screen{ flex:1; display:flex; flex-direction:column; min-height:0; gap:16px; }
/* masaüstü / akıllı tahta: oyun ekranı tek ekrana sığar, kaydırma yok */
@media (min-width:981px){
  .gk-stage{ height:100vh; height:100dvh; min-height:0; }
  .gk-stage.gk-scroll{ height:auto; min-height:100vh; }
}

/* ---------- Butonlar ---------- */
.gk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:60px; padding:0 30px; border:0; border-radius:20px; cursor:pointer; text-decoration:none;
  font-family:'Fredoka','Nunito',sans-serif; font-weight:700; font-size:24px; letter-spacing:.3px;
  background:var(--gk-gold); color:#1B1740; border-bottom:6px solid var(--gk-gold-d);
  transition:transform .1s, filter .15s; user-select:none;
}
.gk-btn:hover{ filter:brightness(1.07); }
.gk-btn:active{ transform:translateY(3px); border-bottom-width:3px; }
.gk-btn.ghost{ background:var(--gk-panel-2); color:#fff; border-bottom-color:var(--gk-shadow); }
.gk-btn.sm{ min-height:46px; font-size:18px; padding:0 18px; border-radius:16px; border-bottom-width:5px; }
.gk-btn:disabled{ opacity:.4; cursor:default; transform:none; }

/* ---------- Başlangıç ekranı ---------- */
.gk-intro{ flex:1; display:flex; align-items:center; justify-content:center; padding:10px 0; }
.gk-intro-card{
  width:min(720px,100%); text-align:center; padding:34px 34px 30px; border-radius:32px;
  background:var(--gk-panel); border:2px solid var(--gk-line); border-bottom:10px solid var(--gk-shadow);
  display:flex; flex-direction:column; align-items:center; gap:14px; position:relative; overflow:hidden;
  animation:gkDrop .45s cubic-bezier(.34,1.56,.64,1);
}
.gk-intro-card::before{ content:''; position:absolute; inset:0 0 auto 0; height:10px; background:var(--gk-accent); }
.gk-kicker{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; letter-spacing:2px; color:var(--gk-gold); text-transform:uppercase; }
.gk-icon{ width:128px; height:128px; border-radius:36px; display:flex; align-items:center; justify-content:center; font-size:76px;
  background:var(--gk-accent); border-bottom:8px solid var(--gk-accent-d); animation:gkFloat 3s ease-in-out infinite; }
.gk-title{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:58px; line-height:1; margin:4px 0 0; }
.gk-sub{ font-size:19px; font-weight:800; color:var(--gk-muted); margin:0; }
.gk-rules{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; width:100%; margin:8px 0 6px; }
.gk-rule{ display:flex; align-items:center; gap:12px; text-align:left; padding:12px 14px; border-radius:16px; background:var(--gk-panel-2); font-weight:800; font-size:16px; line-height:1.2; }
.gk-rule b{ font-size:28px; line-height:1; flex-shrink:0; }
.gk-rule small{ display:block; font-weight:700; color:var(--gk-muted); font-size:13px; margin-top:2px; }
.gk-intro .gk-btn{ min-width:260px; min-height:72px; font-size:30px; border-radius:24px; }

@media (min-width:641px) and (max-height:720px){
  .gk-intro-card{ padding:22px 28px 22px; gap:10px; }
  .gk-icon{ width:92px; height:92px; font-size:54px; border-radius:28px; }
  .gk-title{ font-size:46px; }
  .gk-rule{ padding:9px 12px; font-size:15px; }
  .gk-intro .gk-btn{ min-height:62px; font-size:26px; }
}

/* ---------- Üst bar ---------- */
.gk-hud{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gk-chip{
  height:52px; padding:0 18px; border-radius:18px; background:var(--gk-panel); border:2px solid var(--gk-line); border-bottom-width:5px; border-bottom-color:var(--gk-shadow);
  display:inline-flex; align-items:center; gap:8px; font-family:'Fredoka',sans-serif; font-weight:700; font-size:22px; white-space:nowrap;
}
.gk-chip small{ font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; color:var(--gk-muted); text-transform:uppercase; letter-spacing:1px; }
.gk-chip.gold{ color:var(--gk-gold); border-color:rgba(255,210,63,.5); }
.gk-hud .gk-grow{ flex:1; }
.gk-progress{ flex:1; min-width:160px; height:18px; border-radius:10px; background:var(--gk-panel-2); border:2px solid var(--gk-line); overflow:hidden; }
.gk-progress i{ display:block; height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,var(--gk-gold),#FFB800); transition:width .4s; }
.gk-iconbtn{ width:52px; height:52px; border-radius:18px; border:2px solid var(--gk-line); border-bottom:5px solid var(--gk-shadow); background:var(--gk-panel); color:#fff; font-size:24px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.gk-iconbtn:active{ transform:translateY(2px); }
.gk-lives{ letter-spacing:2px; }
.gk-lives .off{ filter:grayscale(1); opacity:.3; }

/* ---------- Soru kartı + şıklar ---------- */
.gk-card{ border-radius:var(--gk-radius); background:var(--gk-panel); border:2px solid var(--gk-line); border-bottom:8px solid var(--gk-shadow); }
.gk-qimg{ display:flex; align-items:center; justify-content:center; overflow:hidden; padding:10px; }
.gk-qimg img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:16px; display:block; }
.gk-qtext{ white-space:pre-line; font-family:'Fredoka',sans-serif; font-weight:700; font-size:34px; text-align:center; line-height:1.15; padding:14px 18px; }
.gk-opts{ display:grid; gap:14px; }
.gk-opt{
  position:relative; display:flex; align-items:center; gap:16px; min-height:74px; padding:10px 20px 10px 12px; border-radius:20px; cursor:pointer; text-align:left;
  background:var(--gk-panel-2); color:#fff; border:2px solid var(--gk-line); border-bottom:6px solid var(--gk-shadow);
  font-family:'Fredoka','Nunito',sans-serif; font-weight:600; font-size:30px; line-height:1.1;
  transition:transform .12s, background .2s, border-color .2s, opacity .3s;
}
.gk-opt:hover:not(:disabled){ border-color:var(--gk-gold); transform:translateY(-2px); }
.gk-opt:active:not(:disabled){ transform:translateY(2px); }
.gk-opt .gk-key{ width:50px; height:50px; flex-shrink:0; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--gk-gold); color:#1B1740; font-weight:700; font-size:26px; }
.gk-opt:disabled{ cursor:default; }
.gk-opt.pick{ background:#4A3F9E; border-color:var(--gk-gold); animation:gkPulse .5s ease-in-out infinite alternate; }
.gk-opt.ok{ background:var(--gk-green); border-color:#86EFAC; border-bottom-color:var(--gk-green-d); animation:gkPop .45s cubic-bezier(.34,1.56,.64,1); }
.gk-opt.ok .gk-key{ background:#fff; color:var(--gk-green-d); }
.gk-opt.bad{ background:var(--gk-red); border-color:#FCA5A5; border-bottom-color:var(--gk-red-d); animation:gkShake .45s; }
.gk-opt.bad .gk-key{ background:#fff; color:var(--gk-red-d); }
.gk-opt.gone{ opacity:.12; pointer-events:none; }

/* ---------- Sonuç ekranı (yıldız sistemi bu ekranı okur) ---------- */
.gk-result{ position:fixed; inset:0; z-index:8000; display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto; background:rgba(8,6,24,.72); backdrop-filter:blur(4px); }
body.has-shell .gk-result{ left:132px; }
.gk-result.show{ display:flex; }
.gk-result-card{ width:min(560px,100%); text-align:center; padding:30px 28px 26px; border-radius:32px; background:var(--gk-panel); border:2px solid var(--gk-line); border-bottom:10px solid var(--gk-shadow);
  display:flex; flex-direction:column; align-items:center; gap:10px; animation:gkDrop .5s cubic-bezier(.34,1.56,.64,1); }
.gk-result-emoji{ font-size:92px; line-height:1; animation:gkFloat 3s ease-in-out infinite; }
.gk-result-title{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:46px; line-height:1.05; color:var(--gk-gold); }
.gk-result-sub{ font-size:18px; font-weight:800; color:var(--gk-muted); }
.gk-result-score{ display:flex; align-items:baseline; justify-content:center; gap:8px; font-family:'Fredoka',sans-serif; margin:6px 0 2px; }
.gk-result-score b{ font-size:72px; line-height:1; }
.gk-result-score span{ font-size:30px; color:var(--gk-muted); font-weight:600; }
.gk-result-extra{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:22px; }
.gk-result-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px; }

/* ---------- Kutlama yazısı ---------- */
.gk-banner{ position:fixed; left:50%; top:40%; z-index:8500; transform:translate(-50%,-50%) scale(.3); opacity:0; pointer-events:none;
  padding:22px 40px; border-radius:28px; background:var(--gk-gold); color:#1B1740; border-bottom:8px solid var(--gk-gold-d);
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:44px; text-align:center; white-space:nowrap; max-width:min(1000px,88vw); transition:all .35s cubic-bezier(.34,1.56,.64,1); }
.gk-banner.long{ white-space:normal; font-size:clamp(24px,4vw,40px); line-height:1.15; }
.gk-banner small{ display:block; font-size:20px; font-weight:600; }
.gk-banner.show{ transform:translate(-50%,-50%) scale(1); opacity:1; }
body.has-shell .gk-banner{ left:calc(50% + 66px); }

/* ---------- Pencere (joker vb.) ---------- */
.gk-modal{ position:fixed; inset:0; z-index:8200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(8,6,24,.7); }
.gk-modal.show{ display:flex; }
.gk-modal-card{ width:min(480px,100%); padding:26px; border-radius:28px; background:var(--gk-panel); border:2px solid var(--gk-line); border-bottom:8px solid var(--gk-shadow); text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; animation:gkDrop .35s cubic-bezier(.34,1.56,.64,1); }
.gk-modal-title{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:30px; }

/* ---------- Konfeti ---------- */
.gk-confetti{ position:fixed; top:-20px; z-index:9500; pointer-events:none; animation:gkFall linear forwards; }

/* ---------- Animasyonlar ---------- */
@keyframes gkDrop{ from{ transform:translateY(-30px) scale(.94); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes gkFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes gkPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
@keyframes gkShake{ 0%,100%{ transform:translateX(0); } 20%,60%{ transform:translateX(-10px); } 40%,80%{ transform:translateX(10px); } }
@keyframes gkPulse{ from{ filter:brightness(1); } to{ filter:brightness(1.25); } }
@keyframes gkFall{ to{ transform:translateY(110vh) rotate(720deg); } }

/* ---------- Mobil ---------- */
@media (max-width:640px){
  .gk-stage{ padding:12px 12px 90px; gap:12px; }
  .gk-intro-card{ padding:26px 18px 22px; border-radius:26px; }
  .gk-icon{ width:96px; height:96px; font-size:56px; border-radius:28px; }
  .gk-title{ font-size:40px; }
  .gk-sub{ font-size:16px; }
  .gk-rules{ grid-template-columns:1fr; }
  .gk-intro .gk-btn{ width:100%; min-width:0; }
  .gk-chip{ height:44px; font-size:18px; padding:0 12px; border-radius:14px; }
  .gk-iconbtn{ width:44px; height:44px; font-size:20px; border-radius:14px; }
  .gk-opt{ min-height:60px; font-size:22px; }
  .gk-opt .gk-key{ width:40px; height:40px; font-size:20px; }
  .gk-qtext{ font-size:24px; }
  .gk-result{ left:0 !important; padding:64px 12px 90px; }
  .gk-hud .gk-progress{ display:none; }
  .gk-hud small{ display:none; }
  .gk-stage{ min-height:calc(100vh - 58px); min-height:calc(100dvh - 58px); }
  .gk-hud{ flex-wrap:nowrap; gap:8px; }
  .gk-hud .gk-chip:first-child{ flex:1; }
  .gk-qimg{ padding:6px; }
  .gk-result-title{ font-size:36px; }
  .gk-result-score b{ font-size:58px; }
  .gk-btn{ font-size:20px; min-height:54px; }
  .gk-banner{ font-size:30px; left:50% !important; }
}

/* ---------- resim büyütme ---------- */
.gk-zoom{ position:relative; }
.gk-zoom img{ cursor:zoom-in; }
.gk-zoom-badge{ position:absolute; z-index:2; width:40px; height:40px; border-radius:50%; background:rgba(15,10,40,.72); border:2px solid rgba(255,255,255,.55); box-shadow:0 4px 12px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; font-size:18px; pointer-events:none; animation:gkBadge 2.4s ease-in-out infinite; }
@keyframes gkBadge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.gk-lightbox{ position:fixed; inset:0; z-index:40000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(6,4,20,.88); backdrop-filter:blur(6px); cursor:zoom-out; }
.gk-lightbox.show{ display:flex; animation:gkFade .2s ease-out; }
.gk-lightbox img{ max-width:96vw; max-height:90vh; object-fit:contain; border-radius:20px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.6); animation:gkDrop .3s cubic-bezier(.34,1.56,.64,1); }
.gk-lightbox .gk-iconbtn{ position:absolute; top:16px; right:16px; }
@keyframes gkFade{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- uzay arka planı ---------- */
.gk-space{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.gk-space-deco{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
body.gk-body > .gk-stage{ position:relative; z-index:1; }
.gk-space-deco .neb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; animation:gkNeb 26s ease-in-out infinite alternate; }
.gk-space-deco .n1{ width:60vw; height:50vh; left:-10vw; top:-10vh; background:radial-gradient(circle, #7C3AED, transparent 70%); }
.gk-space-deco .n2{ width:55vw; height:55vh; right:-12vw; bottom:-15vh; background:radial-gradient(circle, #DB2777, transparent 70%); animation-delay:-8s; }
.gk-space-deco .n3{ width:40vw; height:40vh; left:35vw; top:30vh; background:radial-gradient(circle, #0EA5E9, transparent 70%); opacity:.3; animation-delay:-15s; }
.gk-space-deco .planet{ position:absolute; border-radius:50%; animation:gkOrbit 30s ease-in-out infinite alternate; }
.gk-space-deco .p1{ width:110px; height:110px; right:6%; top:12%; background:radial-gradient(circle at 30% 30%, #FDBA74, #EA580C 55%, #7C2D12); box-shadow:0 0 40px rgba(251,146,60,.4); }
.gk-space-deco .p1::after{ content:''; position:absolute; left:-30%; right:-30%; top:42%; height:16%; border-radius:50%; border:4px solid rgba(254,215,170,.7); transform:rotate(-18deg); }
.gk-space-deco .p2{ width:54px; height:54px; left:18%; bottom:10%; background:radial-gradient(circle at 30% 30%, #A5F3FC, #0891B2 60%, #164E63); box-shadow:0 0 30px rgba(34,211,238,.35); animation-duration:22s; }
.gk-space-deco .p3{ width:26px; height:26px; left:52%; top:6%; background:radial-gradient(circle at 30% 30%, #F5D0FE, #A21CAF 60%, #4A044E); animation-duration:18s; }
.gk-space-deco .galaxy{ position:absolute; width:260px; height:260px; left:4%; top:52%; border-radius:50%; opacity:.35;
  background:conic-gradient(from 0deg, transparent 0 10%, rgba(196,181,253,.9) 14%, transparent 22% 45%, rgba(244,114,182,.8) 50%, transparent 58% 80%, rgba(147,197,253,.8) 86%, transparent 94%);
  -webkit-mask:radial-gradient(circle, #000 0 8%, rgba(0,0,0,.7) 25%, transparent 70%); mask:radial-gradient(circle, #000 0 8%, rgba(0,0,0,.7) 25%, transparent 70%);
  animation:gkSpin 60s linear infinite; }
@keyframes gkNeb{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(4vw,3vh) scale(1.15); } }
@keyframes gkOrbit{ from{ transform:translate(0,0); } to{ transform:translate(-40px,30px); } }
@keyframes gkSpin{ to{ transform:rotate(360deg); } }
@media (max-width:640px){ .gk-space-deco .p1{ width:64px; height:64px; } .gk-space-deco .galaxy{ width:160px; height:160px; } .gk-zoom-badge{ width:32px; height:32px; font-size:14px; } }