/* Der Audit-Lockdown: Retro-Terminal im 16-Bit-Look. Schriften gebündelt (SIL OFL), siehe assets/vendor/fonts/. */
@font-face { font-family: "VT323"; src: url("/assets/vendor/fonts/vt323-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("/assets/vendor/fonts/press-start-2p-latin-400-normal.woff2") format("woff2"); font-display: swap; }

.game, .break-dlg {
  --t-bg: #05070f;
  --t-panel: #0b1226;
  --t-panel-2: #121c3a;
  --t-line: #2b3a6e;
  --t-text: #d9ffe6;
  --t-green: #6dff9c;
  --t-green-dim: #3fbf6e;
  --t-gold: #ffd45e;
  --t-red: #ff7a7a;
  --t-blue: #8fb4ff;
  --t-paper: #f6ecd2;
  --t-ink: #1b1408;
  --px: 4px;
  --f-body: "VT323", var(--mono);
  --f-head: "Press Start 2P", var(--mono);
  --f-size: 1.45rem;
}
.game {
  position: relative;
  margin: var(--sp-5) auto var(--sp-6);
  max-width: 62rem;
  background: radial-gradient(ellipse at 50% 30%, #0e1733 0%, var(--t-bg) 70%);
  color: var(--t-text);
  font: var(--f-size)/1.25 var(--f-body);
  border: var(--px) solid #3a4a86;
  box-shadow: 0 0 0 var(--px) #0b1020, calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--px) #000, 0 0 40px rgba(109, 255, 156, .12);
  overflow: hidden;
  hyphens: manual;
  overflow-wrap: break-word;
}
/* Scanlines: rein dekorativ, abschaltbar */
.game::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
}
.game.no-scan::after { display: none; }
/* Lesemodus: normale Schrift, ruhiger */
.game.plain { --f-body: var(--font); --f-head: var(--font); --f-size: 1.0625rem; line-height: 1.55; }
.game.plain h2, .game.plain h3 { letter-spacing: 0; text-transform: none; }
.game.big { --f-size: 1.75rem; }
.game.plain.big { --f-size: 1.25rem; }
.game.no-timer .hud-time { visibility: hidden; }

.game .sr, .break-dlg .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.game :focus-visible { outline: 3px solid var(--t-gold); outline-offset: 3px; }
.game h2:focus { outline: none; }
.game h2 { font: 1.05rem/1.5 var(--f-head); color: var(--t-gold); margin: .2em 0 .6em; text-shadow: 2px 2px 0 #000; }
.game.plain h2 { font-size: 1.5rem; font-weight: 700; }
.game h3 { font: .8rem/1.6 var(--f-head); color: var(--t-blue); margin: 1em 0 .5em; }
.game.plain h3 { font-size: 1.15rem; font-weight: 700; }
.game p { margin: 0 0 .6em; }
.game .small { font-size: .85em; color: #b9d8c4; }
.game .kicker { color: var(--t-green-dim); text-transform: uppercase; letter-spacing: .08em; font-size: .85em; margin-bottom: .2em; }
.game code { font-family: var(--f-body); }

/* ---------- HUD ---------- */
.hud { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .6rem 1rem; background: #081028; border-bottom: var(--px) solid #3a4a86; position: relative; z-index: 6; }
.hud-title { font: .7rem/1.4 var(--f-head); color: var(--t-green); margin: 0; flex: 1 1 auto; }
.game.plain .hud-title { font-size: 1rem; font-weight: 700; }
.hud-time { font-variant-numeric: tabular-nums; color: var(--t-gold); white-space: nowrap; }
.hud-time small { color: #b9d8c4; font-size: .75em; margin-left: .3em; }
.hud-frags { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.hud-frags li { min-width: 2.4em; text-align: center; padding: 0 .3em; border: 2px solid var(--t-line); color: #6d7aa8; background: #050a1a; }
.hud-frags li.got { color: var(--t-bg); background: var(--t-green); border-color: var(--t-green); }
.settings { position: relative; }
.hud-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .35em; min-height: var(--tap); padding: 0 .7em; border: 2px solid var(--t-line); color: var(--t-text); font: inherit; }
.hud-btn:hover { border-color: var(--t-red); color: var(--t-red); }
.hud-btn:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 3px; }
.hud-btn[hidden] { display: none; }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .4rem; }
.btn-term.danger { background: #3a0f14; border-color: var(--t-red); color: #ffd9d9; }
.btn-term.danger:hover { background: #561820; }
.settings > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35em; min-height: var(--tap); padding: 0 .7em; border: 2px solid var(--t-line); color: var(--t-text); }
.settings > summary::-webkit-details-marker { display: none; }
.settings[open] > summary { border-color: var(--t-gold); color: var(--t-gold); }
.settings-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(19rem, 86vw); background: var(--t-panel); border: 3px solid var(--t-gold); padding: .6rem; box-shadow: 6px 6px 0 #000; display: grid; gap: .35rem; }
.toggle { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: .6em; min-height: var(--tap); padding: .2em .6em; border: 2px solid var(--t-line); cursor: pointer; font: inherit; color: var(--t-text); }
.toggle::after { content: "AUS"; font: .6rem var(--f-head); color: #8b95bd; }
.game.plain .toggle::after { font: 700 .8rem var(--font); }
.toggle[aria-pressed="true"]::after { content: "AN"; color: var(--t-green); }
.toggle:hover { border-color: var(--t-blue); }

/* ---------- Bildschirm ---------- */
.screen { padding: 1.1rem 1.25rem 1rem; position: relative; z-index: 1; }
.scene { display: block; width: 100%; max-width: 40rem; height: auto; margin: .3rem auto .9rem; image-rendering: pixelated; border: var(--px) solid #000; box-shadow: 0 0 0 2px var(--t-line); }
.rules { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; gap: .35rem; }
.rules li { padding-left: 1.6em; text-indent: -1.6em; }
.rules .bi { color: var(--t-gold); margin-right: .2em; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.start-form { display: grid; gap: .4rem; max-width: 28rem; margin-top: .8rem; }
.start-form label, .answer label { color: var(--t-green); }
.game input[type="text"] { font: inherit; color: var(--t-green); background: #02040b; border: 3px solid var(--t-line); padding: .25em .5em; min-height: var(--tap); box-sizing: border-box; width: 100%; caret-color: var(--t-gold); }
.game input[type="text"]:focus { border-color: var(--t-gold); outline: none; box-shadow: 0 0 0 2px var(--t-gold); }

.btn-term { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: var(--tap); padding: .25em 1em; cursor: pointer; font: inherit; color: var(--t-text); background: var(--t-panel-2); border: 3px solid var(--t-blue); box-shadow: 4px 4px 0 #000; text-align: center; }
.btn-term:hover { background: #1b2a57; }
.btn-term:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.btn-term.primary { background: var(--t-green); color: #031208; border-color: #b7ffcd; }
.btn-term.primary:hover { background: #8dffb4; }
.btn-term[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-term.small { font-size: .9em; }
.btn-term:focus-visible, .choice:focus-visible, .level-btn:focus-visible, .cell:focus-visible, .link:focus-visible { outline: 3px solid var(--t-gold); outline-offset: 3px; }
.link { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .35em; min-height: var(--tap); color: var(--t-blue); text-decoration: underline; text-underline-offset: .2em; margin-right: 1.2rem; font: inherit; }
.link:hover { color: var(--t-gold); }

/* Übersicht */
.rooms { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.room-card { display: flex; flex-direction: column; background: var(--t-panel); border: 3px solid var(--t-line); box-shadow: 5px 5px 0 #000; }
.room-card img { width: 100%; height: auto; image-rendering: pixelated; border-bottom: 3px solid var(--t-line); }
.room-card.locked img { filter: grayscale(1) brightness(.45); }
.room-card.done { border-color: var(--t-green); }
.room-body { padding: .6rem .8rem .8rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.room-body h3 { margin: 0 0 .2em; color: var(--t-text); }
.room-body .btn-term { margin-top: auto; }
.room-type { color: var(--t-gold); margin: 0; font-size: .85em; text-transform: uppercase; letter-spacing: .06em; }
.room-status { color: #b9d8c4; }
.vault-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .9rem; border: 3px dashed var(--t-gold); background: #120f05; }
.vault-card h3 { margin: 0; color: var(--t-gold); }
.vault-card.locked { border-color: var(--t-line); background: transparent; }
.vault-card.locked h3 { color: #8b95bd; }

/* Level-Wahl */
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; margin: .4rem 0 1rem; }
.level-btn { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .3rem; padding: .8rem; min-height: 6rem; border: 3px solid var(--t-line); background: var(--t-panel); box-shadow: 5px 5px 0 #000; font: inherit; color: var(--t-text); }
.level-btn:hover { border-color: var(--t-gold); }
.lv-name { font: .85rem/1.5 var(--f-head); }
.game.plain .lv-name { font: 700 1.15rem var(--font); }
.lv-azubi .lv-name { color: var(--t-green); }
.lv-profi .lv-name { color: var(--t-blue); }
.lv-boss .lv-name { color: var(--t-red); }
.lv-desc { color: #c6d6cc; font-size: .9em; }

/* Rätsel */
.locks { list-style: none; display: flex; gap: .35rem; padding: 0; margin: .2rem 0 .4rem; }
.locks li { width: 2rem; height: 2rem; display: grid; place-items: center; border: 2px solid var(--t-line); color: #6d7aa8; font-size: .8em; }
.locks li.open { color: #031208; background: var(--t-green); border-color: var(--t-green); }
.locks li.now { color: var(--t-gold); border-color: var(--t-gold); }
.scenario { font-size: 1.05em; color: #f0fff5; background: var(--t-panel); border-left: var(--px) solid var(--t-gold); padding: .5rem .8rem; }
.choices { display: grid; gap: .55rem; margin: .7rem 0 1rem; }
.choice { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .5em; min-height: var(--tap); padding: .35em .8em; border: 3px solid var(--t-line); background: var(--t-panel-2); box-shadow: 4px 4px 0 #000; font: inherit; color: var(--t-text); }
.choice:hover { border-color: var(--t-gold); }
.ch-key { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; background: var(--t-gold); color: #000; font: .7rem var(--f-head); }
.game.plain .ch-key { font: 700 .9rem var(--font); }
.answer { margin: .8rem 0 1rem; display: grid; gap: .35rem; }
.answer-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.answer-row input { flex: 1 1 10rem; max-width: 16rem; }
.unit { color: var(--t-gold); min-width: 2em; }
.found { color: var(--t-green); }
.meta { margin-top: 1rem; border-top: 2px dashed var(--t-line); padding-top: .4rem; }

/* Tabelle im Audit */
.sheet-wrap { margin: .8rem 0; border: 3px solid var(--t-line); background: #02040b; }
.fx { display: flex; gap: .6rem; align-items: center; padding: .25rem .5rem; border-bottom: 2px solid var(--t-line); background: #0a1124; min-height: 2.2rem; }
.fx::before { content: "fx"; font-style: italic; color: var(--t-gold); }
.fx-addr { min-width: 2.6em; color: var(--t-blue); border-right: 2px solid var(--t-line); padding-right: .5rem; }
.fx-f { color: var(--t-green); word-break: break-all; }
.sheet-scroll { overflow-x: auto; }
.sheet { border-collapse: collapse; min-width: 100%; }
.sheet th { background: #121c3a; color: #9aa6d4; font-weight: normal; padding: 0 .4rem; border: 1px solid var(--t-line); text-align: center; min-width: 2rem; }
.sheet td { padding: 0; border: 1px solid var(--t-line); }
.cell { all: unset; box-sizing: border-box; display: block; width: 100%; min-height: var(--tap); padding: .15em .5em; cursor: pointer; font: inherit; color: var(--t-text); white-space: nowrap; }
.cell.num { text-align: right; }
.cell.head { color: var(--t-blue); }
.cell.has-f { color: #f0fff5; }
.cell:hover { background: #12224a; }
.cell[aria-pressed="true"] { background: var(--t-gold); color: #000; }

/* Hilfe */
.hints { margin-top: 1rem; padding: .6rem .8rem .8rem; border: 3px solid var(--t-line); background: #070d1f; }
.hints h3 { margin-top: 0; }
.hint { border-left: var(--px) solid var(--t-blue); padding-left: .6rem; }
.helpcard { background: var(--t-paper); color: var(--t-ink); border: var(--px) solid #8a6a2a; box-shadow: 5px 5px 0 #000; padding: .6rem .9rem; margin: .6rem 0; }
.helpcard .hc-title { font: .7rem/1.6 var(--f-head); color: #6b3d00; margin-bottom: .4rem; }
.game.plain .helpcard .hc-title { font: 700 1rem var(--font); }
.helpcard ol { margin: 0; padding-left: 1.3em; }
.helpcard li { margin-bottom: .2em; }

/* Fragment und Sieg */
.fragment { display: inline-grid; justify-items: center; gap: .3rem; margin: .6rem 0 1rem; padding: 1rem 2rem; background: #021108; border: var(--px) solid var(--t-green); box-shadow: 6px 6px 0 #000, 0 0 24px rgba(109, 255, 156, .35); }
.frag-label { font: .65rem var(--f-head); color: var(--t-green-dim); }
.frag-code { font: 2.6rem/1.2 var(--f-head); color: var(--t-green); letter-spacing: .15em; text-shadow: 0 0 10px rgba(109, 255, 156, .6); }
.game.plain .frag-code { font: 700 3rem var(--mono); }
.cert { position: relative; margin: 1rem 0; padding: 1.2rem 1.4rem; background: #0a0f1f; border: var(--px) solid #c99a1e; box-shadow: 0 0 0 var(--px) #000, 8px 8px 0 var(--px) #000; text-align: center; animation: cert-in .6s ease-out; }
.cert::before, .cert::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--t-gold); top: -4px; left: -4px; }
.cert::after { left: auto; right: -4px; }
.cert-kicker { font: .65rem/1.6 var(--f-head); color: var(--t-gold); letter-spacing: .05em; }
.cert-name { font-size: 1.6em; color: #fff; margin: .2em 0; overflow-wrap: anywhere; }
.cert-rank { font: 1rem/1.5 var(--f-head); color: var(--t-green); text-shadow: 0 0 10px rgba(109, 255, 156, .45); }
.game.plain .cert-kicker, .game.plain .cert-rank { font-family: var(--font); font-weight: 700; }
.game.plain .cert-rank { font-size: 1.4rem; }
.cert-text { color: #c6d6cc; font-style: italic; }
.cert .stats { max-width: 30rem; margin: .8rem auto 0; text-align: left; }
.stats { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: .6rem 0 1rem; }
.stats dt { color: #9fb6a8; }
.stats dd { margin: 0; color: var(--t-green); }
.badges { list-style: none; padding: 0; margin: .4rem 0 .6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; }
.badge { display: flex; gap: .7rem; align-items: center; padding: .5rem .7rem; border: 3px dashed var(--t-line); color: #7f8bb3; }
.badge-ico { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: #121c3a; border: 2px solid var(--t-line); font-size: 1.1em; }
.badge-txt { display: grid; line-height: 1.15; }
.badge-txt small { font-size: .8em; }
.badge.got { border-style: solid; border-color: var(--t-gold); color: var(--t-text); background: #120f05; box-shadow: 4px 4px 0 #000; }
.badge.got .badge-ico { background: var(--t-gold); color: #000; border-color: #fff3b0; }
.badge.got b { color: var(--t-gold); }
.vault-open { box-shadow: 0 0 0 2px var(--t-gold), 0 0 30px rgba(255, 212, 94, .35); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 7; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 8px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes cert-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* Log */
.log { margin: 0; padding: .5rem 1.25rem .7rem; background: #02040b; border-top: var(--px) solid #3a4a86; min-height: 2.6em; position: relative; z-index: 1; }
.log-line { margin: 0; color: #9fb6a8; font-size: .9em; }
.log-line.ok { color: var(--t-green); }
.log-line.err { color: var(--t-red); }
.log-line.warn { color: var(--t-gold); }

/* Fehler-Wackler */
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Palming-Pause */
.break-dlg { max-width: 30rem; width: calc(100% - 2rem); padding: 1.4rem; text-align: center; background: #050a1a; color: var(--t-text); border: var(--px) solid var(--t-gold); box-shadow: 8px 8px 0 #000; font: 1.4rem/1.3 "VT323", var(--mono); }
.break-dlg::backdrop { background: rgba(0, 0, 0, .82); }
.break-dlg h2 { font: .95rem/1.6 "Press Start 2P", var(--mono); color: var(--t-gold); margin: 0 0 .8rem; }
.break-dlg p { margin: 0 0 .7rem; }
.breath { width: 6rem; height: 6rem; margin: .5rem auto 1rem; border-radius: 50%; background: radial-gradient(circle, #6dff9c 0%, #1f7a44 70%); animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.7); opacity: .7; } 50% { transform: scale(1.05); opacity: 1; } }
.break-left { font: 2rem "Press Start 2P", var(--mono); color: var(--t-green); }
.break-dlg .btn-term { margin-top: .4rem; }

/* Lehrkräfte-Hinweise unter dem Spiel */
.teacher { max-width: 62rem; margin: 0 auto var(--sp-6); }
.teacher-body { padding: 0 var(--sp-4) var(--sp-4); }

@media (max-width: 40rem) {
  .game { --f-size: 1.3rem; border-width: 3px; margin-top: var(--sp-4); }
  .game.big { --f-size: 1.55rem; }
  .screen { padding: .9rem .8rem; }
  .game h2 { font-size: .85rem; }
  .game.plain h2 { font-size: 1.3rem; }
  .cert { padding: 1rem .8rem; }
  .hud { padding: .5rem .7rem; }
  .frag-code { font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .shake, .cert, .breath { animation: none; }
  .confetti { display: none; }
  .btn-term:active { transform: none; }
}