/* Memorizi: os quatro botões coloridos e as bolinhas da sequência (o resto vem de ../gamezi-kit.css) */
.mz-msg { margin: 0; text-align: center; font-weight: 800; font-size: 1.15rem; }
.mz-msg.small { font-size: .95rem; color: var(--muted); }
.pads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 360px); margin: 0 auto; aspect-ratio: 1; }
.pad { border: 0; cursor: pointer; opacity: .42; transition: opacity .08s, transform .08s, filter .08s; touch-action: manipulation; }
.pads.classico .pad:nth-child(1) { border-radius: 60% 14px 14px 14px; }
.pads.classico .pad:nth-child(2) { border-radius: 14px 60% 14px 14px; }
.pads.classico .pad:nth-child(3) { border-radius: 14px 14px 14px 60%; }
.pads.classico .pad:nth-child(4) { border-radius: 14px 14px 60% 14px; }
.pads.grade { gap: 8px; width: min(100%, 420px); }
.pads.grade .pad { border-radius: 18px; font: inherit; font-weight: 800; font-size: clamp(1.6rem, 9vw, 2.6rem); color: #171717; line-height: 1; }
.pad:not(:disabled) { opacity: .75; }
.pad:not(:disabled):active, .pad.on { opacity: 1; transform: scale(.97); filter: brightness(1.25) saturate(1.2); }
.pad:disabled { cursor: default; }
.p0 { background: #FF4D3D; }
.p1 { background: #FFC93C; }
.p2 { background: #4C8BF5; }
.p3 { background: #2BA84A; }
.p4 { background: #8E6FB5; }
.p5 { background: #F77F00; }
.p6 { background: #2A9D8F; }
.p7 { background: #F4A6B7; }
.p8 { background: #9AA0B5; }
.mz-dots .dot.sim { width: 30px; height: 30px; display: inline-grid; place-items: center; font-style: normal; font-weight: 800; font-size: .8rem; color: #171717; }
.mz-dots.big .dot.sim { width: 38px; height: 38px; font-size: 1.05rem; }
.mz-dots.small .dot.sim { width: 20px; height: 20px; font-size: .62rem; }
.mz-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 22px; }
.mz-dots .dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.mz-dots.big .dot { width: 28px; height: 28px; }
.mz-dots .dot.x { outline: 3px solid var(--fg); outline-offset: 2px; opacity: .55; }
.mz-dots.small { display: inline-flex; gap: 3px; min-height: 0; vertical-align: middle; }
.mz-dots.small .dot { width: 12px; height: 12px; }