/* DECK web demo — neon cyberpunk HUD, theme-aware. Themes set --p (primary), --s (secondary/heat), --a (accent/cred) on . */ :root { --void: rgba(6, 8, 16, 0.74); --ink: #cfefff; --ink-dim: #5d7c8a; --grid: rgba(255, 255, 255, 0.05); } body[data-theme="ice"] { --p:#16f2ff; --p-dim:#0a8a93; --s:#ff2bd6; --a:#6dff9e; --ink:#cfefff; --ink-dim:#5d7c8a; } body[data-theme="militech"] { --p:#ffb020; --p-dim:#a36a08; --s:#ff3b30; --a:#ffe08a; --ink:#fff0d8; --ink-dim:#8a7050; } body[data-theme="ghost"] { --p:#6dff9e; --p-dim:#1f8f50; --s:#16f2ff; --a:#b7ffce; --ink:#d6ffe6; --ink-dim:#4f7d63; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; min-height: 100%; background: radial-gradient(1200px 700px at 70% -10%, rgba(22,242,255,0.06), transparent 60%), radial-gradient(900px 600px at 10% 110%, rgba(255,43,214,0.05), transparent 60%), #04060c; font-family: "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; color: var(--ink); -webkit-font-smoothing: antialiased; } .stage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 16px; } .cap { font-size: 11px; letter-spacing: 0.5px; color: var(--ink-dim); text-align: center; max-width: 360px; } .cap b, .cap strong { color: var(--ink); } /* ---- shell ---- */ .hud { position: relative; width: 360px; min-height: 560px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.02)), var(--void); border: 1px solid color-mix(in srgb, var(--p) 38%, transparent); border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 26px color-mix(in srgb, var(--p) 22%, transparent), 0 0 70px color-mix(in srgb, var(--s) 12%, transparent), 0 28px 70px rgba(0,0,0,0.6); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); padding: 13px 14px 11px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; } .hud::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 16px; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(130% 90% at 50% 0%, #000 25%, transparent 100%); } /* ---- fx ---- */ .fx-scanlines, .fx-vignette, .fx-flicker { position: absolute; inset: 0; pointer-events: none; border-radius: 16px; z-index: 30; } .fx-scanlines { background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.16) 3px 3px); mix-blend-mode: multiply; opacity: .5; } .fx-vignette { box-shadow: inset 0 0 70px rgba(0,0,0,0.62), inset 0 0 14px color-mix(in srgb, var(--p) 10%, transparent); } .fx-flicker { background: color-mix(in srgb, var(--p) 4%, transparent); animation: flicker 7s infinite steps(60); } @keyframes flicker { 0%,96%,100%{opacity:0} 97%{opacity:.45} 98%{opacity:.1} 99%{opacity:.4} } /* ---- boot sequence ---- */ .boot { position: absolute; inset: 0; z-index: 60; border-radius: 16px; background: #04060c; display: flex; align-items: flex-start; justify-content: flex-start; padding: 22px; transition: opacity .6s ease; overflow: hidden; } .boot.done { opacity: 0; pointer-events: none; } .boot-log { font-size: 11px; line-height: 1.6; color: var(--p); text-shadow: 0 0 8px color-mix(in srgb, var(--p) 60%, transparent); white-space: pre-wrap; } .boot-log .ok { color: var(--a); } .boot-log .cur { animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---- header ---- */ .bar { display: flex; align-items: center; gap: 8px; z-index: 20; } .brand { display: flex; flex-direction: column; line-height: 1; } .logo { font-size: 15px; font-weight: 800; letter-spacing: 2.5px; color: var(--p); text-shadow: 0 0 8px var(--p), 0 0 20px color-mix(in srgb, var(--p) 60%, transparent); white-space: nowrap; } .sub { font-size: 8.5px; letter-spacing: 3px; color: var(--ink-dim); margin-top: 3px; text-transform: uppercase; } .rankwrap { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; } .rank { font-size: 8.5px; letter-spacing: 2px; color: var(--ink-dim); } .lvl { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--a); text-shadow: 0 0 8px color-mix(in srgb, var(--a) 55%, transparent); margin-top: 3px; } .status { display: flex; align-items: center; gap: 5px; padding-left: 10px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a); box-shadow: 0 0 8px var(--a); animation: pulse 1.8s infinite ease-in-out; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } .status-txt { font-size: 8px; letter-spacing: 1.5px; color: var(--a); } /* glitch */ .glitch { position: relative; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; opacity: .8; } .glitch::before { color: var(--s); animation: gl1 3.4s infinite linear alternate-reverse; } .glitch::after { color: var(--p); animation: gl2 2.7s infinite linear alternate-reverse; } @keyframes gl1 { 0%,92%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)} 93%{clip-path:inset(10% 0 60% 0);transform:translate(-2px)} 96%{clip-path:inset(40% 0 30% 0);transform:translate(2px)} } @keyframes gl2 { 0%,90%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)} 91%{clip-path:inset(60% 0 20% 0);transform:translate(2px)} 95%{clip-path:inset(20% 0 55% 0);transform:translate(-2px)} } /* ---- modules ---- */ .mod { position: relative; z-index: 20; background: rgba(8,14,26,0.5); border: 1px solid color-mix(in srgb, var(--p) 16%, transparent); border-radius: 10px; padding: 8px 10px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .mod-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .mod-label { font-size: 8.5px; letter-spacing: 2px; color: var(--ink-dim); } .mod-val { font-size: 17px; font-weight: 700; color: var(--p); text-shadow: 0 0 8px color-mix(in srgb, var(--p) 55%, transparent); font-variant-numeric: tabular-nums; } .mod-val.sm { font-size: 13px; } .mod-val.net { font-size: 10px; letter-spacing: .3px; } .mod-foot { margin-top: 4px; font-size: 8.5px; color: var(--ink-dim); letter-spacing: 1px; } .meter { height: 8px; background: rgba(0,0,0,0.5); border-radius: 6px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--p) 12%, transparent); } .meter-fill { height: 100%; width: 0%; border-radius: 6px; transition: width .45s cubic-bezier(.2,.8,.2,1); } .meter-fill.heat { background: linear-gradient(90deg, var(--p), var(--s)); box-shadow: 0 0 12px color-mix(in srgb, var(--s) 55%, transparent); } .meter-fill.mem { background: linear-gradient(90deg, var(--p-dim), var(--p)); } .cores { display: flex; gap: 3px; margin-top: 6px; height: 14px; align-items: flex-end; } .core { flex: 1; background: color-mix(in srgb, var(--p) 20%, transparent); border-radius: 2px; min-height: 2px; transition: height .35s, background .35s; } #netCanvas { width: 100%; height: 38px; display: block; } /* ---- nodes ---- */ .nodes { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; } .node { font-size: 9px; letter-spacing: .5px; padding: 3px 7px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--p) 30%, transparent); color: var(--ink); background: color-mix(in srgb, var(--p) 8%, transparent); display: inline-flex; align-items: center; gap: 5px; animation: nodein .4s ease both; } .node .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--p); box-shadow: 0 0 6px var(--p); } .node.target { border-color: var(--s); color: var(--s); background: color-mix(in srgb, var(--s) 12%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--s) 35%, transparent); } .node.target .pip { background: var(--s); box-shadow: 0 0 6px var(--s); } @keyframes nodein { from { opacity: 0; transform: translateY(4px) scale(.96); } } /* ---- AI companion ---- */ .mod.ai { border-color: color-mix(in srgb, var(--a) 26%, transparent); background: color-mix(in srgb, var(--a) 5%, rgba(8,14,26,0.5)); } .ai-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .ai-avatar { color: var(--a); font-size: 12px; text-shadow: 0 0 8px var(--a); animation: pulse 2.4s infinite; } .ai-name { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--a); } .ai-tag { font-size: 8px; letter-spacing: 1.5px; color: var(--ink-dim); margin-left: auto; } .ai-line { font-size: 10.5px; line-height: 1.4; color: var(--ink); min-height: 28px; letter-spacing: .2px; } .ai-line .cur { color: var(--a); animation: blink 1s steps(2) infinite; } /* ---- game ---- */ .mod.game { border-color: color-mix(in srgb, var(--a) 24%, transparent); } .game-top { display: flex; align-items: center; gap: 12px; } .cred { display: flex; flex-direction: column; line-height: 1; } .cred-label { font-size: 8.5px; letter-spacing: 2px; color: var(--ink-dim); } .cred-val { font-size: 22px; font-weight: 800; color: var(--a); text-shadow: 0 0 10px color-mix(in srgb, var(--a) 55%, transparent); font-variant-numeric: tabular-nums; margin-top: 2px; } .xpwrap { flex: 1; } .xp-head { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 1px; color: var(--ink-dim); margin-bottom: 4px; } .meter.xp { height: 7px; } .meter-fill.xpfill { background: linear-gradient(90deg, var(--a), var(--p)); box-shadow: 0 0 10px color-mix(in srgb, var(--a) 50%, transparent); } .game-bot { display: flex; align-items: center; gap: 10px; margin: 9px 0 7px; } .jack { background: linear-gradient(180deg, color-mix(in srgb, var(--p) 20%, transparent), color-mix(in srgb, var(--s) 12%, transparent)); border: 1px solid var(--p); color: var(--p); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; padding: 8px 13px; border-radius: 7px; cursor: pointer; text-shadow: 0 0 6px var(--p); box-shadow: 0 0 14px color-mix(in srgb, var(--p) 25%, transparent); transition: transform .1s, box-shadow .2s; } .jack:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--p) 55%, transparent); transform: translateY(-1px); } .jack:active { transform: translateY(1px) scale(.98); } .jack:disabled { opacity: .6; cursor: progress; border-color: var(--s); color: var(--s); text-shadow: 0 0 6px var(--s); } .target { font-size: 9px; letter-spacing: .5px; color: var(--ink-dim); } .target b { color: var(--s); } .ice { font-size: 9.5px; letter-spacing: .3px; color: var(--a); min-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; } .ice.hot { color: var(--s); } /* ---- footer ---- */ .foot { display: flex; align-items: center; gap: 10px; z-index: 20; font-size: 9px; letter-spacing: 1.5px; color: var(--ink-dim); padding: 1px 2px 0; } #clock { color: var(--ink); letter-spacing: 2px; } #uptime { margin-right: auto; } .themes { display: flex; gap: 6px; } .swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; transition: transform .12s, box-shadow .2s; } .swatch:hover { transform: scale(1.15); } .swatch.on { box-shadow: 0 0 0 2px rgba(255,255,255,.5); } .swatch.ice { background: linear-gradient(135deg, #16f2ff, #ff2bd6); } .swatch.militech { background: linear-gradient(135deg, #ffb020, #ff3b30); } .swatch.ghost { background: linear-gradient(135deg, #6dff9e, #04060c); } /* level-up flash */ .levelup { animation: lvlflash .9s ease; } @keyframes lvlflash { 0%,100%{box-shadow:none} 30%{box-shadow:0 0 40px color-mix(in srgb, var(--a) 70%, transparent), 0 28px 70px rgba(0,0,0,.6)} }