/* styles.css */
:root{
  --bg:#081229;
  --panel:#0f1724;
  --accent:#2b7cff;
  --muted:#9aa4b2;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  background:linear-gradient(180deg,#001022,var(--bg));
  color:#e6eef8;  
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden; /* Megakadályozza a scrollbarokat teljes képernyőn */
}
.container{
  width:100%;
  max-width: 1280px; /* Növeltük a maximális szélességet */
}

h1{text-align:center;margin:0 0 10px 0;font-size:1.5rem}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.info span{margin-right:16px;font-size:1rem}
.controls-info a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.controls{ margin-top: auto; } /* A gombokat az aljára tolja */

.controls button{width: 100%; padding:12px 16px;border-radius:8px;border:none;background:var(--accent);
color:#fff;cursor:pointer; font-size: 1rem; font-weight: 500; text-transform: uppercase; transition: background-color 0.2s;}

.controls #startBtn{ font-size: 1.2rem; font-weight: 700; background: #14b8a6; }
.controls button:hover{ background: #3b8cff; }
.controls button.hidden{display:none}
.controls #restartBtn{ margin-top: 8px; background: #556677; }

.game-area{
  display: flex;
  gap: 16px;
}
.gamewrap{
  flex-grow: 1;
}
.sidebar{
  flex-basis: 200px;
  display: flex; /* Flexbox a belső elemek igazításához */
  flex-direction: column; /* Függőleges elrendezés */
  flex-shrink: 0;
  background: rgba(15, 23, 36, 0.5);
  border-radius: 12px; padding: 12px;
}
.sidebar h3{ font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px 0; }
.gamewrap{position:relative;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,0.04)}
canvas{display:block;width:100%;height:auto;background:linear-gradient(180deg,#00172b,#00101a); image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;}

/* overlay finished panel */
.overlay{
  position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;padding:20px;
}
.overlay.hidden{display:none}
.panel{
  background:linear-gradient(180deg,var(--panel),#0b1220);padding:18px;border-radius:12px;max-width:420px;width:100%;
  box-shadow:0 12px 30px rgba(0,0,0,0.6);color:#e6eef8;
}
.panel h2{margin-top:0}
.panel .panelButtons{display:flex;gap:8px;margin-top:8px}
.saveMsg{color:var(--muted);margin-top:8px}
.panel ul { padding-left: 1.2rem; }
.panel li { margin-bottom: 8px; }
label input{margin-left:8px;padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:#05101a;color:#e6eef8}
ol#highscores{padding-left:1.2rem;color:#cfe8ff}
ol#highscores li{ margin-bottom: 4px; }
footer{text-align:center;margin-top:12px;color:var(--muted);font-size:.9rem}

/* small screens */
@media (max-width:768px){ /* Módosított töréspont a jobb reszponzivitásért */
  .container{padding:8px}
  h1{font-size:1.2rem}
  .game-area{ flex-direction: column; }
  .sidebar{
    order: -1; /* toplista felülre kerül mobilon */
    flex-basis: auto;
    max-height: 150px; /* Korlátozzuk a magasságát mobilon */
    overflow-y: auto;
  }
}

/* Fullscreen styles */
body:has(.container:fullscreen) {
  padding: 0;
}
.container:fullscreen {
  max-width: none;
  width: 100%;
  height: 100%;
  padding: 1rem;
}
.container:fullscreen .sidebar {
  flex-basis: 250px; /* Kicsit szélesebb oldalsáv teljes képernyőn */
}