/* Nunito (SIL OFL, src/fonts/OFL-Nunito.txt), served from satido.lt itself. Variable font, weights 200-1000.
   Chosen because it has every Lithuanian letter (Fredoka lacked ą č ę ė į ų ū). */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/fonts/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/fonts/nunito-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --sky-1: #EDF2FB;
  --sky-2: #D7E3FC;
  --sky-4: #C1D3FE;
  --ink: #1F2A52;
  --white: #FFFFFF;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top, var(--sky-4)) 0%, var(--sky-mid, var(--sky-2)) 38%, var(--sky-low, var(--sky-1)) 64%);
  background-attachment: fixed;
}

/* ---------- Seasons: palettes (body.season-*) ---------- */
.season-spring {
  --sky-top: #A9CBF2; --sky-mid: #CFE2F8; --sky-low: #F6EEF3;
  --sun-core: #FFFBE6; --sun-ring: #FFEFB0; --sun-glow: rgba(255, 244, 196, .55); --cloud: #FFFFFF;
  --spruce: #6CA86A; --spruce-d: #5A955A;
  --leaf-1: #A6D57E; --leaf-1d: #8CC468; --leaf-2: #F7C6D7; --leaf-2d: #EAA8C1; --leaf-3: #FCEBF1; --leaf-3d: #EDCCD8;
  --grass-1: #78BF60; --grass-2: #66B050; --haze: #FFFFFF;
}
.season-summer {
  --sky-top: #84B5EE; --sky-mid: #B9D6F6; --sky-low: #EEF5FB;
  --sun-core: #FFFDF0; --sun-ring: #FFE68A; --sun-glow: rgba(255, 236, 160, .6); --cloud: #FFFFFF;
  --spruce: #4E8E57; --spruce-d: #3F7C49;
  --leaf-1: #6DB15A; --leaf-1d: #5A9E4B; --leaf-2: #86C062; --leaf-2d: #6FAA50; --leaf-3: #5A9F57; --leaf-3d: #4A8B48;
  --grass-1: #5AA548; --grass-2: #4B983C; --haze: #FFFFFF;
}
.season-autumn {
  --sky-top: #A3B9DA; --sky-mid: #D8D5DC; --sky-low: #F7DDBF;
  --sun-core: #FFF3D6; --sun-ring: #FFC77A; --sun-glow: rgba(255, 190, 110, .5); --cloud: #FFF7EE;
  --spruce: #557D5A; --spruce-d: #476D4D;
  --leaf-1: #E68C3B; --leaf-1d: #CD7331; --leaf-2: #D4573C; --leaf-2d: #B9462F; --leaf-3: #EDBA43; --leaf-3d: #D7A034;
  --grass-1: #B38D40; --grass-2: #A07B33; --haze: #FFF1DE;
}
.season-winter {
  --sky-top: #B6C6DA; --sky-mid: #DAE3EE; --sky-low: #F3F6FA;
  --sun-core: #FFFFFF; --sun-ring: #F4F7FC; --sun-glow: rgba(255, 255, 255, .5); --cloud: #F3F6FA;
  --spruce: #5C817B; --spruce-d: #4C6F6A;
  --grass-1: #C3D4E7; --grass-2: #AFC3DB; --haze: #F6F8FC;
}

