.intruso-page { background: #101722; color: #e5edf0; }
.intruso-shell { padding-top: 42px; }
.intruso-intro { padding: 0 0 32px; }
.intruso-intro h1 { font-size: clamp(52px, 10vw, 112px); line-height: 1; letter-spacing: -.065em; margin: 14px 0; color: #ddffb0; }
.intruso-intro p { color: #adbec9; font-size: 18px; }
.intruso-arena { color: #e5edf0; background: radial-gradient(ellipse at 50% 40%, #203634, #101722 70%) !important; }
#intruso-game.game-layout { padding-bottom: max(4px, env(safe-area-inset-bottom)) !important; }
.intruso-stage { display: grid; place-items: center; container-type: size; }
.intruso-board { width: min(100cqw, 100cqh, 620px); height: min(100cqw, 100cqh, 620px); display: grid; grid-template-columns: repeat(var(--size, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--size, 4), minmax(0, 1fr)); gap: clamp(2px, 1cqw, 7px); padding: 3px; box-sizing: border-box; }
.intruso-tile { position: relative; appearance: none; display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 3%; border: 1px solid #45635d; border-radius: clamp(4px, 1cqw, 12px); background: #192c2b; color: #c8f7db; cursor: pointer; touch-action: manipulation; }
.intruso-tile svg { display: block; width: 94%; height: 94%; pointer-events: none; }
.intruso-tile:focus-visible { outline: 3px solid #ffd384; outline-offset: -3px; background: #33433a; z-index: 1; }
@media (hover: hover) { .intruso-tile:not(:disabled):hover { background: #29453d; border-color: #b8e6b8; } }
.intruso-tile:disabled { cursor: default; opacity: 1; }
.intruso-tile[data-wrong] { color: #ef9d91; background: #452e30; border-style: dashed; }
.intruso-tile[data-wrong]::after { content: '×'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: #fff; background: #452e30dd; border-radius: inherit; }
.intruso-arena[data-phase="ready"] .intruso-board { opacity: .55; }
.intruso-hud strong { color: #d9ffae; }
#intruso-game #game-status { text-align: center; margin: 0; min-height: 20px; font-size: 12px; color: #e0c493; }
#intruso-game .intruso-save { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px 12px; flex-wrap: wrap; order: 4; font-size: 12px; }
#intruso-game .intruso-save[hidden] { display: none; }
#intruso-game #save-status { display: block !important; margin: 0; font-size: 12px; }
#intruso-game #save-form { margin: 0; }
#intruso-game #save { min-height: 30px; padding: 5px 10px; font-size: 11px; }
.intruso-save a { color: #ddffb0; }
.intruso-rankings { padding: 42px 0 60px; }
.intruso-rankings h2 { font-size: clamp(30px, 5vw, 54px); margin: 10px 0 24px; letter-spacing: -.04em; }
.intruso-rankings ol { list-style: none; padding: 0; }
.intruso-rankings li { display: flex; align-items: center; gap: 12px; border-top: 1px solid #34434b; padding: 14px 8px; }
.intruso-rankings li > span:not(.ranking-avatar):not(.ranking-badge) { overflow-wrap: anywhere; }
.intruso-rankings li strong { margin-left: auto; white-space: nowrap; color: #ddffb0; }
@media (max-height: 400px) and (orientation: landscape) { #intruso-game #game-status { min-height: 16px; line-height: 16px; font-size: 10px; } .intruso-board { gap: 2px; } }
@media (prefers-reduced-motion: no-preference) { .intruso-tile { transition: background-color .12s, border-color .12s; } }