/* Kapitel 2 – Asien. Eigene Farbwelt (Tusche, Jade, Gold), gleicher Aufbau wie Kapitel 1. */

:root {
  --tusche: #0d1014;
  --dunkel: #161d24;
  --rand: #2b3742;
  --jade: #2ec4a6;
  --jade-hell: #5ff0cd;
  --gold: #e8b046;
  --zinnober: #e2483c;
  --papier: #e9e2d4;
  --grau: #8b959e;
  --wasser: #16222c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--tusche);
  color: var(--papier);
  font-family: "Special Elite", "Courier New", monospace;
  line-height: 1.6;
}
h1, h2 {
  font-family: "Bangers", "Impact", fantasy;
  font-weight: normal;
  letter-spacing: 3px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(232, 176, 70, .35), 0 4px 0 #3a2a08;
  margin: 0 0 .5em;
}
section { padding: 70px 20px; max-width: 1160px; margin: 0 auto; }
a { color: var(--jade); }

/* ---------- Startbild ---------- */
#start {
  max-width: none;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  position: relative;
  background: radial-gradient(ellipse at 50% 45%, #18242c 0%, var(--tusche) 70%);
  overflow: hidden;
}
#start h1 { font-size: clamp(2.6rem, 10vw, 6.5rem); line-height: 1; }
#start p { font-size: 1.15rem; max-width: 620px; color: var(--papier); padding: 0 20px; }
.untertitel { color: var(--jade); letter-spacing: 2px; }

/* Asien zeichnet sich selbst */
#umriss { width: min(92vw, 780px); height: auto; margin: 10px 0 20px; }
#umriss .land {
  fill: rgba(46, 196, 166, .08);
  stroke: var(--jade);
  stroke-width: 1.1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: zeichnen 5s ease-out forwards;
}
#umriss .fluesse { fill: none; stroke: var(--gold); stroke-width: .9; opacity: 0; animation: einblenden 2s ease-out 2.4s forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes einblenden { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  #umriss .land { animation: none; stroke-dashoffset: 0; }
  #umriss .fluesse { animation: none; opacity: .55; }
}

