/* Styles for the second set of games. */
.xo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 360px, max(230px, calc(calc(100 * var(--dvh)) - 330px))); margin: 0 auto; }
.xo button { aspect-ratio: 1; border-radius: 18px; border: 3px solid var(--line2); background: var(--panel2); font-size: clamp(36px, calc(12 * var(--vw)), 70px); font-weight: 800; cursor: pointer; color: var(--text); line-height: 1; padding: 0; }
.xo button.x { color: #72c4ff; } .xo button.o { color: #ffcb3d; } .xo button.win { background: color-mix(in srgb, #1fb863 40%, var(--panel)); border-color: #7dffb5; }
.mz { display: block; width: min(100%, 600px, max(240px, calc(calc(100 * var(--dvh)) - 330px))); aspect-ratio: 1; margin: 0 auto; border-radius: 14px; background: #0a1238; touch-action: none; }
.mz-pad { display: grid; grid-template-columns: repeat(3, max(64px, calc(62px * var(--k)))); gap: 6px; justify-content: center; margin-top: 12px; }
.mz-pad .kbtn.round { width: 100%; min-height: max(64px, calc(60px * var(--k))); border-radius: 18px; font-size: calc(26px * var(--k)); }
.ml { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: min(100%, 380px, max(240px, calc((calc(100 * var(--dvh)) - 330px) * 1.25))); margin: 12px auto; } .ml.six { grid-template-columns: repeat(3, 1fr); width: min(100%, 460px); }
.ml button { aspect-ratio: 1.3; min-height: 64px; border-radius: 22px; border: 0; cursor: pointer; opacity: .55; transition: opacity .08s, transform .08s; box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.ml button.lit { opacity: 1; transform: scale(1.05); box-shadow: 0 0 30px currentColor; }
.ml button.rest { opacity: .2; }
body.calm .ml button.lit { transform: none; box-shadow: 0 0 0 5px #fff; }
.rr-pad .kbtn.round { width: max(72px, calc(70px * var(--k))); min-height: max(72px, calc(70px * var(--k))); border-radius: 22px; }
.car-prev { width: min(100%, 520px); display: block; margin: 0 auto; }
.car-stat { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; align-items: center; font-size: 14px; }
/* ---------- V3 (holographic "future" look) only: classic V1 keeps the rules above unchanged ---------- */
html[data-gfx=v3] .mz { background: #030a1f; box-shadow: inset 0 0 0 1px var(--v3-edge, rgba(150,226,255,.42)), 0 0 24px rgba(71,200,255,.20); }
/* sound pads: lit glass in their own color (opacity, sizes and the lit / resting states work exactly as before) */
html[data-gfx=v3] .ml button { opacity: .62; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 2px rgba(255,255,255,.22), inset 0 -10px 22px rgba(0,8,40,.35), 0 0 18px color-mix(in srgb, currentColor 35%, transparent); }
html[data-gfx=v3] .ml button.lit { opacity: 1; transform: scale(1.05); box-shadow: inset 0 0 0 3px rgba(255,255,255,.85), 0 0 34px currentColor; }
html[data-gfx=v3] .ml button.rest { opacity: .2; box-shadow: none; }
html[data-gfx=v3] body.calm .ml button.lit { transform: none; box-shadow: 0 0 0 5px #fff; }