/* ---------- Snake 23 ---------- */
.sn-root { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; background: var(--face); box-sizing: border-box; overflow: hidden; }
.sn-eat { width: 100%; box-sizing: border-box; padding: 3px 8px; font: bold 15px var(--mono, monospace); background: #0b2a0b; color: #aaffaa; box-shadow: var(--bevel-in); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-eat b { color: #ffff55; }
.sn-hint { font-weight: normal; font-size: 11px; opacity: .8; }
.sn-canvas { width: min(100%, 336px); aspect-ratio: 1; height: auto; image-rendering: pixelated; box-shadow: var(--bevel-in); outline: none; touch-action: none; background: #0b2a0b; }
.sn-verse { width: 100%; box-sizing: border-box; padding: 3px 8px; font: 13px var(--mono, monospace); background: #0b2a0b; color: #aaffaa; box-shadow: var(--bevel-in); white-space: nowrap; overflow: hidden; }
.sn-bar { display: flex; gap: 6px; align-items: center; width: 100%; }
.sn-score { margin-left: auto; font: bold 12px var(--mono, monospace); }
.sn-pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 56px); gap: 6px; width: 100%; max-width: 280px; margin-top: 4px; }
.sn-pad .btn { font-size: 24px; padding: 0; touch-action: manipulation; }
.sn-pad-up { grid-column: 2; grid-row: 1; }
.sn-pad-left { grid-column: 1; grid-row: 2; }
.sn-pad-down { grid-column: 2; grid-row: 2; }
.sn-pad-right { grid-column: 3; grid-row: 2; }

/* ===== Verse Minesweeper (ms-) ===== */
.ms-body { background: var(--face); padding: 6px; overflow: auto; }
.ms-root { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: min-content; }
.ms-toggle.ms-flagmode { background: #ffe9a8; font-weight: bold; }
.ms-frame { background: #c0c0c0; padding: 6px; border: 3px solid; border-color: #fff #808080 #808080 #fff; max-width: 100%; }
.ms-panel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 5px; margin-bottom: 6px; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.ms-led { display: flex; gap: 1px; background: #000; padding: 2px; border: 1px solid; border-color: #808080 #fff #fff #808080; height: 34px; box-sizing: border-box; }
.ms-dig { width: 17px; height: 100%; }
.ms-dig polygon.ms-on { fill: #ff1a1a; }
.ms-dig polygon.ms-off { fill: #3a0000; }
.ms-smiley { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; cursor: pointer; }
.ms-smiley:active, .ms-smiley.ms-pressed { border-color: #808080; padding: 1px 0 0 1px; }
.ms-gwrap { overflow: auto; max-width: 100%; border: 3px solid; border-color: #808080 #fff #fff #808080; touch-action: pan-x pan-y; }
.ms-grid { display: grid; width: max-content; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ms-cell { box-sizing: border-box; background: #c0c0c0; border: 3px solid; border-color: #fff #808080 #808080 #fff; display: flex; align-items: center; justify-content: center; font-family: "Press Start 2P", "VT323", monospace; font-weight: bold; line-height: 1; cursor: default; overflow: hidden; color: #000; }
.ms-cell svg { width: 85%; height: 85%; pointer-events: none; }
.ms-cell.ms-open { border: 1px solid #808080; border-width: 1px 0 0 1px; }
.ms-cell.ms-boom { background: #f00; }
.ms-cell.ms-q { font-size: 1.1em; }
.ms-cell[data-n="1"] { color: #0000ff; } .ms-cell[data-n="2"] { color: #008000; } .ms-cell[data-n="3"] { color: #ff0000; }
.ms-cell[data-n="4"] { color: #000080; } .ms-cell[data-n="5"] { color: #800000; } .ms-cell[data-n="6"] { color: #008080; }
.ms-cell[data-n="7"] { color: #000; } .ms-cell[data-n="8"] { color: #808080; }
.ms-verse { width: 100%; box-sizing: border-box; min-height: 56px; padding: 6px 8px; font-family: "VT323", monospace; font-size: 20px; line-height: 1.15; background: #fffff0; color: #000; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.ms-vx { color: #b9b9a0; letter-spacing: 1px; word-break: break-all; }
.ms-vref { text-align: right; font-weight: bold; margin-top: 2px; }
.ms-best { width: 100%; border-collapse: collapse; }
.ms-best td { padding: 2px 8px; }
.ms-toggle[hidden] { display: none; }
.ms-toggle { min-height: 32px; min-width: 150px; }