.rules__block { position: relative; display: flex; justify-content: space-between; text-align: left; background-color: #282831; border-radius: 0.3em; box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3); transition: background 0.3s ease, box-shadow 0.3s ease; } .rules__block:hover { background: #2b2b35; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .rules__block li { margin-top: 8px; } .rules__container {
} .rules__title { font-size: 1.3em; } .rules__content {
} .rules__title--addition { font-size: 1em; display: flex; align-items: center; } .rules__container--addition { position: absolute; display: flex; flex-direction: column; max-height: 90%; top: 0; right: 0; width: min(35%, 300px); padding: 12px; border-radius: 0.3em; background: #34343f; border-left: 4px solid #434353; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); transition: background 0.3s ease; } .rules__content--addition { flex-grow: 1; overflow-y: auto; margin-top: 10px; } .mw-collapsible-toggle { position: absolute; top: 12px; right: 12px; } /* Адаптивные стили для мобильных устройств */ @media (max-width: 700px) { .rules__block { flex-direction: column; margin: 20px 0; } .rules__container--addition { position: static; display: block; box-sizing: border-box; width: 100%; border-left: none; box-shadow: none; margin-top: 20px; } .rules__container--addition:hover { background: #33333b; } .rules__block:hover { background: #27272e; box-shadow: 0 4px 2px rgba(0, 0, 0, 0.15); } .mw-collapsible-toggle { position: static; top: 12px; right: 12px; } }