/* =========================================================================
   KÜPLERLE GÖRÜNÜM OYUNU - STİL DOSYASI
   Tema: Koyu lacivert/antrasit zemin + neon vurgular (dokunmatik ekran dostu)
   ========================================================================= */

:root{
  --bg-deep:#070a14;
  --bg-panel:#10152a;
  --bg-panel-2:#161c38;
  --border-soft: rgba(120,160,255,0.18);
  --neon-blue:#2bd9ff;
  --neon-purple:#a26bff;
  --neon-orange:#ff9d2e;
  --neon-green:#39ff6a;
  --neon-red:#ff3b5c;
  --text-main:#eaf2ff;
  --text-dim:#8fa3cf;
  --radius-lg:18px;
  --radius-md:12px;
  font-size:16px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(43,217,255,0.10), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(162,107,255,0.12), transparent 55%),
    var(--bg-deep);
  color:var(--text-main);
  font-family:"Segoe UI","Trebuchet MS",Verdana,Arial,sans-serif;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
  touch-action:manipulation;
}

#app{ position:relative; width:100%; height:100%; }

/* Hafif, performans dostu CSS yıldız alanı arka planı (JS yok) */
#app::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(200,225,255,0.55) 99%, transparent),
    radial-gradient(1.5px 1.5px at 80% 10%, rgba(200,225,255,0.4) 99%, transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(200,225,255,0.5) 99%, transparent),
    radial-gradient(1.5px 1.5px at 65% 85%, rgba(200,225,255,0.35) 99%, transparent),
    radial-gradient(1px 1px at 92% 55%, rgba(200,225,255,0.45) 99%, transparent),
    radial-gradient(1.5px 1.5px at 25% 45%, rgba(200,225,255,0.3) 99%, transparent),
    radial-gradient(1px 1px at 55% 30%, rgba(200,225,255,0.4) 99%, transparent);
  background-size:100% 100%;
  opacity:0.8;
}

/* ---------- Ekranlar (screens) ---------- */
.screen{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  padding:24px;
  transition:opacity .25s ease;
}
.screen.hidden{ display:none; }

.title-big{
  font-size:clamp(28px,5vw,54px);
  font-weight:800;
  letter-spacing:1px;
  text-align:center;
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px rgba(43,217,255,0.25);
  margin:0;
}
.subtitle{ color:var(--text-dim); font-size:clamp(14px,2vw,18px); text-align:center; max-width:720px; margin:0; }

.menu-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px; width:min(900px,92vw);
}

.mode-card{
  background:linear-gradient(160deg,var(--bg-panel),var(--bg-panel-2));
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:22px 18px;
  cursor:pointer;
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.mode-card:hover, .mode-card:active{
  transform:translateY(-4px);
  border-color:var(--neon-blue);
  box-shadow:0 0 0 2px rgba(43,217,255,0.35), 0 14px 30px rgba(0,0,0,0.45);
}
.mode-card .icon{ font-size:40px; margin-bottom:10px; display:block; }
.mode-card h3{ margin:6px 0 6px; font-size:19px; }
.mode-card p{ margin:0; color:var(--text-dim); font-size:13px; line-height:1.4; }

/* ---------- Oyun ekranı düzeni ---------- */
#screen-game{ padding:0; justify-content:flex-start; align-items:stretch; }

.game-wrap{
  display:flex; width:100%; height:100%;
  flex-direction:row;
}
@media (max-width: 900px){
  .game-wrap{ flex-direction:column; }
}

#canvas-host{
  position:relative;
  flex:1 1 auto;
  min-width:0; min-height:0;
  background:radial-gradient(900px 500px at 50% 0%, rgba(43,217,255,0.08), transparent 60%), #0b0f1f;
}
#canvas-host canvas{ display:block; width:100%; height:100%; touch-action:none; }

.side-panel{
  width:40vw; min-width:360px;
  background:rgba(10,14,28,0.92);
  border-left:1px solid var(--border-soft);
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  padding:14px;
  gap:12px;
}
@media (max-width: 900px){
  .side-panel{ width:100%; max-width:100%; max-height:46vh; border-left:none; border-top:1px solid var(--border-soft); }
}

