/* Reset & base */
:root{
  --bg:#0b0f14; --bg-2:#0f151e; --card:#101b27;
  --text:#e6edf3; --muted:#9fb0c2;
  --brand:#47b47d; --brand-2:#00bcd4; --danger:#ff5d6c; --accent:#ffd166;
  --ring: 0 0 0 2px rgba(0,188,212,.35), 0 0 0 6px rgba(71,180,125,.15);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:radial-gradient(80vw 80vh at 50% 0%,#0e1722 0%, #0b0f14 60%);}
body{font-family:"Archivo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Game container */
#game-container{
  width:min(100vmin,100vw); height:min(100vmin,100vh);
  position:relative; 
  border-radius:20px; 
  overflow:visible; 
  box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  background:linear-gradient(180deg,#0c141d 0%, #0a0f16 100%);
}

/* Canvas */
canvas{width:100%;height:100%;display:block;}

/* Top bar */
/* GÜNCELLENDİ: 'justify-content' eklendi */
#topbar{position:absolute; inset:12px 12px auto 12px; display:flex; align-items:center; gap:8px; z-index:40; justify-content: space-between;}
#topbar .brand{font-family:"Chakra Petch",system-ui; font-weight:700; letter-spacing:.12em; opacity:.8}

/* Buttons */
.pill{padding:12px 18px; border-radius:999px; border:none; font-weight:700; letter-spacing:.03em; cursor:pointer; background:linear-gradient(180deg,#26d07c,#1fb56a); color:#062312; box-shadow:0 6px 20px rgba(38,208,124,.35);}
.pill:hover{filter:brightness(1.05)}
.pill:active{transform:translateY(1px)}
.pill.ghost{background:rgba(255,255,255,.09); color:var(--text); box-shadow:none; border:1px solid rgba(255,255,255,.12)}
#howto-btn{width:40px;height:40px;padding:0;display:grid;place-items:center}

/* Mobile controls */
#mobile-controls{position:absolute; inset:0; pointer-events:none}

#joystick-base{
  position:absolute; 
  left:-130px; 
  bottom:22px; 
  width:110px; height:110px; 
  background:rgba(255,255,255,.08); 
  border:1px solid rgba(255,255,255,.15); 
  border-radius:50%; pointer-events:auto; 
  backdrop-filter:blur(4px);
}
#joystick-stick{position:absolute; top:30px; left:30px; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.35); box-shadow:var(--ring)}

#button-panel{
  position:absolute; 
  right:-90px;
  bottom:22px; 
  display:flex; flex-direction:column-reverse; 
  gap:14px; pointer-events:auto;
}
.control-button{width:68px;height:68px; border-radius:50%; font-weight:800; font-size:1.35rem; color:#04110a; background:linear-gradient(180deg,#ffffff,#dfe7ee); border:1px solid #c9d3dc; box-shadow:0 10px 22px rgba(0,0,0,.35), var(--ring)}
.control-button.primary{background:linear-gradient(180deg,#ffe08a,#ffcf5a);}

/* Overlays */
.overlay-screen{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(0,0,0,.8); z-index:100}
.overlay-screen h1{font-family:"Chakra Petch"; font-size:clamp(36px,6vmin,64px); margin:.1rem 0 .25rem}
.overlay-screen p{color:var(--muted); margin:0}
.overlay-screen .cta-row{display:flex; gap:10px; margin-top:6px}

/* HowTo */
.howto{width:min(760px,90vw); background:var(--card); border:1px solid rgba(255,255,255,.08); padding:22px; border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.45)}
.howto h2{margin:.25rem 0 1rem; font-family:"Chakra Petch"}
.steps{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.steps li{display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; background:linear-gradient(180deg,#0f1a24,#0c151e); border:1px solid rgba(255,255,255,.06); padding:10px 12px; border-radius:12px}
.steps .icon{font-size:24px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.kbd{display:inline-block; padding:.15rem .45rem; border-radius:6px; background:#0c141d; border:1px solid rgba(255,255,255,.12); font-family:"Chakra Petch"}
.tag{padding:.05rem .4rem; border-radius:6px; background:rgba(71,180,125,.15); border:1px solid rgba(71,180,125,.4)}

/* Accessibility */
button:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}


/* === YENİ EKLENEN STİLLER === */

/* Üst HUD çubuğundaki Can ve Süre */
#hud-stats {
  display: flex;
  gap: 16px;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  align-items: center;
}
#lives-display {
  color: var(--danger);
  /* Işık efekti */
  text-shadow: 0 0 8px var(--danger);
}
#time-display {
  color: var(--accent);
  /* Işık efekti */
  text-shadow: 0 0 8px var(--accent);
}

/* Oyun sonu ekranı istatistikleri */
#end-game-stats {
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  margin: 6px 0 14px 0;
  display: block; /* 'none' idi, JS ile uğraşmamak için direkt 'block' yapalım */
  white-space: pre-wrap; /* \n (yeni satır) karakterlerinin çalışmasını sağlar */
}