/* ===========================================================================
   1980'S MAFIA ROLEPLAY  —  loading screen styling   ·   ProjectGaming.gg

   Re-skins the Sleek loading-screen engine (js/sleek.js) to the "mafiaload"
   noir art-deco look. The engine fills #title / #title-text, #loading-progress,
   #status-right, #status-left and #messages, and paints the background with
   Backstretch (config.background_images). Everything here is the dressing.

   Deliberately avoids CEF-fragile CSS (background-clip:text, filter:blur,
   mix-blend-mode) so it renders clean inside GMod's offscreen loading browser.
   =========================================================================== */

:root{
    --gold:        #c9a227;
    --gold-bright: #f0d479;
    --gold-soft:   #e3c25e;
    --gold-deep:   #8a6a1c;
    --cream:       #ece4d2;
    --cream-dim:   #b3a98f;
    --cream-faint: #6f6754;
    --ink:         #070504;
    --blood:       #7c1d1d;
}

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

html{ background:#070504; }

html,body{
    width:100%; height:100%;
    overflow:hidden;
    color:var(--cream);
    font-family:"Oswald","Arial Narrow",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -webkit-user-select:none; user-select:none;
    cursor:default;
}

/* Sleek reveals the page (display:block) once config + language have loaded;
   keep it hidden until then so nothing flashes unstyled. */
body{ display:none; }

/* ---- background layers ------------------------------------------------- */
/* The Backstretch <img> (config.background_images, default bg.svg) sits at the
   very back at z-index:-999999 and is the visible base. These layers are
   translucent so a photographic background dropped into config still shows. */

.scene{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:-3; overflow:hidden; pointer-events:none; }
.scene::before{
    content:""; position:absolute; top:-15%; right:-15%; bottom:-15%; left:-15%;
    background:
        radial-gradient(120% 70% at 50% -8%, rgba(201,162,39,.16), rgba(201,162,39,0) 55%),
        radial-gradient(100% 60% at 50% 118%, rgba(124,29,29,.18), rgba(124,29,29,0) 60%);
}
.scene .haze{
    position:absolute; left:-20%; right:-20%; top:-20%; bottom:-20%;
    background:
        radial-gradient(38% 50% at 30% 42%, rgba(140,124,92,.06), transparent 62%),
        radial-gradient(46% 60% at 72% 56%, rgba(140,124,92,.05), transparent 64%);
    animation:haze 28s ease-in-out infinite alternate;
}
@keyframes haze{ 0%{ transform:translate3d(-2%,1%,0); } 100%{ transform:translate3d(3%,-2%,0); } }

.skyline{ position:absolute; left:50%; bottom:0; width:2200px; max-width:none;
    transform:translateX(-50%); opacity:.85; }
.skyline.back{ opacity:.4; bottom:14px; }
.win{ animation:flick 4s steps(1) infinite; }
.win.b{ animation-delay:1.3s; } .win.c{ animation-delay:2.6s; }
.win.d{ animation-delay:.7s; }  .win.e{ animation-delay:3.1s; }
@keyframes flick{ 0%,92%{opacity:1} 93%,96%{opacity:.25} 97%,100%{opacity:1} }

/* readability scrim (#overlay is also touched by the engine, harmlessly) */
#overlay{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:-2; pointer-events:none;
    background:
        radial-gradient(120% 95% at 50% 44%, rgba(0,0,0,.30), rgba(0,0,0,.70) 78%, rgba(0,0,0,.93)),
        linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.22) 30%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.86)); }

/* film grain (cheap SVG noise; no blur/blend) */
.grain{
    position:fixed; top:-50%; right:-50%; bottom:-50%; left:-50%; z-index:40; pointer-events:none; opacity:.045;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    animation:grain .6s steps(3) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-4%,2%)}
    66%{transform:translate(3%,-3%)} 100%{transform:translate(-2%,1%)} }
.scan{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:41; pointer-events:none; opacity:.20;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.5) 2px 3px); }
.vignette{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:42; pointer-events:none;
    background:radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 44%, rgba(0,0,0,.55) 90%, rgba(0,0,0,.85) 100%); }
