/* Lærer i 4.b — retro-ramme kopieret fra Salten. Begrænset palet, hårde kanter, ingen eksterne fonte. */
:root {
  --ink: #0c0e0b; --panel: #20251f; --panelL: #2e352d; --panelD: #151914;
  --text: #ded6b8; --muted: #8a9484; --amber: #f1c95b; --amberD: #6b5424;
  --red: #d8392a; --redL: #ff6a48; --green: #62d860; --greenD: #24502a;
  --chalk: #24392c; --wood: #6b4a2a; --paper: #ddd3b4; --paperInk: #28271f; --aula: #3a5a8a;
  --font: "Courier New", Courier, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #070907; color: var(--text); font-family: var(--font); overflow: hidden; }
button { font: inherit; color: inherit; }
.hidden { display: none !important; }

#game {
  width: min(100vw, 1680px); height: 100vh; margin: auto; background: var(--panel);
  display: grid; grid-template-rows: 54px 1fr 66px; border: 4px solid var(--ink); box-shadow: 0 0 90px #000;
}

/* ---------- header ---------- */
header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 18px;
  background: linear-gradient(#2a3029, #1d221c); border-bottom: 4px solid var(--ink); letter-spacing: 1px;
}
.brand b { font-size: 18px; color: var(--amber); text-shadow: 2px 2px var(--ink); }
.brand span { font-size: 10px; margin-left: 12px; color: var(--muted); }
.clockbox { display: flex; align-items: center; gap: 10px; background: var(--ink); padding: 4px 12px; border: 2px solid #3a4038; }
.clockbox span { font-size: 10px; color: var(--muted); }
.clockbox strong { font-size: 26px; color: #ff8a5a; text-shadow: 0 0 8px #ff5a2a88; letter-spacing: 3px; }
.topstats { display: flex; justify-content: flex-end; align-items: center; gap: 10px; font-size: 12px; }
.topstats strong { color: var(--amber); font-size: 16px; margin-left: 6px; }
.chip { background: var(--panelL); border: 2px solid var(--ink); box-shadow: inset 1px 1px #4a5248, 2px 2px var(--ink); padding: 4px 8px; font-size: 10px; cursor: pointer; }
.chip:active { transform: translate(1px, 1px); box-shadow: inset 1px 1px #4a5248; }

/* ---------- layout ---------- */
main { display: grid; grid-template-columns: 66% 34%; min-height: 0; }
.plant { position: relative; overflow: hidden; background: #0e110e; border-right: 5px solid var(--ink); display: grid; place-items: center; }
#sceneCanvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.plantTitle { position: absolute; left: 14px; top: 12px; background: var(--panelD); border: 2px solid #9a8d69; padding: 4px 9px; color: #e7d89f; font-size: 11px; box-shadow: 3px 3px var(--ink); pointer-events: none; }
.toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--ink); border: 2px solid var(--amber); color: var(--amber); padding: 8px 14px; font-size: 13px; font-weight: bold; box-shadow: 4px 4px #000; white-space: nowrap; pointer-events: none; animation: toastIn .2s; max-width: 96%; overflow: hidden; text-overflow: ellipsis; }
.toast.bad { border-color: var(--redL); color: var(--redL); }
.toast.good { border-color: var(--green); color: var(--green); }
@keyframes toastIn { from { transform: translate(-50%, 12px); opacity: 0; } }
.paused { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: #000a; font-size: 40px; color: var(--amber); letter-spacing: 8px; }
.paused small { font-size: 12px; letter-spacing: 1px; color: var(--muted); }

/* ---------- katederet ---------- */
.office {
  position: relative; overflow: hidden; display: grid; grid-template-rows: 42% 58%;
  background: repeating-linear-gradient(0deg, #2b332c 0 38px, #263027 38px 40px);
}
.wallarea { position: relative; display: grid; grid-template-columns: 40% 60%; gap: 4%; padding: 5% 5% 3%; min-height: 0; }
.annunciator { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 5px; align-content: stretch; background: #171b16; border: 4px solid var(--ink); padding: 6px; box-shadow: 4px 4px #111, inset 0 0 0 2px #3a4038; }
.annunciator div { font-size: 10px; line-height: 1.15; text-align: center; padding: 3px 2px; display: grid; place-content: center; background: #3a2a14; color: #7a6230; border: 2px solid #0a0a08; font-weight: bold; }
.annunciator div.on { background: #c22a1c; color: #ffe0c0; box-shadow: 0 0 10px #ff3a2a; animation: blink .5s steps(1) infinite; }
@keyframes blink { 50% { background: #5a1a12; color: #ff9a80; box-shadow: none; } }
.portrait { position: relative; background: #111; border: 6px solid #1b1610; box-shadow: 0 0 0 3px #5a4630, 6px 6px #111; display: flex; flex-direction: column; min-height: 0; }
#faceCanvas { width: 100%; flex: 1; min-height: 0; object-fit: fill; image-rendering: pixelated; display: block; background: #222; }
#faceCanvas.swap { animation: swap .25s steps(2); }
@keyframes swap { 50% { filter: brightness(1.5); } }
.nameplate { position: absolute; left: 6px; top: 6px; background: #d9c58a; color: #2a2210; font-size: 9px; padding: 2px 5px; border: 1px solid #5a4a20; font-weight: bold; }
.nameplate small { display: block; font-size: 7px; }
.mood { font-size: 11px; padding: 5px 6px; background: var(--ink); color: var(--green); white-space: nowrap; overflow: hidden; letter-spacing: 1px; border-top: 2px solid #333; display: flex; flex-direction: column; gap: 3px; }
#moodTxt { overflow: hidden; }
.pulse { display: flex; align-items: center; gap: 6px; color: var(--green); font-size: 9px; }
.pulse b { font-weight: normal; font-size: 11px; min-width: 3ch; text-align: right; }
.pulse b::after { content: ' BPM'; font-size: 8px; }
#ecg { flex: 1; min-width: 0; height: 14px; image-rendering: pixelated; display: block; }
.pulse.p2 { color: var(--amber); } .pulse.p3 { color: #ff9a50; } .pulse.p4 { color: var(--redL); }
.mood.lvl3 { color: var(--amber); } .mood.lvl5 { color: #ff9a50; } .mood.lvl6 { color: var(--redL); animation: blink2 .4s steps(1) infinite; }
@keyframes blink2 { 50% { color: #fff; } }

.deskarea { container-type: inline-size; position: relative; background: linear-gradient(#5b4931 0 6px, #4d3c27 6px); border-top: 7px solid #1c1812; min-height: 0; }
.deskarea:before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 60px, #00000014 60px 62px); pointer-events: none; }

/* lektionen: håndtagene på en lille grøn tavle */
.lesson {
  position: absolute; left: 3%; top: 3%; width: 64%; height: 57%; z-index: 2; container-type: inline-size;
  background: var(--chalk); border: 6px solid var(--wood); outline: 3px solid var(--ink); box-shadow: 6px 6px #111, inset 0 0 30px #0008;
  padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; color: #e8f0e0; font-size: 10px;
}
.lessonTop { display: flex; justify-content: space-between; gap: 6px; font-weight: bold; font-size: 12px; color: #f4e9a8; letter-spacing: 1px; white-space: nowrap; }
.lessonState { font-size: 10px; color: #b8e8c0; min-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lessonState.warn { color: var(--amber); animation: blink3 .8s steps(1) infinite; }
@keyframes blink3 { 50% { opacity: .35; } }
.energyMini { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #b8c8b0; }
.rowLabel { font-size: 9px; color: #f4e9a8; font-weight: bold; letter-spacing: 1px; margin-bottom: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modes, .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; flex: 1; min-height: 0; }
.modes button, .acts button { background: #e8e4d4; color: #1a1a14; border: 3px solid var(--ink); box-shadow: 2px 2px #0008; padding: 3px 2px; font-weight: bold; font-size: clamp(9px, 4.2cqw, 13px); cursor: pointer; line-height: 1.1; min-width: 0; overflow: hidden; }
.modes button small, .acts button small { display: block; font-weight: normal; font-size: clamp(7px, 3cqw, 9px); opacity: .8; margin-top: 2px; }
.modes button.on { background: var(--amber); box-shadow: inset 0 0 0 2px #fff8, 0 0 0 2px var(--amber); }
.modes button:not(:disabled):hover, .acts button:not(:disabled):hover { background: #fff6d8; }
.modes button:not(:disabled):active, .acts button:not(:disabled):active { transform: translate(1px, 1px); box-shadow: none; }
.modes button:disabled, .acts button:disabled { opacity: .38; cursor: default; }
.acts button { background: #c8dcc0; }
.acts #actSssh { background: #f0b8a8; }
.goalRow { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #f4e9a8; }
.goalRow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.goalRow.dim { opacity: .4; }

.notes { position: absolute; left: 69%; top: 3%; width: 29%; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.note { background: #e8d860; color: #2a2610; font-size: 8px; line-height: 1.2; padding: 4px; box-shadow: 2px 2px #0006; transform: rotate(-3deg); font-weight: bold; }
.note:nth-child(2) { transform: rotate(2deg); background: #f0a8b8; }
.note:nth-child(3) { transform: rotate(-1deg); background: #a8d8f0; }
.copyBtn { position: absolute; left: 69%; top: 44%; width: 28%; z-index: 3; background: #c9d0cc; border: 3px solid var(--ink); box-shadow: 3px 3px #171815; padding: 5px 4px; font-weight: bold; font-size: 11px; cursor: pointer; color: #1a1a14; line-height: 1.15; }
.copyBtn small { display: block; font-weight: normal; font-size: 8px; }
.copyBtn.ok { background: #a8d890; }
.copyBtn:hover { box-shadow: 3px 3px #171815, 0 0 0 2px var(--amber); }

.doorBtn { position: absolute; left: 3%; bottom: 4%; width: 17%; height: 33%; background: #8a5a30; border: 4px solid var(--ink); box-shadow: inset 2px 2px #b07a44, 4px 4px #171815; cursor: pointer; z-index: 3; padding: 0; }
.doorBtn .pane { position: absolute; left: 22%; right: 22%; top: 8%; height: 26%; background: #d8e4d8; border: 3px solid var(--ink); }
.doorBtn .knob { position: absolute; right: 10%; top: 55%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #c8c4a8; border: 2px solid var(--ink); }
.doorBtn .doorLabel { position: absolute; bottom: 4px; left: 0; right: 0; font-size: 8px; color: #f0d8a8; }
.doorBtn em { position: absolute; left: 0; right: 0; top: 40%; font-size: 9px; color: var(--redL); font-style: normal; font-weight: bold; text-shadow: 1px 1px #000; }
.doorBtn.knock { animation: knock .5s infinite; }
.doorBtn.knock .pane { background: linear-gradient(#6a5a4a 0 70%, #d8e4d8 70%); }
@keyframes knock { 0%, 60%, 100% { transform: none; } 70% { transform: translateX(-2px); } 80% { transform: translateX(2px); } 90% { transform: translateX(-1px); } }
.doorBtn:hover { box-shadow: inset 2px 2px #b07a44, 4px 4px #171815, 0 0 0 2px var(--amber); }

.aulaBtn { position: absolute; left: 22%; bottom: 4%; width: 28%; height: 31%; background: none; border: 0; padding: 0; cursor: pointer; z-index: 3; }
.aulaBtn .screen { position: absolute; left: 8%; right: 8%; top: 0; bottom: 20%; background: #2a2e36; border: 4px solid var(--ink); box-shadow: 4px 4px #171815; display: block; }
.aulaBtn .screen:before { content: ""; position: absolute; inset: 3px; background: #e8eef6; }
.aulaBtn .aulaTop { position: absolute; left: 3px; right: 3px; top: 3px; height: 14px; background: var(--aula); color: #fff; font-size: 9px; font-weight: bold; text-align: left; padding-left: 4px; line-height: 14px; z-index: 1; }
.aulaBtn .lines { position: absolute; left: 9px; right: 9px; top: 22px; bottom: 6px; background: repeating-linear-gradient(0deg, transparent 0 6px, #a8b8d0 6px 8px); z-index: 1; }
.aulaBtn b { position: absolute; right: -10px; top: -10px; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; background: var(--red); color: #fff; font-size: 12px; line-height: 20px; border: 2px solid var(--ink); z-index: 2; display: none; }
.aulaBtn.has b { display: block; animation: nudge 1.5s infinite; }
.aulaBtn .kbd { position: absolute; left: 0; right: 0; bottom: 4%; height: 16%; background: #4a4e56; border: 3px solid var(--ink); border-radius: 0 0 6px 6px; display: block; }
.aulaBtn:hover .screen { box-shadow: 4px 4px #171815, 0 0 0 2px var(--amber); }
@keyframes nudge { 0%, 85%, 100% { transform: none; } 90% { transform: translateY(-3px); } }

.handsBtn { position: absolute; left: 52%; bottom: 6%; width: 13%; min-width: 48px; height: 25%; background: #e8e4d4; border: 3px solid var(--ink); box-shadow: 3px 3px #171815; cursor: pointer; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px; color: #1a1a14; }
.handsBtn canvas { width: 46%; image-rendering: pixelated; }
.handsBtn b { font-size: 15px; line-height: 1; }
.handsBtn span { font-size: 7px; }
.handsBtn.up { background: var(--amber); animation: nudge 1s infinite; }
.handsBtn.up canvas { animation: wave .4s steps(2) infinite; }
@keyframes wave { 50% { transform: rotate(-14deg); } }
.handsBtn:hover { box-shadow: 3px 3px #171815, 0 0 0 2px var(--amber); }

.manualBook { position: absolute; right: 3%; bottom: 4%; width: 19%; min-width: 64px; height: 13%; min-height: 34px; z-index: 3; cursor: pointer; transform: rotate(-4deg);
  background: #2a4a8a; border: 3px solid var(--ink); border-left-width: 6px; box-shadow: 3px 3px #171815, inset 0 -3px #e6dcbc; padding: 0 6px 4px; color: #f0d870; font-size: clamp(8px, 2.4cqw, 12px); font-weight: bold; line-height: 1.15; text-align: left; letter-spacing: 1px; }
.manualBook i { position: absolute; right: 4px; top: -6px; width: 15px; height: 15px; border-radius: 50%; background: #e8d860; border: 1px solid var(--ink); transform: rotate(12deg); }
.manualBook:hover { box-shadow: 3px 3px #171815, inset 0 -3px #e6dcbc, 0 0 0 2px var(--amber); }
.frame { position: absolute; right: 6%; bottom: 21%; width: 10%; min-width: 38px; aspect-ratio: 4 / 5; z-index: 3; cursor: pointer; padding: 3px;
  background: #f8f6ee; border: 2px solid #8a8470; box-shadow: 3px 3px #171815; transform: rotate(5deg); }
.frame canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.frame:hover { box-shadow: 3px 3px #171815, 0 0 0 2px var(--amber); }
.coffee { position: absolute; left: 67%; bottom: 6%; z-index: 2; background: none; border: 0; padding: 6px 12px 2px 4px; cursor: pointer; }
.coffee:hover .cup { box-shadow: 0 0 0 2px var(--amber); }
.coffee:active { transform: translateY(1px); }
.coffee .cup { display: block; width: 26px; height: 40px; background: #2a8a8a; border: 3px solid var(--ink); border-top-width: 6px; border-radius: 3px 3px 6px 6px; position: relative; overflow: hidden; }
.coffee .cup i { position: absolute; left: 0; right: 0; bottom: 0; height: 80%; background: repeating-linear-gradient(0deg, #2a8a8a 0 4px, #3a9a9a 4px 5px); transition: height .3s; }
.coffee.empty .vapor { display: none; }
.coffee.empty .cup { animation: nudge 2s infinite; opacity: .75; }
.coffee .vapor { position: absolute; left: 9px; top: -18px; color: #ddd8; font-size: 20px; animation: vapor 2s infinite; }
@keyframes vapor { 0% { transform: translateY(4px); opacity: 0; } 50% { opacity: .8; } 100% { transform: translateY(-8px); opacity: 0; } }

/* ---------- dokumenter over katederet: døren, Aula, hænderne og vikarmappen ---------- */
.overlay { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 10px; background: #050806aa; }
.paper {
  width: min(100%, 440px); max-height: 100%; overflow: auto; background: var(--paper); color: var(--paperInk); padding: 22px 24px 18px;
  box-shadow: 10px 12px #080907; position: relative; border: 1px solid #91876d; transform: rotate(-1deg);
  background-image: repeating-linear-gradient(0deg, transparent 0 23px, #00000010 23px 24px);
  animation: slideIn .35s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes slideIn { from { transform: translate(40px, 120%) rotate(8deg); } }
.paper.out { animation: slideOut .3s ease-in forwards; }
@keyframes slideOut { to { transform: translate(-60px, -130%) rotate(-10deg); } }
.paper .from { font-size: 10px; letter-spacing: 2px; opacity: .7; }
.paper h2 { font-size: 20px; margin: 4px 0 10px; border-bottom: 3px double #38362c; padding-bottom: 6px; }
.paper p { font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.45; white-space: pre-line; margin: 0 0 12px; }
.paper .reply { font-family: var(--font); font-style: italic; font-size: 13px; color: #8a3e32; min-height: 0; margin: 8px 0 0; }
.paper.door { background: #1e221d; color: #d8e8c8; border: 4px solid var(--ink); background-image: none; transform: rotate(0); }
.paper.door h2 { border-color: #4a5a48; color: var(--amber); }
.paper.door p { font-family: var(--font); font-size: 15px; }
.paper.door .reply { color: var(--amber); }
.paper.door .choices button { background: #2e352d; color: #e8f0d8; border-color: #0a0c0a; box-shadow: 3px 3px #000; }
.paper.door .choices button:hover { background: #3e473c; }
.paper.hand { background: #fffdf4; background-image: none; border: 4px solid var(--ink); border-radius: 18px; transform: rotate(.6deg); }
.paper.hand p { font-family: var(--font); font-size: 16px; font-weight: bold; }
.paper.hand h2 { border-bottom: 3px dotted #38362c; }
.paper.aula { background: #f4f7fb; background-image: none; border: 3px solid var(--aula); transform: rotate(0); box-shadow: 10px 12px #080907, inset 0 6px var(--aula); }
.paper.aula .from { color: var(--aula); opacity: 1; font-weight: bold; }
.paper.aula h2 { border-bottom: 3px solid var(--aula); }
.paper.aula p { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
.paper.aula .choices button { background: #dfe8f4; border-color: #2a3a5a; }
.paper.aula .choices button:hover { background: #f0f6ff; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices button { background: #d1c49e; border: 3px solid #363126; padding: 8px 12px; cursor: pointer; font-weight: bold; box-shadow: 3px 3px #36312688; color: var(--paperInk); }
.choices button:hover { background: #f1e2b4; }
.stamp { position: absolute; right: 16px; top: 14px; border: 3px solid #8a3e32; color: #8a3e32; padding: 3px 7px; transform: rotate(8deg); font-weight: bold; font-size: 12px; opacity: .85; }
.stamp.big { font-size: 26px; top: 40%; right: 18%; border-width: 5px; opacity: .9; animation: thump .2s ease-out; }
.stamp.green { color: #2f6a2a; border-color: #2f6a2a; }
@keyframes thump { from { transform: rotate(8deg) scale(2.2); opacity: 0; } }
.paper.manual { background-color: #efe6c8; }
.manualBody { font-family: var(--font); white-space: normal; font-size: 11px; line-height: 1.3; }
.mTable { width: 100%; border-collapse: collapse; margin: 2px 0 12px; }
.mTable th, .mTable td { border: 1px solid #8d8468; padding: 3px 4px; font-size: 10px; text-align: left; vertical-align: top; }
.mTable tr:first-child th { background: #d6cba6; font-size: 9px; letter-spacing: .5px; }
.mScale { display: flex; align-items: stretch; gap: 3px; margin-bottom: 12px; }
.mScale > b { align-self: center; margin-right: 4px; }
.mScale span { flex: 1; padding: 4px; border: 1px solid #8d8468; display: flex; flex-direction: column; }
.mScale i { font-style: normal; font-weight: bold; } .mScale small { font-size: 10px; }
.mScale .m0 { background: #b8c8e3; } .mScale .m1 { background: #d8e0ea; } .mScale .m2 { background: #cfe3b8; } .mScale .m3 { background: #f1dc8a; } .mScale .m4 { background: #e89a8a; }
.mLine { margin-bottom: 6px; } .mLine b { letter-spacing: 1px; }
.stamp.sticker { top: auto; bottom: 16px; right: 14px; max-width: 160px; white-space: pre-line; background: #e8d860; color: #2a2610; border: 0; border-radius: 4px; padding: 6px 8px; font-size: 10px; line-height: 1.25; transform: rotate(-4deg); box-shadow: 2px 2px #0004; opacity: 1; }

/* ---------- footer ---------- */
footer { display: grid; grid-template-columns: 1.7fr 1.5fr .7fr .8fr .8fr .7fr .6fr; gap: 10px; align-items: center; padding: 6px 16px; background: linear-gradient(#232822, #191d18); border-top: 5px solid var(--ink); font-size: 12px; }
.gauge { border-right: 1px solid #454c40; padding-right: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.gauge span { width: 100%; font-size: 9px; color: var(--muted); letter-spacing: 1px; white-space: nowrap; }
.gauge b { color: #f0e6b0; font-size: 15px; }
.gauge small { color: var(--muted); font-size: 9px; }
.gauge b.bad { color: var(--redL); }
.bar { position: relative; flex: 1; height: 12px; background: #0a0c0a; border: 2px solid #3a4036; min-width: 50px; align-self: center; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; max-width: 100%; background: repeating-linear-gradient(90deg, #a9c86a 0 6px, #0a0c0a 6px 8px); transition: width .2s; }
.bar i.bad { background: repeating-linear-gradient(90deg, #ff5a3a 0 6px, #0a0c0a 6px 8px); }
.bar i.done { background: repeating-linear-gradient(90deg, #62d860 0 6px, #0a0c0a 6px 8px); }
.bar .zone { position: absolute; top: -4px; bottom: -4px; left: 38%; width: 30%; border-left: 2px solid var(--green); border-right: 2px solid var(--green); pointer-events: none; }
.bar.goal i { background: repeating-linear-gradient(90deg, #8ac0f0 0 6px, #0a0c0a 6px 8px); }
.bar.goal i.done { background: repeating-linear-gradient(90deg, #62d860 0 6px, #0a0c0a 6px 8px); }
#goalBar { background: repeating-linear-gradient(90deg, #8ac0f0 0 6px, #0a0c0a 6px 8px); }

/* ---------- modaler ---------- */
.boom { overflow-y: auto; position: fixed; inset: 0; z-index: 25; background: #050605; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 10px; padding: 16px; }
.boom canvas { width: min(94vw, 125vh); height: auto; image-rendering: pixelated; border: 4px solid var(--ink); box-shadow: 0 0 0 3px #3a3e38; }
.boom h2 { margin: 0; font-size: clamp(28px, 7vw, 64px); color: var(--amber); letter-spacing: 6px; text-shadow: 4px 4px #8a2a1e; visibility: hidden; }
.boom p { margin: 0; color: var(--text); letter-spacing: 2px; font-size: 13px; text-align: center; visibility: hidden; }
.boom button { visibility: hidden; font-size: 14px; padding: 10px 18px; background: #c9e0a0; color: #1a2410; border: 3px solid var(--ink); box-shadow: 4px 4px #000; cursor: pointer; font-weight: bold; }
.boom.t1 h2 { visibility: visible; animation: boomIn .4s cubic-bezier(.2, 1.6, .4, 1); } .boom.t2 p, .boom.t3 button { visibility: visible; }
@keyframes boomIn { from { transform: scale(2.4); opacity: 0; } }
.modal { overflow-y: auto; position: fixed; inset: 0; background: #050806cc; display: grid; place-items: center; z-index: 30; padding: 16px; }
.introCard { width: min(660px, 100%); background: #252b25; border: 7px solid var(--ink); padding: 36px; text-align: center; box-shadow: 15px 15px #050605, inset 0 0 0 3px #3e463c; }
.introLogo { font-size: 11px; color: var(--muted); letter-spacing: 3px; }
.introCard h1 { font-size: 40px; color: var(--amber); letter-spacing: 2px; margin: 14px 0 6px; text-shadow: 4px 4px var(--ink); line-height: 1.05; }
.introCard h1 span { display: block; color: #d9d8bf; font-size: 24px; }
.introSub { color: var(--muted); font-size: 12px; }
.brief { margin: 22px auto; padding: 18px; border: 2px solid #626d5d; max-width: 500px; line-height: 1.55; font-size: 14px; }
.brief small { color: var(--muted); font-size: 11px; }
.proto { margin: 18px 0 0; font-size: 11px; color: var(--muted); }
#start, #again { background: #9baf79; border: 4px solid #16201a; padding: 12px 22px; font-weight: bold; box-shadow: 5px 5px #07100c; cursor: pointer; color: var(--ink); font-size: 15px; }
#start:hover, #again:hover { background: #b8cc90; }
.reportPaper { width: min(560px, 100%); transform: rotate(-.6deg); animation: printIn 1s steps(12); }
@keyframes printIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.reportPaper h2 { font-family: var(--font); letter-spacing: 4px; }
.reportDate { font-family: var(--font) !important; font-size: 11px !important; }
#reportBody { font-family: var(--font); font-size: 13px; line-height: 1.55; margin: 8px 0; white-space: pre-wrap; font-weight: bold; }
.reportFoot { display: flex; gap: 14px; align-items: center; margin: 8px 0 14px; }
#reportFace { width: 120px; height: 150px; image-rendering: pixelated; border: 5px solid #302e25; flex: none; }
.reportFoot h3 { margin: 0 0 6px; font-family: var(--font); font-size: 16px; }
.reportFoot p { font-size: 13px; margin: 0; }
.stamp.red { top: 24px; }

/* små skærme på langs: hele lokalet skaleres som ét billede (styres fra game.js) */
#game.scaled { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; }
.rotateHint { display: none; }

/* højkant (telefon): delene stables */
@media (max-aspect-ratio: 1/1) {
  html, body { overflow-x: hidden; overflow-y: auto; }
  #game { width: 100%; height: auto; min-height: 100vh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; border-width: 2px; }
  .rotateHint { display: block; background: var(--amber); color: var(--ink); font-size: 12px; font-weight: bold; text-align: center; padding: 6px; }
  header { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 10px; gap: 6px; }
  .brand b { font-size: 14px; }
  .brand span, .clockbox .shift, .clockbox #day { display: none; }
  .clockbox strong { font-size: 20px; }
  .topstats { grid-column: 1 / -1; justify-content: space-between; }
  main { grid-template-columns: minmax(0, 1fr); }
  .plant { min-width: 0; aspect-ratio: 512 / 400; border-right: 0; border-bottom: 5px solid var(--ink); }
  #sceneCanvas { max-width: 100%; }
  .office { min-height: 700px; min-width: 0; grid-template-rows: 260px 1fr; }
  footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gauge.wide { grid-column: span 3; }
  .toast { white-space: normal; text-align: center; width: 92%; }
}
/* lave skærme (telefon på langs): introen skal kunne ses uden at scrolle (lektie fra Salten) */
@media (max-height: 520px) {
  .introCard { padding: 12px 18px; }
  .introCard h1 { font-size: 26px; margin: 6px 0 2px; } .introCard h1 span { font-size: 16px; }
  .brief { margin: 8px auto; padding: 8px 12px; font-size: 12px; line-height: 1.4; }
  .brief br + br { display: none; }
  .proto { margin-top: 6px; }
}
/* testtilstand (?test=…): ingen animationer, så screenshots viser sluttilstanden */
body.test *, body.test *:before, body.test *:after { animation: none !important; transition: none !important; }