* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-color, #2f93e8);
    font-family: var(--font-ui, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif);
    color: var(--text-color, #fff);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}
[hidden] { display: none !important; }

/* ---------- background (two layers for crossfades + effect overlays) ---------- */
#bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: var(--bg-color, #2f93e8); overflow: hidden; }
.bg-layer {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background-position: center;
    background-size: var(--bg-fit, cover);
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease;
    filter: var(--bg-filter, none);
    transform: var(--bg-transform, none);
}
.bg-layer.visible { opacity: 1; }
body.bg-zoom .bg-layer { animation: bgzoom var(--bg-zoom-time, 40s) ease-in-out infinite alternate; }
@keyframes bgzoom { from { transform: scale(var(--bg-scale, 1)); } to { transform: scale(var(--bg-zoom-end, 1.06)); } }
#bg-dim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: var(--bg-tint, transparent); }
#bg-dim::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: var(--bg-dim, 0); }
#bg-vignette { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: var(--bg-vignette, 0);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.85) 100%); }

/* ---------- sprites ---------- */
#vortex { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#props-canvas { position: absolute; left: 0; top: 0; }
.sprite {
    position: absolute;
    left: 0; top: 0;
    transform-origin: center center;
    visibility: hidden;
    pointer-events: none;
    filter: var(--prop-shadow, none);
}
.sprite.icon { z-index: 2; filter: none; }

/* ---------- effects ---------- */
#fx { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: var(--fx-z, 9); pointer-events: none; }
#fx-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; pointer-events: none; }
#fx-overlay.scanlines { background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,var(--scanline-a, 0.12)) 2px, rgba(0,0,0,var(--scanline-a, 0.12)) 3px); }
#fx-overlay.grain::after { content: ""; position: absolute; top: -200px; right: -200px; bottom: -200px; left: -200px; background-image: var(--grain-img, none); background-size: 128px 128px; background-position: var(--grain-pos, 0 0); opacity: var(--grain-a, 0.07); mix-blend-mode: overlay; }
#fx-flash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; pointer-events: none; opacity: 0; background: #fff; }
#gman { transition: -webkit-transform 0.18s ease-out; transition: transform 0.18s ease-out; }
#gman.gulp { transform: translateX(-50%) scale(var(--gulp-scale, 1.03)); }
#bar.pulse { animation: barpulse 0.5s ease-out; }
@keyframes barpulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } 100% { box-shadow: 0 0 0 1.4vh rgba(255,255,255,0); } }

/* ---------- G-Man ---------- */
#gman {
    position: fixed;
    z-index: 3;
    left: 50%;
    top: var(--gman-top, 24vh);
    width: var(--gman-size, 55vh);
    height: var(--gman-size, 55vh);
    max-width: 44vw;
    max-height: 44vw;
    transform: translateX(-50%);
    border: var(--gman-border-w, 0.3vh) solid var(--gman-border, #fff);
    border-radius: var(--gman-radius, 1.4vh);
    overflow: hidden;
    background: var(--gman-bg, #000);
    box-shadow: var(--gman-shadow, none);
    filter: var(--gman-filter, none); /* on the frame, not the video: filtered videos break rounded clipping in Chromium */
}
#gman video {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: var(--gman-fit, cover);
    opacity: 0;
    transition: opacity 1s ease;
    transform: var(--gman-flip, none);
}
#gman video.visible { opacity: var(--gman-opacity, 1); }

/* ---------- title ---------- */
#title {
    position: fixed;
    z-index: 4;
    left: 0; right: 0;
    top: var(--title-top, 8.6vh);
    text-align: center;
    font-family: var(--font-title, inherit);
    font-size: var(--title-size, 9.8vh);
    line-height: 1.1;
    font-weight: var(--title-weight, 700);
    letter-spacing: var(--title-spacing, -0.025em);
    text-transform: var(--title-transform, none);
    color: var(--title-color, #fff);
    text-shadow: var(--title-shadow, none);
    white-space: nowrap;
}
#subtitle {
    position: fixed;
    z-index: 4;
    left: 0; right: 0;
    top: calc(var(--title-top, 8.6vh) + var(--title-size, 9.8vh) * 1.15);
    text-align: center;
    font-family: var(--font-title, inherit);
    font-size: calc(var(--title-size, 9.8vh) * 0.24);
    letter-spacing: 0.12em;
    color: var(--title-color, #fff);
    text-shadow: var(--text-shadow, none);
    opacity: 0.95;
}

