:root {
  --blue: #0000aa;
  --cyan: #55ffff;
  --yellow: #ffff55;
  --white: #ffffff;
  --grey: #aaaaaa;
  --s: 3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--white);
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VT323', ui-monospace, Menlo, monospace;
}

#game {
  position: relative;
  width: 960px;
  height: 720px;
}

#screen {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Alle Schriften skalieren mit dem Spielbild */
#game > div { font-size: calc(var(--s) * 7.5px); }

#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: calc(var(--s) * 2px) calc(var(--s) * 4px);
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--s) * 4.5px) !important;
  color: var(--yellow);
  text-shadow: calc(var(--s) * 0.7px) calc(var(--s) * 0.7px) 0 #000;
  white-space: pre;
  pointer-events: none;
}

#hud i { display: inline-block; vertical-align: calc(var(--s) * -1.5px); filter: drop-shadow(calc(var(--s) * 0.7px) calc(var(--s) * 0.7px) 0 #000); }
.hud-heart {
  width: calc(var(--s) * 8px); height: calc(var(--s) * 8px); margin-right: calc(var(--s) * 1px);
  background: url(assets/sprites/heart.png) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.hud-key { width: calc(var(--s) * 4px); height: calc(var(--s) * 6px); margin-right: calc(var(--s) * 1px); vertical-align: calc(var(--s) * -0.5px) !important; }
.hud-key.k0 { background: #f55; } .hud-key.k1 { background: #55f; } .hud-key.k2 { background: #5f5; } .hud-key.k3 { background: #ff5; }

/* EGA-Fenster: blau, doppelter Rahmen */
#title, #dialog, #msg, #merkliste, #bar, #toast, #result {
  position: absolute;
  background: var(--blue);
  border: calc(var(--s) * 1px) solid var(--white);
  box-shadow: 0 0 0 calc(var(--s) * 1px) var(--blue), 0 0 0 calc(var(--s) * 2px) var(--grey), calc(var(--s) * 4px) calc(var(--s) * 4px) 0 calc(var(--s) * 2px) #000;
}

#title {
  left: 10%; right: 10%; top: 50%;
  transform: translateY(-50%);
  padding: 2% 4%;
  text-align: center;
}
#title h1 {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--s) * 13px);
  color: var(--yellow);
  text-shadow: calc(var(--s) * 1.5px) calc(var(--s) * 1.5px) 0 #aa0000;
}
#title h2 {
  margin: 0.3em 0 0.6em;
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--s) * 5.5px);
  color: var(--cyan);
}
#title p { margin: 0.4em 0; line-height: 1; }
#title table { margin: 0.4em auto; border-spacing: 1em 0; line-height: 1; }
#title td:nth-child(odd) { color: var(--yellow); text-align: right; }
#title td:nth-child(even) { text-align: left; }

.small { font-size: 0.75em; color: var(--grey); }
.blink { color: var(--yellow); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#dialog {
  left: 6%; right: 6%; top: 9%;
  padding: 1.5% 3%;
  line-height: 1.05;
}
#dlg-name { color: var(--yellow); font-family: 'Press Start 2P', monospace; font-size: 0.6em; margin-bottom: 0.4em; }
#dlg-text { margin-bottom: 0.4em; }
#dlg-src { display: block; color: var(--cyan); font-size: 0.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dlg-keys { margin-top: 0.4em; color: var(--yellow); text-align: right; animation: blink 1.2s steps(2) infinite; }

#msg {
  inset: 30% 12%;
  padding: 3%;
  text-align: center;
}
#msg h2 { margin: 0 0 0.5em; font-family: 'Press Start 2P', monospace; font-size: 0.8em; color: var(--yellow); }

#bar {
  left: 4%; right: 4%; bottom: 3%;
  padding: 0.6% 2%;
  text-align: center;
  color: var(--white);
}

#toast {
  top: 12%; left: 50%;
  transform: translateX(-50%);
  padding: 0.6% 3%;
  color: var(--yellow);
  white-space: nowrap;
}