.ver{ position:fixed; right:11px; bottom:8px; z-index:43; pointer-events:none;
    font:300 10px "Oswald",sans-serif; letter-spacing:.22em;
    color:rgba(180,168,140,.35); }

/* ---- art-deco frame ---------------------------------------------------- */
.frame{ position:fixed; top:26px; right:26px; bottom:26px; left:26px; z-index:30; pointer-events:none;
    border:1px solid rgba(201,162,39,.42); }
.frame::before{ content:""; position:absolute; top:6px; right:6px; bottom:6px; left:6px;
    border:1px solid rgba(201,162,39,.18); }
.corner{ position:absolute; width:44px; height:44px; }
.corner::before,.corner::after{ content:""; position:absolute; background:var(--gold);
    box-shadow:0 0 6px rgba(201,162,39,.45); }
.corner::before{ width:44px; height:2px; } .corner::after{ width:2px; height:44px; }
.corner .pip{ position:absolute; width:7px; height:7px; background:var(--gold);
    transform:rotate(45deg); box-shadow:0 0 7px rgba(240,212,121,.7); }
.corner.tl{ top:-1px; left:-1px; } .corner.tr{ top:-1px; right:-1px; }
.corner.bl{ bottom:-1px; left:-1px; } .corner.br{ bottom:-1px; right:-1px; }
.corner.tr::before{ right:0; } .corner.tr::after{ right:0; }
.corner.bl::before{ bottom:0; } .corner.bl::after{ bottom:0; }
.corner.br::before{ right:0; bottom:0; } .corner.br::after{ right:0; bottom:0; }
.corner.tl .pip{ top:9px; left:9px; } .corner.tr .pip{ top:9px; right:9px; }
.corner.bl .pip{ bottom:9px; left:9px; } .corner.br .pip{ bottom:9px; right:9px; }

/* ---- center stage ------------------------------------------------------ */
.stage{ position:relative; z-index:20; width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:6vh 5vw;
    opacity:0; animation:rise 1s .1s ease forwards; }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.emblem{ width:112px; height:112px; margin-bottom:16px; position:relative; }
.emblem .halo{ position:absolute; top:-30%; right:-30%; bottom:-30%; left:-30%; border-radius:50%;
    background:radial-gradient(circle, rgba(201,162,39,.30), rgba(201,162,39,0) 60%);
    animation:breathe 5s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{opacity:.55; transform:scale(.97)} 50%{opacity:.95; transform:scale(1.04)} }
.emblem .rays{ transform-origin:50% 50%; animation:spin 90s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.eyebrow{ font-weight:300; letter-spacing:.58em; text-indent:.58em; font-size:12px;
    color:var(--gold-soft); text-transform:uppercase; }

/* #header / #title are populated by the engine; #title-text is its inner span */
.titlewrap{ width:min(1060px, 90vw); margin:12px 0 4px; }
#header{ text-align:center; }
#title, #title-text{ display:block; }
#title-text{
    font-family:"Cinzel","Times New Roman",serif; font-weight:700;
    font-size:clamp(24px, 4.6vw, 56px); line-height:1.06; letter-spacing:.02em;
    color:var(--gold-soft);
    text-shadow:0 1px 0 #5d4711, 0 2px 1px rgba(0,0,0,.5), 0 0 22px rgba(201,162,39,.22);
    overflow-wrap:anywhere; word-break:break-word;
}
/* if logo_use_image is ever turned on, keep the image tidy */
#title-image{ display:block; max-width:min(560px,80vw); max-height:160px;
    margin:0 auto; height:auto; }

.rule{ display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0 8px; }
.rule .ln{ height:1px; width:clamp(54px,12vw,150px);
    background:linear-gradient(90deg, transparent, var(--gold) 70%, var(--gold-bright)); }
.rule .ln.r{ background:linear-gradient(270deg, transparent, var(--gold) 70%, var(--gold-bright)); }
.rule .dot{ color:var(--gold-bright); font-size:13px; transform:translateY(-1px);
    text-shadow:0 0 10px rgba(240,212,121,.6); }

