/* DRAKVOR, Untertitel Heroes Of Ash, Ruin & Dragons. Mobile-first, Desktop ab 64rem. */

:root {
  --ash: #15110f;
  --soot: #1f1916;
  --bone: #e6dccb;
  --dust: #9b8f7f;
  --ember: #c0442a;
  --brass: #c79b4a;
  --case: #c9bfa8;
  --case-dark: #9a8f7a;
  /* Krug für den Schmied, Farben aus der DOS-Palette des Logos: |06 und |14 für das Bier, |08 für den Henkel */
  --mug-beer: #aa5500;
  --mug-light: #ffff55;
  --mug-foam: #ffffff;
  --mug-handle: #555555;
  /* Abstände an einer Stelle: Innenabstand der Bühne, Fuß oben und unten, Spalten im Fuß, Höhe eines Links im Fuß */
  --stage-pad: 1rem;
  --foot-top: 2.5rem;
  --foot-bottom: 3rem;
  --foot-gap: 3rem;
  --foot-link: 48px;
  /* Tippfläche auf dem Handy; ab 48rem 0px, dann greift keine Mindesthöhe mehr und alles bleibt wie zuvor */
  --tap: 48px;
  /* Menü auf dem Handy als DOS-Fenster: weiß auf Blau, Auswahl schwarz auf Grau */
  --dos-blue: #0000aa;
  --dos-fg: #ffffff;
  --dos-line: #aaaaaa;
  --dos-sel: #aaaaaa;
  --dos-sel-fg: #000000;
  /* Eingabezeile im Spielbildschirm: Aufforderung wie in der Door (|07), Getipptes hell (|15) */
  --in-bg: #000000;
  --in-prompt: #aaaaaa;
  --in-text: #ffffff;
  /* Höhe der Kopfzeile am Desktop: Logo 70px und je 17px Luft */
  --header-h: 104px;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono", Menlo, monospace;
  --dos: "DOS", ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Liberation Mono", Menlo, monospace;
}

/* Bildschirmschrift: Web437 IBM VGA 8x16 aus dem Ultimate Oldschool PC Font Pack von VileR (CC BY-SA 4.0), siehe fonts/ */
@font-face { font-family: "DOS"; src: url("fonts/Web437_IBM_VGA_8x16.woff") format("woff"); font-display: swap; }

* { box-sizing: border-box; }