#merkliste {
  inset: 6%;
  padding: 2% 3%;
  display: flex;
  flex-direction: column;
}
#merkliste header { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
#merkliste h2 { margin: 0; font-family: 'Press Start 2P', monospace; font-size: 0.7em; color: var(--yellow); }
#merk-list { list-style: none; margin: 0.5em 0 0; padding: 0; overflow-y: auto; flex: 1; font-size: 0.8em; line-height: 1.05; }
#merk-list li { border-top: 1px dashed var(--grey); padding: 0.4em 0; }
#merk-list a { color: var(--cyan); display: block; }
#merk-list blockquote { margin: 0.2em 0 0.2em 1em; color: var(--grey); font-style: italic; }
.merk-head { color: var(--yellow); font-size: 0.85em; }

button {
  font: inherit;
  font-size: 0.8em;
  background: var(--grey);
  color: #000;
  border: 2px outset var(--white);
  padding: 0 0.5em;
  cursor: pointer;
}
button:active { border-style: inset; }
#merk-list button { font-size: 0.8em; margin-top: 0.2em; }

/* Quiz-Antworten im Rateshow-Raster */
#dlg-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25em 0.8em;
  margin: 0.3em 0 0.5em;
}
#dlg-opts .opt {
  background: #000044;
  border: calc(var(--s) * 0.6px) solid var(--grey);
  padding: 0.15em 0.8em;
  clip-path: polygon(0.5em 0, calc(100% - 0.5em) 0, 100% 50%, calc(100% - 0.5em) 100%, 0.5em 100%, 0 50%);
  line-height: 1;
}
#dlg-opts .opt b { color: var(--yellow); font-weight: normal; }
#dlg-opts .opt.weg { visibility: hidden; }
#dlg-opts .opt.gewaehlt { background: #aa5500; color: var(--white); }
#dlg-opts .opt.richtig { background: #00aa00; color: var(--white); }
#dlg-opts .opt.falsch { background: #aa0000; color: var(--white); }

/* Ortsschilder auf der Weltkarte (gelbe Ortstafel) */
#signs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#game > #signs { font-size: calc(var(--s) * 5px); }
.ortsschild {
  position: absolute;
  transform: translateX(-50%);
  background: var(--yellow);
  color: #000;
  border: calc(var(--s) * 0.6px) solid #000;
  outline: calc(var(--s) * 0.6px) solid var(--yellow);
  border-radius: calc(var(--s) * 1px);
  padding: 0 0.4em 0.1em;
  text-align: center;
  line-height: 0.95;
  white-space: nowrap;
  box-shadow: calc(var(--s) * 1px) calc(var(--s) * 1px) 0 rgba(0, 0, 0, 0.6);
}
.ortsschild b { display: block; font-weight: normal; font-size: 1.15em; }
.ortsschild span { display: block; font-size: 0.8em; }
.ortsschild.nah { background: var(--white); outline-color: var(--white); }
.ortsschild.fertig b::after { content: ' ✓'; color: #00aa00; }

/* Große Ortstafel beim Betreten eines Dorfs */
#ortstafel {
  position: absolute;
  top: 14%; left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: #000;
  border: calc(var(--s) * 1.5px) solid #000;
  outline: calc(var(--s) * 1.5px) solid var(--yellow);
  border-radius: calc(var(--s) * 3px);
  padding: 0.2em 1.2em 0.3em;
  text-align: center;
  line-height: 1;
  box-shadow: calc(var(--s) * 3px) calc(var(--s) * 3px) 0 rgba(0, 0, 0, 0.6);
}
#ortstafel b { display: block; font-size: 2.2em; font-weight: normal; letter-spacing: 0.03em; }
#ortstafel span { display: block; font-size: 1.1em; }

[hidden] { display: none !important; }

/* Sprite-Katalog: index.html?sprites */
body.gallery { display: block; overflow: auto; background: #333; }
#gallery { padding: 16px; display: grid; gap: 16px; }
#gallery figure { margin: 0; background: repeating-conic-gradient(#555 0 25%, #666 0 50%) 0 0 / 16px 16px; padding: 8px; }
#gallery canvas { image-rendering: pixelated; max-width: 100%; display: block; }
#gallery figcaption { font-size: 18px; margin-top: 4px; color: #fff; }

/* ---------------------------------------------------------------- Touch */
.touch-only { display: none; }
body.touch .touch-only { display: revert; }
body.touch .pc-only { display: none !important; }
body.touch { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch #dlg-opts .opt { cursor: pointer; }

/* Dialogtasten als Knöpfe */
body.touch #dlg-keys { animation: none; display: flex; gap: 0.5em; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
#dlg-keys .k { cursor: pointer; }
body.touch #dlg-keys .k {
  background: var(--grey); color: #000; padding: 0.1em 0.7em;
  border: calc(var(--s) * 0.7px) outset var(--white);
}
body.touch #dlg-keys .k:active { border-style: inset; }

#pad { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#pad > * { pointer-events: auto; position: absolute; touch-action: none; }
#pad button {
  font-family: 'Press Start 2P', monospace; color: #fff;
  background: rgba(85, 85, 255, 0.45); border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%; padding: 0;
}
#pad button.on { background: rgba(255, 255, 85, 0.7); color: #000; }

