*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
--red: #dc143c;
--red-glow: rgba(220,20,60,0.5);
--dark: #05050a;
/* Speaker size — a CSS variable so everything shares it */
--sp: min(54vw, 54vh); /* diameter */
}
@media(max-width:600px) {
:root { --sp: min(82vw, 54vh); }
}
html, body { width:100%; height:100%; background:var(--dark); color:#fff;
font-family:'Inter',sans-serif; overflow:hidden; -webkit-font-smoothing:antialiased; }
/* ── Canvas fills background ── */
#bgCanvas { position:fixed; inset:0; z-index:0; }
/* ── Scanlines ── */
.scanlines { position:fixed; inset:0; z-index:1; pointer-events:none;
background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.1) 2px,rgba(0,0,0,0.1) 4px); }
/* ── HUD corners ── */
.corner { position:fixed; width:40px; height:40px; z-index:8; pointer-events:none; }
.corner::before, .corner::after { content:''; position:absolute; background:var(--red); }
.corner::before { width:100%; height:2px; } .corner::after { width:2px; height:100%; }
.corner.tl { top:14px; left:14px; } .corner.tl::before,.corner.tl::after { top:0; left:0; }
.corner.tr { top:14px; right:14px; } .corner.tr::before { top:0; right:0; } .corner.tr::after { top:0; right:0; }
.corner.bl { bottom:14px; left:14px; } .corner.bl::before { bottom:0; left:0; } .corner.bl::after { bottom:0; left:0; }
.corner.br { bottom:14px; right:14px; } .corner.br::before { bottom:0; right:0; } .corner.br::after { bottom:0; right:0; }
/* ── HUD text ── */
.hud { position:fixed; z-index:8; pointer-events:none; font-family:'Share Tech Mono',monospace;
font-size:0.55rem; color:rgba(255,255,255,0.28); letter-spacing:0.1em; line-height:1.6; }
.hud small { display:block; color:rgba(220,20,60,0.65); font-size:0.5rem; letter-spacing:0.2em; }
.hud.bl { bottom:24px; left:24px; }
.hud.br { bottom:24px; right:24px; text-align:right; }
/* ════════════════════════════════════════════════════
MAIN LAYOUT — 3-row flex column, full viewport
════════════════════════════════════════════════════ */
.page {
position:fixed; inset:0; z-index:5;
display:flex; flex-direction:column;
align-items:center;
justify-content:space-between;
padding:0 0 0 0;
}
/* ── Row 1: Title at top ── */
.title-row {
width:100%; text-align:center;
padding: 1.4rem 1rem 0;
flex-shrink:0;
}
.main-title {
font-family:'Bebas Neue',cursive;
font-size:clamp(2rem,6vw,5rem);
letter-spacing:0.14em; line-height:1;
text-shadow:0 0 40px rgba(220,20,60,0.25);
white-space:nowrap;
}
.main-title .red { color:var(--red); }
.tagline {
font-family:'Share Tech Mono',monospace;
font-size:clamp(0.42rem,1vw,0.62rem);
letter-spacing:0.28em; text-transform:uppercase;
color:var(--red); margin-top:0.35rem; font-weight:700;
}
.cursor { display:inline-block; width:2px; height:1em; background:var(--red);
margin-left:2px; vertical-align:middle; animation:blink 1s step-end infinite; }
/* ── Row 2: Speaker + its overlays ── */
.speaker-row {
flex:1; display:flex; align-items:center; justify-content:center;
min-height:0; /* allow shrink */
}
/* The speaker container — same size as canvas speaker */
.speaker-wrap {
position:relative;
width:var(--sp);
height:var(--sp);
border-radius:50%;
flex-shrink:0;
}
/* 4-quadrant click grid inside the circle */
.speaker-grid {
position:absolute; inset:0;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
border-radius:50%;
overflow:hidden;
}
.quad {
display:flex; align-items:center; justify-content:center;
text-decoration:none; color:rgba(255,255,255,0.6);
transition:background 0.3s;
cursor:pointer;
position:relative;
}
.quad:hover { background:rgba(220,20,60,0.14); }
/* Each label perfectly centered in its quadrant */
.quad-inner {
display:flex; flex-direction:column; align-items:center; gap:0.4rem;
}
/* Shift them slightly outward from the exact center of the quadrant so they clear the logo more nicely */
.quad.tl .quad-inner { transform: translate(-10%, -10%); }
.quad.tr .quad-inner { transform: translate(10%, -10%); }
.quad.bl .quad-inner { transform: translate(-10%, 10%); }
.quad.br .quad-inner { transform: translate(10%, 10%); }
@media(max-width:500px){
.quad.tl .quad-inner, .quad.tr .quad-inner,
.quad.bl .quad-inner, .quad.br .quad-inner { transform: none; }
}
.quad-inner i {
font-size:clamp(0.9rem,2.2vw,1.3rem);
color:var(--red); filter:drop-shadow(0 0 6px var(--red-glow));
transition:transform 0.3s;
}
.quad:hover .quad-inner i { transform:scale(1.2); }
.quad-inner span.label {
font-family:'Share Tech Mono',monospace;
font-size:clamp(0.44rem,1.1vw,0.62rem);
letter-spacing:0.2em; text-transform:uppercase;
color:#fff; transition:color 0.3s;
font-weight:700;
}
.quad-inner span.sub {
font-family:'Share Tech Mono',monospace;
font-size:clamp(0.36rem,0.85vw,0.5rem);
letter-spacing:0.1em; text-transform:uppercase;
color:var(--red); transition:color 0.3s;
white-space:nowrap; font-weight:700;
}
.quad:hover .quad-inner span.label { color:#fff; }
.quad:hover .quad-inner span.sub { color:#fff; } /* swap to white on hover for contrast */
/* Center logo link — positioned at dust cap */
.center-logo {
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
z-index:10;
width:calc(var(--sp) * 0.18);
height:calc(var(--sp) * 0.18);
display:flex; align-items:center; justify-content:center;
border-radius:50%;
transition:filter 0.3s;
}
.center-logo img {
width:100%; height:auto;
filter:drop-shadow(0 0 10px var(--red-glow));
transition:filter 0.3s, transform 0.3s;
}
.center-logo:hover img {
filter:drop-shadow(0 0 20px var(--red-glow)) brightness(1.3);
transform:scale(1.1);
}
/* ── Row 3: Bottom bar — audio controls + enter link + EQ ── */
.bottom-row {
width:100%; flex-shrink:0;
display:flex; flex-direction:column; align-items:center; gap:0.3rem;
padding-bottom:0;
}
.audio-controls {
display:none; align-items:center; gap:0.4rem;
font-family:'Share Tech Mono',monospace; font-size:0.55rem;
color:rgba(255,255,255,0.3); letter-spacing:0.15em; padding:0.2rem 0;
}
.audio-controls button {
background:none; border:1px solid rgba(220,20,60,0.3); color:rgba(255,255,255,0.4);
padding:0.28rem 0.6rem; border-radius:3px; cursor:pointer;
font-family:'Share Tech Mono',monospace; font-size:0.52rem; letter-spacing:0.15em;
transition:all 0.3s; display:flex; align-items:center; gap:0.3rem; justify-content:center;
}
.audio-controls button#toggleBtn { padding: 0.28rem 0.8rem; min-width: 80px; }
.audio-controls button:hover { background:rgba(220,20,60,0.15); border-color:var(--red); color:#fff; }
.track-time { margin-left: 0.5rem; min-width:35px; text-align:right; }
.enter-link {
font-family:'Share Tech Mono',monospace; font-size:clamp(0.65rem, 1.5vw, 0.9rem);
letter-spacing:0.3em; text-transform:uppercase; font-weight:700;
color:#fff; text-decoration:none;
display:inline-flex; align-items:center; gap:0.6rem; transition:color 0.3s;
margin-top:1.2rem;
}
.enter-link span { width:30px; height:1px; background:currentColor; display:block; transition:width 0.3s; }
.enter-link:hover { color:var(--red); }
.enter-link:hover span { width:50px; }
/* EQ strip */
.eq-strip {
width:100%; height:60px;
display:flex; align-items:flex-end; justify-content:center;
gap:3px; padding:0 0.5rem 0.5rem;
pointer-events:none;
}
.eq-bar { width:5px; border-radius:2px 2px 0 0; min-height:3px;
background:linear-gradient(to top,var(--red),rgba(220,20,60,0.12)); }
/* Toast */
#audioToast {
position:fixed; bottom:68px; left:50%; transform:translateX(-50%);
z-index:20; font-family:'Share Tech Mono',monospace; font-size:0.56rem;
letter-spacing:0.18em; text-transform:uppercase;
background:rgba(220,20,60,0.1); border:1px solid rgba(220,20,60,0.3);
color:rgba(255,255,255,0.45); padding:0.4rem 1.1rem; border-radius:3px;
backdrop-filter:blur(8px); cursor:pointer; transition:opacity 0.5s; white-space:nowrap;
}
#audioToast.hidden { opacity:0; pointer-events:none; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
STATUS--:--:--
NOW PLAYINGDJ MASS — PEACE & WAR
Click anywhere to enable audio