/* ---------- server info (upper-left) ---------- */
#server-info {
    position: fixed;
    z-index: 5;
    left: 2.2vw;
    top: 4.4vh;
    text-shadow: var(--text-shadow, none);
    transform: scale(var(--ui-scale, 1));
    transform-origin: top left;
}
#server-info .row { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; height: 5vh; margin-bottom: 2vh; }
#server-info .ico { width: 4.6vh; height: 4.6vh; margin-right: 1.8vh; flex: none; color: var(--text-color, #fff); }
#server-info .val { font-size: 2.35vh; font-weight: 600; line-height: 1.15; letter-spacing: 0.03em; }
#server-info .lbl { font-size: 1.75vh; font-weight: 400; line-height: 1.2; letter-spacing: 0.06em; opacity: 0.95; }

/* ---------- player info (upper-right) ---------- */
#player-info {
    position: fixed;
    z-index: 6;
    right: 1.7vw;
    top: 4.2vh;
    height: 10.8vh;
    min-width: 19.5vw;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 1.1vh;
    border-radius: 0.9vh;
    background: var(--player-box, rgba(70, 155, 235, 0.72));
    box-shadow: 0 0.3vh 1.2vh rgba(0, 40, 90, 0.2);
    text-shadow: var(--text-shadow, none);
    transform: scale(var(--ui-scale, 1));
    transform-origin: top right;
}
#avatar {
    position: relative;
    width: 8.6vh; height: 8.6vh;
    flex: none;
    margin-right: 1.5vh;
    border-radius: 0.6vh;
    overflow: hidden;
    background: #111;
}
#avatar svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
#avatar img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
#avatar img.loaded { display: block; }
#player-info .welcome { font-size: 1.9vh; font-weight: 500; line-height: 1.25; letter-spacing: 0.02em; }
#player-info .name { font-size: 3.1vh; font-weight: 700; line-height: 1.2; }
#player-info .sid { font-size: 1.35vh; font-weight: 400; letter-spacing: 0.04em; opacity: 0.95; margin-top: 0.3vh; }

/* ---------- loading bar + status ---------- */
#loading {
    position: fixed;
    z-index: 7;
    left: 50%;
    top: var(--bar-top, 81vh);
    width: var(--bar-width, 51.5vw);
    transform: translateX(-50%);
    text-align: center;
    font-family: var(--font-status, inherit);
}
#bar {
    position: relative;
    height: var(--bar-height, 3vh);
    border: var(--bar-outline-w, 0.28vh) solid var(--bar-outline, #fff);
    border-radius: var(--bar-radius, 3vh);
    background: var(--bar-bg, rgba(0, 25, 60, 0.42));
    overflow: hidden;
    box-shadow: 0 0.3vh 1vh rgba(0, 40, 90, 0.2);
}
#bar-fill {
    width: 0%;
    height: 100%;
    background: var(--bar-fill, #22b3f5);
    border-radius: var(--bar-radius, 3vh);
}
#bar-percent {
    position: absolute; right: 1.2vh; top: 0; bottom: 0;
    display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;
    font-size: calc(var(--bar-height, 3vh) * 0.55);
    font-weight: 600; letter-spacing: 0.05em;
    text-shadow: 0 0 0.6vh rgba(0, 0, 0, 0.5);
}
#status {
    margin-top: 2.2vh;
    font-size: 2vh;
    font-weight: 500;
    letter-spacing: var(--status-spacing, 0.22em);
    text-shadow: var(--text-shadow, none);
}
#status-percent { margin-left: 1.2em; opacity: 0.9; }
#file, #tips {
    margin-top: 0.8vh;
    font-size: 1.55vh;
    font-weight: 400;
    letter-spacing: 0.16em;
    opacity: 0.95;
    text-shadow: var(--text-shadow, none);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tips { margin-top: 1.6vh; letter-spacing: 0.08em; transition: opacity 0.6s ease; }
#tips.fade { opacity: 0; }

#yt-wrap { position: fixed; left: -4px; top: -4px; width: 2px; height: 2px; overflow: hidden; opacity: 0.01; pointer-events: none; z-index: 0; }
#yt-wrap iframe { width: 200px; height: 200px; }

#now-playing {
    position: fixed;
    z-index: 7;
    right: 1.7vw;
    bottom: 2.4vh;
    font-size: 1.5vh;
    letter-spacing: 0.08em;
    opacity: 0.85;
    text-shadow: var(--text-shadow, none);
}

/* ---------- debug overlay (?debug=1) ---------- */
#debug {
    position: fixed; left: 8px; bottom: 8px; z-index: 30; max-width: 46vw; max-height: 60vh; overflow: hidden;
    padding: 8px 10px; background: rgba(0, 0, 0, 0.75); color: #9f9; font: 12px/1.35 Consolas, "Courier New", monospace;
    white-space: pre-wrap; text-shadow: none; letter-spacing: 0; border-radius: 4px;
}

/* ---------- narrow / portrait fallbacks ---------- */
@media (max-aspect-ratio: 4/3) {
    #title { font-size: calc(var(--title-size, 9.8vh) * 0.8); }
    #player-info { min-width: 0; }
    #loading { width: 70vw; }
}