:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #17203a; font-family: Arial, Helvetica, sans-serif; }
body { display: grid; place-items: center; overflow: hidden; }
#app { position: relative; width: min(100vw, 480px); height: min(100vh, 854px); overflow: hidden; background: #eef7ff; box-shadow: 0 0 60px #0008; touch-action: manipulation; }
#app:fullscreen, #app:-webkit-full-screen { width: 100vw; height: 100vh; display: grid; place-items: center; background: #10182e; box-shadow: none; }
#app:fullscreen #game, #app:-webkit-full-screen #game { width: min(100vw, 56.206vh); height: min(100vh, 177.917vw); }
#game { display: block; width: 100%; height: 100%; }
.overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 28px; background: #17203ae8; transition: opacity .18s; }
.overlay.hidden { opacity: 0; pointer-events: none; }
.reward-layer { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 28px; background: #0c1635c9; transition: opacity .18s; }
.reward-layer.hidden { opacity: 0; pointer-events: none; }
.card { width: min(356px, 100%); padding: 32px 28px 28px; text-align: center; color: #17203a; background: #fff; border-radius: 28px; box-shadow: 0 22px 55px #08112a88; }
.card.compact { padding: 30px 28px; }
.eyebrow { margin: 0 0 8px; color: #68738d; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.card h1 { margin: 0; color: #263a89; font-size: 39px; line-height: 1; letter-spacing: -.04em; }
.card h2 { margin: 0 0 10px; font-size: 28px; }
.card p:not(.eyebrow) { margin: 14px auto 22px; color: #58647d; font-size: 15px; line-height: 1.48; }
.card small { display: block; margin-top: 15px; color: #75819a; font-size: 12px; }
button { font: inherit; }
#play, #continue, #reward-watch { width: 100%; padding: 15px 20px; border: 0; border-radius: 14px; background: #ffbd26; box-shadow: inset 0 -4px #dc9510, 0 7px 15px #e8ac264d; color: #17203a; font-size: 17px; font-weight: 900; cursor: pointer; }
#play:hover, #continue:hover, #reward-watch:hover { filter: brightness(1.06); }
.reward-card { border: 2px solid #ffbd26; }
.secondary-action { width: 100%; margin-top: 12px; padding: 8px; border: 0; background: transparent; color: #58647d; font-weight: 800; cursor: pointer; }
#sound, #fullscreen { position: absolute; z-index: 5; bottom: 16px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #ffffffdf; box-shadow: 0 3px 12px #263b6533; color: #263a89; font-size: 21px; cursor: pointer; }
#sound { left: 16px; }
#fullscreen { right: 16px; font-size: 24px; line-height: 1; }
.logo-mark { position: relative; width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; background: #526cd3; box-shadow: inset 0 0 0 8px #344baf; }
.logo-mark::before, .logo-mark::after { position: absolute; content: ''; border-radius: 50%; background: #fff; }
.logo-mark::before { width: 16px; height: 16px; left: 30px; top: 30px; }
.logo-mark::after { width: 8px; height: 8px; left: 19px; top: 18px; box-shadow: 30px 0 #ffbd26, 15px 38px #ff6e7c; }
.logo-mark i { display: none; }
#app:not(:fullscreen) { width: min(100vw, 56.206vh, 480px); height: auto; aspect-ratio: 480 / 854; }