/* Отдельный слой игры; токены взяты из существующего оформления сайта. */
.rt-play { max-width: 42rem; }
.rt-play [hidden] { display: none !important; }
.rt-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: min(100%, 350px); border: 2px solid var(--frame, #111); background: var(--frame, #111); gap: 1px; }
.rt-cell { position: relative; aspect-ratio: 1; min-width: 0; background: var(--surface, white); }
.rt-block { background: var(--fg-2, #3d3a35); }
.rt-cell input { appearance: none; box-sizing: border-box; display: block; margin: 0; border: 0; border-radius: 0; padding: 9px 0 0; width: 100%; height: 100%; min-width: 0; background: transparent; color: var(--fg, #111); text-align: center; font: 700 clamp(19px, 5.5vw, 27px)/1 var(--f-cell, monospace); text-transform: uppercase; }
.rt-cell input:focus { outline: 3px solid var(--focus, #1f4fbf); outline-offset: -3px; }
.rt-number { position: absolute; left: 3px; top: 0; font: 700 10px/1.2 var(--f-text, sans-serif); pointer-events: none; }
.rt-cell.rt-word { background: var(--note-bg, #fbf3d5); }
.rt-cell.rt-error { box-shadow: inset 0 -4px var(--mark, #c8102e); }
.rt-cell.rt-error::after { content: '!'; position: absolute; right: 2px; top: 0; color: var(--mark, #c8102e); font: 700 12px/1 sans-serif; pointer-events: none; }
.rt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rt-play button, .raetsel-clues button { font: inherit; white-space: normal; overflow-wrap: anywhere; max-width: 100%; min-height: 44px; cursor: pointer; }
.rt-play button { padding: 8px 12px; }
.raetsel-clues button { color: inherit; text-align: left; background: transparent; border: 1px solid transparent; padding: 6px; width: 100%; }
.raetsel-clues button[aria-pressed="true"] { border-color: var(--frame, #111); background: var(--note-bg, #fbf3d5); }
.rt-status { min-height: 1.6em; font-weight: 700; }
.rt-storage { font-size: .875em; color: var(--fg-3, #5a564e); }
.rt-solution { margin: 16px 0; }
.rt-solution summary { cursor: pointer; min-height: 44px; padding: 8px 0; }
.rt-play p, .raetsel-clues, .raetsel p { overflow-wrap: anywhere; }
@media (max-width: 360px) { .rt-actions > button { flex: 1 1 120px; } }