.scene { position: fixed; inset: 0; overflow: hidden; }
.land { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Hill gradients (spring is the default in the markup) */
.season-summer .ridge-a { stop-color: #B5D1E4; } .season-summer .ridge-b { stop-color: #C8E1D5; }
.season-summer .far-a { stop-color: #BDE0A9; } .season-summer .far-b { stop-color: #A8D493; }
.season-summer .mid-a { stop-color: #9DD481; } .season-summer .mid-b { stop-color: #85C56B; }
.season-summer .near-a { stop-color: #80C564; } .season-summer .near-b { stop-color: #66B04F; }
.season-autumn .ridge-a { stop-color: #C7C3D8; } .season-autumn .ridge-b { stop-color: #DDCFC4; }
.season-autumn .far-a { stop-color: #EAD9A6; } .season-autumn .far-b { stop-color: #DDC58D; }
.season-autumn .mid-a { stop-color: #E0B972; } .season-autumn .mid-b { stop-color: #D0A35D; }
.season-autumn .near-a { stop-color: #D8B062; } .season-autumn .near-b { stop-color: #C59A4E; }
.season-winter .ridge-a { stop-color: #C3D1E3; } .season-winter .ridge-b { stop-color: #D9E3EF; }
.season-winter .far-a { stop-color: #EAF0F8; } .season-winter .far-b { stop-color: #D7E2EF; }
.season-winter .mid-a { stop-color: #F6F9FD; } .season-winter .mid-b { stop-color: #D3DFEE; }
.season-winter .near-a { stop-color: #FFFFFF; } .season-winter .near-b { stop-color: #E0E9F5; }
.haze { stop-color: var(--haze); }
.rim { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.season-winter .rim { opacity: .9; stroke-width: 4; }

/* Distant trees: leafy, blossoming, golden or bare with snow on the spruces */
.tree .trunk { fill: #7B5B44; }
.tree .hi { fill: #FFFFFF; opacity: .16; }
.tree .twigs { display: none; fill: none; stroke: #8C7867; stroke-width: 2.6; stroke-linecap: round; }
.tree .snow { display: none; fill: #FFFFFF; }
.tree.s .crown { fill: var(--spruce); }
.tree.s .shade { fill: var(--spruce-d); }
.tree.r .crown, .tree.p .crown { fill: var(--leaf-1); }
.tree.r .shade, .tree.p .shade { fill: var(--leaf-1d); }
.tree:nth-child(3n).r .crown, .tree:nth-child(3n).p .crown { fill: var(--leaf-2); }
.tree:nth-child(3n).r .shade, .tree:nth-child(3n).p .shade { fill: var(--leaf-2d); }
.tree:nth-child(4n+1).r .crown { fill: var(--leaf-3); }
.tree:nth-child(4n+1).r .shade { fill: var(--leaf-3d); }
.season-winter .tree .crown, .season-winter .tree .shade, .season-winter .tree .hi { display: none; }
.season-winter .tree.s .crown, .season-winter .tree.s .shade { display: inline; }
.season-winter .tree .twigs, .season-winter .tree .snow { display: inline; }

.grass path { stroke: var(--grass-1, #7DBE6A); stroke-width: 3; stroke-linecap: round; fill: none; transform-box: fill-box; transform-origin: bottom; animation: sway 4s ease-in-out infinite; }
.grass path:nth-child(3n) { animation-delay: -1.3s; stroke: var(--grass-2, #6DB25B); }
.grass path:nth-child(3n+1) { animation-delay: -2.6s; }
.season-winter .grass path { stroke-width: 2.4; opacity: .55; animation-duration: 6s; }
@keyframes sway { 50% { transform: rotate(5deg); } }
.flowers .stem { stroke: var(--grass-2, #6DB25B); stroke-width: 2; stroke-linecap: round; }
.glints path { fill: #FFFFFF; opacity: 0; animation: twinkle 3.2s ease-in-out infinite; }
.glints path:nth-child(3n) { animation-delay: -1.1s; }
.glints path:nth-child(3n+1) { animation-delay: -2.2s; animation-duration: 4.1s; }
@keyframes twinkle { 50% { opacity: 1; } }

/* Sun: a soft disc with a wide glow; high in summer, low and amber in autumn, pale in winter */
.sun { position: absolute; left: 47vw; top: 9vh; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--sun-core, #FFFBE6) 0 55%, var(--sun-ring, #FFEFB0) 100%);
  box-shadow: 0 0 90px 50px var(--sun-glow, rgba(255, 244, 196, .5)); }
.season-summer .sun { top: 6vh; width: 104px; height: 104px; box-shadow: 0 0 120px 70px var(--sun-glow); }
.season-autumn .sun { top: 17vh; left: 52vw; box-shadow: 0 0 140px 80px var(--sun-glow); }
.season-winter .sun { top: 13vh; width: 76px; height: 76px; opacity: .85; box-shadow: 0 0 70px 40px var(--sun-glow); }

/* Clouds made from one element plus two pseudo-element puffs */
.cloud { position: absolute; left: -240px; width: 180px; height: 56px; background: var(--cloud, #FFFFFF); border-radius: 60px; opacity: .9; animation: drift linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: var(--cloud, #FFFFFF); border-radius: 50%; }
.cloud::before { width: 80px; height: 80px; left: 26px; top: -40px; }
.cloud::after { width: 104px; height: 104px; left: 70px; top: -56px; }
.c1 { top: 12vh; animation-duration: 70s; animation-delay: -10s; }
.c2 { top: 26vh; transform: scale(.7); animation-duration: 95s; animation-delay: -50s; }
.c3 { top: 6vh; transform: scale(.55); animation-duration: 120s; animation-delay: -85s; opacity: .7; }
.season-winter .cloud { opacity: .95; }
.season-winter .c2 { transform: scale(.9); }
@keyframes drift { to { left: calc(100vw + 240px); } }

/* Birds crossing the sky in spring and (heading south) in autumn */
.birds { position: absolute; left: 0; top: 19vh; width: 84px; height: 42px; overflow: visible; animation: fly 75s linear -22s infinite; }
.birds path { fill: none; stroke: #4F5B78; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: beat .8s ease-in-out infinite alternate; }
.birds g:nth-child(2n) path { animation-delay: -.4s; }
.birds g:nth-child(3n) path { animation-delay: -.6s; }
@keyframes fly { from { transform: translateX(-120px); } to { transform: translateX(calc(100vw + 120px)); } }
@keyframes beat { to { transform: scaleY(.35); } }
.season-autumn .birds { top: 24vh; animation-duration: 90s; animation-direction: reverse; }

/* Butterflies (spring and summer): two wings flapping, gently wandering */
.butterfly { position: absolute; width: 30px; height: 22px; animation: wander 18s ease-in-out infinite; }
.butterfly::after { content: ""; position: absolute; left: 13px; top: 3px; width: 4px; height: 16px; border-radius: 2px; background: #5C5470; }
.butterfly span { position: absolute; top: 0; width: 15px; height: 20px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 30%, #FFFFFF 0 18%, #FFD6E8 22%, #F7A8C8 100%); animation: flap .35s ease-in-out infinite alternate; }
.butterfly span:first-child { left: 0; transform-origin: right center; }
.butterfly span:last-child { right: 0; transform-origin: left center; animation-direction: alternate-reverse; }
.b1 { left: 60vw; top: 58vh; }
.b2 { left: 78vw; top: 66vh; animation-duration: 23s; animation-delay: -7s; }
.b2 span { background: radial-gradient(circle at 50% 30%, #FFFFFF 0 18%, #C9E4FF 22%, #9CC2F2 100%); }
.season-summer .b1 span { background: radial-gradient(circle at 50% 30%, #FFF6D8 0 16%, #FFB566 22%, #F08A3C 100%); }
.season-summer .b2 span { background: radial-gradient(circle at 50% 30%, #FFFFFF 0 18%, #FFF3B0 22%, #F5D86A 100%); }
@keyframes flap { to { transform: scaleX(.25); } }
@keyframes wander {
  25% { transform: translate(-90px, -60px); }
  50% { transform: translate(40px, -110px); }
  75% { transform: translate(110px, -30px); }
}

/* Weather: petals, pollen, leaves or snow. Each particle falls (translate) while it sways (transform). */
.weather { position: absolute; inset: 0; pointer-events: none; }
.weather i {
  position: absolute; top: -5vh; left: var(--x); width: var(--w); height: var(--w); opacity: var(--o);
  animation: fall var(--d) linear infinite, flutter var(--sd) ease-in-out infinite alternate;
  animation-delay: calc(var(--d) * var(--p) * -1), calc(var(--sd) * var(--p) * -1);
}
@keyframes fall { from { translate: 0 0; } to { translate: var(--dx) 112vh; } }
@keyframes flutter { from { transform: translateX(-18px) rotate(-25deg); } to { transform: translateX(18px) rotate(35deg); } }
.snow i { width: calc(var(--w) * 1.3); height: calc(var(--w) * 1.3); border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 40%, rgba(255, 255, 255, .6) 55%, rgba(255, 255, 255, 0) 72%); animation-name: fall, drift-snow; }
@keyframes drift-snow { from { transform: translateX(-22px); } to { transform: translateX(22px); } }
.leaves i { width: calc(var(--w) + 6px); height: calc(var(--w) * .7 + 3px); border-radius: 0 85% 0 85%; background: linear-gradient(135deg, #F2A54A, #D96A2E); opacity: 1;
  animation-name: fall, tumble; animation-duration: calc(var(--d) * .8), var(--sd); }
.leaves i:nth-child(4n+1) { background: linear-gradient(135deg, #E9673F, #B9402B); }
.leaves i:nth-child(4n+2) { background: linear-gradient(135deg, #F7CF56, #E2A332); }
.leaves i:nth-child(5n) { background: linear-gradient(135deg, #C98A3E, #9C5E2A); }
@keyframes tumble { from { transform: translateX(-40px) rotate(-50deg) rotateX(0deg); } to { transform: translateX(40px) rotate(70deg) rotateX(150deg); } }
.petals i { width: calc(var(--w) * .8 + 3px); height: calc(var(--w) * .55 + 2px); border-radius: 150% 0 150% 0; background: linear-gradient(135deg, #FFF1F6, #F7B6CE); opacity: .95;
  animation-name: fall-wind, tumble; animation-duration: calc(var(--d) * .9), calc(var(--sd) * 1.2); }
.petals i:nth-child(3n) { background: linear-gradient(135deg, #FFFFFF, #FBD9E6); }
@keyframes fall-wind { from { translate: 0 0; } to { translate: calc(var(--dx) + 22vw) 112vh; } }
.pollen i { top: auto; bottom: -2vh; width: calc(var(--w) * .7 + 2px); height: calc(var(--w) * .7 + 2px); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFFBE0 0 35%, rgba(255, 236, 150, .7) 50%, rgba(255, 236, 150, 0) 72%);
  animation-name: float-up, drift-snow; animation-duration: calc(var(--d) * 1.4), var(--sd); }
@keyframes float-up { 0% { translate: 0 0; opacity: 0; } 15%, 80% { opacity: .9; } 100% { translate: var(--dx) -75vh; opacity: 0; } }
.weather i:nth-child(1) { --x: 39.0vw; --w: 6px; --d: 17.2s; --p: 0.27; --sd: 4.4s; --dx: 62px; --o: 0.64; }
.weather i:nth-child(2) { --x: 43.0vw; --w: 9px; --d: 15.5s; --p: 0.78; --sd: 2.9s; --dx: -72px; --o: 0.87; }
.weather i:nth-child(3) { --x: 99.6vw; --w: 10px; --d: 12.1s; --p: 0.21; --sd: 4.5s; --dx: 0px; --o: 0.64; }
.weather i:nth-child(4) { --x: 63.7vw; --w: 11px; --d: 11.5s; --p: 0.91; --sd: 3.4s; --dx: -13px; --o: 0.61; }
.weather i:nth-child(5) { --x: 1.8vw; --w: 12px; --d: 11.0s; --p: 0.75; --sd: 3.3s; --dx: 69px; --o: 0.71; }
.weather i:nth-child(6) { --x: 45.7vw; --w: 7px; --d: 18.3s; --p: 0.14; --sd: 3.5s; --dx: -68px; --o: 0.89; }
.weather i:nth-child(7) { --x: 24.8vw; --w: 6px; --d: 17.9s; --p: 0.79; --sd: 3.3s; --dx: -64px; --o: 0.7; }
.weather i:nth-child(8) { --x: 47.9vw; --w: 11px; --d: 12.0s; --p: 0.97; --sd: 4.3s; --dx: -78px; --o: 0.82; }
.weather i:nth-child(9) { --x: 84.6vw; --w: 5px; --d: 19.2s; --p: 0.54; --sd: 3.0s; --dx: 7px; --o: 0.59; }
.weather i:nth-child(10) { --x: 90.4vw; --w: 10px; --d: 11.6s; --p: 0.00; --sd: 4.0s; --dx: -13px; --o: 0.94; }
.weather i:nth-child(11) { --x: 74.6vw; --w: 6px; --d: 17.4s; --p: 0.11; --sd: 3.8s; --dx: 49px; --o: 0.79; }
.weather i:nth-child(12) { --x: 95.7vw; --w: 6px; --d: 16.9s; --p: 0.16; --sd: 4.5s; --dx: 55px; --o: 0.92; }
.weather i:nth-child(13) { --x: 30.2vw; --w: 9px; --d: 14.1s; --p: 0.11; --sd: 3.2s; --dx: -2px; --o: 0.65; }
.weather i:nth-child(14) { --x: 51.7vw; --w: 7px; --d: 17.8s; --p: 0.95; --sd: 2.6s; --dx: 44px; --o: 0.88; }
.weather i:nth-child(15) { --x: 13.8vw; --w: 12px; --d: 11.9s; --p: 0.13; --sd: 3.4s; --dx: 60px; --o: 0.62; }
.weather i:nth-child(16) { --x: 35.7vw; --w: 12px; --d: 12.3s; --p: 0.42; --sd: 2.9s; --dx: 58px; --o: 0.85; }
.weather i:nth-child(17) { --x: 9.6vw; --w: 7px; --d: 17.2s; --p: 0.40; --sd: 3.9s; --dx: 15px; --o: 0.73; }
.weather i:nth-child(18) { --x: 87.0vw; --w: 12px; --d: 10.6s; --p: 0.25; --sd: 2.5s; --dx: -75px; --o: 0.79; }
.weather i:nth-child(19) { --x: 68.3vw; --w: 7px; --d: 16.7s; --p: 0.01; --sd: 4.0s; --dx: -65px; --o: 0.64; }
.weather i:nth-child(20) { --x: 26.8vw; --w: 4px; --d: 21.0s; --p: 0.07; --sd: 2.9s; --dx: 44px; --o: 0.64; }
.weather i:nth-child(21) { --x: 21.1vw; --w: 6px; --d: 18.3s; --p: 0.88; --sd: 3.7s; --dx: -18px; --o: 0.86; }
.weather i:nth-child(22) { --x: 3.3vw; --w: 10px; --d: 11.8s; --p: 0.10; --sd: 3.3s; --dx: 28px; --o: 0.71; }
.weather i:nth-child(23) { --x: 6.8vw; --w: 4px; --d: 20.3s; --p: 0.98; --sd: 2.6s; --dx: 23px; --o: 0.84; }
.weather i:nth-child(24) { --x: 65.8vw; --w: 5px; --d: 17.5s; --p: 0.19; --sd: 3.4s; --dx: 28px; --o: 0.62; }
.weather i:nth-child(25) { --x: 20.0vw; --w: 11px; --d: 10.9s; --p: 0.92; --sd: 3.4s; --dx: 60px; --o: 0.59; }
.weather i:nth-child(26) { --x: 93.2vw; --w: 12px; --d: 12.1s; --p: 0.97; --sd: 4.4s; --dx: -20px; --o: 0.62; }
.weather i:nth-child(27) { --x: 33.8vw; --w: 11px; --d: 11.8s; --p: 0.86; --sd: 4.4s; --dx: -38px; --o: 0.7; }
.weather i:nth-child(28) { --x: 79.9vw; --w: 10px; --d: 12.1s; --p: 0.78; --sd: 3.4s; --dx: 28px; --o: 0.83; }
.weather i:nth-child(29) { --x: 56.2vw; --w: 12px; --d: 11.4s; --p: 0.49; --sd: 2.8s; --dx: -25px; --o: 0.94; }
.weather i:nth-child(30) { --x: 61.0vw; --w: 12px; --d: 9.0s; --p: 0.31; --sd: 2.5s; --dx: 42px; --o: 0.75; }
.weather i:nth-child(31) { --x: 77.0vw; --w: 12px; --d: 9.4s; --p: 0.96; --sd: 2.6s; --dx: -33px; --o: 0.58; }
.weather i:nth-child(32) { --x: 55.1vw; --w: 5px; --d: 19.2s; --p: 0.24; --sd: 2.7s; --dx: 65px; --o: 0.65; }
.weather i:nth-child(33) { --x: 16.6vw; --w: 4px; --d: 20.1s; --p: 0.42; --sd: 3.7s; --dx: 53px; --o: 0.68; }
.weather i:nth-child(34) { --x: 73.1vw; --w: 8px; --d: 14.0s; --p: 0.72; --sd: 2.9s; --dx: 21px; --o: 0.6; }

/* ---------- Desktop: the village and its gate on the left of the game, the dark woods on the right ----------
   --vh-v  height of each side drawing. The drawings (tools/village.py, left/wild) are 760×560 with the ground
           line at y 380, i.e. .321 of their height above the bottom, and are always scaled by height.
   --g     game width; the 960×320 canvas has its ground line 42/320 = .131 of its height above its bottom edge,
           so --game-bottom runs the runner's track out of the gate and on into the woods. */
body {
  --vh-v: clamp(300px, 56vh, 680px);
  --g: clamp(520px, 52vw, 1200px);
  --game-bottom: calc(var(--vh-v) * .321 - var(--g) / 3 * .131);
  --game-top: calc(var(--game-bottom) + var(--g) / 3);
}
.village { position: fixed; left: 0; right: 0; bottom: 0; height: var(--vh-v); z-index: 2; pointer-events: none; }
.village-art { display: block; }
.village-art.tall, .village-art.wide, .village-art.right, .village-art.phone { display: none; }
/* Narrow screens crop each half's outer end (preserveAspectRatio slice towards the gate); very wide ones leave meadow beyond it. */
.village-art.left, .village-art.wild { position: absolute; bottom: 0; height: 100%; width: min(calc(50% - var(--g) / 2), calc(var(--vh-v) * 1.357)); }
.village-art.left { right: calc(50% + var(--g) / 2); }
.village-art.wild { left: calc(50% + var(--g) / 2); }
.smoke circle { fill: #FFFFFF; opacity: 0; animation: smoke 4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.smoke circle:nth-child(2) { animation-delay: -1.3s; }
.smoke circle:nth-child(3) { animation-delay: -2.6s; }
.smoke.s2 circle { animation-duration: 5s; }
@keyframes smoke { 0% { opacity: .85; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(14px, -70px) scale(1.8); } }
.flame { transform-box: fill-box; transform-origin: bottom center; animation: flicker .35s ease-in-out infinite alternate; }
@keyframes flicker { to { transform: scale(.88, 1.08) skewX(4deg); } }

/* Clickable area over the stone in the left half: stone x 570-630, y 411-489 of 760×560, measured from the gate */
.runestone { position: absolute; right: calc(50% + var(--g) / 2 + var(--vh-v) * .232); bottom: calc(var(--vh-v) * .125); width: calc(var(--vh-v) * .107); height: calc(var(--vh-v) * .143); pointer-events: auto; }
.runestone summary { list-style: none; width: 100%; height: 100%; cursor: pointer; border-radius: 12px; position: relative; }
.runestone summary::-webkit-details-marker { display: none; }
.runestone summary:focus-visible { outline: 3px solid #5F82BC; }
.glint { position: absolute; right: -6px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: #FFF3B0; box-shadow: 0 0 10px 4px rgba(255, 236, 150, .9); animation: glint 2s ease-in-out infinite; }
@keyframes glint { 50% { transform: scale(.5); opacity: .4; } }
.runestone[open] .glint { display: none; }
/* The card opens above the stone and leans left (away from the game), but never past the screen's left edge.
   --sl: the stone's left edge on screen; --cl: the card's left relative to the stone. */
.runestone { --sl: calc(50vw - var(--g) / 2 - var(--vh-v) * .339); --cl: max(calc(var(--vh-v) * .0535 - 156px), calc(12px - var(--sl))); }
.stone-card {
  position: absolute; left: var(--cl); bottom: calc(100% + 12px); width: 260px;
  background: #F4F6FA; border: 3px solid #C8CEDB; border-radius: 22px; padding: 14px 16px 12px; text-align: center;
  font-family: Georgia, "Times New Roman", serif; color: #4F566B; box-shadow: 0 14px 30px rgba(31, 42, 82, .18);
  animation: rise .25s ease-out;
}
.stone-card::after { content: ""; position: absolute; left: calc(var(--vh-v) * .0535 - var(--cl) - 9px); bottom: -11px; width: 18px; height: 18px; background: #F4F6FA; border-right: 3px solid #C8CEDB; border-bottom: 3px solid #C8CEDB; transform: rotate(45deg); }
@keyframes rise { from { opacity: 0; translate: 0 8px; } }
.stone-card p, .stone-card h3 { margin: 0 0 6px; }
.stone-card .runes { font-family: "Segoe UI Historic", "Noto Sans Runic", serif; font-size: 22px; letter-spacing: 6px; }
.stone-card h3 { font-size: 30px; letter-spacing: 3px; color: #3F4659; }
.stone-card .norse { font-size: 16px; }
.stone-card .said { font-size: 19px; font-style: italic; font-weight: 700; }
.stone-card .src { font-size: 12px; opacity: .8; margin: 0; }

.bar { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); left: max(16px, env(safe-area-inset-left)); z-index: 3; display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.hello { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; margin-right: auto; font-size: clamp(18px, 3vw, 24px); font-weight: 700; background: rgba(255, 255, 255, .6); padding: 8px 16px; border-radius: 999px; }
.pill { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; background: rgba(255, 255, 255, .7); padding: 8px 14px; border-radius: 999px; }
.pill:hover { background: var(--white); }
.hello img { border-radius: 50%; image-rendering: pixelated; margin-left: -8px; }

/* The sun moves aside on desktop: the leaderboard hangs in the middle of the sky, over the gate */
.sun, .season-autumn .sun { left: calc(50% + var(--g) / 2 + 4vw); }

/* Leaderboard in the middle, at the top of the game's column (it grows upwards from the bottom of the screen);
   it scrolls if the screen is short, never reaching under the bar */
.board {
  position: relative; width: min(340px, 100%); margin: 0 auto 10px;
  max-height: max(120px, calc(100vh - var(--game-top) - 210px)); overflow-y: auto;
  background: rgba(255, 255, 255, .75); backdrop-filter: blur(6px); border-radius: 20px; padding: 12px 14px;
}

/* Runner game in the middle: the keyboard legend above it, a fact card hanging below the canvas */
.game { position: fixed; left: calc(50% - var(--g) / 2); bottom: var(--game-bottom); width: var(--g); z-index: 3; }
.game-stage { position: relative; }
.game canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: manipulation; }
.game-controls { display: none; }

/* Keyboard legend: one chip per move with its keycaps, a pictogram and a short word */
.game-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0 auto 8px; font-size: 13px; line-height: 1; }
.game-legend .break { flex-basis: 100%; height: 0; }
.game-legend .lg { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 13px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 4px rgba(31, 42, 82, .08); white-space: nowrap; }
.game-legend .util { font-size: 12px; padding: 2px 8px 2px 3px; background: rgba(255, 255, 255, .6); }
.game-legend .util kbd { font-size: 11px; min-width: 19px; padding: 2px 4px 1px; }
.game-legend .util .ico { width: 16px; height: 16px; }
.game-legend .keys { display: inline-flex; align-items: center; gap: 2px; }
.game-legend .times { font-size: 12px; font-weight: 800; padding: 0 1px; }
.game-legend .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.game-legend .ico .fill { fill: var(--ink); stroke: none; }
.game-legend .ico .soft { opacity: .4; }
.game-legend .lbl { font-weight: 700; }
.game-legend small { font-size: 11px; font-weight: 600; opacity: .7; }
.game kbd { font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; min-width: 22px; text-align: center; background: #FFFFFF; border: 1px solid #C1D3FE; border-bottom-width: 3px; border-radius: 6px; padding: 3px 5px 2px; }

/* Fact card: may overlap the grass strip under the track */
.game-facts {
  position: absolute; left: 50%; top: calc(100% - 4px); transform: translateX(-50%); width: min(100%, 580px);
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px;
  background: rgba(255, 255, 255, .72); border-radius: 16px; padding: 7px 8px 8px 14px; font-size: 13.5px; line-height: 1.35;
}
.game-facts[hidden] { display: none; }
.facts-title { grid-column: 1; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.fact { grid-column: 1; margin: 2px 0 0; transition: opacity .35s ease; }
.fact.fading { opacity: 0; }
.fact-next { grid-column: 2; grid-row: 1 / 3; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #FFFFFF; color: var(--ink); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.fact-next:hover { background: #EDF2FB; }
.fact-next:focus-visible { outline: 3px solid #1F2A52; outline-offset: 2px; }
@media (min-width: 2000px) and (min-height: 1100px) {
  .game-legend { font-size: 15px; }
  .game-facts { font-size: 15px; width: min(100%, 680px); }
}
/* Narrower desktops: smaller chips, so the five moves still fit on one row (also in Lithuanian) */
@media (max-width: 1365px) {
  .game-legend { gap: 4px; font-size: 12px; }
  .game-legend .lg { gap: 4px; padding: 2px 7px 2px 3px; }
  .game-legend .ico { width: 17px; height: 17px; }
  .game kbd { font-size: 11px; min-width: 19px; padding: 2px 4px 1px; }
}
@media (max-height: 760px) {
  .game-facts { font-size: 12.5px; line-height: 1.3; padding: 5px 6px 6px 12px; }
  .fact-next { width: 30px; height: 30px; font-size: 16px; }
}

/* ---------- Phones and tablets: a scrolling column (village, game, leaderboard) with touch buttons ----------
   The first screen is the village and the play area; the buttons sit at its bottom, under the thumbs. */
@media (max-width: 900px), (pointer: coarse) {
  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
  body {
    --bar-h: calc(58px + env(safe-area-inset-top));
    --pad-l: max(10px, env(safe-area-inset-left)); --pad-r: max(10px, env(safe-area-inset-right));
    padding: var(--bar-h) var(--pad-r) calc(28px + env(safe-area-inset-bottom)) var(--pad-l);
  }
  .sun { left: 47vw; }
  .season-autumn .sun { left: 52vw; }
  /* z-index auto: no stacking context, so the open stone card (z 5) lies over the game below */
  .village { position: relative; left: auto; right: auto; bottom: auto; height: auto; pointer-events: auto; z-index: auto;
    width: min(100% + var(--pad-l) + var(--pad-r), 760px); margin: 0 0 -6px max(calc(-1 * var(--pad-l)), calc((100% - 760px) / 2)); }
  .village-art.left, .village-art.wild { display: none; }
  .village-art.phone { display: block; width: 100%; height: auto; }
  /* phone drawing: stone x 160-220, y 425-503 of 800x265 from y 255 */
  .runestone { left: 20%; top: 64%; right: auto; bottom: auto; width: 7.5%; height: 29.5%; }
  /* Little room above the village on phones, so the card opens below the stone */
  .stone-card { left: 50%; transform: translateX(-20%); bottom: auto; top: calc(100% + 12px); z-index: 5; }
  .stone-card::after { left: 20%; bottom: auto; top: -11px; transform: rotate(225deg); }
  .game { position: relative; left: auto; bottom: auto; width: 100%; max-width: 720px; margin: 0 auto; }
  .game-legend { display: none; }
  /* Canvas and buttons together at the bottom of the first screen, the buttons under the thumbs;
     any spare height goes above them, where the meadow shows between village and game (capped on tall screens) */
  .game-stage {
    display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; touch-action: manipulation;
    min-height: min(calc(100svh - var(--bar-h) - min(100vw, 760px) * .33125 + 6px), calc(min(100vw, 720px) * .5 + 140px));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .game canvas { border-radius: 18px; }
  .game-controls { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
  /* Subtle glass buttons: big touch areas, but they don't compete with the game */
  .game-controls button {
    font: inherit; font-size: 20px; line-height: 1; min-height: clamp(64px, 10svh, 92px); padding: 8px 0; border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .45); color: rgba(31, 42, 82, .8);
    box-shadow: 0 2px 10px rgba(31, 42, 82, .06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: background .08s, transform .08s;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  }
  .game-controls button span { display: block; font-size: 11px; font-weight: 600; margin-top: 3px; opacity: .75; }
  .game-controls button.down { transform: scale(.96); background: rgba(255, 255, 255, .6); }
  .game-facts { position: static; transform: none; width: auto; max-width: 720px; margin: 4px auto 0; font-size: 14px; line-height: 1.4; }
  .game { display: flex; flex-direction: column; }
  .board { order: 3; width: 100%; max-width: 720px; max-height: none; margin: 14px auto 0; }
  .bar { top: 0; left: 0; right: 0; padding: max(10px, env(safe-area-inset-top)) var(--pad-r) 10px var(--pad-l); background: rgba(237, 242, 251, .85); backdrop-filter: blur(6px); border-radius: 0 0 18px 18px; }
  .hello { font-size: 15px; padding: 6px 12px; }
  .hello img { width: 26px; height: 26px; }
  .pill { font-size: 13px; padding: 6px 10px; }
  .bar { flex-wrap: nowrap; gap: 6px; }
  .hello { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* While a run is on, swipes and double taps over the play area don't scroll or zoom the page */
  .game-running .game-stage, .game-running .game canvas { touch-action: none; }
  html.game-running { overscroll-behavior: none; }
}

/* Phones held sideways: the play area fills the screen, jump and duck under the left thumb, the axe under the right.
   The bar shrinks to a strip above it; tip, village and leaderboard follow below. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse), (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  body { --bar-h: 44px; display: flex; flex-direction: column; padding-top: 0; }
  .bar { position: relative; order: -2; margin: 0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l)); padding: 5px var(--pad-r) 5px var(--pad-l); height: var(--bar-h); }
  .hello { font-size: 14px; padding: 4px 10px; }
  .hello img { width: 22px; height: 22px; }
  .pill { padding: 5px 10px; }
  .game { order: -1; max-width: none; }
  .game-stage {
    --side: clamp(88px, 14vw, 150px);
    display: grid; grid-template-columns: var(--side) 1fr var(--side); grid-template-rows: 1fr 1fr; gap: 8px;
    height: calc(100svh - var(--bar-h)); min-height: 0; padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  }
  .game-controls { display: contents; }
  .game canvas { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: center; width: min(100%, calc((100svh - var(--bar-h) - 12px - env(safe-area-inset-bottom)) * 2)); }
  .game-controls button { min-height: 0; border-radius: 22px; }
  .game-controls .jump { grid-column: 1; grid-row: 1; }
  .game-controls .duck { grid-column: 1; grid-row: 2; }
  .game-controls .axe { grid-column: 3; grid-row: 1 / 3; }
  .game-facts { margin-top: 10px; }
  .village { margin-top: 14px; }
  .cta { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .butterfly, .butterfly span, .grass path, .smoke circle, .flame, .glint, .glints path { animation: none; }
  .weather, .birds { display: none; }
  .fact { transition: none; }
  .glints path { opacity: .7; }
  .smoke circle { opacity: .6; }
  .cloud { left: 20vw; }
  .c2 { left: 55vw; }
  .c3 { left: 75vw; }
}

/* Offer after a game over (sign up as a guest, or "saved" when logged in): right above the canvas, covering the legend while it shows */
.cta {
  position: fixed; left: calc(50% - min(520px, var(--g)) / 2); bottom: calc(var(--game-top) + 8px); width: min(520px, var(--g)); z-index: 5;
  background: #FFFFFF; border-radius: 24px; padding: 18px 20px; text-align: center; box-shadow: 0 14px 40px rgba(31, 42, 82, .16);
  animation: cta-pop .4s cubic-bezier(.3, 1.6, .5, 1);
}
/* The legend would peek out at its sides; it comes back when the next run starts (the offer hides) */
body:has(.cta:not([hidden])) .game-legend { visibility: hidden; }
.cta h3 { margin: 0 0 6px; font-size: 22px; }
.cta p { margin: 0 0 12px; color: #4A5785; font-size: 15px; }
.cta p:empty { display: none; }
.cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta-actions:empty { display: none; }
.cta a { font-weight: 600; text-decoration: none; padding: 10px 20px; border-radius: 999px; background: #EDF2FB; color: #1F2A52; border: 2px solid #CCDBFD; }
.cta a.primary { background: #1F2A52; color: #FFFFFF; border-color: #1F2A52; }
@keyframes cta-pop { from { transform: scale(.7); opacity: 0; } }

/* Arriving from the homepage "Defend your village!" scroll: the village, game and board rise in */
.village, .game, .board, .bar { animation: arrive .7s ease-out both; }
.game { animation-delay: .1s; }
.board { animation-delay: .2s; }
@keyframes arrive { from { opacity: 0; transform: translateY(40px); } }
@media (max-width: 900px), (pointer: coarse) {
  .cta { position: relative; left: auto; bottom: auto; width: auto; max-width: 720px; margin: 12px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .village, .game, .board, .bar, .cta { animation: none; }
}

/* Screen-reader-only text (game announcements) and a visible focus ring for the game */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#game canvas:focus { outline: none; }
#game.game-focused canvas { outline: 3px solid #1F2A52; outline-offset: 3px; border-radius: 12px; }
.runestone summary:focus-visible { outline-color: #1F2A52; }