/* 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;
  --strip: 56px; /* barernes strimmel under lokalet */
}
* { 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; 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 ---------- */
/* lokalet (512:400) og barernes strimmel får den fulde højde; højre side får resten, mindst 360 px */
main { display: grid; grid-template-columns: minmax(0, calc((100vh - 66px - var(--strip)) * 1.28)) minmax(360px, 1fr); min-height: 0; }
.plant { position: relative; overflow: hidden; background: #0e110e; border-right: 5px solid var(--ink); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; container-type: size; }
/* lokalet og hylden deler samme ramme (512:400), så knapperne altid står på hylden */
.stage { position: relative; flex: none; width: min(100cqw, calc((100cqh - var(--strip)) * 1.28)); aspect-ratio: 512 / 400; container-type: inline-size; }
#sceneCanvas { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

/* hylden bagerst i klassen (selve hylden tegnes i scene.js) */
.shelf { position: absolute; left: 17.97%; width: 70.3%; top: 91.75%; height: 6.75%; display: flex; gap: .7%; }
.shelf .gap { flex: .25; }
.shelf button { flex: 1; min-width: 0; padding: 0 .3cqw; background: #e8e4d4; color: #1a1a14; border: .3cqw solid var(--ink); box-shadow: .3cqw .3cqw #000a; font-weight: bold; font-size: 1.25cqw; white-space: nowrap; overflow: hidden; cursor: pointer; }
.shelf button.act { background: #c8dcc0; }
.shelf #actSssh { background: #f0b8a8; }
.shelf button.on { background: var(--amber); box-shadow: inset 0 0 0 .25cqw #fff8, 0 0 0 .25cqw var(--amber); }
.shelf button:not(:disabled):hover { background: #fff6d8; }
.shelf button:not(:disabled):active { transform: translate(1px, 1px); box-shadow: none; }
.shelf button:disabled, .shelf button.dim { opacity: .4; cursor: default; }
.shelf button.dim { cursor: pointer; }
.shelf button.hide { visibility: hidden; }
.shelf.out { visibility: hidden; }
.shelf button.put { animation: put .25s ease-out; }
@keyframes put { from { transform: translateY(-70%) scale(1.15); opacity: 0; } }
.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; }
/* små tekster, der stiger op dér, hvor det sker (game.js: say), og forsvinder igen */
.say { position: absolute; z-index: 6; transform: translate(-50%, -100%); max-width: min(260px, 90%); width: max-content; background: #0c0e0bdd; color: var(--amber); border-left: 3px solid var(--amber); padding: 3px 7px; font-size: 11px; font-weight: bold; line-height: 1.3; letter-spacing: .5px; text-align: left; pointer-events: none; animation: sayIn .25s ease-out; transition: opacity .45s, transform .45s; }
.say.bad { color: var(--redL); border-color: var(--redL); }
.say.good { color: var(--green); border-color: var(--green); }
.say.gone { opacity: 0; transform: translate(-50%, calc(-100% - 14px)); }
@keyframes sayIn { from { opacity: 0; transform: translate(-50%, calc(-100% + 10px)); } }
.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); }

/* ---------- højre side ---------- */
.side { position: relative; overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: linear-gradient(#5b4931 0 6px, #4d3c27 6px); }
.side:before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 60px, #00000014 60px 62px); pointer-events: none; }
.sideTop { position: relative; display: flex; flex: 1 1 auto; min-height: 0; max-height: 50%; }
.sideTop .portrait { flex: 1; min-width: 0; }
.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; } }

/* hendes ting på skrivebordet: tegningen, kaffen og vikarmappen */
.things { position: relative; display: flex; align-items: center; justify-content: space-around; gap: 10px; min-height: 0; flex: 1 1 auto; padding: 4px 6px; }
.frame { width: 64px; aspect-ratio: 4 / 5; 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); }
/* lærerværelsets hvide krus med hank, blå stribe og kaffe i toppen (data-sips 0–3 sættes i game.js) */
.coffee { position: relative; background: none; border: 0; padding: 22px 18px 2px 6px; cursor: pointer; }
.coffee:hover .mug { box-shadow: 3px 3px #171815, 0 0 0 2px var(--amber); }
.coffee:active { transform: translateY(1px); }
.coffee .mug { display: block; width: 38px; height: 42px; position: relative; border: 3px solid var(--ink); border-radius: 2px 2px 7px 7px; box-shadow: 3px 3px #171815;
  background: linear-gradient(90deg, #0000 0 70%, #0000001a 70%), linear-gradient(#f4f1e8 0 13px, #3a6aa8 13px 17px, #f4f1e8 17px 26px, #3a6aa8 26px 28px, #f4f1e8 28px); }
.coffee .mug:after { content: ""; position: absolute; right: -15px; top: 7px; width: 10px; height: 17px; border: 4px solid #f4f1e8; border-left: 0; border-radius: 0 9px 9px 0; box-shadow: 3px 0 0 -1px var(--ink); outline: 0; }
.coffee .mug:before { content: ""; position: absolute; right: -18px; top: 4px; width: 14px; height: 23px; border: 3px solid var(--ink); border-left: 0; border-radius: 0 12px 12px 0; }
.coffee .mug i { position: absolute; left: 1px; right: 1px; top: 1px; height: 7px; border-radius: 50%; background: radial-gradient(ellipse at 40% 35%, #8a5a30 0 25%, #4a2a12 60%); box-shadow: inset 0 1px #2a1608; }
.coffee[data-sips="2"] .mug i { background: radial-gradient(ellipse at 40% 60%, #7a4a26 0 20%, #3a200c 60%); box-shadow: inset 0 2px #d8d2c2; }
.coffee[data-sips="1"] .mug i { background: radial-gradient(ellipse at 40% 75%, #6a3e1e 0 15%, #2e1a0a 55%); box-shadow: inset 0 4px #d8d2c2; }
.coffee[data-sips="0"] .mug i { background: #cfc8b6; box-shadow: inset 0 0 0 1px #8a6a48; }
.coffee[data-sips="1"] .vapor.v2, .coffee[data-sips="2"] .vapor.v2 { display: none; }
.coffee.empty .vapor { display: none; }
.coffee.empty .mug { animation: nudge 2s infinite; }
.coffee .vapor { position: absolute; left: 14px; top: 0; color: #e8e2d0aa; font-size: 20px; animation: vapor 2s infinite; }
.coffee .vapor.v2 { left: 26px; animation-delay: 1s; }
@keyframes vapor { 0% { transform: translateY(4px); opacity: 0; } 50% { opacity: .8; } 100% { transform: translateY(-8px); opacity: 0; } }
@keyframes nudge { 0%, 85%, 100% { transform: none; } 90% { transform: translateY(-3px); } }
.manualBook { position: relative; width: 120px; min-height: 46px; 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: 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); }

/* fag, tid og tallene */
.lessonBox { position: relative; background: var(--panel); border: 4px solid var(--ink); box-shadow: 4px 4px #111; padding: 9px 12px 11px; }
.lessonTop { display: flex; justify-content: space-between; gap: 6px; font-weight: bold; font-size: 14px; color: #f4e9a8; letter-spacing: 2px; white-space: nowrap; }
.lessonState { font-size: 11px; color: #b8e8c0; min-height: 13px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lessonState.warn { color: var(--amber); animation: blink3 .8s steps(1) infinite; }
@keyframes blink3 { 50% { opacity: .35; } }
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 10px; margin-top: 10px; }

/* barerne i strimlen under hylden, side om side og lige så brede som lokalet */
.meters { flex: none; width: min(100cqw, calc((100cqh - var(--strip)) * 1.28)); height: var(--strip); background: var(--panel); border-top: 4px solid var(--ink); padding: 6px 14px 0; display: flex; gap: 22px; }
.meter { flex: 1; min-width: 0; }
.meter > span { display: block; font-size: 9px; color: var(--muted); letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter .line { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.meter b { color: #f0e6b0; font-size: 15px; min-width: 7.5em; letter-spacing: 1px; }
.meter b.bad { color: var(--redL); }
.meters .bar { height: 18px; }

/* ---------- dokumenter midt på skærmen: døren, Aula, hænderne og vikarmappen (under klokken) ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: #05080688; }
.paper {
  width: min(100%, 460px); 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 .pace { font-size: 9px; letter-spacing: 2px; opacity: .55; margin-top: 10px; }.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; }

/* ---------- tal og barer ---------- */
.gauge { 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; } }
/* klokken: overskriften først, pointen et øjeblik efter */
.bell { position: fixed; inset: 0; z-index: 22; background: #050806f2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; text-align: center; cursor: pointer; }
.bellTime { font-size: 12px; color: var(--muted); letter-spacing: 3px; animation: bellShake .12s steps(2) 6; }
.bell h2 { margin: 0; font-size: clamp(30px, 7vw, 72px); color: var(--amber); letter-spacing: 5px; line-height: 1.05; text-shadow: 4px 4px #6b5424; overflow-wrap: anywhere; animation: boomIn .4s cubic-bezier(.2, 1.6, .4, 1); }
.bell p { margin: 0; }
.bellSub { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(18px, 2.6vw, 28px); color: var(--text); max-width: 32ch; animation: bellIn .4s 1.1s both; }
.bell.bad .bellSub { color: var(--redL); }
.bellMore { font-size: 13px; color: #b8e8c0; letter-spacing: 2px; animation: bellIn .4s 1.6s both; }
.bellMore:empty { display: none; }
.bellGo { font-size: 10px; color: var(--muted); letter-spacing: 2px; margin-top: 12px !important; animation: bellIn .4s 2s both; }
@keyframes bellIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes bellShake { 50% { transform: translateX(3px); } }
.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: 560px; line-height: 1.55; font-size: 14px; display: flex; align-items: center; gap: 18px; text-align: left; }
#introFace { width: 112px; height: 140px; flex: none; image-rendering: pixelated; border: 4px solid #1b1610; box-shadow: 0 0 0 2px #5a4630, 4px 4px #050605; transform: rotate(-2deg); }
.brief small { color: var(--muted); font-size: 11px; }
.proto { margin: 18px 0 0; font-size: 11px; color: var(--muted); }
#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; }
#again:hover { background: #b8cc90; }
.tempoLabel { margin: 18px 0 8px; font-size: 11px; color: var(--muted); letter-spacing: 2px; }
.tempo { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* sværhedsgraden står stort på knappen: privatskolen er let, folkeskolen er meget svær */
.tempo button { min-width: 210px; border: 4px solid #16201a; padding: 12px 22px; font-weight: bold; box-shadow: 5px 5px #07100c; cursor: pointer; color: var(--ink); font-size: 15px; letter-spacing: 1px; }
.tempo button em { display: block; font-style: normal; font-size: 22px; letter-spacing: 4px; margin-top: 4px; }
#startSlow { background: #9baf79; } #startSlow:hover { background: #b8cc90; } #startSlow em { color: #1e4a1a; }
#start { background: #e08a68; } #start:hover { background: #f0a282; } #start em { color: #6a1408; }
.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; }
#game.scaled main { grid-template-columns: minmax(0, calc((780px - 66px - var(--strip)) * 1.28)) minmax(360px, 1fr); }
.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; align-content: start; 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; display: block; container-type: normal; border-right: 0; border-bottom: 5px solid var(--ink); }
  .stage { width: 100%; aspect-ratio: auto; container-type: normal; }
  #sceneCanvas { height: auto; aspect-ratio: 512 / 400; }
  /* på mobil står hylden under lokalet, så knapperne er store nok */
  .shelf { position: static; width: 100%; height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; background: #4a3220; border-top: 4px solid var(--ink); }
  .shelf .gap { display: none; }
  .shelf button { font-size: 13px; padding: 10px 2px; border-width: 3px; box-shadow: 2px 2px #000a; }
  .side { min-height: 640px; overflow: visible; }
  .sideTop { max-height: none; height: 300px; flex: none; }
  /* på mobil står barerne under hinanden, under hylden */
  .meters { width: 100%; height: auto; flex-direction: column; gap: 8px; padding: 8px 10px 10px; }
  /* startskærmen: læreren over teksten */
  .introCard { padding: 22px 16px; }
  .brief { flex-direction: column; text-align: center; gap: 12px; }
  #introFace { width: 88px; height: 110px; }
}
/* 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; }
  .tempoLabel { margin: 6px 0 4px; }
  .tempo button { padding: 6px 16px; font-size: 13px; } .tempo button em { font-size: 17px; margin-top: 1px; }
  .brief { gap: 12px; } #introFace { width: 64px; height: 80px; }
  /* beskeden skaleres ikke med lokalet, så den skal være lav nok til skærmen */
  .overlay { padding: 8px; }
  .paper { padding: 12px 16px 10px; }
  .paper h2 { font-size: 16px; margin: 2px 0 6px; }
  .paper p { font-size: 13px; line-height: 1.35; margin-bottom: 8px; }
  .paper .pace { 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; }