:root {
  --bg: #011F3F;
  --text: #FEF2BF;
  --white: #ffffff;
  --panel-bg: rgba(0, 0, 0, 0.86);
  --panel-bg-slim: rgba(0, 0, 0, 0.78);
  --ok: #19d36b;
  --fail: #ff4d4f;
  --card-bg: #0b1330;
  --button-border: #000;
  --shadow: rgba(0,0,0,0.4);
}

:root[data-theme="light"] {
  --bg: #f7f7fb;
  --text: #111827;
  --white: #111827;
  --panel-bg: rgba(255, 255, 255, 0.94);
  --panel-bg-slim: rgba(255, 255, 255, 0.90);
  --ok: #0e9f6e;
  --fail: #e11d48;
  --card-bg: #e6e6ef;
  --button-border: #333;
  --shadow: rgba(0,0,0,0.12);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Press Start 2P', cursive;
  background: var(--bg);
  color: var(--white);
}

.bg-cover {
  background-size: cover;
  background-position: center;
}

.hidden { display: none !important; }

.logo { width: 108px; height: auto; }
.logo.small { width: 74px; }

.screen {
  min-height: 100svh; /* safe viewport */
  width: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand { text-align: center; }

.game-title {
  margin: 8px 0 12px;
  color: var(--text);
  font-size: clamp(18px, 5vw, 34px);
  text-shadow: 0 2px 8px var(--shadow);
}

/* Start layout: responsive two-column on desktop, single-column on mobile */
.start-layout {
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

@media (min-width: 980px) {
  .start-layout {
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
  }
}

.panel {
  background: var(--panel-bg);
  color: var(--white);
  padding: 14px 14px;
  border-radius: 12px;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 24px var(--shadow);
}

.panel h2 {
  margin: 0 0 10px;
  font-size: clamp(16px, 3.6vw, 22px);
}

.panel h3 {
  margin: 14px 0 8px;
  font-size: clamp(13px, 3.2vw, 18px);
  color: var(--text);
}

.panel p, .panel li {
  line-height: 1.6;
  font-size: clamp(11px, 3.1vw, 13px);
  margin: 6px 0;
}

.bullets { padding-left: 18px; }

/* Settings panel controls share same panel background */
#settings-panel .control {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
}

#settings-panel label {
  min-width: 120px;
}

#player-name, #lang, #difficulty, #theme {
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: var(--card-bg);
  color: var(--white);
}

:root[data-theme="light"] #player-name,
:root[data-theme="light"] #lang,
:root[data-theme="light"] #difficulty,
:root[data-theme="light"] #theme {
  border: 1px solid rgba(0,0,0,0.2);
  color: #111827;
}

.primary-btn, .secondary-btn {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  border: none;
  transition: transform .06s ease, filter .2s ease;
}

.primary-btn {
  background: var(--text);
  color: #0a0a0a;
}

.secondary-btn {
  background: #d6d6d6;
  color: #0a0a0a;
}

.primary-btn:active, .secondary-btn:active { transform: scale(0.98); }
.primary-btn:hover, .secondary-btn:hover { filter: brightness(0.95); }

.leaderboard { margin-top: 12px; }
.lb-list {
  margin: 0;
  padding-left: 1.2em; /* Daha kontrollü girinti */
  list-style-position: inside; /* Numara içeride kalsın */
  font-size: clamp(11px, 3vw, 13px);
}

.hud {
  width: 100%;
  max-width: 1000px;
  margin: 8px auto 8px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 640px) {
  .hud { grid-template-columns: 1fr; gap: 8px; text-align: center; }
}

#level-title {
  color: var(--text);
  font-size: clamp(16px, 4.6vw, 26px);
  margin: 0;
  justify-self: center;
}

#scoreboard {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.hud-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: clamp(10px, 2.8vw, 12px);
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.badge.ok { color: var(--ok); }
.badge.fail { color: var(--fail); }

.icon-btn {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.stage {
  width: 100%;
  display: grid;
  place-items: center;
  margin-top: 6px;
}

/* Game grid that fits all screens without scrolling */
.grid {
  display: grid;
  /* Keeps square-ish area: limited by min of viewport width/height */
  width: min(92vw, 520px);
  height: min(72vh, 520px);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 3vw, 16px);
  padding: clamp(6px, 2vw, 12px);
}

.btn {
  border: clamp(6px, 2vw, 12px) solid var(--button-border);
  border-radius: 18%;
  cursor: pointer;
  outline: none;
  transition: transform .06s ease, filter .12s ease;
  width: 100%;
  height: 100%;
}

.btn:active { transform: scale(0.98); }

.red    { background: #ff4d4d; }
.green  { background: #28c76f; }
.blue   { background: #2f86eb; }
.yellow { background: #fcd34d; }

.pressed { box-shadow: 0 0 18px #fff; filter: brightness(1.14); }

.game-over { animation: flash 280ms ease; }
@keyframes flash { 0% { background: #ff6961; } 100% { background: var(--bg); } }

/* Confetti overlay */
#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
}

/* Footer */
.footer {
  width: 100%;
  text-align: center;
  margin-top: auto;
  padding: 8px 0;
  font-size: 12px;
  color: #fff;
  opacity: 0.85;
}