/* ===================================================================== POP-UP PANIC - stylesheet --------------------------------------------------------------------- Everything renders as DOM. No canvas. Themes are pure custom-property swaps on , so a theme change is one attribute write and costs no layout beyond a repaint. ===================================================================== */ /* --------------------------------------------------------------------- 1. Reset + global input hardening ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; /* the desktop never scrolls */ overscroll-behavior: none; /* kills pull-to-refresh mid-panic */ } body { /* touch-action on the root is what actually disables iOS/Android double-tap-to-zoom. Without it every fast double click on an X is eaten by the browser's gesture detector. */ touch-action: manipulation; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; font-family: var(--font); font-size: 13px; color: var(--text); background: #000; cursor: url('../assets/kenney/ui/cursor_arrow.png') 4 3, default; } /* Text inputs are the one place a caret and selection must work. */ input, textarea { font-family: var(--font); user-select: text; -webkit-user-select: text; touch-action: manipulation; } button { font-family: var(--font); font-size: inherit; cursor: url('../assets/kenney/ui/cursor_hand.png') 10 4, pointer; } img { max-width: 100%; -webkit-user-drag: none; user-select: none; } /* --------------------------------------------------------------------- 2. Theme tokens ------------------------------------------------------------------ */ :root { --font: Tahoma, Verdana, 'MS Sans Serif', Geneva, sans-serif; --mono: 'Lucida Console', 'Courier New', monospace; --taskbar-h: 40px; --radius: 0px; --spawn-ms: 120ms; } /* -- Windoze 95 (default, free) -- */ body[data-theme='win95'] { --wall-a: #148f8f; --wall-b: #0d6b6b; --wall-img: none; --chrome: #c3c3c3; --chrome-hi: #ffffff; --chrome-lo: #5a5a5a; --chrome-mid: #868686; --title-a: #000082; --title-b: #1084d0; --title-text: #ffffff; --text: #000000; --accent: #000082; --danger: #a80000; --good: #007a2f; --glow: rgba(16, 132, 208, .55); --radius: 0px; } /* -- Vaporwave 98 -- */ body[data-theme='vaporwave'] { --wall-a: #2b1055; --wall-b: #ff77c8; --wall-img: repeating-linear-gradient(transparent 0 38px, rgba(255,120,220,.35) 38px 40px), linear-gradient(#1b0b3a 0%, #52207a 42%, #ff7ad0 68%, #ffca7a 100%); --chrome: #f4d9ff; --chrome-hi: #ffffff; --chrome-lo: #7b3fa0; --chrome-mid: #b57fd6; --title-a: #6a1b9a; --title-b: #ff6fd8; --title-text: #fff6ff; --text: #2a0b45; --accent: #b026ff; --danger: #ff2d6f; --good: #00e0c6; --glow: rgba(255, 111, 216, .6); --radius: 4px; } /* -- Neon District -- */ body[data-theme='cyberpunk'] { --wall-a: #06060d; --wall-b: #12021f; --wall-img: repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,255,231,.10) 46px 47px), repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,0,122,.10) 46px 47px), radial-gradient(120% 90% at 50% 110%, #3a0060 0%, #06060d 62%); --chrome: #14121f; --chrome-hi: #4a4470; --chrome-lo: #000000; --chrome-mid: #2a2540; --title-a: #ff007a; --title-b: #7a00ff; --title-text: #f6f0ff; --text: #d8fff9; --accent: #00ffe7; --danger: #ff2f5e; --good: #00ffa3; --glow: rgba(0, 255, 231, .55); --radius: 2px; } /* -- Phosphor -- */ body[data-theme='matrix'] { --wall-a: #000000; --wall-b: #001a00; --wall-img: repeating-linear-gradient(0deg, rgba(0,255,70,.07) 0 1px, transparent 1px 3px), radial-gradient(110% 80% at 50% 0%, #00250c 0%, #000000 70%); --chrome: #04140a; --chrome-hi: #1f8f3f; --chrome-lo: #001c07; --chrome-mid: #0a3d19; --title-a: #00461a; --title-b: #00a83c; --title-text: #b6ffcb; --text: #4dff88; --accent: #00ff5a; --danger: #ff4444; --good: #00ff5a; --glow: rgba(0, 255, 90, .5); --radius: 0px; --font: 'Lucida Console', 'Courier New', monospace; } /* -- Terminal Blue -- */ body[data-theme='bsod'] { --wall-a: #0827a8; --wall-b: #041a6e; --wall-img: linear-gradient(160deg, #0d3ad6 0%, #0827a8 55%, #041a6e 100%); --chrome: #123ac4; --chrome-hi: #7ea2ff; --chrome-lo: #06165c; --chrome-mid: #2b57de; --title-a: #d8e2ff; --title-b: #9fb6ff; --title-text: #06165c; --text: #eaf0ff; --accent: #ffffff; --danger: #ffd23f; --good: #9fffb0; --glow: rgba(200, 220, 255, .5); --radius: 0px; --font: 'Lucida Console', 'Courier New', monospace; } /* --------------------------------------------------------------------- 3. Desktop shell ------------------------------------------------------------------ */ #desktop { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(160deg, var(--wall-a), var(--wall-b)); isolation: isolate; /* keeps window z-indexes local */ } #wallpaper { position: absolute; inset: 0; background-image: var(--wall-img); background-size: cover; background-position: center; pointer-events: none; z-index: 0; } /* Optional Higgsfield wallpaper layer. game.js sets --wall-photo when an image exists for the active theme; absent, this layer is invisible and the CSS wallpaper above carries the look on its own. */ #wallpaper-photo { position: absolute; inset: 0; background-image: var(--wall-photo, none); background-size: cover; background-position: center; opacity: var(--wall-photo-opacity, 0); pointer-events: none; z-index: 1; transition: opacity .4s ease; } /* Desktop icons - decorative, but they sell the illusion. */ #icons { position: absolute; top: 12px; left: 12px; display: grid; grid-template-columns: 74px; gap: 10px; z-index: 2; pointer-events: none; } .dicon { text-align: center; color: #fff; font-size: 11px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .8); line-height: 1.2; } .dicon .glyph { display: block; font-size: 26px; line-height: 1; margin-bottom: 4px; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .6)); } /* Layer the popups sit in. Explicit stacking context so the taskbar and overlays are never fighting a runaway window z-index. */ #windows { position: absolute; inset: 0 0 var(--taskbar-h) 0; z-index: 3; pointer-events: none; /* children re-enable it */ } #windows > * { pointer-events: auto; } /* --------------------------------------------------------------------- 4. Pop-up windows ------------------------------------------------------------------ */ .win { position: absolute; width: 300px; max-width: calc(100% - 12px); background: var(--chrome); color: var(--text); border-radius: var(--radius); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); box-shadow: 2px 2px 0 rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35); display: flex; flex-direction: column; /* left/top animate for dodging; transform animates for spawn/kill. */ transition: left .16s cubic-bezier(.22, 1, .36, 1), top .16s cubic-bezier(.22, 1, .36, 1); will-change: left, top, transform; animation: winPop var(--spawn-ms) cubic-bezier(.2, 1.5, .4, 1); } @keyframes winPop { from { transform: scale(.72); opacity: 0; } to { transform: scale(1); opacity: 1; } } .win.dying { animation: winDie .18s ease-in forwards; pointer-events: none; } @keyframes winDie { to { transform: scale(1.28) rotate(2deg); opacity: 0; filter: blur(2px); } } .win.nuked { animation: winNuke .34s ease-in forwards; pointer-events: none; } @keyframes winNuke { 30% { transform: scale(1.1); filter: brightness(3); } to { transform: scale(.1) rotate(-14deg); opacity: 0; } } /* -- title bar -- */ .win-bar { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; background: linear-gradient(90deg, var(--title-a), var(--title-b)); color: var(--title-text); font-weight: 700; font-size: 13px; cursor: url('../assets/kenney/ui/cursor_arrow.png') 4 3, default; } /* The Trojan-tier mutation: the X hops to the left-hand side. */ .win.swap .win-bar { flex-direction: row-reverse; padding: 4px 8px 4px 4px; } .win-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .win-btns { display: flex; gap: 4px; flex: 0 0 auto; } .win-btn { width: 26px; height: 23px; display: grid; place-items: center; padding: 0; font-size: 13px; font-weight: 700; line-height: 1; color: #000; background: var(--chrome); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); border-radius: var(--radius); transform-origin: center; transition: transform .12s ease, background .12s ease; } .win-btn:active { border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); } /* Worm-tier mutation. --xs is driven from JS on a timer so the target keeps getting smaller the longer the window is left alive. Clamped so it never becomes literally unhittable. */ .win-x { transform: scale(var(--xs, 1)); } .win-x:hover { background: var(--danger); color: #fff; } /* Decoy buttons. Look exactly like the real controls; are not. */ .win-body { padding: 14px 14px 8px; font-size: 13px; line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; } .win-icon { font-size: 30px; line-height: 1; flex: 0 0 auto; } .win-text { flex: 1 1 auto; min-width: 0; word-wrap: break-word; } .win-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding: 6px 10px 10px; } .decoy { min-width: 74px; padding: 5px 12px; color: var(--text); background: var(--chrome); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); border-radius: var(--radius); } .decoy:active { border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); } /* --------------------------------------------------------------------- Multi-hit shields --------------------------------------------------------------------- The close button's colour IS the hit counter. Three states, read at a glance, no extra text: red needs three clicks, amber two, default one. This replaced the old `sticky` mutation, where the only cue that a window had become closeable was a dashed outline nobody could parse mid-panic. ------------------------------------------------------------------ */ .win-x[data-hits='3'] { color: #fff; background: #c1121f; border-color: #ff8b93 #5c0007 #5c0007 #ff8b93; } .win-x[data-hits='2'] { color: #2a1500; background: #f0a500; border-color: #ffe08a #7a5200 #7a5200 #ffe08a; } .win-x[data-hits='3']:hover { background: #e01b28; } .win-x[data-hits='2']:hover { background: #ffc23d; } /* Shield break: a quick recoil on the window that took the hit. Local to the window rather than a screen shake, which at combo speed would fire several times a second and just make people queasy. */ .win.hit { animation: winHit .2s ease-out; } @keyframes winHit { 35% { transform: scale(1.045) translateY(-2px); filter: brightness(1.5); } } /* Heavy windows cost 2 RAM slots instead of 1. */ .win.heavy { border-color: var(--danger) var(--chrome-lo) var(--chrome-lo) var(--danger); box-shadow: 0 0 0 1px var(--danger), 2px 2px 0 rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35); } .ram-tag { flex: 0 0 auto; padding: 0 4px; margin-right: 2px; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--danger); border-radius: 2px; } /* Kill particles. Pooled per-burst and removed on animationend. */ .pip { position: absolute; width: 5px; height: 5px; background: var(--good); box-shadow: 0 0 5px var(--good); pointer-events: none; z-index: 54; animation: pipFly .5s ease-out forwards; } @keyframes pipFly { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } } /* Suppressed while the resize handler re-clamps every window, so the dodge transition does not turn a reflow into a mass slide. */ #windows.no-anim .win { transition: none !important; } /* -- boss (ransomware) -- */ .win.boss { width: min(420px, calc(100% - 24px)); border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger), 0 14px 40px rgba(0, 0, 0, .6); animation: winPop var(--spawn-ms) cubic-bezier(.2, 1.5, .4, 1), bossPulse 1.6s ease-in-out infinite .3s; } @keyframes bossPulse { 50% { box-shadow: 0 0 0 4px var(--danger), 0 14px 46px rgba(0, 0, 0, .7); } } .win.boss .win-bar { background: linear-gradient(90deg, var(--danger), #ff7a00); color: #fff; } .boss-timer { height: 6px; background: var(--chrome-mid); border: 1px solid var(--chrome-lo); margin: 0 10px 8px; overflow: hidden; } .boss-timer > i { display: block; height: 100%; width: 100%; background: var(--danger); transform-origin: left center; } .captcha-box { margin: 4px 0 8px; padding: 10px 8px; text-align: center; font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: .35em; text-indent: .35em; /* re-centres text that letter-spacing pushed left */ color: #1a1a1a; background: repeating-linear-gradient(28deg, rgba(0,0,0,.10) 0 2px, transparent 2px 7px), repeating-linear-gradient(-19deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px), #d8d8d8; border: 1px solid var(--chrome-lo); user-select: none; } .captcha-box span { display: inline-block; } .captcha-input { width: 100%; padding: 6px 8px; font-family: var(--mono); font-size: 16px; letter-spacing: .2em; text-transform: uppercase; color: #000; background: #fff; border: 2px solid; border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); } .captcha-input.wrong { animation: shake .3s; border-color: var(--danger); } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .seq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; padding: 4px 0 8px; } .seq-btn { padding: 12px 6px; font-size: 17px; font-weight: 700; color: var(--text); background: var(--chrome); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); transition: transform .12s ease, background .12s ease, opacity .12s ease; } .seq-btn.done { opacity: .35; background: var(--good); pointer-events: none; } .seq-btn.bad { background: var(--danger); color: #fff; } /* --------------------------------------------------------------------- 5. Taskbar / HUD ------------------------------------------------------------------ */ #taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); display: flex; align-items: center; gap: 8px; padding: 0 8px; background: var(--chrome); border-top: 2px solid var(--chrome-hi); z-index: 60; /* always above every pop-up */ font-size: 12px; } .tb-btn { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; font-weight: 700; color: var(--text); background: var(--chrome); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); border-radius: var(--radius); white-space: nowrap; } .tb-btn:active { border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); } .tb-btn[disabled] { opacity: .45; cursor: not-allowed; } #nukeBtn { color: #fff; background: linear-gradient(180deg, #2fbf5b, #0e7a33); border-color: #9fffbc #044d1c #044d1c #9fffbc; } #nukeBtn.armed { animation: nukeGlow 1.05s ease-in-out infinite; } @keyframes nukeGlow { 50% { box-shadow: 0 0 16px 3px var(--good); filter: brightness(1.25); } } #nukeBtn[disabled] { background: linear-gradient(180deg, #8a8a8a, #5c5c5c); animation: none; } /* RAM meter */ #ramWrap { flex: 1 1 auto; min-width: 90px; display: flex; align-items: center; gap: 8px; } #ramBar { position: relative; flex: 1 1 auto; height: 18px; background: var(--chrome-mid); border: 2px solid; border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); overflow: hidden; } #ramFill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--good), #b6d900); transition: width .14s linear, background .2s linear; } #ramBar.warn #ramFill { background: linear-gradient(90deg, #e0a800, #ff7a00); } #ramBar.crit #ramFill { background: linear-gradient(90deg, #ff3b30, #ff0055); } #ramBar.crit { animation: ramPanic .5s steps(2) infinite; } @keyframes ramPanic { 50% { filter: brightness(1.7); } } #ramLabel, #hudStats { font-variant-numeric: tabular-nums; white-space: nowrap; } #hudStats { display: flex; gap: 10px; } #hudStats b { font-variant-numeric: tabular-nums; } #scoreWrap b { color: var(--accent); } #comboTag { display: flex; align-items: center; gap: 5px; color: var(--danger); font-weight: 700; opacity: 0; transition: opacity .2s; } #comboTag.on { opacity: 1; } /* Combo meter — the multiplier as a bar you can watch fill, rather than a number that silently changes. */ #comboBar { display: block; width: 46px; height: 7px; background: var(--chrome-mid); border: 1px solid var(--chrome-lo); overflow: hidden; } #comboFill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--good), var(--danger)); transition: width .12s ease-out; } #comboTag.max { animation: comboMax .5s steps(2) infinite; } @keyframes comboMax { 50% { filter: brightness(1.8); } } /* RAM danger vignette. Sits above the desktop but below every overlay, and never eats a click. */ body.danger::after { content: ''; position: fixed; inset: 0; z-index: 120; pointer-events: none; box-shadow: inset 0 0 90px 18px rgba(255, 20, 40, .55); animation: vignette .75s ease-in-out infinite; } @keyframes vignette { 50% { box-shadow: inset 0 0 130px 26px rgba(255, 20, 40, .8); } } /* Score / byte popups that float off a killed window. */ .floater { position: absolute; z-index: 55; font-weight: 700; font-size: 13px; color: var(--good); text-shadow: 1px 1px 0 rgba(0, 0, 0, .7); pointer-events: none; animation: floatUp .75s ease-out forwards; } @keyframes floatUp { to { transform: translateY(-46px); opacity: 0; } } /* --------------------------------------------------------------------- 6. Overlays (menu / shop / ad / BSOD / results) ------------------------------------------------------------------ */ .overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px); overflow-y: auto; } .overlay[hidden] { display: none !important; } .panel { width: min(560px, 100%); max-height: 100%; overflow-y: auto; background: var(--chrome); color: var(--text); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); } .panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px 5px 9px; font-weight: 700; background: linear-gradient(90deg, var(--title-a), var(--title-b)); color: var(--title-text); } .panel-body { padding: 16px; } .panel-body p { margin: 0 0 10px; line-height: 1.5; } .title-logo { margin: 0 0 2px; font-size: clamp(26px, 7vw, 44px); line-height: 1; letter-spacing: -1px; text-align: center; color: var(--accent); text-shadow: 2px 2px 0 var(--chrome-hi), 4px 4px 0 rgba(0, 0, 0, .35); } .title-sub { margin: 0 0 16px; text-align: center; font-size: 12px; opacity: .8; } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .big-btn { flex: 1 1 150px; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--text); background: var(--chrome); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); border-radius: var(--radius); } .big-btn:active { border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); } .big-btn.primary { color: #fff; background: linear-gradient(180deg, var(--title-b), var(--title-a)); border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); } .big-btn[disabled] { opacity: .45; cursor: not-allowed; } /* Level select grid */ #levelGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 7px; margin-bottom: 14px; } .lvl { aspect-ratio: 1; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--text); background: var(--chrome); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); border-radius: var(--radius); } .lvl.cleared { background: var(--good); color: #04240f; } .lvl.locked { opacity: .4; cursor: not-allowed; } .lvl.tier-edge { box-shadow: inset 0 3px 0 var(--danger); } .tier-legend { display: grid; gap: 6px; margin: 0 0 14px; font-size: 11.5px; } .tier-legend div { display: flex; gap: 8px; } .tier-legend b { flex: 0 0 108px; } /* Shop */ .shop-list { display: grid; gap: 9px; margin-bottom: 14px; } .shop-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: rgba(0, 0, 0, .08); border: 1px solid var(--chrome-mid); } .shop-swatch { flex: 0 0 44px; height: 34px; border: 1px solid var(--chrome-lo); } .shop-meta { flex: 1 1 auto; min-width: 0; } .shop-meta b { display: block; } .shop-meta small { opacity: .75; } .shop-item button { flex: 0 0 auto; padding: 6px 12px; } /* Rewarded ad */ #adPanel { width: min(460px, 100%); } .ad-stage { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; color: #fff; background: linear-gradient(135deg, #17002e, #4b0082 45%, #ff0080); overflow: hidden; } .ad-stage::after { content: ''; position: absolute; inset: -40%; background: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 12px, transparent 12px 24px); animation: adSweep 3.5s linear infinite; } @keyframes adSweep { to { transform: translateX(24px); } } .ad-copy { position: relative; z-index: 1; padding: 14px; } .ad-copy h4 { margin: 0 0 6px; font-size: clamp(17px, 4.4vw, 25px); } .ad-copy p { margin: 0; font-size: 12.5px; opacity: .9; } .ad-progress { height: 8px; background: var(--chrome-mid); border-top: 1px solid var(--chrome-lo); } .ad-progress > i { display: block; height: 100%; width: 0%; background: var(--good); } /* Blue Screen of Death */ #bsod { background: #0827a8; backdrop-filter: none; padding: 0; } body[data-theme='matrix'] #bsod { background: #000; } .bsod-inner { width: min(760px, 100%); padding: 24px; font-family: var(--mono); font-size: clamp(12px, 2.6vw, 15px); line-height: 1.65; color: #fff; } body[data-theme='matrix'] .bsod-inner { color: #4dff88; } .bsod-head { display: inline-block; padding: 1px 10px; margin-bottom: 16px; color: #0827a8; background: #c8c8c8; font-weight: 700; } body[data-theme='matrix'] .bsod-head { color: #000; background: #4dff88; } .bsod-inner .code { word-break: break-all; } .bsod-inner .blink { animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .bsod-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; } .bsod-actions button { padding: 9px 16px; font-family: var(--mono); font-weight: 700; color: #0827a8; background: #c8c8c8; border: 2px solid; border-color: #fff #555 #555 #fff; } /* Boot / level intro splash */ .splash-inner { text-align: center; font-family: var(--mono); color: var(--accent); text-shadow: 0 0 12px var(--glow); } .splash-tier { font-size: clamp(13px, 3.4vw, 17px); letter-spacing: .32em; opacity: .85; } .splash-lvl { font-size: clamp(30px, 9vw, 62px); line-height: 1.05; margin: 6px 0 4px; } .splash-name { font-size: clamp(14px, 4vw, 22px); opacity: .9; } .splash-blurb{ font-size: 12.5px; opacity: .7; margin-top: 10px; } /* Global screen effects */ #crt { position: fixed; inset: 0; z-index: 500; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); opacity: .28; mix-blend-mode: multiply; } body.no-crt #crt { display: none; } #desktop.shaking { animation: shake .18s steps(2) 2; } #desktop.glitch { animation: glitchJump .28s steps(3) 1; } @keyframes glitchJump { 33% { transform: translate(3px, -2px); filter: hue-rotate(60deg); } 66% { transform: translate(-3px, 2px); filter: invert(1); } } .hint { margin-top: 12px; font-size: 11.5px; opacity: .72; line-height: 1.5; } .bytes-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-weight: 700; background: rgba(0, 0, 0, .14); border: 1px solid var(--chrome-mid); } /* --------------------------------------------------------------------- 7. Responsive ------------------------------------------------------------------ */ @media (max-width: 640px) { :root { --taskbar-h: 46px; } body { font-size: 12px; } .win { width: 240px; } .win-body { padding: 9px 9px 5px; font-size: 11px; } .win-btn { width: 30px; height: 27px; } /* fat-finger target on touch */ #icons { display: none; } #hudStats .opt { display: none; } .tb-btn { padding: 0 8px; } } @media (max-width: 380px) { .win { width: 205px; } #ramWrap { min-width: 60px; } } /* Coarse pointers get bigger close buttons regardless of viewport - a 26px box is a fair mouse target and an unfair thumb target. */ @media (pointer: coarse) { .win-btn { min-width: 32px; min-height: 30px; } .decoy { padding: 7px 12px; } } @media (prefers-reduced-motion: reduce) { .win, .win.dying, .win.nuked, .win.boss, .win.hit, #nukeBtn.armed, #ramBar.crit, .floater, .ad-stage::after, #desktop.shaking, #desktop.glitch, .pip, #comboTag.max, body.danger::after { animation: none !important; } .pip { display: none; } .win { transition: none; } #crt { display: none; } }