.quote{ font-family:"EB Garamond",Georgia,serif; font-style:italic;
    font-size:clamp(15px,2vw,21px); color:var(--cream-dim);
    min-height:1.5em; max-width:40ch; transition:opacity .55s ease; }

/* ---- loader ------------------------------------------------------------ */
.loader{ width:min(560px, 80vw); margin-top:40px; }
/* #loading is the track, #loading-progress is the fill the engine widens */
#loading{ position:relative; height:8px; border-radius:1px;
    background:linear-gradient(180deg,#0c0805,#1c150d);
    border:1px solid rgba(201,162,39,.32);
    box-shadow:inset 0 1px 4px rgba(0,0,0,.8); overflow:hidden; }
#loading-progress{ position:absolute; left:0; top:0; bottom:0; width:0%;
    background:linear-gradient(90deg, var(--gold-deep), var(--gold) 55%, var(--gold-bright));
    box-shadow:0 0 12px rgba(201,162,39,.55); transition:width .25s linear; }
#loading-progress::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    background-size:70px 100%; animation:shimmer 1.6s linear infinite; }
@keyframes shimmer{ 0%{background-position:-90px 0} 100%{background-position:600px 0} }

.meta{ display:flex; justify-content:space-between; align-items:baseline;
    margin-top:12px; gap:14px; font-weight:300; letter-spacing:.06em; text-transform:uppercase; }
.meta .status{ color:var(--cream-dim); font-size:13px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta .percent{ color:var(--gold-bright); font-size:15px; font-weight:500;
    letter-spacing:.08em; flex:0 0 auto; }

/* ---- server info ------------------------------------------------------- */
.info{ display:flex; gap:clamp(20px,5vw,56px); margin-top:32px;
    align-items:flex-start; flex-wrap:wrap; justify-content:center; }
.info .cell{ display:flex; flex-direction:column; gap:5px; min-width:64px; max-width:42vw; }
.info .k{ font-size:10.5px; letter-spacing:.32em; text-indent:.32em;
    color:var(--cream-faint); text-transform:uppercase; }
.info .v{ font-family:"Cinzel",serif; font-size:clamp(14px,1.8vw,19px);
    color:var(--cream); font-weight:500; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; max-width:100%; }
.info .v .map, .info .v .gamemode{ font-style:normal; }
.info .sep{ width:1px; align-self:stretch; min-height:34px;
    background:linear-gradient(180deg,transparent,rgba(201,162,39,.4),transparent); }

/* ---- bottom ticker ----------------------------------------------------- */
.foot{ position:fixed; left:0; right:0; bottom:46px; z-index:20;
    display:flex; flex-direction:column; align-items:center; gap:14px; pointer-events:none; }
.tip{ font-weight:300; letter-spacing:.16em; font-size:12.5px; text-transform:uppercase;
    color:var(--cream-dim); max-width:80vw; text-align:center; }
.tip .mk{ color:var(--gold); margin-right:10px; }
#messages{ color:var(--cream-dim); }
.brand{ font-weight:300; letter-spacing:.40em; text-indent:.40em; font-size:10px;
    color:var(--cream-faint); text-transform:uppercase; }
.brand b{ color:var(--gold-soft); font-weight:400; }

/* ---- engine stubs / errors (kept out of the way) ----------------------- */
#player{ position:absolute; z-index:-99; display:none; }
#music, #music-name, #enable-audio{ display:none; }
#error-box{ position:fixed; margin:12px; top:0; right:0; z-index:50;
    max-width:40%; min-width:100px; font-size:14px; }
.error{ position:relative; padding:6px 10px; background:#e74c3c; border-radius:2px; margin-top:6px; }
.error-title{ font-weight:bold; margin-bottom:6px; }
.close-button{ position:absolute; top:0; right:0; margin:6px; font-weight:bold; cursor:pointer; }
#warn{ display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:99;
    background:#070504; color:var(--cream); padding:24px; font-size:16px; }
#warn h1{ margin-top:0; color:var(--gold-soft); font-family:"Cinzel",serif; }

@media (max-height:600px){
    .emblem{ width:80px; height:80px; margin-bottom:8px; }
    .loader{ margin-top:22px; } .info{ margin-top:18px; } .foot{ bottom:24px; }
}