/* ── PAD SIZE TOKEN ───────────────────────────────────────────── */
:root { --ms-btn: 112px; --ms-gap: 10px; }

@media (max-width: 640px) { :root { --ms-btn: 88px;  --ms-gap: 8px; } }
@media (max-width: 460px) { :root { --ms-btn: 70px;  --ms-gap: 7px; } }

/* ── GRID WRAPPER ─────────────────────────────────────────────── */
.ms-grid-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 4px 4px;
}

/* ── GRID ─────────────────────────────────────────────────────── */
#msGrid {
  display: grid;
  grid-template-columns: repeat(3, var(--ms-btn));
  grid-template-rows: repeat(3, var(--ms-btn));
  gap: var(--ms-gap);
}

/* ── SHARED PAD BASE ──────────────────────────────────────────── */
.ms-pad {
  width: var(--ms-btn);
  height: var(--ms-btn);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  border: 2px solid rgba(255,255,255,.18);
  transition: transform .1s, filter .1s, box-shadow .1s;
  /* --pad-bg and --pad-glow set inline per pad */
  background: var(--pad-bg);
}

/* ── PAD TEXT ─────────────────────────────────────────────────── */
.pad-name {
  font-size: clamp(15px, 2.4vw, 20px);
  font-weight: 800;
  color: rgba(255,255,255,.92);
  letter-spacing: .5px;
  line-height: 1;
}

.pad-freq {
  font-size: clamp(9px, 1.4vw, 12px);
  color: rgba(255,255,255,.5);
  letter-spacing: .3px;
  line-height: 1;
}

/* ── IDLE STATE — pads dimmed, not clickable ─────────────────── */
#msGrid.ms-idle .ms-pad {
  filter: brightness(0.38) saturate(0.55);
  cursor: default;
  pointer-events: none;
}

/* ── SHOWING STATE — sequence playback ───────────────────────── */
#msGrid.ms-showing .ms-pad {
  filter: brightness(0.42) saturate(0.6);
  cursor: default;
  pointer-events: none;
}

/* ── LIT STATE — active pad (both showing & input phases) ────── */
.ms-pad.ms-lit {
  filter: brightness(1.22) saturate(1.12) !important;
  transform: scale(1.07) !important;
  box-shadow:
    0 0 18px var(--pad-glow),
    0 0 40px var(--pad-glow),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* ── HOVER — pointer devices only, input phase ───────────────── */
@media (hover: hover) and (pointer: fine) {
  #msGrid:not(.ms-showing):not(.ms-idle) .ms-pad:not(.ms-lit):hover {
    filter: brightness(0.82);
    transform: scale(1.04);
  }
}

/* ── ERROR FLASH ──────────────────────────────────────────────── */
@keyframes ms-err {
  0%   { filter: brightness(1.5) saturate(2); transform: scale(1.08); }
  35%  { filter: brightness(0.3);             transform: scale(0.94); }
  70%  { filter: brightness(1.3) saturate(1.6); transform: scale(1.05); }
  100% { filter: brightness(0.45);            transform: scale(1); }
}

.ms-pad.ms-error {
  animation: ms-err 0.65s ease-out forwards !important;
  pointer-events: none !important;
  background: #ef4444 !important;
}

/* ── CENTER DISPLAY ───────────────────────────────────────────── */
.ms-center {
  width: var(--ms-btn);
  height: var(--ms-btn);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--best-bg);
  border: 2px solid var(--border-light);
  transition: background .25s;
  pointer-events: none;
}

.ms-center-num {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  transition: color .2s;
}

.ms-center-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--muted);
}

@keyframes ms-lvl-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.ms-center.ms-bump .ms-center-num {
  animation: ms-lvl-pop .4s cubic-bezier(.34,1.56,.64,1);
}

/* ── HEADER EXTRAS ────────────────────────────────────────────── */
.ms-level-display,
.ms-best-inline {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}

.ms-level-display b,
.ms-best-inline b {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}

/* ── STATUS MESSAGE ───────────────────────────────────────────── */
.ms-status {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  min-height: 22px;
  padding: 8px 0 2px;
  margin: 0;
}

.ms-status strong { color: var(--text); }

/* ── ACTION BUTTONS ───────────────────────────────────────────── */
.ms-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ── BEST BOX ─────────────────────────────────────────────────── */
#bestBox {
  margin-top: 14px;
  max-width: 260px;
}

/* ── AD SLOTS ─────────────────────────────────────────────────── */
.side-panel-ad     { display: none; }
.side-panel-mid-ad { display: none; }
.game-mid-ad       { display: none; margin: 0 auto 14px; }

@media (max-width: 775px) {
  .hdr-nav .ad-leaderboard { display: none; }
  .game-mid-ad { display: flex; }
}

@media (max-width: 1100px) {
  .content-row { grid-template-columns: 1fr; }
}

@media (min-width: 775px) and (max-width: 1100px) {
  .right-sidebar { display: none; }
  .side-panel-ad { display: flex; }
}

@media (max-width: 650px) {
  .side-panel-mid-ad { display: flex; margin: 0 auto; }
}