/* GRID FEVER: mørk glas-UI med grøn/gul strøm-accent (FEVER-familien), Chakra Petch */
:root {
  --bg: #0b0f14; --panel: rgba(12, 18, 24, 0.84); --panel2: rgba(24, 32, 40, 0.94); --line: rgba(255, 255, 255, 0.1);
  --ink: #e8ecef; --dim: #93a1ac; --gold: #ffd24a; --good: #5adc96; --bad: #ff5a4a; --warn: #ffb03a; --volt: #ffe14a; --cyan: #7af3ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: 'Chakra Petch', system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
[hidden] { display: none !important; }
#c { position: fixed; inset: 0; display: block; }
body.hammer #c { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><text x='2' y='34' font-size='32'>🔨</text></svg>") 8 8, crosshair; }
#floats { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.ftxt { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,0.6); white-space: nowrap; }
.ftxt.money { color: #9affc0; font-size: 15px; }
.ftxt.ev { color: var(--volt); font-size: 13px; }
.ftxt.bad { color: var(--bad); font-size: 18px; }
kbd { font-family: inherit; font-size: 10px; padding: 0 4px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.25); color: var(--dim); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(6px); }
.ph { font-size: 11px; letter-spacing: 0.18em; color: var(--dim); display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ph small { letter-spacing: 0.02em; color: #b8c4cc; }
.good { color: var(--good); } .bad { color: var(--bad); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud button, #hud .panel, #sel { pointer-events: auto; }
body.title #hud { display: none; }
#clock { position: absolute; top: 12px; left: 14px; padding: 9px 12px; width: 230px; }
#clock .ct { display: flex; justify-content: space-between; align-items: baseline; }
#clock .ct b { font-size: 16px; letter-spacing: 0.14em; }
#clock .ct span { font-size: 12px; color: var(--dim); letter-spacing: 0.1em; }
#clock .cr2 { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
#clock .cr2 b { font-size: 24px; font-family: 'Silkscreen', 'Chakra Petch', monospace; letter-spacing: 0.02em; }
#clock .cr2 span { font-size: 18px; } #weather { font-size: 11px !important; color: var(--dim); margin-left: auto; }
.spd { display: flex; gap: 4px; }
.spd button { flex: 1; padding: 4px 0; border-radius: 6px; background: rgba(255,255,255,0.06); font-size: 11px; color: var(--dim); }
.spd button.on { background: var(--volt); color: #1a1406; font-weight: 700; }
#deadline { margin-top: 6px; font-size: 12px; color: var(--dim); display: flex; justify-content: space-between; }
#deadline b { color: var(--ink); } #deadline b.urg { color: var(--bad); animation: blink 0.8s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }

#moneyBox { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); text-align: center; }
#money { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 16px rgba(0,0,0,0.5); }
#money.neg { color: var(--bad); }
#money.flash { animation: mflash 0.5s; } #money.gain { animation: mgain 0.5s; }
@keyframes mflash { 30% { color: var(--bad); transform: scale(1.08); } }
@keyframes mgain { 30% { color: var(--good); transform: scale(1.06); } }
#moneyBox small { display: block; font-size: 12px; color: #c8d4dc; text-shadow: 0 1px 0 #000; }
#bankBtn { pointer-events: auto; margin-top: 4px; padding: 3px 10px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); font-size: 11px; color: var(--dim); }
#bankBtn:hover { color: var(--ink); }

#right { position: absolute; top: 12px; right: 14px; display: flex; gap: 8px; align-items: flex-start; }
#contract { width: 270px; padding: 9px 12px 10px; }
.goal { margin-top: 7px; }
.gl { display: flex; justify-content: space-between; font-size: 13px; }
.gl span { color: #c8d0d6; } .goal.ok .gl span { color: var(--good); }
.gl b small { color: var(--dim); font-weight: 400; font-size: 11px; }
.gbar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); margin-top: 3px; overflow: visible; }
.gbar.big { height: 10px; margin: 6px 0 10px; }
.gbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; transition: width 0.4s; }
.gbar i.pol { background: linear-gradient(90deg, #ff7a3a, #ffb04a); }
.gbar i.ev { background: linear-gradient(90deg, #ffd24a, #ffe96a); }
.gbar i.hap { background: linear-gradient(90deg, #4aaed8, #7af3ff); }
.gbar i.gas { background: linear-gradient(90deg, #c8201c, #ff5a3a); }
.gbar i.bat { background: linear-gradient(90deg, #7a4ad8, #b07aff); }
.goal.ok .gbar i { background: linear-gradient(90deg, #2aa870, #5adc96); }
.gbar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; border-radius: 1px; box-shadow: 0 0 4px #000; }
.rbtns { display: flex; flex-direction: column; gap: 6px; }
.rbtns button { width: 36px; height: 34px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font-size: 15px; }

#power { position: absolute; left: 14px; bottom: 14px; width: 278px; padding: 9px 12px 8px; }
.pr { display: flex; align-items: baseline; gap: 6px; font-size: 13px; padding: 1px 0; }
.pr span { color: #c8d0d6; flex: 1; } .pr b { font-family: 'Chakra Petch'; } .pr small { color: var(--dim); font-size: 11px; width: 38px; text-align: right; }
.pr.warn span, .pr.warn b { color: var(--bad); animation: blink 0.9s infinite; }
.pr.good span, .pr.good b { color: var(--good); }
#pwGraph { display: block; width: 100%; height: 46px; margin-top: 6px; border-radius: 5px; background: rgba(0,0,0,0.25); }

#toasts { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; width: min(440px, calc(100vw - 620px)); min-width: 260px; }
.toast { padding: 7px 14px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); font-size: 13px; text-align: center; animation: tin 0.3s; transition: opacity 0.5s, transform 0.5s; }
.toast.good { border-color: rgba(90,220,150,0.5); } .toast.bad { border-color: rgba(255,90,74,0.6); } .toast.warn { border-color: rgba(255,176,58,0.6); }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }
#banners { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.banner { text-align: center; animation: ban 3.2s forwards; }
.banner b { display: block; font-size: clamp(28px, 4.6vw, 54px); letter-spacing: 0.14em; text-shadow: 0 3px 0 #000, 0 0 24px rgba(0,0,0,0.7); }
.banner small { display: block; font-size: 15px; color: #e8e0d0; text-shadow: 0 2px 0 #000; }
.banner.good b { color: #9affc0; } .banner.bad b { color: #ff7a6a; }
@keyframes ban { 0% { opacity: 0; transform: scale(1.3); } 8% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* byggebjælke */
#build { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); pointer-events: auto; }
.bb { position: relative; width: 86px; padding: 3px 3px 5px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; transition: transform 0.1s, border-color 0.1s; }
.bb:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.3); }
.bb.on { border-color: var(--volt); box-shadow: 0 0 0 1px var(--volt) inset, 0 0 18px rgba(255, 225, 74, 0.3); }
.bb.poor small { color: var(--bad); } .bb.locked { opacity: 0.45; }
.bb .ti { width: 64px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.bb .ti img { width: 68px; height: 68px; object-fit: contain; margin-top: -6px; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5)); }
.bb b { font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; }
.bb small { font-size: 11px; color: #ffe39a; }
.bb kbd { position: absolute; top: 3px; left: 3px; }
#tipline { position: absolute; bottom: 112px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #e8ecef; text-shadow: 0 1px 0 #000, 0 0 8px #000; white-space: nowrap; }

/* info-kort */
#sel { position: absolute; right: 14px; bottom: 14px; width: 330px; max-height: calc(100vh - 290px); overflow: auto; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(6px); }
#sel .sh { display: flex; align-items: center; gap: 10px; }
#sel .sh > div { flex: 1; min-width: 0; }
#sel .sh b { display: block; font-size: 17px; letter-spacing: 0.03em; }
#sel .sh small { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; }
#sel .si { width: 52px; height: 52px; object-fit: contain; }
#sel .x { width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.06); color: var(--dim); }
#sel p { margin: 8px 0; font-size: 13px; color: #c4ccd2; line-height: 1.4; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 13px; height: 5px; border-radius: 2px; background: rgba(255,255,255,0.14); }
.pips i.on { background: var(--volt); box-shadow: 0 0 6px rgba(255, 225, 74, 0.6); }
.pips i.t5.on { background: var(--cyan); box-shadow: 0 0 8px rgba(122, 243, 255, 0.8); }
#sel .st { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; font-size: 12px; color: var(--dim); }
#sel .st b { color: var(--ink); } #sel .st b.bad { color: var(--bad); } #sel .st b.good { color: var(--good); }
.pbar { margin: 6px 0; } .pl { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); } .pl b { color: var(--ink); } .pl b.bad { color: var(--bad); }
#sel .nx { padding: 8px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); margin: 8px 0; }
#sel .nx small { font-size: 10px; letter-spacing: 0.16em; color: var(--volt); }
#sel .nx p { margin: 3px 0 8px; font-size: 12px; }
#sel .nx.max small { color: var(--cyan); }
#sel .go { width: 100%; font-size: 14px; padding: 9px 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#sel .go .c { font-weight: 600; opacity: 0.85; }
#sel .grid2 { display: grid; grid-template-columns: 1fr; gap: 6px; }
#sel .sub { margin: 10px 0 5px; font-size: 10px; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }
#sel .sub.dim { text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 1.4; }
#sel .job { margin: 8px 0; padding: 7px 9px; border-radius: 7px; background: rgba(255, 176, 58, 0.12); border: 1px solid rgba(255, 176, 58, 0.35); font-size: 13px; }
.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ad { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; text-align: left; padding: 6px 7px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); }
.ad i { grid-row: span 2; font-style: normal; font-size: 18px; align-self: center; }
.ad b { font-size: 12px; } .ad small { font-size: 11px; color: #ffe39a; }
.ad:hover { border-color: rgba(255,255,255,0.3); }
.ad.has { border-color: rgba(90,220,150,0.6); background: rgba(90,220,150,0.1); cursor: default; } .ad.has small { color: var(--good); }
.ad.lock { opacity: 0.45; cursor: default; } .ad.poor small { color: var(--bad); }
.go { padding: 10px 18px; border-radius: 9px; background: linear-gradient(180deg, #ffe46a, #f0b81a); color: #1a1406; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 3px 0 #8a6a08, 0 6px 20px rgba(0,0,0,0.35); }
.go:hover { filter: brightness(1.08); }
.go.big { font-size: 18px; padding: 13px 26px; }
.go.alt { background: linear-gradient(180deg, #5a6a7a, #3a4652); color: #fff; box-shadow: 0 3px 0 #1e262e, 0 6px 20px rgba(0,0,0,0.35); }
.go.dis { filter: grayscale(0.8) brightness(0.65); cursor: default; }

/* parkernes etiketter og job-bjælker */
.plabel { position: absolute; left: 0; top: 0; padding: 3px 8px 4px; border-radius: 7px; background: rgba(10, 16, 22, 0.82); border: 1px solid rgba(90, 220, 150, 0.45); font-size: 12px; white-space: nowrap; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.plabel b { color: var(--volt); } .plabel b small { color: var(--dim); font-weight: 400; }
.plabel span { color: #9affc0; font-size: 11px; }
.plabel em { font-style: normal; color: var(--warn); font-size: 11px; }
.plabel.short { border-color: rgba(255, 90, 74, 0.8); animation: pshort 1s infinite; } .plabel b.bad { color: var(--bad); }
@keyframes pshort { 50% { box-shadow: 0 0 14px rgba(255, 90, 74, 0.7); } }
.jobbar { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 8px; background: rgba(10, 16, 22, 0.85); border: 1px solid rgba(255, 176, 58, 0.5); font-size: 13px; }
.jobbar i { width: 54px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; display: block; }
.jobbar u { display: block; height: 100%; background: linear-gradient(90deg, #ffb03a, #ffe14a); }
.jobbar em { font-style: normal; font-size: 11px; color: var(--dim); }

/* ---------- popups ---------- */
#modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(4, 8, 12, 0.45); animation: fin 0.25s; }
@keyframes fin { from { opacity: 0; } }
.dlg { display: flex; gap: 18px; width: min(640px, 92vw); padding: 20px; border-radius: 16px; background: var(--panel2); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 20px 60px rgba(0,0,0,0.6); animation: pin 0.35s cubic-bezier(.2,1.4,.4,1); }
@keyframes pin { from { transform: scale(0.85) translateY(20px); opacity: 0; } }
.por { flex: 0 0 120px; text-align: center; } .por svg { width: 120px; height: 120px; display: block; }
.por small { display: block; margin-top: 6px; font-size: 11px; color: var(--dim); }
.dt h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: 0.04em; }
.dt p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #d0d8de; }
.dt b { color: var(--volt); }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.news { width: min(520px, 92vw); padding: 22px 26px 20px; border-radius: 6px; background: #f4efe2; color: #1e1a14; box-shadow: 0 20px 60px rgba(0,0,0,0.6); text-align: center; animation: spin 0.5s cubic-bezier(.2,1.2,.4,1); font-family: Georgia, 'Times New Roman', serif; }
@keyframes spin { from { transform: rotate(-200deg) scale(0.2); opacity: 0; } }
.news .nh { font-family: 'Chakra Petch', sans-serif; letter-spacing: 0.3em; font-weight: 700; font-size: 13px; border-bottom: 3px double #1e1a14; padding-bottom: 6px; display: flex; justify-content: space-between; }
.news .nh small { letter-spacing: 0.05em; font-weight: 400; }
.news .nicon { font-size: 44px; margin: 10px 0 0; }
.news h2 { font-size: 28px; margin: 6px 0 8px; line-height: 1.1; text-transform: uppercase; }
.news p { font-size: 15px; line-height: 1.45; margin: 0 0 16px; }
.news .opts { justify-content: center; }

/* ---------- forside / slut ---------- */
#title, #over { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9vh; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55)); }
#over { align-items: center; padding: 0; background: rgba(4, 8, 12, 0.62); }
.tbox { text-align: center; pointer-events: auto; }
.tlogo { font-weight: 700; font-size: clamp(54px, 10vw, 130px); line-height: 0.9; letter-spacing: 0.04em; display: flex; flex-direction: column; text-shadow: 0 6px 0 rgba(0,0,0,0.5); }
.tlogo.sm { font-size: clamp(36px, 6vw, 76px); }
.tl-a { color: #f2ead8; }
.tl-g { color: var(--volt); text-shadow: 0 6px 0 rgba(0,0,0,0.5), 0 0 40px rgba(255, 225, 74, 0.55); }
.tl-b { color: #ff7a5a; text-shadow: 0 6px 0 rgba(0,0,0,0.5), 0 0 40px rgba(255, 90, 60, 0.5); }
.tsub { margin: 14px 0 22px; color: #e8e0d0; font-size: 17px; text-shadow: 0 2px 0 #000; max-width: 640px; }
.coffee { display: block; margin-top: 16px; color: #ffd890; text-decoration: none; font-size: 14px; text-shadow: 0 2px 0 #000; }
#overStats { display: flex; gap: 34px; justify-content: center; margin: 18px 0 20px; }
#overStats b { display: block; font-size: 40px; color: #fff; }
#overStats small { color: var(--dim); letter-spacing: 0.1em; }
.next { margin-bottom: 18px; color: #c8d4dc; letter-spacing: 0.1em; } .next b { color: var(--volt); }

@media (max-width: 900px) {
  .bb { width: 58px; } .bb .ti img { width: 44px; height: 44px; } .bb b { font-size: 10px; } .bb small { font-size: 10px; }
  #power { display: none; } #contract { width: 210px; } #sel { left: 14px; right: 14px; width: auto; bottom: 100px; }
  #tipline { display: none; }
}

/* ---------- intro-film ---------- */
body.cine #hud { display: none; }
#cine { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#cine .lb { position: absolute; left: 0; right: 0; height: 11vh; background: #000; animation: lbin 0.8s ease-out; }
#cine .lb.top { top: 0; } #cine .lb.bot { bottom: 0; }
@keyframes lbin { from { height: 0; } }
#skipBtn { position: absolute; right: 18px; bottom: calc(11vh + 14px); pointer-events: auto; padding: 7px 14px; border-radius: 8px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25); color: #e8ecef; font-size: 13px; }
#caption { position: absolute; left: 0; right: 0; bottom: 3.5vh; text-align: center; font-size: clamp(14px, 1.6vw, 20px); letter-spacing: 0.22em; color: #f2ead8; text-transform: uppercase; }
.bubble { position: fixed; left: 0; top: 0; z-index: 13; max-width: min(380px, 70vw); padding: 10px 14px 12px; border-radius: 14px; background: #fffdf6; color: #1e1a14; font-size: 16px; line-height: 1.35; box-shadow: 0 8px 30px rgba(0,0,0,0.45); pointer-events: none; margin-top: -14px; }
.bubble small { display: block; font-size: 10px; letter-spacing: 0.18em; font-weight: 700; color: #8a7a5a; margin-bottom: 2px; }
.bubble.h small { color: #2a8a5a; } .bubble.m small { color: #a02020; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; border: 10px solid transparent; border-top-color: #fffdf6; border-bottom: 0; }

/* ---------- kontrakt-fremdrift og happy-o-meter ---------- */
.rcol { display: flex; flex-direction: column; gap: 8px; }
.cprog { margin: 2px 0 4px; }
.cpt { display: flex; align-items: baseline; gap: 6px; }
.cpt b { font-size: 26px; color: var(--volt); line-height: 1; }
.cpt span { font-size: 12px; color: var(--dim); }
.cpt em { margin-left: auto; font-style: normal; font-size: 12px; color: #c8d4dc; }
.cbar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); margin-top: 5px; overflow: hidden; }
.cbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f0b81a, #ffe46a, #5adc96); transition: width 0.6s; }
#contract.near { border-color: rgba(90, 220, 150, 0.6); box-shadow: 0 0 18px rgba(90, 220, 150, 0.25); }
.gl em { font-style: normal; font-size: 11px; color: var(--dim); }
.gl em.ok { color: #1a1406; background: var(--good); padding: 0 6px; border-radius: 4px; font-weight: 700; }
.gl em.near { color: #1a1406; background: var(--volt); padding: 0 6px; border-radius: 4px; font-weight: 700; animation: blink 1s infinite; }
.gv { font-size: 11px; color: #c8d0d6; margin-top: 2px; } .gv small { color: var(--dim); }
.goal.ok .gl span { color: var(--good); }
#happy { width: 270px; padding: 9px 12px 10px; }
.hm { position: relative; width: 150px; margin: 0 auto 2px; }
.hm svg { width: 150px; display: block; }
#hNeedle { transition: transform 0.6s cubic-bezier(.3,1.5,.5,1); transform-origin: 60px 62px; }
.hface { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font-size: 22px; }
.hf { display: grid; grid-template-columns: 1fr 70px 30px; align-items: center; gap: 6px; font-size: 12px; margin-top: 3px; }
.hf span { color: #c8d0d6; white-space: nowrap; }
.hb { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.07); }
.hb::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,0.35); }
.hb i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.hb i.neg { right: 50%; background: linear-gradient(270deg, #ff7a5a, #e8423a); }
.hb i.pos { left: 50%; background: linear-gradient(90deg, #5adc96, #9affc0); }
.hf b { text-align: right; font-size: 12px; }
#hQuote { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; font-style: italic; color: #e0e6ea; line-height: 1.35; }
#hQuote small { font-style: normal; color: var(--dim); }
#hqTrend.good { color: var(--good); } #hqTrend.bad { color: var(--bad); }
@media (max-height: 760px) { #happy #hFactors, #happy #hQuote { display: none; } }


/* ---------- forskning, programmer, regnskab, nyheder, coach, etiketter, opdatering ---------- */
@keyframes pulse { 50% { box-shadow: 0 0 22px rgba(122, 243, 255, 0.6); } }
@keyframes newpop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.1); } }
#feed { display: flex; flex-direction: column; gap: 6px; }
.fcard { position: relative; display: flex; gap: 8px; padding: 8px 26px 9px 8px; border-radius: 10px; background: #f4efe2; color: #1e1a14; box-shadow: 0 6px 20px rgba(0,0,0,0.4); animation: fin2 0.4s cubic-bezier(.2,1.3,.4,1); transition: opacity 0.6s, transform 0.6s; }
.fcard.mayor { background: var(--panel2); color: var(--ink); border: 1px solid rgba(255,255,255,0.15); }
.fcard.out { opacity: 0; transform: translateX(-20px); }
@keyframes fin2 { from { transform: translateX(-30px); opacity: 0; } }
.fic { font-size: 26px; } .fav svg { width: 40px; height: 40px; display: block; border-radius: 8px; }
.ftx small { display: block; font-size: 9px; letter-spacing: 0.16em; font-weight: 700; opacity: 0.65; }
.ftx b { display: block; font-size: 13px; font-family: Georgia, serif; text-transform: uppercase; line-height: 1.15; margin: 2px 0; }
.fcard.mayor .ftx b { font-family: inherit; text-transform: none; }
.ftx p { margin: 0; font-size: 11.5px; line-height: 1.35; }
.fx { position: absolute; top: 4px; right: 6px; font-size: 11px; opacity: 0.6; color: inherit; }
#money { cursor: pointer; }
#moneyBox small b.good { color: var(--good); } #moneyBox small b.bad { color: var(--bad); }
#ledger { position: absolute; left: 50%; transform: translateX(-50%); width: 290px; padding: 10px 12px; text-align: left; }
.lr { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; color: #c8d0d6; }
.lr.tot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 5px; font-weight: 700; color: var(--ink); }
.lt { margin: 6px 0 0; font-size: 12px; color: var(--warn); }
#panel { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; background: rgba(4, 8, 12, 0.55); animation: fin 0.2s; }
.pwin { width: min(1100px, 96vw); max-height: 88vh; display: flex; flex-direction: column; border-radius: 16px; background: var(--panel2); border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.pwin.small { width: min(560px, 94vw); }
.ptop { position: relative; padding: 14px 18px 8px; border-bottom: 1px solid var(--line); }
.ptop h2 { margin: 0; font-size: 22px; letter-spacing: 0.06em; display: inline-block; }
.ptop .rp { margin-left: 12px; font-size: 22px; font-weight: 700; color: var(--cyan); } .ptop .rp small { font-size: 12px; color: var(--dim); }
.ptop p { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); max-width: 760px; }
.ptop .x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--dim); }
.tree { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; overflow: auto; }
.tcol h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.1em; color: #c8d4dc; }
.plist { padding: 12px; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.tcard { display: grid; grid-template-columns: 26px 1fr auto; gap: 7px; align-items: center; padding: 7px 8px; margin-bottom: 6px; border-radius: 9px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.tcard i { font-style: normal; font-size: 19px; text-align: center; }
.tcard b { font-size: 13px; } .tcard p { margin: 1px 0 0; font-size: 11px; color: var(--dim); line-height: 1.3; }
.tcard .req { display: block; font-size: 10.5px; color: #c8907a; margin-top: 2px; }
.tcard button { padding: 6px 9px; border-radius: 7px; background: linear-gradient(180deg, #7af3ff, #3ab8d8); color: #062028; font-weight: 700; font-size: 12px; white-space: nowrap; }
.tcard button.dis { filter: grayscale(0.9) brightness(0.6); cursor: default; }
.tcard em { font-style: normal; color: var(--good); font-weight: 700; font-size: 13px; }
.tcard.done { border-color: rgba(90,220,150,0.45); background: rgba(90,220,150,0.07); }
.tcard.can { border-color: rgba(122,243,255,0.55); box-shadow: 0 0 12px rgba(122,243,255,0.15) inset; }
.tcard.locked { opacity: 0.5; }
.tcard.focus { outline: 2px solid var(--volt); animation: pulse 1.2s 3; }
.go.lock { background: linear-gradient(180deg, #3a4a5a, #2a3440); color: #c8d8e4; box-shadow: 0 3px 0 #18202a, 0 6px 16px rgba(0,0,0,0.3); }
.go.lock .c { color: var(--cyan); }
.lockhint { margin-top: 5px; font-size: 11px; color: var(--dim); }
.ad.lock small { color: var(--cyan); }
.ftxt.rp { color: var(--cyan); font-size: 12px; }
small.dim { color: var(--dim); }
#coach { position: absolute; bottom: 118px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: min(560px, 60vw); padding: 8px 32px 8px 8px; border-radius: 12px; background: rgba(14, 30, 22, 0.94); border: 1px solid rgba(90,220,150,0.5); box-shadow: 0 8px 26px rgba(0,0,0,0.45); pointer-events: auto; }
#coach.pop { animation: cpop 0.45s cubic-bezier(.2,1.4,.4,1); }
@keyframes cpop { from { transform: translateX(-50%) scale(0.85); opacity: 0; } }
.cav svg { width: 44px; height: 44px; display: block; border-radius: 9px; }
.ctx small { display: block; font-size: 9px; letter-spacing: 0.18em; color: var(--good); font-weight: 700; }
.ctx span { font-size: 13.5px; line-height: 1.35; } .ctx b { color: var(--volt); }
#coachX { position: absolute; top: 5px; right: 7px; font-size: 11px; color: var(--dim); }
.coachhi { outline: 2px solid var(--volt) !important; box-shadow: 0 0 20px rgba(255, 225, 74, 0.6) !important; }
body:has(#coach:not([hidden])) #tipline { display: none; }
.plabel .lb { width: 70px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); margin: 2px 0 1px; overflow: hidden; }
.plabel .lb u { display: block; height: 100%; background: var(--volt); }
.plabel .lb u.full { background: #ffb03a; } .plabel .lb u.bad { background: var(--bad); }
.plabel .pf { font-style: normal; font-size: 12px; }
.clabel { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; padding: 1px 5px; border-radius: 5px; background: rgba(10, 16, 22, 0.78); font-size: 10.5px; white-space: nowrap; }
.clabel b { color: var(--volt); } .clabel small { color: var(--dim); }
.clabel i { width: 22px; height: 6px; border: 1px solid rgba(255,255,255,0.4); border-radius: 2px; display: block; overflow: hidden; }
.clabel i u { display: block; height: 100%; background: var(--good); } .clabel i u.lo { background: var(--bad); }
.mleg { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 5px; font-size: 10.5px; color: var(--dim); }
.mleg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
#mapC { display: block; border-radius: 6px; cursor: crosshair; }
#upd { position: fixed; top: 66px; left: 50%; transform: translateX(-50%); z-index: 40; padding: 10px 14px; display: flex; align-items: center; gap: 12px; max-width: 640px; border-color: var(--volt); }
#upd ul { margin: 0; padding-left: 16px; font-size: 12px; color: #c8d4dc; }
#upd .go { padding: 7px 12px; font-size: 13px; } #upd .x { color: var(--dim); font-size: 12px; }
#title .tbox .go + .go { margin-left: 10px; }
.gbar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; border-radius: 1px; }
/* ==========================================================================================
   HUD v2 (ejeren 17-10: "mange steder man skal kigge hen"): topbjælke + dock med faner + byggebjælke + info-kort
   ========================================================================================== */
#topbar { position: absolute; top: 8px; left: 10px; right: 10px; height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 10px; border-radius: 12px; pointer-events: auto; }
#clock { display: flex; align-items: center; gap: 8px; width: auto; padding: 0; background: none; border: 0; white-space: nowrap; }
#clock #cityName { font-size: 14px; letter-spacing: 0.14em; }
#clock #dayN { font-size: 12px; color: var(--dim); letter-spacing: 0.08em; }
#clock .sep { width: 1px; height: 22px; background: var(--line); }
#clock #time { font-size: 20px; font-family: 'Silkscreen', 'Chakra Petch', monospace; }
#clock #weather { font-size: 11px; color: var(--dim); }
#clock .spd { gap: 3px; } #clock .spd button { flex: none; width: 34px; }
#clock #deadline { display: flex; flex-direction: column; font-size: 11px; line-height: 1.1; margin: 0; }
#moneyBox { position: static; transform: none; margin: 0 auto; display: flex; flex-direction: column; align-items: center; position: relative; }
#money { font-size: 26px; line-height: 1; }
#moneyBox small { font-size: 11px; }
#ledger { top: 100%; margin-top: 10px; z-index: 30; }
.tbr { display: flex; align-items: center; gap: 5px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); font-size: 13px; color: #d8e0e6; white-space: nowrap; }
.chip:hover { border-color: rgba(255,255,255,0.3); }
.chip b { font-size: 14px; } .chip b.good { color: var(--good); } .chip b.bad { color: var(--bad); } .chip small { color: var(--dim); font-size: 10px; }
.chip.bad { border-color: rgba(232, 96, 58, 0.6); }
.chip.near { border-color: rgba(90,220,150,0.7); box-shadow: 0 0 12px rgba(90,220,150,0.35); }
#chipC b { color: var(--volt); }
#cdots { display: inline-flex; gap: 3px; }
#cdots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); }
#cdots i.nr { background: var(--volt); } #cdots i.ok { background: var(--good); box-shadow: 0 0 6px var(--good); }
#resBtn b { color: var(--cyan); }
#resBtn.can { border-color: var(--cyan); box-shadow: 0 0 14px rgba(122, 243, 255, 0.35); animation: pulse 1.6s infinite; }
#resBtn.new, #progBtn.new { animation: newpop 0.6s; }
#muteBtn, #helpBtn, #bankBtn { width: 34px; justify-content: center; padding: 0; }
.rcol, .lcol, #right { display: none !important; }
/* nyhedskort under topbjælken til venstre */
#feed { position: absolute; top: 70px; left: 10px; width: 300px; pointer-events: auto; }
/* dock med faner */
#dock { position: absolute; left: 10px; bottom: 10px; width: 300px; padding: 0; border-radius: 12px; pointer-events: auto; overflow: hidden; }
.dtabs { display: flex; border-bottom: 1px solid var(--line); }
.dtabs button { flex: 1; padding: 8px 2px; font-size: 11.5px; color: var(--dim); border-bottom: 2px solid transparent; }
.dtabs button.on { color: var(--ink); border-bottom-color: var(--volt); background: rgba(255,255,255,0.04); }
.dtabs #dockMin { flex: none; width: 30px; }
#dock.min .dpane { display: none; } #dock.min #dockMin { transform: rotate(180deg); }
.dpane { padding: 9px 12px 10px; max-height: calc(100vh - 230px); overflow: auto; }
.dpane > div { position: static !important; width: auto !important; padding: 0 !important; background: none !important; border: 0 !important; backdrop-filter: none !important; }
#mapBox { position: static; display: block; padding: 0; }
#mapC { width: 100%; height: auto; aspect-ratio: 1; }
#deadline2 { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin: 4px 0 2px; }
#deadline2 b.urg { color: var(--bad); }
/* byggebjælke midt for, info-kort til højre, coach over byggebjælken */
#toasts { top: 72px; width: min(440px, calc(100vw - 700px)); }
#sel { top: 70px; bottom: auto; max-height: calc(100vh - 90px); }
@media (max-width: 1200px) { #clock #weather, #clock #dayN { display: none; } #toasts { width: 360px; } }
@media (max-width: 900px) { #topbar { flex-wrap: wrap; height: auto; padding: 6px; } #dock { width: 240px; } #sel { top: auto; bottom: 110px; } }

.gain { font-size: 12px; color: #c8d4dc; margin: -2px 0 7px; } .gain b { color: var(--good); } .gain .good { color: var(--warn); }
.plabel span small { color: var(--dim); font-size: 9px; }
@media (max-width: 1100px) { #clock #deadline, #clock .sep { display: none; } .chip { padding: 0 7px; font-size: 12px; } #pwTag2 { font-size: 12px; } }
.lsub { margin: 6px 0 2px; font-size: 10px; letter-spacing: 0.16em; color: var(--dim); }
.lr.sm { font-size: 12px; } .lr.sm small { color: var(--dim); font-size: 10.5px; }
#ver { position: fixed; right: 8px; bottom: 3px; z-index: 50; font-size: 10px; color: rgba(255,255,255,0.45); text-shadow: 0 1px 0 #000; pointer-events: none; font-family: 'Chakra Petch', monospace; }

/* ==========================================================================================
   HUD v3 (ejeren 17-10): skuffer som i SIS, alt vigtigt OPPE I MIDTEN. Topbjælke centreret, skuffe + info-kort under den
   ========================================================================================== */
#dock, #feed { display: none !important; }
.plate { background: linear-gradient(180deg, rgba(34, 42, 52, 0.96), rgba(16, 21, 28, 0.96)); border: 1px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -2px 0 rgba(0,0,0,0.35), 0 10px 30px rgba(0,0,0,0.45); backdrop-filter: blur(6px); }
#topbar { position: absolute; top: 8px; left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 16px); height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 14px; pointer-events: auto; }
#clock { display: flex; align-items: center; gap: 7px; }
#clock #cityName { font-size: 13px; letter-spacing: 0.14em; }
#clock #dayN { font-size: 11px; color: var(--dim); }
#clock #time { font-size: 19px; font-family: 'Silkscreen', 'Chakra Petch', monospace; }
#clock .spd button { width: 30px; height: 26px; }
#clock #deadline { display: flex; flex-direction: column; font-size: 10.5px; line-height: 1.1; }
.tsep { width: 1px; height: 30px; background: rgba(255,255,255,0.1); }
.tbg { display: flex; gap: 4px; align-items: center; }
.chip { height: 34px; }
.chip.on { background: rgba(255, 225, 74, 0.14); border-color: var(--volt); }
.chip.sq { width: 34px; justify-content: center; padding: 0; }
#moneyBox { margin: 0 6px; padding: 2px 12px; border-radius: 10px; cursor: pointer; min-width: 130px; }
#moneyBox:hover, #moneyBox.on { background: rgba(255,255,255,0.06); }
#money { font-size: 24px; }
#newsBtn { position: relative; width: 38px; justify-content: center; padding: 0; }
#newsDot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #ff4a3a; box-shadow: 0 0 6px #ff4a3a; animation: blink 1.4s infinite; }
/* under topbjælken: tips, beskeder, skuffe + info-kort side om side */
#under { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); width: min(980px, calc(100vw - 20px)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
#under > * { pointer-events: auto; }
#coach { position: static; transform: none; max-width: 640px; bottom: auto; }
#coach.pop { animation: cpop2 0.45s cubic-bezier(.2,1.4,.4,1); }
@keyframes cpop2 { from { transform: translateY(-10px) scale(0.92); opacity: 0; } }
#toasts { position: static; transform: none; width: auto; max-width: 560px; top: auto; pointer-events: none; }
.toast.ntoast { display: flex; flex-direction: column; text-align: left; max-width: 520px; background: #f4efe2; color: #1e1a14; border: 0; }
.toast.ntoast b { font-family: Georgia, serif; text-transform: uppercase; font-size: 13px; } .toast.news span { font-size: 12px; }
#drawRow { display: flex; gap: 10px; align-items: flex-start; justify-content: center; width: 100%; }
#drawRow:empty { display: none; }
#drawer { width: 330px; border-radius: 14px; overflow: hidden; animation: dslide 0.22s ease-out; }
@keyframes dslide { from { transform: translateY(-14px); opacity: 0; } }
.dhead { display: flex; align-items: center; gap: 6px; padding: 8px 10px 7px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.dhead b { flex: 1; font-size: 13px; letter-spacing: 0.06em; }
.dhead button { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,0.05); color: var(--dim); font-size: 12px; }
#dPin { filter: grayscale(1); opacity: 0.6; } #dPin.on { filter: none; opacity: 1; background: rgba(255,225,74,0.2); }
.dpane { padding: 10px 14px 12px; max-height: calc(100vh - 220px); overflow: auto; }
.dpane > div { position: static !important; width: auto !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
#mapC { width: 100%; height: auto; aspect-ratio: 1; }
.htrend { text-align: center; font-size: 11px; color: var(--dim); margin: 2px 0 6px; }
#sel { position: static; width: 360px; max-height: calc(100vh - 220px); border-radius: 14px; animation: dslide 0.22s ease-out; }
#newsList .nitem { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
#newsList .nitem small { display: block; font-size: 9px; letter-spacing: 0.12em; color: var(--dim); }
#newsList .nitem b { display: block; font-size: 13px; margin: 1px 0 2px; }
#newsList .nitem p { margin: 0; font-size: 12px; color: #c4ccd2; line-height: 1.35; }
#newsList .fic { font-size: 22px; } #newsList .fav svg { width: 36px; height: 36px; border-radius: 7px; }
#banners { top: 34%; }
#tipline { bottom: 108px; }
@media (max-width: 1250px) { #clock #dayN, #clock #deadline { display: none; } }
@media (max-width: 1000px) { #chipH b, #chipP b { display: none; } #money { font-size: 20px; } #moneyBox { min-width: 100px; } }
@media (max-width: 1150px) { #clock #cityName, #clock #dayN, #clock #deadline, #chipH b, #chipP b, #resBtn small, .tsep { display: none; } #clock .spd button { width: 24px; } #topbar { gap: 6px; padding: 0 6px; } #moneyBox { min-width: 90px; padding: 2px 6px; } #money { font-size: 19px; } #moneyBox small { display: none; } }
#topbar #clock { position: static !important; top: auto; left: auto; width: auto; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
#topbar #moneyBox { position: relative; left: auto; top: auto; transform: none; order: 0; }

.toast.ntoast { position: relative; display: flex; align-items: center; gap: 14px; width: min(620px, 92vw); max-width: none; padding: 12px 40px 13px 16px; border-radius: 14px; background: #f4efe2; color: #1e1a14; border: 0; text-align: center; font-family: Georgia, 'Times New Roman', serif; box-shadow: 0 10px 30px rgba(0,0,0,0.45); pointer-events: auto; animation: tin 0.35s; }
.toast.ntoast.mayor { background: #eef3f8; }
.ntoast .nic { font-style: normal; font-size: 30px; } .ntoast > div { flex: 1; }
.ntoast small { display: block; font-size: 11px; letter-spacing: 0.2em; color: #6a645a; font-weight: 700; }
.ntoast b { display: block; font-size: 17px; text-transform: uppercase; margin: 2px 0 3px; font-family: Georgia, serif; }
.ntoast span { display: block; font-size: 14px; line-height: 1.35; }
.ntoast .nx { position: absolute; top: 8px; right: 10px; font-size: 14px; color: #6a645a; }
.toast.ntoast { flex-direction: row !important; align-items: center; }
#fps { position: fixed; right: 8px; bottom: 17px; z-index: 50; font: 10px/1.3 ui-monospace, Consolas, monospace; color: #9fb4c4; background: #0b1016aa; padding: 2px 6px; border-radius: 4px; pointer-events: none; }
#fps.meh { color: #ffd36a; } #fps.bad { color: #ff6a7a; }
#newsPop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 22; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
body.title #newsPop, body.cine #newsPop { display: none; }
/* ejeren 17-10: topbjælke og info-kort må ikke hoppe i størrelse når tallene ændrer sig */
#topbar #moneyBox { width: 232px; min-width: 232px; flex: none; overflow: hidden; }
#money, #moneyBox small, #topbar b, #sel { font-variant-numeric: tabular-nums; }
#moneyBox small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sel { flex: 0 0 360px; width: 360px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
#drawer { flex: none; }
.dpane { overflow-x: hidden; }
@media (max-width: 1150px) { #topbar #moneyBox { width: 110px; min-width: 110px; } }
#drawer .dhead, #sel .sh { cursor: grab; user-select: none; }
#drawer.moved, #sel.moved { position: fixed !important; z-index: 21; animation: none; }
.plabel .upA { position: absolute; top: -13px; right: -11px; width: 22px; height: 22px; border-radius: 50%; background: #2fd06a; color: #fff; font-style: normal; font-size: 12px; line-height: 22px; text-align: center; box-shadow: 0 0 10px rgba(47,208,106,0.8), 0 2px 0 #138a3e; animation: upbob 0.9s ease-in-out infinite; }
@keyframes upbob { 50% { transform: translateY(-4px); } }
/* ejeren 17-10: tal og tid i topbjælken har faste bredder, så bjælken står stille */
#topbar #time { display: inline-block; width: 5.2ch; text-align: center; }
#topbar #deadline { width: 74px; white-space: nowrap; }
#topbar #cpct2 { display: inline-block; min-width: 4ch; text-align: right; }
#topbar #hPct { display: inline-block; min-width: 4ch; text-align: right; }
#topbar #pwTag2 { display: inline-block; min-width: 150px; text-align: left; white-space: nowrap; }
#topbar #rpN { display: inline-block; min-width: 3ch; text-align: right; }
#topbar #dayN { display: inline-block; min-width: 9ch; }
.dpane > div { transform: none !important; left: auto !important; top: auto !important; margin: 0 !important; }
/* ejeren 17-10: tip og små beskeder er side-toasts og skubber aldrig skuffe/info-kort */
#under #coach { position: fixed !important; left: 14px; top: 78px; width: 340px; max-width: 340px; transform: none; z-index: 20; }
#coach .ctx span { font-size: 13px; line-height: 1.4; }
#under #toasts { position: fixed !important; right: 14px; top: 78px; width: 300px; max-width: 300px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 20; }
@keyframes cpop2 { from { transform: translateX(-14px) scale(0.94); opacity: 0; } }
body > #coach { position: fixed !important; left: 14px; top: 78px; width: 340px; max-width: 340px; bottom: auto; transform: none; z-index: 20; pointer-events: auto; }
body > #toasts { position: fixed !important; right: 14px; top: 78px; left: auto; width: 300px; max-width: 300px; transform: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 20; pointer-events: none; }
body.title > #coach, body.cine > #coach, body.title > #toasts, body.cine > #toasts { display: none; }
#sel .gain.gmax { color: var(--warn); font-size: 12px; margin-top: 2px; }
#sel .gain { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plabel .upA { top: -16px; right: -14px; width: 28px; height: 28px; line-height: 28px; font-size: 15px; font-weight: 900; }
.upFloat { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #2fd06a; color: #fff; font-size: 16px; font-weight: 900; line-height: 30px; text-align: center; box-shadow: 0 0 12px rgba(47,208,106,0.85), 0 2px 0 #138a3e; pointer-events: none; animation: upbob2 0.9s ease-in-out infinite; }
@keyframes upbob2 { 50% { margin-top: -5px; } }
/* stationsliste i højre side (ejeren 17-10) */
#stations { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); width: 230px; max-height: 62vh; border-radius: 14px; overflow: hidden; z-index: 19; pointer-events: auto; display: flex; flex-direction: column; }
#stations[hidden] { display: none; }
body.title #stations, body.cine #stations { display: none; }
#stations .sthd { padding: 9px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); user-select: none; }
#stations .sthd small { color: var(--dim); font-weight: 400; } #stations .sthd i { margin-left: auto; font-style: normal; transition: transform .2s; }
#stations.min .sthd i { transform: rotate(-90deg); } #stations.min .stlist { display: none; } #stations.min .sthd { border-bottom: 0; }
#stations .stlist { overflow-y: auto; padding: 4px; }
#stations .strow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
#stations .strow:hover { background: rgba(255,255,255,0.06); } #stations .strow.on { background: rgba(122,232,255,0.12); }
#stations .sti { font-size: 17px; width: 22px; text-align: center; }
#stations .strow > div { flex: 1; min-width: 0; }
#stations .strow b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stations .strow small { display: block; font-size: 11px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
#stations .strow small b { display: inline; color: var(--ink); font-size: 11px; } #stations .strow small em { font-style: normal; color: var(--warn); } #stations .strow small i { font-style: normal; color: var(--good); }
#stations .stup { width: 20px; height: 20px; border-radius: 50%; background: #2fd06a; color: #fff; font-size: 11px; font-weight: 900; line-height: 20px; text-align: center; box-shadow: 0 0 8px rgba(47,208,106,0.7); }
/* værktøjs-hjælpelinjen: over byggebjælken, med mørk baggrund så den kan læses */
#tipline { bottom: 128px !important; padding: 4px 12px; border-radius: 999px; background: rgba(10,16,22,0.78); text-shadow: none; }
#tipline:empty { display: none; }
@media (max-width: 1150px) { #stations { width: 180px; } }
/* rådgiver: bedste køb lige nu */
#stations .bbhd { padding: 9px 12px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--volt); }
#stations .bblist { padding: 2px 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
#stations .bbrow { padding: 6px 8px; border-radius: 9px; cursor: pointer; opacity: 0.7; }
#stations .bbrow:hover { background: rgba(255,255,255,0.06); opacity: 1; }
#stations .bbrow.ok { opacity: 1; } #stations .bbrow.top.ok { background: rgba(47,208,106,0.12); box-shadow: inset 0 0 0 1px rgba(47,208,106,0.45); }
#stations .bbrow b { display: block; font-size: 12px; line-height: 1.25; }
#stations .bbrow small { display: block; font-size: 10.5px; color: var(--dim); margin-top: 2px; font-variant-numeric: tabular-nums; }
#stations .bbrow small i { font-style: normal; color: var(--cyan); } #stations .bbrow small em { font-style: normal; color: var(--warn); }
#stations { max-height: 74vh; } #stations .stlist { flex: 1; }
#sel .go.best, #sel .ad.best { box-shadow: 0 0 0 2px #2fd06a, 0 0 14px rgba(47,208,106,0.6); position: relative; }
#sel .go.best::after, #sel .ad.best::after { content: '★ BEST BUY'; position: absolute; top: -9px; right: 10px; padding: 1px 7px; border-radius: 6px; background: #2fd06a; color: #062a14; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; }
.polhelp { margin: 4px 0 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.polhelp > small { display: block; font-size: 9.5px; letter-spacing: 0.16em; color: var(--dim); margin-bottom: 4px; }
.polhelp .ph { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; }
.polhelp .ph > span { font-size: 15px; width: 20px; text-align: center; }
.polhelp .ph b { display: block; font-size: 12px; font-weight: 600; } .polhelp .ph b i { font-style: normal; font-weight: 800; margin-left: 4px; }
.polhelp .ph b i.bad { color: var(--bad); } .polhelp .ph b i.good { color: var(--good); }
.polhelp .ph em { display: block; font-style: normal; font-size: 11px; color: var(--dim); line-height: 1.3; }
.polhelp .ph.top b { color: var(--volt); }
/* opdateringsbjælken nede i venstre hjørne, så den ikke ligger oven i kortene (ejeren 17-10) */
#upd { top: auto !important; bottom: 14px; left: 14px !important; transform: none !important; max-width: 420px; flex-wrap: wrap; }
#upd ul { flex: 1 1 100%; order: 2; max-height: 90px; overflow: auto; }
.polhelp { padding: 8px 10px 6px; letter-spacing: normal; text-align: left; }
.polhelp .polh { font-size: 9.5px; letter-spacing: 0.16em; color: var(--dim); margin-bottom: 4px; }
.polhelp .polr { display: grid; grid-template-columns: 22px 1fr auto; column-gap: 6px; align-items: baseline; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.polhelp .polr:first-of-type { border-top: 0; }
.polhelp .poli { font-size: 14px; text-align: center; grid-row: span 2; align-self: center; }
.polhelp .poln { font-size: 12px; font-weight: 600; }
.polhelp .polv { font-size: 12px; font-weight: 800; text-align: right; min-width: 4ch; font-variant-numeric: tabular-nums; color: var(--dim); }
.polhelp .polv.bad { color: var(--bad); } .polhelp .polv.good { color: var(--good); }
.polhelp .polt { grid-column: 2 / 4; font-size: 10.5px; color: var(--dim); line-height: 1.3; }
.polhelp .polr.top .poln { color: var(--volt); }
.polhelp .polh2 { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); }
.polhelp .polh2 + .polr { border-top: 0; }
.goal .pace { font-size: 11px; margin-top: 2px; font-weight: 600; }
.goal .pace.on { color: var(--good); } .goal .pace.off { color: var(--warn); }
/* forside: tilstand */
#modeSel { display: flex; gap: 8px; justify-content: center; margin: 10px 0 4px; }
#modeSel button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; min-width: 170px; }
#modeSel button small { font-size: 11px; font-weight: 400; color: var(--dim); }
#modeSel button.on { border-color: var(--volt); background: rgba(255,225,74,0.12); }
/* stjerner på slutskærmen */
#over .stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 2px; }
#over .stars i { font-style: normal; font-size: 46px; color: rgba(255,255,255,0.15); text-shadow: none; }
#over .stars i.on { color: #ffd23a; text-shadow: 0 0 18px rgba(255,210,58,0.7); animation: starpop 0.5s cubic-bezier(.2,1.6,.4,1) both; }
#over .stars i.on:nth-child(2) { animation-delay: .25s; } #over .stars i.on:nth-child(3) { animation-delay: .5s; }
@keyframes starpop { from { transform: scale(0.2); opacity: 0; } }
#over .starkey { text-align: center; font-size: 11px; color: var(--dim); margin-bottom: 8px; }
#over .go.alt { background: rgba(255,255,255,0.08); color: var(--ink); margin-top: 8px; }
.tree .tmore { margin-top: 8px; padding: 8px; border-radius: 10px; border: 1px dashed rgba(255,255,255,0.15); text-align: center; font-size: 12px; color: var(--dim); }
#modeSel button { background: rgba(10,16,22,0.82) !important; backdrop-filter: blur(4px); } #modeSel button small { color: #b8c4cc !important; } #modeSel button.on { background: rgba(60,50,10,0.88) !important; }
#sel .mgr { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; margin: 6px 0 2px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
#sel .mgr b { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,0.08); color: var(--dim); }
#sel .mgr small { grid-column: 1 / 3; font-size: 11px; font-weight: 400; color: var(--dim); }
#sel .mgr.on { border-color: rgba(47,208,106,0.5); background: rgba(47,208,106,0.08); } #sel .mgr.on b { background: #2fd06a; color: #062a14; }
/* titler */
.titles { margin-top: 12px; text-align: left; }
.titles .ttl { font-size: 11px; letter-spacing: 0.16em; color: var(--dim); font-weight: 700; margin-bottom: 6px; } .titles .ttl small { letter-spacing: 0; color: var(--volt); }
.titles .tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; max-height: 210px; overflow: auto; }
.titles .tt { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
.titles .tt i { font-style: normal; font-size: 15px; opacity: 0.5; } .titles .tt b { font-size: 11px; font-weight: 500; color: var(--dim); line-height: 1.2; }
.titles .tt.on { border-color: rgba(255,210,58,0.45); background: rgba(255,210,58,0.08); } .titles .tt.on i { opacity: 1; } .titles .tt.on b { color: var(--ink); font-weight: 700; }
#over .titles { max-width: 560px; margin: 10px auto; }
.tmytitle { margin: 6px 0 10px; font-size: 13px; color: #d8e0e6; text-shadow: 0 1px 0 #000; } .tmytitle b { color: var(--volt); } .tmytitle small { color: var(--dim); margin-left: 6px; }
#citySel { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px auto 12px; max-width: 760px; }
#citySel button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(10,16,22,0.82); border: 1px solid rgba(255,255,255,0.14); color: var(--ink); cursor: pointer; max-width: 240px; text-align: left; }
#citySel button b { font-size: 14px; } #citySel button small { font-size: 11px; color: #b8c4cc; line-height: 1.3; }
#citySel button.on { border-color: #3af0ff; background: rgba(10,50,60,0.88); box-shadow: 0 0 14px rgba(58,240,255,0.3); }
#citySel button.soon { opacity: 0.55; cursor: default; }
#citySel .cst { font-style: normal; color: #ffd23a; font-size: 12px; margin-left: 4px; letter-spacing: 1px; }
#citySel .cconq { flex-basis: 100%; text-align: center; font-size: 12px; color: #d8e0e6; text-shadow: 0 1px 0 #000; margin-top: 2px; }
#citySel .cst u { text-decoration: none; color: rgba(255,255,255,0.22); } #citySel .cst u.on { color: #ffd23a; }
/* fototilstand */
body.photo #hud, body.photo #stations, body.photo #coach, body.photo #toasts, body.photo #floats, body.photo #fps, body.photo #ver, body.photo #newsPop, body.photo #upd { display: none !important; }
#photoBar { display: none; }
body.photo #photoBar { display: flex; position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); gap: 6px; align-items: center; padding: 8px 10px; border-radius: 14px; z-index: 50; }
#photoBar b { font-size: 13px; margin-right: 6px; } #photoBar button { padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,0.08); color: var(--ink); font-size: 13px; }
#photoBar .go { background: var(--volt); color: #1a1400; font-weight: 700; }
#rushPill { font-size: 10px; letter-spacing: 0.12em; padding: 3px 7px; border-radius: 6px; background: #ff5a3a; color: #fff; animation: blink 1s infinite; }
#rushPill[hidden] { display: none; }
.plabel .trophy { position: absolute; top: -14px; left: -12px; font-style: normal; font-size: 13px; padding: 1px 5px; border-radius: 8px; background: rgba(40,30,0,0.85); border: 1px solid #ffd23a; color: #ffd23a; }
#sel .prices { display: flex; gap: 4px; align-items: center; margin: 8px 0 0; }
#sel .prices span { font-size: 12px; color: var(--dim); margin-right: 4px; white-space: nowrap; }
#sel .prices button { flex: 1; padding: 5px 4px; border-radius: 7px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--dim); font-size: 11.5px; font-weight: 600; }
#sel .prices button.on { background: rgba(255,225,74,0.16); border-color: var(--volt); color: var(--ink); }
/* byregler og undtagelser i stationspanelet */
#stations .rules { padding: 6px 8px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
#stations .rhd { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--dim); margin-bottom: 4px; }
#stations .rprice { display: flex; gap: 3px; } #stations .rprice button { flex: 1; padding: 4px 2px; font-size: 10.5px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--dim); }
#stations .rprice button.on { background: rgba(255,225,74,0.16); border-color: var(--volt); color: var(--ink); }
#stations .rbtns { display: flex; gap: 4px; margin-top: 4px; } #stations .rbtns button { flex: 1; padding: 5px 4px; font-size: 10.5px; border-radius: 7px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--ink); }
#stations .rbtns button.on { border-color: rgba(47,208,106,0.6); color: #7affb0; } #stations .rbtns button.ok { border-color: var(--volt); } #stations .rbtns button[disabled] { opacity: 0.4; }
#stations .strow.alert { background: rgba(255,90,58,0.12); box-shadow: inset 3px 0 0 #ff5a3a; } #stations .strow.alert em { font-style: normal; color: #ff8a6a; }
#stations .stfine { font-size: 10.5px; color: var(--dim); padding: 6px 8px 2px; letter-spacing: 0.04em; }
#stations .sthd b.bad { color: #ff8a6a; }
#sel .plink { color: var(--cyan); cursor: pointer; text-decoration: underline; }
/* verdenskortet */
#citySel { display: block; max-width: 640px; margin: 6px auto 10px; }
.wmap svg { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.wland { fill: #2e5a46; stroke: #4a8a68; stroke-width: 1.5; opacity: 0.9; }
.wgrid { stroke: rgba(122,200,255,0.07); stroke-width: 1; }
.wroute { fill: none; stroke: rgba(255,255,255,0.25); stroke-width: 2.5; stroke-dasharray: 6 6; }
.wroute.lit { stroke: #3af0a0; stroke-dasharray: none; filter: drop-shadow(0 0 4px #3af0a0); }
.wpin { cursor: pointer; } .wpin.lock { cursor: default; opacity: 0.6; }
.wpin .wdot { fill: #1e2a36; stroke: #ffd23a; stroke-width: 3; } .wpin.won .wdot { fill: #2fd06a; stroke: #b8ffd8; }
.wpin.cur .wdot { stroke: #3af0ff; stroke-width: 4; } .wpin .wglow { fill: rgba(47,208,106,0.25); animation: wpulse 2s ease-in-out infinite; }
@keyframes wpulse { 50% { opacity: 0.4; } }
.wpin .wico { font-size: 10px; text-anchor: middle; } .wpin .wname { font: 700 15px 'Chakra Petch', sans-serif; fill: #f4f8fb; paint-order: stroke; stroke: #06101a; stroke-width: 4px; }
.wpin .wstar { font-size: 13px; text-anchor: middle; fill: #ffd23a; paint-order: stroke; stroke: #06101a; stroke-width: 3px; }
.wpin:hover .wdot { stroke-width: 5; }
.winfo { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: center; margin-top: 6px; font-size: 13px; color: #d8e0e6; text-shadow: 0 1px 0 #000; }
.winfo b { color: #fff; } .winfo span { color: #c8d4dc; } .winfo em { flex-basis: 100%; text-align: center; font-style: normal; color: #7affb0; font-size: 12px; }
.winfo .wfree { font-size: 11px; color: #9ab8c8; cursor: pointer; text-decoration: underline; }
/* finalen */
#finale { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(20,60,50,0.96), rgba(4,10,16,0.98)); animation: finIn 1s ease-out; }
@keyframes finIn { from { opacity: 0; } }
#finale .fin { max-width: 640px; width: calc(100vw - 32px); text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
#finale .fpaper { background: #f4efe2; color: #1e1a14; padding: 14px 20px; border-radius: 8px; transform: rotate(-1.5deg); font-family: Georgia, serif; box-shadow: 0 14px 40px rgba(0,0,0,0.6); }
#finale .fpaper small { letter-spacing: 0.2em; font-size: 11px; color: #6a645a; } #finale .fpaper h1 { font-size: 26px; margin: 6px 0; } #finale .fpaper p { margin: 0; font-size: 14px; }
#finale .flogo { font: 900 46px/0.95 'Chakra Petch', sans-serif; color: #f4f8fb; letter-spacing: 0.06em; } #finale .flogo span { color: #3af0a0; text-shadow: 0 0 24px rgba(58,240,160,0.7); }
#finale .fstats { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } #finale .fstats b { display: block; font-size: 24px; color: #ffd23a; } #finale .fstats small { font-size: 10px; letter-spacing: 0.16em; color: #9ab8c8; }
#finale .fcred { height: 120px; overflow: hidden; width: 100%; mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
#finale .froll { animation: froll 14s linear infinite; color: #d8e0e6; font-size: 14px; } #finale .froll p { margin: 6px 0; }
@keyframes froll { from { transform: translateY(120px); } to { transform: translateY(-100%); } }
#citySel { max-width: 520px; margin: 2px auto 8px; } @media (max-height: 760px) { #citySel { max-width: 420px; } }
/* forsidens fire knapper i et ens 2x2-gitter (ejeren 17-10) */
#title #contBtn, #title #startBtn { width: 240px; height: 56px; margin: 0 2px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; vertical-align: top; }
#title #modeSel { gap: 8px; margin-top: 8px; }
#title #modeSel button { width: 240px; min-width: 240px; height: 56px; box-sizing: border-box; justify-content: center; }
@media (max-width: 560px) { #title #contBtn, #title #startBtn, #title #modeSel button { width: 46vw; min-width: 0; } }
.wland.g1 { fill: #2e7a52; stroke: #5ac88a; } .wland.g2 { fill: #2fae66; stroke: #9affc8; filter: drop-shadow(0 0 6px rgba(58,240,160,0.5)); }
.wland { transition: fill 1.2s; }
.wsat circle { fill: #3af0a0; filter: drop-shadow(0 0 3px #3af0a0); } .wsat { animation: wsatIn 0.6s ease-out both; }
@keyframes wsatIn { from { opacity: 0; transform: scale(0.2); transform-origin: center; } }
.wstats { display: flex; gap: 10px; margin-top: 6px; } .wstats > div { flex: 1; background: rgba(10,16,22,0.8); border-radius: 10px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
.wstats small { font-size: 9.5px; letter-spacing: 0.14em; color: #9ab8c8; } .wstats b { font-size: 16px; color: #7affb0; } .wstats b.pmx { color: #ff6a4a; }
.wstats .wbar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; } .wstats .wbar u { display: block; height: 100%; background: linear-gradient(90deg, #2fd06a, #3af0ff); }
.wstats .wspark { width: 60px; height: 22px; } .wstats .wspark polyline { fill: none; stroke: #ff6a4a; stroke-width: 2.5; }
.wticker { margin-top: 6px; overflow: hidden; white-space: nowrap; background: rgba(244,239,226,0.92); color: #1e1a14; border-radius: 8px; font: 13px Georgia, serif; padding: 4px 0; }
.wticker span { display: inline-block; padding-left: 100%; animation: wtick 28s linear infinite; }
@keyframes wtick { to { transform: translateX(-100%); } }
/* forsiden med verdenskort: mindre logo og kort så alt kan være der */
#title .tlogo:not(.sm) { font-size: clamp(44px, min(8vw, 11vh), 110px); }
#title .tsub { margin-bottom: 4px; }
#citySel { max-width: min(520px, 62vh); }
@media (max-height: 820px) { #title .tlogo:not(.sm) { font-size: clamp(40px, 9vh, 80px); } #citySel { max-width: min(460px, 56vh); } .wstats b { font-size: 14px; } }
/* Petra Leum: transmissions-vindue nede til venstre (som en commander i Sky Force) */
#petra { position: fixed; left: 14px; bottom: 120px; z-index: 30; width: 360px; display: flex; gap: 10px; align-items: center; padding: 8px 30px 8px 8px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(40,14,10,0.95), rgba(20,8,6,0.95)); border: 1px solid #c8201c; box-shadow: 0 0 18px rgba(200,32,28,0.45), 0 10px 26px rgba(0,0,0,0.5); animation: pin 0.35s cubic-bezier(.2,1.3,.4,1); pointer-events: auto; }
#petra[hidden] { display: none; } #petra.out { animation: pout 0.35s forwards; }
@keyframes pin { from { transform: translateX(-30px); opacity: 0; } } @keyframes pout { to { transform: translateX(-30px); opacity: 0; } }
#petra .ppic { width: 64px; height: 64px; border-radius: 8px; flex: none; border: 2px solid #ffd23a; background: #000; }
#petra .ptx small { display: block; font-size: 9.5px; letter-spacing: 0.14em; color: #ffb84a; margin-bottom: 3px; }
#petra .ptx span { font-size: 13px; line-height: 1.35; color: #f4e8e0; }
#petra .px { position: absolute; top: 6px; right: 8px; color: #c89080; font-size: 12px; }
#petra .pa { display: none; } #petra.angry .pa { display: inline; } #petra.angry .pc { display: none; }
#petra.angry { border-color: #ff3a2a; box-shadow: 0 0 26px rgba(255,58,42,0.7), 0 10px 26px rgba(0,0,0,0.5); animation: pin 0.35s, pshake 0.4s 0.35s; }
#petra.angry .ppic { border-color: #ff3a2a; } #petra .psteam { animation: steam 1s ease-out infinite; }
@keyframes pshake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes steam { to { transform: translateY(-6px); opacity: 0; } }
body.title #petra, body.cine #petra, body.photo #petra { display: none !important; }
@media (max-width: 700px) { #petra { width: calc(100vw - 28px); bottom: 110px; } }
#finale .fsub { color: #c8d8e0; font-size: 14px; margin-top: -6px; }
#title .tlogo:not(.sm) { font-size: clamp(34px, min(7vw, 8vh), 100px) !important; } #title .tsub { font-size: 13px; max-width: 560px; margin-left: auto; margin-right: auto; }
/* forsiden: altid centreret; Start fylder hele rækken når der ikke er noget at fortsætte */
#title { justify-content: center !important; align-items: center !important; padding: 1vh 0 !important; }
#title .tbox .go + .go { margin-left: 2px; }
#title #contBtn[hidden] + #startBtn { width: 488px; }
@media (max-width: 560px) { #title #contBtn[hidden] + #startBtn { width: 94vw; } }

/* ===== forsiden v2 (ejeren 18-10: "cramped og svært at læse"): to kolonner på mørke paneler, mere luft, større tekst ===== */
#title { background: radial-gradient(ellipse at 50% 50%, rgba(4,8,14,0.35), rgba(4,8,14,0.75)) !important; padding: 3vh 3vw !important; }
#title .tbox { display: grid; grid-template-columns: minmax(340px, 440px) minmax(420px, 640px); gap: 28px; align-items: center; justify-content: center; width: 100%; max-width: 1180px; text-align: center; }
#title .tleft, #title .tright { background: rgba(8,12,20,0.78); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; padding: 26px 26px 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
#title .tleft { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#title .tlogo:not(.sm) { font-size: clamp(48px, 5.4vw, 86px) !important; text-shadow: 0 4px 0 rgba(0,0,0,0.5); }
#title .tsub { font-size: 16px !important; line-height: 1.45; color: #e4ecf2; max-width: 360px; margin: 0 !important; text-shadow: none; }
#title .tmytitle { margin: 0; font-size: 14px; text-shadow: none; }
#title .tbtns { display: flex; gap: 10px; width: 100%; }
#title .tbtns .go { flex: 1; width: auto !important; margin: 0 !important; height: 60px; font-size: 18px; }
#title #contBtn[hidden] + #startBtn { width: auto !important; }
#title #modeSel { display: flex; gap: 10px; width: 100%; margin: 0 !important; }
#title #modeSel button { flex: 1; width: auto !important; min-width: 0 !important; height: auto; min-height: 64px; padding: 10px 8px; font-size: 15px; }
#title #modeSel button small { font-size: 12px !important; }
#title .coffee { font-size: 14px; margin-top: 2px; }
#title .tright { padding: 18px; }
#title #citySel { max-width: none !important; width: 100%; margin: 0 !important; }
.wmap svg { box-shadow: none; }
.wpin .wname { font-size: 19px; } .wpin .wstar { font-size: 16px; } .wpin .wdot { r: 10; }
.wstats { gap: 12px; margin-top: 12px; } .wstats > div { padding: 10px 14px; } .wstats small { font-size: 11px; } .wstats b { font-size: 20px; }
.wticker { margin-top: 12px; font-size: 15px; padding: 7px 0; }
.winfo { margin-top: 12px; font-size: 15px; gap: 6px 12px; text-shadow: none; } .winfo em { font-size: 14px; } .winfo .wfree { font-size: 13px; }
@media (max-width: 1000px) { #title .tbox { grid-template-columns: 1fr; max-width: 560px; gap: 14px; } #title { align-items: flex-start !important; overflow-y: auto; pointer-events: auto; } #title .tleft, #title .tright { padding: 18px; } }
@media (max-height: 760px) and (min-width: 1001px) { #title .tlogo:not(.sm) { font-size: clamp(40px, 4.6vw, 70px) !important; } #title .tleft { gap: 10px; padding: 20px; } .wticker, .wstats { margin-top: 8px; } }
@media (max-width: 1000px) {
  #title .tbox { grid-template-columns: minmax(0, 1fr) !important; width: 100%; max-width: 560px; margin: 0 auto; }
  #title .tleft, #title .tright { min-width: 0; }
  #title { padding: 12px 16px !important; justify-content: center !important; }
  .wmap svg { width: 100%; max-width: 100%; }
}
@media (max-width: 480px) {
  #title .tleft { padding: 16px; gap: 10px; } #title .tlogo:not(.sm) { font-size: 46px !important; } #title .tsub { font-size: 14px !important; }
  #title #modeSel button { font-size: 13px; padding: 8px 4px; min-height: 56px; } #title #modeSel button small { font-size: 10.5px !important; }
  .wpin .wname { font-size: 24px; } .wpin .wstar { font-size: 20px; } .wstats { flex-direction: column; gap: 6px; }
}
/* blokering af telefon/tablet */
#mobileBlock { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 50% 30%, #12302a, #05080c); text-align: center; color: #e4ecf2; }
#mobileBlock[hidden] { display: none; }
#mobileBlock .mbx { max-width: 420px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
#mobileBlock .tlogo { font-size: 56px !important; }
#mobileBlock p { margin: 0; font-size: 17px; line-height: 1.45; } #mobileBlock b { color: #ffd23a; }
body.blocked #title, body.blocked #hud, body.blocked #c { display: none !important; }
/* ===== én beskedkolonne til venstre (ejeren 18-10) ===== */
#msgs { position: fixed; left: 14px; top: 78px; width: 360px; z-index: 22; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-height: calc(100vh - 220px); }
#msgs > * { pointer-events: auto; }
body > #coach, #msgs #coach { position: static !important; left: auto !important; top: auto !important; width: auto !important; max-width: none !important; transform: none; }
#msgs #petra { position: relative !important; left: auto !important; bottom: auto !important; width: auto !important; }
#msgs #toasts { position: static !important; width: auto !important; max-width: none !important; align-items: stretch !important; right: auto !important; top: auto !important; }
#msgs #toasts .toast { width: auto; max-width: none; text-align: left; }
body.title #msgs, body.cine #msgs, body.photo #msgs, body.blocked #msgs { display: none !important; }
/* opdateringsbjælken nede til højre, over fps-tælleren (ikke oven i beskederne) */
#upd { left: auto !important; right: 14px !important; bottom: 40px !important; }
/* avis-/borgmesterkortet (ejeren 18-10: "rodet formatteret"): kun overskriften er stor; fed tekst i brødteksten bliver i linjen */
.toast.ntoast { text-align: left; align-items: flex-start; }
.ntoast > div > small { text-align: left; }
.ntoast > div > b { text-align: left; }
.ntoast span b, .ntoast span i, .ntoast span em { display: inline !important; font-size: inherit !important; text-transform: none !important; margin: 0 !important; letter-spacing: 0 !important; }
.ntoast span { font-size: 15px; line-height: 1.5; margin-top: 2px; }
.ntoast .nic { margin-top: 4px; }