:root { --term-bg: #040103; --blood-red: #ff1a3c; --blood-glow: rgba(255, 26, 60, 0.6); --dim-red: #8b001a; --dark-red: #240007; --term-gold: #d4af37; --term-gold-glow: rgba(212, 175, 55, 0.4); --text-main: #f0d8dd; --text-dim: #99737c; } /* Inverted Castle Easter Egg Theme */ body.inverted-castle { filter: invert(0.9) hue-rotate(180deg); transform: rotate(180deg); transition: transform 1.2s ease-in-out, filter 1s ease; } /* Blood Mode Easter Egg */ body.blood-mode { --blood-red: #ff0000; --term-bg: #1a0003; --text-main: #ff99a8; animation: redPulse 2s infinite alternate; } /* Matrix Green Mode */ body.matrix-mode { --blood-red: #00ff66; --blood-glow: rgba(0, 255, 102, 0.6); --dim-red: #008833; --dark-red: #00220d; --term-gold: #33ff99; --text-main: #a8ffcb; } @keyframes redPulse { 0% { box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.2); } 100% { box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.6); } } * { margin: 0; padding: 0; box-sizing: border-box; } /* Belt-and-suspenders against sideways scroll on mobile: body already has overflow-x: hidden below, but mobile Safari in particular sometimes treats , not , as the actual scroll root -- constraining body alone doesn't reliably stop it there. */ html { overflow-x: hidden; } body { background-color: var(--term-bg); color: var(--text-main); font-family: 'VT323', monospace; font-size: 21px; line-height: 1.3; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 1rem; overflow-x: hidden; position: relative; transition: transform 0.8s ease, filter 0.8s ease; } /* CRT Screen Shell */ .crt-wrapper { position: relative; width: 100%; max-width: 1000px; background: #080204; border: 3px solid var(--dim-red); box-shadow: 0 0 35px rgba(139, 0, 26, 0.5), inset 0 0 25px rgba(0, 0, 0, 0.95); border-radius: 6px; overflow: hidden; transition: all 0.5s ease; } .crt-wrapper.power-off { animation: crtOff 0.6s forwards; } @keyframes crtOff { 0% { transform: scale(1, 1); filter: brightness(1); } 50% { transform: scale(1, 0.005); filter: brightness(5); } 100% { transform: scale(0, 0); filter: brightness(0); opacity: 0; } } /* CRT Scanlines and Ambient Glow */ .crt-wrapper::before { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.4) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03)); z-index: 10; background-size: 100% 4px, 6px 100%; pointer-events: none; } .crt-wrapper::after { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255, 26, 60, 0.02); opacity: 0; z-index: 10; pointer-events: none; animation: flicker 0.12s infinite; } /* Terminal Window Header Bar */ .term-header { background: var(--dark-red); border-bottom: 2px solid var(--dim-red); padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--blood-red); font-family: 'Fira Code', monospace; font-size: 13px; letter-spacing: 1px; } /* Shrinks and truncates instead of overflowing/wrapping the header to a second row -- term-controls and the audio button keep their natural size (they're the parts you actually need to tap), this just gives up the middle ground first on a narrow phone. */ .term-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .term-controls { display: flex; gap: 8px; flex-shrink: 0; } .term-btn { width: 12px; height: 12px; border-radius: 50%; background: var(--dim-red); display: inline-block; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .term-btn:hover { transform: scale(1.2); } .term-btn.close { background: var(--blood-red); box-shadow: 0 0 6px var(--blood-red); } .term-btn.min { background: var(--term-gold); } .term-btn.max { background: #00ff66; } /* Sound Control Toggle */ .audio-toggle-btn { background: rgba(139, 0, 26, 0.3); border: 1px solid var(--blood-red); color: var(--term-gold); padding: 2px 8px; font-family: 'VT323', monospace; font-size: 16px; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .audio-toggle-btn:hover { background: var(--blood-red); color: #000; box-shadow: 0 0 8px var(--blood-glow); } .audio-toggle-btn.playing { background: var(--term-gold); color: #000; border-color: var(--term-gold); animation: audioPulse 1.5s infinite alternate; } @keyframes audioPulse { 0% { box-shadow: 0 0 4px var(--term-gold); } 100% { box-shadow: 0 0 12px var(--term-gold); } } /* Main Content Body */ .term-body { padding: 2rem; position: relative; z-index: 2; } /* Pixel-Perfect ASCII Header */ .ascii-art { color: var(--blood-red); text-shadow: 0 0 10px var(--blood-glow); font-family: monospace; white-space: pre; font-size: 11px; line-height: 1.0; margin-bottom: 1.2rem; overflow-x: auto; cursor: pointer; user-select: none; } .glow-red { color: var(--blood-red); text-shadow: 0 0 10px var(--blood-glow); } .glow-gold { color: var(--term-gold); text-shadow: 0 0 8px var(--term-gold-glow); } .dim-text { color: var(--text-dim); } .prompt { color: var(--blood-red); margin-right: 8px; } .cmd-line { margin-bottom: 0.8rem; display: flex; align-items: center; flex-wrap: wrap; } /* Castlevania Quote Banner */ .quote-box { border-left: 3px solid var(--term-gold); padding: 8px 15px; margin: 1.2rem 0; background: rgba(212, 175, 55, 0.05); font-style: italic; } /* Quick Server Gateway Banner */ .ip-block { margin: 1.2rem 0; background: rgba(36, 0, 7, 0.7); border: 1px dashed var(--blood-red); padding: 1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .ip-address { font-family: 'Fira Code', monospace; font-size: 20px; color: #fff; letter-spacing: 1.5px; } .btn-cli { background: var(--dim-red); color: #fff; border: 1px solid var(--blood-red); padding: 4px 14px; font-family: 'VT323', monospace; font-size: 20px; cursor: pointer; transition: all 0.2s ease; } .btn-cli:hover { background: var(--blood-red); box-shadow: 0 0 15px var(--blood-glow); color: #000; } /* Blog / Wiki Navigation Tabs */ .nav-tabs { display: flex; gap: 6px; margin: 1.5rem 0 1rem; border-bottom: 2px solid var(--dim-red); padding-bottom: 2px; flex-wrap: wrap; } .tab-btn { background: rgba(36, 0, 7, 0.8); border: 1px solid var(--dim-red); border-bottom: none; color: var(--text-dim); padding: 6px 16px; font-family: 'VT323', monospace; font-size: 20px; cursor: pointer; transition: all 0.2s ease; /* .tab-btn is also used on the Video Forge link, which is a real (navigates offsite) rather than a