/* Handy (und Pult im Online-Fenster): ein Kartentisch mit Kompass und Kilometerzähler. */
body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body.eingebettet { background-attachment: scroll; }
main {
  min-height: 100dvh; max-width: 30rem; margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.2rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.mitte { justify-content: center; text-align: center; }
.logo { font-family: var(--titel); font-size: 2.6rem; line-height: 1; letter-spacing: .02em; }
.logo small { display: block; font-family: var(--schrift); font-style: italic; font-size: 1rem; color: var(--tinte-leise); margin-top: .3em; }
.frage { font-size: 1.25rem; text-align: center; margin: 0; }
.fehler { color: var(--rot); font-style: italic; text-align: center; margin: 0; min-height: 1.3em; }
form.eingabe { display: flex; flex-direction: column; gap: .8rem; width: 100%; max-width: 20rem; }
#codefeld { text-align: center; letter-spacing: .4em; font-family: var(--titel); font-size: 2rem; text-transform: uppercase; }

/* Zeitleiste oben */
.zeitleiste { position: fixed; inset: 0 0 auto 0; height: 6px; z-index: 5; }
.zeitleiste div { height: 100%; background: var(--tinte); transform-origin: left; transform: scaleX(0); }
.zeitleiste.knapp div { background: var(--rot); }
.verbindung { position: fixed; inset: auto 0 0 0; margin: 0; padding: .5em; text-align: center; background: var(--rot); color: #fff; z-index: 6; }

/* Lobby */
.ich { display: flex; align-items: center; gap: .5em; font-size: 1.5rem; font-family: var(--titel); }
.ich .punkt { width: 1.1em; height: 1.1em; }
.einstellen { width: 100%; display: grid; gap: .8rem; }
.einstellen fieldset { border: 0; padding: 0; margin: 0; }
.einstellen legend { font-family: var(--titel); font-size: 1.1rem; margin-bottom: .35rem; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { flex: 1; font: inherit; font-size: 1.05rem; padding: .5em .3em; border: 2px solid var(--tinte); border-radius: 2em; background: transparent; color: var(--tinte); cursor: pointer; }
.chip.an { background: var(--tinte); color: var(--papier-hell); }
.chip:disabled { cursor: default; }

/* Peilen */
.reise { width: 100%; text-align: center; }
.reise .von, .reise .nach { font-family: var(--titel); font-size: 1.7rem; line-height: 1.05; }
.reise .land { display: block; font-family: var(--schrift); font-style: italic; font-size: .85rem; color: var(--tinte-leise); }
.reise .pfeil { font-size: 1rem; color: var(--tinte-leise); margin: .15em 0; font-style: italic; }
.instrumente { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.gesperrt { opacity: .75; }

.kompass { width: min(78vw, 19rem, 42dvh); aspect-ratio: 1; touch-action: none; cursor: grab; border-radius: 50%; filter: drop-shadow(0 6px 10px rgba(60, 35, 5, .35)); }
.kompass.greift { cursor: grabbing; }
.kompass:focus-visible { outline: 3px dashed var(--rot); outline-offset: 4px; }
.kompass-svg { width: 100%; height: 100%; display: block; }
.kompass-svg .hell { fill: #e9d9ae; stroke: #3a2a18; stroke-width: .8; }
.kompass-svg .dunkel { fill: #3a2a18; }
.kompass-svg .schrift text { font-family: var(--titel); fill: #3a2a18; }
.kompass-svg .schrift .nord { fill: var(--rot); }
.nadel { transition: transform .12s ease-out; }
.kompass.greift .nadel { transition: none; }
.nadel-nord { fill: #a3271b; stroke: #4a0e08; stroke-width: 1; }
.nadel-sued { fill: #e8e0cc; stroke: #3a2a18; stroke-width: 1; }
.kompass-anzeige { display: flex; align-items: center; gap: .6rem; }
.kompass-wert { min-width: 7.5ch; text-align: center; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.kompass-wert b { font-family: var(--titel); font-weight: 400; color: var(--rot); }
.fein { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--tinte); background: transparent; color: var(--tinte); font-size: 1.6rem; line-height: 1; cursor: pointer; touch-action: none; }
.fein:active { background: var(--papier-dunkel); }

/* Kilometerzähler: schwarzes Zählwerk hinter Glas in Messingfassung */
.zaehler { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: .6rem;
  background: linear-gradient(#e8cf86, #a6812f 55%, #6f5420); box-shadow: 0 4px 10px rgba(60, 35, 5, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.zaehler-fenster { display: flex; gap: 3px; padding: 4px; border-radius: .3rem; background: #1c1610; box-shadow: inset 0 2px 6px #000; }
.rolle { position: relative; width: 3.1rem; height: 5.6rem; overflow: hidden; border-radius: 3px; touch-action: none; cursor: ns-resize;
  background: linear-gradient(#0d0b09, #2c2620 22%, #3a332b 50%, #2c2620 78%, #0d0b09); }
.rolle:last-child { background: linear-gradient(#2a0905, #7a1a10 22%, #8e2416 50%, #7a1a10 78%, #2a0905); }
.rolle::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 32%, rgba(255, 255, 255, .08) 50%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, .75)); }
.rolle:focus-visible { outline: 3px dashed var(--messing-hell); outline-offset: 2px; }
.band { will-change: transform; }
.band span { display: block; height: 2.6rem; line-height: 2.6rem; text-align: center; color: #f4ecd8; font-family: var(--ziffern); font-size: 2.3rem; font-weight: 600; }
.zaehler-einheit { font-family: var(--titel); font-size: 1.4rem; color: #2a1d08; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.hinweis { font-size: .9rem; font-style: italic; color: var(--tinte-leise); text-align: center; margin: -.3rem 0 0; }

.abschicken { width: 100%; max-width: 20rem; font-size: 1.35rem; }
.abgeschickt { text-align: center; }
.abgeschickt .werte { font-size: 1.3rem; }

/* Auflösung / Ende */
.ergebnis { width: 100%; text-align: center; display: grid; gap: .6rem; }
.ergebnis .gross { font-family: var(--titel); font-size: 3rem; line-height: 1; }
.ergebnis .plus { font-family: var(--titel); font-size: 2.2rem; color: var(--rot); }
.tafel { width: 100%; border-collapse: collapse; font-size: 1.1rem; }
.tafel td { padding: .35em .3em; border-bottom: 1px dashed var(--rand); }
.tafel td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tafel tr.selbst td { font-weight: 700; }
.medaille { font-size: 4rem; line-height: 1; }
.puls { animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 50% { transform: scale(1.08); } }
.wackel { animation: wackel .35s; }
@keyframes wackel { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

@media (max-height: 760px) {
  main { gap: .55rem; padding-top: max(.7rem, env(safe-area-inset-top)); }
  .reise .von, .reise .nach { font-size: 1.35rem; }
  .reise .pfeil { margin: 0; }
  .kompass { width: min(78vw, 19rem, 34dvh); }
  .instrumente { gap: .5rem; }
  .fein { width: 2.3rem; height: 2.3rem; }
  .rolle { height: 4.6rem; width: 2.7rem; }
  .band span { height: 2.2rem; line-height: 2.2rem; font-size: 1.9rem; }
  .hinweis { display: none; }
}
@media (max-height: 600px) {
  .reise .land { display: none; }
  .kompass { width: min(70vw, 30dvh); }
}
.sprachwahl { margin-top: auto; }
/* Europa (4 Rollen) und Welt (5 Rollen) müssen auf schmale Handys passen */
.zaehler.stellen4 .rolle { width: 2.8rem; }
.zaehler.stellen5 .rolle { width: 2.45rem; }
.zaehler.stellen5 .band span { font-size: 2rem; }
.zaehler.stellen5 { gap: .35rem; padding: .5rem .5rem; }