html { background: var(--ash); color: var(--bone); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

a { color: var(--bone); text-decoration: none; }
a:hover { color: var(--brass); }

h1, h2, h3 { font-family: var(--serif); font-weight: normal; line-height: 1.15; margin: 0 0 .6em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; margin-top: 1.4em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
small { font-size: .8rem; }
code { font-family: var(--mono); overflow-wrap: anywhere; color: var(--brass); }
.lead { color: var(--bone); }
.muted { color: var(--dust); }
.error { color: var(--ember); margin: 0 0 .8em; }
.notice { color: var(--bone); border: 1px solid var(--dust); padding: .5em .8em; margin: 0 0 1em; }

/* ---------------------------------------------------------------- Kopf */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: 1rem; border-bottom: 1px solid var(--dust); background: var(--ash); }
.logo { display: none; flex-direction: column; align-items: flex-start; gap: .2rem; flex: 0 0 auto; }
.logo:hover { color: var(--bone); }
.logo-art { margin: 0; width: max-content; font-family: var(--dos); font-size: 7px; line-height: 7px; white-space: pre; }
.logo-text { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .2em; }
.tagline { font-family: var(--sans); font-size: .7rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .15em; color: var(--dust); }
.top-nav { display: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .2rem 2rem; margin-left: auto; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.top-nav a { white-space: nowrap; }

/* Handy: links der Schriftzug, rechts der Menüknopf, darunter das Menü als DOS-Fenster über die volle Breite.
   Ohne JavaScript bleibt der Knopf versteckt und das Menü steht offen als Liste da. */
.brand { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--dos); font-size: 1.25rem; letter-spacing: .1em; color: var(--brass); }
.brand:hover { color: var(--brass); }
.menu-btn { min-height: var(--tap); padding: 0 .8rem; background: none; border: 1px solid var(--brass); color: var(--brass); font-family: var(--dos); font-size: 1rem; cursor: pointer; }
.menu-btn[hidden] { display: none; }
.mmenu { flex: 0 0 100%; background: var(--dos-blue); border: 4px double var(--dos-line); font-family: var(--dos); }
.mmenu[hidden] { display: none; }
.mmenu ul { list-style: none; margin: 0; padding: .3rem 0; }
.mmenu a { display: flex; align-items: center; gap: .7rem; min-height: var(--tap); padding: 0 1rem; color: var(--dos-fg); font-size: 1rem; }
.mmenu a:hover, .mmenu a:focus-visible { background: var(--dos-sel); color: var(--dos-sel-fg); outline: none; }
.mmenu a[aria-current] { text-decoration: underline; }
.mmenu-langs { display: flex; }
.mmenu-langs a { min-width: var(--tap); justify-content: center; }
@media (min-width: 48rem) {
  .logo, .top-nav { display: flex; }
  .brand, .menu-btn, .mmenu { display: none; }
}

/* Krug für den Schmied: Pixel-Krug, scharf in ganzen Vielfachen von 16; die obere Schaumreihe nur bei Hover und Fokus */
.mug { display: block; flex: 0 0 auto; width: 32px; height: 32px; }
.mug-beer { fill: var(--mug-beer); }
.mug-light { fill: var(--mug-light); }
.mug-foam { fill: var(--mug-foam); }
.mug-handle { fill: var(--mug-handle); }
.mug-more { visibility: hidden; }
.kofi-link:hover .mug-more, .kofi-link:focus-visible .mug-more { visibility: visible; }
/* In der Kopfzeile auf dem Handy nur der Krug mit 44 x 44 Pixel Tippfläche, die Beschriftung nur für Screenreader */
.nav-kofi { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 44px; min-height: 44px; }
.kofi-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.side-kofi { display: flex; align-items: center; gap: .6rem; min-height: max(44px, var(--tap)); line-height: 1.3; color: var(--bone); }
.side-kofi:hover { color: var(--brass); }

/* ---------------------------------------------------------------- Drei Spalten (gestapelt, ab 64rem als Rahmen) */
.stage { display: flex; flex-direction: column; gap: 1rem; padding: var(--stage-pad); width: 100%; flex: 1; }
.mid-col { display: contents; }
.mid { order: -1; min-width: 0; }
.side { min-width: 0; }
.side-h { display: none; padding: .5rem .8rem; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--dust); list-style: none; user-select: none; }
.side-h::-webkit-details-marker { display: none; }
.side-h::before { content: "+ "; color: var(--ember); }
.side[open] > .side-h::before { content: "- "; }
.side-body { padding: 0; }
/* Auf dem Handy ohne Seitenleisten im Spiel, ohne Anmeldung, Einstellungen und Heldenzähler */
.mode-play .side, .desk-only { display: none; }
@media (min-width: 48rem) {
  .side { border: 1px solid var(--dust); }
  .side-h { display: block; }
  .side-body { padding: 0 1rem 1rem; }
  .mode-play .side { display: block; }
  .desk-only { display: block; }
}

