/* ---------- Tokens ---------- */
:root {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-2: #eceee9;
  --text: #16181b;
  --muted: #5d636b;
  --line: #d3d6d0;
  --tile-border: #c4c8c2;
  --tile-filled: #7c828a;
  --key: #d9dcd6;
  --key-text: #16181b;
  --correct: #4f9a5a;
  --present: #c9a227;
  --absent: #7a7f86;
  --on-color: #ffffff;
  --accent: #0065bd;   /* flag blue */
  --accent-2: #ef303e; /* flag red */
  --sea: #dce9f2;
  --land: #b9cbb0;
  --land-stroke: #8ea784;
  --shadow: 0 10px 40px rgba(0,0,0,.18);
  --radius: 14px;
  --tile: 52px;
  --tile-font: 26px;
  --gap: 5px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111315;
    --surface: #1a1d20;
    --surface-2: #23272b;
    --text: #eef0ee;
    --muted: #9aa2ab;
    --line: #30353a;
    --tile-border: #3a3f45;
    --tile-filled: #6b727a;
    --key: #3a3f45;
    --key-text: #eef0ee;
    --correct: #538d4e;
    --present: #b59f3b;
    --absent: #3a3f45;
    --sea: #1b2a36;
    --land: #3d5240;
    --land-stroke: #5b775d;
    --shadow: 0 10px 40px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111315; --surface: #1a1d20; --surface-2: #23272b; --text: #eef0ee; --muted: #9aa2ab;
  --line: #30353a; --tile-border: #3a3f45; --tile-filled: #6b727a; --key: #3a3f45; --key-text: #eef0ee;
  --correct: #538d4e; --present: #b59f3b; --absent: #3a3f45; --sea: #1b2a36; --land: #3d5240; --land-stroke: #5b775d;
  --shadow: 0 10px 40px rgba(0,0,0,.55); color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { display: block; }

.app {
  width: 100%;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Top bar ---------- */
.topbar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 56px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}
.topbar-side { display: flex; gap: 4px; }
.topbar-side.right { justify-content: flex-end; }
.brand { display: flex; align-items: center; gap: 12px; }
.title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.title span { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .title span { color: #5aa7ec; } }
.modes { display: flex; gap: 4px; }
.mode-btn {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.mode-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 10px;
  color: var(--text);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 24px; height: 24px; }

/* ---------- Stage layout ---------- */
.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 0;
}
.photo-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: #0d0f10;
  overflow: hidden;
  cursor: zoom-in;
}
.photo-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.photo-wrap img.loaded { opacity: 1; }
.photo-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.photo-loading.hidden { display: none; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.photo-expand {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; border-radius: 10px;
  border: 0; background: rgba(0,0,0,.45); color: #fff;
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.photo-expand svg { width: 20px; height: 20px; }
.photo-credit {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 12px 8px;
  font-size: 11px; color: rgba(255,255,255,.85);
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  pointer-events: none;
  text-align: right;
}
.photo-credit a { color: inherit; pointer-events: auto; }
.photo-error { position: absolute; inset: 0; display: grid; place-items: center; color: #ccc; font-size: 14px; padding: 20px; text-align: center; }

.play {
  flex: none;
  width: clamp(360px, 34vw, 500px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  border-left: 1px solid var(--line);
  padding: 16px 12px 12px;
}
.board-wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board { display: grid; gap: var(--gap); }
.row { display: grid; gap: var(--gap); grid-auto-flow: column; grid-auto-columns: var(--tile); }
.tile {
  width: var(--tile); height: var(--tile);
  display: inline-grid; place-items: center;
  border: 2px solid var(--tile-border);
  border-radius: 6px;
  font-weight: 800;
  font-size: var(--tile-font);
  text-transform: uppercase;
  user-select: none;
  line-height: 1;
}
.tile.filled { border-color: var(--tile-filled); animation: pop .1s ease; }
.tile.correct, .tile.present, .tile.absent { color: var(--on-color); border-color: transparent; }
.tile.correct { background: var(--correct); }
.tile.present { background: var(--present); }
.tile.absent  { background: var(--absent); }
.tile.flip { animation: flip .5s ease both; }
.row.shake { animation: shake .45s ease; }
.tile.win { animation: bounce .6s ease both; }
@keyframes pop { 50% { transform: scale(1.1); } }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes shake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 70% { transform: translateY(3px); } }

.hint {
  flex: none;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0 10px;
  min-height: 20px;
}
.hint b { color: var(--text); }

/* ---------- Keyboard ---------- */
.keyboard { flex: none; display: grid; gap: 7px; user-select: none; }
.kb-row { display: flex; gap: 5px; justify-content: center; }
.key {
  flex: 1 1 0;
  max-width: 44px;
  height: 54px;
  border: 0;
  border-radius: 6px;
  background: var(--key);
  color: var(--key-text);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  display: grid; place-items: center;
  transition: background .2s;
}
.key.wide { flex: 1.5 1 0; max-width: 68px; font-size: 12px; }
.key svg { width: 22px; height: 22px; }
.key:active { filter: brightness(.9); }
.key.correct { background: var(--correct); color: var(--on-color); }
.key.present { background: var(--present); color: var(--on-color); }
.key.absent  { background: var(--absent); color: var(--on-color); opacity: .75; }
.kb-spacer { flex: .5 1 0; max-width: 22px; }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed; top: 72px; left: 50%; transform: translateX(-50%);
  display: grid; gap: 8px; z-index: 50; pointer-events: none;
}
.toast {
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 8px;
  font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow);
  animation: toast-in .15s ease;
  transition: opacity .3s;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Modals ---------- */
.modal {
  border: 0;
  padding: 28px 24px 24px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.modal::backdrop { background: rgba(10,12,14,.55); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-in .22s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-close {
  outline-offset: -2px;
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; font-size: 26px; line-height: 1; color: var(--muted);
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-title { margin: 0 0 16px; font-size: 20px; font-weight: 800; text-align: center; }

.help p { margin: 0 0 12px; line-height: 1.5; }
.help ul { margin: 0 0 14px; padding-left: 20px; line-height: 1.55; }
.help-sub { color: var(--muted); font-size: 14px; }
.example { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0 2px; margin-bottom: 14px; }
.ex-row { display: flex; gap: 4px; margin-bottom: 6px; --tile: 36px; --tile-font: 18px; }
.ex-row .tile { width: 36px; height: 36px; font-size: 18px; }
.example p { font-size: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700; font-size: 15px;
  background: var(--surface-2); color: var(--text);
}
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--correct); color: #fff; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.wide { width: 100%; }

/* ---------- Result ---------- */
.result { text-align: center; }
.result-kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--correct); }
.result-kicker.lost { color: var(--accent-2); }
.result-name { margin: 4px 0 2px; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.result-sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  text-align: left;
}
.map-card {
  margin: 0;
  background: var(--sea);
  border-radius: var(--radius);
  padding: 10px;
  display: grid; place-items: center;
}
.map { width: 100%; height: auto; max-height: 340px; }
.map .land { fill: var(--land); stroke: var(--land-stroke); stroke-width: 1.2; stroke-linejoin: round; }
.map .guess-dot { fill: var(--absent); stroke: var(--surface); stroke-width: 2; }
.map .pin-pulse { fill: var(--accent-2); opacity: .35; transform-origin: center; transform-box: fill-box; animation: pulse 1.8s ease-out infinite; }
.map .pin { fill: var(--accent-2); stroke: #fff; stroke-width: 3; }
.map .pin-label { font: 800 30px Inter, system-ui, sans-serif; fill: var(--text); paint-order: stroke; stroke: var(--sea); stroke-width: 6px; stroke-linejoin: round; }
.map .town-dot { fill: var(--text); opacity: .55; }
.map .town-label { font: 600 22px Inter, system-ui, sans-serif; fill: var(--muted); }
@keyframes pulse { from { transform: scale(.6); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }

.facts { display: grid; gap: 8px; align-content: start; }
.fact {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 10px 14px;
}
.fact .k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fact .v { font-size: 20px; font-weight: 800; margin-top: 2px; }
.fact .v small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }

.trivia {
  margin-top: 16px; text-align: left;
  border-left: 4px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 12px 12px 0;
  padding: 12px 14px;
  font-size: 14px; line-height: 1.5;
}
.trivia h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.trivia p { margin: 0 0 6px; }

.result-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 20px 0 6px; flex-wrap: wrap;
}
.next { display: grid; text-align: right; font-size: 12px; color: var(--muted); }
.next strong { font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.next.center { text-align: center; margin-top: 18px; }

.stats-block { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.stat-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.stat-nums .n { font-size: 28px; font-weight: 800; }
.stat-nums .l { font-size: 11px; color: var(--muted); line-height: 1.25; }
.dist { margin-top: 16px; display: grid; gap: 4px; text-align: left; }
.dist h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.dist-row { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; }
.dist-bar {
  background: var(--absent); color: #fff;
  min-width: 26px; padding: 3px 8px; border-radius: 4px;
  text-align: right; font-size: 12px;
  transition: width .6s ease;
}
.dist-bar.hl { background: var(--correct); }
.result-credit { margin: 16px 0 0; font-size: 11px; color: var(--muted); }
.result-credit a { color: inherit; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.94);
  display: grid; place-items: center;
  overflow: auto;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.modal-close.light { position: fixed; color: #fff; background: rgba(255,255,255,.12); top: calc(12px + env(safe-area-inset-top)); right: 12px; }

/* ---------- Mobile / narrow ---------- */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .stage { flex-direction: column; }
  .photo-wrap { flex: 1 1 auto; min-height: 30vh; }
  .play {
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 8px 6px 8px;
  }
  .board-wrap { flex: none; }
  .hint { padding: 5px 0 6px; font-size: 12px; min-height: 0; }
  .key { height: 48px; max-width: none; }
  .key.wide { max-width: none; }
  .kb-row { gap: 4px; }
  .keyboard { gap: 6px; }
  .topbar { height: 50px; padding: 0 6px; }
  .title { font-size: 19px; }
  .brand { gap: 8px; }
}
@media (max-width: 380px) {
  .title { font-size: 17px; }
  .mode-btn { padding: 3px 9px; font-size: 12px; }
}
@media (max-width: 560px) {
  .modal { padding: 24px 16px 18px; }
  .result-name { font-size: 28px; }
  .result-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .map { max-height: 250px; }
  .map-card { padding: 6px; }
  .fact .v { font-size: 17px; }
  .fact .v small { display: block; margin: 2px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.modal-close:focus:not(:focus-visible) { outline: none; }

/* ---------- Timed mode ---------- */
body.mode-timed .board-wrap, body.mode-timed .hint, body.mode-timed .keyboard { display: none; }
.timed { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.timed[hidden] { display: none; }
.timed-intro { text-align: center; padding: 8px 12px; }
.timed-intro[hidden], .timed-play[hidden] { display: none; }
.timed-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 700;
}
.timed-intro h2 { margin: 14px 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.timed-intro p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
.btn.big { padding: 15px 22px; font-size: 17px; }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn.ghost:hover { color: var(--text); }
.timed-best { margin-top: 14px !important; font-size: 13px; }
.timed-play { display: grid; gap: 14px; padding: 4px 4px; }
.timed-top { display: flex; align-items: baseline; justify-content: space-between; }
.timer { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.timer.low { color: var(--accent-2); animation: pulse-t 1s ease-in-out infinite; }
@keyframes pulse-t { 50% { opacity: .55; } }
.timed-score { color: var(--muted); font-size: 15px; }
.timed-score strong { color: var(--text); font-size: 26px; }
.timed-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.timed-progress span { height: 8px; border-radius: 4px; background: var(--tile-border); }
.timed-progress span.cur { background: var(--text); }
.timed-progress span.correct { background: var(--correct); }
.timed-progress span.skipped, .timed-progress span.missed { background: var(--absent); opacity: .7; }
.timed-form { display: flex; gap: 8px; }
.timed-form input {
  flex: 1; min-width: 0;
  font: 700 20px Inter, system-ui, sans-serif;
  padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--tile-border); background: var(--surface); color: var(--text);
  outline: none;
}
.timed-form input:focus { border-color: var(--accent); }
.timed-form.shake { animation: shake .45s ease; }
.timed-form.ok input { border-color: var(--correct); background: color-mix(in srgb, var(--correct) 15%, var(--surface)); }
.timed-feedback { min-height: 22px; font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; }
.timed-feedback.good { color: var(--correct); }
.timed-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.timed-list li { display: grid; grid-template-columns: 22px 56px 1fr auto; gap: 10px; align-items: center; background: var(--surface-2); border-radius: 10px; padding: 6px 10px 6px 8px; }
.timed-list img { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; background: #222; }
.timed-list .n { font-weight: 800; }
.timed-list .isl { font-size: 12px; color: var(--muted); }
.timed-list .st { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.timed-list .st.correct { background: var(--correct); color: #fff; }
.timed-list .st.skipped, .timed-list .st.missed { background: var(--absent); color: #fff; }
.timed-list .num { color: var(--muted); font-weight: 700; font-size: 13px; text-align: right; }
.photo-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.55); font-weight: 700; font-size: 18px; text-align: center; padding: 20px; }
.photo-flash { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(40,110,55,.55); color: #fff; font-size: 40px; font-weight: 800; pointer-events: none; animation: flash .8s ease both; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-timed .play { padding: 10px 12px 12px; }
  .timed { flex: none; }
  .timed-play { gap: 10px; }
  .timer { font-size: 34px; }
  .timed-intro h2 { font-size: 22px; margin: 10px 0 6px; }
  .timed-intro p { margin-bottom: 14px; font-size: 14px; }
}
.photo-wrap img:not([src]) { display: none; }
body.mode-timed .photo-expand { display: none; }
body.mode-timed.timed-running .photo-expand { display: grid; }
.photo-placeholder { white-space: pre-line; }
@media (max-width: 420px) { .title { font-size: 16px; } .brand { gap: 6px; } .mode-btn { padding: 3px 9px; font-size: 12px; } }

@media (max-width: 560px) { .facts .fact:first-child { grid-column: 1 / -1; } }
.trivia.fact { border-left-color: var(--accent-2); margin-top: 10px; }

/* ---------- Map mode ---------- */
body.mode-map .board-wrap, body.mode-map .hint, body.mode-map .keyboard { display: none; }
body.mode-map .play { width: clamp(380px, 40vw, 620px); }
.mapgame { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.mapgame[hidden], .map-play[hidden], #map-intro[hidden] { display: none; }
.map-play { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.map-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.map-q { font-size: 20px; font-weight: 600; }
.map-q strong { font-weight: 800; }
.map-meta { color: var(--muted); font-size: 14px; white-space: nowrap; }
.map-meta strong { color: var(--text); }
.map-board { position: relative; flex: 1; min-height: 0; background: var(--sea); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.map-board svg { width: 100%; height: 100%; display: block; }
.map-board.locked { cursor: default; }
.map-board .land { fill: var(--land); stroke: var(--land-stroke); stroke-width: 1.2; stroke-linejoin: round; }
.map-board .guess { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.map-board .truth { fill: var(--accent-2); stroke: #fff; stroke-width: 3; }
.map-board .line { stroke: var(--text); stroke-width: 2.5; stroke-dasharray: 7 6; opacity: .7; }
.map-board .lbl { font: 800 26px Inter, system-ui, sans-serif; fill: var(--text); paint-order: stroke; stroke: var(--sea); stroke-width: 6px; stroke-linejoin: round; }
.map-feedback { text-align: center; font-size: 15px; color: var(--muted); min-height: 22px; }
.map-feedback b { color: var(--text); }
.map-feedback .pts { color: var(--correct); font-weight: 800; }
.timed-list .pts { font-weight: 800; font-size: 13px; text-align: right; white-space: nowrap; }
.timed-list .pts small { display: block; color: var(--muted); font-weight: 600; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-map.map-running .photo-wrap { flex: 0 0 30vh; min-height: 0; }
  body.mode-map .play { width: 100%; flex: 1; min-height: 0; padding: 8px 10px 10px; }
  body.mode-map .mapgame { flex: 1; }
  .map-q { font-size: 17px; }
}
.map-board.dragging { cursor: grabbing; }
.map-board .land { stroke-width: 1.2px; }
.map-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; }
.map-zoom button {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 22px; font-weight: 700; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: pointer;
}
.map-zoom button[hidden] { display: none; }

/* ---------- Start page ---------- */
.title-btn { all: unset; cursor: pointer; }
.title-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
body.on-home { overflow: hidden; }
body.on-home .app { display: none; }
.home {
  position: fixed; inset: 0; z-index: 5;
  color: #eef3f6;
  background: #07131f;
  overflow-x: hidden; overflow-y: auto;
  font-family: Inter, system-ui, sans-serif;
}
.home[hidden] { display: none; }
.home-sea {
  position: fixed; inset: -20%;
  background:
    radial-gradient(60% 50% at 75% 30%, rgba(40,110,150,.45), transparent 70%),
    radial-gradient(50% 45% at 15% 85%, rgba(20,80,120,.45), transparent 70%),
    radial-gradient(40% 40% at 50% 50%, rgba(10,40,70,.6), transparent 80%),
    linear-gradient(160deg, #0a1d2e 0%, #081725 45%, #050e18 100%);
  animation: sea-drift 26s ease-in-out infinite alternate;
}
@keyframes sea-drift { to { transform: translate3d(3%, -2%, 0) scale(1.05); } }
.home-map {
  position: fixed; right: max(2vw, 10px); top: 50%;
  height: min(96vh, 1000px); width: auto; aspect-ratio: 570 / 830;
  transform: translateY(-50%);
  opacity: .95; pointer-events: none;
}
.home-map .land { fill: url(#land-grad); stroke: rgba(170,215,190,.35); stroke-width: 1px; }
.home-map .v { fill: #ffd58a; animation: twinkle 3.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.home-inner {
  position: relative; z-index: 1;
  min-height: 100%;
  max-width: 1180px; margin: 0 auto;
  padding: max(40px, 7vh) 28px 28px;
  display: flex; flex-direction: column; gap: 34px;
}
.home-head { max-width: 560px; }
.home-flag { width: 46px; height: 32px; border-radius: 5px; background: #fff; position: relative; overflow: hidden; margin-bottom: 18px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.home-flag::before, .home-flag::after, .home-flag i::before, .home-flag i::after { content: ""; position: absolute; }
.home-flag::before { left: 12px; top: 0; bottom: 0; width: 10px; background: #0065bd; }
.home-flag::after { top: 11px; left: 0; right: 0; height: 10px; background: #0065bd; }
.home-flag i::before { left: 15px; top: 0; bottom: 0; width: 4px; background: #ef303e; z-index: 1; }
.home-flag i::after { top: 14px; left: 0; right: 0; height: 4px; background: #ef303e; z-index: 1; }
.home-title {
  margin: 0; font-family: Outfit, Inter, sans-serif; font-weight: 800;
  font-size: clamp(46px, 8vw, 92px); line-height: .95; letter-spacing: -.035em;
}
.home-title span { background: linear-gradient(90deg, #7fc2ff, #bfe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-sub { margin: 16px 0 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: rgba(230,240,246,.78); }
.home-sub b { color: #fff; }

.home-modes { display: grid; gap: 14px; max-width: 620px; }
.mode-card {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mode-card:hover, .mode-card:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.mode-card:focus-visible { outline: 2px solid #7fc2ff; outline-offset: 3px; }
.mc-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #eef3f6; }
.mc-icon svg { width: 34px; height: 34px; }
.mc-body { display: grid; gap: 3px; min-width: 0; }
.mc-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fd19a; }
.mc-title { font-family: Outfit, Inter, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.mc-text { font-size: 14px; line-height: 1.45; color: rgba(230,240,246,.72); }
.mc-status { font-size: 13px; font-weight: 600; color: #ffd58a; min-height: 0; }
.mc-status:empty { display: none; }
.mc-go {
  font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 999px;
  background: rgba(255,255,255,.12); white-space: nowrap;
}
.mode-card.daily {
  grid-template-columns: 64px 1fr auto; padding: 24px 24px;
  background: linear-gradient(135deg, rgba(83,160,98,.30), rgba(0,101,189,.22));
  border-color: rgba(140,220,160,.35);
}
.mode-card.daily:hover { background: linear-gradient(135deg, rgba(83,160,98,.40), rgba(0,101,189,.30)); }
.mode-card.daily .mc-icon { width: 64px; height: 64px; background: rgba(255,255,255,.12); }
.mode-card.daily .mc-icon svg { width: 40px; height: 40px; }
.mode-card.daily .mc-title { font-size: 26px; }
.mode-card.daily .mc-go { background: #53a062; color: #fff; padding: 12px 20px; font-size: 15px; box-shadow: 0 6px 18px rgba(40,120,60,.45); }
.mode-card.daily.done .mc-go { background: rgba(255,255,255,.16); box-shadow: none; }

.home-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: rgba(230,240,246,.6); }
.home-foot b { color: #fff; font-variant-numeric: tabular-nums; }
.linkish { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: rgba(230,240,246,.85); }
.linkish:hover { color: #fff; }

@media (max-width: 860px) {
  .home-map { right: -30vw; height: 100vh; opacity: .45; }
  .home-inner { padding: 36px 16px 20px; gap: 26px; }
  .mode-card { grid-template-columns: 48px 1fr; padding: 16px; gap: 14px; }
  .mode-card .mc-go { grid-column: 2; justify-self: start; padding: 8px 14px; }
  .mode-card.daily { grid-template-columns: 52px 1fr; padding: 18px 16px; }
  .mode-card.daily .mc-icon, .mc-icon { width: 48px; height: 48px; border-radius: 14px; }
  .mode-card.daily .mc-icon svg, .mc-icon svg { width: 30px; height: 30px; }
  .mode-card.daily .mc-title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .home-sea, .home-map .v { animation: none; } }

/* ---------- Islands mode ---------- */
body.mode-islands .board-wrap, body.mode-islands .hint, body.mode-islands .keyboard, body.mode-islands .photo-wrap { display: none; }
body.mode-islands .play { width: 100%; flex: 1; min-height: 0; border-left: 0; padding: 12px 16px 14px; }
.islandgame { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; width: 100%; max-width: 1100px; margin: 0 auto; }
.islandgame[hidden] { display: none; }
.isl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.isl-q { font-size: 22px; font-weight: 600; }
.isl-q b { font-family: Outfit, Inter, sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.01em; }
.isl-meta { display: flex; gap: 14px; align-items: baseline; color: var(--muted); font-weight: 600; }
.isl-timer { font-size: 26px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.isl-board { flex: 1; }
.isl-board .island { fill: var(--land); stroke: var(--land-stroke); stroke-width: 1.2px; cursor: pointer; transition: fill .15s; }
.isl-board .hit { fill: none; stroke: transparent; stroke-width: 16px; pointer-events: stroke; cursor: pointer; }
.isl-board .islet { fill: var(--land); opacity: .55; pointer-events: none; }
@media (hover: hover) { .isl-board.playing .island:not(.correct):not(.missed):hover { fill: color-mix(in srgb, var(--land) 70%, #fff); } }
.isl-board .island.correct { fill: #53a062; stroke: #2f6b3a; }
.isl-board .island.missed { fill: #d9534f; stroke: #8f2723; }
.isl-board .island.wrong { fill: #ef6b66; animation: isl-shake .35s ease; }
@keyframes isl-shake { 25% { opacity: .6; } 75% { opacity: .9; } }
.isl-board .isl-label { font-family: Inter, system-ui, sans-serif; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-linejoin: round; pointer-events: none; text-anchor: middle; }
.isl-intro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 32px)); text-align: center;
  background: var(--surface); border-radius: 18px; padding: 24px 22px; box-shadow: var(--shadow);
}
.isl-intro[hidden] { display: none; }
.isl-intro h2 { margin: 0 0 8px; font-family: Outfit, Inter, sans-serif; font-size: 28px; }
.isl-intro p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; font-size: 15px; }
.isl-intro .g { color: #3f8a4a; } .isl-intro .r { color: #d9534f; }
.isl-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 6px; }
.isl-chips span { padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; }
.isl-chips .ok { background: #53a062; } .isl-chips .late { background: #c9a227; } .isl-chips .miss { background: #d9534f; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-islands .play { padding: 8px 10px 10px; }
  .isl-q { font-size: 17px; } .isl-q b { font-size: 22px; }
  .isl-timer { font-size: 20px; }
}
@media (max-width: 600px) { .modes { display: none; } }

/* ---------- Mountains mode (higher or lower) ---------- */
body.mode-mountains .board-wrap, body.mode-mountains .hint, body.mode-mountains .keyboard, body.mode-mountains .photo-wrap { display: none; }
body.mode-mountains .play { width: 100%; flex: 1; min-height: 0; border-left: 0; padding: 12px 16px 14px; }
.mtngame { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; width: 100%; max-width: 1200px; margin: 0 auto; }
.mtngame[hidden], #mtn-intro[hidden] { display: none; }
.mtn-board { position: relative; flex: 1; min-height: 0; border-radius: var(--radius); background: linear-gradient(180deg, #1c3446, #2c4d3e); overflow: hidden; }
.mtn-cards { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
.mtn-vs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--text); font: 800 17px Outfit, Inter, sans-serif; box-shadow: 0 6px 24px rgba(0,0,0,.35);
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.mtn-board.playing .mtn-vs { opacity: 1; }
.mtn-card {
  all: unset; box-sizing: border-box; position: relative; overflow: hidden; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, hsl(calc(200deg + var(--hue, 0) * 1deg) 40% 30%), hsl(calc(185deg + var(--hue, 0) * 1deg) 30% 44%)); color: #fff; min-height: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,.25); transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.mtn-card:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
@media (hover: hover) { .mtn-board.playing .mtn-card:not(.revealed):hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.4); } }
.mtn-card.revealed { cursor: default; }
.mtn-art { position: absolute; inset: 0; }
.mtn-art svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 75%; }
.mtn-art .r1 { fill: hsl(calc(150deg + var(--hue, 0) * 1deg) 14% 52%); }
.mtn-art .r2 { fill: hsl(calc(125deg + var(--hue, 0) * 1deg) 28% 27%); }
.mtn-art .snow { fill: rgba(255,255,255,.75); }
.mtn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mtn-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.78) 100%); }
.mtn-mini {
  position: absolute; top: 10px; right: 10px; width: clamp(80px, 18%, 132px); height: auto; aspect-ratio: 570 / 830;
  background: rgba(20,40,55,.62); border-radius: 10px; padding: 5px; box-sizing: border-box; backdrop-filter: blur(3px);
}
.mtn-mini .land { fill: #cfe0c4; stroke: none; }
.mtn-mini .pin { fill: var(--accent-2); stroke: #fff; stroke-width: 9; }
.mtn-mini .pin-pulse { fill: var(--accent-2); opacity: .45; transform-origin: center; transform-box: fill-box; animation: pulse 1.8s ease-out infinite; }
.mtn-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px 26px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.mtn-name { font: 800 clamp(24px, 3vw, 38px)/1.08 Outfit, Inter, sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mtn-where { font-size: 15px; font-weight: 600; opacity: .9; }
.mtn-h { margin-top: 8px; font: 800 clamp(26px, 3.4vw, 44px)/1 Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.mtn-h .mtn-num { display: inline-block; min-width: 1ch; }
.mtn-credit { position: absolute; left: 18px; right: 18px; bottom: 7px; font-size: 10.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtn-mark { position: absolute; top: 10px; left: 10px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 800 26px Inter, sans-serif; color: #fff; transform: scale(0); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.mtn-card.revealed.taller .mtn-h { color: #9be3a6; }
.mtn-card.chosen.right { box-shadow: 0 0 0 4px #53a062 inset, 0 6px 24px rgba(0,0,0,.35); }
.mtn-card.chosen.wrong { box-shadow: 0 0 0 4px #d9534f inset, 0 6px 24px rgba(0,0,0,.35); }
.mtn-card.chosen.right .mtn-mark { background: #53a062; transform: scale(1); }
.mtn-card.chosen.right .mtn-mark::after { content: "✓"; }
.mtn-card.chosen.wrong .mtn-mark { background: #d9534f; transform: scale(1); }
.mtn-card.chosen.wrong .mtn-mark::after { content: "✗"; }
.mtn-card.enter { animation: mtn-in .45s ease both; }
.mtn-card.enter2 { animation-delay: .08s; }
.mtn-card.slide { animation: mtn-slide .45s ease both; }
@keyframes mtn-in { from { opacity: 0; transform: translateX(40px) scale(.97); } }
@keyframes mtn-slide { from { transform: translateX(calc(100% + 10px)); } }
.map-feedback .bad { color: #d9534f; font-weight: 800; }
.mtn-list li { grid-template-columns: 1fr auto; }
.mtn-list small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.mtn-list { max-height: 34vh; overflow: auto; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-mountains .play { padding: 8px 10px 10px; }
  .mtn-cards { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 8px; padding: 8px; }
  .mtn-name { font-size: 24px; } .mtn-h { font-size: 26px; margin-top: 4px; } .mtn-where { font-size: 13px; }
  .mtn-info { padding: 10px 14px 22px; }
  .mtn-credit { left: 14px; bottom: 5px; }
  .mtn-mini { width: 66px; top: 8px; right: 8px; }
  .mtn-vs { width: 44px; height: 44px; font-size: 15px; }
  @keyframes mtn-in { from { opacity: 0; transform: translateY(30px) scale(.97); } }
  @keyframes mtn-slide { from { transform: translateY(calc(100% + 8px)); } }
}
@media (prefers-reduced-motion: reduce) { .mtn-card.enter, .mtn-card.slide { animation: none; } }

/* ---------- Language switch ---------- */
.topbar-side.right { align-items: center; gap: 6px; }
.lang-switch { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.lang-switch button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: .04em;
  padding: 6px 9px; border-radius: 999px; min-width: 34px;
}
.lang-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.home-lang { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(8,23,37,.55); border-color: rgba(255,255,255,.18); backdrop-filter: blur(4px); }
.home-lang button { color: rgba(230,240,246,.75); }
.home-lang button[aria-pressed="true"] { background: #eef3f6; color: #0a1d2e; }
@media (max-width: 600px) { .lang-switch button { padding: 6px 7px; min-width: 30px; } }

/* ---------- Birds mode ---------- */
body.mode-birds .board-wrap, body.mode-birds .hint, body.mode-birds .keyboard, body.mode-birds .photo-wrap { display: none; }
body.mode-birds .play { width: 100%; flex: 1; min-height: 0; border-left: 0; padding: 12px 16px 12px; }
.birdgame { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; width: 100%; max-width: 1200px; margin: 0 auto; }
.birdgame[hidden], .bird-setup[hidden], .bird-stage[hidden], .bird-foot[hidden] { display: none; }
#bird-level { font-size: 14px; }
.bird-setup { margin: auto; width: min(640px, 100%); background: var(--surface); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; text-align: center; overflow: auto; }
.bird-intro { margin: 0; color: var(--muted); line-height: 1.5; }
.bird-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bird-choice.three { grid-template-columns: repeat(3, 1fr); }
.bird-opt { all: unset; box-sizing: border-box; cursor: pointer; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; text-align: left; transition: border-color .15s, background .15s; }
.bird-opt b { font: 800 17px Outfit, Inter, sans-serif; }
.bird-opt span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.bird-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.bird-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.bird-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bird-setup .timed-best { margin: 0; }

.bird-stage { flex: 1; min-height: 0; display: grid; gap: 12px; overflow: auto; align-content: start; }
.bird-stage.find { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.35fr); }
.bird-stage.name { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
.bird-main, .bird-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.bird-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bird-pic { all: unset; box-sizing: border-box; position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; cursor: pointer; background: #22313c; box-shadow: 0 3px 14px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s, opacity .2s; }
.bird-pic:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .bird-pic:not(.done):hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.28); } }
.bird-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bird-num { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font: 800 14px Inter, sans-serif; }
.bird-pic .bird-credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 8px 4px; font-size: 10px; color: #fff; opacity: .85; background: linear-gradient(transparent, rgba(0,0,0,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bird-pic .bird-credit a { color: inherit; }
.bird-cap { position: absolute; left: 8px; right: 8px; top: 40px; font: 800 18px/1.15 Outfit, Inter, sans-serif; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.bird-pic.right { box-shadow: 0 0 0 4px #53a062, 0 6px 20px rgba(0,0,0,.25); cursor: default; }
.bird-pic.wrong { box-shadow: 0 0 0 4px #d9534f, 0 6px 20px rgba(0,0,0,.25); cursor: default; }
.bird-pic.dim { opacity: .45; cursor: default; }
.bird-pic.right .bird-num { background: #53a062; } .bird-pic.wrong .bird-num { background: #d9534f; }

.bird-photo { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #1c2831; aspect-ratio: 4 / 3; max-height: calc(100vh - 230px); width: 100%; }
.bird-photo .bird-img { object-fit: contain; }
.bird-photo .bird-credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 5px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.bird-photo .bird-credit a { color: inherit; }
.bird-names { display: grid; gap: 8px; }
.bird-name { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: 700 19px/1.2 Outfit, Inter, sans-serif; transition: border-color .15s, background .15s, opacity .2s; }
.bird-name .bird-num { position: static; flex: none; background: var(--key); color: var(--key-text); }
@media (hover: hover) { .bird-name:not(:disabled):hover { border-color: var(--accent); } }
.bird-name:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bird-name.right { border-color: #53a062; background: color-mix(in srgb, #53a062 16%, var(--surface)); cursor: default; }
.bird-name.right .bird-num { background: #53a062; color: #fff; }
.bird-name.wrong { border-color: #d9534f; background: color-mix(in srgb, #d9534f 14%, var(--surface)); cursor: default; }
.bird-name.wrong .bird-num { background: #d9534f; color: #fff; }
.bird-name.dim { opacity: .5; cursor: default; }
.bird-after:empty { display: none; }

.bird-info { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.bird-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bird-head h3 { margin: 0; font: 800 26px/1.1 Outfit, Inter, sans-serif; letter-spacing: -.01em; }
.bird-tag { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: #fff; }
.bird-tag.t1 { background: #4f9a5a; } .bird-tag.t2 { background: #c28a1f; } .bird-tag.t3 { background: #b24a7c; }
.bird-namelist, .bird-facts { margin: 0; display: grid; gap: 4px 12px; font-size: 14px; }
.bird-namelist .bn-row, .bird-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.bird-namelist dt, .bird-facts dt { color: var(--muted); font-weight: 600; }
.bird-namelist dd, .bird-facts dd { margin: 0; }
.bird-namelist dd.sci { font-style: italic; }
.bird-namelist small { color: var(--muted); }
.bird-facts { border-top: 1px solid var(--line); padding-top: 8px; }
.bird-mapbox { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.bird-map { width: 100%; max-height: 300px; background: var(--sea); border-radius: 10px; padding: 6px; box-sizing: border-box; }
.bird-map .land { fill: var(--land); stroke: var(--land-stroke); stroke-width: 1.2px; }
.bird-map .heat circle { fill: #e2533c; fill-opacity: calc(.14 + var(--l) * .06); stroke: none; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bird-map .heat circle { fill: #ff7a5c; mix-blend-mode: screen; } }
:root[data-theme="dark"] .bird-map .heat circle { fill: #ff7a5c; mix-blend-mode: screen; }
.bird-mapbox figcaption { font-size: 12px; color: var(--muted); }

.bird-foot { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; flex-wrap: wrap; }
.bird-foot .map-feedback { font-size: 16px; }
#btn-bird-next[hidden] { display: none; }

.bird-reslist { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; max-height: 40vh; overflow: auto; text-align: left; }
.bird-reslist li { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 4px; border-radius: 10px; }
.bird-reslist li.bad { background: color-mix(in srgb, #d9534f 9%, transparent); }
.bird-reslist .br-img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; }
.bird-reslist span { display: flex; flex-direction: column; font-size: 14px; }
.bird-reslist small { color: var(--muted); font-size: 12px; }
.bird-reslist .br-you { color: #d9534f; }
.bird-reslist i { font-style: normal; font-weight: 800; font-size: 18px; color: #53a062; padding-right: 6px; }
.bird-reslist li.bad i { color: #d9534f; }
.stats-mode { margin: 0 0 6px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }

@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-birds .play { padding: 8px 10px 10px; }
  .bird-stage.find, .bird-stage.name { grid-template-columns: 1fr; }
  .bird-stage.find .bird-side { order: -1; }
  .bird-pics { gap: 8px; }
  .bird-cap { font-size: 15px; top: 36px; }
  .bird-photo { max-height: 34vh; aspect-ratio: auto; height: 34vh; }
  .bird-names { grid-template-columns: 1fr 1fr; gap: 6px; }
  .bird-name { padding: 10px 10px; font-size: 16px; gap: 8px; }
  .bird-name .bird-num { width: 22px; height: 22px; font-size: 12px; }
  .birdgame .isl-top { gap: 2px 12px; }
  #bird-level { font-size: 12px; }
  .bird-choice.three { grid-template-columns: 1fr; }
  .bird-setup { padding: 16px; }
  .bird-head h3 { font-size: 22px; }
  .bird-namelist .bn-row, .bird-facts > div { grid-template-columns: 96px 1fr; }
  .bird-map { max-height: 220px; }
}

/* Birds: on a computer everything fits on the screen without scrolling */
@media (min-width: 861px) and (min-aspect-ratio: 1/1) {
  .bird-stage { overflow: hidden; grid-template-rows: minmax(0, 1fr); }
  .bird-main, .bird-side { min-height: 0; }
  .bird-pics { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .bird-pic { aspect-ratio: auto; min-height: 0; }
  .bird-main > .bird-info, .bird-after > .bird-info { flex: 1; min-height: 0; overflow: auto; }
  .bird-after { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .bird-mapbox { flex: 1; min-height: 110px; }
  .bird-map { flex: 1; min-height: 0; max-height: none; height: 100%; }
  .bird-photo { height: 100%; max-height: none; aspect-ratio: auto; }
  .bird-stage.name .bird-names { gap: 6px; }
  .bird-stage.name .bird-name { padding: 10px 12px; }
  .bird-info { gap: 8px; padding: 12px 14px; }
}

/* ---------- Explore (Fróðleikur) ---------- */
body.mode-info .board-wrap, body.mode-info .hint, body.mode-info .keyboard, body.mode-info .photo-wrap { display: none; }
body.mode-info .play { width: 100%; flex: 1; min-height: 0; border-left: 0; padding: 10px 16px 12px; }
.infogame { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; width: 100%; max-width: 1320px; margin: 0 auto; }
.infogame[hidden] { display: none; }
.info-tabs { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; align-self: center; }
.info-tab { all: unset; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font: 700 15px Inter, system-ui, sans-serif; color: var(--muted); transition: background .15s, color .15s; }
.info-tab:hover { color: var(--text); }
.info-tab.on { background: var(--text); color: var(--bg); }
.info-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ti::before { font-size: 17px; }
.ti.islands::before { content: "🏝️"; } .ti.villages::before { content: "🏘️"; } .ti.mountains::before { content: "⛰️"; } .ti.birds::before { content: "🐦"; }
.info-body { flex: 1; min-height: 0; overflow: auto; }
.info-body.islands, .info-body.villages, .info-body.mountains { overflow: hidden; }
.info-mapwrap { position: relative; background: var(--sea); border-radius: var(--radius); overflow: hidden; min-height: 0; }
.info-map { width: 100%; height: 100%; display: block; }
.info-map .land { fill: url(#info-land); stroke: none; }
.info-map.isl-map-info .island { fill: var(--land); stroke: var(--land-stroke); stroke-width: 1.2px; cursor: pointer; transition: fill .15s; }
.info-map.isl-map-info .hit { fill: none; stroke: transparent; stroke-width: 16px; pointer-events: stroke; cursor: pointer; }
.info-map.isl-map-info .islet { fill: var(--land); opacity: .55; pointer-events: none; }
@media (hover: hover) { .info-map.isl-map-info .island:hover { fill: color-mix(in srgb, var(--land) 70%, #fff); } }
.info-map.isl-map-info .island.sel { fill: var(--accent); stroke: color-mix(in srgb, var(--accent) 60%, #000); }
.isl-names text { font: 800 15px Inter, system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 4px; stroke-linejoin: round; text-anchor: middle; pointer-events: none; }
.isl-names text.small { font-size: 11px; stroke-width: 3px; }

.info-isl { height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; }
.info-isl .info-mapwrap { height: 100%; }
.info-panel { min-height: 0; overflow: auto; }
.info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.info-card h2 { margin: 0 0 6px; font: 800 30px/1.1 Outfit, Inter, sans-serif; }
.info-card h3 { margin: 18px 0 6px; font: 800 17px Outfit, Inter, sans-serif; }
.info-card p { margin: 0 0 8px; line-height: 1.5; }
.info-lead { color: var(--muted); }
.info-back { font-size: 14px; margin-bottom: 4px; }
.info-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 12px 0 0; }
.info-stat { background: color-mix(in srgb, var(--text) 5%, var(--surface)); border-radius: 10px; padding: 9px 12px; }
.info-stat dt { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.info-stat dd { margin: 2px 0 0; font: 700 18px/1.25 Inter, system-ui, sans-serif; }
.info-stat dd small { display: block; font: 500 12.5px Inter, system-ui, sans-serif; color: var(--muted); margin-top: 1px; }
.info-stat a, .info-card a, .info-dlg a { color: var(--accent); text-decoration: none; }
.info-stat a:hover, .info-card a:hover, .info-dlg a:hover { text-decoration: underline; }
.info-list { margin: 0; padding-left: 20px; line-height: 1.5; }
.info-list li { margin: 0 0 6px; }
.info-src { font-size: 12px; color: var(--muted); margin-top: 14px !important; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; gap: 5px; align-items: baseline; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.chip small { color: var(--muted); font-weight: 500; font-size: 12px; }
.info-photo { margin: 10px 0 0; position: relative; border-radius: 12px; overflow: hidden; background: #1c2831; }
.info-photo img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.info-photo.big img { aspect-ratio: 4 / 3; }
.info-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 5px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.info-photo figcaption a { color: #fff; }
.info-photo.broken img { visibility: hidden; }

.info-points { height: 100%; display: flex; flex-direction: column; gap: 8px; }
.info-points .info-mapwrap { flex: 1; }
.info-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.info-count { color: var(--muted); font-weight: 600; font-size: 14px; }
.info-hint { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.info-search { position: relative; width: min(340px, 100%); }
.info-search input { width: 100%; box-sizing: border-box; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 15px Inter, system-ui, sans-serif; }
.info-hits { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.info-hits button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; font-weight: 600; }
.info-hits button:hover, .info-hits button:focus-visible { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.info-hits small { color: var(--muted); font-weight: 500; }
.info-hits .none { padding: 8px 10px; color: var(--muted); }
.info-map.pts .pt { cursor: pointer; }
.info-map.pts .hit { fill: transparent; }
.info-map.pts .dot { fill: #6cc3ff; stroke: #0d2433; stroke-width: 1.2px; transition: r .12s; }
.info-map.pts .tri { fill: #f0a646; stroke: #5a3508; stroke-width: 1.1px; stroke-linejoin: round; }
.info-map.pts .pt:hover .dot { fill: #fff; r: 6px; }
.info-map.pts .pt:hover .tri { fill: #fff3dd; }
.info-tip { position: fixed; z-index: 1000; pointer-events: none; background: rgba(12,16,20,.92); color: #fff; padding: 6px 10px; border-radius: 8px; font: 700 14px Inter, system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.info-tip small { display: block; font-weight: 500; font-size: 12px; opacity: .8; }
.info-tip[hidden] { display: none; }

.modal.info-modal { width: min(1120px, 96vw); max-width: none; max-height: 92vh; padding: 0; }
.info-dlg { padding: 22px 24px; max-height: 92vh; overflow: auto; box-sizing: border-box; }
.dlg-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.dlg-media { display: flex; flex-direction: column; gap: 10px; }
.dlg-media .info-photo { margin: 0; }
.info-locator { width: 100%; max-height: 230px; background: var(--sea); border-radius: 12px; }
.info-locator .land { fill: var(--land); }
.info-locator .pin { fill: var(--accent-2); stroke: #fff; stroke-width: 4; }
.info-locator.mtn .pin { fill: #f0a646; }
.info-locator .pin-pulse { fill: var(--accent-2); opacity: .35; transform-origin: center; transform-box: fill-box; animation: pulse 1.8s ease-out infinite; }
.info-locator.mtn .pin-pulse { fill: #f0a646; }
.dlg-kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dlg-text h2, .dlg-bird h2 { margin: 2px 0 2px; font: 800 34px/1.1 Outfit, Inter, sans-serif; }
.dlg-sub { margin: 0; color: var(--muted); font-weight: 600; }
.dlg-text h3 { margin: 18px 0 6px; font: 800 17px Outfit, Inter, sans-serif; }
.dlg-text p { line-height: 1.55; margin: 0 0 8px; }
.info-nophoto { aspect-ratio: 4 / 3; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, #1c3446, #2c4d3e); color: #cfe0c4; font-size: 60px; }
.info-nophoto span { display: block; font-size: 15px; font-weight: 600; }
.info-bigh { margin: 10px 0 0; font: 800 20px Outfit, Inter, sans-serif; }
.info-bigh b { font-size: 46px; line-height: 1; }
.info-bigh span { display: block; font: 600 14px Inter, sans-serif; color: var(--muted); margin-top: 2px; }
.tag3d { background: #b24a7c; color: #fff; border-radius: 999px; padding: 1px 7px; }

.info-birds { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg button { all: unset; cursor: pointer; padding: 7px 14px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--text); color: var(--bg); }
.bsec h3 { margin: 14px 0 8px; font: 800 18px Outfit, Inter, sans-serif; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.bsec h3 small { color: var(--muted); font: 600 13px Inter, sans-serif; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.bcard { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; cursor: pointer; background: #22313c; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s; }
.bcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .bcard:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.3); } }
.bcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bcard-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 7px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; display: flex; flex-direction: column; line-height: 1.15; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.bcard-name b { font: 800 16px Outfit, Inter, sans-serif; }
.bcard-name small { font-size: 11.5px; opacity: .85; }
.bcard-tier { position: absolute; top: 8px; left: 8px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.bcard-tier.t1 { background: #4f9a5a; } .bcard-tier.t2 { background: #c28a1f; } .bcard-tier.t3 { background: #b24a7c; }
.bcard-size { position: absolute; top: 6px; left: 26px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0,0,0,.5); padding: 2px 7px; border-radius: 999px; }
.snd { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; transition: background .15s, transform .15s; }
.snd svg { width: 19px; height: 19px; }
.snd:hover { background: var(--accent); transform: scale(1.08); }
.snd.playing, .snd-big.playing { background: var(--accent); color: #fff; }
.snd.playing .w1, .snd-big.playing .w1 { animation: snd 1s ease-in-out infinite; }
.snd.playing .w2, .snd-big.playing .w2 { animation: snd 1s .25s ease-in-out infinite; }
@keyframes snd { 50% { opacity: .2; } }
.snd-big { display: inline-flex; align-items: center; gap: 8px; }
.snd-big svg { width: 20px; height: 20px; }
.dlg-bird-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-right: 34px; }
.dlg-bird-head .bird-tag { font-size: 13px; vertical-align: middle; }
.dlg-bird-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; margin-top: 14px; }
.dlg-bird-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dlg-bird-left .info-photo { margin: 0; }
.dlg-bird-left .info-photo img { aspect-ratio: auto; height: min(42vh, 440px); object-fit: contain; background: #1c2831; }
/* the map fills the whole right column, as tall as photo + facts together */
.dlg-bird-mapcol { position: relative; min-height: 420px; }
.dlg-bird-mapcol .bird-mapbox.big { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dlg-bird-mapcol .bird-mapbox.big .bird-map { flex: 1 1 0; height: 0; min-height: 0; max-height: none; width: 100%; }
.dlg-bird-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 6px 24px; align-items: start; }
.dlg-bird-info .bird-facts { border-top: 0; padding-top: 0; }
.dlg-bird-info .info-src { grid-column: 1 / -1; }

@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-info .play { padding: 8px 10px 10px; }
  .info-tab { padding: 7px 10px; font-size: 13px; gap: 5px; }
  .ti::before { font-size: 15px; }
  .info-body.islands, .info-body.villages, .info-body.mountains { overflow: auto; }
  .info-isl { height: auto; grid-template-columns: 1fr; }
  .info-isl .info-mapwrap { height: 62vh; }
  .info-panel { overflow: visible; }
  .info-points { height: 100%; }
  .info-points .info-mapwrap { min-height: 60vh; }
  .info-card { padding: 14px; }
  .info-card h2 { font-size: 26px; }
  .info-stats { grid-template-columns: 1fr 1fr; }
  .info-stat dd { font-size: 16px; }
  .info-dlg { padding: 16px 14px; }
  .dlg-grid { grid-template-columns: 1fr; gap: 14px; }
  .dlg-text h2, .dlg-bird h2 { font-size: 27px; }
  .info-locator { max-height: 170px; }
  .dlg-bird-body { grid-template-columns: 1fr; }
  .dlg-bird-left .info-photo img { height: auto; max-height: 45vh; }
  .dlg-bird-mapcol { min-height: 0; }
  .dlg-bird-mapcol .bird-mapbox.big { position: static; }
  .dlg-bird-mapcol .bird-mapbox.big .bird-map { flex: none; height: 44vh; }
  .dlg-bird-info { grid-template-columns: 1fr; }
  .bgrid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 8px; }
  .bcard-name b { font-size: 14px; }
  .isl-names text { font-size: 17px; }
}
.info-modal .modal-close { z-index: 6; background: color-mix(in srgb, var(--surface) 88%, transparent); border-radius: 50%; }
.info-modal { position: relative; }
/* Explore maps: zoom & pan */
.info-mapwrap.zoomable { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.info-mapwrap.zoomable.dragging { cursor: grabbing; }
.info-mapwrap.zoomable .pt { cursor: pointer; }
.info-zoom { z-index: 5; }
.info-zoom button:disabled { opacity: .45; cursor: default; }
.info-map .land { vector-effect: non-scaling-stroke; }
.info-map.pts .plbl { display: none; pointer-events: none; font: 700 12px Inter, system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(8,20,28,.85); stroke-width: 3.5px; stroke-linejoin: round; }
.info-map.pts.lbl-big .pt.big .plbl, .info-map.pts.lbl-all .plbl { display: block; }
.info-map.pts .pt:hover .dot { r: 6px; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) { .info-zoom button { width: 42px; height: 42px; } }
/* Birds: Listen */
.bird-stage.listen { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.35fr); }
.bird-listen { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.bird-play { all: unset; box-sizing: border-box; cursor: pointer; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .15s; }
.bird-play svg { width: 48px; height: 48px; }
.bird-play:hover { transform: scale(1.05); }
.bird-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.bird-play.playing { animation: bird-pulse 1.1s ease-in-out infinite; }
.bird-play.playing .w1 { animation: snd-wave 1s infinite; } .bird-play.playing .w2 { animation: snd-wave 1s .25s infinite; }
@keyframes bird-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 50% { box-shadow: 0 0 0 16px transparent; } }
@keyframes snd-wave { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.bird-listen-txt { margin: 0; font-size: 15px; line-height: 1.4; }
.bird-listen-src { margin: 0; font-size: 11px; color: var(--muted); }
.bird-listen-src:empty { display: none; }
.bird-listen-src a { color: inherit; }
.bird-stage.listen .bird-cap { top: auto; bottom: 10px; font-size: 19px; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .bird-stage.listen { grid-template-columns: 1fr; }
  .bird-listen { flex-direction: row; text-align: left; padding: 10px 12px; }
  .bird-play { width: 64px; height: 64px; flex: none; }
  .bird-play svg { width: 34px; height: 34px; }
  .bird-listen-src { display: none; }
  .bird-stage.listen .bird-cap { font-size: 15px; bottom: 6px; }
}
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .bird-stage.listen .bird-main { display: contents; }
  .bird-stage.listen .bird-listen { order: 0; } .bird-stage.listen .bird-side { order: 1; } .bird-stage.listen .bird-after { order: 2; }
}
@media (min-width: 861px) and (min-aspect-ratio: 1/1) {
  .bird-stage.listen .bird-listen { flex: 1; justify-content: center; }
  .bird-stage.listen .bird-main:has(.bird-after:not(:empty)) .bird-listen { flex: none; }
}

/* Birds: scenery behind the menu (sea cliffs and seabirds) */
body.mode-birds.bird-menu .play { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22sky%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%237fb2d4%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23c9dde6%22/%3E%3Cstop offset=%22.8%22 stop-color=%22%23f1dcc0%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22sea%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%235b8ea6%22/%3E%3Cstop offset=%221%22 stop-color=%22%23244a5e%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22cl%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%233b5347%22/%3E%3Cstop offset=%221%22 stop-color=%22%231c2b27%22/%3E%3C/linearGradient%3E%3Cg id=%22b%22%3E%3Cpath d=%22M-22 0 C-14 -9 -6 -9 0 -1 C6 -9 14 -9 22 0 C14 -5 6 -4 0 3 C-6 -4 -14 -5 -22 0Z%22/%3E%3C/g%3E%3C/defs%3E%3Crect width=%221600%22 height=%22900%22 fill=%22url(%23sky)%22/%3E%3Cellipse cx=%221180%22 cy=%22560%22 rx=%22420%22 ry=%22120%22 fill=%22%23fff4dc%22 opacity=%22.45%22/%3E%3Cpath d=%22M0 610 L90 560 L180 575 L300 520 L420 548 L520 530 L610 560 L700 575 L760 610Z%22 fill=%22%238aa5b0%22 opacity=%22.7%22/%3E%3Cpath d=%22M880 610 L960 585 L1060 540 L1150 552 L1230 520 L1330 548 L1420 530 L1520 560 L1600 548 L1600 610Z%22 fill=%22%238fa9b3%22 opacity=%22.65%22/%3E%3Crect y=%22600%22 width=%221600%22 height=%22300%22 fill=%22url(%23sea)%22/%3E%3Cg stroke=%22%23fff%22 stroke-opacity=%22.18%22 stroke-width=%222%22 fill=%22none%22%3E%3Cpath d=%22M120 680h120M380 720h160M820 700h90M1030 760h180M600 810h140M1300 690h110%22/%3E%3C/g%3E%3Cpath d=%22M0 360 L60 350 L130 372 L190 360 L250 392 L300 420 L330 470 L360 520 L372 600 L392 680 L380 900 L0 900Z%22 fill=%22url(%23cl)%22/%3E%3Cpath d=%22M0 360 L60 350 L130 372 L190 360 L250 392 L300 420 L286 426 L240 404 L186 374 L130 386 L60 364 L0 374Z%22 fill=%22%235b8a5f%22/%3E%3Cg stroke=%22%23162320%22 stroke-opacity=%22.5%22 stroke-width=%223%22 fill=%22none%22%3E%3Cpath d=%22M40 440 L260 452M20 520 L320 530M30 600 L350 612M40 690 L370 700%22/%3E%3C/g%3E%3Cpath d=%22M1330 900 L1340 700 L1360 610 L1385 540 L1420 470 L1470 450 L1520 470 L1560 440 L1600 450 L1600 900Z%22 fill=%22url(%23cl)%22/%3E%3Cpath d=%22M1420 470 L1470 450 L1520 470 L1560 440 L1600 450 L1600 462 L1560 452 L1522 482 L1470 462 L1426 480Z%22 fill=%22%235b8a5f%22/%3E%3Cpath d=%22M1180 900 L1188 760 L1200 680 L1214 640 L1232 632 L1246 650 L1256 700 L1262 780 L1270 900Z%22 fill=%22%2326372f%22/%3E%3Cpath d=%22M1206 648 L1214 640 L1232 632 L1246 650 L1238 648 L1226 642 L1214 648Z%22 fill=%22%235b8a5f%22/%3E%3Cg fill=%22%2326343a%22 opacity=%22.85%22%3E%3Cuse href=%22%23b%22 transform=%22translate(520 210) scale(1.6)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(610 250) scale(1.2) rotate(-6)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(700 190) scale(1)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(900 300) scale(2.2) rotate(8)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(1040 180) scale(.9)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(1110 230) scale(.7)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(1250 150) scale(1.3) rotate(-10)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(420 330) scale(.8)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(760 380) scale(.6)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(1180 330) scale(.55)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(1320 260) scale(.6)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(1440 300) scale(.9) rotate(5)%22/%3E%3C/g%3E%3Cg fill=%22%23fff%22 opacity=%22.9%22%3E%3Cuse href=%22%23b%22 transform=%22translate(300 250) scale(1.1) rotate(4)%22/%3E%3Cuse href=%22%23b%22 transform=%22translate(980 420) scale(1.4) rotate(-4)%22/%3E%3C/g%3E%3C/svg%3E ") center bottom / cover no-repeat, #7fb2d4; }
body.mode-birds.bird-menu .birdgame > .isl-top { color: #10212b; }
body.mode-birds.bird-menu .bird-setup { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(10,30,40,.35); }

/* Villages menu */
body.mode-vhub .board-wrap, body.mode-vhub .hint, body.mode-vhub .keyboard, body.mode-vhub .photo-wrap { display: none; }
body.mode-vhub .play { width: 100%; flex: 1; min-height: 0; border-left: 0; padding: 12px 16px; }
.vhub { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; width: 100%; max-width: 1100px; margin: 0 auto; }
.vhub[hidden] { display: none; }
.vhub-setup { width: min(900px, 100%); }
.vhub-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vhub-opt { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
.vhub-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--text); }
.vhub-ic svg { width: 30px; height: 30px; }
.vhub-txt { display: flex; flex-direction: column; gap: 3px; }
.vhub-txt i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #3f9a55; }
.bird-opt .vhub-txt span { font-size: 13px; }
.vhub-txt em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #c28a1f; margin-top: 2px; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-vhub .play { padding: 8px 10px 10px; }
  .vhub-kinds { grid-template-columns: 1fr; }
  .vhub-opt { flex-direction: row; align-items: center; }
}

/* Home: picture icons */
.mc-icon.photo { overflow: hidden; padding: 0; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.mc-icon.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-icon .mc-map { width: 92%; height: 92%; }
.mc-icon .mc-map path { fill: #7fc98d; stroke: none; }

/* phones: a small "‹ Villages" link while playing Daily, Map or Against the clock */
.vback { display: none; }
@media (max-width: 600px) {
  body.in-villages .vback { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font: 700 12px Inter, system-ui, sans-serif; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
}

/* Villages: scenery behind the menu (a village by the fjord) */
body.mode-vhub .play { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22sky%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2386b6d6%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23d3e3ea%22/%3E%3Cstop offset=%22.85%22 stop-color=%22%23eee3cf%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22sea%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236a9ab0%22/%3E%3Cstop offset=%221%22 stop-color=%22%232f5669%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22h1%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236f9a62%22/%3E%3Cstop offset=%221%22 stop-color=%22%233f6a45%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22h2%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%235c8a55%22/%3E%3Cstop offset=%221%22 stop-color=%22%232f5236%22/%3E%3C/linearGradient%3E%3Cg id=%22hs%22%3E%3Crect x=%22-22%22 y=%22-26%22 width=%2244%22 height=%2226%22 fill=%22inherit%22/%3E%3Cpath d=%22M-27 -24 L0 -46 L27 -24Z%22 fill=%22%234d7a3f%22/%3E%3Cpath d=%22M-27 -24 L0 -46 L27 -24 L24 -22 L0 -41 L-24 -22Z%22 fill=%22%233a5f31%22/%3E%3Crect x=%22-14%22 y=%22-18%22 width=%228%22 height=%228%22 fill=%22%23f4efe2%22/%3E%3Crect x=%226%22 y=%22-18%22 width=%228%22 height=%228%22 fill=%22%23f4efe2%22/%3E%3Crect x=%22-4%22 y=%22-14%22 width=%228%22 height=%2214%22 fill=%22%232b2b2b%22 opacity=%22.7%22/%3E%3C/g%3E%3C/defs%3E%3Crect width=%221600%22 height=%22900%22 fill=%22url(%23sky)%22/%3E%3Cg fill=%22%23fff%22 opacity=%22.7%22%3E%3Cellipse cx=%22300%22 cy=%22150%22 rx=%22110%22 ry=%2222%22/%3E%3Cellipse cx=%22370%22 cy=%22135%22 rx=%2270%22 ry=%2224%22/%3E%3Cellipse cx=%221180%22 cy=%22200%22 rx=%22140%22 ry=%2224%22/%3E%3Cellipse cx=%221250%22 cy=%22182%22 rx=%2280%22 ry=%2226%22/%3E%3C/g%3E%3Cpath d=%22M0 470 L120 360 L240 330 L330 380 L420 350 L520 420 L600 470Z%22 fill=%22%238fa8b2%22 opacity=%22.75%22/%3E%3Cpath d=%22M980 470 L1080 380 L1180 300 L1260 320 L1360 290 L1460 340 L1600 330 L1600 470Z%22 fill=%22%2394acb5%22 opacity=%22.75%22/%3E%3Cpath d=%22M0 520 L0 300 L90 250 L200 270 L300 330 L420 400 L560 470 L660 540Z%22 fill=%22url(%23h2)%22/%3E%3Cpath d=%22M0 300 L90 250 L200 270 L300 330 L292 336 L196 280 L92 262 L0 312Z%22 fill=%22%238fbf7a%22 opacity=%22.6%22/%3E%3Cpath d=%22M1600 540 L1600 250 L1500 230 L1400 260 L1290 320 L1180 390 L1060 450 L960 520Z%22 fill=%22url(%23h2)%22/%3E%3Cg stroke=%22%232b4630%22 stroke-opacity=%22.35%22 stroke-width=%223%22 fill=%22none%22%3E%3Cpath d=%22M40 360 L260 390M30 420 L380 450M1560 320 L1340 350M1580 400 L1230 430%22/%3E%3C/g%3E%3Crect y=%22500%22 width=%221600%22 height=%22400%22 fill=%22url(%23sea)%22/%3E%3Cg stroke=%22%23fff%22 stroke-opacity=%22.2%22 stroke-width=%222%22%3E%3Cpath d=%22M620 560h120M880 600h90M700 650h160M1000 700h140%22/%3E%3C/g%3E%3Cpath d=%22M0 900 L0 590 C200 560 360 600 520 640 C620 665 700 700 760 760 C800 800 820 850 830 900Z%22 fill=%22url(%23h1)%22/%3E%3Cpath d=%22M1600 900 L1600 600 C1450 580 1300 620 1180 670 C1080 710 1000 780 960 900Z%22 fill=%22url(%23h1)%22/%3E%3Cg%3E%3Cuse href=%22%23hs%22 fill=%22%23c8373b%22 transform=%22translate(150 640) scale(1.3)%22/%3E%3Cuse href=%22%23hs%22 fill=%22%23f2efe6%22 transform=%22translate(250 660) scale(1.2)%22/%3E%3Cuse href=%22%23hs%22 fill=%22%232f5d8a%22 transform=%22translate(360 690) scale(1.25)%22/%3E%3Cuse href=%22%23hs%22 fill=%22%23e3b33b%22 transform=%22translate(470 720) scale(1.15)%22/%3E%3Cuse href=%22%23hs%22 fill=%22%231f2a30%22 transform=%22translate(90 740) scale(1.5)%22/%3E%3Cuse href=%22%23hs%22 fill=%22%23c8373b%22 transform=%22translate(560 780) scale(1.3)%22/%3E%3Cuse href=%22%23hs%22 fill=%22%23f2efe6%22 transform=%22translate(1290 690) scale(1.25)%22/%3E%3Cuse href=%22%23hs%22 fill=%22%23c8373b%22 transform=%22translate(1400 670) scale(1.2)%22/%3E%3Cuse href=%22%23hs%22 fill=%22%23e3b33b%22 transform=%22translate(1500 700) scale(1.3)%22/%3E%3Cuse href=%22%23hs%22 fill=%22%232f5d8a%22 transform=%22translate(1180 760) scale(1.35)%22/%3E%3C/g%3E%3Cg transform=%22translate(300 780)%22%3E%3Crect x=%22-40%22 y=%22-40%22 width=%2280%22 height=%2240%22 fill=%22%23f4f1e8%22/%3E%3Cpath d=%22M-46 -38 L0 -66 L46 -38Z%22 fill=%22%234d7a3f%22/%3E%3Crect x=%2230%22 y=%22-78%22 width=%2226%22 height=%2278%22 fill=%22%23f4f1e8%22/%3E%3Cpath d=%22M26 -76 L43 -104 L60 -76Z%22 fill=%22%2326343a%22/%3E%3Crect x=%2238%22 y=%22-66%22 width=%2210%22 height=%2212%22 fill=%22%2326343a%22/%3E%3Crect x=%22-28%22 y=%22-28%22 width=%2210%22 height=%2214%22 fill=%22%2326343a%22 opacity=%22.75%22/%3E%3Crect x=%22-6%22 y=%22-28%22 width=%2210%22 height=%2214%22 fill=%22%2326343a%22 opacity=%22.75%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%2326343a%22 stroke-width=%223%22 opacity=%22.6%22%3E%3Cpath d=%22M900 240 q10 -8 20 0 q10 -8 20 0M960 270 q7 -6 14 0 q7 -6 14 0%22/%3E%3C/g%3E%3Cg transform=%22translate(820 600)%22%3E%3Cpath d=%22M-40 0 L40 0 L28 16 L-28 16Z%22 fill=%22%23c8373b%22/%3E%3Crect x=%22-2%22 y=%22-40%22 width=%223%22 height=%2240%22 fill=%22%2326343a%22/%3E%3Cpath d=%22M1 -38 L26 -8 L1 -8Z%22 fill=%22%23f4f1e8%22/%3E%3C/g%3E%3C/svg%3E ") center bottom / cover no-repeat, #86b6d6; }
body.mode-vhub .vhub > .isl-top { color: #10212b; }
body.mode-vhub .vhub-setup { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(10,30,40,.35); }

/* Mountains: scenery behind the start screen (peaks, cloud and fjord) */
body.mode-mountains.mtn-menu .play { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22sky%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236f9fc4%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23b9d0dc%22/%3E%3Cstop offset=%22.78%22 stop-color=%22%23f0d9bc%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22far%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%238ea6b3%22/%3E%3Cstop offset=%221%22 stop-color=%22%23a9bcc4%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22mid%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%235f7f79%22/%3E%3Cstop offset=%221%22 stop-color=%22%234c6b5c%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22near%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%234f7a4c%22/%3E%3Cstop offset=%221%22 stop-color=%22%232a4a32%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22sea%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236d98ab%22/%3E%3Cstop offset=%221%22 stop-color=%22%232d5467%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%221600%22 height=%22900%22 fill=%22url(%23sky)%22/%3E%3Ccircle cx=%221230%22 cy=%22470%22 r=%2270%22 fill=%22%23fff3d6%22 opacity=%22.7%22/%3E%3Cpath d=%22M0 560 L140 470 L230 490 L330 400 L420 430 L520 380 L610 440 L700 470 L790 430 L900 360 L990 400 L1080 380 L1180 440 L1290 410 L1400 450 L1500 420 L1600 440 L1600 600 L0 600Z%22 fill=%22url(%23far)%22/%3E%3Cpath d=%22M0 620 L90 560 L200 520 L300 450 L380 380 L450 320 L500 300 L560 330 L640 400 L720 470 L800 520 L880 500 L960 450 L1040 410 L1120 380 L1180 400 L1260 460 L1360 520 L1460 540 L1600 520 L1600 700 L0 700Z%22 fill=%22url(%23mid)%22/%3E%3Cpath d=%22M450 320 L500 300 L560 330 L540 334 L520 324 L500 332 L476 326 L462 336Z%22 fill=%22%23f4f6f4%22/%3E%3Cpath d=%22M1040 410 L1120 380 L1180 400 L1160 404 L1130 396 L1100 406 L1070 402 L1052 414Z%22 fill=%22%23f4f6f4%22 opacity=%22.9%22/%3E%3Cg stroke=%22%232d4539%22 stroke-opacity=%22.35%22 stroke-width=%223%22 fill=%22none%22%3E%3Cpath d=%22M300 470 L700 490M250 520 L760 540M200 570 L820 590M960 470 L1300 490M900 520 L1400 550%22/%3E%3C/g%3E%3Cg fill=%22%23fff%22 opacity=%22.8%22%3E%3Cellipse cx=%22640%22 cy=%22410%22 rx=%22130%22 ry=%2218%22/%3E%3Cellipse cx=%22700%22 cy=%22398%22 rx=%2270%22 ry=%2216%22/%3E%3Cellipse cx=%221210%22 cy=%22430%22 rx=%22110%22 ry=%2214%22/%3E%3C/g%3E%3Crect y=%22680%22 width=%221600%22 height=%22220%22 fill=%22url(%23sea)%22/%3E%3Cg stroke=%22%23fff%22 stroke-opacity=%22.2%22 stroke-width=%222%22%3E%3Cpath d=%22M620 740h140M900 780h110M760 830h170M1100 760h120%22/%3E%3C/g%3E%3Cpath d=%22M0 900 L0 520 L60 470 L120 440 L170 380 L210 330 L240 300 L270 320 L300 380 L340 460 L400 560 L470 660 L540 760 L600 900Z%22 fill=%22url(%23near)%22/%3E%3Cpath d=%22M210 330 L240 300 L270 320 L258 324 L240 314 L222 334Z%22 fill=%22%23f4f6f4%22/%3E%3Cpath d=%22M1600 900 L1600 470 L1540 440 L1480 470 L1420 520 L1360 580 L1300 650 L1240 740 L1200 900Z%22 fill=%22url(%23near)%22/%3E%3Cg stroke=%22%231f3527%22 stroke-opacity=%22.4%22 stroke-width=%223%22 fill=%22none%22%3E%3Cpath d=%22M20 560 L330 580M10 640 L420 660M20 720 L480 740M1560 560 L1400 575M1580 640 L1330 660M1590 720 L1270 740%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%2326343a%22 stroke-width=%223%22 opacity=%22.55%22%3E%3Cpath d=%22M860 200 q12 -9 24 0 q12 -9 24 0M920 240 q8 -6 16 0 q8 -6 16 0%22/%3E%3C/g%3E%3Cg transform=%22translate(240 300)%22%3E%3Crect x=%22-1.5%22 y=%22-26%22 width=%223%22 height=%2226%22 fill=%22%233a2f28%22/%3E%3Cpath d=%22M1.5 -26 L22 -20 L1.5 -14Z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M1.5 -22.5 H22 M8 -26 V-14%22 stroke=%22%23c8373b%22 stroke-width=%223%22/%3E%3Cpath d=%22M1.5 -22.5 H22 M8 -26 V-14%22 stroke=%22%232f5d8a%22 stroke-width=%221.4%22/%3E%3C/g%3E%3C/svg%3E ") center bottom / cover no-repeat, #6f9fc4; }
body.mode-mountains.mtn-menu .mtngame > .isl-top { color: #10212b; }
body.mode-mountains.mtn-menu .mtn-board { background: transparent; }
body.mode-mountains.mtn-menu #mtn-intro { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(10,30,40,.35); }

/* ---------- Start page fits the screen without scrolling ---------- */
/* Computer: title on one line, the cards in two columns (Villages across the top) */
@media (min-width: 861px) {
  .home-inner { height: 100%; min-height: 0; padding: clamp(18px, 4.5vh, 56px) 28px clamp(12px, 2.5vh, 24px); gap: clamp(14px, 3vh, 30px); box-sizing: border-box; }
  .home-head { max-width: 640px; }
  .home-flag { margin-bottom: clamp(8px, 1.8vh, 18px); }
  .home-title { font-size: clamp(40px, min(8.5vh, 6vw), 88px); }
  .home-title { white-space: nowrap; }
  .home-sub { margin-top: clamp(6px, 1.4vh, 16px); font-size: clamp(15px, 2vh, 19px); }
  .home-modes { grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.5vh, 14px); max-width: min(760px, 56vw); }
  .home-modes .mode-card.daily { grid-column: 1 / -1; padding: clamp(14px, 2.4vh, 22px) 22px; }
  .home-modes .mode-card:not(.daily) { grid-template-columns: 48px 1fr; gap: 12px; padding: clamp(10px, 1.8vh, 16px) 16px; align-items: start; }
  .home-modes .mode-card:not(.daily) .mc-icon { width: 48px; height: 48px; border-radius: 14px; }
  .home-modes .mode-card:not(.daily) .mc-go { display: none; }
  .home-modes .mode-card:not(.daily) .mc-title { font-size: 19px; }
  .home-modes .mode-card:not(.daily) .mc-title::after { content: " →"; opacity: .45; transition: opacity .15s, margin .15s; }
  .home-modes .mode-card:not(.daily):hover .mc-title::after { opacity: 1; }
  .home-modes .mc-text { font-size: 13px; line-height: 1.4; }
  .home .home-foot { margin-top: auto; }
}
/* short computer screens: drop the descriptions of the smaller cards */
@media (min-width: 861px) and (max-height: 700px) {
  .home-modes .mode-card:not(.daily) .mc-text { display: none; }
  .home-modes .mode-card:not(.daily) { align-items: center; }
}
/* Phone: compact cards — the Villages card on top, the other four as tiles, two by two */
@media (max-width: 860px) {
  .home-inner { min-height: 100%; height: auto; padding: max(18px, env(safe-area-inset-top)) 14px 12px; gap: 14px; box-sizing: border-box; }
  .home-flag { margin-bottom: 10px; }
  .home-title { font-size: clamp(38px, 11vw, 50px); }
  .home-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
  .home-modes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-modes .mode-card.daily { grid-column: 1 / -1; grid-template-columns: 48px 1fr auto; padding: 12px 14px; gap: 12px; }
  .home-modes .mode-card.daily .mc-text { font-size: 12.5px; line-height: 1.35; }
  .home-modes .mode-card.daily .mc-title { font-size: 21px; }
  .home-modes .mode-card.daily .mc-kicker { font-size: 10.5px; }
  .home-modes .mode-card.daily .mc-go { grid-column: auto; align-self: center; padding: 9px 14px; font-size: 14px; }
  .home-modes .mode-card:not(.daily) { grid-template-columns: 1fr; gap: 8px; padding: 12px; align-content: start; align-items: start; }
  .home-modes .mode-card:not(.daily) .mc-icon { width: 44px; height: 44px; border-radius: 12px; }
  .home-modes .mode-card:not(.daily) .mc-text, .home-modes .mode-card:not(.daily) .mc-go { display: none; }
  .home-modes .mode-card:not(.daily) .mc-title { font-size: 18px; }
  .home-modes .mode-card:not(.daily) .mc-status { font-size: 11.5px; }
  .home-foot { font-size: 12px; }
}
@media (max-width: 860px) and (max-height: 640px) {
  .home-modes .mode-card.daily .mc-text { display: none; }
}

/* Birds menu: step 1 (game type) and step 2 (difficulty) look like two different things */
.bird-step { margin: 6px 0 -4px; display: flex; align-items: center; gap: 8px; font: 800 12px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; }
.bird-step span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; letter-spacing: 0; }
.bird-step b { font-weight: 800; }
.bird-kind { flex-direction: row; align-items: flex-start; gap: 10px; }
.bk-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.bk-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bk-ic svg .f { fill: currentColor; }
.bird-kind.on .bk-ic { background: var(--accent); color: #fff; }
.bk-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bird-opt .bk-txt span { font-size: 13px; }
/* difficulty: a coloured three-way switch with signal bars */
.bird-levels { gap: 6px; padding: 5px; border-radius: 14px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.bird-lvl { --lv: #4f9a5a; border: 0; border-radius: 10px; align-items: center; text-align: center; padding: 8px 6px; gap: 2px; }
.bird-lvl.l2 { --lv: #c28a1f; } .bird-lvl.l3 { --lv: #b24a7c; }
.bird-lvl:hover { background: color-mix(in srgb, var(--lv) 14%, transparent); }
.bird-lvl.on { background: var(--lv); box-shadow: 0 3px 12px color-mix(in srgb, var(--lv) 45%, transparent); }
.bird-lvl.on b, .bird-lvl.on span { color: #fff; }
.bird-lvl .lv-short { display: none; }
.lv-bars { display: flex; align-items: flex-end; gap: 3px; height: 14px; margin-bottom: 2px; }
.lv-bars u { width: 5px; border-radius: 2px; background: color-mix(in srgb, var(--lv) 30%, transparent); }
.lv-bars u:nth-child(1) { height: 6px; } .lv-bars u:nth-child(2) { height: 10px; } .lv-bars u:nth-child(3) { height: 14px; }
.lv-bars u.f { background: var(--lv); }
.bird-lvl.on .lv-bars u { background: rgba(255,255,255,.4); } .bird-lvl.on .lv-bars u.f { background: #fff; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .bird-choice.three:not(.bird-levels) { grid-template-columns: 1fr; }
  .bird-choice.three.bird-levels { grid-template-columns: repeat(3, 1fr); }
  .bird-kind { padding: 9px 12px; align-items: center; }
  .bird-lvl .lv-long { display: none; }
  .bird-lvl .lv-short { display: block; font-size: 12px; }
  .bird-lvl b { font-size: 16px; }
  .bird-setup { gap: 10px; }
}
@media (min-width: 861px) and (min-aspect-ratio: 1/1) { .bird-kind { flex-direction: column; gap: 8px; } }
.bird-opt .bk-txt { color: var(--text); font-size: inherit; line-height: inherit; }
.bird-opt .bk-txt span { color: var(--muted); line-height: 1.35; }

/* ---------- Wind mode ---------- */
body.mode-wind .board-wrap, body.mode-wind .hint, body.mode-wind .keyboard, body.mode-wind .photo-wrap { display: none; }
body.mode-wind .play { width: 100%; flex: 1; min-height: 0; border-left: 0; padding: 12px 16px 12px; }
.windgame { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; width: 100%; max-width: 1200px; margin: 0 auto; }
.windgame[hidden], #wind-setup[hidden], .wind-stage[hidden], #wind-foot[hidden] { display: none; }
#wind-level { font-size: 14px; }
.bird-choice.two { grid-template-columns: 1fr 1fr; }
.wind-stage { flex: 1; min-height: 0; display: grid; gap: 12px; overflow: auto; align-content: start; }
.wind-stage.see { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
.wind-stage.read { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); }
.wind-main, .wind-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#btn-wind-next[hidden] { display: none; }

/* the wind picture */
.wind-pic { position: relative; border-radius: 14px; overflow: hidden; background: #79b5dc; aspect-ratio: 16 / 9; }
.wind-scene { display: block; width: 100%; height: 100%; }
.wind-scene .clouds { animation: ws-clouds linear infinite; }
@keyframes ws-clouds { from { transform: translateX(-800px); } to { transform: translateX(0); } }
.wind-scene .waves { animation: ws-waves var(--wave) linear infinite; }
@keyframes ws-waves { from { transform: translateX(0); } to { transform: translateX(100px); } }
.wind-scene .wc { animation: ws-cap 2.2s ease-in-out infinite; }
@keyframes ws-cap { 0%, 100% { opacity: 0; } 40%, 60% { opacity: .95; } }
.wind-scene .sway { transform-origin: 0 0; transform: rotate(var(--bend)); animation: ws-sway var(--sway) ease-in-out infinite; }
@keyframes ws-sway { 0%, 100% { transform: rotate(var(--bend)); } 50% { transform: rotate(calc(var(--bend) * 1.25 + 3deg)); } }
.wind-scene .flag { transform-origin: 0 0; animation: ws-flag var(--flut) ease-in-out infinite; }
@keyframes ws-flag { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(4deg) scaleX(.96); } }
.wind-scene .ws { animation: ws-streak linear infinite; }
@keyframes ws-streak { from { transform: translateX(-160px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(900px); opacity: 0; } }
.wind-scene .deb { animation: ws-deb linear infinite; }
@keyframes ws-deb { from { transform: translate(0, 0) rotate(0); } to { transform: translate(840px, 60px) rotate(720deg); } }
.wind-scene .rain { animation: ws-rain .5s linear infinite; }
@keyframes ws-rain { from { transform: translate(-20px, -60px); } to { transform: translate(20px, 60px); } }
.wind-meter { position: absolute; right: 12px; top: 12px; background: rgba(10,20,28,.78); color: #fff; border-radius: 12px; padding: 8px 14px; text-align: right; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.wind-meter small { display: block; font-size: 11px; opacity: .75; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.wind-meter b { font: 800 26px Outfit, Inter, sans-serif; }
@media (prefers-reduced-motion: reduce) { .wind-scene *, .wm-streaks { animation-duration: 0s !important; } }

/* answers */
.wind-opts { display: grid; gap: 8px; }
.wind-opt b { display: block; }
.wind-opt small { display: block; font: 500 13px Inter, system-ui, sans-serif; color: var(--muted); }
.wind-opt.right small, .wind-opt.wrong small { color: inherit; }
.wind-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.wc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wc-head i, .wc-terms i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.wc-head b { font: 800 22px Outfit, Inter, sans-serif; }
.wc-head span { color: var(--muted); font-weight: 700; }
.wc-meta { margin: 0; font-size: 13px; color: var(--muted); }
.wc-land { margin: 0; font-size: 14px; line-height: 1.45; }
.wc-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: baseline; font-size: 14px; }
.wc-row span { color: var(--muted); font-weight: 600; }
.wc-row em { font-style: normal; font-weight: 800; }
.wc-row.ok em { color: #3f9a55; } .wc-row.half em { color: #c28a1f; } .wc-row.bad em { color: #d9534f; }
.wc-you { margin: 0; font-size: 13px; color: var(--muted); }
.wc-terms { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13.5px; }
.wc-terms li { display: flex; align-items: center; gap: 8px; }
.wc-terms small { color: var(--muted); }

/* read the forecast */
.wind-forecast { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 12px; padding: 12px 14px; }
.wind-forecast small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.wind-forecast q { quotes: none; font: 700 21px/1.3 Outfit, Inter, sans-serif; }
.wind-ctl { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.wind-ctl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wind-ctl-row b { font-size: 14px; }
.wind-out { font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
.wind-out i { width: 14px; height: 14px; border-radius: 4px; }
.wind-hint { margin: -4px 0 2px; font-size: 12.5px; color: var(--muted); }
.wind-range { position: relative; height: 46px; margin: 2px 4px 6px; }
.wr-track { position: absolute; left: 0; right: 0; top: 12px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #7fcbe9 0%, #76c26b 17%, #e2c33f 32%, #eea23a 40%, #e0503c 55%, #a33a8f 75%, #6f3aa8 100%); opacity: .35; }
.wr-fill { position: absolute; top: 12px; height: 8px; border-radius: 4px; }
.wind-range input { position: absolute; left: -2px; right: -2px; top: 4px; width: calc(100% + 4px); margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 24px; z-index: 2; }
.wind-range input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: grab; }
.wind-range input::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: grab; }
.wind-range input::-moz-range-track { background: none; }
.wind-range input:disabled::-webkit-slider-thumb { cursor: default; border-color: var(--muted); }
.wr-ticks { position: absolute; left: 0; right: 0; top: 28px; height: 16px; font-size: 11px; color: var(--muted); }
.wr-ticks span { position: absolute; transform: translateX(-50%); }
.wind-mapwrap { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; }
.wind-map { width: 100%; max-height: 100%; aspect-ratio: 1; display: block; }
.wm-sea { fill: var(--sea); }
.wind-map .land { fill: url(#info-land); stroke: rgba(170,215,190,.5); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.wm-streaks { stroke-linecap: round; animation: wm-flow 2s linear infinite; transition: opacity .3s; }
@keyframes wm-flow { from { transform: translateY(0); } to { transform: translateY(-840px); } }
.wm-dir { cursor: pointer; }
.wm-dir path { fill: color-mix(in srgb, var(--surface) 88%, var(--text)); stroke: var(--bg); stroke-width: 3px; transition: fill .15s; }
.wm-dir text { font: 800 21px Inter, system-ui, sans-serif; fill: var(--text); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.wm-dir:hover path { fill: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.wm-dir.on path { fill: var(--accent); } .wm-dir.on text { fill: #fff; }
.wind-map.answered .wm-dir { cursor: default; }
.wind-map.answered .wm-dir.right path { fill: #53a062; } .wind-map.answered .wm-dir.right text { fill: #fff; }
.wind-map.answered .wm-dir.on:not(.right) path { fill: #d9534f; }
.wm-arrow path { stroke: #fff; stroke-width: 3px; }
.wm-true path { fill: #53a062; stroke: #fff; stroke-width: 3px; }
.wr-sw { min-width: 56px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.5); padding: 0 4px; }
.wind-reslist li { grid-template-columns: auto 1fr auto; }
.wind-reslist i.pts { color: var(--text); font-size: 15px; }

@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-wind .play { padding: 8px 10px 10px; }
  .wind-stage.see, .wind-stage.read { grid-template-columns: 1fr; }
  .bird-choice.two:not(.bird-levels) { grid-template-columns: 1fr; }
  .wind-forecast q { font-size: 18px; }
  .wm-dir text { font-size: 24px; }
  .wind-stage.read .wind-main { display: contents; }
  .wind-stage.read .wind-side { display: contents; }
  .wind-stage.read .wind-forecast { order: 0; } .wind-stage.read .wind-mapwrap { order: 1; } .wind-stage.read .wind-ctl { order: 2; } .wind-stage.read #wind-after { order: 3; }
  .wind-meter b { font-size: 20px; }
}
/* computer: everything fits on the screen */
@media (min-width: 861px) and (min-aspect-ratio: 1/1) {
  .wind-stage { overflow: hidden; grid-template-rows: minmax(0, 1fr); }
  .wind-main, .wind-side { min-height: 0; }
  .wind-side { overflow: auto; }
  .wind-stage.see .wind-pic { max-height: 100%; }
}

/* Wind: scenery behind the menu (wind over the hills, turbines) */
body.mode-wind.wind-menu .play { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22sky%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236d8fa6%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23b9cad3%22/%3E%3Cstop offset=%22.85%22 stop-color=%22%23dfe3dc%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22hill%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236f9a62%22/%3E%3Cstop offset=%221%22 stop-color=%22%233a6440%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22sea%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%235b8599%22/%3E%3Cstop offset=%221%22 stop-color=%22%232f5566%22/%3E%3C/linearGradient%3E%3Cg id=%22tb%22%3E%3Crect x=%22-4%22 y=%220%22 width=%228%22 height=%22190%22 fill=%22%23eef1f2%22/%3E%3Ccircle r=%229%22 fill=%22%23f4f6f7%22/%3E%3Cpath d=%22M0 0 L-6 -110 L6 -110Z%22 fill=%22%23f4f6f7%22/%3E%3Cpath d=%22M0 0 L-6 -110 L6 -110Z%22 fill=%22%23f4f6f7%22 transform=%22rotate(120)%22/%3E%3Cpath d=%22M0 0 L-6 -110 L6 -110Z%22 fill=%22%23f4f6f7%22 transform=%22rotate(240)%22/%3E%3C/g%3E%3C/defs%3E%3Crect width=%221600%22 height=%22900%22 fill=%22url(%23sky)%22/%3E%3Cg fill=%22%23fff%22 opacity=%22.75%22%3E%3Cpath d=%22M120 190 q60 -50 140 -20 q60 -40 120 10 q70 0 80 40 H100 q-10 -30 20 -30Z%22/%3E%3Cpath d=%22M1080 150 q70 -50 150 -15 q60 -35 120 10 q70 5 70 40 H1060 q0 -30 20 -35Z%22/%3E%3C/g%3E%3Cg stroke=%22%23fff%22 stroke-width=%225%22 stroke-linecap=%22round%22 fill=%22none%22 opacity=%22.7%22%3E%3Cpath d=%22M80 330 H420 q60 0 60 -45 q0 -35 -35 -35%22/%3E%3Cpath d=%22M200 400 H700 q50 0 50 40 q0 30 -30 30%22/%3E%3Cpath d=%22M1000 300 H1380 q55 0 55 -40 q0 -30 -30 -30%22/%3E%3Cpath d=%22M1080 380 H1520%22/%3E%3Cpath d=%22M560 250 H880%22/%3E%3C/g%3E%3Crect y=%22610%22 width=%221600%22 height=%22290%22 fill=%22url(%23sea)%22/%3E%3Cpath d=%22M0 900 L0 560 C220 520 420 540 620 600 C760 640 860 700 930 900Z%22 fill=%22url(%23hill)%22/%3E%3Cpath d=%22M1600 900 L1600 520 C1420 500 1250 540 1120 600 C1020 650 960 740 930 900Z%22 fill=%22url(%23hill)%22/%3E%3Cuse href=%22%23tb%22 transform=%22translate(1280 420)%22/%3E%3Cuse href=%22%23tb%22 transform=%22translate(1420 400) rotate(0) scale(.9)%22/%3E%3Cuse href=%22%23tb%22 transform=%22translate(1540 430) scale(.8)%22/%3E%3Cg stroke=%22%233b6536%22 stroke-width=%224%22 stroke-linecap=%22round%22 fill=%22none%22%3E%3Cpath d=%22M60 600 q14 -20 34 -26M90 596 q16 -22 40 -26M140 592 q14 -18 36 -24M300 598 q16 -20 38 -24M420 610 q14 -18 36 -22M520 630 q14 -18 34 -22M1200 600 q14 -18 34 -22M1330 580 q16 -20 38 -24%22/%3E%3C/g%3E%3C/svg%3E ") center bottom / cover no-repeat, #6d8fa6; }
body.mode-wind.wind-menu .windgame > .isl-top { color: #10212b; }
body.mode-wind.wind-menu #wind-setup { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(10,30,40,.35); }
@media (min-width: 861px) and (max-height: 780px) {
  .home-modes .mode-card:not(.daily) .mc-text { display: none; }
  .home-modes .mode-card:not(.daily) { align-items: center; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .home-sub { font-size: 13.5px; margin-top: 4px; }
  .home-title { font-size: clamp(34px, 10vw, 44px); }
  .home-flag { margin-bottom: 4px; }
  .home-modes .mode-card:not(.daily) { padding: 9px 10px; gap: 6px; }
  .home-modes .mode-card:not(.daily) .mc-icon { width: 38px; height: 38px; }
  .home-modes .mode-card:not(.daily) .mc-title { font-size: 16px; }
  .home-inner { gap: 10px; }
}
.wm-dir { outline: none; }
.wm-dir:focus-visible path { stroke: var(--accent); stroke-width: 6px; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .wind-map { max-height: none; width: min(100%, 520px); margin: 0 auto; }
  .wind-mapwrap { flex: none; }
}
@media (max-width: 860px), (max-aspect-ratio: 1/1) { .wind-mapwrap { display: block; } .wind-map { width: 100%; max-width: 520px; } }
/* Explore → Wind */
.ti.wind::before { content: "💨"; }
.info-body.wind { overflow: auto; }
.info-wind { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 18px; align-items: start; max-width: 1200px; margin: 0 auto; width: 100%; }
.info-wind section { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.info-wind h2 { margin: 0 0 4px; font: 800 22px Outfit, Inter, sans-serif; }
.info-wind .note { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.info-wind .note.src { font-size: 12px; margin: 8px 0 0; }
.iw-tablewrap { overflow-x: auto; }
.iw-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.iw-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.iw-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.iw-table td b { display: block; }
.iw-table td small { display: block; color: var(--muted); font-size: 12px; }
.iw-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iw-table .land { font-size: 13px; line-height: 1.4; min-width: 180px; }
.wsw { display: block; width: 14px; height: 30px; border-radius: 4px; }
.iw-rose { width: 100%; max-width: 330px; display: block; margin: 0 auto; }
.iw-rose circle { fill: var(--sea); stroke: var(--line); stroke-width: 2; } .iw-rose circle.c { fill: var(--text); stroke: none; }
.iw-rose .ar path { fill: var(--accent); }
.iw-rose text { text-anchor: middle; font: 800 13px Inter, system-ui, sans-serif; fill: var(--text); }
.iw-rose text.sm { font: 500 10.5px Inter, system-ui, sans-serif; fill: var(--muted); }
@media (max-width: 860px), (max-aspect-ratio: 1/1) { .info-wind { grid-template-columns: 1fr; } .iw-table .land { min-width: 140px; } }
@media (max-width: 860px), (max-aspect-ratio: 1/1) { .wind-stage { grid-auto-rows: max-content; } .wind-mapwrap { min-height: auto; } }
.bird-reslist span.wr-sw { display: grid; place-items: center; flex-direction: row; font-size: 12px; }
.wind-out.unset { opacity: .45; }
/* phones: the forecast, the map and the speed all fit on one screen */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-wind .windgame > .isl-top .isl-q { font-size: 16px; }
  .wind-stage.read { gap: 8px; }
  .wind-stage.read .wind-forecast { position: sticky; top: 0; z-index: 4; padding: 8px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
  .wind-stage.read .wind-forecast small { display: none; }
  .wind-stage.read .wind-forecast q { font-size: 17px; }
  .wind-stage.read .wind-map { width: min(100%, 40vh, 520px); }
  .wind-stage.read .wind-hint { display: none; }
  .wind-stage.read .wind-ctl { padding: 8px 12px; gap: 4px; }
  .wind-stage.read .wind-range { height: 40px; margin-bottom: 2px; }
  .wind-stage.read #btn-wind-guess { padding-top: 10px; padding-bottom: 10px; }
}
.wr-track .wr-fill { top: 0; height: 100%; }
.wr-track:has(.wr-fill) { opacity: 1; background: color-mix(in srgb, var(--text) 10%, transparent); }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-wind #wind-q { font-size: 16px; line-height: 1.25; }
  .wind-stage.read .wind-map { width: min(100%, 36vh, 520px); }
  body.mode-wind #wind-foot { min-height: 0; }
  body.mode-wind #wind-feedback:empty { display: none; }
}
.ph-dots { display: flex; justify-content: center; gap: 8px; margin-top: -6px; }
.ph-dots button { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); background: transparent; padding: 0; cursor: pointer; }
.ph-dots button.on { background: var(--accent); border-color: var(--accent); }

/* Bird photos: swipe (or use the arrows) to see all of a bird's photos */
.bcar { position: absolute; inset: 0; }
.bird-photo .bcar, .dlg-bird-photo .bcar { position: relative; width: 100%; height: 100%; }
.bcar-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.bcar-track::-webkit-scrollbar { display: none; }
.bcar-slide { flex: 0 0 100%; position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.bcar-slide .bird-img { -webkit-user-drag: none; user-select: none; }
.bcar-slide .bird-credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 8px 4px; font-size: 10px; color: #fff; opacity: .9; background: linear-gradient(transparent, rgba(0,0,0,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.bcar-slide .bird-credit a { color: inherit; }
.bcar-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,20,28,.55); color: #fff; font: 700 22px/1 Inter, system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; user-select: none; }
.bcar-nav.prev { left: 6px; } .bcar-nav.next { right: 6px; }
.bcar-nav:hover { background: rgba(10,20,28,.8); }
.bcar:hover .bcar-nav { opacity: 1; }
@media (hover: none) { .bcar-nav { display: none; } }
.bcar-dots { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; gap: 4px; padding: 4px 6px; border-radius: 999px; background: rgba(10,20,28,.45); pointer-events: none; }
.bcar-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); }
.bcar-dots i.on { background: #fff; }
.bird-pic .bird-num, .bird-pic .bird-cap { z-index: 3; pointer-events: none; }
.bird-pic.done { cursor: default; }
.bird-stage.listen .bird-cap { bottom: 22px; }
.bird-photo .bcar-slide .bird-credit { font-size: 11px; padding: 14px 10px 5px; }
.dlg-bird-photo { position: relative; height: min(42vh, 440px); border-radius: 12px; overflow: hidden; background: #1c2831; }
.dlg-bird-photo .bird-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) { .dlg-bird-photo { height: 45vh; } }

/* Weather: level picker only for "Read the forecast"; Hard = a whole forecast with clouds and rain */
#wind-levels[hidden], #wind-lvl-step[hidden] { display: none; }
.wind-forecast.full q { font-size: 18px; line-height: 1.4; }
.wx-pick { display: flex; flex-direction: column; gap: 6px; }
.wx-opts { display: grid; gap: 6px; }
.wx-opts.cloud { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wx-opts.rain { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wx-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; min-width: 0; transition: border-color .15s, background .15s; }
.wx-opt svg { width: 34px; height: 34px; display: block; }
.wx-opt small { font-size: 10.5px; line-height: 1.15; font-weight: 700; color: var(--muted); text-align: center; hyphens: manual; min-height: 12px; max-width: 100%; }
.wx-opt:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.wx-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.wx-opt.on small { color: var(--text); }
.wx-opt:disabled { cursor: default; opacity: .55; }
.wx-opt.right { opacity: 1; border-color: #53a062; background: color-mix(in srgb, #53a062 18%, var(--surface)); }
.wx-opt.wrong { opacity: 1; border-color: #d9534f; background: color-mix(in srgb, #d9534f 14%, var(--surface)); }
.wx-opt.right small, .wx-opt.wrong small { color: var(--text); }
.wc-row b small { font-weight: 500; color: var(--muted); }
.iw-sky { grid-column: 1 / -1; }
.iw-skycols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.iw-skycols h3 { margin: 4px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.iw-sky-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.iw-sky-list li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.iw-sky-list svg { width: 34px; height: 34px; }
.iw-sky-list b { display: block; } .iw-sky-list small { display: block; color: var(--muted); font-size: 12px; }
.iw-sky-list em { font-style: normal; font-weight: 700; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .iw-skycols { grid-template-columns: 1fr; }
  .wind-stage.read.l3 .wind-forecast q { font-size: 14.5px; line-height: 1.35; }
  .wind-stage.read.l3 .wind-map { width: min(100%, 27vh, 520px); }
  .wind-stage.read.l3 .wind-ctl { gap: 4px; padding: 6px 10px 8px; }
  .wind-stage.read.l3 .wind-ctl-row:first-child { display: none; } /* the compass shows the chosen direction */
  .wind-stage.read.l3 .wind-range { height: 38px; margin-bottom: 0; }
  .wind-stage.read.l3 .wx-pick .wind-ctl-row b { font-size: 12.5px; }
  .wx-pick { gap: 3px; }
  .wx-opt { padding: 2px 1px 1px; } .wx-opt svg { width: 26px; height: 26px; } .wx-opt small { font-size: 9.5px; min-height: 0; }
  .wx-opt:disabled small { font-size: 8.5px; letter-spacing: -.1px; }
}
@media ((max-width: 860px) or (max-aspect-ratio: 1/1)) and (max-height: 620px) {
  .wind-stage.read.l3 .wind-map { width: min(100%, 20vh, 520px); }
  .wind-stage.read.l3 .wind-forecast { padding: 6px 10px; }
  .wind-stage.read.l3 .wind-forecast q { font-size: 13px; }
  .wind-stage.read.l3 .wx-opt svg { width: 22px; height: 22px; }
}

/* ---------- Plants, sea life and places ---------- */
.ti.landmarks::before { content: "📍"; } .ti.plants::before { content: "🌿"; } .ti.sea::before { content: "🐟"; }
.info-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.info-tabs::-webkit-scrollbar { display: none; }
.info-tab { flex: none; }
.modes { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.modes::-webkit-scrollbar { display: none; }
.mode-btn { flex: none; }
@media (max-width: 1180px) { .mode-btn { padding: 4px 9px; font-size: 12.5px; } }
#nat-level { font-size: 14px; }
.nat-text { margin: 8px 0 4px; font-size: 14px; line-height: 1.55; }
.nat-lang { opacity: .6; font-size: 12px; }
.nat-info .info-locator { max-height: 190px; }
.nat-loc { margin: 8px 0 0; }
.bird-stage.where { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); }
.nat-mapwrap { height: min(58vh, 560px); flex: none; }
.nat-map { cursor: crosshair; }
.nat-pin .halo { fill: currentColor; opacity: .3; }
.nat-pin .dot { fill: currentColor; stroke: #fff; stroke-width: 2.5px; }
.nat-pin.you { color: #5aa7ec; }
.nat-pin.target { color: #53a062; }
.nat-lineseg { stroke: #fff; stroke-width: 3; stroke-dasharray: 8 6; opacity: .85; }
.info-map.pts .star { fill: #ffd166; stroke: #5a3d08; stroke-width: 1px; stroke-linejoin: round; }
.info-map.pts .pt:hover .star { fill: #fff3cc; }
.info-map.pts.landmarks .plbl { display: none; }
.info-map.pts.landmarks.lbl-all .plbl { display: block; }
.gal-toolbar { flex-wrap: wrap; }
.gal-search { flex: 1 1 200px; max-width: 320px; }
.gal-search input { width: 100%; box-sizing: border-box; }
.gal-none { color: var(--muted); padding: 20px 4px; }
.natdlg .dlg-bird-body { grid-template-columns: 1fr; }
body.mode-nat .birdgame#birdgame { display: none; }
body.mode-nat.nat-menu .natgame > .isl-top { color: #10212b; }
body.mode-nat.nat-menu #nat-setup { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(10,30,40,.35); }
body.mode-nat.nat-menu.nat-plants .play { background: radial-gradient(ellipse at 20% 110%, #e9d36b 0 6%, transparent 7%), radial-gradient(ellipse at 70% 105%, #d98bb5 0 5%, transparent 6%), radial-gradient(ellipse at 45% 112%, #f4f1e6 0 6%, transparent 7%), linear-gradient(180deg, #9cc3d6 0%, #cfe0dc 45%, #8fb57a 62%, #4f7d45 100%); }
body.mode-nat.nat-menu.nat-sea .play { background: radial-gradient(circle at 80% 8%, rgba(255,255,255,.35) 0 10%, transparent 30%), linear-gradient(180deg, #8fc0d8 0%, #3d7ea0 30%, #1f4f6e 65%, #0f2c42 100%); }
body.mode-nat.nat-menu.nat-sea .natgame > .isl-top { color: #fff; }
body.mode-nat.nat-menu.nat-landmarks .play { background: linear-gradient(180deg, #7fb2d4 0%, #c9dde6 50%, #5b8ea6 64%, #2f5a70 100%); }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .bird-stage.where { grid-template-columns: 1fr; }
  .bird-stage.where .bird-photo { height: 22vh; max-height: 22vh; }
  .nat-mapwrap { height: 42vh; }
  #nat-level { font-size: 12px; }
}

/* ---------- Start page: the Villages card on top, then eight games in a grid ---------- */
@media (min-width: 861px) {
  .home-modes { grid-template-columns: repeat(4, 1fr); max-width: min(980px, 64vw); }
  .home-modes .mode-card:not(.daily) { grid-template-columns: 1fr; gap: 8px; align-items: start; align-content: start; padding: clamp(10px, 1.6vh, 16px) 14px; }
  .home-modes .mode-card:not(.daily) .mc-icon { width: 44px; height: 44px; }
  .home-modes .mode-card:not(.daily) .mc-title { font-size: 17px; }
  .home-modes .mode-card:not(.daily) .mc-text { font-size: 12.5px; line-height: 1.38; }
}
@media (min-width: 861px) and (max-height: 780px) {
  .home-modes .mode-card:not(.daily) { grid-template-columns: 40px 1fr; align-items: center; }
  .home-modes .mode-card:not(.daily) .mc-icon { width: 40px; height: 40px; }
}
@media (max-width: 860px) {
  .home-modes { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .home-modes .mode-card.info-card-home { grid-column: span 2; grid-template-columns: 40px 1fr; align-items: center; }
  .home-modes .mode-card:not(.daily) { padding: 10px; gap: 6px; }
  .home-modes .mode-card:not(.daily) .mc-icon { width: 40px; height: 40px; }
  .home-modes .mode-card:not(.daily) .mc-title { font-size: 15px; }
  .home-modes .mode-card:not(.daily) .mc-title::after { content: none; }
  .home-modes .mode-card:not(.daily) .mc-status { font-size: 10.5px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .home-modes .mode-card:not(.daily) .mc-icon { width: 34px; height: 34px; }
  .home-modes .mode-card:not(.daily) .mc-title { font-size: 14px; }
}
.bird-foot .btn[hidden] { display: none; }
.nat-dlg-info { display: block; }
.nat-dlg-info .bird-facts { margin-top: 8px; }
.nat-locbig .info-locator { max-height: none; height: 100%; min-height: 260px; }

/* Places: topics instead of game type + difficulty */
.nat-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nat-topic { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; text-align: center; }
.nat-topic .nt-ic { font-size: 22px; line-height: 1.1; }
.nat-topic b { font-size: 14px; line-height: 1.2; }
.nat-topic .nt-n { font-size: 12px; color: var(--muted); }
.nat-topic.on .nt-n { color: inherit; opacity: .8; }
#nat-step2[hidden], #nat-levels[hidden] { display: none; }
.bird-tag.lm-tag { background: #3b6e8f; color: #fff; }
.lm-topic-sel { font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.info-map.pts .lmt-islets .star { fill: #c9a26b; } .info-map.pts .lmt-falls .star { fill: #7fc8ef; } .info-map.pts .lmt-lakes .star { fill: #4aa3d8; }
.info-map.pts .lmt-fjords .star { fill: #9fd0c7; } .info-map.pts .lmt-history .star { fill: #e3a45a; } .info-map.pts .lmt-statues .star { fill: #d9d9d9; }
.info-map.pts .lmt-churches .star { fill: #ffffff; } .info-map.pts .lmt-tunnels .star { fill: #b89adb; }
@media (max-width: 860px) { .nat-topic { padding: 8px 4px; } .nat-topic b { font-size: 12.5px; } .nat-topic .nt-ic { font-size: 19px; } }

/* ---------- Start page v3: nine equal cards, Research as a slim row at the bottom ---------- */
.home-modes .mode-card { position: relative; }
.home-modes .mode-card[data-daily]::before {
  content: ""; position: absolute; top: 8px; right: 8px; font-size: 13px; line-height: 1;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='3' fill='none' stroke='white' stroke-width='2.2'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 62% no-repeat, rgba(83,160,98,.95); box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.home-modes .mode-card[data-daily="done"]::before { content: "✓"; font-weight: 800; color: #fff; font-size: 12px; background: rgba(255,255,255,.2); }
.home-modes .mode-card.info-card-home { grid-column: 1 / -1; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.home-modes .mode-card.info-card-home .mc-icon { width: 40px; height: 40px; }
.home-modes .mode-card.info-card-home .mc-title::after { content: none; }
.home-modes .mode-card.info-card-home .mc-go { display: inline-flex !important; padding: 7px 14px; font-size: 13px; }
@media (min-width: 861px) {
  .home-modes { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 861px) and (max-height: 780px) {
  .home-modes .mode-card.info-card-home .mc-text { display: block; }
}
@media (max-width: 860px) {
  .home-modes { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .home-modes .mode-card:not(.info-card-home) { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 9px 4px 8px; gap: 5px; }
  .home-modes .mode-card:not(.info-card-home) .mc-icon { width: 40px; height: 40px; }
  .home-modes .mode-card:not(.info-card-home) .mc-title { font-size: 12.5px; line-height: 1.15; }
  .home-modes .mode-card:not(.info-card-home) .mc-text, .home-modes .mode-card:not(.info-card-home) .mc-go, .home-modes .mode-card:not(.info-card-home) .mc-status { display: none; }
  .home-modes .mode-card[data-daily]::before { top: 4px; right: 4px; width: 18px; height: 18px; font-size: 10px; }
  .home-modes .mode-card.info-card-home { grid-column: 1 / -1; padding: 8px 12px; }
  .home-modes .mode-card.info-card-home .mc-text { font-size: 12px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .home-modes .mode-card:not(.info-card-home) .mc-icon { width: 34px; height: 34px; }
  .home-modes .mode-card.info-card-home .mc-text { display: none; }
}
/* the daily banner at the top of a section's menu */
.dly-slot[hidden] { display: none; }
.dly-slot { margin-bottom: 4px; }
.dly-banner { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--correct) 45%, transparent);
  background: color-mix(in srgb, var(--correct) 12%, var(--surface)); }
.dly-banner:hover { background: color-mix(in srgb, var(--correct) 20%, var(--surface)); }
.dly-banner:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dly-ic { font-size: 24px; text-align: center; }
.dly-txt { display: grid; gap: 1px; min-width: 0; }
.dly-txt b { font-size: 15px; }
.dly-txt small { font-size: 12.5px; color: var(--muted); }
.dly-go { font-weight: 700; font-size: 13.5px; padding: 7px 14px; border-radius: 999px; background: var(--correct); color: #fff; white-space: nowrap; }
.dly-banner.done .dly-go { background: var(--surface-2); color: var(--text); }
.hint .hint-what { font-weight: 700; }
.result-alt[hidden] { display: none; }
.result-alt .bird-map { width: 100%; max-height: 260px; }
.result-alt .info-photo { margin: 0; }
.result-alt-cap { margin: 4px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.map-card .map[hidden] { display: none; }
#modal-help [data-help][hidden] { display: none; }

/* Research → Weather: make your own forecast */
.info-wind .iw-build { grid-column: 1 / -1; }
.fc-out { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; margin: 6px 0 12px; }
.fc-out small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fc-out q { display: block; quotes: none; font: 700 clamp(17px, 2.2vw, 22px)/1.35 Outfit, Inter, sans-serif; margin: 4px 0 8px; }
.fc-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.fc-parts b { color: var(--text); }
.fc-parts i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.fc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.fc-map .wind-map { max-height: 460px; margin: 0 auto; }
.fc-ctl { display: flex; flex-direction: column; gap: 6px; }
.fc-temp { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.fc-temp input { width: 64px; font: inherit; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); margin-left: 4px; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) { .fc-grid { grid-template-columns: 1fr; } .fc-map .wind-map { max-height: 360px; } }

/* Research tabs on phones: a tidy 4 × 2 grid instead of a long scrolling row */
@media (max-width: 860px) {
  .info-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; border-radius: 14px; padding: 3px; width: 100%; box-sizing: border-box; overflow: visible; }
  .info-tab { flex-direction: column; justify-content: center; gap: 1px; padding: 4px 2px; border-radius: 10px; font-size: 11px; line-height: 1.15; text-align: center; min-width: 0; }
  .info-tab > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .ti::before { font-size: 16px; }
}

/* ---------- Sound on/off and the radio ---------- */
.snd-toggle .snd-off { display: none; }
body.muted .snd-toggle .snd-on { display: none; }
body.muted .snd-toggle .snd-off { display: inline; }
body.muted .snd-toggle { opacity: .75; }
.radio-toggle { position: relative; }
.radio-eq { position: absolute; right: 3px; bottom: 4px; display: none; gap: 1.5px; align-items: flex-end; height: 9px; }
.radio-eq b { width: 2.5px; background: #53a062; border-radius: 1px; animation: eq 0.9s ease-in-out infinite; }
.radio-eq b:nth-child(2) { animation-delay: -.3s; } .radio-eq b:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 9px; } }
body.radio-on .radio-eq { display: inline-flex; }
body.radio-on .radio-toggle { color: #53a062; }
.home-tools { position: absolute; top: 12px; right: 112px; z-index: 3; display: flex; gap: 4px; }
.home-tools .icon-btn { color: rgba(230,240,246,.85); background: rgba(8,23,37,.55); border-radius: 999px; width: 38px; height: 38px; backdrop-filter: blur(4px); }
.home-tools .icon-btn:hover { background: rgba(8,23,37,.8); }
.topbar-side.right { gap: 2px; }
.radio-pop { position: fixed; z-index: 60; width: min(300px, calc(100vw - 16px)); box-sizing: border-box; padding: 10px 12px 12px; border-radius: 16px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: 0 16px 44px rgba(0,0,0,.35); display: grid; gap: 10px; }
.radio-pop[hidden] { display: none; }
.rp-head { display: flex; align-items: center; gap: 8px; }
.rp-head b { font-size: 15px; }
.rp-state { flex: 1; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-state.playing { color: #53a062; font-weight: 700; } .rp-state.error { color: #d9534f; }
.rp-close { all: unset; cursor: pointer; font-size: 22px; line-height: 1; padding: 0 4px; color: var(--muted); }
.rp-row { display: flex; gap: 8px; align-items: center; }
.rp-play { all: unset; cursor: pointer; flex: none; width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: var(--correct); color: #fff; }
.rp-play svg { width: 22px; height: 22px; }
.rp-play .i-stop { display: none; }
.radio-pop.on .rp-play .i-play { display: none; } .radio-pop.on .rp-play .i-stop { display: block; }
.rp-play:focus-visible, #rp-station:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#rp-station { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.rp-vol { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.rp-vol input { flex: 1; accent-color: var(--correct); }
@media (max-width: 600px) {
  .topbar .snd-toggle, .topbar .radio-toggle { width: 34px; height: 34px; }
  .topbar .snd-toggle svg, .topbar .radio-toggle svg { width: 21px; height: 21px; }
  .home-tools { right: 104px; top: 10px; }
}
@media (max-width: 860px) { .home-modes .mode-card.info-card-home .mc-go { grid-column: auto; justify-self: end; align-self: center; } }
.map-card svg.map[hidden] { display: none !important; }
.map-card .result-alt svg { width: 100%; height: 260px; max-height: 260px; display: block; }
/* phones: the top bar has home, help, radio, sound, language and statistics — the title gives way (the home button does the same) */
@media (max-width: 600px) {
  .topbar .title { display: none; }
  .topbar { padding: 0 6px; }
  .topbar .icon-btn { width: 34px; height: 34px; }
  .topbar .icon-btn svg { width: 21px; height: 21px; }
}
.fc-grid > * { min-width: 0; } .iw-build { min-width: 0; overflow: hidden; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) { .info-wind { grid-template-columns: minmax(0, 1fr); } .info-wind > section { min-width: 0; } .iw-tablewrap { overflow-x: auto; } }

/* ---------- Start page v4: a 3 × 3 grid (eight games + Research) ---------- */
.home-modes { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 861px) {
  .home-modes { grid-template-columns: repeat(3, 1fr); max-width: min(860px, 60vw); }
}
.home-modes .mode-card.info-card-home { grid-column: auto; }
@media (min-width: 861px) {
  .home-modes .mode-card.info-card-home { grid-template-columns: 1fr; align-items: start; padding: clamp(10px, 1.6vh, 16px) 14px; gap: 8px; }
  .home-modes .mode-card.info-card-home .mc-icon { width: 44px; height: 44px; }
  .home-modes .mode-card.info-card-home .mc-go { display: none !important; }
}
@media (min-width: 861px) and (max-height: 780px) {
  .home-modes .mode-card.info-card-home { grid-template-columns: 40px 1fr; align-items: center; }
  .home-modes .mode-card.info-card-home .mc-text { display: none; }
}
@media (max-width: 860px) {
  .home-modes { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .home-modes .mode-card.info-card-home { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 9px 4px 8px; gap: 5px; }
  .home-modes .mode-card.info-card-home .mc-icon { width: 40px; height: 40px; }
  .home-modes .mode-card.info-card-home .mc-title { font-size: 12.5px; line-height: 1.15; }
  .home-modes .mode-card.info-card-home .mc-text, .home-modes .mode-card.info-card-home .mc-go { display: none !important; }
  .home-modes .mode-card:not(.info-card-home) .mc-title, .home-modes .mode-card.info-card-home .mc-title { font-size: 14px; }
  .home-modes .mode-card .mc-icon { width: 44px !important; height: 44px !important; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .home-modes .mode-card .mc-icon { width: 36px !important; height: 36px !important; }
  .home-modes .mode-card .mc-title { font-size: 13px !important; }
}

/* ---------- Against the clock: the on-screen keyboard instead of the phone's ---------- */
body.mode-timed.timed-running .keyboard { display: grid; }
body.mode-timed .timed { order: 1; }
body.mode-timed .keyboard { order: 2; margin-top: 8px; }
.timed-form { display: flex; gap: 8px; align-items: stretch; }
.timed-typed { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 14px; min-height: 48px; border: 2px solid var(--tile-border); border-radius: 12px; background: var(--surface);
  font: 800 20px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; overflow: hidden; white-space: nowrap; }
.timed-typed .ph { font-weight: 600; letter-spacing: 0; color: var(--muted); font-size: 16px; }
.timed-typed .caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.timed-form.ok .timed-typed { border-color: var(--correct); background: color-mix(in srgb, var(--correct) 15%, var(--surface)); }
.timed-progress button { all: unset; height: 8px; border-radius: 4px; background: var(--tile-border); }
.timed-progress button.cur { background: var(--text); }
.timed-progress button.correct { background: var(--correct); }
.timed-progress button.missed { background: var(--absent); opacity: .7; }
.timed-progress button.skipped { background: #d9a53a; cursor: pointer; height: 12px; margin-top: -2px; }
.timed-progress button.skipped:hover { filter: brightness(1.1); }
.timed-progress button.skipped:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#btn-timed-skip { padding: 9px 16px; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-timed.timed-running .photo-wrap { flex: 1 1 auto; min-height: 120px; }
  body.mode-timed.timed-running .play { flex: none; width: 100%; box-sizing: border-box; padding: 8px 8px 8px; }
  body.mode-timed.timed-running .timed-play { gap: 7px; padding: 0; }
  body.mode-timed.timed-running .timer { font-size: 26px; }
  body.mode-timed.timed-running .timed-score strong { font-size: 20px; }
  body.mode-timed.timed-running .timed-typed { min-height: 42px; font-size: 18px; }
  body.mode-timed.timed-running .timed-feedback { min-height: 18px; font-size: 13px; }
  body.mode-timed.timed-running .keyboard { margin-top: 4px; }
}
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  body.mode-timed.timed-running .key { height: 46px; }
  body.mode-timed.timed-running .timed-feedback:empty { display: none; }
}
@media (max-height: 700px) and (max-width: 860px) { body.mode-timed.timed-running .key { height: 40px; } }

/* ---------- Top bar v2: Back and Home in the middle on every page ---------- */
.topbar .brand { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.topbar .topbar-side:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar .title { font-size: 19px; }
.vback, body.in-villages .vback { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px 0 10px;
  font: 700 13.5px Inter, system-ui, sans-serif; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); white-space: nowrap; }
.vback span:first-child { font-size: 20px; line-height: 1; margin-top: -2px; }
.vback:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.vback:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.topbar #btn-home { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; width: 36px; height: 36px; }
@media (max-width: 1399px) { .topbar .modes { display: none; } }
@media (max-width: 1100px) { .topbar .title { display: none; } }
@media (max-width: 600px) {
  .vback, body.in-villages .vback { height: 32px; padding: 0 10px 0 7px; font-size: 12.5px; }
  .topbar #btn-home { width: 32px; height: 32px; }
  .topbar .brand { gap: 5px; }
  .topbar-side.right { gap: 0; }
  .topbar .lang-switch button { padding: 5px 7px; }
}
@media (max-width: 600px) { .topbar { grid-template-columns: auto 1fr auto; gap: 4px; } }

/* after every game: Play again · Share, then Back · Main page */
#btn-bird-change, #btn-nat-change, #btn-wind-change { display: none !important; }
.result-nav { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.result-nav .btn { flex: 1 1 0; max-width: 200px; background: transparent; border: 1px solid var(--line); }
.result-nav .btn:hover { background: var(--surface-2); }
.result-nav .btn span[aria-hidden] { font-size: 20px; line-height: 1; margin-top: -2px; }
@media (max-width: 420px) { .vback #vback-label { display: none; } .vback, body.in-villages .vback { padding: 0; width: 32px; justify-content: center; } }
.topbar .brand { overflow: hidden; }

/* ---------- Daily badge on start-page cards: faint calendar = not played, green ✓ = done today ---------- */
.home-modes .mode-card[data-daily="todo"]::before { background-color: rgba(255,255,255,.16); box-shadow: none; opacity: .85; }
.home-modes .mode-card[data-daily="done"]::before {
  content: ""; opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat, #2f9e55;
  box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 2px rgba(255,255,255,.85);
}

/* ---------- Leaderboard ---------- */
.lb-modal { width: min(460px, calc(100vw - 24px)); }
.lb-sub { margin: -4px 0 10px; color: var(--muted); font-size: 13px; }
.lb-game { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; margin-bottom: 10px; }
.lb-list { min-height: 120px; max-height: min(46vh, 420px); overflow: auto; }
.lb-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lb-rows li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.lb-rows li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rows li em { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 700; }
.lb-rank { text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.lb-rows li.me { background: color-mix(in srgb, var(--correct) 22%, transparent); outline: 1px solid var(--correct); }
.lb-rows li.sep { margin-top: 8px; }
.lb-msg { text-align: center; color: var(--muted); padding: 26px 8px; margin: 0; }
.lb-foot { font-size: 12px; color: var(--muted); margin: 8px 2px 0; text-align: center; }
.lb-account { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.lb-in { margin: 0; text-align: center; font-size: 14px; }
.lb-in .linkish { background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; margin-left: 6px; }
.lb-why { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.lb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lb-fields input { min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; }
.lb-btns { display: flex; gap: 6px; margin-top: 8px; }
.lb-btns .btn { flex: 1; justify-content: center; }
.lb-err { min-height: 1.2em; margin: 6px 0 0; font-size: 13px; color: var(--accent-2); }
@media (max-width: 420px) { .lb-fields { grid-template-columns: 1fr; } }
.timed-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; }
.timed-actions .btn { justify-content: center; }
.lb-detail { display: block; margin-top: 6px; font-size: 12px; opacity: .8; word-break: break-word; }
.lb-fields.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .lb-fields.three { grid-template-columns: 1fr; } }
.lb-in { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; }
.lb-in .linkish { margin-left: 0; }

/* ---------- Scenery behind the menus: plants (outfield meadow), sea life (under the surface), places (cliff, waterfall, sea stacks), islands (ferry between the islands) ---------- */
body.mode-nat.nat-menu.nat-plants .play { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22sky%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%238ec0dc%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23d4e6e8%22/%3E%3Cstop offset=%22.75%22 stop-color=%22%23eef0dc%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22far%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2394afba%22/%3E%3Cstop offset=%221%22 stop-color=%22%23aec3c4%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22mid%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%237fa56c%22/%3E%3Cstop offset=%221%22 stop-color=%22%235d8a52%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22near%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236e9d57%22/%3E%3Cstop offset=%221%22 stop-color=%22%233d6b3a%22/%3E%3C/linearGradient%3E%3Cg id=%22bc%22%3E%3Ccircle r=%226%22 fill=%22%23f2c928%22/%3E%3Ccircle r=%222.4%22 fill=%22%23d18f10%22/%3E%3C/g%3E%3Cg id=%22th%22%3E%3Ccircle r=%227%22 fill=%22%23e58bb4%22/%3E%3Ccircle r=%223%22 fill=%22%23f7c4dc%22/%3E%3C/g%3E%3Cg id=%22ct%22%3E%3Cpath d=%22M0 0 V-34%22 stroke=%22%236d8a4a%22 stroke-width=%222%22/%3E%3Cellipse cx=%220%22 cy=%22-38%22 rx=%226%22 ry=%228%22 fill=%22%23fbfaf2%22/%3E%3C/g%3E%3Cg id=%22he%22%3E%3Cpath d=%22M0 0 V-28%22 stroke=%22%235b6d3b%22 stroke-width=%222%22/%3E%3Ccircle cy=%22-10%22 r=%223%22 fill=%22%23a562a8%22/%3E%3Ccircle cy=%22-16%22 r=%223%22 fill=%22%23b373b5%22/%3E%3Ccircle cy=%22-22%22 r=%222.6%22 fill=%22%23c088c2%22/%3E%3Ccircle cy=%22-27%22 r=%222.2%22 fill=%22%23c99bcb%22/%3E%3C/g%3E%3Cg id=%22gr%22%3E%3Cpath d=%22M-6 0 Q-8 -20 -12 -30 M0 0 Q0 -24 2 -36 M6 0 Q8 -18 14 -28%22 stroke=%22%233f6a36%22 stroke-width=%222.4%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg id=%22sh%22%3E%3Cellipse cx=%220%22 cy=%22-14%22 rx=%2222%22 ry=%2213%22 fill=%22%23f4f1e8%22/%3E%3Cellipse cx=%2222%22 cy=%22-18%22 rx=%227%22 ry=%226%22 fill=%22%232d2a28%22/%3E%3Crect x=%22-14%22 y=%22-4%22 width=%223%22 height=%2210%22 fill=%22%232d2a28%22/%3E%3Crect x=%2210%22 y=%22-4%22 width=%223%22 height=%2210%22 fill=%22%232d2a28%22/%3E%3C/g%3E%3C/defs%3E%3Crect width=%221600%22 height=%22900%22 fill=%22url(%23sky)%22/%3E%3Cg fill=%22%23fff%22 opacity=%22.75%22%3E%3Cellipse cx=%22260%22 cy=%22140%22 rx=%22120%22 ry=%2222%22/%3E%3Cellipse cx=%22330%22 cy=%22124%22 rx=%2270%22 ry=%2224%22/%3E%3Cellipse cx=%221240%22 cy=%22190%22 rx=%22150%22 ry=%2224%22/%3E%3Cellipse cx=%221310%22 cy=%22172%22 rx=%2280%22 ry=%2226%22/%3E%3C/g%3E%3Cpath d=%22M0 470 L130 400 L250 420 L360 360 L470 395 L590 350 L700 400 L820 380 L930 330 L1050 370 L1170 340 L1290 380 L1420 350 L1600 390 L1600 520 L0 520Z%22 fill=%22url(%23far)%22/%3E%3Cpath d=%22M500 356 L590 350 L640 372 L610 368 L590 360 L560 368Z%22 fill=%22%23eef2f2%22 opacity=%22.8%22/%3E%3Cpath d=%22M0 560 C220 470 420 460 640 500 C860 540 1040 470 1260 460 C1400 455 1520 480 1600 500 L1600 900 L0 900Z%22 fill=%22url(%23mid)%22/%3E%3Cg stroke=%22%234a6f3f%22 stroke-opacity=%22.35%22 stroke-width=%223%22 fill=%22none%22%3E%3Cpath d=%22M80 560 C300 500 480 505 640 530M900 520 C1080 490 1260 485 1480 510%22/%3E%3C/g%3E%3Cpath d=%22M200 600 L600 560 L980 590%22 stroke=%22%238c8a80%22 stroke-width=%2210%22 stroke-dasharray=%2214 5%22 fill=%22none%22 opacity=%22.6%22/%3E%3Cuse href=%22%23sh%22 transform=%22translate(720 575) scale(1.1)%22/%3E%3Cuse href=%22%23sh%22 transform=%22translate(800 590) scale(-.9 .9)%22/%3E%3Cuse href=%22%23sh%22 transform=%22translate(1180 540) scale(.8)%22/%3E%3Cpath d=%22M0 690 C300 640 560 660 820 700 C1080 740 1340 680 1600 660 L1600 900 L0 900Z%22 fill=%22url(%23near)%22/%3E%3Cg%3E%3Cuse href=%22%23gr%22 transform=%22translate(60 900) scale(2.4)%22/%3E%3Cuse href=%22%23gr%22 transform=%22translate(180 880) scale(1.8)%22/%3E%3Cuse href=%22%23gr%22 transform=%22translate(1480 900) scale(2.6)%22/%3E%3Cuse href=%22%23gr%22 transform=%22translate(1380 880) scale(1.6)%22/%3E%3Cuse href=%22%23gr%22 transform=%22translate(300 860) scale(1.4)%22/%3E%3Cuse href=%22%23gr%22 transform=%22translate(1250 860) scale(1.3)%22/%3E%3Cuse href=%22%23gr%22 transform=%22translate(760 880) scale(1.5)%22/%3E%3Cuse href=%22%23gr%22 transform=%22translate(920 870) scale(1.3)%22/%3E%3Cuse href=%22%23ct%22 transform=%22translate(120 860) scale(2.55)%22/%3E%3Cuse href=%22%23ct%22 transform=%22translate(150 870) scale(2.1)%22/%3E%3Cuse href=%22%23ct%22 transform=%22translate(1420 850) scale(2.4)%22/%3E%3Cuse href=%22%23ct%22 transform=%22translate(1450 870) scale(2.85)%22/%3E%3Cuse href=%22%23ct%22 transform=%22translate(1030 800) scale(1.65)%22/%3E%3Cuse href=%22%23he%22 transform=%22translate(240 880) scale(3.0)%22/%3E%3Cuse href=%22%23he%22 transform=%22translate(270 885) scale(2.4)%22/%3E%3Cuse href=%22%23he%22 transform=%22translate(1330 880) scale(2.85)%22/%3E%3Cuse href=%22%23he%22 transform=%22translate(1300 870) scale(2.25)%22/%3E%3Cuse href=%22%23he%22 transform=%22translate(560 770) scale(1.65)%22/%3E%3Cuse href=%22%23bc%22 transform=%22translate(70 800) scale(2.4)%22/%3E%3Cuse href=%22%23bc%22 transform=%22translate(360 820) scale(2.1)%22/%3E%3Cuse href=%22%23bc%22 transform=%22translate(420 760) scale(1.5)%22/%3E%3Cuse href=%22%23bc%22 transform=%22translate(640 740) scale(1.65)%22/%3E%3Cuse href=%22%23bc%22 transform=%22translate(880 780) scale(1.8)%22/%3E%3Cuse href=%22%23bc%22 transform=%22translate(1110 760) scale(1.5)%22/%3E%3Cuse href=%22%23bc%22 transform=%22translate(1210 820) scale(2.1)%22/%3E%3Cuse href=%22%23bc%22 transform=%22translate(1540 800) scale(2.25)%22/%3E%3Cuse href=%22%23bc%22 transform=%22translate(980 850) scale(2.4)%22/%3E%3Cuse href=%22%23bc%22 transform=%22translate(500 860) scale(2.55)%22/%3E%3Cuse href=%22%23th%22 transform=%22translate(200 780) scale(1.8)%22/%3E%3Cuse href=%22%23th%22 transform=%22translate(470 810) scale(1.95)%22/%3E%3Cuse href=%22%23th%22 transform=%22translate(700 800) scale(1.5)%22/%3E%3Cuse href=%22%23th%22 transform=%22translate(1160 790) scale(1.65)%22/%3E%3Cuse href=%22%23th%22 transform=%22translate(1360 780) scale(1.8)%22/%3E%3Cuse href=%22%23th%22 transform=%22translate(850 860) scale(2.25)%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%2326343a%22 stroke-width=%223%22 opacity=%22.55%22%3E%3Cpath d=%22M880 230 q10 -8 20 0 q10 -8 20 0M940 262 q7 -6 14 0 q7 -6 14 0%22/%3E%3C/g%3E%3Cg transform=%22translate(610 690)%22%3E%3Cellipse rx=%229%22 ry=%227%22 fill=%22%23f0b82a%22/%3E%3Cpath d=%22M-4 -6 V6 M2 -6 V6%22 stroke=%22%232d2a28%22 stroke-width=%223%22/%3E%3Cellipse cx=%22-3%22 cy=%22-9%22 rx=%227%22 ry=%224%22 fill=%22%23fff%22 opacity=%22.8%22/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat, #8ec0dc; }
body.mode-nat.nat-menu.nat-sea .play { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22sky%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%239cc8e0%22/%3E%3Cstop offset=%221%22 stop-color=%22%23e3eef0%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22water%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%233d86a8%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%231f5b7d%22/%3E%3Cstop offset=%221%22 stop-color=%22%230c2a40%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22ray%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.22%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cg id=%22fish%22%3E%3Cpath d=%22M0 0 C14 -12 40 -12 52 0 C40 12 14 12 0 0Z M50 0 L66 -11 L66 11Z%22/%3E%3Ccircle cx=%2212%22 cy=%22-2%22 r=%222.4%22 fill=%22%230c2a40%22/%3E%3C/g%3E%3Cg id=%22kelp%22%3E%3Cpath d=%22M0 0 C-14 -60 16 -110 -4 -170 C-20 -220 12 -260 -2 -320%22 fill=%22none%22 stroke=%22%233e6b3a%22 stroke-width=%2210%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M-2 -60 q-26 -10 -36 -34 M4 -130 q26 -8 34 -32 M-6 -210 q-24 -8 -32 -30 M0 -280 q22 -6 30 -28%22 stroke=%22%234d7f45%22 stroke-width=%227%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg id=%22star%22%3E%3Cpath d=%22M0 -16 L4 -5 L16 -5 L6 2 L10 14 L0 7 L-10 14 L-6 2 L-16 -5 L-4 -5Z%22 fill=%22%23e0764a%22/%3E%3C/g%3E%3Cg id=%22puf%22%3E%3Cellipse cx=%220%22 cy=%220%22 rx=%2212%22 ry=%229%22 fill=%22%231d1d1f%22/%3E%3Cellipse cx=%222%22 cy=%223%22 rx=%228%22 ry=%225%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22-9%22 cy=%22-9%22 r=%227%22 fill=%22%231d1d1f%22/%3E%3Ccircle cx=%22-10%22 cy=%22-10%22 r=%224.5%22 fill=%22%23fff%22/%3E%3Cpath d=%22M-16 -10 L-24 -7 L-16 -4Z%22 fill=%22%23e8622b%22/%3E%3C/g%3E%3C/defs%3E%3Crect width=%221600%22 height=%22900%22 fill=%22url(%23water)%22/%3E%3Crect width=%221600%22 height=%22210%22 fill=%22url(%23sky)%22/%3E%3Cpath d=%22M0 200 L140 150 L260 170 L380 120 L480 160 L560 200Z%22 fill=%22%238aa6b0%22/%3E%3Cpath d=%22M1100 200 L1200 160 L1290 110 L1340 130 L1420 100 L1520 150 L1600 140 L1600 200Z%22 fill=%22%238fa9b3%22/%3E%3Cpath d=%22M0 205 Q40 198 80 205 T160 205 T240 205 T320 205 T400 205 T480 205 T560 205 T640 205 T720 205 T800 205 T880 205 T960 205 T1040 205 T1120 205 T1200 205 T1280 205 T1360 205 T1440 205 T1520 205 T1600 205 V225 H0Z%22 fill=%22%235a9ec0%22/%3E%3Cg transform=%22translate(820 200)%22%3E%3Cpath d=%22M-60 0 L60 0 L46 18 L-46 18Z%22 fill=%22%23c8373b%22/%3E%3Crect x=%22-24%22 y=%22-22%22 width=%2236%22 height=%2222%22 fill=%22%23f2efe6%22/%3E%3Crect x=%22-18%22 y=%22-16%22 width=%228%22 height=%227%22 fill=%22%232f5d8a%22/%3E%3Crect x=%22-4%22 y=%22-16%22 width=%228%22 height=%227%22 fill=%22%232f5d8a%22/%3E%3Crect x=%2218%22 y=%22-46%22 width=%223%22 height=%2246%22 fill=%22%2326343a%22/%3E%3Cpath d=%22M21 -44 L46 -18 L21 -18Z%22 fill=%22%23f4f1e8%22/%3E%3C/g%3E%3Cuse href=%22%23puf%22 transform=%22translate(420 200) scale(1.2)%22/%3E%3Cuse href=%22%23puf%22 transform=%22translate(470 204) scale(-1 1)%22/%3E%3Cuse href=%22%23puf%22 transform=%22translate(1180 202)%22/%3E%3Cg fill=%22url(%23ray)%22%3E%3Cpath d=%22M300 225 L380 225 L260 900 L120 900Z%22/%3E%3Cpath d=%22M700 225 L760 225 L760 900 L600 900Z%22/%3E%3Cpath d=%22M1080 225 L1160 225 L1340 900 L1180 900Z%22/%3E%3C/g%3E%3Cg fill=%22%239fd0e8%22 opacity=%22.35%22%3E%3Ccircle cx=%22560%22 cy=%22420%22 r=%226%22/%3E%3Ccircle cx=%22572%22 cy=%22380%22 r=%224%22/%3E%3Ccircle cx=%22566%22 cy=%22345%22 r=%223%22/%3E%3Ccircle cx=%221240%22 cy=%22520%22 r=%225%22/%3E%3Ccircle cx=%221250%22 cy=%22480%22 r=%223.5%22/%3E%3C/g%3E%3Cg fill=%22%23d8a64a%22 opacity=%22.85%22%3E%3Cuse href=%22%23fish%22 transform=%22translate(520 470) scale(1.4)%22/%3E%3Cuse href=%22%23fish%22 transform=%22translate(600 500) scale(1.1)%22/%3E%3Cuse href=%22%23fish%22 transform=%22translate(570 540) scale(1.2)%22/%3E%3C/g%3E%3Cg fill=%22%23b9c8d0%22 opacity=%22.8%22%3E%3Cuse href=%22%23fish%22 transform=%22translate(1100 380) scale(-1 1)%22/%3E%3Cuse href=%22%23fish%22 transform=%22translate(1160 410) scale(-.8 .8)%22/%3E%3Cuse href=%22%23fish%22 transform=%22translate(1040 420) scale(-.9 .9)%22/%3E%3Cuse href=%22%23fish%22 transform=%22translate(1120 450) scale(-.7 .7)%22/%3E%3Cuse href=%22%23fish%22 transform=%22translate(1200 360) scale(-.6 .6)%22/%3E%3C/g%3E%3Cg fill=%22%236d8f9e%22 opacity=%22.5%22%3E%3Cuse href=%22%23fish%22 transform=%22translate(860 640) scale(2.4)%22/%3E%3C/g%3E%3Cg transform=%22translate(300 360)%22 opacity=%22.75%22%3E%3Cpath d=%22M-30 0 C-30 -34 30 -34 30 0 Z%22 fill=%22%23e7c3dc%22/%3E%3Cpath d=%22M-22 0 q4 40 -6 70 M-8 0 q-4 44 4 80 M8 0 q6 38 -2 72 M22 0 q-2 36 8 64%22 stroke=%22%23e7c3dc%22 stroke-width=%223%22 fill=%22none%22/%3E%3C/g%3E%3Cpath d=%22M0 900 L0 800 C200 770 360 800 520 790 C700 780 900 820 1100 800 C1300 780 1450 800 1600 790 L1600 900Z%22 fill=%22%23c9b48a%22/%3E%3Cpath d=%22M0 900 L0 840 C300 820 700 860 1000 845 C1250 832 1450 850 1600 840 L1600 900Z%22 fill=%22%23b39c70%22/%3E%3Cuse href=%22%23kelp%22 transform=%22translate(70 870) scale(1.5)%22/%3E%3Cuse href=%22%23kelp%22 transform=%22translate(140 880) scale(1.1)%22/%3E%3Cuse href=%22%23kelp%22 transform=%22translate(1500 870) scale(1.6)%22/%3E%3Cuse href=%22%23kelp%22 transform=%22translate(1440 880) scale(1.05)%22/%3E%3Cuse href=%22%23kelp%22 transform=%22translate(1560 890) scale(.9)%22/%3E%3Cuse href=%22%23star%22 transform=%22translate(420 830) scale(1.5) rotate(12)%22/%3E%3Cuse href=%22%23star%22 transform=%22translate(1180 840) scale(1.2)%22/%3E%3Cg transform=%22translate(900 846)%22%3E%3Cellipse rx=%2226%22 ry=%2214%22 fill=%22%23c4502f%22/%3E%3Cpath d=%22M-24 -4 l-16 -16 M24 -4 l16 -16 M-18 8 l-14 10 M18 8 l14 10%22 stroke=%22%23c4502f%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22-8%22 cy=%22-12%22 r=%223%22 fill=%22%231d1d1f%22/%3E%3Ccircle cx=%228%22 cy=%22-12%22 r=%223%22 fill=%22%231d1d1f%22/%3E%3C/g%3E%3Cg fill=%22%23e9e1cf%22%3E%3Cpath d=%22M620 852 a18 18 0 0 1 36 0Z%22/%3E%3Cpath d=%22M1320 848 a14 14 0 0 1 28 0Z%22/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat, #1f5b7d; }
body.mode-nat.nat-menu.nat-landmarks .play { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22sky%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236d98c2%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23c9d6dc%22/%3E%3Cstop offset=%22.72%22 stop-color=%22%23f3d7b0%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22sea%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%237aa3b4%22/%3E%3Cstop offset=%221%22 stop-color=%22%23274b5e%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22cl%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2343594c%22/%3E%3Cstop offset=%221%22 stop-color=%22%231f2e2a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22st%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%233a4a45%22/%3E%3Cstop offset=%221%22 stop-color=%22%2322302c%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22fall%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.95%22/%3E%3Cstop offset=%221%22 stop-color=%22%23dbeef5%22 stop-opacity=%22.8%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%221600%22 height=%22900%22 fill=%22url(%23sky)%22/%3E%3Ccircle cx=%221060%22 cy=%22560%22 r=%2280%22 fill=%22%23fff0cf%22 opacity=%22.75%22/%3E%3Cg fill=%22%23fff%22 opacity=%22.6%22%3E%3Cellipse cx=%22420%22 cy=%22170%22 rx=%22140%22 ry=%2220%22/%3E%3Cellipse cx=%22500%22 cy=%22152%22 rx=%2280%22 ry=%2222%22/%3E%3Cellipse cx=%221300%22 cy=%22230%22 rx=%22120%22 ry=%2218%22/%3E%3C/g%3E%3Cpath d=%22M620 610 L660 560 L690 575 L720 500 L740 520 L760 470 L785 510 L805 450 L830 500 L850 480 L880 540 L920 560 L960 610Z%22 fill=%22%237b95a0%22/%3E%3Cpath d=%22M1180 610 L1240 570 L1320 560 L1400 540 L1480 560 L1600 550 L1600 610Z%22 fill=%22%238aa2ac%22/%3E%3Crect y=%22600%22 width=%221600%22 height=%22300%22 fill=%22url(%23sea)%22/%3E%3Cg stroke=%22%23fff%22 stroke-opacity=%22.25%22 stroke-width=%222%22%3E%3Cpath d=%22M620 650h120M900 700h140M1180 660h90M760 780h170M1100 820h160%22/%3E%3C/g%3E%3Cpath d=%22M1000 900 L1010 700 L1030 640 L1060 600 L1090 590 L1120 610 L1140 660 L1150 740 L1156 900Z%22 fill=%22url(%23st)%22/%3E%3Cpath d=%22M1030 640 L1060 600 L1090 590 L1120 610 L1106 612 L1088 600 L1064 612Z%22 fill=%22%235f8c5c%22/%3E%3Cpath d=%22M1180 900 L1190 780 L1206 730 L1224 718 L1240 740 L1250 800 L1256 900Z%22 fill=%22url(%23st)%22/%3E%3Cpath d=%22M1250 900 L1270 760 L1300 700 L1360 690 L1420 710 L1450 770 L1470 900 L1430 900 L1420 830 C1400 780 1330 780 1310 830 L1300 900Z%22 fill=%22url(%23st)%22/%3E%3Cpath d=%22M1300 700 L1360 690 L1420 710 L1404 712 L1360 700 L1316 708Z%22 fill=%22%235f8c5c%22/%3E%3Cpath d=%22M0 900 L0 420 L120 400 L250 430 L380 450 L470 480 L520 520 L540 600 L548 700 L560 900Z%22 fill=%22url(%23cl)%22/%3E%3Cpath d=%22M0 420 L120 400 L250 430 L380 450 L470 480 L520 520 L500 522 L460 494 L372 464 L244 444 L120 414 L0 434Z%22 fill=%22%236c9a5e%22/%3E%3Cg stroke=%22%2315201d%22 stroke-opacity=%22.45%22 stroke-width=%223%22 fill=%22none%22%3E%3Cpath d=%22M40 500 L420 520M20 590 L480 610M40 680 L520 700M20 770 L530 790%22/%3E%3C/g%3E%3Cpath d=%22M470 482 C500 490 518 505 522 520 L530 900 L512 900 L506 540 C500 520 486 500 466 492Z%22 fill=%22url(%23fall)%22/%3E%3Cellipse cx=%22520%22 cy=%22890%22 rx=%2260%22 ry=%2216%22 fill=%22%23fff%22 opacity=%22.55%22/%3E%3Cg transform=%22translate(250 432)%22%3E%3Crect x=%22-26%22 y=%22-22%22 width=%2252%22 height=%2222%22 fill=%22%23f2efe6%22/%3E%3Cpath d=%22M-30 -20 L0 -40 L30 -20Z%22 fill=%22%233a5f31%22/%3E%3Crect x=%22-6%22 y=%22-14%22 width=%2210%22 height=%2214%22 fill=%22%232b2b2b%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(160 414)%22%3E%3Crect x=%22-20%22 y=%22-18%22 width=%2240%22 height=%2218%22 fill=%22%23c8373b%22/%3E%3Cpath d=%22M-24 -16 L0 -32 L24 -16Z%22 fill=%22%233a5f31%22/%3E%3C/g%3E%3Cg transform=%22translate(340 450)%22%3E%3Crect x=%22-18%22 y=%22-16%22 width=%2236%22 height=%2216%22 fill=%22%232f5d8a%22/%3E%3Cpath d=%22M-22 -14 L0 -30 L22 -14Z%22 fill=%22%233a5f31%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%2326343a%22 stroke-width=%223%22 opacity=%22.6%22%3E%3Cpath d=%22M760 260 q12 -9 24 0 q12 -9 24 0M820 300 q8 -6 16 0 q8 -6 16 0M1180 330 q9 -7 18 0 q9 -7 18 0%22/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat, #6d98c2; }
body.mode-islands.isl-menu .play { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMax slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22sky%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%237eb0d4%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23d4e3ea%22/%3E%3Cstop offset=%221%22 stop-color=%22%23f1e6d2%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22sea%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236d9fb6%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%233d7593%22/%3E%3Cstop offset=%221%22 stop-color=%22%231c425a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22i1%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236f8f7c%22/%3E%3Cstop offset=%221%22 stop-color=%22%234c6b5a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22i2%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23557a55%22/%3E%3Cstop offset=%221%22 stop-color=%22%232f5236%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%221600%22 height=%22900%22 fill=%22url(%23sky)%22/%3E%3Cg fill=%22%23fff%22 opacity=%22.7%22%3E%3Cellipse cx=%22300%22 cy=%22120%22 rx=%22130%22 ry=%2222%22/%3E%3Cellipse cx=%22370%22 cy=%22104%22 rx=%2270%22 ry=%2222%22/%3E%3Cellipse cx=%221150%22 cy=%22160%22 rx=%22160%22 ry=%2224%22/%3E%3Cellipse cx=%221230%22 cy=%22142%22 rx=%2290%22 ry=%2226%22/%3E%3C/g%3E%3Crect y=%22430%22 width=%221600%22 height=%22470%22 fill=%22url(%23sea)%22/%3E%3Cpath d=%22M60 432 L120 400 L170 410 L220 380 L260 396 L300 432Z%22 fill=%22%239ab1bb%22/%3E%3Cpath d=%22M340 432 L380 410 L410 360 L440 350 L470 372 L520 400 L560 432Z%22 fill=%22%239ab1bb%22/%3E%3Cpath d=%22M1030 432 L1060 408 L1100 400 L1130 370 L1170 360 L1210 392 L1260 404 L1300 432Z%22 fill=%22%239ab1bb%22/%3E%3Cpath d=%22M1400 432 L1440 414 L1480 418 L1530 398 L1570 410 L1600 432Z%22 fill=%22%23a3b8c0%22/%3E%3Cpath d=%22M600 440 L660 380 L700 320 L730 300 L760 330 L790 300 L830 350 L880 380 L930 440Z%22 fill=%22url(%23i1)%22/%3E%3Cpath d=%22M700 320 L730 300 L760 330 L746 330 L730 316 L712 326Z%22 fill=%22%23eef2f0%22 opacity=%22.85%22/%3E%3Cpath d=%22M0 560 L0 470 L80 440 L160 400 L230 420 L300 460 L360 520 L380 560Z%22 fill=%22url(%23i2)%22/%3E%3Cpath d=%22M1600 560 L1600 430 L1520 420 L1440 450 L1380 490 L1330 560Z%22 fill=%22url(%23i2)%22/%3E%3Cpath d=%22M1240 470 L1250 430 L1262 420 L1274 436 L1280 470Z%22 fill=%22%233b5446%22/%3E%3Cpath d=%22M1296 470 L1302 448 L1310 444 L1316 470Z%22 fill=%22%233b5446%22/%3E%3Cg stroke=%22%23fff%22 stroke-opacity=%22.22%22 stroke-width=%222%22%3E%3Cpath d=%22M420 520h140M700 500h100M980 540h160M240 640h180M560 700h150M1000 680h200M1300 620h120M760 800h170M140 780h120M1320 780h150%22/%3E%3C/g%3E%3Cg transform=%22translate(620 610)%22%3E%3Cpath d=%22M-110 0 L120 0 L96 30 L-96 30Z%22 fill=%22%23f2efe6%22/%3E%3Cpath d=%22M-96 30 L96 30 L90 40 L-90 40Z%22 fill=%22%232f5d8a%22/%3E%3Crect x=%22-70%22 y=%22-26%22 width=%22120%22 height=%2226%22 fill=%22%23f2efe6%22/%3E%3Crect x=%22-40%22 y=%22-46%22 width=%2260%22 height=%2220%22 fill=%22%23f2efe6%22/%3E%3Cg fill=%22%232f5d8a%22%3E%3Crect x=%22-62%22 y=%22-18%22 width=%2210%22 height=%228%22/%3E%3Crect x=%22-44%22 y=%22-18%22 width=%2210%22 height=%228%22/%3E%3Crect x=%22-26%22 y=%22-18%22 width=%2210%22 height=%228%22/%3E%3Crect x=%22-8%22 y=%22-18%22 width=%2210%22 height=%228%22/%3E%3Crect x=%2210%22 y=%22-18%22 width=%2210%22 height=%228%22/%3E%3Crect x=%2228%22 y=%22-18%22 width=%2210%22 height=%228%22/%3E%3C/g%3E%3Crect x=%22-6%22 y=%22-66%22 width=%2216%22 height=%2220%22 fill=%22%23c8373b%22/%3E%3Crect x=%22-6%22 y=%22-70%22 width=%2216%22 height=%225%22 fill=%22%2326343a%22/%3E%3C/g%3E%3Cpath d=%22M500 648 C560 652 600 652 660 646%22 stroke=%22%23fff%22 stroke-opacity=%22.5%22 stroke-width=%223%22 fill=%22none%22/%3E%3Cg transform=%22translate(1320 760)%22 opacity=%22.85%22%3E%3Ccircle r=%2270%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.35%22 stroke-width=%223%22/%3E%3Cpath d=%22M0 -84 L10 -10 L0 0 L-10 -10Z%22 fill=%22%23c8373b%22/%3E%3Cpath d=%22M0 84 L10 10 L0 0 L-10 10Z%22 fill=%22%23fff%22 fill-opacity=%22.6%22/%3E%3Cpath d=%22M-84 0 L-10 -10 L0 0 L-10 10Z M84 0 L10 -10 L0 0 L10 10Z%22 fill=%22%23fff%22 fill-opacity=%22.45%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%2326343a%22 stroke-width=%223%22 opacity=%22.55%22%3E%3Cpath d=%22M860 220 q12 -9 24 0 q12 -9 24 0M920 256 q8 -6 16 0 q8 -6 16 0%22/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat, #7eb0d4; }
body.mode-islands.isl-menu .isl-board { background: transparent; border-color: transparent; box-shadow: none; }
body.mode-islands.isl-menu #isl-map { visibility: hidden; }
body.mode-islands.isl-menu #isl-intro { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(10,30,40,.35); }

/* ---------- Menus: the section's name as a heading inside the card (not floating over the scenery) ---------- */
.menu-title { margin: 0 0 2px; font-family: Outfit, Inter, sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.01em; text-align: center; color: var(--text); line-height: 1.15; }
body.mode-vhub .vhub > .isl-top,
body.mode-birds.bird-menu .birdgame > .isl-top,
body.mode-nat.nat-menu .natgame > .isl-top,
body.mode-wind.wind-menu .windgame > .isl-top,
body.mode-mountains.mtn-menu .mtngame > .isl-top,
body.mode-islands.isl-menu .islandgame > .isl-top { display: none; }
.isl-intro .dly-slot { margin: 4px 0 12px; }
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .menu-title, .isl-intro h2 { font-size: 22px; }
}
.dly-txt { text-align: left; }
.dly-topic { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); vertical-align: 2px; margin-left: 4px; white-space: nowrap; }
@media (max-width: 600px) {
  .dly-banner { grid-template-columns: 28px 1fr auto; gap: 8px; padding: 8px 10px; }
  .dly-ic { font-size: 20px; }
  .dly-txt b { font-size: 14px; }
  .dly-txt small { font-size: 11.5px; line-height: 1.3; }
  .dly-go { padding: 6px 11px; font-size: 13px; }
  .isl-intro { padding: 16px 14px; width: calc(100% - 20px); }
  .isl-intro p { font-size: 14px; margin-bottom: 12px; }
}
/* Islands daily: the island's outline instead of a photo */
.photo-shape { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #cfe3ee, #7fa9c2); }
.photo-shape svg { width: 86%; height: 86%; }
.photo-shape path { fill: #4f7d4a; stroke: #2c4a2f; stroke-width: 6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dly-isl-map { width: 100%; max-height: 320px; display: block; background: #d9e8f0; border-radius: 12px; }
.dly-isl-map path { fill: #b9c8b3; stroke: #fff; stroke-width: 3; }
.dly-isl-map path.on { fill: #3f8a4a; }
@media (max-width: 600px) { .dly-txt small.dly-deflt { display: none; } }
.photo-wrap.is-shape .photo-expand { display: none; }

/* ---------- Top bar: Back and Main page stand out from the section tabs ---------- */
.topbar .brand { gap: 10px; }
.vback, body.in-villages .vback { background: var(--accent); color: #fff; border: 0; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 800; }
.vback:hover { background: color-mix(in srgb, var(--accent) 85%, #000); border-color: transparent; }
.topbar #btn-home { background: var(--accent); color: #fff; border: 0; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.topbar #btn-home:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.topbar .modes { margin-left: 8px; padding-left: 16px; border-left: 2px solid var(--line); }
@media (max-width: 860px) { .topbar .brand { gap: 12px; } }

/* ---------- Weather widget ---------- */
.wx-toggle { width: auto !important; padding: 0 9px 0 7px; gap: 3px; border-radius: 999px; display: inline-flex; align-items: center; font: 700 13.5px Inter, system-ui, sans-serif; color: inherit; }
.wx-toggle[hidden] { display: none; }
.wx-ic { font-size: 17px; line-height: 1; }
.wx-t { font-variant-numeric: tabular-nums; }
.home-tools .wx-toggle { height: 44px; padding: 0 12px 0 10px; font-size: 15px; }
.wx-pop { width: min(340px, calc(100vw - 16px)); }
.wx-list { display: grid; gap: 4px; }
.wx-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ic place temp" "ic wind wind"; gap: 0 8px; align-items: center; padding: 7px 8px; border-radius: 12px; background: var(--surface-2); }
.wx-big { grid-area: ic; font-size: 22px; text-align: center; }
.wx-place { grid-area: place; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wx-place b { font-size: 14px; } .wx-place small { font-size: 12px; color: var(--muted); }
.wx-temp { grid-area: temp; font: 800 18px Outfit, Inter, sans-serif; }
.wx-wind { grid-area: wind; display: flex; align-items: baseline; gap: 5px; font-size: 12.5px; min-width: 0; flex-wrap: wrap; }
.wx-wind small { color: var(--muted); font-size: 12px; }
.wx-arrow { font-style: normal; display: inline-block; font-weight: 800; color: var(--accent); }
.wx-foot { margin: 0; font-size: 11.5px; color: var(--muted); }
.wx-foot a { color: inherit; }
@media (max-width: 420px) { .topbar .wx-toggle { padding: 0 5px; font-size: 12.5px; } .topbar .wx-ic { font-size: 15px; } }
@media (max-width: 1559px) { .topbar .modes { display: none; } }
@media (max-width: 480px) {
  .home-tools { gap: 3px; }
  .home-tools .icon-btn { width: 34px; height: 34px; }
  .home-tools .wx-toggle { height: 34px; padding: 0 8px 0 6px; font-size: 13px; }
}
@media (max-width: 400px) {
  .home-flag { visibility: hidden; }
  .topbar .wx-toggle .wx-t { display: none; }
  .topbar .brand { gap: 6px; }
  .topbar .icon-btn { width: 30px; height: 30px; }
  .topbar .lang-switch button { padding: 4px 5px; }
  .topbar .wx-toggle { padding: 0 4px; }
}

/* ---------- Seasons on the start page (js/season.js) ---------- */
.season-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ss-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.season-note { margin: 12px 0 0; display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(8,23,37,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-weight: 700; font-size: 15px; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.season-note[hidden] { display: none; }
.season-note b { font-variant-numeric: tabular-nums; }
.ss-top { position: absolute; left: 0; right: 0; top: 0; }
.ss-bunting { display: block; width: 100%; height: clamp(40px, 7vw, 90px); }
.ss-lights .bulb { animation: bulb 1.8s ease-in-out infinite; }
@keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ss-fly { position: absolute; left: 0; animation: ss-ltr linear forwards; will-change: transform; }
.ss-fly.rtl { animation-name: ss-rtl; }
.ss-fly.rtl svg { transform: scaleX(-1); }
@keyframes ss-ltr { 0% { transform: translate(-340px, 0); } 25% { transform: translate(22vw, -2vh); } 50% { transform: translate(48vw, 1vh); } 75% { transform: translate(74vw, -2vh); } 100% { transform: translate(calc(100vw + 40px), 0); } }
@keyframes ss-rtl { 0% { transform: translate(calc(100vw + 40px), 0); } 50% { transform: translate(48vw, 2vh); } 100% { transform: translate(-340px, 0); } }
.ss-sleigh svg { width: clamp(180px, 22vw, 300px); display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.ss-sleigh .leg1, .ss-sleigh .leg2 { display: none; }
.ss-bat svg { width: clamp(34px, 4vw, 60px); display: block; }
.ss-bat .wing { transform-origin: 30px 14px; animation: flap .28s ease-in-out infinite alternate; }
@keyframes flap { to { transform: scaleY(.35); } }
.ss-balloon { top: auto; bottom: -120px; left: 0; animation-name: ss-up; }
.ss-balloon svg { width: clamp(30px, 3.4vw, 46px); display: block; }
@keyframes ss-up { 0% { transform: translate(var(--x, 10vw), 0); } 50% { transform: translate(calc(var(--x, 10vw) + 3vw), -60vh); } 100% { transform: translate(var(--x, 10vw), calc(-100vh - 160px)); } }
.ss-boat { top: auto; bottom: 0; }
.ss-boat svg { width: clamp(220px, 26vw, 340px); display: block; }
.ss-boat .oar { transform-box: fill-box; transform-origin: top right; animation: row 1.2s ease-in-out infinite; }
@keyframes row { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(28deg); } }
.ss-ground { position: absolute; inset: auto 0 0 0; height: 0; }
.ss-egg, .ss-chick, .ss-pumpkin { position: absolute; bottom: 0; }
.ss-egg svg, .ss-chick svg, .ss-pumpkin svg { display: block; width: 100%; }
.ss-egg.e1 { left: 2vw; width: clamp(34px, 4vw, 58px); transform: rotate(-10deg); }
.ss-egg.e2 { left: calc(2vw + clamp(30px, 3.6vw, 52px)); width: clamp(28px, 3.2vw, 46px); transform: rotate(12deg); }
.ss-egg.e3 { right: 3vw; width: clamp(34px, 4vw, 58px); transform: rotate(8deg); }
.ss-egg.e4 { right: calc(3vw + clamp(64px, 7vw, 100px)); width: clamp(26px, 3vw, 42px); transform: rotate(-6deg); }
.ss-chick { right: calc(3vw + clamp(30px, 3.6vw, 54px)); width: clamp(40px, 4.4vw, 64px); animation: peep 3s ease-in-out infinite; transform-origin: bottom center; }
@keyframes peep { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-8px) rotate(-6deg); } 90% { transform: translateY(0) rotate(4deg); } }
.ss-pumpkin.p1 { left: 1.5vw; width: clamp(60px, 7vw, 110px); }
.ss-pumpkin.p2 { left: calc(1.5vw + clamp(50px, 6vw, 96px)); width: clamp(40px, 4.4vw, 70px); }
.ss-pumpkin.p3 { right: 2vw; width: clamp(64px, 7.5vw, 120px); }
.ss-pumpkin .glow { animation: flicker 1.4s infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 40% { opacity: .7; } 60% { opacity: .95; } 80% { opacity: .6; } }
.ss-moon { position: absolute; top: 2vh; left: 47vw; width: clamp(120px, 16vw, 220px); }
.ss-moon svg { display: block; width: 100%; }
.ss-bigflag { position: absolute; left: 1.5vw; bottom: 0; width: clamp(70px, 8vw, 120px); }
.ss-bigflag svg { display: block; width: 100%; }
.ss-bigflag .wave { transform-origin: 13px 50px; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-4deg) scaleX(.94); } }
.ss-fire { position: absolute; left: 3vw; bottom: 0; width: clamp(80px, 9vw, 150px); }
.ss-fire svg { display: block; width: 100%; }
.ss-fire .flames { transform-origin: 80px 140px; animation: fire .5s ease-in-out infinite alternate; }
@keyframes fire { to { transform: scale(1.06, .92) skewX(3deg); } }
/* tints */
.home.season-christmas .home-map .land, .home.season-newyear .home-map .land { fill: url(#snow-grad); stroke: rgba(255,255,255,.6); }
.home.season-easter .home-map .land, .home.season-jonsoka .home-map .land, .home.season-olavsoka .home-map .land, .home.season-flaggdagur .home-map .land { fill: url(#spring-grad); }
.home.season-halloween .home-map .land { fill: url(#dusk-grad); stroke: rgba(255,160,80,.35); }
.home.season-halloween .home-map .v { fill: #ff8a2a; }
.home.season-halloween .home-sea { filter: hue-rotate(60deg) saturate(.8) brightness(.8); }
.home.season-jonsoka .home-sea { filter: brightness(1.8) saturate(.9); }
.home.season-olavsoka .home-sea, .home.season-flaggdagur .home-sea, .home.season-easter .home-sea { filter: brightness(1.45); }
.home.season-newyear .home-sea { filter: brightness(.8); }
@media (prefers-reduced-motion: reduce) { .ss-fly, .ss-balloon { display: none; } .ss-lights .bulb, .ss-bat .wing, .ss-chick, .ss-pumpkin .glow, .ss-fire .flames, .ss-bigflag .wave, .ss-boat .oar { animation: none; } }
@media (max-width: 700px) { .ss-moon { left: auto; right: 3vw; top: 22vh; width: 110px; } }

/* ---------- Notices (bell) ---------- */
.nt-toggle { position: relative; }
.nt-toggle[hidden] { display: none; }
.nt-dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #e2302e; box-shadow: 0 0 0 2px var(--bg); }
.home-tools .nt-dot { box-shadow: 0 0 0 2px #0a1d2e; }
.nt-dot[hidden] { display: none; }
.nt-toggle.has-new svg { animation: ring 2.4s ease-in-out 1s 2; transform-origin: 50% 15%; }
@keyframes ring { 0%, 30%, 100% { transform: rotate(0); } 5% { transform: rotate(14deg); } 10% { transform: rotate(-12deg); } 15% { transform: rotate(8deg); } 20% { transform: rotate(-5deg); } }
.nt-pop { width: min(360px, calc(100vw - 16px)); }
.nt-list { display: grid; gap: 8px; max-height: min(60vh, 460px); overflow: auto; }
.nt-item { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.nt-item.new { box-shadow: inset 3px 0 0 #e2302e; }
.nt-item time { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.nt-item h4 { margin: 2px 0 4px; font-size: 15px; }
.nt-item p { margin: 0; font-size: 14px; line-height: 1.45; }
.nt-item a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .nt-toggle.has-new svg { animation: none; } }
@media (max-width: 400px) { .topbar .nt-toggle:not([hidden]) ~ .wx-toggle { display: none; } }