/* HUD */
.hud{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:10px 12px;
}
.hud-item{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--text-main); }
.hud-item .lbl{ color:var(--text-dim); font-weight:500; font-size:12px; }
#hud-lives{ letter-spacing:2px; color:var(--neon-red); font-size:16px; }
#hud-combo{ color:var(--neon-orange); }
#hud-timer{ color:var(--neon-blue); min-width:46px; display:inline-block; text-align:center; }
#hud-timer.low{ color:var(--neon-red); animation:pulse .6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* Butonlar */
.btn{
  border:none; border-radius:var(--radius-md);
  padding:12px 14px; font-size:15px; font-weight:700;
  cursor:pointer; color:var(--text-main);
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
  min-height:48px;
}
.btn:active{ transform:scale(0.96); }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }
.btn.grow{ flex:1 1 auto; }

.btn-add{ background:linear-gradient(160deg,#153a22,#0d2216); border-color:rgba(57,255,106,0.35); }
.btn-add.active{ background:linear-gradient(160deg,var(--neon-green),#1f8c43); color:#06220f; box-shadow:0 0 18px rgba(57,255,106,0.55); }

.btn-del{ background:linear-gradient(160deg,#3a1420,#220d14); border-color:rgba(255,59,92,0.35); }
.btn-del.active{ background:linear-gradient(160deg,var(--neon-red),#9c1f36); color:#220508; box-shadow:0 0 18px rgba(255,59,92,0.55); }

.btn-accent{ background:linear-gradient(160deg,#17324a,#0d1f30); border-color:rgba(43,217,255,0.35); }
.btn-accent:hover{ box-shadow:0 0 14px rgba(43,217,255,0.4); }

.btn-ghost{ background:transparent; }

.btn:disabled{ opacity:.35; cursor:not-allowed; }

/* Görünüm ızgaraları */
.views-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px;
}
.view-box{
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:8px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.view-box h4{ margin:0; font-size:12px; color:var(--text-dim); letter-spacing:.5px; text-transform:uppercase; }
.mini-grid{
  display:grid;
  gap:2px;
  background:#060912;
  padding:4px;
  border-radius:6px;
  border:1px solid rgba(120,160,255,0.12);
}
.cell{
  width:22px; height:22px;
  background:#0f1630;
  border-radius:3px;
  cursor:pointer;
  transition:background .1s ease, box-shadow .1s ease;
}
.cell.on{ background:linear-gradient(160deg,var(--neon-blue),#1489ac); box-shadow:0 0 8px rgba(43,217,255,0.6); cursor:default; }
.cell.marked{ background:linear-gradient(160deg,var(--neon-purple),#5b36a6); box-shadow:0 0 8px rgba(162,107,255,0.6); }
.cell.correct{ background:linear-gradient(160deg,var(--neon-green),#1f8c43) !important; box-shadow:0 0 10px rgba(57,255,106,0.8) !important; }
.cell.wrong{ background:linear-gradient(160deg,var(--neon-red),#9c1f36) !important; box-shadow:0 0 10px rgba(255,59,92,0.8) !important; }
.cell.hint-blink{ animation:hintblink .5s infinite; }
@keyframes hintblink{ 0%,100%{ box-shadow:0 0 4px rgba(255,157,46,0.4); } 50%{ box-shadow:0 0 16px rgba(255,157,46,1); background:var(--neon-orange);} }
.cell.readonly{ cursor:default; }

.view-box.target h4{ color:var(--neon-orange); }
.view-box.answer h4{ color:var(--neon-purple); }

/* Mesaj / sonuç kutuları */
.panel-box{
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:10px 12px;
  font-size:13px;
  color:var(--text-dim);
  line-height:1.5;
}
.panel-box b{ color:var(--text-main); }

.overlay{
  position:absolute; inset:0;
  background:rgba(5,7,16,0.82);
  display:flex; align-items:center; justify-content:center;
  z-index:30;
}
.overlay.hidden{ display:none; }
.overlay-card{
  background:linear-gradient(160deg,var(--bg-panel),var(--bg-panel-2));
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:28px 30px;
  max-width:420px; width:90vw;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}
.overlay-card h2{ margin:0 0 6px; font-size:26px; }
.overlay-card .score-line{ font-size:40px; font-weight:800; color:var(--neon-blue); margin:10px 0; }
.overlay-card p{ color:var(--text-dim); margin:4px 0 16px; }

.icon-btn{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--bg-panel-2);
  border:1px solid var(--border-soft); color:var(--text-main);
  cursor:pointer;
}
.topbar{
  position:absolute; top:10px; left:10px; right:10px;
  display:flex; justify-content:space-between; align-items:center;
  z-index:20; pointer-events:none;
}
.topbar > *{ pointer-events:auto; }
.topbar-icons{ display:flex; gap:8px; }

.hint-text{ font-size:12px; color:var(--text-dim); text-align:center; }

/* Üst bardaki "Durdur / Ana Menü" butonu: ikon butonlardan farklı, metinli */
.stop-btn{
  width:auto; height:auto; border-radius:var(--radius-md);
  padding:10px 14px; font-size:13px; font-weight:700;
  background:rgba(255,59,92,0.12); border:1px solid rgba(255,59,92,0.4);
  color:#ffd7df;
}
.stop-btn:hover, .stop-btn:active{ background:rgba(255,59,92,0.28); }

/* Ana menüdeki "Adın" alanı */
.name-field{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
}
.name-field label{ color:var(--text-dim); font-size:14px; }
.name-field input{
  background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  color:var(--text-main); padding:10px 14px; font-size:15px; width:220px;
  outline:none;
}
.name-field input:focus{ border-color:var(--neon-blue); box-shadow:0 0 0 2px rgba(43,217,255,0.25); }

/* Liderlik tablosu */
.lb-table{ width:100%; border-collapse:collapse; font-size:14px; }
.lb-table th{ text-align:left; color:var(--text-dim); font-size:12px; text-transform:uppercase; padding:6px 8px; border-bottom:1px solid var(--border-soft); }
.lb-table td{ padding:8px 8px; border-bottom:1px solid rgba(120,160,255,0.08); }
.lb-table tr:first-child td{ color:var(--neon-orange); font-weight:800; }
.lb-table tr:nth-child(2) td{ color:var(--neon-blue); font-weight:700; }
.lb-table tr:nth-child(3) td{ color:var(--neon-purple); font-weight:700; }
#lb-tab-scanner.active, #lb-tab-restore.active{ box-shadow:0 0 0 2px var(--neon-blue) inset; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background:rgba(120,160,255,0.25); border-radius:4px; }

/* ---------- Ortak oyun kabuğu (oyun_header.php / oyun_footer.php) ----------
   Oyun alanı ortak başlık ile alt çubuğun arasına oturur; yükseklikleri sayfadaki betik ölçüp
   --oyun-ust / --oyun-alt olarak yazar (telefonda oyun sırasında ikisi de gizlenir ⇒ 0). */
:root{ --oyun-ust:59px; --oyun-alt:62px; }
html,body{ overflow:hidden; }
#app{ position:fixed; top:var(--oyun-ust); bottom:var(--oyun-alt); left:0; right:0; width:auto; height:auto; }

/* Oyun sonu: misafir ad kutusu (ortak liderlik, lb.css) */
.end-name{ margin:6px 0 4px; text-align:left; }
.end-name[hidden]{ display:none; }
.rank-note{ color:var(--neon-green); font-weight:700; min-height:1.2em; margin:4px 0 12px; }

/* Liderlik penceresi */
.lb-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(3,6,16,.72); padding:14px; }
.lb-modal.hidden{ display:none; }
.lb-modal .overlay-card{ max-width:640px; width:100%; max-height:88vh; overflow:auto; }
.lb-modal h2{ margin-top:0; }
.lb-modal .btn{ margin-top:12px; }
/* Geniş ekran: üst çubuk (HUD, pusula) yan panelin başlığını örtmesin */
@media (min-width: 901px){ .side-panel{ padding-top:66px; } }
/* Menü kısa ekranlarda kaydırılabilir (başlık ve kartlar kesilmesin); uzun ekranda yine ortalı */
#screen-menu{ overflow-y:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; }
#screen-menu > :first-child{ margin-top:auto; }
#screen-menu > :last-child{ margin-bottom:auto; }