/* ---------------------------------------------------------------- Menügruppen im 90er-Stil */
.grp { padding: .6rem 0 .2rem; }
.grp + .grp { border-top: 3px double var(--dust); }
.grp-h { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .5rem; font-family: var(--sans); font-size: .78rem; font-weight: normal; text-transform: uppercase; letter-spacing: .14em; color: var(--dust); }
.grp-h::after { content: ""; flex: 1; border-bottom: 1px dotted var(--dust); transform: translateY(-.25em); }
.grp-list { list-style: none; margin: 0; padding: 0; line-height: 1.35; }
.grp-list li { margin: .15rem 0; }
.grp-list a, .toggle { display: block; position: relative; padding-left: 1.1em; color: var(--bone); }
/* Auf dem Handy jeder Listeneintrag 48 Pixel hoch, die Schrift mittig */
.grp-list a { padding-block: max(0px, calc((var(--tap) - 1.35em) / 2)); }
.grp-list a::before, .toggle::before { content: ">"; position: absolute; left: 0; color: var(--ember); visibility: hidden; }
.grp-list a:hover, .toggle:hover:enabled { color: var(--bone); }
.grp-list a:hover::before, .toggle:hover:enabled::before { visibility: visible; }
.grp-text { margin: 0 0 .4em; font-size: 1rem; color: var(--dust); }
.toggle { background: none; border: 0; font: inherit; line-height: 1.35; text-align: left; cursor: pointer; padding-top: 0; padding-bottom: 0; }
.toggle:disabled { color: var(--dust); cursor: default; }
/* Ein versteckter Schalter bleibt versteckt, auch wenn .toggle ihn als Block setzt */
.toggle[hidden] { display: none; }
.tick { font-family: var(--dos); white-space: pre; }
.settings small { display: block; padding-left: 1.1em; color: var(--dust); }
.langs a { display: inline-block; padding-left: 0; margin-right: .6em; color: var(--dust); }
.langs a::before { content: none; }
.langs a.on { color: var(--bone); }

/* Formulare im Panel (.form) und in den Menüs (.mform). Feldbeschriftungen tragen .field, Auswahlfelder
   (Radioknöpfe, Klassenkarten) nicht: so greifen die Regeln für Felder nie auf Auswahlzeilen über. */
.form, .mform { display: flex; flex-direction: column; }
.form { gap: 1rem; }
.mform { gap: .5rem; margin: 0 0 .6rem; }
/* Fieldsets sind sonst mindestens so breit wie ihr Inhalt und schieben das Formular über den Rand */
fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
legend { padding: 0; margin-bottom: .4rem; color: var(--dust); font-size: 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; color: var(--dust); font-size: 1rem; }
.field input, .field textarea { --field: var(--ash); width: 100%; min-width: 0; min-height: var(--tap); background: var(--ash); color: var(--bone); border: 1px solid var(--dust); padding: .55em .7em; font: inherit; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brass); }
.field small { color: var(--dust); font-size: .8rem; }
.field textarea { resize: vertical; min-height: 4.5em; line-height: 1.4; }
.mform .field { gap: .15rem; font-size: .85rem; }
.mform .field input { --field: var(--soot); background: var(--soot); padding: .4em .5em; font-size: .95rem; }
.mform legend { font-size: .85rem; margin-bottom: .2rem; }
/* Browser färben automatisch ausgefüllte Felder hell, der innere Schatten deckt das ab */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--field, var(--soot)) inset; box-shadow: 0 0 0 1000px var(--field, var(--soot)) inset; -webkit-text-fill-color: var(--bone); caret-color: var(--bone); transition: background-color 600000s 0s; }
input:autofill { box-shadow: 0 0 0 1000px var(--field, var(--soot)) inset; -webkit-text-fill-color: var(--bone); caret-color: var(--bone); }
.choice { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.mform .choice { gap: .4rem 1rem; }
.choice label { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); color: var(--bone); }
/* Klassenkarte: Knopf und Name in einer Zeile, die Beschreibung darunter in derselben Spalte wie der Name */
.classes { display: flex; flex-direction: column; gap: .6rem; }
.class-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .2rem .7rem; padding: .8rem; border: 1px solid var(--dust); color: var(--bone); cursor: pointer; }
.class-card:has(input:checked) { border-color: var(--brass); }
.class-card input { grid-row: 1 / span 2; margin: 0; }
.class-name { font-family: var(--serif); font-size: 1.1rem; }
.class-name em { font-style: normal; color: var(--dust); font-size: .9rem; }
.class-desc { grid-column: 2; color: var(--dust); font-size: .9rem; }
.mform button, .btn, .form button { align-self: flex-start; display: inline-block; min-height: var(--tap); background: none; border: 1px solid var(--dust); color: var(--bone); padding: .35em .9em; font: inherit; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }
.mform button:hover, .btn:hover, .form button:hover { color: var(--ember); border-color: var(--ember); }

