/* Designtokens bor i tokens.css — indlaest foer denne fil i index.html, og delt med de indlejrede apps i apps/. */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; font-family: var(--sans); color: var(--text); background: radial-gradient(circle at top left, #17345a 0%, transparent 30%), radial-gradient(circle at bottom right, #24104a 0%, transparent 30%), linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%); } /* ============================================================ FINISH — de detaljer browseren ellers vælger for os Et system er ikke færdigt, fordi fladerne har den rigtige farve. Markering, rullepaneler og tastaturfokus tegnes af browseren med sine egne standardfarver, og de er alle Windows-blå. På en cyan/violet flade stikker de ud som det eneste sted, systemet ikke bestemmer selv. ============================================================ */ /* Markeret tekst brugte browserens blå. Nu systemets egen cyan. */ ::selection { background: rgba(89, 208, 255, 0.32); color: var(--text); } /* Rullepaneler var allerede stylet i apps/app-shell.css, men ikke her — så skrivebordets egne vinduer havde lyse standardpaneler, mens de indlejrede apps havde mørke. Samme regel begge steder nu. */ * { scrollbar-width: thin; scrollbar-color: #1d3149 var(--surface-sunken); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--surface-sunken); } ::-webkit-scrollbar-thumb { background: #1d3149; border: 2px solid var(--surface-sunken); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #2a4463; } ::-webkit-scrollbar-corner { background: var(--surface-sunken); } /* Tastaturfokus fandtes ikke: den der navigerer med Tab kunne ikke se, hvor de var. :focus-visible rammer kun tastaturbrug, så musen ikke efterlader ringe overalt. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* Systemet pulser, blinker og fejer med vilje — det er en del af uhyggen. Men for den, der bliver dårlig af bevægelse, er det ikke stemning, det er en grund til at lukke fanen. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { position: relative; } body.theme-forest { background: radial-gradient(circle at top left, #1b4b3b 0%, transparent 30%), radial-gradient(circle at bottom right, #102f25 0%, transparent 30%), linear-gradient(135deg, #081a15 0%, #0f2d25 100%); } body.theme-sunset { background: radial-gradient(circle at top left, #6e2c67 0%, transparent 30%), radial-gradient(circle at bottom right, #2b144c 0%, transparent 30%), linear-gradient(135deg, #180d2e 0%, #3c1e5f 100%); } body.large-icons .desktop-icon { width: 98px; padding: 12px 8px; } body.large-icons .icon-emoji { font-size: 2rem; } body.compact-taskbar .taskbar { height: 48px; } body.compact-taskbar .desktop { height: calc(100% - 48px); } /* ============================================================ SYSTEM MOOD — escalating visual instability classes Applied to by updateSystemMood() in app.js. mood-warning : shield ≤ 89 (pattern discovered) mood-critical : shield ≤ 80 (escalation unlocked) mood-breach : shield ≤ 73 (payoff + core exposed) mood-ended : final decision taken ============================================================ */ /* --- mood-warning: subtle amber tint, slightly denser scanlines --- */ body.mood-warning { --bg: #0d1108; --bg-2: #151f0d; } body.mood-warning .wallpaper-glow { background: linear-gradient(rgba(255, 220, 60, 0.025), rgba(255, 220, 60, 0.012)), repeating-linear-gradient( 0deg, rgba(255, 220, 60, 0.025), rgba(255, 220, 60, 0.025) 1px, transparent 1px, transparent 3px ); } /* --- mood-critical: amber deepens, vignette appears --- */ body.mood-critical { --bg: #150d06; --bg-2: #1e1308; } body.mood-critical .wallpaper-glow { background: radial-gradient(ellipse at center, transparent 55%, rgba(80, 30, 0, 0.35) 100%), linear-gradient(rgba(255, 170, 40, 0.04), rgba(255, 170, 40, 0.02)), repeating-linear-gradient( 0deg, rgba(255, 160, 30, 0.04), rgba(255, 160, 30, 0.04) 1px, transparent 1px, transparent 2px ); } /* --- mood-breach: red tint, hard vignette, tight scanlines --- */ body.mood-breach { --bg: #150508; --bg-2: #1e070c; } body.mood-breach .wallpaper-glow { background: radial-gradient(ellipse at center, transparent 40%, rgba(100, 10, 20, 0.5) 100%), linear-gradient(rgba(255, 60, 60, 0.05), rgba(255, 60, 60, 0.025)), repeating-linear-gradient( 0deg, rgba(255, 60, 60, 0.05), rgba(255, 60, 60, 0.05) 1px, transparent 1px, transparent 2px ); } /* --- mood-ended: muted desaturated tone after the decision --- */ body.mood-ended { --bg: #0c0f14; --bg-2: #141922; } body.mood-ended .wallpaper-glow { background: radial-gradient(ellipse at center, transparent 50%, rgba(10, 18, 40, 0.5) 100%), repeating-linear-gradient( 0deg, rgba(180, 200, 255, 0.018), rgba(180, 200, 255, 0.018) 1px, transparent 1px, transparent 3px ); } /* Status pill variants to match mood. Teksten var mørk (#8a6800 og lign.) fra dengang panelerne var lyse — på den mørke flade forsvandt den. Nu lyser advarslen i stedet for at gemme sig. */ .status-pill.pill-warning { background: rgba(255, 220, 60, 0.14); color: #ffdc6e; border-color: rgba(255, 210, 60, 0.45); } .status-pill.pill-critical { background: rgba(255, 140, 30, 0.16); color: #ffb066; border-color: rgba(255, 140, 30, 0.5); } .status-pill.pill-breach { background: rgba(255, 60, 60, 0.18); color: #ff8a94; border-color: rgba(255, 70, 80, 0.55); animation: pillAlarm 1.8s ease-in-out infinite; } .status-pill.pill-ended { background: rgba(120, 130, 160, 0.12); color: #9aa8c4; border-color: rgba(140, 160, 200, 0.3); } @keyframes pillAlarm { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } /* Clue-found flash on the browser window */ @keyframes clueFlash { 0% { box-shadow: 0 0 0 3px rgba(89, 208, 255, 0.0); } 20% { box-shadow: 0 0 0 4px rgba(89, 208, 255, 0.65), 0 0 28px rgba(89, 208, 255, 0.35); } 100% { box-shadow: 0 0 0 3px rgba(89, 208, 255, 0.0); } } .window.clue-flash { animation: clueFlash 0.9s ease-out forwards; } button, input, textarea { font: inherit; } .wallpaper-glow { position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.01)), repeating-linear-gradient( 0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px ); pointer-events: none; } .boot-screen { position: absolute; inset: 0; z-index: 9999; display: grid; place-items: center; background: linear-gradient(135deg, #040915, #0d1930); transition: opacity 0.5s ease; } .boot-screen.hidden { opacity: 0; pointer-events: none; } .login-screen { position: absolute; inset: 0; z-index: 9000; display: grid; place-items: center; background: linear-gradient(135deg, rgba(5, 10, 20, 0.74), rgba(16, 32, 58, 0.7)); } .login-screen.hidden { display: none; } /* Loginkortet var den sidste lyse flade i hele systemet — et hvidt, afrundet kort oven på et mørkt skrivebord. Nu er det samme mørke glas som vinduerne. */ .login-card { width: min(360px, 92vw); padding: 24px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--edge-strong); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), var(--glow); color: var(--text); text-align: center; } /* Udgang til spiloversigten fra login-skærmen (før skrivebordet loader) */ .login-exit { display: inline-block; margin-top: 14px; font-size: 12px; color: var(--accent); text-decoration: none; opacity: 0.75; transition: opacity 0.2s ease; } .login-exit:hover { opacity: 1; text-decoration: underline; } .narrator-overlay { position: absolute; inset: 0; z-index: 9050; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, rgba(4, 10, 18, 0.82), rgba(17, 28, 52, 0.78)); /* Fade-in for the backdrop */ opacity: 1; transition: opacity 0.22s ease; } .narrator-overlay.hidden { display: none; } .narrator-card { width: min(560px, 94vw); padding: 22px; border-radius: 18px; border: 1px solid rgba(112, 157, 255, 0.22); background: rgba(10, 18, 33, 0.96); box-shadow: var(--shadow); /* Slide-up entrance when overlay becomes visible */ animation: narratorCardIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes narratorCardIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .narrator-label { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(89, 208, 255, 0.12); color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; } .narrator-card h2 { margin: 0 0 8px; } .narrator-checklist { display: grid; gap: 8px; margin: 14px 0 16px; } .narrator-check { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); } .login-avatar { font-size: 2.4rem; margin-bottom: 8px; } .login-user { margin: 12px 0; padding: 9px 12px; border-radius: var(--radius); background: var(--surface-raised); border: 1px solid var(--edge); color: var(--text); font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.06em; font-weight: 600; } .boot-box { width: min(420px, 90vw); padding: 28px; border-radius: 18px; background: rgba(15, 24, 43, 0.95); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; } .boot-box h1 { margin: 0 0 8px; letter-spacing: 0.08em; } .boot-box p { margin: 0 0 18px; color: var(--muted); } .boot-bar { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .boot-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: bootLoad 1.2s linear infinite; } @keyframes bootLoad { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .desktop { position: relative; height: calc(100% - 56px); overflow: hidden; } /* Systemtekstur: et fint prikgitter over gradienten, så fladen læses som en skærm og ikke bare en farve. Ligger bag ikoner (z-index 1) og vinduer (z-index 5), rører ikke mood-systemets wallpaper-glow, og er svag nok til at overleve alle fire mood-farver uden at trække opmærksomhed. */ .desktop::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(140, 190, 240, 0.05) 1px, transparent 1.4px); background-size: 22px 22px; } .desktop-icons { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .icon-group { position: absolute; inset: 0; } .desktop-divider { display: none; } .desktop-icon { position: absolute; width: 86px; min-height: 82px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #ffffff; cursor: pointer; pointer-events: auto; user-select: none; touch-action: none; transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease, left 0.12s ease, top 0.12s ease; } .desktop-icon:hover { background: rgba(7, 24, 58, 0.28); border-color: rgba(132, 173, 240, 0.38); transform: translateY(-1px); } .icon-emoji { font-size: 2rem; line-height: 1; image-rendering: pixelated; display: flex; align-items: center; justify-content: center; } /* Pixel-ikon-canvas: tegnet 16×16, vist større via CSS. pixelated holder kanterne hårde i stedet for at udtvære dem. Størrelsen bestemmes af konteksten nedenfor, ikke af canvassets egne 16px. */ .picon { image-rendering: pixelated; image-rendering: crisp-edges; display: block; } .icon-emoji .picon { width: 36px; height: 36px; } .menu-icon .picon { width: 20px; height: 20px; } .login-avatar .picon { width: 48px; height: 48px; margin: 0 auto; } body.large-icons .icon-emoji .picon { width: 44px; height: 44px; } /* Fil-ikon inline i stifinderens tabel, ved siden af filnavnet. */ .file-icon-inline { display: inline-flex; vertical-align: middle; margin-right: 2px; } .file-icon-inline .picon { width: 18px; height: 18px; } /* Pixel-ikon i proceslinjens hurtigstart. */ .qicon { display: inline-flex; } .qicon .picon { width: 20px; height: 20px; } /* Pixel-ikon i stifinderens sidebar-navigation. */ .nav-picon { display: inline-flex; vertical-align: middle; margin-right: 5px; } .nav-picon .picon { width: 17px; height: 17px; } /* Labels brød midt i ordet ("Eksperimen tLab"), fordi word-break: break-word deler hvor som helst. Nu brydes der kun ved mellemrum eller ved et bevidst i index.html; navne der stadig ikke kan være der, klippes efter to linjer med ellipse — som en rigtig skrivebordsflade. */ .desktop-icon span:last-child { font-size: 0.75rem; line-height: 1.18; text-align: center; max-width: 80px; padding: 2px 5px; text-shadow: 1px 1px 0 rgba(0,0,0,0.95); overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; background: rgba(4, 15, 37, 0.46); border-radius: 8px; } .desktop-icon.selected { background: rgba(10, 36, 106, 0.65); border-color: rgba(255,255,255,0.4); } .desktop-icon.guided-target, .soft-btn.guided-target { border-color: rgba(89, 208, 255, 0.75) !important; box-shadow: 0 0 0 2px rgba(89, 208, 255, 0.18), 0 0 18px rgba(89, 208, 255, 0.28); animation: guidedPulse 1.6s ease-in-out infinite; } /* Only .soft-btn needs a containing block for the ::after badge. Desktop icons are already position:absolute and grid-placed, so setting them to relative re-anchored them to their flow position — the guided icon dropped ~82px and landed on top of its neighbour. */ .soft-btn.guided-target { position: relative; } .desktop-icon.guided-target::after { content: attr(data-guide-label); position: absolute; top: -10px; right: -10px; padding: 3px 7px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #06111f; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); } @keyframes guidedPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .desktop-icon.drop-target { background: rgba(18, 82, 178, 0.4); border-color: rgba(255,255,255,0.5); } .desktop-icon.dragging { background: rgba(10, 36, 106, 0.45); border-color: rgba(255,255,255,0.45); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); transition: none; } .desktop-icon.user-item .icon-emoji, .desktop-icon.app-shortcut .icon-emoji { filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4)); } .selection-marquee { position: absolute; z-index: 3; border: 1px dashed rgba(255,255,255,0.9); background: rgba(10, 36, 106, 0.22); pointer-events: none; } .selection-marquee.hidden { display: none; } .window-area { position: absolute; inset: 0; z-index: 5; pointer-events: none; height: 100%; } .window { pointer-events: auto; } .window { position: absolute; display: none; min-width: 320px; min-height: 220px; max-width: min(92vw, 980px); max-height: calc(100% - 8px); border: 1px solid var(--edge-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); color: var(--text); box-shadow: var(--window-shadow); } .window[data-maximized="true"] { inset: 0; width: 100% !important; height: 100% !important; max-width: none; max-height: none; min-width: 0; min-height: 0; border-radius: 0; } .window.visible { display: flex; flex-direction: column; } /* Titelbjælken bar hele vinduets identitet i XP-blå gradient. Nu er den mørk og flad, og fokus markeres i stedet med en cyan streg langs overkanten — noget spillet slet ikke havde før: alle vinduer så lige aktive ud. */ .title-bar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 5px 6px 5px 8px; background: var(--title-idle); color: var(--text-dim); cursor: move; user-select: none; border-bottom: 1px solid var(--edge); } .title-bar::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: transparent; } .window.is-active .title-bar { background: var(--title-active); color: var(--text); } .window.is-active .title-bar::before { background: linear-gradient(90deg, var(--accent), var(--accent-2) 70%, transparent); } .window.is-active { border-color: var(--edge-accent); box-shadow: var(--window-shadow), var(--glow); } .title-left { display: flex; align-items: center; gap: 8px; min-width: 0; } /* Var en 95'er-bevel-firkant. Nu en lille statusdiode der lyser når vinduet har fokus. */ .title-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #33465f; box-shadow: none; transition: background 0.16s ease, box-shadow 0.16s ease; } .window.is-active .title-dot { background: var(--accent); box-shadow: 0 0 8px rgba(89, 208, 255, 0.85); } .window-title { font-family: var(--mono); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none; } .menu-strip { display: flex; gap: 2px; padding: 3px 6px; font-size: 0.76rem; color: var(--text-dim); background: var(--chrome-solid); border-bottom: 1px solid var(--edge); } .menu-strip span { cursor: pointer; padding: 2px 7px; border-radius: var(--radius); } .menu-strip span:hover, .menu-strip span.active { background: rgba(89, 208, 255, 0.16); color: var(--text); } .menu-popup { position: fixed; min-width: 186px; padding: 4px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--edge-strong); border-radius: var(--radius); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); z-index: 14000; } .menu-popup-item { display: block; width: 100%; padding: 6px 9px; border: none; border-radius: 2px; background: transparent; color: inherit; text-align: left; cursor: pointer; } .menu-popup-item:hover { background: rgba(89, 208, 255, 0.16); color: var(--text); } .menu-popup-separator { height: 1px; margin: 4px 2px; background: var(--edge); } .title-actions { display: flex; gap: 2px; } .window-btn { width: 26px; height: 20px; padding: 0; border: 1px solid transparent; border-radius: 2px; cursor: pointer; background: transparent; color: var(--text-dim); font-size: 0.7rem; line-height: 1; transition: background 0.14s ease, color 0.14s ease; } .window-btn:hover { background: rgba(122, 176, 226, 0.16); color: var(--text); } .window-btn.close-btn:hover { background: var(--danger); color: #1a0308; } .window-content { flex: 1; padding: 12px; color: var(--text); background: var(--surface); overflow: auto; } .app-window-frame { padding: 0; overflow: hidden; } .embedded-app { width: 100%; height: 100%; border: 0; display: block; background: #fff; } .hero-panel { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; background: transparent; } .hero-panel h2, .section-head h3 { margin: 0 0 6px; color: var(--text); } .hero-panel p, .small-label { margin: 0; color: var(--text-dim); } /* Statusfelter er maskinaflæsninger, ikke etiketter: firkantede, mono, versaler. 999px-pillerne hørte til et andet formsprog. */ .status-pill { padding: 5px 10px; border-radius: var(--radius); font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--edge-strong); background: var(--surface-sunken); color: var(--text-dim); } .status-pill.online { background: rgba(70, 220, 160, 0.12); color: #5fe0ad; border-color: rgba(70, 220, 160, 0.4); } /* auto-fit + minmax(_, 1fr): faste 1fr-spor har auto som minimum, så et langt kort som "Baggrundsservice" skubbede gitteret bredere end vinduet og blev klippet. Nu ombrydes der til to spor i smalle vinduer i stedet. */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 14px; } /* Kortene var beige 95'er-bevels. Nu mørke flader med én hårstreg og et cyan mærke i venstre kant — aflæsninger frem for knapper. */ .stat-card { position: relative; padding: 9px 10px 9px 12px; border-radius: var(--radius); background: var(--surface-raised); border: 1px solid var(--edge); overflow: hidden; } .stat-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(180deg, var(--accent), transparent); opacity: 0.7; } .stat-card strong, .stat-card span { display: block; } .stat-card strong { color: var(--text-dim); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 500; margin-bottom: 5px; } .stat-card span { font-family: var(--mono); font-size: 1.15rem; font-weight: 600; color: var(--text); } .mission-dock, .log-panel { padding: 11px; border-radius: var(--radius); background: var(--surface-raised); border: 1px solid var(--edge); } .mission-dock { margin-bottom: 14px; } .mission-dock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; } .active-lead-panel { margin-bottom: 14px; } .lead-kicker { display: inline-block; margin-bottom: 8px; padding: 3px 8px; border-radius: var(--radius); background: rgba(89, 208, 255, 0.12); border: 1px solid var(--edge); color: var(--accent); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; } .lead-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .milestone-toast-container { position: fixed; top: 18px; right: 18px; z-index: 4000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .milestone-toast { min-width: 220px; max-width: 320px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--edge-accent); background: var(--surface-raised); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), var(--glow); color: var(--text); } .milestone-toast strong { display: block; margin-bottom: 4px; } .milestone-toast.warning { border-color: rgba(255, 209, 102, 0.5); background: rgba(46, 36, 14, 0.96); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 209, 102, 0.22); } .breakthrough-stats { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .breakthrough-meta { color: var(--text-dim); font-family: var(--mono); font-size: 0.76rem; font-weight: 500; } .breakthrough-meter { flex: 1 1 180px; min-width: 140px; height: 6px; border-radius: 2px; background: var(--surface-sunken); border: 1px solid var(--edge); overflow: hidden; } .breakthrough-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px rgba(89, 208, 255, 0.5); } .breakthrough-note { margin-top: 8px; } .section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; } /* Uden min-width: 0 nægter den forklarende tekst til højre at krympe, og halen ("Det vigtige ligger i Browser...") blev skåret af vinduskanten. */ .section-head > * { min-width: 0; } .soft-btn { border: 1px solid var(--edge-strong); border-radius: var(--radius); padding: 6px 12px; background: var(--surface-raised); color: var(--text); cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease; } .soft-btn:hover { background: var(--surface-hover); border-color: var(--edge-accent); box-shadow: var(--glow); } .soft-btn:active { background: var(--surface-sunken); } .danger-btn { border-color: rgba(255, 93, 115, 0.4); background: rgba(255, 93, 115, 0.1); color: #ff97a4; } .danger-btn:hover { background: rgba(255, 93, 115, 0.2); border-color: rgba(255, 93, 115, 0.7); box-shadow: 0 0 18px rgba(255, 93, 115, 0.25); } .soft-btn:disabled { opacity: 0.4; cursor: not-allowed; } .soft-btn:disabled:hover { background: var(--surface-raised); border-color: var(--edge-strong); box-shadow: none; } /* Systemloggen er maskinens egen stemme — mono, tæt, med cyan mærker i stedet for punkttegn. */ .log-list { margin: 0; padding-left: 0; list-style: none; font-family: var(--mono); font-size: 0.76rem; color: var(--text-dim); } .log-list li { position: relative; margin-bottom: 5px; padding-left: 14px; line-height: 1.45; } .log-list li::before { content: '›'; position: absolute; left: 2px; color: var(--accent); opacity: 0.7; } .log-list .warning { color: var(--warning); font-weight: 600; } .log-list .warning::before { content: '!'; color: var(--warning); opacity: 1; } .notepad { width: 100%; min-height: 320px; resize: vertical; padding: 14px; border-radius: var(--radius); border: 1px solid var(--edge-strong); background: var(--surface-sunken); color: var(--text); font-family: var(--mono); font-size: 0.85rem; line-height: 1.55; } .notepad:focus { outline: none; border-color: var(--edge-accent); box-shadow: var(--glow); } /* Browserens KROM er en del af operativsystemet og bliver mørkt. Selve siderne indeni forbliver lyse — et mørkt browservindue der viser almindelige websider er præcis hvad man forventer, og kontrasten holder "nettet" adskilt fra "systemet". */ .browser-window-content { display: flex; flex-direction: column; gap: 0; padding: 0; background: var(--surface-sunken); } .browser-chrome { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 0; background: var(--chrome-solid); border-bottom: 1px solid var(--edge); } .browser-tab-strip { display: flex; align-items: flex-end; gap: 4px; } .browser-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--edge); border-bottom: none; background: var(--surface-raised); color: var(--text-dim); font-size: 0.82rem; cursor: pointer; } .browser-tab.active { background: var(--surface); border-color: var(--edge-strong); color: var(--text); box-shadow: inset 0 2px 0 var(--accent); font-weight: 600; } .browser-tab.ghost { padding: 0; width: 38px; justify-content: center; } .browser-tab-icon, .browser-tab-close { opacity: 0.75; } .browser-toolbar { display: flex; gap: 8px; align-items: center; padding-bottom: 10px; } .browser-nav-group, .browser-toolbar-actions { display: flex; gap: 6px; align-items: center; } .browser-mini-btn { min-width: 38px; padding: 8px 0; } .browser-go-btn { min-width: 54px; } .browser-address-shell { flex: 1; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius); border: 1px solid var(--edge-strong); background: var(--surface-sunken); box-shadow: none; } .browser-address-shell:focus-within { border-color: var(--edge-accent); box-shadow: var(--glow); } .browser-security { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: rgba(255, 209, 102, 0.16); font-size: 0.85rem; } .browser-address { flex: 1; margin-top: 0; padding: 0; border: none; background: transparent; box-shadow: none; color: var(--text); font-family: var(--mono); font-size: 0.82rem; } .browser-address:focus { outline: none; box-shadow: none; } .bookmark-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 7px 8px; background: var(--chrome-solid); border-bottom: 1px solid var(--edge); } .browser-status-pill { margin-left: auto; padding: 4px 9px; border-radius: var(--radius); border: 1px solid var(--edge); background: var(--surface-sunken); color: var(--text-dim); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; font-weight: 500; } /* Bogmærkelinjen hører til browserens krom og er mørk. De fem knapper nedenfor bliver derimod tegnet INDE i websiderne af app.js, så de forbliver lyse — ellers ville mørke knapper sidde på en hvid side. */ .bookmark-link { border: 1px solid transparent; border-radius: var(--radius); padding: 5px 10px; background: transparent; color: var(--text-dim); font-size: 0.8rem; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .bookmark-link:hover { background: rgba(89, 208, 255, 0.14); border-color: var(--edge); color: var(--text); } .browser-link-btn, .browser-download-btn, .browser-case-btn, .browser-decision-btn, .browser-open-forum-btn { border: 1px solid var(--rule); border-radius: 3px; padding: 7px 11px; background: var(--paper); color: var(--ink); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .browser-link-btn:hover, .browser-download-btn:hover, .browser-case-btn:hover, .browser-decision-btn:hover, .browser-open-forum-btn:hover { background: var(--paper-2); border-color: var(--ink-soft); } /* Websiderne er ikke en del af operativsystemet, og de må ikke arve vinduets lyse tekstfarve — så stod sort-på-sort. Her nulstilles konteksten: fra dette element og ned er vi "på nettet", med lys side og mørk tekst. */ /* Siden skal fylde browserens visningsflade som i en rigtig browser. Med kun min-height stoppede papiret hvor teksten slap, og resten af vinduet stod som et sort hul under siden. */ .browser-page { flex: 1 1 auto; min-height: 0; padding: 14px; /* Underlaget bag dokumentet foelger tonen. Ellers laa et cremefarvet advarselsdokument paa et koeligt blaat skrivebord — to slags papir i samme rude. */ background-color: var(--desk); color: var(--ink); overflow: auto; } .browser-page h1, .browser-page h2, .browser-page h3, .browser-page h4, .browser-page h5, .browser-page strong { color: var(--ink); } /* ============================================================ SIDETONER data-tone findes allerede på hver side (bright/neutral/mystery/ warning) og bruges af 67 sider, men alle fire var stort set den samme hvide gradient — forskellen kunne ikke ses. Tonen er fortælleværktøj: spilleren skal kunne mærke på en side, om den er officiel, ligegyldig, forkert eller alarmerende, før teksten er læst. Papiret forbliver lyst; det er farvetemperaturen og kanten der bærer betydningen. --paper / --ink / --rule sættes pr. tone og bruges af sidens indre dele, så en ny tone kun kræver ét sted at rette. ============================================================ */ .browser-page { --paper: #ffffff; --paper-2: #f4f7fd; --ink: #12233b; --ink-soft: #4a6180; --rule: rgba(28, 53, 91, 0.16); --tone-mark: #3b6cc3; --desk: #dbe4f2; } .browser-site-shell { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; /* Skarpere hjørner end de 18px: det her er dokumenter på et lukket institutionsnet, ikke kort i en app. */ border-radius: 4px; border: 1px solid var(--rule); background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); color: var(--ink); box-shadow: 0 10px 24px rgba(12, 26, 48, 0.12); overflow: hidden; } /* Farvestriben langs overkanten er sidens hurtigste kendetegn. */ .browser-site-shell::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tone-mark); } /* Officiel og opdateret: rent hvidt papir, roligt blåt. */ .browser-page[data-tone="bright"] { --paper: #ffffff; --paper-2: #f2f7ff; --tone-mark: linear-gradient(90deg, #2f6fd0, #63a4f0); --desk: #d5e2f5; } /* Almindelig drift: gulnet kontorpapir, ingen hastværk. */ .browser-page[data-tone="neutral"] { --paper: #fbfaf6; --paper-2: #f1efe6; --ink: #23272b; --ink-soft: #5c6067; --rule: rgba(60, 56, 44, 0.2); --tone-mark: #9a927c; --desk: #ddd9cc; } /* Noget passer ikke: koldt, blågrønt papir og en violet stribe — samme farve som "kilde" i Forbindelser. */ .browser-page[data-tone="mystery"] { --paper: #eef4f4; --paper-2: #e2ebee; --ink: #17303a; --ink-soft: #4a6a76; --rule: rgba(30, 70, 85, 0.22); --tone-mark: linear-gradient(90deg, #6f63d6, #4e8fa8); --desk: #ccdadd; } /* Alarm: pergament med rød-orange stribe og advarselsskravering. */ .browser-page[data-tone="warning"] { --paper: #fdf6e8; --paper-2: #f8ead0; --ink: #3a2a12; --ink-soft: #6d5730; --rule: rgba(120, 80, 20, 0.28); --tone-mark: repeating-linear-gradient( 45deg, #c2410c 0 8px, #f59e0b 8px 16px ); --desk: #e8d7b4; } .browser-site-topbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; } .browser-site-brand { display: flex; align-items: center; gap: 10px; } .browser-site-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--paper-2); border: 1px solid var(--rule); font-size: 1.2rem; } .browser-kicker { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); font-weight: 700; } .browser-site-host { font-family: var(--mono); font-size: 0.9rem; font-weight: 600; color: var(--ink); } .browser-site-chips { display: flex; gap: 6px; flex-wrap: wrap; } .browser-chip { padding: 4px 9px; border-radius: 3px; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-soft); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; } .browser-chip.subtle { background: transparent; color: var(--ink-soft); opacity: 0.8; } .browser-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 14px; padding: 16px; border-radius: 3px; border: 1px solid var(--rule); background: var(--paper); } .browser-hero h3, .browser-section h4 { margin: 0 0 8px; } .browser-subtitle { font-weight: 600; color: var(--ink); } .browser-hero p { color: var(--ink-soft); margin: 0 0 10px; } .browser-hero-aside { display: grid; gap: 8px; } .browser-stat-card { padding: 9px 12px; border-radius: 3px; background: var(--paper-2); border: 1px solid var(--rule); } .browser-stat-card span { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; } .browser-stat-card strong { color: var(--ink); word-break: break-word; } .browser-section { padding: 14px; border-radius: 3px; border: 1px solid var(--rule); background: var(--paper); } .browser-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .browser-section-head span { color: var(--ink-soft); font-size: 0.78rem; font-weight: 500; } .browser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; } .browser-card { padding: 13px; border-radius: 3px; border: 1px solid var(--rule); background: var(--paper-2); box-shadow: none; } .browser-card strong { display: block; color: var(--ink); margin-bottom: 6px; } .browser-card p { color: var(--ink-soft); margin: 0 0 10px; } .browser-card small, .browser-result-url { display: block; margin-bottom: 8px; color: var(--ink-soft); font-family: var(--mono); font-size: 0.72rem; } .browser-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .browser-search-results { display: grid; gap: 10px; } .browser-search-item { padding: 13px; border-radius: 3px; border: 1px solid var(--rule); background: var(--paper-2); box-shadow: none; } .browser-tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .browser-tag { padding: 3px 8px; border-radius: 3px; border: 1px solid var(--rule); background: transparent; color: var(--ink-soft); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; } .browser-footer { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px 0; border-top: 1px solid var(--rule); color: var(--ink-soft); font-family: var(--mono); font-size: 0.72rem; } .browser-list { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); } @media (max-width: 760px) { .browser-toolbar { flex-wrap: wrap; } .browser-toolbar-actions { width: 100%; justify-content: flex-end; } .browser-status-pill { margin-left: 0; } .browser-hero { grid-template-columns: 1fr; } } .calc-display { padding: 12px; margin-bottom: 12px; border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--edge-strong); color: var(--accent); text-align: right; font-family: var(--mono); font-size: 1.8rem; font-weight: 600; text-shadow: 0 0 14px rgba(89, 208, 255, 0.35); } .calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .calc-btn { padding: 12px; border-radius: var(--radius); border: 1px solid var(--edge); background: var(--surface-raised); color: var(--text); font-family: var(--mono); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .calc-btn:hover { background: var(--surface-hover); border-color: var(--edge-strong); } .calc-btn.zero { grid-column: span 3; } .calc-btn.equals { background: rgba(89, 208, 255, 0.18); border-color: var(--edge-accent); color: var(--text); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .calendar-cell { padding: 8px 4px; border-radius: 2px; background: var(--surface-raised); border: 1px solid var(--edge); text-align: center; font-family: var(--mono); font-size: 0.8rem; color: var(--text); } .calendar-cell.head { font-weight: 600; color: var(--text-dim); background: var(--surface-sunken); } .calendar-cell.today { background: rgba(89, 208, 255, 0.2); border-color: var(--edge-accent); font-weight: 600; } .paint-toolbar { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-bottom: 10px; } .paint-tool-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .paint-tool-btn.active { background: rgba(89, 208, 255, 0.2); border-color: var(--edge-accent); color: var(--text); } .paint-inline-label { display: inline-flex; align-items: center; gap: 6px; } .paint-inline-label input[type="color"] { width: 38px; height: 28px; padding: 0; border: 1px solid var(--line); background: transparent; } .paint-inline-label input[type="range"] { width: 120px; } .palette { display: flex; gap: 8px; } .color-swatch { width: 22px; height: 22px; border-radius: 2px; border: 1px solid var(--edge-strong); cursor: pointer; } .color-swatch.active { border-color: var(--accent); box-shadow: var(--glow); } .paint-status-bar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 10px; border-radius: var(--radius); background: var(--surface-raised); border: 1px solid var(--edge); font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim); } #paint-canvas { width: 100%; max-width: 100%; border-radius: 14px; background: linear-gradient(45deg, #f3f5f8 25%, transparent 25%), linear-gradient(-45deg, #f3f5f8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f3f5f8 75%), linear-gradient(-45deg, transparent 75%, #f3f5f8 75%), #ffffff; background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); touch-action: none; cursor: crosshair; } .memory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .memory-card { aspect-ratio: 1; border: 1px solid rgba(85, 131, 221, 0.35); border-radius: var(--radius); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.24), transparent 28%), linear-gradient(135deg, rgba(36, 82, 173, 0.96), rgba(97, 72, 191, 0.96)); color: transparent; font-size: 1.55rem; font-weight: 800; cursor: pointer; box-shadow: 0 10px 18px rgba(20, 40, 80, 0.16); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .memory-card:hover { transform: translateY(-1px) scale(1.02); } .memory-card.revealed, .memory-card.matched { color: var(--text); background: var(--surface-raised); border-color: var(--edge-accent); } .memory-card.matched { background: rgba(70, 220, 160, 0.16); border-color: rgba(70, 220, 160, 0.5); box-shadow: 0 0 0 1px rgba(70, 220, 160, 0.3), 0 0 18px rgba(70, 220, 160, 0.25); } .signal-stats { display: flex; gap: 10px; margin-bottom: 8px; color: var(--muted); flex-wrap: wrap; } .signal-stats span { padding: 5px 10px; border-radius: var(--radius); background: var(--surface-raised); border: 1px solid var(--edge); color: var(--text); font-family: var(--mono); font-size: 0.78rem; } .signal-substats { margin-bottom: 10px; } .signal-select { min-width: 96px; padding: 7px 10px; } .signal-mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .signal-board { position: relative; height: 260px; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(circle at center, rgba(89, 208, 255, 0.10), transparent 45%), linear-gradient(rgba(123,216,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(123,216,255,0.06) 1px, transparent 1px), linear-gradient(180deg, rgba(5, 10, 19, 0.72), rgba(10, 18, 34, 0.92)); background-size: auto, 28px 28px, 28px 28px, auto; overflow: hidden; } .signal-sweep { position: absolute; left: 50%; top: 50%; width: 52%; height: 2px; transform-origin: left center; background: linear-gradient(90deg, rgba(89, 208, 255, 0.8), rgba(89, 208, 255, 0)); animation: signalSweep 4.5s linear infinite; pointer-events: none; } @keyframes signalSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .signal-target, .signal-dot { position: absolute; width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer; } .signal-dot { box-shadow: 0 0 18px rgba(89, 208, 255, 0.9); background: radial-gradient(circle at 30% 30%, #fff, #59d0ff 40%, #3b6ef0 80%); } .signal-dot.hostile { background: radial-gradient(circle at 30% 30%, #fff, #ff7979 40%, #b22b2b 80%); box-shadow: 0 0 18px rgba(255, 99, 99, 0.85); } .signal-dot.bonus { background: radial-gradient(circle at 30% 30%, #fff, #b5ffb6 40%, #27b65e 80%); box-shadow: 0 0 18px rgba(96, 255, 144, 0.9); } .signal-dot.boss { width: 58px; height: 58px; border-radius: 16px; background: radial-gradient(circle at 30% 30%, #fff, #d6a1ff 35%, #6f33c7 82%); box-shadow: 0 0 22px rgba(172, 102, 255, 0.92); } .signal-log-panel { margin-top: 10px; } .signal-event-list { display: grid; gap: 6px; color: var(--text-dim); max-height: 110px; overflow: auto; font-size: 0.92rem; } .signal-event-list > div { padding: 7px 9px; border-radius: 9px; background: var(--surface-raised); border: 1px solid rgba(28, 53, 91, 0.1); } .taskbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1400; height: 56px; display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--chrome); border-top: 1px solid var(--edge-strong); box-shadow: 0 -1px 0 rgba(89, 208, 255, 0.14), 0 -14px 30px rgba(0, 0, 0, 0.4); } .start-button { display: flex; align-items: center; gap: 8px; min-width: 92px; padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--edge-accent); background: rgba(89, 208, 255, 0.12); color: var(--text); font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.14s ease, box-shadow 0.14s ease; } .start-button:hover { background: rgba(89, 208, 255, 0.2); box-shadow: var(--glow); } .start-button:active { background: rgba(89, 208, 255, 0.28); } .start-badge { font-size: 0.9rem; color: var(--accent); } .quick-launch { display: flex; gap: 4px; padding-right: 8px; margin-right: 2px; border-right: 1px solid var(--edge); } .quick-btn { width: 28px; height: 28px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease; } .quick-btn:hover { background: rgba(122, 176, 226, 0.14); border-color: var(--edge); } .running-apps { display: flex; gap: 6px; flex: 1; min-width: 0; } /* Åbne programmer markeres med en cyan streg under knappen i stedet for en lysere bevel — det var svært at se hvilket vindue der var i front. */ .task-item { position: relative; padding: 6px 12px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--radius); border: 1px solid var(--edge); background: var(--surface-raised); color: var(--text-dim); font-size: 0.8rem; cursor: pointer; transition: background 0.14s ease, color 0.14s ease; } .task-item:hover { background: var(--surface-hover); color: var(--text); } .task-item.active { background: var(--surface-hover); border-color: var(--edge-strong); color: var(--text); } .task-item.active::after { content: ''; position: absolute; inset: auto 6px 0 6px; height: 2px; background: var(--accent); box-shadow: 0 0 8px rgba(89, 208, 255, 0.7); } .tray { display: flex; gap: 8px; align-items: center; color: var(--text-dim); font-family: var(--mono); font-size: 0.74rem; padding: 5px 8px; border: 1px solid var(--edge); background: var(--surface-sunken); border-radius: var(--radius); } .tray-icon { font-size: 0.8rem; opacity: 0.75; } .clock-box { min-width: 48px; text-align: center; padding-left: 8px; color: var(--text); border-left: 1px solid var(--edge); } .start-menu { position: absolute; left: 6px; bottom: 58px; z-index: 20000; width: 286px; display: flex; overflow: hidden; border: 1px solid var(--edge-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), var(--glow); } .start-menu.hidden { display: none; } .start-menu-side { width: 30px; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, var(--accent-2) 0%, #123a5e 55%, #0a1626 100%); } .start-menu-side span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 0; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; color: #eaf4ff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .start-menu-main { flex: 1; padding: 5px; background: var(--surface); } .menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; text-align: left; color: var(--text-dim); background: transparent; border: none; border-radius: 2px; cursor: pointer; /* font/text-decoration: gør at et .menu-item (Tilbage til Røvbananen) ser præcis ud som knapperne. */ font: inherit; font-size: 0.85rem; text-decoration: none; box-sizing: border-box; transition: background 0.12s ease, color 0.12s ease; } .start-menu .menu-item { color: var(--text-dim); } .menu-item:hover, .start-menu .menu-item:hover { background: rgba(89, 208, 255, 0.16); color: var(--text); } .menu-icon { width: 18px; text-align: center; flex: 0 0 18px; } .menu-separator { height: 1px; margin: 5px 4px; background: var(--edge); } .shutdown-item { font-weight: 700; } .context-menu { position: fixed; width: 220px; padding: 4px; border-radius: var(--radius); border: 1px solid var(--edge-strong); background: var(--surface-raised); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); z-index: 10000; } .context-menu.hidden { display: none; } .system-dialog { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(7, 12, 22, 0.45); z-index: 12000; } .system-dialog.hidden { display: none; } .dialog-box { width: min(360px, 92vw); padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--edge-strong); background: var(--surface); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), var(--glow); color: var(--text); } .dialog-box h3 { margin: 0 0 8px; } .dialog-input { width: 100%; margin-top: 10px; padding: 9px 10px; border-radius: var(--radius); border: 1px solid var(--edge-strong); background: var(--surface-sunken); color: var(--text); font-family: var(--mono); } .dialog-input:focus { outline: none; border-color: var(--edge-accent); box-shadow: var(--glow); } .dialog-input::placeholder { color: var(--text-dim); opacity: 0.7; } .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .menu-separator { height: 1px; margin: 8px 0; background: rgba(255,255,255,0.1); } .cmd-window-content { display: flex; flex-direction: column; gap: 10px; background: #111; color: #90ff90; } .cmd-output { flex: 1; min-height: 240px; padding: 10px; overflow: auto; background: #04070d; border: 1px solid var(--edge-strong); border-radius: var(--radius); font-family: var(--mono); font-size: 0.85rem; white-space: pre-wrap; } .cmd-input-row { display: flex; align-items: center; gap: 8px; } .cmd-prompt { font-family: var(--mono); color: var(--accent); background: var(--surface-sunken); padding: 7px 8px; border: 1px solid var(--edge); border-radius: var(--radius); white-space: nowrap; } .cmd-input { flex: 1; padding: 8px 10px; border: 1px solid var(--edge-strong); border-radius: var(--radius); background: var(--surface-sunken); color: var(--text); font-family: var(--mono); } .cmd-input:focus { outline: none; border-color: var(--edge-accent); box-shadow: var(--glow); } .explorer-window-content { display: flex; flex-direction: column; gap: 10px; } .address-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .address-label { font-size: 0.74rem; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .address-bar { flex: 1; padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--edge-strong); background: var(--surface-sunken); color: var(--text); font-family: var(--mono); font-size: 0.82rem; } .explorer-banner { margin-bottom: 12px; padding: 12px; } .explorer-banner p { margin: 6px 0 10px; color: var(--text-dim); } .explorer-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; } .explorer-layout { display: grid; grid-template-columns: 180px 1fr; gap: 12px; min-height: 280px; } .explorer-sidebar { padding: 6px; border-radius: var(--radius); border: 1px solid var(--edge); background: var(--surface-sunken); display: flex; flex-direction: column; gap: 8px; } .nav-item { border: 1px solid transparent; border-radius: 2px; padding: 7px 9px; background: transparent; color: var(--text-dim); font-size: 0.84rem; text-align: left; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .nav-item:hover { background: rgba(122, 176, 226, 0.12); color: var(--text); } .nav-item.active { background: rgba(89, 208, 255, 0.16); border-color: var(--edge); color: var(--text); } .explorer-main { min-width: 0; } .explorer-head { align-items: center; } .explorer-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .explorer-body { min-height: 220px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--edge); background: var(--surface-sunken); } .drive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .drive-card, .info-card, .settings-card { border: 1px solid var(--edge); border-radius: var(--radius); background: var(--surface-raised); } .drive-card { padding: 12px; text-align: left; color: var(--text); cursor: pointer; } .drive-card strong, .info-card strong { display: block; margin-bottom: 6px; } .drive-card span, .info-card span { color: var(--text-dim); } .meter { margin-top: 10px; height: 6px; border-radius: 2px; background: var(--surface-sunken); border: 1px solid var(--edge); overflow: hidden; } .meter span { display: block; height: 100%; background: linear-gradient(90deg, #59d0ff, #3469bd); } .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .info-card { padding: 12px; } .settings-card { padding: 12px; display: flex; flex-direction: column; gap: 12px; } .option-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(28, 53, 91, 0.08); } .option-row:last-child { border-bottom: none; padding-bottom: 0; } .theme-options { display: flex; gap: 8px; flex-wrap: wrap; } .theme-chip { border: 1px solid var(--edge); border-radius: var(--radius); padding: 6px 12px; cursor: pointer; background: var(--surface-raised); color: var(--text-dim); font-size: 0.82rem; } .theme-chip:hover { background: var(--surface-hover); color: var(--text); } .theme-chip.active { background: rgba(89, 208, 255, 0.18); border-color: var(--edge-accent); color: var(--text); } .control-info-grid { margin-bottom: 12px; } .control-list { display: grid; gap: 8px; } .control-list-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 0.78rem; font-family: monospace; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); color: var(--text-muted); } .control-list-item.flag-on { background: rgba(62, 200, 130, 0.08); border-color: rgba(62, 200, 130, 0.2); color: #7adcaa; } .control-list-item.flag-off { opacity: 0.55; } .control-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius); background: var(--surface-raised); border: 1px solid var(--edge); color: var(--text); } .control-item.done { background: rgba(70, 220, 160, 0.12); border-color: rgba(70, 220, 160, 0.35); } .control-item-icon { font-size: 1rem; } .explorer-list { margin: 12px 0 0; padding-left: 18px; color: var(--text-dim); } .explorer-list li { margin-bottom: 8px; } .explorer-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.92rem; } .explorer-table th, .explorer-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--edge); } .explorer-table th { color: var(--text-dim); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .explorer-row { cursor: pointer; } .explorer-row:hover { background: rgba(122, 176, 226, 0.1); } .explorer-row.selected-row { background: rgba(89, 208, 255, 0.16); } .resize-handle { position: absolute; z-index: 40; } .resize-handle.n, .resize-handle.s { left: 10px; right: 10px; height: 8px; } .resize-handle.n { top: -2px; cursor: ns-resize; } .resize-handle.s { bottom: -2px; cursor: ns-resize; } .resize-handle.e, .resize-handle.w { top: 10px; bottom: 10px; width: 8px; } .resize-handle.e { right: -2px; cursor: ew-resize; } .resize-handle.w { left: -2px; cursor: ew-resize; } .resize-handle.ne, .resize-handle.nw, .resize-handle.se, .resize-handle.sw { width: 12px; height: 12px; } .resize-handle.ne { top: -2px; right: -2px; cursor: nesw-resize; } .resize-handle.nw { top: -2px; left: -2px; cursor: nwse-resize; } .resize-handle.se { bottom: -2px; right: -2px; cursor: nwse-resize; } .resize-handle.sw { bottom: -2px; left: -2px; cursor: nesw-resize; } @media (max-width: 900px) { .browser-toolbar, .drive-grid, .info-grid, .explorer-layout { grid-template-columns: 1fr; } .desktop { grid-template-columns: 1fr; } .desktop-icons { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .window { /* Limit width so windows don't overflow horizontally on tablets */ max-width: calc(100vw - 16px) !important; /* Limit height so windows never overflow below the taskbar */ max-height: calc(100vh - 64px) !important; } .stats-grid { grid-template-columns: 1fr; } } /* On very narrow phones windows are auto-maximised by JS; just ensure they look clean while the transition happens. */ @media (max-width: 600px) { .window:not([data-maximized="true"]) { left: 8px !important; top: 48px !important; width: calc(100vw - 16px) !important; max-height: calc(100vh - 64px) !important; } .title-bar { /* Bigger tap target on touch */ padding: 8px 6px; } .window-btn { width: 20px; height: 20px; } }