/* Operation OneLake · hold-appen. Farverne sættes pr. trin som CSS-variabler på .scr (se PALETTES i app.js). */
*{box-sizing:border-box}
html,body{margin:0;background:#06080d}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font:inherit}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

.scr{position:relative;min-height:100dvh;color:var(--fg);background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px;overflow-x:hidden}
.wrap{max-width:480px;margin:0 auto;padding:20px max(20px,env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px;min-height:100dvh}
.viewer .wrap{font-size:18px}
.grow{flex-grow:1}

.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font:400 11px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--mut)}
.meta .live{display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.bar8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.bar8 i{height:6px;background:var(--off)}
.bar8 i.on{background:var(--on)}
.bar8 i.cur{background:var(--on);opacity:.45}
.eyebrow{font:400 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.label{font:400 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
h1{margin:0;font-size:32px;line-height:1.05;font-weight:700}
.viewer h1{font-size:38px}
h2{margin:0;font-size:20px;font-weight:700}
.txt{white-space:pre-line;font-size:1em;line-height:1.55;overflow-wrap:anywhere}
.box{padding:16px;background:var(--box);border:1px solid var(--bord)}
.txt.log{font-family:'IBM Plex Mono',monospace;font-size:.8em}

.btn{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 18px;font:700 17px 'IBM Plex Sans',sans-serif;color:var(--btnFg);background:var(--btnBg);border:0;cursor:pointer;text-decoration:none;width:100%}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,.nk:focus-visible,input:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.sticky{position:sticky;bottom:12px;z-index:5;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.waitnote{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px dashed var(--bord);font-size:15px;color:var(--mut)}

.ans{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.ans input{min-height:52px;padding:0 14px;font:600 18px 'IBM Plex Sans',sans-serif;color:var(--fg);background:var(--surf);border:1px solid var(--bord);min-width:0;width:100%}
.ans input.bad{border:2px solid #ff4d6d}
.ans .btn{min-width:92px;min-height:52px;width:auto}
.nks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nk{min-height:44px;font:600 14px 'IBM Plex Sans',sans-serif;color:var(--nk);background:var(--nkBg);border:1px solid var(--nkB);cursor:pointer}
.nk.open{color:#2a1d05;background:#f2c46b;border-color:#f2c46b}
.nk:disabled{color:var(--mut);opacity:.55;border-color:var(--bord);background:transparent;cursor:default}
.hint{display:flex;flex-direction:column;gap:8px;padding:16px;background:#2a2210;border:1px solid #c9952f;color:#f5e7c8}
.hint .label{color:#f2c46b}
.hint.sol{background:#2a1d05;border-color:#f2c46b}

.denied{display:flex;flex-direction:column;gap:6px;padding:16px;background:#1c0b11;border:2px solid #ff4d6d;color:#f2f4f8;animation:jit 2.6s infinite steps(1)}
.denied .k{font:600 13px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#ff6b85}
.denied .t{font-size:18px;font-weight:700}
.denied .s{font-size:15px;line-height:1.5;color:#e2c6cc}
.denied .sig{font:400 12px 'IBM Plex Mono',monospace;color:#c98493}
@keyframes jit{0%,80%,100%{transform:none}82%{transform:translate(2px,0)}84%{transform:translate(-2px,1px)}86%{transform:none}}

.kuvert{display:flex;align-items:center;gap:16px}
.kuvert svg{flex-shrink:0;transform:rotate(-4deg)}
.kuvert b{font-size:20px}
.game{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:var(--box);border:1px solid var(--acc);color:var(--fg);text-decoration:none}
.game b{display:block;font-size:17px}
.game span.go{font-weight:700;color:var(--acc)}

/* quiz */
.qprog{display:flex;flex-direction:column;gap:8px}
.qprog .row{display:flex;justify-content:space-between;font:400 12px 'IBM Plex Mono',monospace;color:var(--mut)}
.qprog .track{height:8px;background:var(--off)}
.qprog .track i{display:block;height:100%;background:var(--on)}
.qcard{display:flex;flex-direction:column;gap:16px;padding:22px 18px;background:#fff;color:#0d1726}
.qcard .label{color:#4b6488}
.qcard p{margin:0;font-size:22px;line-height:1.35;font-weight:600}
.qcard .ans input{background:#f4f7fb;border-color:#8fa6c4;color:#0d1726}
.qcard .ans .btn{background:#0d1726;color:#fff}
.qcard details{font-size:15px;color:#3d5373}
.qcard summary{cursor:pointer;font-weight:600;color:#1a5fa8}
.tiles{display:flex;flex-wrap:wrap;gap:6px}
.tile{width:40px;height:48px;display:flex;align-items:center;justify-content:center;font:700 22px 'IBM Plex Mono',monospace;color:#b86e00;background:#fff;border:2px solid #d98a1a}
.tile.big{width:auto;height:64px;font-size:30px}
.tile.empty{background:transparent;border:1px dashed var(--mut)}
.tiles.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.slots{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.slots i{height:52px;border-bottom:3px solid var(--fg);background:rgba(255,255,255,.12)}

/* hængelås */
.lock{display:flex;flex-direction:column;align-items:center}
.lock .body{align-self:stretch;display:flex;flex-direction:column;gap:8px;padding:12px 10px;background:#c9a24a;border-radius:6px;color:#2a1d05}
.lock.dim .body{background:#7d6a42;color:#f5e7c8}
.lock .top{display:flex;justify-content:space-between;font:600 10px 'IBM Plex Mono',monospace}
.lock .cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.lock .cells i{height:34px;display:flex;align-items:center;justify-content:center;font:700 18px 'IBM Plex Mono',monospace;font-style:normal;background:#1b1307;color:#f5e7c8}
.lock .cells i.e{color:#8a7a5c}
.lock .cells i.nx{outline:2px solid #2a1d05;animation:blink 1.4s infinite}
.lock .cells i.hi{color:#ffd98a;background:#3b2a0c;outline:2px solid #ffd98a}
@keyframes blink{0%,100%{outline-color:#2a1d05}50%{outline-color:#ffd98a}}
.locks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}

/* rigtigt svar */
.granted{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 18px 22px;background:#fff;border:2px solid #1d9a64;text-align:center;color:#0d1726}
.granted .k{display:flex;align-items:center;gap:6px;font:600 12px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#157a4f}
.granted .digit{width:104px;height:124px;display:flex;align-items:center;justify-content:center;font:700 76px 'IBM Plex Mono',monospace;border:2px solid #0d1726;background:#f2f6fb}

/* kort over ruten */
.map{position:relative;height:440px;background:var(--mapBg);border:1px solid var(--bord);overflow:hidden}
.map svg.reveal{position:absolute;left:50%;top:0;margin-left:-173px;animation:reveal 4s infinite ease-out}
@keyframes reveal{0%{clip-path:inset(100% 0 0 0)}60%,100%{clip-path:inset(0 0 0 0)}}
.map .in{position:absolute;left:50%;top:0;width:346px;height:440px;margin-left:-173px}
.map .node{position:absolute;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.map .node i{width:28px;height:28px;border-radius:50%;background:var(--on);color:var(--onFg);display:flex;align-items:center;justify-content:center;font:700 12px 'IBM Plex Mono',monospace;font-style:normal;flex-shrink:0}
.map .ring{position:absolute;width:52px;height:52px;border-radius:50%;border:2px dashed #f2c46b;display:flex;align-items:center;justify-content:center;animation:pulse 1.8s infinite}
.map .ring i{width:30px;height:30px;border-radius:50%;background:#f2c46b;color:#2a1d05;display:flex;align-items:center;justify-content:center;font:700 12px 'IBM Plex Mono',monospace;font-style:normal}
.map .tag{position:absolute;padding:4px 8px;background:#fff4e0;border:1px solid #b86e00;font-size:13px;font-weight:600;color:#3b2610;white-space:nowrap}
.map .q{position:absolute;width:26px;height:26px;border-radius:50%;border:1px solid var(--bord);color:var(--mut);display:flex;align-items:center;justify-content:center;font:600 13px 'IBM Plex Mono',monospace;filter:blur(1.5px);animation:hid 3.3s infinite steps(1)}
.map .fog{position:absolute;left:0;right:0;top:0;background:linear-gradient(var(--mapBg) 20%,transparent);animation:fog 7s infinite ease-in-out}
.map .fogl{position:absolute;left:12px;top:12px;font:400 10px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--mut)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,196,107,.65)}60%{box-shadow:0 0 0 14px rgba(242,196,107,0)}}
@keyframes fog{0%,100%{opacity:1;transform:none}50%{opacity:.82;transform:translateY(-8px)}}
@keyframes hid{0%,70%,100%{opacity:1}72%{opacity:.25}75%{opacity:.9}78%{opacity:.4}}
.rlist{display:flex;flex-direction:column;gap:8px}
.ritem{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;background:var(--box);border:1px solid var(--bord)}
.ritem i{width:28px;height:28px;border-radius:50%;background:var(--on);color:var(--onFg);display:flex;align-items:center;justify-content:center;font:700 12px 'IBM Plex Mono',monospace;font-style:normal}
.ritem .sub{font-size:13px;color:var(--mut)}
.ritem .d{font:700 18px 'IBM Plex Mono',monospace;color:var(--dig)}
.ritem.next{grid-template-columns:32px minmax(0,1fr);background:#2a2210;border:1px dashed #c9952f;color:#f5e7c8}
.ritem.next i{background:#f2c46b;color:#2a1d05}
.ritem.next .sub{color:#f5e7c8}
.blur{width:150px;height:14px;margin:3px 0;background:#c9a868;filter:blur(4px);opacity:.7}
.qs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.qs span{height:40px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--bord);font:600 14px 'IBM Plex Mono',monospace;color:var(--mut)}

/* finale */
.vault-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--bord);padding-bottom:10px;gap:8px}
.chip{display:flex;align-items:center;gap:6px;padding:4px 8px;font:600 12px 'IBM Plex Mono',monospace;border:1px solid}
.chip.locked{border-color:#d98a1a;color:#6b3f00}
.chip.open{border-color:#1d9a64;color:#157a4f}
.diamond{width:34px;height:34px;border:3px solid #1f7fd1;transform:rotate(45deg);display:flex;align-items:center;justify-content:center}
.diamond i{width:10px;height:10px;border-radius:50%;background:#1f7fd1}
.sweep{position:absolute;left:0;right:0;height:60px;pointer-events:none;background:linear-gradient(rgba(31,127,209,0),rgba(31,127,209,.22),rgba(31,127,209,0));animation:sweep 6s 1 forwards}
@keyframes sweep{0%{top:-60px;opacity:0}10%{opacity:1}60%{top:100%;opacity:0}100%{top:100%;opacity:0}}

/* glitch */
.gt{position:relative;display:inline-block}
.glitch .gt::before,.glitch .gt::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none}
.glitch .gt::before{color:#ff4d6d;opacity:.85;animation:gA 2.2s infinite steps(1)}
.glitch .gt::after{color:#36e0c8;opacity:.75;animation:gB 2.9s infinite steps(1)}
@keyframes gA{0%{clip-path:inset(0 0 62% 0);transform:translate(-3px,0)}18%{clip-path:inset(22% 0 48% 0);transform:translate(-6px,1px)}36%{clip-path:inset(64% 0 8% 0);transform:translate(-2px,-1px)}54%{clip-path:inset(40% 0 30% 0);transform:translate(-5px,0)}72%{clip-path:inset(8% 0 80% 0);transform:translate(-1px,0)}90%{clip-path:inset(50% 0 20% 0);transform:translate(-4px,1px)}}
@keyframes gB{0%{clip-path:inset(58% 0 0 0);transform:translate(3px,0)}20%{clip-path:inset(10% 0 70% 0);transform:translate(5px,-1px)}40%{clip-path:inset(35% 0 40% 0);transform:translate(2px,1px)}60%{clip-path:inset(75% 0 5% 0);transform:translate(6px,0)}80%{clip-path:inset(0 0 85% 0);transform:translate(2px,0)}}
.scan{position:fixed;inset:0;pointer-events:none;z-index:20;background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px);animation:flick 3.7s infinite}
@keyframes flick{0%,90%,100%{opacity:1}91%{opacity:.3}92%{opacity:1}95%{opacity:.55}96%{opacity:1}}

/* start og klar */
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pick button{min-height:64px;font:700 20px 'IBM Plex Sans',sans-serif;color:#0d1726;background:#fff;border:1px solid #b7c7dc;cursor:pointer}
.pick button[aria-pressed="true"]{color:#fff;background:#1f7fd1;border-color:#1f7fd1}
.role{display:flex;gap:12px;align-items:flex-start;padding:14px;background:#fff;border:1px solid #b7c7dc;cursor:pointer;color:#0d1726}
.role:has(input:checked){border:2px solid #1f7fd1}
.role input{margin:3px 0 0;width:18px;height:18px;accent-color:#1f7fd1}
.breath{animation:breath 2.6s infinite ease-in-out}
@keyframes breath{0%,100%{box-shadow:0 0 0 0 rgba(31,127,209,.35)}50%{box-shadow:0 0 0 12px rgba(31,127,209,0)}}

.offline{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;padding:12px 14px;background:#1c0b11;color:#f2f4f8;border:1px solid #ff4d6d;font-size:14px;text-align:center}
.switch{background:none;border:0;color:var(--mut);font:400 11px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-decoration:underline;cursor:pointer;padding:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .map svg.reveal{clip-path:none}
}