:root { color-scheme: dark; font-family: Nunito, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #102b3d; }
body { user-select: none; -webkit-user-select: none; }
#gra { position: relative; width: 100%; height: 100%; height: 100dvh; overflow: hidden; touch-action: pan-y; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.warstwa { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, #09273b22, #09273baa); text-align: center; }
.ukryta { display: none !important; }
.karta { width: min(92vw, 440px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: clamp(24px, 6vw, 44px); border: 1px solid #ffffff55; border-radius: 28px; background: #10394ddd; box-shadow: 0 24px 80px #061a2c66; backdrop-filter: blur(12px); }
.nadtytul { margin: 0 0 8px; color: #ffe879; font-size: 13px; font-weight: 1000; letter-spacing: .18em; }
h1, h2 { margin: 0 0 12px; color: #fff7ca; font-size: clamp(38px, 10vw, 64px); line-height: 1; font-weight: 1000; text-shadow: 0 4px 0 #246242; }
.tytul-gry { font-size: clamp(24px, 6.5vw, 40px); line-height: 1.08; letter-spacing: .025em; text-wrap: balance; }
h2 { font-size: clamp(34px, 8vw, 52px); }
.karta p:not(.nadtytul) { color: #e4f3ee; font-size: 17px; }
#licznik-odwiedzin { color: #ffe879; font-weight: 900; }
.wersja-gry { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); color: #e4f3ee; font-size: 10px; opacity: .45; pointer-events: none; }
.menu-opcje { display: grid; gap: 10px; }
.menu-opcje .przycisk { width: 100%; margin-top: 0; }
.przycisk-poziomu { line-height: 1.2; }
.przycisk-poziomu small { display: block; margin-top: 5px; font-size: 13px; font-weight: 800; }
.przycisk-poziomu[aria-pressed="true"] { background: #ffe45e; box-shadow: 0 0 0 3px #ffffff88, 0 6px 0 #c9952f; }
.przycisk-poziomu[aria-pressed="false"] { background: #e4f3ee; box-shadow: 0 6px 0 #819d94; }
.karta { touch-action: pan-y; }
#instrukcja .karta p { line-height: 1.5; }
#lista-wynikow { max-height: min(42dvh, 380px); overflow-y: auto; touch-action: pan-y; margin: 8px 0 18px; padding: 0 8px 0 38px; text-align: left; }
#lista-wynikow li { padding: 7px 4px; border-bottom: 1px solid #ffffff2b; color: #fff7ca; font-weight: 800; }
#lista-wynikow li span { float: right; color: #e4f3ee; }
#formularz-rekordu label { display: block; margin: 16px 0 8px; color: #fff7ca; font-weight: 900; }
#imie-rekordu { width: 100%; padding: 12px; border: 2px solid #ffe45e; border-radius: 12px; background: #f4fffa; color: #173e31; font: 900 22px Nunito, system-ui, sans-serif; text-align: center; text-transform: uppercase; }
#blad-rekordu { min-height: 1.4em; }
#instalacja { z-index: 20; background: #06152380; }
.ikona-instalacji + h2 { font-size: clamp(28px, 7vw, 40px); }
.ikona-instalacji { width: 96px; height: 96px; border-radius: 22px; }
.przycisk-drugorzedny { background: #e4f3ee; box-shadow: 0 6px 0 #819d94; font-size: 15px; }
.instrukcje { display: grid; gap: 10px; margin-top: 20px; text-align: left; }
.instrukcje section { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: #ffffff12; }
.instrukcje strong { color: #ffe879; font-size: 12px; letter-spacing: .08em; }
.instrukcje span { color: #e4f3ee; font-size: clamp(11px, 3vw, 13px); font-weight: 800; line-height: 1.55; }
.przycisk, #skok { border: 0; border-radius: 999px; color: #173e31; background: #ffe45e; box-shadow: 0 6px 0 #c9952f, 0 12px 28px #041c2799; font: 1000 20px Nunito, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.przycisk { min-width: 190px; padding: 14px 26px; margin-top: 12px; }
.przycisk:active, #skok:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9952f; }
#hud { position: absolute; inset: max(16px, env(safe-area-inset-top)) 18px auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; color: #fff; font-size: clamp(18px, 5vw, 26px); font-weight: 1000; text-shadow: 0 2px 5px #123; pointer-events: none; }
#serca-hud { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 80px; }
#serca-hud img { width: clamp(22px, 5vw, 32px); height: clamp(22px, 5vw, 32px); object-fit: contain; filter: drop-shadow(0 2px 3px #1238); }
.lecace-serce { position: absolute; z-index: 11; transform: translate(-50%, -50%); object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 5px #1238); }
.lecacy-zegarek { position: absolute; z-index: 11; transform: translate(-50%, -50%); object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 5px #1238); }
.blysk-utraconego-serca, .blysk-zegarka { position: absolute; z-index: 10; inset: 0; pointer-events: none; animation: blysk-serca .42s ease-out both; }
.blysk-utraconego-serca { background: radial-gradient(circle at var(--x) var(--y), #ff304866, #ed233333 38%, #ec233313 70%, transparent); }
.blysk-zegarka { background: radial-gradient(circle at var(--x) var(--y), #45baff88, #1b7ee64d 38%, #2175da1a 70%, transparent); }
@keyframes blysk-serca { 0% { opacity: 0; } 24% { opacity: 1; } 100% { opacity: 0; } }
#tempo { text-align: right; }
#skok { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 112px; height: 66px; font-size: 18px; }
@media (min-width: 800px) and (orientation: portrait) { .karta { padding: 48px 40px; } }