.start-instruction-row { display:flex; align-items:center; width:100%; max-width:650px; margin:0 auto 50px; }
.start-instruction-text { flex:1; text-align:center; font-size:.95rem; color:rgba(234,255,247,.84); }
.start-instruction-row .audio-toggle-btn { position:static; right:auto; top:auto; transform:none; margin-left:12px; }

.rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(650px,100%);margin:0 auto}
.rule-card{padding:14px 8px;text-align:center;font-size:.8rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:12px}
.rule-card span{display:block;font-size:1.3rem;margin-bottom:6px;color:var(--text)}

.meter-row{display:flex;align-items:center;gap:12px;width:min(650px,100%);margin:0 auto 14px}
.meter-track{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.meter-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--green));transition:width .3s}
.combo-badge{display:flex;gap:4px;align-items:center;font-weight:700;opacity:.15;transition:.2s}
.combo-badge.on{opacity:1;transform:scale(1.15);color:#fbbf24}

/* ---------- LANDING PREVIEW ---------- */
.car-preview-wrap{width:100%;max-width:600px;margin:18px auto 22px;overflow:hidden}.car-preview-wrap canvas{display:block;width:100%;height:auto}

.board-wrap{position:relative;width:min(650px,100%);margin:10px auto 0;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#0a1512;touch-action:manipulation}
#board{display:block;width:100%;height:auto;aspect-ratio:600/520;cursor:pointer;-webkit-tap-highlight-color:transparent}
.banner{position:absolute;left:50%;top:14px;transform:translate(-50%,-30px);padding:8px 16px;border-radius:99px;font-weight:700;font-size:.85rem;letter-spacing:.08em;background:#f59e0b;color:#111;opacity:0;pointer-events:none;transition:.3s;white-space:nowrap}
.banner.show{opacity:1;transform:translate(-50%,0)}

.result-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  width:100%;
  max-width:520px;
  margin:22px auto 0;
}

.metric{
  padding:12px 8px;
  border-radius:12px;
  border:1px solid rgba(52,211,153,.18);
  background:rgba(11,18,16,.7);
  text-align:center;
}

.metric-value{
  font-size:1.35rem;
  font-weight:900;
  color:var(--green);
  line-height:1;
}

.metric-label{
  margin-top:6px;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(234,255,247,.42);
}


@media(max-width:520px){.rule-grid{gap:5px}.rule-card{font-size:.68rem}}