:root { --cell-width: clamp(58px, 17vw, 120px); --cell-height: calc(var(--cell-width) * .9167); }
body { padding: 16px max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)); gap: 18px; overflow-x: hidden; }
.logo-container { position: static; display: flex; align-items: center; justify-content: center; gap: 12px; }
.logo { width: 68px; height: 68px; }
.game-title { margin: 0; font-size: clamp(18px, 4.2vw, 26px); }
.game-intro { max-width: 740px; text-align: center; color: #f2e6c9; line-height: 1.9; font-size: 14px; }
.timer-display { margin: 0; padding: 6px 24px; font-size: 1.8em; }
.main-container { padding: calc(var(--cell-height) * .5 + 6px) 0 8px; margin: 0; gap: 0; }
.container { gap: 4px; }
.container:nth-child(n+2) { margin-right: calc(var(--cell-width) * -.18); }
.container:nth-child(2), .container:nth-child(4) { margin-top: calc(var(--cell-height) * -.5); }
.hexagon { width: var(--cell-width); height: var(--cell-height); margin: 0; font-size: clamp(22px, 5vw, 32px); touch-action: manipulation; }
.controls-container { position: static; width: min(100%, 1080px); border-radius: 16px; border-bottom: 1px solid rgba(255,255,255,.2); padding: 12px; gap: 12px; }
.button-group, .timer-controls, .timer-inputs, .mode-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.timer-controls { margin: 0; align-items: center; }
.controls-separator { display: none; }
button, input { touch-action: manipulation; }
.controls-container button { min-height: 44px; margin: 0; font-size: 16px; padding: 10px 14px; }
.timer-input { width: 60px; min-height: 44px; font-size: 18px; }
.timer-mode { margin: 0; min-height: 44px; }
.timer-mode input { width: 24px; height: 24px; }
.how-to-play { width: min(100%, 900px); color: #ecf0f1; background: #203246; border: 1px solid #607080; border-radius: 12px; padding: 14px 18px; line-height: 1.9; }
.how-to-play summary { cursor: pointer; font-weight: bold; color: #ffd700; }
.how-to-play p { margin-top: 10px; }
.social-link { color: #ffd700; text-underline-offset: 5px; padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: none) { .hexagon:hover { transform: none; } }
@media (max-width: 480px) { body { gap: 14px; } .controls-container { gap: 10px; } .timer-controls { flex-basis: 100%; } .background-decoration { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .hexagon.selected { outline: 3px solid white; filter: brightness(.75); } }
.social-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; color: #f2e6c9; } .social-links .social-link { border: 1px solid #bca04c; border-radius: 12px; background: #203246; text-decoration: none; } .social-link:hover { background: #30475c; }