/* Pixelkid quest map – the home page's overworld: each world's lessons are stops on a road from START to the world's goal.
 * Used by index.html with shared/map.js and shared/map-art.js. */
.qmap-wrap { position: relative; z-index: 1; max-width: 1040px; margin: 16px auto 0; padding: 0 16px 90px; }
.qmap { position: relative; overflow: hidden; border: 4px solid #000; box-shadow: var(--bevel), 0 6px 0 rgba(0,0,0,.25); background: var(--sea, #3d8fe4); }
.qmap > svg { position: absolute; inset: 0; }
.qdeco { position: absolute; transform: translate(-50%, -50%) scale(var(--s, 1)); font-size: 1.9rem; line-height: 1; pointer-events: none; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.25)); }
.qdeco.small { font-size: 1.2rem; }
/* someone by the road: tap to talk. A bobbing ! means they have something for you, ? that they want what you carry */
.qnpc { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: grid; justify-items: center; padding: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qnpc canvas { display: block; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.25)); }
.qnpc:hover canvas, .qnpc:focus-visible canvas { filter: drop-shadow(0 0 0 #fff) drop-shadow(3px 3px 0 rgba(0,0,0,.25)); outline: 3px solid #fff; outline-offset: 2px; }
.qnpc-mark { position: absolute; top: -26px; min-width: 24px; padding: 0 4px; text-align: center; font-family: var(--pixel); font-weight: 700; font-size: 1rem; line-height: 22px; color: #000; background: #fff; border: 2px solid #000; }
.qnpc-mark.ask { color: #000; background: #ffd43b; animation: qbob 1s steps(2) infinite; }
/* a topic's landmark (a mountain painted on the ground, see .qmark.peak below). Tap it for the topic's name */
.qmark { position: absolute; z-index: 1; transform: translate(-50%, -60%); padding: 0; font-size: 3.6rem; line-height: 1; background: none; border: 0; cursor: pointer; filter: drop-shadow(5px 5px 0 rgba(0,0,0,.25)); -webkit-tap-highlight-color: transparent; }
.qmark:hover, .qmark:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.qmark::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 12px; background: rgba(0,0,0,.18); z-index: -1; }
.qlabel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 150px; padding: 2px 7px; text-align: center;
  background: rgba(0,0,0,.78); color: #fff; font-family: var(--pixel); font-weight: 700; font-size: .85rem; line-height: 1.15; pointer-events: none; }
/* the player's hero stands on the road at the next stop (and walks there after finishing a quest) */
.qhero { position: absolute; z-index: 3; pointer-events: none; image-rendering: pixelated; }
.qhero-tag { position: absolute; z-index: 4; transform: translate(-50%, -100%); padding: 2px 8px; white-space: nowrap; background: #000; color: #ffd43b; font-family: var(--pixel); font-weight: 700; font-size: .8rem; pointer-events: none; animation: qbob 1s steps(2) infinite; }
@keyframes qbob { 50% { margin-top: -4px; } }
/* tapping a stop opens its quest card */
.qcard-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.55); }
.qcard-back[hidden] { display: none; }
.qcard { position: relative; width: min(440px, 100%); display: flex; gap: 16px; align-items: flex-start; padding: 26px 18px 18px;
  background: linear-gradient(var(--brand) 0 12px, #000 12px 15px, var(--stone) 15px); border: 4px solid #000; box-shadow: var(--bevel), 0 8px 0 rgba(0,0,0,.4); }
.qcard .le { flex: none; width: 84px; height: 84px; display: grid; place-items: center; font-size: 3rem; background: var(--slot); border: 3px solid #000; box-shadow: var(--bevel-in); }
.qcard.soon .le { filter: grayscale(1); }
.qc-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.qc-tag { padding: 2px 8px; background: #000; color: #ffd43b; font-family: var(--pixel); font-weight: 700; font-size: .8rem; }
.qcard h2 { margin: 2px 0 0; font-size: 1.35rem; }
.qc-unit { color: #444; font-weight: 600; font-size: .85rem; }
.qc-stat { margin: 6px 0 0; font-weight: 600; }
.qc-tip { margin: 6px 0 0; padding: 6px 8px; background: #fff8d6; border: 2px solid #000; font-size: .9rem; }
.qc-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
@media (max-width: 479px) {
  .qmap-wrap { padding: 0 10px 70px; }
  .qlabel { max-width: 120px; font-size: .78rem; }
  .qdeco { font-size: 1.5rem; }
  .qcard { flex-direction: column; align-items: center; text-align: center; }
  .qc-body { align-items: center; }
  .qc-btns { justify-content: center; }
}

/* ---------- the Super Mario World–style landscape (shared/map-art.js draws it; --sea is set per world) ---------- */
.qsea { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.qglint { position: absolute; inset: 0; z-index: 1; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%20shape-rendering='crispEdges'%3E%3Crect%20x='4'%20y='1'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='14'%20y='3'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='19'%20y='7'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='9'%20y='9'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 96px 48px; animation: qtwinkle 4.8s steps(4) infinite; background-size: 144px 72px; } /* sparkles that twinkle */
/* the sea: dark swells and light curling crests drift past each other at different speeds (in 4px steps, so it stays pixel art) */
.qsea::before, .qsea::after { content: ""; position: absolute; top: 0; bottom: 0; left: -192px; right: -192px; animation: qflow 9s steps(48) infinite; opacity: .55; }
.qsea::before { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2024'%20shape-rendering='crispEdges'%3E%3Crect%20x='5'%20y='2'%20width='6'%20height='1'%20fill='rgba(0%2C0%2C0%2C.2)'/%3E%3Crect%20x='27'%20y='5'%20width='9'%20height='1'%20fill='rgba(0%2C0%2C0%2C.2)'/%3E%3Crect%20x='2'%20y='9'%20width='4'%20height='1'%20fill='rgba(0%2C0%2C0%2C.2)'/%3E%3Crect%20x='19'%20y='11'%20width='7'%20height='1'%20fill='rgba(0%2C0%2C0%2C.2)'/%3E%3Crect%20x='40'%20y='14'%20width='5'%20height='1'%20fill='rgba(0%2C0%2C0%2C.2)'/%3E%3Crect%20x='9'%20y='17'%20width='8'%20height='1'%20fill='rgba(0%2C0%2C0%2C.2)'/%3E%3Crect%20x='31'%20y='20'%20width='5'%20height='1'%20fill='rgba(0%2C0%2C0%2C.2)'/%3E%3C/svg%3E") 0 0 / 192px 96px; animation-duration: 26s; animation-direction: reverse; }
.qsea::after { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2016'%20shape-rendering='crispEdges'%3E%3Crect%20x='3'%20y='1'%20width='3'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='2'%20y='2'%20width='1'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='6'%20y='2'%20width='2'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='21'%20y='5'%20width='3'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='20'%20y='6'%20width='1'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='24'%20y='6'%20width='2'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='10'%20y='9'%20width='3'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='9'%20y='10'%20width='1'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='13'%20y='10'%20width='2'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='27'%20y='13'%20width='3'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='26'%20y='14'%20width='1'%20height='1'%20fill='%23b9e0ff'/%3E%3Crect%20x='30'%20y='14'%20width='2'%20height='1'%20fill='%23b9e0ff'/%3E%3C/svg%3E") 0 0 / 128px 64px; animation-name: qflow2; animation-duration: 16s; animation-timing-function: steps(32); opacity: .7; }
@keyframes qflow { to { transform: translateX(192px); } }
@keyframes qflow2 { to { transform: translateX(128px); } }
@keyframes qtwinkle { 0%, 100% { opacity: 0; } 50% { opacity: .5; } }
.qground { position: absolute; left: 0; top: 0; image-rendering: pixelated; pointer-events: none; }
.qmap > svg { z-index: 0; }
/* SMW's banner: the stop the hero is on, or the one you pointed at */
.qbanner { position: sticky; top: 8px; z-index: 6; display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; min-height: 48px; margin: 0 auto 10px; padding: 6px 16px 6px 10px;
  background: #000; color: #fff; border: 3px solid #fff; outline: 3px solid #000; box-shadow: 0 6px 0 rgba(0,0,0,.3); }
.qb-icon { font-size: 1.9rem; line-height: 1; }
.qb-text { display: flex; flex-direction: column; min-width: 0; }
.qbanner b { font-family: var(--pixel); font-size: 1.15rem; color: #ffd43b; text-transform: uppercase; letter-spacing: .5px; line-height: 1.15; }
.qbanner small { font-family: Lexend, sans-serif; font-weight: 600; font-size: .78rem; color: #dfe7ff; }
/* a stop: a small round dot with the lesson's icon */
.qdot { position: absolute; z-index: 2; width: 34px; height: 34px; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 50%;
  background: #ffd43b; border: 3px solid #000; box-shadow: inset -3px -3px 0 rgba(0,0,0,.22), inset 3px 3px 0 rgba(255,255,255,.65), 0 3px 0 #000; -webkit-tap-highlight-color: transparent; }
.qdot .qi { font-size: 18px; line-height: 1; }
.qdot:hover, .qdot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.qdot.going { background: #ffd43b; box-shadow: inset -3px -3px 0 rgba(0,0,0,.22), inset 3px 3px 0 rgba(255,255,255,.65), 0 0 0 3px #ff8c1a, 0 0 0 5px #000; }
.qdot.done { background: #a7e07a; }
.qstar { position: absolute; top: -12px; right: -12px; font-size: 18px; line-height: 1; color: #ffd43b; text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000; pointer-events: none; }
.qdot .qlabel { top: calc(100% + 8px); max-width: 140px; font-size: .78rem; padding: 2px 6px; background: rgba(0,0,0,.82); }
/* the next quest flashes, like SMW's uncleared levels */
.qdot.next { animation: qdotglow 1s steps(2) infinite; }
@keyframes qdotglow { 50% { background: #ff6b3d; box-shadow: inset -3px -3px 0 rgba(0,0,0,.22), inset 3px 3px 0 rgba(255,255,255,.5), 0 0 0 4px #fff, 0 0 0 7px #000; } }
/* START: a little house; the goal: a big castle on a red ring */
.qdot.start { width: 46px; height: 46px; border-radius: 0; background: none; border: 0; box-shadow: none; }
.qdot.start .qi { font-size: 40px; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.25)); }
.qdot.start .qlabel { top: calc(100% + 2px); }
.qdot.goal { width: 72px; height: 72px; border: 0; background: none; box-shadow: none; border-radius: 0; }
.qdot.goal::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: -4px; height: 22px; border-radius: 50%; background: #e53935; border: 3px solid #000; box-shadow: inset 0 3px 0 rgba(255,255,255,.4); }
.qdot.goal .qi { position: relative; font-size: 56px; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.3)); }
.qdot.goal .qlabel { top: calc(100% + 10px); }
.qdot.goal.clear .qlabel { background: var(--gold); color: #000; }
/* a new stretch of road draws itself in, then its stop pops up with a sparkle */
.qreveal { animation: qdraw 1s steps(16) forwards; }
@keyframes qdraw { to { stroke-dashoffset: 0; } }
.qdot.fresh { animation: qpop .45s steps(4) .9s backwards; }
.qdot.fresh.next { animation: qpop .45s steps(4) .9s backwards, qdotglow 1s steps(2) 1.4s infinite; }
@keyframes qpop { from { transform: translate(-50%, -50%) scale(0); } }
.qspark { position: absolute; z-index: 4; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; box-shadow: 0 0 0 2px #ffd43b; pointer-events: none; animation: qspark .8s steps(6) forwards; }
@keyframes qspark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
/* living bits: hill eyes that blink, clouds drifting over, a fluttering butterfly */
.qeyes { position: absolute; z-index: 1; width: var(--gap); height: 12px; transform: translate(-50%, -50%); pointer-events: none; animation: qblink 5s steps(1) infinite; }
.qeyes i { position: absolute; top: 0; width: 6px; height: 12px; background: #000; box-shadow: inset 2px 2px 0 #fff; }
.qeyes i:first-child { left: 0; } .qeyes i:last-child { right: 0; }
@keyframes qblink { 94% { transform: translate(-50%, -50%) scaleY(.15); } 97% { transform: translate(-50%, -50%); } }
.qcloud { position: absolute; z-index: 1; width: 96px; height: 36px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%209'%20shape-rendering='crispEdges'%3E%3Crect%20x='6'%20y='0'%20width='5'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='4'%20y='1'%20width='2'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='6'%20y='1'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='11'%20y='1'%20width='2'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='14'%20y='1'%20width='4'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='3'%20y='2'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='4'%20y='2'%20width='9'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='13'%20y='2'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='14'%20y='2'%20width='4'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='18'%20y='2'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='1'%20y='3'%20width='2'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='3'%20y='3'%20width='16'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='19'%20y='3'%20width='2'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='1'%20y='4'%20width='20'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='21'%20y='4'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='0'%20y='5'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='1'%20y='5'%20width='21'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='22'%20y='5'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='0'%20y='6'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='1'%20y='6'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='2'%20y='6'%20width='2'%20height='1'%20fill='%23cfe6ff'/%3E%3Crect%20x='4'%20y='6'%20width='14'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='18'%20y='6'%20width='2'%20height='1'%20fill='%23cfe6ff'/%3E%3Crect%20x='20'%20y='6'%20width='2'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='22'%20y='6'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='1'%20y='7'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='2'%20y='7'%20width='4'%20height='1'%20fill='%23cfe6ff'/%3E%3Crect%20x='6'%20y='7'%20width='9'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='15'%20y='7'%20width='6'%20height='1'%20fill='%23cfe6ff'/%3E%3Crect%20x='21'%20y='7'%20width='1'%20height='1'%20fill='%231b1b1b'/%3E%3Crect%20x='2'%20y='8'%20width='19'%20height='1'%20fill='%231b1b1b'/%3E%3C/svg%3E") 0 0 / 100% 100%; opacity: .92; pointer-events: none;
  transform: translateX(-110px) scale(var(--s, 1)); animation: qdrift 100s linear infinite; }
@keyframes qdrift { to { transform: translateX(calc(var(--w) + 20px)) scale(var(--s, 1)); } }
.qflutter { z-index: 1; animation: qflap .6s steps(2) infinite; }
@keyframes qflap { 50% { transform: translate(-50%, -60%) scaleX(.6); } }
html.q-paused .qmap *, html.q-paused .qmap, html.q-paused .qsea::before, html.q-paused .qsea::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .qglint, .qsea::before, .qsea::after, .qcloud, .qeyes, .qflutter, .qdot.next { animation: none; } }
@media (max-width: 479px) {
  .qdot { width: 28px; height: 28px; }
  .qdot .qi { font-size: 15px; }
  .qdot .qlabel { max-width: 110px; font-size: .7rem; }
  .qdot.goal { width: 58px; height: 58px; } .qdot.goal .qi { font-size: 44px; }
  .qbanner b { font-size: .95rem; } .qb-icon { font-size: 1.5rem; }
}
/* a topic's landmark in the landscape: a painted mountain, with a little sign on top to tap for the topic */
.qmark.peak { width: 100px; height: 80px; font-size: 0; transform: translate(-50%, -62%); filter: none; }
.qmark.peak::after { display: none; }
.qpk { position: absolute; left: 50%; top: -6px; transform: translateX(-30%); display: grid; place-items: center; width: 34px; height: 30px; font-size: 20px; background: #fff8e0; border: 3px solid #000; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.qpk::after { content: ""; position: absolute; left: 50%; top: 100%; width: 4px; height: 12px; margin-left: -2px; background: #6b4425; border: solid #000; border-width: 0 2px 2px; }
/* a river between a fork's branches: water streaming down to a foam splash where it lands */
.qriver { position: absolute; width: 56px; margin-left: -28px; overflow: hidden; background: var(--sea); pointer-events: none; }
.qriver::before { content: ""; position: absolute; left: 0; right: 0; top: -64px; bottom: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2016'%20shape-rendering='crispEdges'%3E%3Crect%20x='2'%20y='0'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='2'%20y='1'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='9'%20y='1'%20width='1'%20height='1'%20fill='%23a9d6ff'/%3E%3Crect%20x='2'%20y='2'%20width='1'%20height='1'%20fill='%23a9d6ff'/%3E%3Crect%20x='9'%20y='2'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='9'%20y='3'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='5'%20y='4'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='5'%20y='5'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='5'%20y='6'%20width='1'%20height='1'%20fill='%23a9d6ff'/%3E%3Crect%20x='1'%20y='8'%20width='1'%20height='1'%20fill='%23a9d6ff'/%3E%3Crect%20x='10'%20y='8'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='1'%20y='9'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='10'%20y='9'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='1'%20y='10'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='10'%20y='10'%20width='1'%20height='1'%20fill='%23a9d6ff'/%3E%3Crect%20x='7'%20y='12'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='13'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='3'%20y='14'%20width='1'%20height='1'%20fill='%23a9d6ff'/%3E%3Crect%20x='7'%20y='14'%20width='1'%20height='1'%20fill='%23a9d6ff'/%3E%3Crect%20x='3'%20y='15'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3C/svg%3E") 4px 0 / 48px 64px; animation: qfall 1.2s steps(16) infinite; }
@keyframes qfall { to { transform: translateY(64px); } }
.qsplash { position: absolute; z-index: 1; width: 56px; height: 24px; margin: -16px 0 0 -28px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%206'%20shape-rendering='crispEdges'%3E%3Crect%20x='4'%20y='0'%20width='2'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='8'%20y='0'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='16'%20y='0'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='20'%20y='0'%20width='2'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='2'%20y='1'%20width='8'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='11'%20y='1'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='15'%20y='1'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='17'%20y='1'%20width='8'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='1'%20y='2'%20width='3'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='4'%20y='2'%20width='1'%20height='1'%20fill='%23cfe9ff'/%3E%3Crect%20x='5'%20y='2'%20width='4'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='9'%20y='2'%20width='1'%20height='1'%20fill='%23cfe9ff'/%3E%3Crect%20x='10'%20y='2'%20width='3'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='15'%20y='2'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='20'%20y='2'%20width='1'%20height='1'%20fill='%23cfe9ff'/%3E%3Crect%20x='21'%20y='2'%20width='6'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='0'%20y='3'%20width='2'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='2'%20y='3'%20width='1'%20height='1'%20fill='%23cfe9ff'/%3E%3Crect%20x='3'%20y='3'%20width='8'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='11'%20y='3'%20width='1'%20height='1'%20fill='%23cfe9ff'/%3E%3Crect%20x='12'%20y='3'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='17'%20y='3'%20width='1'%20height='1'%20fill='%23cfe9ff'/%3E%3Crect%20x='18'%20y='3'%20width='5'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='23'%20y='3'%20width='1'%20height='1'%20fill='%23cfe9ff'/%3E%3Crect%20x='24'%20y='3'%20width='4'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='1'%20y='4'%20width='4'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='5'%20y='4'%20width='1'%20height='1'%20fill='%23cfe9ff'/%3E%3Crect%20x='6'%20y='4'%20width='7'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='15'%20y='4'%20width='7'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='22'%20y='4'%20width='1'%20height='1'%20fill='%23cfe9ff'/%3E%3Crect%20x='23'%20y='4'%20width='4'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='3'%20y='5'%20width='8'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='17'%20y='5'%20width='8'%20height='1'%20fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 112px 24px; animation: qsplash .5s steps(1) infinite; pointer-events: none; }
@keyframes qsplash { 50% { background-position: -56px 0; } }
@media (prefers-reduced-motion: reduce) { .qriver::before, .qsplash { animation: none; } }
html.q-paused .qriver::before { animation-play-state: paused !important; }
/* things floating in the water (boats, fish, a turtle) or in space (planets, a moon), bobbing gently */
.qfloat { position: absolute; z-index: 1; font-size: 26px; line-height: 1; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25)); animation: qbobf 3.2s steps(4) infinite alternate; }
@keyframes qbobf { to { transform: translate(-50%, calc(-50% - 6px)); } }
/* Future's "sea" is space: two layers of stars drifting slowly at different speeds, stars twinkling, a moon and planets */
.qmap.space .qsea::before { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2024'%20shape-rendering='crispEdges'%3E%3Crect%20x='13'%20y='1'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='27'%20y='1'%20width='1'%20height='1'%20fill='%23b9a8ff'/%3E%3Crect%20x='37'%20y='1'%20width='1'%20height='1'%20fill='%23b9a8ff'/%3E%3Crect%20x='41'%20y='1'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='15'%20y='2'%20width='1'%20height='1'%20fill='%23b9a8ff'/%3E%3Crect%20x='34'%20y='3'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='20'%20y='4'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='7'%20y='7'%20width='1'%20height='1'%20fill='%23b9a8ff'/%3E%3Crect%20x='27'%20y='13'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='40'%20y='18'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 192px 96px; opacity: 1; animation-duration: 90s; }
.qmap.space .qsea::after { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2016'%20shape-rendering='crispEdges'%3E%3Crect%20x='25'%20y='1'%20width='1'%20height='1'%20fill='%23e6e0ff'/%3E%3Crect%20x='2'%20y='4'%20width='1'%20height='1'%20fill='%23ffe9a8'/%3E%3Crect%20x='26'%20y='4'%20width='1'%20height='1'%20fill='%23e6e0ff'/%3E%3Crect%20x='19'%20y='5'%20width='1'%20height='1'%20fill='%23e6e0ff'/%3E%3Crect%20x='12'%20y='11'%20width='1'%20height='1'%20fill='%23e6e0ff'/%3E%3C/svg%3E") 0 0 / 128px 64px; opacity: .9; animation-duration: 55s; }
.qmap.space .qglint { background-size: 96px 48px; animation-duration: 2.4s; }
.qmap.space .qfloat { font-size: 34px; animation-duration: 6s; }
@media (prefers-reduced-motion: reduce) { .qfloat { animation: none; } }
/* English's snowy kingdom: snow drifting down over the map, in two layers at different speeds */
.qsnowfall { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.qsnowfall::before, .qsnowfall::after { content: ""; position: absolute; left: -96px; right: 0; top: -160px; bottom: 0; animation: qsnow 14s steps(80) infinite; }
.qsnowfall::before { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%20shape-rendering='crispEdges'%3E%3Crect%20x='30'%20y='0'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='38'%20y='4'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='12'%20y='14'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='37'%20y='15'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='35'%20y='16'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='38'%20y='23'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='34'%20y='30'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='37'%20y='30'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='8'%20y='34'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 160px 160px; opacity: .85; }
.qsnowfall::after { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20shape-rendering='crispEdges'%3E%3Crect%20x='7'%20y='4'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='20'%20y='12'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='15'%20y='17'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3Crect%20x='4'%20y='20'%20width='1'%20height='1'%20fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 96px 96px; opacity: .6; animation-duration: 22s; }
@keyframes qsnow { to { transform: translate(96px, 160px); } }
.qsnowfall::after { animation-name: qsnow2; }
@keyframes qsnow2 { to { transform: translate(48px, 96px); } }
@media (prefers-reduced-motion: reduce) { .qsnowfall { display: none; } }
html.q-paused .qsnowfall::before, html.q-paused .qsnowfall::after { animation-play-state: paused !important; }