#dpad {
  left: max(12px, env(safe-area-inset-left)); bottom: 12px;
  width: min(40vh, 190px); height: min(40vh, 190px);
  border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 3px solid rgba(255, 255, 255, 0.35);
}
#dpad i { position: absolute; width: 26%; height: 26%; background: rgba(255, 255, 255, 0.55); }
#dpad .u { left: 37%; top: 6%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#dpad .d { left: 37%; bottom: 6%; clip-path: polygon(0 0, 100% 0, 50% 100%); }
#dpad .l { top: 37%; left: 6%; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
#dpad .r { top: 37%; right: 6%; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#dpad.ArrowUp .u, #dpad.ArrowDown .d, #dpad.ArrowLeft .l, #dpad.ArrowRight .r { background: var(--yellow); }

#pad-ab { right: max(12px, env(safe-area-inset-right)); bottom: 12px; width: min(44vh, 210px); height: min(40vh, 190px); }
#pad-ab button { position: absolute; width: 48%; height: 48%; font-size: min(2.4vh, 11px); }
#pad-ab .a { right: 0; top: 8%; width: 54%; height: 54%; background: rgba(255, 85, 85, 0.5); }
#pad-ab .b { left: 0; bottom: 0; }

#pad-top { right: max(12px, env(safe-area-inset-right)); top: 10px; display: flex; flex-direction: column; gap: 6px; width: 84px; }
#pad-top button { position: static; border-radius: 6px; padding: 7px 0; font-size: 9px; }

#quer {
  display: none; position: fixed; inset: 0; z-index: 30;
  background: #000; color: var(--yellow); font-family: 'Press Start 2P', monospace; font-size: 14px;
  align-items: center; justify-content: center; text-align: center; padding: 2em; line-height: 1.6;
}
@media (orientation: portrait) { body.touch #quer { display: flex; } }

/* ---------------------------------------------------------------- Ergebnis & Bestenliste */
#result { inset: 6% 10%; padding: 2% 3%; display: flex; flex-direction: column; line-height: 1.05; overflow-y: auto; }
#result[hidden] { display: none; }
#result h2 { margin: 0 0 0.3em; font-family: 'Press Start 2P', monospace; font-size: 0.75em; color: var(--yellow); text-align: center; }
#result h3 { margin: 0.5em 0 0.1em; font-family: 'Press Start 2P', monospace; font-size: 0.5em; color: var(--cyan); }
#res-text { margin: 0 0 0.4em; text-align: center; }
#res-form { display: flex; flex-wrap: wrap; gap: 0.3em 0.5em; align-items: center; justify-content: center; }
#res-form input { font: inherit; font-size: 1em; width: 12em; background: #000; color: var(--yellow); border: calc(var(--s) * 0.6px) solid var(--grey); padding: 0 0.3em; }
#res-err { width: 100%; text-align: center; color: #ff5555; min-height: 1em; font-size: 0.85em; }
#res-share { display: flex; flex-wrap: wrap; gap: 0.5em; justify-content: center; margin: 0.2em 0; }
#result .btn, #result button { font: inherit; font-size: 0.85em; background: var(--grey); color: #000; border: 2px outset var(--white); padding: 0 0.6em; text-decoration: none; cursor: pointer; }
#result #res-li { background: #0a66c2; color: #fff; }
#res-list { margin: 0; padding-left: 1.6em; font-size: 0.85em; }
#res-list li.ich { color: var(--yellow); }
#res-list .p { float: right; color: var(--cyan); }
#res-keys { margin-top: auto; padding-top: 0.4em; text-align: right; color: var(--yellow); }
#res-keys .k { cursor: pointer; }
body.touch #res-keys .k { background: var(--grey); color: #000; padding: 0.1em 0.7em; border: calc(var(--s) * 0.7px) outset var(--white); }
.legal a { color: var(--cyan); }