@font-face{font-family:Patrick Hand;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/patrick-hand-400.woff2)format("woff2")}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-400.woff2)format("woff2")}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-700.woff2)format("woff2")}:root{--color-paper:#f8f1e2;--color-sepia:#423828;--color-river-blue:#5e8ca7;--color-brick-red:#c05b3e;--color-reed-green:#a9b694;--color-map-surface:#f3e8d2;--color-map-background:#fdf8ec;--color-river-flow:#9dbdd1;--font-title:"Patrick Hand", cursive;--font-body:"Atkinson Hyperlegible", sans-serif;--radius-card:16px 18px 15px 19px;--radius-button:13px 15px 12px 16px / 15px 12px 16px 13px}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--color-paper);color:var(--color-sepia);font-family:var(--font-body);line-height:1.5}#app{flex-direction:column;height:100dvh;display:flex}button{font-family:inherit}.map-area{position:relative;overflow:hidden}.map-area svg{touch-action:none;width:100%;height:100%;display:block}.viewport{transform-origin:0 0;transform-box:view-box}.land{fill:var(--color-map-surface);stroke:var(--color-sepia);stroke-width:calc(3.4px / var(--map-zoom,1));stroke-linejoin:round;fill-rule:evenodd}.borders path{fill:none;stroke:var(--color-sepia);stroke-width:calc(.8px / var(--map-zoom,1));stroke-dasharray:3 4;opacity:.28;stroke-linejoin:round}.river{fill:none;stroke:var(--color-river-blue);stroke-width:calc(3.6px / var(--map-zoom,1));stroke-linecap:round;stroke-linejoin:round}.lakes,.detail-rivers{display:none}.map--detail .lakes,.map--detail .detail-rivers{display:block}.lakes path{fill:var(--color-river-blue);fill-opacity:.45;stroke:var(--color-sepia);stroke-width:calc(.6px / var(--map-zoom,1))}.detail-river{fill:none;stroke:var(--color-river-blue);stroke-width:calc(1px / var(--map-zoom,1));stroke-linecap:round;stroke-linejoin:round;opacity:.35}.river--animated{stroke-dasharray:1;stroke-dashoffset:1px;animation:2s ease-out .4s forwards draw-river}@keyframes draw-river{to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.river--animated{stroke-dashoffset:0;animation:none}}.river-flow{fill:none;stroke:var(--color-river-flow);stroke-width:calc(1.3px / var(--map-zoom,1));stroke-linecap:round;stroke-dasharray:calc(.5px / var(--map-zoom,1)) calc(7px / var(--map-zoom,1));opacity:0}.river-flow--active{animation:1.4s linear infinite river-flow-drift,.5s ease-out 2.5s forwards river-flow-appear}@keyframes river-flow-drift{to{stroke-dashoffset:calc(-7.5px / var(--map-zoom,1))}}@keyframes river-flow-appear{to{opacity:1}}.river-flow-arrow{fill:var(--color-river-blue);display:none}@media (prefers-reduced-motion:reduce){.river-flow{display:none}.river-flow-arrow{display:block}}.river-dot{fill:var(--color-river-blue);r:calc(2.6px / var(--map-zoom,1))}.city circle{fill:var(--color-sepia);r:calc(2px / var(--map-zoom,1))}.city text{font-family:var(--font-title);font-size:calc(7.2px / var(--map-zoom,1));fill:var(--color-sepia)}.city.bamberg circle{fill:var(--color-brick-red)}.city.bamberg text{fill:var(--color-brick-red);font-weight:700}.city--tier2{display:none}.map--tier2 .city--tier2{display:block}.city--tier2 circle{r:calc(1.4px / var(--map-zoom,1))}.city--tier2 text{font-size:calc(5.5px / var(--map-zoom,1))}.map-reset,.map-detail{border:2px solid var(--color-sepia);background:var(--color-map-background);width:34px;height:34px;color:var(--color-sepia);cursor:pointer;border-radius:50%;line-height:1;position:absolute;right:8px;box-shadow:1px 2px #42382840}.map-reset{top:8px}.map-detail{top:48px}.map-detail[aria-pressed=true]{background:var(--color-river-blue);color:var(--color-map-background)}.confetti-canvas{pointer-events:none;position:absolute;inset:0}.learn-screen{flex-direction:column;flex:1;min-height:0;display:flex}.learn-screen .map-area{flex:0 64%;min-height:0}.info-card{margin:6px 12px calc(14px + env(safe-area-inset-bottom,0px));background:var(--color-map-background);border:2px solid var(--color-sepia);border-radius:var(--radius-card);flex-direction:column;flex:none;gap:6px;padding:12px 16px 10px;display:flex;box-shadow:2px 3px #42382840}.river-name{font-family:var(--font-title);color:var(--color-sepia);margin:0;font-size:27px;font-weight:700}.stat-row{flex-wrap:wrap;gap:6px;display:flex}.stat{background:var(--color-map-surface);border:1.5px solid #42382866;border-radius:999px;padding:2.5px 9px;font-size:11.5px;font-weight:700}.davon{opacity:.75;margin:0;font-size:12px}.fakt{margin:2px 0 0;font-size:13px;line-height:1.45}.learn-nav{align-items:center;gap:10px;margin-top:auto;display:flex}.learn-nav__back{border:2px solid var(--color-sepia);background:var(--color-map-background);width:40px;height:40px;color:var(--color-sepia);cursor:pointer;border-radius:50%;flex:none;font-size:20px}.learn-nav__next{border-radius:var(--radius-button);border:2px solid var(--color-sepia);background:var(--color-river-blue);color:var(--color-map-background);font-family:var(--font-title);cursor:pointer;flex:1;padding:12px 16px;font-size:17px;font-weight:700}.quiz-screen{flex-direction:column;flex:1;min-height:0;display:flex}.quiz-screen [hidden]{display:none}.quiz-header{justify-content:space-between;padding:10px 14px;font-weight:700;display:flex}.quiz-screen .map-area{flex:0 55%;min-height:0}.answers{padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));grid-template-columns:1fr 1fr;gap:8px;display:grid}.answers button{cursor:pointer;background:var(--color-map-background);color:var(--color-sepia);border:2px solid var(--color-sepia);border-radius:var(--radius-button);font-size:14px;font-weight:700;font-family:var(--font-title);padding:9px 6px}.answers button.correct{background:var(--color-river-blue);color:var(--color-map-background)}.answers button.wrong{background:var(--color-brick-red);color:var(--color-map-background)}.feedback-pill{font-size:13px;font-weight:700;font-family:var(--font-title);border-radius:999px;margin:8px 12px;padding:4px 12px;display:inline-block}.feedback-pill.correct{background:var(--color-river-blue);color:var(--color-map-background)}.feedback-pill.wrong{background:var(--color-brick-red);color:var(--color-map-background)}.result-screen{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:32px 16px;display:flex;position:relative}.result-screen svg{width:120px}.badge{color:var(--color-brick-red);font-weight:700}.result-score{font-family:var(--font-title);margin:0;font-size:28px}.result-actions{gap:12px;margin-top:12px;display:flex}.result-actions button,.result-actions a{border-radius:var(--radius-button);border:2px solid var(--color-sepia);background:var(--color-map-background);color:var(--color-sepia);cursor:pointer;padding:10px 18px;font-weight:700;text-decoration:none}.storage-hint{opacity:.8;background:var(--color-map-surface);border-radius:var(--radius-card);padding:8px 12px;font-size:13px}.history-screen{flex-direction:column;flex:1;padding:12px 16px;display:flex}.game-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.game-row{background:var(--color-map-background);border:2px solid var(--color-sepia);border-radius:var(--radius-card);align-items:center;gap:12px;padding:8px 12px;display:flex}.game-row.best{border-color:var(--color-brick-red)}.best-badge{color:var(--color-brick-red);margin-left:auto;font-size:12px;font-weight:700}.empty-state{text-align:center;flex-direction:column;align-items:center;gap:8px;padding:24px;display:flex}.empty-state svg{width:100px}.attribution{opacity:.6;margin-top:auto;padding-top:12px;font-size:11px}.topbar{justify-content:space-between;align-items:center;padding:10px 14px 6px;display:flex}.wordmark{font-family:var(--font-title);color:var(--color-sepia);align-items:center;gap:7px;font-size:18px;font-weight:700;display:flex}.wordmark svg{width:32px;height:27px}.modes{border:2px solid var(--color-sepia);border-radius:999px;font-size:12px;font-weight:700;display:flex;overflow:hidden}.modes a{color:var(--color-sepia);padding:5px 12px;text-decoration:none}.modes a.active{background:var(--color-sepia);color:var(--color-paper)}.screen{flex-direction:column;flex:1;min-height:0;display:flex}