.runter {
  position: absolute; bottom: 22px; color: var(--jade); text-decoration: none;
  font-size: 2rem; animation: schweben 2s infinite;
}
@keyframes schweben { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* ---------- Rekorde ---------- */
.zahlen { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.zahl {
  flex: 1 1 160px; background: var(--dunkel); border: 1px solid var(--rand);
  border-top: 3px solid var(--gold); padding: 16px 18px;
}
.zahl b { display: block; font-family: "Bangers", fantasy; font-weight: normal;
          font-size: 2.1rem; letter-spacing: 2px; color: var(--jade-hell); line-height: 1.1; }
.zahl span { color: var(--grau); font-size: .95rem; }

.rekorde { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rekorde li {
  background: var(--dunkel); border-left: 4px solid var(--zinnober); padding: 12px 18px;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
}
.rekorde b { color: var(--gold); font-weight: normal; }
.rekorde span { color: var(--papier); }

/* ---------- Karten ---------- */
.kartenwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.kartenwahl button {
  font: inherit; color: var(--papier); background: var(--dunkel);
  border: 2px solid var(--rand); padding: 9px 16px; cursor: pointer; transition: all .15s;
}
.kartenwahl button:hover { border-color: var(--jade); }
.kartenwahl button.aktiv { background: var(--jade); border-color: var(--jade); color: #06231d; }

.kartenfeld { display: grid; grid-template-columns: 1.75fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .kartenfeld { grid-template-columns: 1fr; } }

.buehne { position: relative; background: var(--wasser); border: 1px solid var(--rand); }
#karte { width: 100%; height: auto; display: block; touch-action: manipulation; }
#karte .grund { fill: #222c34; stroke: #38444e; stroke-width: .6; }
#karte .nebenfluss { fill: none; stroke: #3b5a6b; stroke-width: .8; }

#karte .form { cursor: pointer; transition: opacity .15s, filter .15s; }
#karte .form:hover { filter: brightness(1.35); }
#karte .form.aktiv { filter: brightness(1.5) drop-shadow(0 0 7px var(--gold)); }
#karte .flaeche { stroke: rgba(13,16,20,.55); stroke-width: .5; }
#karte .linie { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
#karte .linie.treffer { stroke-width: 11; stroke: transparent; }

#karte .marke { pointer-events: none; transition: opacity .2s; }
#karte .marke circle { fill: #0d1014; stroke: var(--gold); stroke-width: 1.6; }
#karte .marke text {
  font-family: "Bangers", fantasy; font-size: 21px; fill: var(--gold);
  text-anchor: middle; dominant-baseline: central; letter-spacing: 1px;
}
#karte .marke.aktiv circle { fill: var(--gold); }
#karte .marke.aktiv text { fill: #0d1014; }
.buehne.ohne-marken #karte .marke { opacity: 0; }
/* Auf dem Handy ist die Karte kleiner – dann müssen die Marken größer werden */
@media (max-width: 860px) {
  #karte .marke circle { r: 20px; }
  #karte .marke text { font-size: 28px; }
}

.kartenknoepfe { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--rand); }
.kartenknoepfe button {
  font: inherit; font-size: .9rem; color: var(--grau); background: transparent;
  border: 1px solid var(--rand); padding: 6px 12px; cursor: pointer;
}
.kartenknoepfe button:hover { color: var(--papier); border-color: var(--jade); }

.legende h3 {
  font-family: "Bangers", fantasy; font-weight: normal; letter-spacing: 2px;
  font-size: 1.6rem; color: var(--jade-hell); margin: 0 0 .2em;
}
.legende .hilfe { color: var(--grau); font-size: .92rem; margin: 0 0 14px; }
.legende ol { list-style: none; padding: 0; margin: 0 0 18px; }
.legende li {
  display: flex; gap: 10px; align-items: baseline; padding: 5px 9px; cursor: pointer;
  border-left: 3px solid transparent;
}
.legende li:hover { background: var(--dunkel); }
.legende li.aktiv { background: var(--dunkel); border-left-color: var(--gold); }
.legende .kuerzel {
  font-family: "Bangers", fantasy; letter-spacing: 1px; color: var(--gold);
  min-width: 1.7em; text-align: right; flex: none;
}
.legende li.aktiv .kuerzel { color: var(--jade-hell); }

.infobox {
  background: var(--dunkel); border: 1px solid var(--rand); border-left: 5px solid var(--jade);
  padding: 18px 22px; min-height: 150px;
}
.infobox h4 {
  font-family: "Bangers", fantasy; font-weight: normal; letter-spacing: 1px;
  font-size: 1.5rem; color: var(--jade-hell); margin: 0 0 .3em;
}
.infobox p { margin: 0; }

/* ---------- Quiz ---------- */
.quiz { background: var(--dunkel); border: 1px solid var(--rand); padding: 30px; text-align: center; }
.quiz .frage { font-size: 1.25rem; margin-bottom: 20px; min-height: 3em; }
.quiz #antworten { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.quiz button {
  font: inherit; font-size: 1.02rem; color: var(--papier);
  background: #1f2a33; border: 2px solid var(--rand); padding: 11px 18px;
  cursor: pointer; transition: background .2s, transform .1s, border-color .2s;
  width: min(100%, 480px);
}
.quiz button:hover { background: var(--jade); border-color: var(--jade); color: #06231d; transform: scale(1.02); }
.quiz button:disabled { cursor: default; transform: none; opacity: .55; }
.quiz .richtig { background: #1f6b52 !important; border-color: var(--jade-hell) !important; color: var(--papier) !important; opacity: 1 !important; }
.quiz .falsch  { background: #7d2018 !important; border-color: var(--zinnober) !important; color: var(--papier) !important; opacity: 1 !important; }
.quiz .rueckmeldung { min-height: 1.6em; margin-top: 16px; font-size: 1.1rem; }
.quiz .punkte { color: var(--grau); margin-top: 10px; }
.fortschritt { height: 5px; background: #1f2a33; margin-bottom: 22px; }
.fortschritt div { height: 100%; background: var(--gold); width: 0; transition: width .3s; }

#eintragen { margin-top: 22px; border-top: 1px dashed var(--rand); padding-top: 20px; }
#eintragen input[type=text] {
  font: inherit; font-size: 1.02rem; background: var(--tusche); color: var(--papier);
  border: 2px solid var(--rand); padding: 10px 12px; width: min(100%, 260px);
}
#eintragen input[type=text]:focus { outline: none; border-color: var(--jade); }
#eintragen .honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formfehler { color: var(--zinnober); min-height: 1.4em; margin-top: 8px; }

.siegerliste { background: var(--dunkel); border: 1px solid var(--rand); padding: 10px 20px; overflow-x: auto; }
.siegerliste table { width: 100%; border-collapse: collapse; }
.siegerliste th {
  font-family: "Bangers", fantasy; font-weight: normal; color: var(--gold);
  font-size: 1.25rem; letter-spacing: 1px; text-align: left; padding: 8px;
}
.siegerliste td { padding: 8px; border-top: 1px solid var(--rand); }
.siegerliste tr.ich td { color: #fff; background: rgba(46, 196, 166, .18); }
.siegerliste td:first-child { width: 4em; }

footer { text-align: center; color: var(--grau); padding: 40px 20px; font-size: .9rem; }
footer strong { color: var(--gold); }
footer a { color: var(--grau); }
.quelle { font-size: .8rem; color: #5d666e; margin-top: 10px; }