.gk-wrap { display: grid; place-items: center; width: 100%; }
.gk-board { --n: 15; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 560px); aspect-ratio: 1; padding: 6px; background: #d9a441; box-shadow: 0 0 0 3px #000, 6px 6px 0 #000; }
.gk-board.mini { width: 100%; padding: 3px; box-shadow: none; }
.gk-cell { position: relative; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: default; aspect-ratio: 1; }
.gk-cell::before, .gk-cell::after { content: ""; position: absolute; background: #3a2a10; pointer-events: none; }
.gk-cell::before { left: 0; right: 0; top: 50%; height: 1px; }
.gk-cell::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.gk-cell > svg, .gk-ghost { position: relative; z-index: 1; width: 86%; height: 86%; }
.gk-ghost { opacity: 0; display: grid; }
.my-turn .gk-cell:not([aria-disabled]) { cursor: pointer; }
.my-turn .gk-cell:not([aria-disabled]):hover .gk-ghost, .my-turn .gk-cell:not([aria-disabled]):focus-visible .gk-ghost { opacity: .45; }
.gk-cell.last > svg { filter: drop-shadow(0 0 3px var(--pink)); }
.gk-cell.win > svg { filter: drop-shadow(0 0 4px var(--yellow)); animation: blink 0.6s steps(1) 4; }
.gk-cell:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }
.gk-stone { display: block; width: 100%; height: 100%; }
.gk-stone.drop { animation: pop .18s steps(3); }
.replay-board.gk-board { max-width: 520px; margin: 0 auto; }

.mm-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; outline: none; }
.mm-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(100%, 640px); align-items: start; }
.mm-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mm-side { padding: 10px; background: #2a1a10; box-shadow: 0 0 0 3px #000, 5px 5px 0 #000; min-width: 0; }
.mm-side.mine { box-shadow: 0 0 0 3px var(--cyan), 5px 5px 0 #000; }
.mm-side h4 { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 8px; font: 0.72rem var(--font-display); text-transform: uppercase; color: var(--yellow); min-width: 0; }
.mm-side h4 > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-secret { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 6px; background: #000; }
.mm-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mm-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; background: #00000055; min-height: 30px; }
.mm-row.solved { background: #3dff9a26; box-shadow: inset 3px 0 0 var(--green); }
.mm-row.editing { background: #22e4ff14; box-shadow: inset 0 0 0 1px #0b6177; }
.mm-row.active { box-shadow: inset 0 0 0 2px var(--cyan); }
.mm-n { width: 18px; flex: none; font: 0.9rem var(--font-digits); color: var(--muted); text-align: right; }
.mm-code { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.mm-peg { display: block; flex: none; width: 22px; height: 22px; padding: 0; background: var(--c); box-shadow: inset -3px -3px 0 #0005, inset 2px 2px 0 #fff5, 0 0 0 1px #000; }
.mm-peg.mm-blank { background: #05040d; box-shadow: inset 0 0 0 2px #3a2a10; }
.mm-peg.mm-hidden { background: repeating-linear-gradient(45deg, #5a3a20 0 3px, #2a1a10 3px 6px); }
.mm-slot { display: block; flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.mm-row.editing .mm-peg.mm-blank { box-shadow: inset 0 0 0 2px #0b6177; }
.mm-hints { display: flex; gap: 3px; flex: none; }
.mm-k { display: grid; place-items: center; width: 18px; height: 18px; font: 700 0.72rem/1 var(--font); font-style: normal; background: #05040d; box-shadow: inset 0 0 0 2px #3a2a10; }
.mm-k.ok { background: var(--green); color: #02210f; box-shadow: inset 0 0 0 2px #1d7a4c; }
.mm-k.near { background: var(--yellow); color: #3a2c00; box-shadow: inset 0 0 0 2px #8a7a1f; }
.mm-hints.placeholder .mm-k { opacity: .45; }
.mm-legend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: .84rem; color: var(--text-2); }
.mm-leg { display: inline-flex; align-items: center; gap: 6px; }.mm-palette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.mm-color { position: relative; aspect-ratio: 1; min-height: 34px; border: 0; padding: 0; cursor: pointer; background: var(--c); box-shadow: inset -4px -4px 0 #0005, inset 3px 3px 0 #fff5, 0 0 0 2px #000; }
.mm-color:hover:not(:disabled) { transform: translateY(-2px); }
.mm-color:disabled { opacity: .35; cursor: not-allowed; }
.mm-key { position: absolute; right: 3px; bottom: 1px; font: 0.62rem var(--font-display); color: #000a; }
.mm-color:focus-visible, .mm-slot:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.mm-actions { display: flex; gap: 6px; justify-content: flex-end; }
.mm-actions .btn { flex: 1; }
.mm-help { margin: 0; text-align: center; }
@media (max-width: 560px) {
  .mm-layout { grid-template-columns: 1fr; }
  .mm-layout > .mm-col:last-child .mm-rows { display: grid; grid-template-columns: 1fr 1fr; }
  .mm-peg { width: 18px; height: 18px; }
  .mm-k { width: 15px; height: 15px; font-size: .62rem; }
}.mm-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; background: #2a1a10; height: 100%; align-content: center; }
.mm-mini > div { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.mm-icon { width: 100%; height: 100%; }
@media (max-width: 560px) { .mm-boards { grid-template-columns: 1fr; } .mm-peg { width: 16px; height: 16px; } }
.modal.modal-tuto { width: min(680px, calc(100vw - 24px)); }
.tuto-head { display: flex; align-items: center; gap: 10px; justify-content: center; }
.tuto-head .nav-game-icon { width: 28px; height: 28px; }
.tuto-steps { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 12px 0 6px; padding: 0; }
.tuto-steps li { display: grid; place-items: center; width: 26px; height: 26px; background: #000; box-shadow: 0 0 0 2px var(--border); font: 0.72rem var(--font-display); color: var(--muted); }
.tuto-steps li.active { box-shadow: 0 0 0 2px var(--yellow); color: var(--yellow); }
.tuto-steps li.done { background: var(--green); color: #000; box-shadow: 0 0 0 2px #1d7a4c; }
.tuto-title { text-align: center; color: var(--cyan); margin: 6px 0 4px; }
.tuto-intro { text-align: center; color: var(--text-2); margin: 0 auto 12px; max-width: 520px; }
.tuto-board { display: grid; place-items: center; max-height: 60vh; overflow: auto; }
.tuto-board > * { max-width: 100%; }
.tuto-feedback { min-height: 1.4em; margin: 10px 0 0; text-align: center; }
.tuto-feedback.warn { color: var(--yellow); }
.tuto-feedback.good { color: var(--green); }
.tuto-callout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }