/* =====================================================
 * Papier Froissé 3D — UI styles
 * Game UI overlays only; the canvas does the rendering.
 * ===================================================== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; }
body {
  font-family:'Nunito', system-ui, sans-serif;
  overflow:hidden; touch-action:none;
  -webkit-user-select:none; user-select:none;
  background:#0c0814; color:#fff;
}
canvas#gl { display:block; position:fixed; inset:0; z-index:1; }

.hidden { display:none !important; }

/* ---------- Loader ---------- */
#loader {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #2a1d4a 0%, #0c0814 70%);
}
.loader-card {
  text-align:center; max-width:380px; width:80%;
}
.loader-emoji { font-size:4rem; animation:bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform:translateY(-8px) rotate(-6deg); } }
.loader-title {
  font-family:'Fredoka', sans-serif; font-size:1.8rem;
  margin:0.6rem 0 1.2rem;
  background:linear-gradient(135deg,#a78bfa,#f472b6);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.loader-bar {
  height:8px; border-radius:4px; background:rgba(255,255,255,0.1);
  overflow:hidden; margin-bottom:0.7rem;
}
#loaderFill {
  height:100%; width:0%;
  background:linear-gradient(90deg,#667eea,#f472b6);
  transition:width 0.25s;
}
.loader-sub { font-size:0.85rem; color:#9aa; }

/* ---------- Welcome ---------- */
#welcome {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#667eea,#764ba2);
  transition:opacity 0.6s, transform 0.6s;
}
#welcome.gone { opacity:0; transform:scale(1.05); pointer-events:none; }
.welcome-card {
  background:#fff; color:#222; border-radius:28px; padding:2rem 1.6rem;
  max-width:420px; width:90%; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  animation:popIn 0.5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { 0% { transform:scale(0.6) translateY(30px); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.welcome-card h1 {
  font-family:'Fredoka', sans-serif; font-size:2rem;
  background:linear-gradient(135deg,#667eea,#764ba2);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.welcome-card .sub { color:#999; font-size:0.95rem; margin-bottom:1.2rem; }
.welcome-card .who { font-size:0.85rem; color:#999; margin-bottom:0.6rem; font-weight:600; }

.avatar-pick { display:flex; gap:1rem; justify-content:center; margin-bottom:1.2rem; }
.avatar-btn {
  width:110px; height:130px; border:3px solid #e0e0e0; border-radius:20px;
  background:#fafafa; cursor:pointer; transition:all 0.25s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.3rem;
  font-family:inherit; font-weight:700; color:#555;
}
.avatar-btn:hover { border-color:#b0b0ff; background:#f0f0ff; transform:translateY(-3px); }
.avatar-btn.selected { border-color:#667eea; background:#eef0ff; box-shadow:0 4px 15px rgba(102,126,234,.3); transform:translateY(-3px); }
.avatar-btn .emoji { font-size:3rem; line-height:1; }

.nick-input {
  width:100%; padding:0.85rem 1.2rem; border:2px solid #e0e0e0; border-radius:14px;
  font:inherit; font-size:1.05rem; font-weight:600;
  text-align:center; outline:none; margin-bottom:1.2rem;
  transition:border-color 0.25s;
}
.nick-input:focus { border-color:#667eea; }

.play-btn {
  width:100%; padding:1rem; border:none; border-radius:14px;
  background:linear-gradient(135deg,#667eea,#764ba2); color:#fff;
  font-family:'Fredoka', sans-serif; font-size:1.3rem; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 4px 15px rgba(102,126,234,.4);
}
.play-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 20px rgba(102,126,234,.5); }
.play-btn:disabled { opacity:0.5; cursor:not-allowed; }

#welcomeLb { margin-top:1.2rem; text-align:left; }
#welcomeLb h3 { font-size:0.85rem; color:#999; text-align:center; margin-bottom:0.5rem; font-weight:700; }
.mini-row { display:flex; justify-content:space-between; padding:0.35rem 0.6rem; border-bottom:1px solid #f0f0f0; font-size:0.9rem; color:#444; }
.mini-row:last-child { border-bottom:none; }

/* ---------- Top buttons ---------- */
.topBtn {
  position:fixed; top:14px; z-index:50;
  padding:0.55rem 1rem; border:none; border-radius:12px;
  background:rgba(255,255,255,0.15); backdrop-filter:blur(10px);
  color:#fff; font:inherit; font-weight:700; font-size:0.9rem;
  cursor:pointer; text-decoration:none; transition:background 0.2s;
}
.topBtn:hover { background:rgba(255,255,255,0.25); }
.topBtn.left  { left:14px; }
.topBtn.right { right:14px; }
.topBtn.right2{ right:120px; }

/* ---------- HUD ---------- */
#hud {
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  z-index:40; display:flex; gap:0.6rem; padding:0.5rem;
  background:rgba(0,0,0,0.45); backdrop-filter:blur(10px);
  border-radius:16px;
}
.hud-cell {
  padding:0.4rem 0.9rem; min-width:78px; text-align:center;
  border-radius:10px; background:rgba(255,255,255,0.06);
}
.hud-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em; color:#aab; }
.hud-val   { font-family:'Fredoka', sans-serif; font-size:1.3rem; color:#fff; }

#instructions {
  position:fixed; left:50%; top:62%; transform:translateX(-50%);
  z-index:40; padding:0.7rem 1.2rem; border-radius:14px;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(8px);
  font-weight:700; font-size:0.95rem; pointer-events:none;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform:translate(-50%,-3px); } }

/* ---------- Overlays ---------- */
.overlay {
  position:fixed; inset:0; z-index:80;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(6px);
}
.overlay.visible { display:flex; }
.overlay-card {
  background:#fff; color:#222; border-radius:24px; padding:1.8rem 1.4rem;
  text-align:center; max-width:380px; width:88%;
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1);
}
.overlay-card.wide { max-width:520px; }
.overlay-card h2 { font-family:'Fredoka', sans-serif; font-size:1.6rem; margin-bottom:0.4rem; }
.overlay-card .big-emoji { font-size:4rem; display:block; margin-bottom:0.4rem; }
.overlay-card p { color:#777; font-size:0.95rem; line-height:1.5; margin-bottom:0.8rem; }

.stats-row { display:flex; justify-content:center; gap:1.2rem; margin:1rem 0; }
.stat { font-family:'Fredoka', sans-serif; font-size:2.3rem; color:#667eea; }
.stat-label { font-size:0.75rem; color:#aaa; text-transform:uppercase; letter-spacing:0.05em; }

#recordInfo { font-size:0.85rem; min-height:1.2em; color:#f59e0b; font-weight:700; margin-bottom:0.6rem; }

.btn-row { display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; margin-top:0.8rem; }
.btn-secondary, .btn-primary {
  padding:0.7rem 1.3rem; border-radius:12px; font:inherit; font-weight:700; font-size:0.95rem;
  cursor:pointer; transition:all .2s;
}
.btn-secondary { background:#fff; border:2px solid #e0e0e0; color:#555; }
.btn-secondary:hover { border-color:#667eea; color:#667eea; }
.btn-primary {
  border:none; color:#fff;
  background:linear-gradient(135deg,#667eea,#764ba2);
  box-shadow:0 3px 10px rgba(102,126,234,0.4);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 5px 15px rgba(102,126,234,0.5); }

/* ---------- Level select ---------- */
.lvl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(105px,1fr)); gap:0.7rem; margin:1rem 0; }
.lvl-item {
  background:#f7f7fb; border:2px solid #eee; border-radius:14px;
  padding:0.7rem 0.4rem; cursor:pointer; transition:all .2s; position:relative;
  text-align:center;
}
.lvl-item:hover:not(.locked) { border-color:#667eea; background:#eef0ff; transform:translateY(-2px); }
.lvl-item.locked { opacity:0.5; cursor:not-allowed; background:#f0f0f0; }
.lvl-item.active { border-color:#764ba2; background:#f0e6ff; }
.lvl-icon { font-size:1.8rem; display:block; margin-bottom:0.2rem; }
.lvl-num  { font-size:0.75rem; color:#999; font-weight:600; }
.lvl-name { font-size:0.85rem; font-weight:700; color:#444; line-height:1.2; }
.lvl-stars { margin-top:0.3rem; font-size:0.85rem; color:#f59e0b; min-height:1em; }
.lock-icon { position:absolute; top:6px; right:6px; font-size:0.95rem; }

/* ---------- Level transition ---------- */
#lvlTrans {
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(8px);
  pointer-events:none;
}
.trans-card { text-align:center; animation:popIn 0.5s cubic-bezier(.34,1.56,.64,1); }
.trans-icon { font-size:5rem; display:block; margin-bottom:0.6rem; }
.trans-label { font-family:'Fredoka',sans-serif; font-size:1.1rem; color:#a78bfa; letter-spacing:0.05em; }
.trans-name { font-family:'Fredoka',sans-serif; font-size:2.4rem; color:#fff; margin:0.2rem 0; }
.trans-desc { color:#bbb; font-size:1rem; }
.trans-stars { color:#f59e0b; font-size:1.5rem; margin-top:0.6rem; }

/* ---------- Leaderboard ---------- */
.lb-tabs { display:flex; justify-content:center; gap:0.4rem; margin-bottom:1rem; }
.lb-tab {
  padding:0.45rem 0.9rem; border:none; border-radius:8px;
  background:#f0f0f5; color:#666; font:inherit; font-weight:700; font-size:0.85rem;
  cursor:pointer; transition:all 0.2s;
}
.lb-tab.active { background:#667eea; color:#fff; }
.lb-table { width:100%; border-collapse:collapse; font-size:0.9rem; color:#333; }
.lb-table th { font-size:0.7rem; color:#999; text-transform:uppercase; padding:0.4rem 0.3rem; text-align:left; border-bottom:1px solid #eee; font-weight:700; }
.lb-table td { padding:0.5rem 0.3rem; border-bottom:1px solid #f5f5f5; }
.lb-table .rank { font-family:'Fredoka',sans-serif; color:#764ba2; }
.lb-table .score-cell { text-align:right; font-family:'Fredoka',sans-serif; color:#667eea; font-size:1.05rem; }
.lb-table .date-cell { text-align:right; color:#999; font-size:0.8rem; }
.lb-empty { text-align:center; padding:1.5rem; color:#aaa; }

/* ---------- Perf overlay ---------- */
#perf {
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:30; padding:0.3rem 0.7rem; border-radius:8px;
  background:rgba(0,0,0,0.5); color:#0f0;
  font-family:ui-monospace, monospace; font-size:0.75rem;
  pointer-events:none; opacity:0; transition:opacity 0.3s;
}
#perf.show { opacity:1; }

@media (max-width:520px) {
  .topBtn { font-size:0.78rem; padding:0.45rem 0.75rem; }
  .topBtn.right2 { right:96px; }
  .hud-cell { min-width:60px; padding:0.35rem 0.55rem; }
  .hud-val { font-size:1.05rem; }
}