* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: #e8e8e0; font-family: 'Courier New', monospace; user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: auto; }
.hidden { display: none !important; }
#osd { position: fixed; inset: 0; pointer-events: none; font-weight: bold; font-size: 26px; color: #f2f2ea; text-shadow: 2px 0 rgba(255,0,60,.5), -2px 0 rgba(0,200,255,.5), 0 0 6px rgba(255,255,255,.4); letter-spacing: 2px; }
#osd .play { position: absolute; left: 40px; top: 30px; }
#osd .rec { position: absolute; right: 44px; top: 30px; color: #ff4a3a; }
#osd .sp { position: absolute; left: 40px; bottom: 80px; }
#osd pre { position: absolute; right: 44px; bottom: 34px; text-align: right; font: inherit; }
.cross { position: fixed; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgba(255,255,255,.35); }
.msg { position: fixed; left: 0; right: 0; bottom: 22%; text-align: center; font-size: 22px; letter-spacing: 3px; opacity: 0; transition: opacity 1s; text-shadow: 0 0 8px #000; }
.msg.show { opacity: .9; }
.fade { position: fixed; inset: 0; background: #000; transition: opacity 5s; pointer-events: none; }
.fade.out { opacity: 0; }
#title { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #000; cursor: pointer; text-align: center; }
#title.show { display: flex; }
.tt { font-size: 120px; letter-spacing: 30px; color: #cfd8cf; text-shadow: 3px 0 rgba(255,0,60,.4), -3px 0 rgba(0,200,255,.4); }
.ts { font-size: 22px; letter-spacing: 6px; animation: bl 1.6s infinite alternate; }
.tk { opacity: .55; font-size: 14px; line-height: 1.8; margin-top: 30px; }
@keyframes bl { to { opacity: .3; } }
.coffee { position: absolute; right: 20px; bottom: 16px; color: #c8b27a; text-decoration: none; border: 1px solid rgba(200,178,122,.4); padding: 6px 12px; border-radius: 6px; font-size: 13px; }
#admin { position: fixed; right: 12px; top: 12px; bottom: 12px; width: 340px; overflow-y: auto; background: rgba(8,12,10,.92); border: 1px solid rgba(160,220,180,.25);
  padding: 10px 14px 14px; font: 13px/1.3 'Segoe UI', Arial, sans-serif; color: #d8e8dc; z-index: 50; user-select: none; }
#admin .ah { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } #admin .ah b { letter-spacing: 3px; color: #9fffb8; } #admin .ah span { opacity: .5; font-size: 11px; }
#admin .ag { margin: 12px 0 4px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #9fffb8; opacity: .8; }
#admin .ar { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 8px; height: 26px; }
#admin .ar label { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admin .ar span { text-align: right; font-variant-numeric: tabular-nums; opacity: .9; }
#admin .trk { position: relative; height: 18px; cursor: pointer; touch-action: none; }
#admin .trk::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; }
#admin .trk i { position: absolute; left: 0; top: 8px; height: 3px; background: #6fdc8c; border-radius: 2px; }
#admin .trk b { position: absolute; top: 3px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: #e8fff0; box-shadow: 0 0 6px rgba(111,220,140,.6); }
#admin .ab { display: flex; gap: 8px; margin-top: 14px; }
#admin .ab button { flex: 1; padding: 7px; background: rgba(111,220,140,.12); color: #d8ffe4; border: 1px solid rgba(111,220,140,.4); border-radius: 4px; cursor: pointer; font: inherit; }
#admin .ab button:hover { background: rgba(111,220,140,.25); }
.lid { position: fixed; left: -5%; right: -5%; height: 0; background: #000; pointer-events: none; z-index: 5; }
.lid.t { top: 0; border-radius: 0 0 50% 50% / 0 0 30% 30%; box-shadow: 0 20px 40px 20px #000; }
.lid.b { bottom: 0; border-radius: 50% 50% 0 0 / 30% 30% 0 0; box-shadow: 0 -20px 40px 20px #000; }
#osd { z-index: 6; }

.tnew { opacity: .6; font-size: 15px; letter-spacing: 3px; }
#changes { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.65); cursor: pointer; }
#changes .cbox { max-width: 620px; width: calc(100% - 32px); background: #0b0f0c; border: 1px solid rgba(160,220,180,.3); padding: 22px 26px; font: 15px/1.55 'Segoe UI', Arial, sans-serif; color: #dce8df; box-shadow: 0 0 40px rgba(0,0,0,.8); }
#changes .ch { font: bold 20px 'Courier New', monospace; letter-spacing: 4px; color: #9fffb8; margin-bottom: 12px; }
#changes .ch span { font-size: 12px; letter-spacing: 1px; opacity: .6; margin-left: 10px; }
#changes ul { padding-left: 20px; } #changes li { margin: 6px 0; }
#changes .cf { margin-top: 14px; font-size: 12px; opacity: .5; text-align: right; }
#title { z-index: 20; }
.tcred { position: absolute; left: 20px; bottom: 18px; right: 200px; font-size: 11px; opacity: .45; text-align: left; }

/* lommelygtens batterimåler i camcorder-stil */
#osd .batt { position: absolute; left: 40px; bottom: 116px; display: flex; align-items: center; gap: 6px; transition: opacity .3s; }
#osd .batt .bulb { width: 14px; height: 10px; border: 2px solid currentColor; border-right-width: 5px; border-radius: 2px 6px 6px 2px; }
#osd .batt .cell { display: flex; gap: 3px; padding: 3px; border: 2px solid currentColor; position: relative; }
#osd .batt .cell::after { content: ''; position: absolute; right: -6px; top: 5px; width: 4px; height: 8px; background: currentColor; }
#osd .batt i { width: 7px; height: 12px; background: currentColor; opacity: .15; }
#osd .batt i.on { opacity: 1; }
#osd .batt.low { color: #ff4a3a; }
#osd .batt.blink { opacity: .25; }
#osd .batt.off { opacity: .45; }

.tver { position: absolute; right: 20px; top: 16px; font-size: 11px; opacity: .5; letter-spacing: 1px; }

/* listen må aldrig gå ud over skærmen (overskrift og nyeste punkter blev skåret af) */
#changes .cbox { max-height: 84vh; overflow-y: auto; }

/* performance-panel (F3) */
#perf { position: fixed; top: 56px; right: 14px; z-index: 40; pointer-events: none; white-space: pre; font: 11px/1.45 'Courier New', monospace; color: #cfe6d6; background: rgba(0,0,0,.55); padding: 6px 9px; border: 1px solid rgba(160,220,180,.18); }

/* strømsvigt ved receptionen: helt sort under kamera-teksten */
#blackout { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 4; transition: opacity .08s; }