*{box-sizing:border-box}
html,body{overscroll-behavior:none}
:root{
  --bg:#060812;
  --ink:#e9eef6;
  --muted:#92a1b5;
  --accent:#7df3c0;
  --danger:#ff5c7a;
  --card:rgba(255,255,255,0.06);
}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, #11183a 0%, #0b1027 40%, var(--bg) 100%);
  color:var(--ink);
}

/* wrapper */
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:12px;
}

/* ===== generic topbar (old pages) ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.logo{font-weight:700;letter-spacing:.4px}
.stats{color:var(--muted)}

/* ===== Fruit Slice game topbar (2 rows) ===== */
.topbar-game{
  flex-direction:column;
  gap:4px;
  padding:10px 14px 8px;
  background:linear-gradient(180deg, rgba(6,8,18,.95), rgba(6,8,18,.7));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.topbar-game .topbar-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.topbar-game .brand{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--ink);
  text-decoration:none;
}
.topbar-game .brand-logo{font-size:20px;}
.topbar-game .brand-title{font-size:16px;}

.topbar-game .topbar-links{
  display:flex;
  gap:8px;
}
.topbar-game .topbar-home{
  font-size:14px;
  color:rgba(255,255,255,.85);
  text-decoration:none;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
}
.topbar-game .topbar-home:hover{
  background:rgba(255,255,255,.12);
}
.topbar-game .topbar-stats{
  font-size:13px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* canvas */
canvas#game{
  touch-action:none;
  width:100%;
  height:auto;
  display:block;
  background: linear-gradient(180deg, rgba(5,9,18,0.8), rgba(5,9,18,0.95)), url('../img/bg-grid.svg');
  background-size: cover;
  border-radius:16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.08);
}

/* overlay full-screen */
.overlay{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(800px 400px at 50% 40%, rgba(20,26,48,.95), rgba(6,8,18,.98));
  backdrop-filter: blur(4px);
  color:var(--ink);
  text-align:center;
  padding:20px;
}
.overlay.hidden{display:none}
.overlay h1,.overlay h2{margin:.2em 0 .4em 0}
.overlay p{max-width:620px;color:var(--muted)}

/* card-area (menu & gameover) */
#menu, #gameover{
  max-width:560px;
  width:100%;
  margin:0 auto;
}

/* FULL-WIDTH BUTTONS inside overlay (Start, Fullscreen, Login, etc) */
.overlay button,
.overlay .btn{
  background:linear-gradient(180deg,#1bffb3,#10c58f);
  color:#03281e;
  border:0;
  border-radius:12px;
  padding:12px 20px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(16,197,143,.35);
  transition: transform .1s ease;

  display:block;
  width:100%;
  max-width:360px;
  margin:4px auto;
}

/* secondary but full-width */
.overlay button.secondary,
.overlay .btn.secondary{
  background:rgba(255,255,255,0.08);
  color:var(--ink);
  border:1px solid rgba(255,255,255,0.18);
  margin:4px auto;
}

.overlay button:active,
.overlay .btn:active{
  transform:translateY(1px);
}

/* layout for the menu actions (vertical stack) */
.menu-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}

/* in MENU: Start/Login/Fullscreen = full card width (nu limităm la 360px) */
#menu .menu-actions button,
#menu .menu-actions .btn{
  max-width:100%;
}

/* controls row (difficulty, sound, focus) */
.controls-row{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  margin:8px 0;
  flex-wrap:wrap;
}

/* bloc pentru dificultate (label + select) */
.difficulty-block{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;

  width:100%;
  max-width:360px;
  margin:0 auto;
}
.difficulty-label{
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}


/* „break” forțat pe un nou rând între select și toggle-uri */
.controls-break{
  flex-basis:100%;
  height:0;
  margin:0;
  padding:0;
  border:0;
}

/* dropdown difficulty — mai mare, vizibil */
.controls-row select{
  padding:8px 10px;                 /* mai puțin înalt */
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:var(--ink);

  width:100%;                       /* full width în bloc */
  max-width:100%;                   /* fără limită de 260px */
  font-size:15px;                   /* puțin mai mare, dar nu gigantic */
}

form#submitForm input[type="text"]{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:var(--ink);
}

.toggle{margin-top:12px;color:var(--muted)}

/* leaderboard list */
#leaderboard{max-width:420px;text-align:left}
#leaderboard li{
  padding:4px 6px;
  background:var(--card);
  margin:4px 0;
  border-radius:8px;
}

/* save-score form */
form#submitForm{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin:10px 0;
}

/* shared helpers */
.hidden{display:none !important}

/* powerups */
.pup{display:inline-flex;gap:6px;margin-right:6px;vertical-align:middle}
.pup span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  color:var(--ink);
}
.pup img{width:16px;height:16px;display:inline-block}

/* portrait tweaks */
@media (orientation: portrait) {
  .wrap{padding:8px}
  .topbar{
    position:sticky;
    top:0;
    background:linear-gradient(180deg, rgba(6,8,18,.95), rgba(6,8,18,.7));
    backdrop-filter:blur(6px);
    z-index:5;
    padding:8px 4px;
    margin-bottom:6px;
  }
  canvas#game{touch-action:none; max-height:82vh}
  .focus-mode canvas#game{touch-action:none; max-height:95vh !important}
  .overlay{padding:10px}
}

/* fullscreen / scroll lock */
body.focus-lock{
  overflow:hidden;
  height:100%;
  position:fixed;
  inset:0;
}

/* footer */
footer {
  text-align: center;
  font-size: 14px;
  color: #bbb;
  margin-top: 20px;
  padding: 15px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
}
footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}