.solar-game { position:relative; isolation:isolate; overflow:hidden; color:#103d42; background:#72d6d6; padding:100px 24px 0; scroll-margin-top:75px; letter-spacing:0; }
.solar-game * { box-sizing:border-box; letter-spacing:0; }
.solar-game [hidden] { display:none !important; }
.solar-game__world { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 66%; z-index:-2; }
.solar-game__top { display:flex; justify-content:space-between; align-items:center; max-width:1100px; margin:0 auto 16px; gap:16px; }
.solar-game__brand { font-weight:800; font-size:14px; color:#103d42; text-decoration:none; }
.solar-game__brand span { display:block; font-size:10px; font-weight:600; }
.solar-sound { display:flex; gap:8px; align-items:center; font-size:14px; font-weight:600; cursor:pointer; }
.solar-sound input { accent-color:#14674c; width:18px; height:18px; }
.solar-hud { display:grid; grid-template-columns:1fr 1fr 1fr; max-width:590px; margin:auto; background:#f5ffffe8; border:2px solid #fff; border-radius:8px; padding:12px; text-align:center; box-shadow:0 4px 0 #13556333; }
.solar-hud>div+div { border-left:1px solid #c3dcd7; }
.solar-hud span { display:block; font-size:10px; font-weight:700; }
.solar-hud strong { display:block; font:800 28px/1.15 Inter,sans-serif; font-variant-numeric:tabular-nums; }
.solar-hud strong span { display:inline; font-size:15px; margin-left:3px; }
.solar-clock { max-width:590px; margin:10px auto 0; height:5px; background:#ffffff70; overflow:hidden; border-radius:3px; }
.solar-clock span { display:block; height:100%; background:#ffca3a; width:100%; transform-origin:left; }
.solar-arena { position:relative; min-height:440px; max-width:1100px; margin:auto; }
.solar-intro { padding:35px 16px 0; text-align:center; }
.solar-eyebrow { font-size:11px; font-weight:800; }
.solar-intro h1 { font:900 72px/.98 Sora,Inter,sans-serif; margin:10px 0 16px; color:#103d42; text-shadow:0 2px #ffffff80; }
.solar-intro h1 em { color:#fff7c6; font-style:normal; text-shadow:0 4px 0 #946e18; }
.solar-intro p { font-weight:600; font-size:16px; line-height:1.55; margin:0 auto 18px; color:#103d42; }
.solar-rules { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin:0 0 24px; font-size:12px; font-weight:700; }
.solar-rules>span { display:flex; align-items:center; gap:5px; }
.solar-mini { display:inline-grid; place-content:center; width:24px; height:24px; border-radius:50%; color:#123e42; font-size:15px; }
.solar-mini--sun { background:#ffcf36; }
.solar-mini--battery { background:#68e5a7; border-radius:4px; font-size:12px; }
.solar-mini--storm { background:#735488; color:white; }
.solar-button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; gap:8px; padding:12px 24px; border:2px solid #103d42; border-radius:6px; background:#ffcf36; color:#103d42; font:800 15px/1.2 Inter,sans-serif; box-shadow:0 4px 0 #103d42; cursor:pointer; text-decoration:none; transition:transform .12s,box-shadow .12s; }
.solar-button:hover { transform:translateY(-2px); color:#103d42; }
.solar-button:active { transform:translateY(3px); box-shadow:0 1px 0 #103d42; }
.solar-button--start { min-width:220px; font-size:19px; min-height:58px; }
.solar-button--light { background:#fff; box-shadow:none; padding:10px 14px; font-size:12px; border-color:#d6e3df; }
.solar-intro small { display:block; margin:16px 0 0; font-size:12px; font-weight:700; }
.solar-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,1fr); height:400px; max-width:740px; margin:auto; padding:10px 0; }
.solar-target { position:relative; display:grid; place-items:center; width:100%; min-width:0; background:none; border:0; padding:4px; cursor:crosshair; touch-action:manipulation; user-select:none; -webkit-tap-highlight-color:transparent; }
.solar-target svg { width:86px; height:86px; max-width:100%; filter:drop-shadow(0 6px 2px #133a4b35); pointer-events:none; animation:solar-pop .16s ease-out; }
.solar-target:focus-visible { outline:3px solid #103d42; outline-offset:-4px; border-radius:8px; background:#ffffff30; }
.solar-target .solar-gain { font:900 28px Inter,sans-serif; color:#fff; text-shadow:0 2px 0 #103d42; pointer-events:none; animation:solar-gain .45s ease-out both; }
.solar-target .solar-gain--bad { color:#ffd0d7; }
.solar-live { position:absolute; bottom:12px; left:0; right:0; text-align:center; font-weight:800; color:#fff; text-shadow:0 2px 3px #063c36; pointer-events:none; }
.solar-game__bottom { display:flex; gap:16px; justify-content:space-between; align-items:center; padding:15px 20px; margin:0 -24px; background:#103d42; color:#e2f6ef; font-size:12px; font-weight:600; min-height:55px; }
.solar-game__bottom button { color:#fff; border:1px solid #70a39d; border-radius:4px; background:transparent; padding:8px 20px; cursor:pointer; }
.solar-overlay { position:absolute; inset:0 -24px; display:grid; place-items:center; background:#103d4280; padding:10px; z-index:5; }
.solar-result { width:min(540px,100%); background:#fbfefc; border-radius:8px; padding:22px 28px; box-shadow:0 12px 40px #103d4240; text-align:center; }
.solar-result h2 { font:800 26px/1.2 Sora,sans-serif; margin:5px 0; color:#103d42; }
.solar-final { display:block; font:900 55px/1.1 Inter,sans-serif; color:#187a55; }
.solar-final small { font-size:14px; margin-left:8px; }
.solar-result p { font-size:13px; margin:10px 0 16px; }
.solar-result__actions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.solar-result #solar-share-status { font-size:11px; margin:12px 0; color:#45625d; }
.solar-result label { display:block; font-size:12px; text-align:left; }
.solar-result input { width:100%; font-size:12px; padding:7px; }
.solar-study { display:block; border-top:1px solid #d6e3df; padding-top:12px; font-size:12px; font-weight:600; color:#176d53; }
.solar-conversion { background:#eef7f1; border-bottom:1px solid #d2e4d7; padding:24px 0; }
.solar-conversion .container { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.solar-conversion p { margin:0; }
.solar-conversion strong { display:block; font-size:18px; color:#123e42; }
.solar-conversion span { display:block; font-size:13px; margin-top:4px; }
.solar-conversion .btn { flex-shrink:0; }
.solar-noscript { padding:16px; background:white; text-align:center; }
.solar-game button:focus-visible,.solar-game a:focus-visible { outline:3px solid #b83d66; outline-offset:4px; }
@keyframes solar-pop { from { transform:scale(.5); opacity:.3; } to { transform:scale(1); opacity:1; } }
@keyframes solar-gain { to { transform:translateY(-28px); opacity:0; } }
body:has(.solar-game) .header:not(.scrolled) { background:#f7fffbf2; }
body:has(.solar-game) .header:not(.scrolled).header--overhero .nav a { color:#103d42; }
body:has(.solar-game) .header:not(.scrolled).header--overhero .nav .btn { color:#fff; }
body:has(.solar-game) .header:not(.scrolled).header--overhero .burger span { background:#103d42; }
body:has(.solar-game) .floaters { display:none; }
@media(min-width:1000px) {
 .solar-game:has(#solar-intro:not([hidden])) .solar-arena { min-height:390px; }
 .solar-intro { max-width:510px; text-align:left; padding-top:34px; }
 .solar-intro h1 { font-size:62px; }
 .solar-intro p { max-width:360px; margin-left:0; text-shadow:0 1px 3px #fff; }
 .solar-rules { justify-content:flex-start; gap:14px; }
 .solar-game__world { width:120%; max-width:none; object-position:50% 80%; }
 .solar-intro small { text-shadow:0 1px 3px #fff; }
}
@media(max-width:999px) {
 .solar-game { padding:88px 16px 0; }
 .solar-game__top { margin-bottom:12px; }
 .solar-hud { padding:10px 6px; }
 .solar-hud span { font-size:9px; }
 .solar-hud strong { font-size:24px; }
 .solar-arena { min-height:470px; }
 .solar-intro { padding:30px 0 0; }
 .solar-intro h1 { font-size:44px; }
 .solar-intro p { font-size:14px; }
 .solar-eyebrow { font-size:10px; }
 .solar-rules { gap:8px 10px; font-size:10px; }
 .solar-board { height:380px; padding-top:16px; }
 .solar-target svg { width:68px; height:68px; }
 .solar-game__world { height:130%; object-position:50% 0%; }
 .solar-game__bottom { margin:0 -16px; padding:12px 16px; gap:8px; font-size:11px; flex-wrap:wrap; }
 .solar-game__bottom>span:last-child { font-size:10px; opacity:.75; }
 .solar-overlay { inset:0 -10px; }
 .solar-result { padding:20px 14px; }
 .solar-result h2 { font-size:22px; }
 .solar-final { font-size:46px; }
 .solar-result__actions { gap:5px; }
 .solar-button--light { padding:10px; font-size:11px; }
 .solar-conversion .container { align-items:flex-start; flex-direction:column; gap:14px; }
 .solar-conversion strong { font-size:16px; }
 #rappel .quickform { padding:24px 18px !important; }
}
@media(prefers-reduced-motion:reduce) { .solar-game *, .solar-game *::before { animation:none !important; transition:none !important; } }