/* Held im linken Menü */
.hero { margin: 0; font-size: 1rem; }
.hero div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .6rem; padding: .1rem 0; }
.hero dt { color: var(--dust); }
.hero dd { margin: 0; text-align: right; }
.hero-hp dd { display: flex; align-items: center; gap: .4rem; }
.hp { display: inline-block; width: 4rem; height: .5rem; background: var(--soot); border: 1px solid var(--dust); -webkit-appearance: none; appearance: none; }
.hp::-webkit-meter-bar { background: var(--soot); border: 0; border-radius: 0; height: 100%; }
.hp::-webkit-meter-optimum-value, .hp::-webkit-meter-suboptimum-value, .hp::-webkit-meter-even-less-good-value { background: var(--ember); }
.hp::-moz-meter-bar { background: var(--ember); }

/* Rechtes Menü */
.world-gold { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--brass); margin: 0 0 .4em; }
.world-gold small { font-family: var(--sans); font-size: .7rem; color: var(--dust); text-transform: uppercase; letter-spacing: .12em; }
.motd { margin: 0 0 .4em; font-family: var(--serif); font-style: italic; color: var(--brass); }
.top5, .news5 { list-style: none; margin: 0 0 .4em; padding: 0; font-size: 1rem; line-height: 1.35; }
.top5 li { display: flex; justify-content: space-between; gap: .6rem; }
.top5 li span:last-child { color: var(--dust); white-space: nowrap; }
.news5 li { color: var(--dust); margin: .15rem 0; }
.news5 .news-day { color: var(--brass); }
.day-event { color: var(--bone); }
.counter-row { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4em; }
.counter { display: inline-block; background: #000; color: #fff; font-family: var(--mono); font-size: 1.3rem; line-height: 1; letter-spacing: .18em; padding: .25em .3em .25em .45em; border: 1px solid var(--dust); }

/* ---------------------------------------------------------------- Startseite: Monitor und Text in einer Spalte, linksbündig */
.home-col { width: 100%; margin: 0 auto; }
.monitor-desk { margin: 0 0 1rem; }
.monitor-desk .screen { aspect-ratio: 4 / 3; align-items: center; justify-content: center; }
.monitor-desk .term { margin: 0; }
/* Handy: schmaler Bildschirm ohne Link, das Logo auf die Breite skaliert (77 Spalten, je ein halbes Em breit;
   112px sind Seitenrand, Gehäuse, Vertiefung und Innenabstand), der Text mit 14 Pixel auf 28 Spalten */
.screen-m { display: flex; flex-direction: column; gap: .8rem; padding: 12px; background: #000; border-radius: 18px; overflow: hidden; }
.m-logo { margin: 0; font-family: var(--dos); font-size: min(10px, calc((100vw - 112px) / 38.5)); line-height: 1; white-space: pre; }
.term-m { margin: 0; font-family: var(--dos); font-size: 14px; line-height: 1.3; color: #aaa; white-space: pre; }
.m-how h2 { margin-top: 0; }
.share-btn { min-height: var(--tap); padding: 0 1rem; background: none; border: 1px solid var(--dust); color: var(--bone); font: inherit; cursor: pointer; }
.share-btn:hover { border-color: var(--brass); color: var(--brass); }
.share-btn[hidden] { display: none; }
.share-msg { color: var(--brass); }
.share-msg:empty { display: none; }
.tap-link { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------------------------------------------------------------- Papierpanel */
.paper { background: var(--soot); border: 1px solid var(--dust); padding: 1rem; }
.paper h1 { margin-top: 0; }
/* Lesetexte: Spielregeln, Impressum, Datenschutz */
.prose > * { max-width: 72ch; }
.prose h2 { padding-bottom: .25em; border-bottom: 1px solid var(--dust); }
.rules-list { list-style: none; margin: 0 0 1em; padding: 0; }
.rules-list li { position: relative; margin: 0 0 .5em; padding-left: 1.3em; }
.rules-list li::before { content: ">"; position: absolute; left: 0; color: var(--ember); }
.rules-list strong { font-weight: normal; color: var(--brass); }
/* Krug für den Schmied: ganz unten auf der Regelseite, abgesetzt vom Regeltext */
.kofi { margin-top: 2em; color: var(--dust); }

/* Nur für Screenreader */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.form-alt { margin-top: 1.2rem; }
.danger { border: 1px solid var(--ember); padding: 1rem; }

/* Tabellen */
.table-wrap { overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; font-size: 1rem; }
.tbl a { display: inline-block; padding-block: max(0px, calc((var(--tap) - 1.5em) / 2)); }
.tbl th, .tbl td { text-align: left; padding: .4em .6em; border-bottom: 1px dotted var(--dust); white-space: nowrap; }
.tbl th { color: var(--dust); font-weight: normal; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.tbl .num { text-align: right; }
.stars { color: var(--brass); }
.wed { color: #ff55ff; }
/* Herkunft eines Helden (Mailbox oder Web) klein unter dem Namen */
.origin { display: block; color: var(--dust); white-space: normal; }

/* Sysop */
.stats { display: grid; grid-template-columns: 1fr; gap: .3rem; margin: 0; }
.stats div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--dust); padding-bottom: .2rem; }
.stats dt { color: var(--dust); }
.stats dd { margin: 0; text-align: right; color: var(--brass); }
.errlog { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.35; color: var(--bone); white-space: pre; max-height: 28em; overflow: auto; background: #000; padding: .5rem; }

/* Halle: frühere Saisons aufklappbar */
.season { margin: 0 0 .6rem; border: 1px solid var(--dust); padding: .5rem .8rem; }
.season summary { padding-block: max(0px, calc((var(--tap) - 1.5em) / 2)); cursor: pointer; color: var(--bone); }
.season[open] summary { margin-bottom: .5rem; }

/* ---------------------------------------------------------------- Der Monitor: Gehäuse mit Kinn, Vertiefung, Glas, Fuß */
.monitor { width: 100%; }
.case { position: relative; background: var(--case); border-radius: 16px; padding: 22px 22px 44px; box-shadow: inset 3px 3px 0 #e4dcc8, inset -4px -4px 0 #8f846f, 0 10px 24px rgba(0, 0, 0, .5); }
.recess { border: 6px solid var(--case-dark); border-radius: 24px; box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, .5); background: #000; }
.screen { position: relative; display: flex; aspect-ratio: 47.4 / 28.8; background: #000; border-radius: 18px; padding: .6rem; overflow: auto; scrollbar-width: none; box-shadow: inset 0 0 40px 10px rgba(0, 0, 0, .7); }
.screen::-webkit-scrollbar { display: none; }
.term a { color: inherit; text-decoration: underline; }
.term { margin: auto; width: max-content; font-family: var(--dos); font-size: 14px; line-height: 1; color: #aaa; white-space: pre; animation: crt-on .3s ease-out 1; }
.term span { white-space: pre; }
.cur { color: #aaa; animation: blink 1s steps(1) infinite; }
/* Eingabezeile: der Cursor blinkt, solange das Feld den Fokus hat; mitten im Text steht er invers auf dem Zeichen */
.in-prompt { color: var(--in-prompt); }
.in-text { color: var(--in-text); }
.in-cur { color: var(--in-text); animation: blink 1s steps(1) infinite; }
.in-on { background: var(--in-text); color: var(--in-bg); animation: blink-on 1s steps(1) infinite; }
.in-idle .in-cur, .in-idle .in-on { animation: none; }
/* Menüeinträge im Monitor: beim Darüberfahren ein Auswahlbalken wie unter DOS, ohne Rahmen und Abstände */
.mi:focus { outline: none; }
.mi-on { cursor: pointer; }
.mi-on:hover, .mi-on:hover span { background: #aaa; color: #000; }
.bone { color: var(--bone); }
/* Angemeldet ist der Bildschirm der Startseite ein Link */
.screen-link { display: none; border-radius: 18px; }
.screen-link:focus { outline: none; }
.screen-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.desk-screen { display: none; }
@media (min-width: 48rem) {
  .screen-link { display: block; }
  .desk-screen { display: flex; }
  .m-only { display: none; }
  .tap-link { display: inline; }
}
/* Glas: der einzige Verlauf, die Abdunklung der Ecken */
.glass { position: absolute; inset: 0; pointer-events: none; border-radius: 18px; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.scanlines { position: absolute; inset: 0; pointer-events: none; border-radius: 18px; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px); }
.no-scan .scanlines { display: none; }
/* Das Kinn: Lüftungsschlitze links, Netzschalter und LED rechts */
.chin { position: absolute; left: 22px; right: 22px; bottom: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; }
.vents { display: flex; flex-direction: column; gap: 3px; }
.vents i { display: block; width: 14px; height: 2px; background: var(--case-dark); }
.power { display: flex; align-items: center; gap: 8px; }
.switch { display: block; width: 18px; height: 10px; background: #b5ab95; border: 1px solid #8f846f; }
.led { display: block; width: 6px; height: 6px; border-radius: 50%; background: #3a3f36; }
.led.on { background: #35c24a; box-shadow: 0 0 4px #35c24a; }
.neck { width: 22%; height: 14px; margin: 0 auto; background: var(--case-dark); border-top: 1px solid #b5ab95; }
.base { width: 46%; height: 10px; margin: 0 auto; background: var(--case-dark); border-top: 1px solid #b5ab95; border-radius: 0 0 4px 4px; }
@keyframes crt-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes blink-on { 50% { background: transparent; color: var(--in-text); } }
@media (prefers-reduced-motion: reduce) { .term, .cur, .in-cur, .in-on { animation: none; } }

/* Tastenleiste im Gehäuse */
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-top: .5rem; }
.key { display: none; background: var(--case); color: var(--ash); border: 1px solid var(--case-dark); padding: .3em .6em; font: inherit; font-size: .85rem; cursor: pointer; text-align: left; }
.key:hover { border-color: var(--ash); }
.key kbd { font-family: var(--mono); font-weight: bold; color: var(--ember); margin-right: .35em; }
/* Sichtbares Eingabefeld nur ohne JavaScript; mit JavaScript steht die Eingabe im Bildschirm */
.key-input { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ash); flex: 1 1 100%; }
.key-input input { flex: 1; min-width: 0; max-width: 14rem; background: #000; color: var(--bone); border: 1px solid var(--case-dark); padding: .3em .5em; font: inherit; font-size: .9rem; }
.key-input input.wide { max-width: none; }
.play-hint { flex: 1 1 100%; font-size: .72rem; color: #5a5245; }
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .key { display: inline-block; }
  .hint-desk { display: none; }
  .hint-touch { display: block; }
}

/* Vollbild-Knopf im Kinn des Gehäuses, neben Schalter und Lampe */
.fs-btn { display: block; width: 16px; height: 11px; padding: 0; background: none; border: 1px solid var(--case-dark); border-radius: 1px; cursor: pointer; }
.fs-btn:hover, .fs-btn:focus-visible { border-color: var(--ash); outline: none; }

/* Vollbild: nur der schwarze Bildschirm, so groß wie möglich, mittig. .fs-on ist der Ersatz ohne Fullscreen-API */
.screen:fullscreen, .screen.fs-on { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; padding: 1vmin; box-shadow: none; background: #000; align-items: center; justify-content: center; overflow: hidden; }
.screen.fs-on { position: fixed; inset: 0; z-index: 50; }
.screen:fullscreen .glass, .screen:fullscreen .scanlines, .screen.fs-on .glass, .screen.fs-on .scanlines { border-radius: 0; }
.screen:focus { outline: none; }
.fs-lock, .fs-lock body { overflow: hidden; }
.fs-note { position: absolute; top: 0; left: 0; right: 0; z-index: 2; margin: 0; padding: .3em .6em; background: #aa0000; color: #fff; font-family: var(--dos); text-align: center; }

/* Spielen am PC oder Tablet: auf dem Handy der Hinweis mit Teilen-Knopf (.m-play), ab 48rem bei zu kleinem
   Fenster der Hinweis zum Vergrößern (.play-small), sonst das Spiel */
.monitor-play, .play-small { display: none; }
@media (min-width: 48rem) {
  .play-small { display: block; }
}
@media (min-width: 768px) and (min-height: 600px) {
  .play-small { display: none; }
  .monitor-play { display: block; }
}

/* DOS-Palette für den Bildschirm */
.f0 { color: #000; } .f1 { color: #0000aa; } .f2 { color: #00aa00; } .f3 { color: #00aaaa; }
.f4 { color: #aa0000; } .f5 { color: #aa00aa; } .f6 { color: #aa5500; } .f7 { color: #aaa; }
.f8 { color: #555; } .f9 { color: #5555ff; } .f10 { color: #55ff55; } .f11 { color: #55ffff; }
.f12 { color: #ff5555; } .f13 { color: #ff55ff; } .f14 { color: #ffff55; } .f15 { color: #fff; }
.b1 { background: #0000aa; } .b2 { background: #00aa00; } .b3 { background: #00aaaa; }
.b4 { background: #aa0000; } .b5 { background: #aa00aa; } .b6 { background: #aa5500; } .b7 { background: #aaa; }

/* ---------------------------------------------------------------- Spielseite: schmaler Rahmen, Bildschirm scrollt bei 11px */
.mode-play .case { padding: 12px 12px 26px; }
.mode-play .chin { left: 12px; right: 12px; height: 26px; }
.mode-play .recess { border-width: 4px; }
.mode-play .screen { aspect-ratio: auto; }
.mode-play .top { padding: .25rem 1rem; }

/* ---------------------------------------------------------------- Fuß */
/* Drei Gruppen wie in der Seitenleiste (.grp, .grp-h, .grp-list), auf dem Handy untereinander, ab 48rem in drei Spalten */
.foot { order: 1; border-top: 1px solid var(--dust); padding: var(--foot-top) 0 calc(var(--foot-bottom) - var(--stage-pad)); }
.foot .grp:first-child { padding-top: 0; }
/* Die erste Spalte mit dem längeren Text: höchstens etwa 65 Zeichen je Zeile */
.foot-about { max-width: 30em; }
/* Links im Fließtext: nicht nur die Farbe unterscheidet sie (WCAG 1.4.1), dezent unterstrichen in der Textfarbe */
.foot-about a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.foot-about a:hover, .foot-about a:focus-visible { color: var(--brass); }
.foot-version { font-size: .8rem; color: var(--dust); }
/* Im Spiel steht der Fuß unten in der rechten Seitenleiste: Impressum, Datenschutz und Version in einer Zeile */
.foot-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
/* Links im Fuß ohne Einrückung und ohne Pfeil, damit Überschrift, Text und Links eine Kante haben */
.foot .grp-list li { margin: 0; }
.foot .grp-list a, .foot-line a { display: flex; align-items: center; min-height: var(--foot-link); padding-left: 0; }
.foot .grp-list a::before, .foot-line a::before { content: none; }
.foot .grp-list a:hover, .foot-line a:hover { color: var(--brass); }
@media (min-width: 48rem) {
  :root { --tap: 0px; --foot-link: 44px; }
  .grp-text { font-size: .92rem; }
  legend, .field { font-size: .95rem; }
  .tbl { font-size: .95rem; }
  .hero, .top5, .news5 { font-size: .9rem; }
  .foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 var(--foot-gap); }
  .foot .grp { padding-top: 0; }
  .foot .grp + .grp { border-top: 0; }
}

/* ---------------------------------------------------------------- Desktop: Rahmen-Layout */
@media (min-width: 64rem) {
  .top { position: sticky; top: 0; z-index: 2; flex-wrap: nowrap; height: var(--header-h); padding: 0 1.5rem; gap: 1rem; }
  /* Bis 96rem steht der Untertitel unter dem Logo, damit die Kopfzeile auch angemeldet einzeilig bleibt */
  .logo-art { height: 70px; font-size: 10px; line-height: 10px; }
  .tagline { font-size: .8rem; }
  .top-nav { font-size: .9rem; gap: 1rem 1.5rem; }
  .stage { flex-direction: row; align-items: flex-start; gap: 0; padding: 0; }
  .side { position: sticky; top: var(--header-h); flex: 0 0 16rem; height: calc(100vh - var(--header-h)); overflow-y: auto; overflow-x: hidden; border: 0; background: var(--soot); }
  .side-left { border-right: 1px solid var(--dust); }
  .side-right { border-left: 1px solid var(--dust); }
  .side-h { display: none; }
  .side-body { padding: 1rem 1rem 1.5rem; }
  .side-body .grp:first-child { padding-top: 0; }
  .mid-col { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: calc(100vh - var(--header-h)); background: var(--ash); }
  .mid { order: 0; flex: 1; padding: 2rem; }
  /* Spaltenbreite aus der Fensterhöhe: Bildschirm 4:3, dazu Rahmen 22 oben, 44 Kinn, 12 Vertiefung, 24 Fuß */
  .home-col { width: min(100%, calc((100dvh - var(--header-h) - 3rem - 102px) * 4 / 3 + 56px)); }
  /* Am PC: keine Tippflächen nötig, die Bühne hat keinen Innenabstand mehr */
  :root { --stage-pad: 0px; --foot-link: 1.75rem; }
  .foot { order: 0; margin: 0 2rem; }

  /* Spiel: der Monitor füllt das Fenster */
  .mode-play { height: 100vh; height: 100dvh; min-height: 0; }
  .mode-play .top { position: static; height: auto; padding: .15rem 1rem; }
  .mode-play .logo-art { height: 49px; font-size: 7px; line-height: 7px; }
  .mode-play .stage { flex: 1; min-height: 0; align-items: stretch; }
  .mode-play .side { position: static; height: auto; }
  .mode-play .mid-col { min-height: 0; }
  .mode-play .mid { display: flex; min-height: 0; padding: .6rem; }
  .mode-play .case { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .mode-play .recess { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .mode-play .screen { flex: 1; min-height: 0; }
  .mode-play .keys { flex: 0 0 auto; }
}
/* Die Kopfzeile bleibt einzeilig. Gemessen in der engsten Lage (angemeldet, deutsch, "Spielen" in der Kopfzeile):
   die Beschriftung am Krug passt ab 1120px, der Untertitel neben dem Logo samt Beschriftung ab 1432px.
   Die Werte lassen Luft für breitere Systemschriften. */
@media (min-width: 75rem) {
  .nav-kofi { justify-content: flex-start; }
  .kofi-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
@media (min-width: 96rem) {
  .logo { flex-direction: row; align-items: flex-end; gap: 1rem; }
  .tagline { padding-bottom: .1rem; }
  .top-nav { gap: 1rem 2rem; }
}
@media (min-width: 64rem) and (min-height: 600px) {
  .mode-play .monitor-play { display: flex; flex-direction: column; min-height: 0; }
}