/* landing/rules-board.css — «Потрогай правила». Классы .rb-*; цвета — из /shared/theme.css с запасными значениями. */
.rb { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 16px; align-items: start; margin: 12px 0 20px; }
.rb-tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.rb-board { display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; max-width: 360px; aspect-ratio: 1; border: 2px solid var(--border-color, #888); border-radius: 6px; overflow: hidden; }
.rb-sq { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; font-size: clamp(16px, 4.6vw, 30px); line-height: 1; }
.rb-light { background: #ecd9b0; }
.rb-dark { background: #a97b50; }
.rb-hit { box-shadow: inset 0 0 0 3px var(--accent-gold, #ffd23f); }
.rb-hill::after { content: ""; position: absolute; inset: 0; background: rgba(46, 204, 113, 0.28); pointer-events: none; }
.rb-w { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 1px #000; }
.rb-b { color: #151515; text-shadow: 0 0 1px #fff; }
.rb-duck { font-size: 0.9em; }
.rb-info { display: flex; flex-direction: column; gap: 10px; }
.rb-caption { margin: 0; }
.rb-side { margin: 0; font-size: 14px; opacity: 0.85; min-height: 1.2em; }
.rb-note { margin: 0; padding: 8px 10px; border-left: 3px solid var(--accent-info, #3ba7ff); background: rgba(127, 127, 127, 0.12); min-height: 1.4em; }
.rb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-btn { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-color, #888); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.rb-btn:hover { border-color: var(--accent-active-line, #5fe07c); }
.rb-btn:focus-visible { outline: 2px solid var(--accent-info, #3ba7ff); outline-offset: 2px; }
.rb-btn[aria-pressed="true"] { border-color: var(--accent-active-line, #5fe07c); font-weight: 700; }
.rb-btn-primary { background: var(--accent-active, #39ff7a); color: var(--on-active, #04210f); border-color: var(--accent-active-line, #5fe07c); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .rb-hit .rb-piece { animation: rb-pop 0.25s ease-out; } }
@keyframes rb-pop { from { transform: scale(0.6); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 640px) { .rb { grid-template-columns: 1fr; } .rb-board { margin: 0 auto; } }