:root{
  --bg:#0e111a;
  --bg2:#0b0e16;
  --panel:#15192a;
  --accent:#86e3ce;     /* calm mint */
  --accent-2:#c7f9cc;   /* light mint */
  --text:#f5f7fb;
  --muted:#a8b0c2;
  --outline:rgba(255,255,255,.10);
  --shadow:0 10px 40px rgba(0,0,0,.45);
}

/* Reset */
*{ box-sizing:border-box; }
body{
  margin:0; background:radial-gradient(120% 120% at 50% 0%, var(--bg2) 0%, var(--bg) 65%);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); height:100vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* Frame 9:16 */
#frame{
  width:100%; max-width:540px; aspect-ratio:9/16; position:relative; border-radius:22px; overflow:hidden;
  background:#0a0d14; box-shadow:var(--shadow); border:1px solid var(--outline);
}

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

/* Top actions */
.top-actions{ position:absolute; right:10px; top:10px; display:flex; gap:8px; z-index:3; }
.top-actions button{
  background:rgba(255,255,255,.06); border:1px solid var(--outline); color:#fff;
  padding:8px 10px; border-radius:12px; font-size:16px; cursor:pointer;
}

/* Loading */
.loading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:4;
  background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.55));
  transition: opacity .3s ease;
}
.loading.hide{ opacity:0; }
.loader-ring{
  width:42px; height:42px; border-radius:50%;
  border:3px solid rgba(255,255,255,.12); border-top-color:var(--accent); animation:spin .9s linear infinite;
}
.loading-text{ margin-top:10px; color:var(--muted); font-size:13px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* HUD & panels */
.hud{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
}
.hud.hidden{ display:none !important; }
.panel{
  background:rgba(21,25,42,.85); border:1px solid var(--outline); border-radius:16px; padding:20px 22px; width:85%; max-width:360px;
  box-shadow:var(--shadow); text-align:center;
}
h1{ margin:0 0 6px; font-size:22px; font-weight:800; }
p{ margin:8px 0; color:var(--muted); }

/* Controls */
.controls{ margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.select{ text-align:left; display:flex; flex-direction:column; gap:6px; }
.select span{ font-size:12px; color:var(--muted); }

/* Custom select – no white! */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; padding:10px 12px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:#eaf0ff; border:1px solid var(--outline); font-size:14px; cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"%23eaf0ff\"><path d=\"M7 10l5 5 5-5\"/></svg>');
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
select:focus{ outline:none; box-shadow:0 0 0 2px rgba(134,227,206,.25); }

/* Toggle */
.toggle{ display:flex; align-items:center; gap:8px; }

/* Buttons */
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; border:1px solid var(--outline);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); color:#fff; text-decoration:none; cursor:pointer; font-weight:600;
}
.btn.primary{ background:linear-gradient(180deg, var(--accent-2), var(--accent)); color:#0a1a14; border-color:transparent; }

/* Score bar */
.scorebar{ position:absolute; left:10px; top:10px; z-index:2;
  background:rgba(0,0,0,.35); border:1px solid var(--outline); padding:6px 10px; border-radius:10px; font-size:14px; display:flex; gap:10px;
}

/* Modal */
.modal{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:4; }
.hidden{ display:none !important; }
.modal .panel{ width:90%; max-width:380px; }

/* THEMES */
.theme-minimal{ /* nuanțe reci, fără glow agresiv */ }
.theme-pastel{ --accent:#ffd166; --accent-2:#ffe29a; }
.theme-cyber { --accent:#00ffc6; --accent-2:#7effe9; }
.theme-pixel { image-rendering:pixelated; }

#backHomeBtn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  transition: 0.3s ease;
}

#backHomeBtn:hover {
  background: rgba(255, 204, 0, 0.9);
  color: #000;
  transform: scale(1.05);
}