/* Memória — estilos locais */
.stage-wrap .stage-overlay .btn { margin-top: 10px; }
.score.p0 b { color: var(--p1); }
.score.p1 b { color: var(--p2); }
.score .who { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 13px; }
.actions { display: grid; }

/* Escolha de modo */
.modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 8px; }
.mode {
  --c: var(--mint); --ce: var(--mint-edge);
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 22px; border-radius: 24px; background: #fff; border: 2px solid var(--line);
  box-shadow: 0 6px 0 var(--c); color: var(--ink); text-decoration: none;
}
.mode[data-c="mint"] { --c: var(--mint); --ce: var(--mint-edge); }
.mode[data-c="pink"] { --c: var(--pink); --ce: var(--pink-edge); }
.mode:hover { box-shadow: 0 10px 0 var(--c); color: var(--ink); }
.mode:active { box-shadow: 0 2px 0 var(--c); }
.mode strong { font: 700 20px/1.2 var(--display); letter-spacing: -0.02em; margin-top: 4px; }
.mode .muted { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.mode .icon {
  width: 64px; height: 64px; display: grid; place-items: center; font-size: 32px; margin-bottom: 10px;
  border-radius: 18px; background: var(--c); box-shadow: 0 5px 0 var(--ce);
}
.mode .tag {
  position: absolute; top: 20px; right: 20px; font-size: 12.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); border: 0;
}
.mode .tag.online { background: #dcf7ef; color: var(--mint-edge); }
.mode .tag.online::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-right: 6px; vertical-align: 1px; }
.mode .cta { margin-top: 12px; font-weight: 800; color: var(--blue); }