/* Hallig - Oberflaeche im Stil einer Gezeitentafel. Linien dezent, nur
   Knoepfe und Eingaben kraeftig. Farben folgen dem Hub-Theme (data-theme). */

:root,
[data-theme="light"] {
  --hl-paper: #F3EEE2;
  --hl-ink: #24394A;
  --hl-muted: #5B6B78;
  --hl-line: rgb(36 57 74 / 0.18);
  --hl-accent: #24394A;
  --hl-accent-ink: #F3EEE2;
  --hl-warn: #8C2F1E;
  --hl-focus: #B5651D;
  --hl-top: 76px;
  --hl-disc: #E2E9E1;        /* Halligbuch: Scheibe hinter den Symbolen */
  --hl-disc-rim: #A9B6AC;
}

[data-theme="dark"] {
  --hl-paper: #1C2A36;
  --hl-ink: #EDE6D6;
  --hl-muted: #B4BCC2;
  --hl-line: rgb(237 230 214 / 0.2);
  --hl-accent: #EDE6D6;
  --hl-accent-ink: #1C2A36;
  --hl-warn: #F0A08C;
  --hl-focus: #F2C27B;
  --hl-disc: #C9D3CB;
  --hl-disc-rim: #6F7F78;
}

[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--hl-paper);
  color: var(--hl-ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
h1, h2, .hud__score, .end__score {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 600;
}
h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.muted { color: var(--hl-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.hallig { position: fixed; inset: 0; container-type: inline-size; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.panel {
  background: var(--hl-paper);
  color: var(--hl-ink);
  border: 1px solid var(--hl-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(20 30 40 / 0.12);
}
.btn {
  min-height: 44px; min-width: 44px; padding: 0 18px;
  border-radius: 8px; border: 2px solid var(--hl-accent);
  background: var(--hl-accent); color: var(--hl-accent-ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn--ghost { background: transparent; color: var(--hl-ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
:where(button, a, #scene, input, textarea):focus-visible { outline: 3px solid var(--hl-focus); outline-offset: 3px; }

.hud {
  position: absolute; inset: 0; pointer-events: none;
  padding: var(--hl-top) 16px 16px;
  /* minmax(0, 1fr): lange Aufgaben scrollen, statt die Kartenleiste aus dem Bild zu schieben (#142). */
  display: grid; grid-template: auto minmax(0, 1fr) auto / 1fr minmax(220px, 280px); gap: 12px;
}
.hud > section { pointer-events: auto; }
.hud__top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; }
.hud__top p { margin: 0; padding: 4px 12px; border-radius: 8px; background: var(--hl-paper); border: 1px solid var(--hl-line); }
.hud__score { font-size: 1.4rem; }
/* Landunter-Countdown: ruhig, ab 2 Karten Rahmen in Warnfarbe (Zeichen wechselt mit). */
.hud__flood-reach { color: var(--hl-muted); font-size: 0.85em; }
.hud__flood.is-near { border-color: var(--hl-warn); box-shadow: inset 0 0 0 1px var(--hl-warn); }
.hud__flood.is-near #flood-sym { color: var(--hl-warn); }
.hud__quests { grid-column: 2; grid-row: 2; align-self: start; padding: 12px 14px; max-height: calc(100% - var(--hl-hint-space, 0px)); box-sizing: border-box; overflow: auto; }
.hud__quests ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.hud__quests p { margin: 0; }
.hud__cards { grid-column: 1; grid-row: 3; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; }
.card { width: 96px; height: 96px; }
.card svg { width: 100%; height: 100%; display: block; }
.card--small { width: 52px; height: 52px; }
.card[data-quest="1"] { outline: 2px dashed var(--hl-ink); outline-offset: 4px; border-radius: 50%; }
.hud__preview { display: flex; gap: 6px; }
.hud__deck { margin: 0; }
.hud__deck.is-low { color: var(--hl-warn); font-weight: 700; outline: 2px solid var(--hl-warn); outline-offset: 3px; border-radius: 4px; }
.hud__deck.is-bump { animation: hl-bump 0.35s ease-out; }
@keyframes hl-bump { 35% { transform: translateY(-6px) scale(1.15); } }
.hud__actions { display: flex; gap: 6px; }
.card--current { cursor: pointer; }   /* Antippen dreht rechts herum */
.hud button, .card--current { touch-action: manipulation; }   /* kein Doppeltipp-Zoom, keine Verzoegerung */
.hud__quests-toggle { display: none; pointer-events: auto; }
/* Kreativ (Paket D): "Fertig" oben, Auswahlleiste an der Stelle der Aufgaben. */
.hud__finish { pointer-events: auto; margin-left: auto; }
.hud__picker { grid-column: 2; grid-row: 2; align-self: start; padding: 12px 14px; max-height: 100%; box-sizing: border-box; overflow: auto; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.picker__card {
  aspect-ratio: 1; min-width: 44px; min-height: 44px; padding: 3px; box-sizing: border-box;
  border: 2px solid transparent; border-radius: 8px; background: transparent; color: var(--hl-ink);
  cursor: pointer; touch-action: manipulation;
}
.picker__card svg { width: 100%; height: 100%; display: block; }
.picker__card[aria-pressed="true"] { border-color: var(--hl-ink); background: var(--hl-line); }

.flag, .aim, .float {
  position: fixed; margin: 0; transform: translate(-50%, -100%);
  pointer-events: none; font-weight: 700;
}
.flag { background: var(--hl-ink); color: var(--hl-paper); font-size: 0.85rem; padding: 2px 7px; border-radius: 4px 4px 4px 0; }
/* Kronen-Feld: goldenes Faehnchen mit dunkler Schrift (8:1), Zustand steht als Zeichen im Text. */
.flag--crown { background: #E7C25A; color: #2A2112; border: 1px solid #8A6A1C; white-space: nowrap; }
.flag--crown.is-done { background: #F3E2A8; }
.quest--crown .crown__sym { color: #A27A16; }
[data-theme="dark"] .quest--crown .crown__sym { color: #E7C25A; }
.quest--crown.is-done { font-weight: 600; }
.quest--crown.is-failed { color: var(--hl-muted); }
.aim { background: var(--hl-paper); color: var(--hl-ink); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--hl-line); white-space: nowrap; }
.aim--bad { color: var(--hl-warn); border: 2px dashed var(--hl-warn); }
.float { color: var(--hl-ink); text-shadow: 0 1px 0 var(--hl-paper); animation: hl-float 0.9s ease-out forwards; }
@keyframes hl-float { to { transform: translate(-50%, -220%); opacity: 0; } }

.hint {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%);
  max-width: min(520px, calc(100% - 32px)); margin: 0; padding: 10px 14px;
}
.banner {
  position: absolute; left: 16px; right: 16px; top: calc(var(--hl-top) - 8px);
  max-width: 720px; margin: 0 auto; padding: 8px 12px; border-radius: 8px;
  background: var(--hl-paper); color: var(--hl-warn); border: 1px solid var(--hl-warn); font-weight: 600;
}

.screen {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px)); overflow: auto;
  /* Unter der Game-Shell (oben, Hoehe ~ --hl-top) bleiben, auch wenn der Bildschirm hoch ist. */
  top: calc(50% + var(--hl-top) / 2 - 8px); max-height: calc(100% - var(--hl-top) - 32px);
  padding: 22px; display: grid; gap: 12px;
}
.screen p { margin: 0; }
.screen__row { display: grid; gap: 4px; }
.screen__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Startbildschirm (Paket D): Tagesinsel hervorgehoben, darunter die weiteren Modi mit je einer Zeile. */
.daily { padding: 12px 14px; border: 2px solid var(--hl-ink); border-radius: 8px; }
.daily__btn { justify-self: start; font-size: 1.1rem; }
.modes { list-style: none; margin: 0; padding: 0; display: grid; }
.mode {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 12px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--hl-line);
}
.mode:last-child { border-bottom: 1px solid var(--hl-line); }
.mode .btn { grid-row: span 2; padding: 0 12px; }
.mode p { grid-column: 2; }
.start__main, .start__side { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 840px) and (min-height: 560px) {
  .screen--start { width: min(820px, calc(100% - 32px)); grid-template-columns: 1.1fr 1fr; gap: 24px; }
  .start__side { border-left: 1px solid var(--hl-line); padding-left: 24px; }
  .start__side .level { border-top: 0; padding-top: 0; }
}
@media (max-width: 600px) {
  .mode { grid-template-columns: 7rem 1fr; gap: 0 10px; }
}
.end__score { font-size: 2rem; }
/* Inselname (Paket F): Endbildschirm, Album-Zeile und Album-Ansicht. */
.end__name, .island-name { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 600; }
.end__name { font-size: 1.25rem; font-style: italic; }
.island-name { display: block; }
/* Album-Ansicht: Name und Daten ueber den Knoepfen, so breit wie noetig. */
.viewer { width: max-content; max-width: min(560px, calc(100% - 32px)); box-sizing: border-box; }
.viewer p { flex-basis: 100%; }
progress { width: 100%; accent-color: var(--hl-ink); }
.level { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--hl-line); }
.level__title, .levelup__title { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 600; }
.level__title { font-size: 1.1rem; }
.levelup {
  display: grid; gap: 4px; padding: 12px 14px; border-radius: 8px;
  border: 2px solid var(--hl-ink); text-align: center;
}
.levelup__title { font-size: 1.4rem; }
.levelup.is-anim { animation: hl-levelup 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
h3 { font-size: 1rem; margin: 0; }
.screen--progress { width: min(640px, calc(100% - 32px)); }
.screen__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.screen__head h2 { margin: 0; }
.goals { display: grid; gap: 6px; }
.goals__list, .challenges, .ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ranks { gap: 2px; }
.goal { display: grid; gap: 2px; }
.goal__line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; }
.rank { font-weight: 600; white-space: nowrap; }
.rank__sym { letter-spacing: 0.1em; }
.challenge {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  border-top: 1px solid var(--hl-line); padding-top: 10px;
}
.challenge > * { grid-column: 1; }
.challenge h4 { margin: 0; font-size: 1rem; }
.challenge .rank { grid-column: 2; grid-row: 1; justify-self: end; }
.challenge .pin { grid-column: 2; grid-row: 2 / span 3; justify-self: end; }
.pin[aria-pressed="true"] { background: var(--hl-accent); color: var(--hl-accent-ink); }
.pin[aria-pressed="false"] .pin__mark { display: none; }
@keyframes hl-levelup {
  0% { transform: scale(0.85); opacity: 0; box-shadow: 0 0 0 0 var(--hl-focus); }
  60% { transform: scale(1.03); opacity: 1; box-shadow: 0 0 0 10px transparent; }
  100% { transform: scale(1); }
}
.screen--album { width: min(720px, calc(100% - 32px)); }

/* Halligbuch (Paket E2): Raster aus 12 Karten. Unentdeckt: gestrichelter Rand, Silhouette, "?" und
   der Zustand als Text. Die Scheibe hinter den Symbolen folgt dem Theme. */
.screen--book { width: min(900px, calc(100% - 32px)); }
.book-disc { fill: var(--hl-disc); stroke: var(--hl-disc-rim); stroke-width: 1; }
.book__count { font-weight: 600; }
.book {
  list-style: none; margin: 0; padding: 4px; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.book:focus-visible { outline-offset: 0; }
.book__card {
  display: grid; grid-template-columns: 64px 1fr; gap: 2px 10px; align-content: start;
  padding: 10px; border: 1px solid var(--hl-line); border-radius: 8px;
}
.book__card > :not(.book__sym) { grid-column: 2; }
.book__card > .book__how, .book__card > .book__fact { grid-column: 1 / -1; }
.book__card.is-unknown { border-style: dashed; border-color: var(--hl-muted); }
.book__card h3 { font-size: 1rem; align-self: end; hyphens: auto; }
.book__sym { grid-row: 1 / span 2; width: 64px; height: 64px; display: block; }
.book__sym svg { width: 100%; height: 100%; display: block; }
.book__state { font-size: 0.85rem; color: var(--hl-muted); }
.is-found .book__state { color: var(--hl-ink); }
.book__fact { font-size: 0.92rem; }
.book__how { font-size: 0.85rem; color: var(--hl-muted); }
.book-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
/* Endbildschirm: neue Eintraege als kleiner Hoehepunkt (Symbol plus Text). */
.bookup { padding: 10px 14px; border-radius: 8px; border: 2px solid var(--hl-ink); }
.bookup__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bookup__item { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.bookup__item .book__sym { width: 48px; height: 48px; flex: none; }
.bookup.is-anim { animation: hl-levelup 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@media (max-width: 600px) {
  .book { grid-template-columns: 1fr; }
}
.album { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.album__item {
  display: grid; grid-template-columns: 128px 1fr auto auto; gap: 10px; align-items: center;
  border-top: 1px solid var(--hl-line); padding-top: 10px;
}
.album__item img { width: 128px; height: 80px; object-fit: cover; border-radius: 6px; background: var(--hl-line); }
.viewer {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px;
}
.viewer p { margin: 0; }
.share-text {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 8px;
  font: inherit; color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 6px; resize: vertical;
}

/* Ab 720 px sitzt die Game-Shell unten (game-shell.css): oben nur Rand, unten Platz fuer sie.
   Gilt auch fuer 200 % Zoom auf einem Laptop. */
@media (max-width: 720px) {
  .hallig { --hl-top: 16px; }
  .hud { padding-bottom: 84px; }
  .screen { top: calc(50% - 34px); max-height: calc(100% - 116px); }
  .viewer { bottom: 84px; }
}

/* Vorbereitet fuer Handy-Hochformat: alles untereinander. Die Aufgaben scrollen, wenn
   der Platz knapp ist, damit Karte und Knoepfe nie verdeckt werden. */
@container (max-width: 640px) {
  .hud { grid-template: auto minmax(0, 1fr) auto / 1fr; }
  .hud__quests { grid-column: 1; grid-row: 2; max-height: calc(100% - var(--hl-hint-space, 0px)); box-sizing: border-box; overflow: auto; }
  .hud__cards { grid-column: 1; grid-row: 3; justify-self: stretch; }
  .album__item { grid-template-columns: 96px 1fr; }
  /* Auswahlleiste als waagerechter Streifen, der seitlich scrollt. */
  .hud__picker { grid-column: 1; grid-row: 2; justify-self: stretch; overflow: hidden; padding: 2px 4px; }
  /* Innenabstand, damit der Fokusrahmen (3 px + 3 px Abstand) nicht abgeschnitten wird. */
  .picker { display: flex; overflow-x: auto; overscroll-behavior-x: contain; padding: 7px; scroll-padding: 7px; }
  .picker__card { flex: 0 0 56px; height: 56px; }
}

/* Handy: Hochformat (schmal) und Querformat (niedrig), dazu niedrige Desktop-Fenster, etwa
   200 % Zoom am Laptop (#142). Aufgaben eingeklappt, Karte und Knoepfe kompakt. */
@media (max-width: 600px), (max-height: 500px) {
  .hud__quests-toggle { display: inline-flex; align-items: center; justify-self: end; margin-left: auto; padding: 0 12px; }
  .hud__quests:not(.is-open) { display: none; }
  .hud__quests { box-sizing: border-box; max-height: calc(100% - var(--hl-hint-space, 0px)); overflow: auto; }
  .hud__top p { padding: 2px 10px; }
  .hud__score { font-size: 1.15rem; }
  .hud__mode { font-size: 0.85rem; }
  .card { width: 80px; height: 80px; }
  .card--small { width: 40px; height: 40px; }
  .hud__cards { gap: 8px 10px; padding: 8px 12px; }
  .hud__actions .btn { padding: 0 12px; }
}

/* Querformat am Handy: Shell oben (ab 721 px Breite), Aufgaben rechts, Leiste unten ueber die volle Breite. */
@media (pointer: coarse) and (max-height: 500px) {
  /* Die Shell zeigt ab 721 px Textlabels, die hier zweizeilig umbrechen (~86 px hoch). */
  .hallig { --hl-top: 108px; }
  .card--current { width: 64px; height: 64px; }
  .hud { grid-template: auto minmax(0, 1fr) auto / 1fr minmax(200px, 280px); gap: 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .hud__top { align-items: center; }
  .hud__quests-toggle { margin-left: auto; }
  .hud__quests, .hud__picker { grid-column: 2; grid-row: 2; }
  .hud__cards { grid-column: 1 / -1; grid-row: 3; justify-self: center; flex-wrap: nowrap; }
  .hint { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 92px); left: 16px; transform: none; max-width: calc(100% - 332px); }
}

/* Hochformat am Handy: Shell unten (game-shell.css), darueber die Leiste mit Karte links,
   Vorschau und Stapel oben rechts, Drehen/Rueckgaengig/Legen darunter. */
@media (max-width: 600px) {
  .hallig { --hl-shell: calc(max(10px, env(safe-area-inset-bottom)) + 68px); }
  .hud {
    grid-template: auto auto minmax(0, 1fr) auto / 1fr; gap: 8px;
    padding: max(12px, env(safe-area-inset-top)) 12px var(--hl-shell);
  }
  .hud__top { grid-row: 1; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
  .hud__top p { justify-self: start; }
  .hud__mode { grid-column: 1; }
  .hud__flood { grid-column: 1 / -1; font-size: 0.85rem; }
  .hud__quests-toggle { grid-column: 2; grid-row: 1 / span 2; }
  .hud__quests { grid-column: 1; grid-row: 2; max-height: 45vh; }
  .hud__finish { grid-column: 2; grid-row: 1 / span 2; }
  .hud__picker { grid-column: 1; grid-row: 2; }
  .hud__picker h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hud__cards {
    grid-column: 1; grid-row: 4; justify-self: stretch;
    display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "card prev deck" "card act act";
  }
  #card-current { grid-area: card; align-self: center; }
  .hud__preview { grid-area: prev; }
  .hud__deck { grid-area: deck; justify-self: end; text-align: right; }
  .hud__actions { grid-area: act; }
  .hud__place { flex: 1; }
  .hint { bottom: calc(var(--hl-shell) + 128px); }
  .viewer { bottom: var(--hl-shell); }
}

/* Belohnungsseite am Handy: Rang und Anpinnen unter den Text statt daneben. */
@media (max-width: 600px) {
  .challenge > * { grid-column: 1 / -1; }
  .challenge h4 { grid-column: 1; }
  .challenge .rank { grid-column: 2; grid-row: 1; }
  .challenge .pin { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion="system"] .float, [data-motion="aus"] .float { animation: none; opacity: 0; }
}
[data-motion="aus"] .float { animation: none; opacity: 0; }