/* ── Layout ───────────────────────────────────────────────── */
.app { padding: 8px 8px 12px; gap: 6px; display: flex; flex-direction: column; align-items: center; }

/* ── HUD ──────────────────────────────────────────────────── */
#gems-hud {
  display: flex; gap: 6px; width: 100%;
}
.hud-cell {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 5px 8px; text-align: center;
}
.hud-score-cell { flex: 1.6; }
.hud-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; }
.hud-val   { font-size: 20px; font-weight: 800; color: var(--accent); line-height: 1.1; }
#hud-timer.danger { color: #f44; animation: timer-pulse .6s ease-in-out infinite alternate; }
@keyframes timer-pulse { to { opacity: .4; } }

/* ── Fever bar ────────────────────────────────────────────── */
#gems-fever-wrap {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 4px 8px; box-sizing: border-box;
  background: linear-gradient(180deg, #1a0d2a, #0d0618);
  border: 1px solid #4a2870; border-radius: var(--radius-md);
  transition: border-color .2s, box-shadow .2s;
}
.fever-label {
  font-size: 12px; font-weight: 900; color: #ffaa44;
  letter-spacing: 2px; text-shadow: 0 0 6px rgba(255,170,68,.5);
  transition: color .2s, text-shadow .2s;
}
#gems-fever-bg {
  flex: 1; height: 10px; background: rgba(255,255,255,.08);
  border-radius: 5px; overflow: hidden;
}
#gems-fever-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff6622, #ffcc44, #ff66ff, #ffcc44, #ff6622);
  background-size: 200% 100%;
  border-radius: 5px; transition: width .3s ease-out;
}
#gems-fever-status {
  font-size: 11px; font-weight: 800; color: var(--text-muted);
  min-width: 56px; text-align: right;
  letter-spacing: .5px;
}

/* READY (bar full, waiting for next drag) */
#gems-fever-wrap.ready {
  border-color: #ffcc44;
  box-shadow: 0 0 14px rgba(255,200,100,.55);
  animation: feverPulse .55s ease-in-out infinite alternate;
}
#gems-fever-wrap.ready .fever-label,
#gems-fever-wrap.ready #gems-fever-status { color: #ffcc44; text-shadow: 0 0 8px rgba(255,200,100,.8); }
#gems-fever-wrap.ready #gems-fever-fill { animation: feverShimmer 1.1s linear infinite; }
@keyframes feverPulse  { to { box-shadow: 0 0 24px rgba(255,200,100,1); } }
@keyframes feverShimmer { to { background-position: 200% 0; } }

/* ACTIVE (during the fever drag) */
#gems-fever-wrap.active {
  border-color: #ff44ff;
  box-shadow: 0 0 20px rgba(255,80,255,.8);
}
#gems-fever-wrap.active .fever-label { color: #ff66ff; text-shadow: 0 0 10px #ff44ff; }
#gems-fever-wrap.active #gems-fever-status { color: #ff66ff; text-shadow: 0 0 10px #ff44ff; }

/* Board glow during fever drag */
#gems-board-wrap.fever-active {
  box-shadow: 0 0 0 3px #ffcc44, 0 0 36px rgba(255,170,68,.85), var(--shadow-md);
  animation: feverBorder .45s ease-in-out infinite alternate;
}
@keyframes feverBorder {
  to { box-shadow: 0 0 0 3px #ff44ff, 0 0 48px rgba(255,80,255,1), var(--shadow-md); }
}

/* ── Board ────────────────────────────────────────────────── */
#gems-board-wrap {
  position: relative; border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-md);
  background: #0d0d1a; margin: 0 auto;
  width: min(416px, 100%);
  transition: box-shadow .2s;
}
#gems-canvas { display: block; touch-action: none; width: 100%; aspect-ratio: 1; }

/* ── Overlay (title / level-clear / game-over) ──────────────*/
#gems-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); gap: 12px; padding: 20px;
  border-radius: var(--radius-md);
}
#gems-overlay.hidden { display: none; }
.ov-title  { font-size: 28px; font-weight: 900; color: #fff; text-align: center; }
.ov-sub    { font-size: 14px; color: #ccc; text-align: center; }
.ov-btn    { padding: 10px 28px; background: var(--accent); color: var(--on-accent, #000);
             font-weight: 700; font-size: 16px; border: none; cursor: pointer;
             border-radius: var(--radius-md); }
.ov-btn:hover { filter: brightness(1.1); }

/* ── Drag countdown bar ───────────────────────────────────── */
#gems-drag-bar-wrap {
  display: none; /* JS shows this only while dragging */
  align-items: center; gap: 8px; width: 100%;
}
#gems-drag-bar-bg {
  flex: 1; height: 8px; background: rgba(255,255,255,0.12);
  border-radius: 4px; overflow: hidden;
}
#gems-drag-bar-fill {
  height: 100%; width: 100%; background: #4df;
  border-radius: 4px; transition: background 0.4s;
}
#gems-drag-bar-label {
  font-size: 13px; font-weight: 800; color: #4df;
  min-width: 26px; text-align: right; transition: color 0.4s;
}