/* =========================================================================
   SpaceInvasion - NEW external start page (test, ?newversion=1)
   Separate stylesheet - the classic start page is untouched.
   All classes are prefixed .spn- to avoid collisions.
   ========================================================================= */

:root{
    --spn-accent:      #5FE7F9;
    --spn-accent-2:    #2989d8;
    --spn-purple:      #8b4ba1;
    --spn-bg:          #050a14;
    --spn-panel:       rgba(8, 16, 28, 0.72);
    --spn-panel-solid: #0a1320;
    --spn-border:      rgba(95, 231, 249, 0.30);
    --spn-text:        #e8f4ff;
    --spn-text-dim:    #9fb4c8;
    --spn-glow:        0 0 4px rgba(95,231,249,.6), 0 0 12px rgba(95,231,249,.35);
}

*{ box-sizing: border-box; }

html, body{
    margin:0; padding:0;
    background: var(--spn-bg);
    color: var(--spn-text);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.spn-page{ position: relative; min-height: 100vh; overflow-x: hidden; }

a{ color: var(--spn-accent); text-decoration: none; }
a:hover{ color: #fff; }

/* ---------- Background video ---------- */
.spn-bg{
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    background: #000 url('/inc/sp_image.jpg') center/cover no-repeat;
}
.spn-bg video{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.spn-bg.spn-bg-ready video{ opacity: 1; }
/* readability overlays - keep the planet (br) & ship (bl) visible */
.spn-bg:after{
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(5,10,20,.35) 0%, rgba(5,10,20,.78) 60%, rgba(5,10,20,.92) 100%),
        linear-gradient(180deg, rgba(5,10,20,.55) 0%, rgba(5,10,20,.10) 35%, rgba(5,10,20,.85) 100%);
}

/* ---------- Layout helpers ---------- */
.spn-wrap{ position: relative; z-index: 2; }
.spn-container{ max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.spn-section{ position: relative; padding: 78px 0; }
.spn-section + .spn-section{ border-top: 1px solid rgba(95,231,249,.08); }
.spn-section-dark{ background: linear-gradient(180deg, rgba(4,8,16,.55), rgba(4,8,16,.85)); }

.spn-eyebrow{
    display:inline-block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--spn-accent); margin-bottom: 12px; font-weight: 600;
}
.spn-h2{ font-size: 30px; margin: 0 0 10px; font-weight: 700; letter-spacing: .5px; }
.spn-sub{ color: var(--spn-text-dim); margin: 0 0 38px; max-width: 640px; }
.spn-center{ text-align: center; }
.spn-center .spn-sub{ margin-left:auto; margin-right:auto; }

/* ---------- Top navigation ---------- */
.spn-nav{
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 14px 28px;
    background: linear-gradient(180deg, rgba(4,8,16,.85), rgba(4,8,16,0));
    transition: background .3s ease;
}
.spn-nav.spn-nav-solid{ background: rgba(4,8,16,.92); border-bottom: 1px solid var(--spn-border); }

/* brand logo: top-left, grows and overlaps the bar's bottom edge once it's solid */
.spn-brand{ position: absolute; left: 24px; top: 9px; line-height: 0; z-index: 2; }
.spn-brand img{ height: 42px; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); transition: height .3s ease; }
.spn-nav-solid .spn-brand img{ height: 66px; }

.spn-nav-links{ display:flex; align-items:center; gap: 26px; }
.spn-nav-links a{ color: var(--spn-text-dim); font-size: 14px; font-weight: 500; }
.spn-nav-links a:hover{ color:#fff; text-shadow: var(--spn-glow); }
.spn-nav-flag{ height:16px; border-radius:2px; box-shadow:0 0 3px #000; vertical-align:middle; }

/* ---------- Buttons ---------- */
.spn-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 13px 26px; border-radius: 8px; cursor: pointer; border: 0;
    font-size: 15px; font-weight: 700; letter-spacing: .4px;
    color: #06121e; text-decoration: none;
    background: linear-gradient(135deg, var(--spn-accent) 0%, var(--spn-accent-2) 100%);
    box-shadow: 0 0 0 1px rgba(95,231,249,.4), 0 8px 24px rgba(41,137,216,.35);
    transition: transform .15s ease, box-shadow .25s ease;
}
.spn-btn:hover{ color:#02080f; transform: translateY(-2px); box-shadow: 0 0 0 1px var(--spn-accent), 0 0 18px rgba(95,231,249,.7), 0 10px 28px rgba(41,137,216,.5); }
.spn-btn-lg{ padding: 16px 34px; font-size: 17px; }
.spn-btn-ghost{
    background: rgba(6,12,22,.5); color: var(--spn-text);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    border: 1px solid var(--spn-border); box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.spn-btn-ghost:hover{ color:#fff; background: rgba(8,16,28,.62); border-color: var(--spn-accent); box-shadow: var(--spn-glow), 0 6px 20px rgba(0,0,0,.4); transform: translateY(-2px); }
.spn-btn-discord{
    background: linear-gradient(135deg, #5865F2, #404EED); color:#fff;
    box-shadow: 0 8px 24px rgba(88,101,242,.4);
}
.spn-btn-discord:hover{ color:#fff; box-shadow: 0 0 18px rgba(88,101,242,.8), 0 10px 28px rgba(88,101,242,.5); }

/* ---------- Hero ---------- */
.spn-hero{
    position: relative; z-index: 2;
    min-height: 100vh; display: flex; align-items: center;
    padding: 120px 0 60px;
}
.spn-hero-grid{
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; width:100%;
}
.spn-hero-left h1{
    font-size: 52px; line-height: 1.05; margin: 0 0 18px; font-weight: 800;
    text-shadow: 0 2px 30px rgba(0,0,0,.8);
}
.spn-hero-left h1 .spn-grad{
    background: linear-gradient(90deg, #9ef6ff, #d4ecff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.spn-hero-tag{ font-size: 18px; color: var(--spn-text-dim); max-width: 520px; margin: 0 0 30px; }
.spn-hero-cta{ display:flex; gap: 14px; flex-wrap: wrap; align-items:center; }

.spn-stats{ display:flex; gap: 34px; margin-top: 42px; flex-wrap: wrap; }
.spn-stat b{ display:block; font-size: 26px; color:#fff; text-shadow: var(--spn-glow); }
.spn-stat span{ font-size: 12px; color: var(--spn-text-dim); text-transform: uppercase; letter-spacing: 1.5px; }

/* ---------- Auth panel ---------- */
.spn-auth{
    position: relative;
    background: var(--spn-panel);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--spn-border);
    border-radius: 16px; padding: 26px 26px 30px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.6), inset 0 0 60px rgba(95,231,249,.04);
}
.spn-auth:before{
    content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
    background: linear-gradient(135deg, rgba(95,231,249,.5), transparent 40%, transparent 60%, rgba(139,75,161,.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding:1px;
}
.spn-auth h3{ margin: 0 0 4px; font-size: 20px; }
.spn-auth .spn-auth-sub{ margin: 0 0 18px; font-size: 13px; color: var(--spn-text-dim); }

/* container the bitmeup client renders the login form into */
#bitmeup-login{ min-height: 150px; }

.spn-auth-or{
    display:flex; align-items:center; gap:12px; color: var(--spn-text-dim);
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin: 18px 0 14px;
}
.spn-auth-or:before, .spn-auth-or:after{ content:""; flex:1; height:1px; background: rgba(255,255,255,.12); }

.spn-social{ display:flex; flex-direction: column; gap: 10px; }
.spn-social a{
    display:flex; align-items:center; gap: 12px; padding: 11px 16px; border-radius: 8px;
    font-weight: 600; font-size: 14px; color:#fff; transition: transform .15s ease, filter .2s ease;
    border: 1px solid rgba(255,255,255,.1);
}
.spn-social a:hover{ transform: translateY(-2px); filter: brightness(1.12); }
.spn-social .spn-ic{ width: 20px; height: 20px; flex: 0 0 20px; display:inline-block; }
.spn-social-google{ background:#fff; color:#222 !important; }
.spn-social-facebook{ background:#1877F2; }
.spn-social-steam{ background: linear-gradient(135deg,#2a475e,#1b2838); }

.spn-auth-register{
    margin-top: 18px; text-align:center;
}
.spn-auth-register .spn-btn{ width:100%; }

/* ---------- Feature cards ---------- */
.spn-cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.spn-card{
    background: var(--spn-panel); border: 1px solid rgba(95,231,249,.14); border-radius: 14px;
    padding: 26px 22px; transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.spn-card:hover{ transform: translateY(-6px); border-color: var(--spn-border); box-shadow: 0 16px 40px rgba(0,0,0,.5), var(--spn-glow); }
.spn-card-ic{
    width: 50px; height: 50px; border-radius: 12px; display:flex; align-items:center; justify-content:center;
    font-size: 24px; margin-bottom: 16px;
    background: radial-gradient(circle at 30% 30%, rgba(95,231,249,.25), rgba(41,137,216,.1));
    border: 1px solid var(--spn-border); color: var(--spn-accent); text-shadow: var(--spn-glow);
}
.spn-card h4{ margin: 0 0 8px; font-size: 17px; }
.spn-card p{ margin: 0; color: var(--spn-text-dim); font-size: 14px; }

/* ---------- Screenshots ---------- */
.spn-shots{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.spn-shot{
    position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 16/9;
    border: 1px solid rgba(95,231,249,.16); background:#06101c;
    transition: transform .2s ease, box-shadow .25s ease;
}
.spn-shot img{ width: 100%; height: 100%; object-fit: cover; display:block; transition: transform .4s ease; }
.spn-shot:hover{ transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.55), var(--spn-glow); }
.spn-shot:hover img{ transform: scale(1.08); }
.spn-shot:after{
    content:"\1F50D"; /* magnifier */
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size: 30px; opacity:0; background: rgba(4,10,20,.45); transition: opacity .2s ease;
    text-shadow: var(--spn-glow);
}
.spn-shot:hover:after{ opacity:1; }

/* ---------- News & patches ---------- */
.spn-two{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items:start; }

.spn-news-item{
    display:block; background: var(--spn-panel); border: 1px solid rgba(95,231,249,.12);
    border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; transition: border-color .2s, transform .15s;
}
.spn-news-item:hover{ border-color: var(--spn-border); transform: translateX(4px); }
.spn-news-date{ font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--spn-accent); }
.spn-news-item h4{ margin: 6px 0 6px; font-size: 16px; color:#fff; }
.spn-news-item p{ margin: 0; font-size: 13px; color: var(--spn-text-dim); }

.spn-patch{
    background: var(--spn-panel); border: 1px solid rgba(139,75,161,.22);
    border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
}
.spn-patch-head{ display:flex; align-items:center; gap:10px; margin-bottom: 8px; }
.spn-badge{
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 5px; background: rgba(139,75,161,.25); color:#e6c6f5; border:1px solid rgba(139,75,161,.4);
}
.spn-patch-date{ font-size: 11px; color: var(--spn-text-dim); }
.spn-patch h4{ margin: 0 0 6px; font-size: 15px; color:#fff; }
.spn-patch ul{ margin: 0; padding-left: 18px; }
.spn-patch li{ font-size: 13px; color: var(--spn-text-dim); margin-bottom: 3px; }
.spn-empty{ color: var(--spn-text-dim); font-size: 14px; font-style: italic; }

/* ---------- Discord / giveaway banner ---------- */
.spn-discord{
    position: relative; overflow:hidden;
    background: linear-gradient(120deg, rgba(88,101,242,.22), rgba(41,137,216,.12));
    border: 1px solid rgba(88,101,242,.35); border-radius: 18px;
    padding: 44px 48px; display:flex; align-items:center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.spn-discord:before{
    content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%;
    background: radial-gradient(circle, rgba(88,101,242,.4), transparent 70%);
}
.spn-discord h3{ margin: 0 0 8px; font-size: 26px; }
.spn-discord p{ margin: 0; color: var(--spn-text-dim); max-width: 560px; }
.spn-discord .spn-gift{ color: #ffd76a; font-weight: 700; }

/* ---------- Footer ---------- */
.spn-footer{
    position: relative; z-index: 2;
    background: rgba(3,7,13,.94); border-top: 1px solid rgba(95,231,249,.14);
    padding: 34px 0 28px; font-size: 13px; color: var(--spn-text-dim);
}
.spn-footer-row{ display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap: wrap; }
.spn-footer-links a{ color: var(--spn-text-dim); margin: 0 4px; }
.spn-footer-links a:hover{ color:#fff; }
.spn-footer-social img{ height: 28px; border-radius: 5px; box-shadow: 0 0 3px #000; cursor:pointer; margin-left: 8px; vertical-align: middle; transition: transform .15s; }
.spn-footer-social img:hover{ transform: translateY(-2px); }
.spn-footer-langs{ position: relative; }
.spn-lang-toggle{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; color: var(--spn-text-dim); }
.spn-lang-menu{
    display:none; position:absolute; bottom: 30px; left: 0; z-index: 50;
    background: var(--spn-panel-solid); border: 1px solid var(--spn-border); border-radius: 8px;
    padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.6); width: 360px;
}
.spn-footer-langs.spn-open .spn-lang-menu{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
.spn-lang-menu a{ display:flex; align-items:center; gap:8px; padding: 6px 8px; border-radius:5px; color: var(--spn-text-dim); font-size: 12px; }
.spn-lang-menu a:hover{ background: rgba(95,231,249,.12); color:#fff; }
.spn-lang-menu img{ width: 16px; }

/* =========================================================================
   Reusable modal building blocks needed by Start/Containers.tpl
   (the old design defined these in Start/Header.tpl; we re-declare them here)
   ========================================================================= */
.light_container{
    position: fixed; left:0; top:0; z-index: 9000;
    background: rgba(0,0,0,.78); width:100%; height:100%;
}
.light_container_box{
    position: relative; padding: 30px;
    background: var(--spn-panel-solid);
    border: 1px solid var(--spn-border); border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.7);
}
.message_box{
    display:inline-block; background: var(--spn-panel-solid); padding: 22px;
    border: 1px solid var(--spn-border); border-radius: 12px; color:#fff; font-size: 15px;
    box-shadow: 0 0 18px rgba(95,231,249,.25);
}
.playButton{
    display:inline-block; color:#06121e; font-weight: 700; border-radius: 8px; padding: 10px 18px; cursor:pointer;
    background: linear-gradient(135deg, var(--spn-accent), var(--spn-accent-2));
    box-shadow: 0 6px 18px rgba(41,137,216,.4);
}
.playButton:hover{ filter: brightness(1.1); }

/* big screenshot viewer (Start/Containers.tpl markup) */
#screenshots\.container\.big img,
#screenshots\.container img{ width:100%; height:100%; object-fit: cover; display:block; }

/* ---------- Scroll-darkening scrim (hero light, deeper sections darker) ---------- */
.spn-scrim{
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: #04080f; opacity: 0; transition: opacity .15s linear;
}

/* ---------- "Live / actively developed" trust pill ---------- */
.spn-live{
    display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
    padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight:600; letter-spacing:.4px;
    color:#bfeede; background: rgba(46,213,115,.10); border:1px solid rgba(46,213,115,.35);
}
.spn-live i{ width:8px; height:8px; border-radius:50%; background:#2ed573; box-shadow:0 0 8px #2ed573; animation: spn-pulse 1.6s infinite; }
@keyframes spn-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.65); } }

/* ---------- SI2: honest, clearly subordinate "second universe" section ---------- */
.spn-si2{ background: linear-gradient(180deg, rgba(4,8,16,.45), rgba(4,8,16,.72)); }
.spn-si2-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items:center; }
.spn-si2-text .spn-eyebrow{ color:#9aa6c8; }
.spn-si2-text .spn-h2{ font-size: 24px; opacity:.95; }
.spn-si2-note{
    display:inline-block; margin: 0 0 18px; padding:5px 12px; border-radius:6px; font-size:12px;
    color:#e3c79a; background: rgba(255,190,90,.08); border:1px solid rgba(255,190,90,.25);
}
.spn-si2-shots{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.spn-si2-shot{
    border-radius:10px; overflow:hidden; aspect-ratio:16/10; opacity:.82;
    border:1px solid rgba(255,255,255,.08); transition: opacity .2s ease, transform .2s ease;
}
.spn-si2-shot:hover{ opacity:1; transform: translateY(-3px); }
.spn-si2-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 880px){ .spn-si2-grid{ grid-template-columns: 1fr; } .spn-si2-shots{ grid-template-columns: repeat(3,1fr); } }

/* ---------- Hero: newest forum post (fills the free space up top) ---------- */
.spn-hero-news{
    display:block; margin-top:30px; max-width:540px;
    padding:16px 18px; border-radius:14px; text-decoration:none;
    background: rgba(8,16,28,.58); border:1px solid rgba(95,231,249,.18);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: border-color .2s ease, transform .15s ease;
}
.spn-hero-news:hover{ border-color: var(--spn-border); transform: translateY(-2px); }
.spn-hero-news-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.spn-hero-news-tag{
    flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:#06121e; background: var(--spn-accent); padding:4px 8px; border-radius:5px;
}
.spn-hero-news-title{ flex:1; min-width:0; color:#fff; font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spn-hero-news-date{ flex:0 0 auto; color: var(--spn-text-dim); font-size:11px; }
.spn-hero-news-text{
    margin:0; color: var(--spn-text-dim); font-size:13px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------- Scroll-down hint ---------- */
.spn-scroll-hint{
    position:absolute; left:50%; bottom:22px; z-index:5;
    width:42px; height:42px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--spn-border); background: rgba(8,16,28,.5);
    transform: translateX(-50%); animation: spn-bounce 1.8s infinite ease-in-out;
    transition: opacity .35s ease;
}
.spn-scroll-hint:hover{ background: rgba(95,231,249,.18); box-shadow: var(--spn-glow); }
.spn-chev{ width:11px; height:11px; border-right:2px solid var(--spn-accent); border-bottom:2px solid var(--spn-accent); transform: rotate(45deg) translateY(-2px); }
@keyframes spn-bounce{ 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(8px); } }

/* ---------- Hide the Bitmeup login box's built-in social row (we render our own) ---------- */
#bitmeup-login > form > table > tbody > tr:last-child{ display: none !important; }

/* ---------- Big social / discord buttons (icon fills the left of the button) ---------- */
.spn-sso-list{ display:flex; flex-direction: column; gap: 11px; }
.spn-sso{
    display:flex; align-items: stretch; min-height: 42px; border-radius: 10px; overflow: hidden;
    color:#fff; font-weight: 700; font-size: 14.5px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
    transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.spn-sso:hover{ transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(0,0,0,.4); color:#fff; }
.spn-sso-ic{
    flex: 0 0 46px; width: 46px; display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.22);
}
.spn-sso-ic img{ width: 30px; height: 30px; object-fit: contain; display:block; }
.spn-sso-ic svg{ display:block; }
.spn-sso-tx{ flex:1; display:flex; align-items:center; justify-content:center; padding: 0 14px; text-align:center; }
.spn-sso-google{ background:#fff; color:#1f2937; border-color: rgba(0,0,0,.12); }
.spn-sso-google .spn-sso-ic{ background:#fff; }
.spn-sso-google:hover{ color:#1f2937; }
.spn-sso-fb{ background:#1877F2; }
.spn-sso-fb .spn-sso-ic{ background: rgba(0,0,0,.14); }
.spn-sso-steam{ background: linear-gradient(135deg,#2a475e,#1b2838); }
.spn-sso-discord{ background: linear-gradient(135deg,#5865F2,#404EED); border-color: rgba(255,255,255,.2); font-size: 16px; }
.spn-sso-wide{ min-height: 58px; padding-right: 8px; }
.spn-sso-wide .spn-sso-ic{ flex-basis: 62px; width:62px; background: rgba(0,0,0,.18); }

/* ---------- Showcase carousel (features paired with screenshots) ---------- */
.spn-caro{ position: relative; margin-top: 8px; }
.spn-caro-vp{ overflow: hidden; }
.spn-caro-track{ display:flex; gap: 20px; transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform; }
.spn-caro-tile{
    flex: 0 0 calc((100% - 40px) / 3);
    position: relative; height: 300px; border-radius: 16px; overflow: hidden;
    background-color: #0a1422; background-size: cover; background-position: center;
    border: 1px solid rgba(95,231,249,.16); box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.spn-caro-tile:before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(4,8,16,.05) 0%, rgba(4,8,16,.45) 45%, rgba(4,8,16,.92) 100%);
}
.spn-caro-tile-in{ position:absolute; left:0; right:0; bottom:0; padding: 22px; }
.spn-caro-ic{
    width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:22px; margin-bottom:12px; background: rgba(8,16,28,.7); border:1px solid var(--spn-border);
    box-shadow: var(--spn-glow);
}
.spn-caro-tile-in h4{ margin:0 0 6px; font-size:19px; color:#fff; }
.spn-caro-tile-in p{ margin:0; font-size:13.5px; color: #cfe0f0; }
.spn-caro-arrow{
    position:absolute; top:50%; transform: translateY(-50%); z-index:5;
    width:46px; height:46px; border-radius:50%; cursor:pointer;
    background: rgba(8,16,28,.85); color:#fff; border:1px solid var(--spn-border);
    font-size:16px; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 18px rgba(0,0,0,.5); transition: background .2s, box-shadow .2s;
}
.spn-caro-arrow:hover{ background: rgba(95,231,249,.2); box-shadow: var(--spn-glow); }
.spn-caro-prev{ left:-10px; }
.spn-caro-next{ right:-10px; }
.spn-caro-dots{ display:flex; justify-content:center; gap:8px; margin-top: 22px; }
.spn-caro-dots i{
    width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.25); cursor:pointer; transition: all .2s;
}
.spn-caro-dots i.spn-on{ background: var(--spn-accent); box-shadow: var(--spn-glow); width:22px; border-radius:5px; }
@media (max-width: 1023px){ .spn-caro-tile{ flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 699px){ .spn-caro-tile{ flex-basis: 100%; height: 260px; } .spn-caro-prev{ left:2px; } .spn-caro-next{ right:2px; } }

/* looping UI clip inside a showcase tile */
.spn-caro-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:#0a1422; }
.spn-caro-tile:before{ z-index:1; }
.spn-caro-tile-in{ z-index:2; }

/* ---------- Tools & community links ---------- */
.spn-tools{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spn-tool{
    display:flex; align-items:flex-start; gap:14px; padding: 20px; border-radius:14px;
    background: var(--spn-panel); border:1px solid rgba(95,231,249,.14); text-decoration:none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.spn-tool:hover{ transform: translateY(-4px); border-color: var(--spn-border); box-shadow: 0 14px 34px rgba(0,0,0,.5), var(--spn-glow); }
.spn-tool-ic{ font-size:26px; line-height:1; flex:0 0 auto; }
.spn-tool-tx h4{ margin:0 0 5px; color:#fff; font-size:16px; }
.spn-tool-tx p{ margin:0; color: var(--spn-text-dim); font-size:13px; }
@media (max-width: 980px){ .spn-tools{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .spn-tools{ grid-template-columns: 1fr; } }

/* ---------- Screenshots show-more ---------- */
.spn-shot-hidden{ display: none; }

/* ---------- Language menu in the header (drops down, names never wrap) ---------- */
.spn-langs{ position: relative; }
.spn-nav-flag{ height:16px; border-radius:2px; box-shadow:0 0 3px #000; vertical-align:middle; }
.spn-lang-toggle{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; color: var(--spn-text-dim); font-size:14px; }
.spn-lang-toggle:hover{ color:#fff; }
.spn-nav-langs .spn-lang-menu{
    display:none; position:absolute; top: 38px; right: 0; left:auto; bottom:auto; width:auto; min-width:330px; z-index: 60;
    background: var(--spn-panel-solid); border: 1px solid var(--spn-border); border-radius: 10px;
    padding: 8px; box-shadow: 0 16px 36px rgba(0,0,0,.6);
    grid-template-columns: 1fr 1fr 1fr; gap: 2px;
    max-height: 70vh; overflow-y: auto;
}
.spn-nav-langs.spn-open .spn-lang-menu{ display: grid; }
.spn-nav-langs .spn-lang-menu a{
    display:flex; align-items:center; gap:8px; padding: 7px 10px; border-radius:6px;
    color: var(--spn-text-dim); font-size: 12px; white-space: nowrap;
}
.spn-nav-langs .spn-lang-menu a span{ white-space: nowrap; }
.spn-nav-langs .spn-lang-menu a:hover{ background: rgba(95,231,249,.14); color:#fff; }
.spn-nav-langs .spn-lang-menu img{ width: 16px; flex: 0 0 16px; }

/* ---------- Reveal-on-scroll ---------- */
.spn-reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.spn-reveal.spn-in{ opacity:1; transform: none; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width: 11px; }
::-webkit-scrollbar-track{ background:#0a1320; }
::-webkit-scrollbar-thumb{ background:#1d3247; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:#2a4a66; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
    .spn-hero-grid{ grid-template-columns: 1fr; gap: 36px; }
    .spn-hero-left h1{ font-size: 40px; }
    .spn-cards{ grid-template-columns: repeat(2, 1fr); }
    .spn-shots{ grid-template-columns: repeat(2, 1fr); }
    .spn-two{ grid-template-columns: 1fr; }
    .spn-nav-links a:not(.spn-nav-cta){ display:none; }
}
@media (max-width: 560px){
    .spn-container{ padding: 0 18px; }
    .spn-hero-left h1{ font-size: 32px; }
    .spn-cards{ grid-template-columns: 1fr; }
    .spn-shots{ grid-template-columns: 1fr; }
    .spn-discord{ padding: 30px 24px; }
}

/* =========================================================================
   VARIANT 2 (?newversion=2) - "more background" layout.
   Lighter overlay so the artwork stays visible (the big planet bottom-right,
   the ship bottom-left). Copy held to the left, only a compact login/register
   box pinned to the top-right. Variant 1 (.spn-v1) is intentionally untouched.
   ========================================================================= */

/* Soft spotlight behind the left-hand copy; clears toward the right & bottom,
   so the planet in the lower-right corner shows through. */
.spn-v2 .spn-bg:after{
    background:
        radial-gradient(78% 82% at 20% 44%, rgba(4,8,16,.88) 0%, rgba(4,8,16,.50) 42%, rgba(4,8,16,.12) 66%, rgba(4,8,16,0) 80%),
        linear-gradient(180deg, rgba(4,8,16,.55) 0%, rgba(4,8,16,0) 18%, rgba(4,8,16,0) 82%, rgba(4,8,16,.22) 100%);
}

@media (min-width: 981px){
    /* hero copy stays left, the compact auth box is pinned to the top-right */
    .spn-v2 .spn-hero{ align-items: flex-start; padding-top: 124px; }
    .spn-v2 .spn-hero-grid{
        grid-template-columns: minmax(0, 500px) 340px;
        justify-content: space-between;
        align-items: start;
        gap: 48px;
    }
    .spn-v2 .spn-hero-left h1{ font-size: 38px; }
    .spn-v2 .spn-hero-tag{ max-width: 460px; }
    .spn-v2 .spn-stats{ margin-top: 34px; gap: 26px; }

    .spn-v2 .spn-auth{
        max-width: 304px; margin-left: auto;
        padding: 20px 20px 22px;
        background: rgba(8, 16, 28, 0.60);
    }
}

/* =========================================================================
   v3 additions: running-light borders, honeycomb, login/register restyle,
   synth/fleet/rankings sections.
   ========================================================================= */

/* ---------- Running blue light around a box border (ui-box style) ---------- */
@property --spn-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.spn-glow{ position:relative; }
.spn-glow::after{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:4;
    background: conic-gradient(from var(--spn-ang),
        transparent 0deg, transparent 300deg,
        rgba(95,231,249,.10) 320deg, var(--spn-accent) 338deg, #e6fcff 348deg, var(--spn-accent) 354deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: spn-rotate 4.5s linear infinite;
}
@keyframes spn-rotate{ to{ --spn-ang:360deg; } }

/* ---------- Honeycomb pattern overlay for larger sections ---------- */
.spn-hex{ position:relative; isolation:isolate; }
.spn-hex::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
    background: var(--spn-accent);
    -webkit-mask:
        url('/images/client/hexagon_si.svg') 0 0 / 30px 17px repeat,
        radial-gradient(130% 130% at 100% 0%, #000 0%, transparent 60%);
    -webkit-mask-composite: source-in;
    mask:
        url('/images/client/hexagon_si.svg') 0 0 / 30px 17px repeat,
        radial-gradient(130% 130% at 100% 0%, #000 0%, transparent 60%);
    mask-composite: intersect;
}
.spn-hex > *{ position:relative; z-index:1; }

/* ---------- Login / register box restyle (scoped to the bitmeup markup) ---------- */
#bitmeup-login{ min-height:0 !important; }
#bitmeup-login table, #bitmeup-register table{ width:100% !important; }
#bitmeup-login input[type="text"], #bitmeup-login input[type="password"],
#bitmeup-register input[type="text"], #bitmeup-register input[type="password"]{
    width:100% !important; box-sizing:border-box !important; height:46px !important; padding:0 15px !important;
    margin:6px 0 !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69' height='39' viewBox='0 0 69.282 39'%3E%3Cg fill='none' stroke='%235FE7F9' stroke-opacity='0.13' stroke-width='1'%3E%3Cpath d='M17.321 0L34.641 6.5L34.641 19.5L17.321 26L0 19.5L0 6.5Z'/%3E%3Cpath d='M51.962 0L69.282 6.5L69.282 19.5L51.962 26L34.641 19.5L34.641 6.5Z'/%3E%3Cpath d='M34.641 19.5L51.962 26L51.962 39L34.641 45.5L17.321 39L17.321 26Z'/%3E%3C/g%3E%3C/svg%3E") left center / 19px 11px repeat,
        rgba(4,10,20,.72) !important;
    border:1px solid rgba(95,231,249,.22) !important; border-radius:10px !important;
    color:#fff !important; font-family:"Segoe UI",Roboto,Arial,sans-serif !important; font-size:15px !important;
    letter-spacing:.2px; outline:none !important; box-shadow:none;
    transition:border-color .2s ease, box-shadow .2s ease;
}
#bitmeup-login input:focus, #bitmeup-register input:focus{
    border-color:var(--spn-accent) !important; animation:spn-field-focus 1.7s ease-in-out infinite;
}
@keyframes spn-field-focus{
    0%,100%{ box-shadow:0 0 0 2px rgba(95,231,249,.12); }
    50%{ box-shadow:0 0 0 3px rgba(95,231,249,.30); }
}
#bitmeup-login input::placeholder, #bitmeup-register input::placeholder{ color:#7f94a8 !important; }

/* wow login button: hide the old dot-arrow, make a glowing pill with a shine */
#bitmeup-login .loginbutton{
    position:relative !important; inset:auto !important; display:flex !important; align-items:center; justify-content:center;
    width:100% !important; height:46px !important; margin:16px 0 2px !important; border-radius:10px !important;
    cursor:pointer; overflow:hidden;
    background:linear-gradient(135deg, var(--spn-accent), var(--spn-accent-2)) !important;
    box-shadow:0 8px 22px rgba(41,137,216,.4), 0 0 0 1px rgba(95,231,249,.5) !important;
    transition:transform .15s ease, box-shadow .25s ease;
}
#bitmeup-login .loginbutton:hover{ transform:translateY(-2px); box-shadow:0 0 18px rgba(95,231,249,.7), 0 10px 26px rgba(41,137,216,.5) !important; }
#bitmeup-login .loginbutton .box{ display:none !important; }
#bitmeup-login .loginbutton::after{ content:var(--spn-login-label, "Login") " \2192"; color:#06121e; font-weight:800; font-size:16px; letter-spacing:.5px; position:relative; z-index:1; }
#bitmeup-login .loginbutton::before{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:.42;
    background:#eafdff;
    -webkit-mask:url('/images/client/hexagon_si.svg') 0 100% / 13px 7.5px repeat,
                 linear-gradient(90deg,#000 0%, transparent 30%, transparent 70%, #000 100%) no-repeat,
                 linear-gradient(0deg,#000 0%, transparent 50%) no-repeat;
    -webkit-mask-composite:source-in, source-in;
            mask:url('/images/client/hexagon_si.svg') 0 100% / 13px 7.5px repeat,
                 linear-gradient(90deg,#000 0%, transparent 30%, transparent 70%, #000 100%) no-repeat,
                 linear-gradient(0deg,#000 0%, transparent 50%) no-repeat;
    mask-composite:intersect, intersect;
}
@keyframes spn-shine{ 0%{ left:-60%; } 55%,100%{ left:130%; } }

/* register modal: restyle the create-account button */
#bitmeup-register input[type="button"]{
    width:100% !important; height:48px !important; margin-top:8px !important; border:0 !important;
    border-radius:10px !important; cursor:pointer;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69' height='39' viewBox='0 0 69.282 39'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.45' stroke-width='1.2'%3E%3Cpath d='M17.321 0L34.641 6.5L34.641 19.5L17.321 26L0 19.5L0 6.5Z'/%3E%3Cpath d='M51.962 0L69.282 6.5L69.282 19.5L51.962 26L34.641 19.5L34.641 6.5Z'/%3E%3Cpath d='M34.641 19.5L51.962 26L51.962 39L34.641 45.5L17.321 39L17.321 26Z'/%3E%3C/g%3E%3C/svg%3E") bottom left / 42px 24px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69' height='39' viewBox='0 0 69.282 39'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.45' stroke-width='1.2'%3E%3Cpath d='M17.321 0L34.641 6.5L34.641 19.5L17.321 26L0 19.5L0 6.5Z'/%3E%3Cpath d='M51.962 0L69.282 6.5L69.282 19.5L51.962 26L34.641 19.5L34.641 6.5Z'/%3E%3Cpath d='M34.641 19.5L51.962 26L51.962 39L34.641 45.5L17.321 39L17.321 26Z'/%3E%3C/g%3E%3C/svg%3E") bottom right / 42px 24px no-repeat,
        linear-gradient(135deg, var(--spn-accent), var(--spn-accent-2)) !important;
    color:#06121e !important; font-weight:800 !important; font-size:16px !important;
    box-shadow:0 8px 24px rgba(41,137,216,.4) !important; transition:transform .15s ease, box-shadow .25s ease;
}
#bitmeup-register input[type="button"]:hover{ transform:translateY(-2px); box-shadow:0 0 18px rgba(95,231,249,.7), 0 10px 28px rgba(41,137,216,.5) !important; }

/* ---------- Bigger Steam icon in its social button ---------- */
.spn-sso-steam .spn-sso-ic img{ width:40px; height:40px; }
.spn-sso-steam .spn-sso-ic{ background:rgba(0,0,0,.28); }

/* ---------- Animated Play-now / register button ---------- */
.spn-regbtn{ position:relative; overflow:hidden; animation:spn-cta-pulse 2.6s ease-in-out infinite; }
.spn-regbtn::before{
    content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; z-index:1;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform:skewX(-20deg); animation:spn-shine 3.2s ease-in-out infinite; pointer-events:none;
}
@keyframes spn-cta-pulse{
    0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(95,231,249,.6), 0 0 14px rgba(95,231,249,.35), 0 8px 24px rgba(41,137,216,.4); }
    50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px #bff6ff, 0 0 30px rgba(95,231,249,.85), 0 0 50px rgba(95,231,249,.4), 0 10px 30px rgba(41,137,216,.55); }
}

/* ---------- News defines height, patches capped to match (fade at the cut) ---------- */
.spn-patches-cap{ position:relative; }
.spn-patches-cap.spn-capped{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 80%, transparent 100%);
            mask-image:linear-gradient(#000 80%, transparent 100%);
}

/* ---------- Synth teaser / generic split ---------- */
.spn-split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.spn-split-media{ border-radius:16px; overflow:hidden; aspect-ratio:16/12; box-shadow:0 18px 44px rgba(0,0,0,.5); }
.spn-split-vid{ width:100%; height:100%; object-fit:cover; display:block; background:#0a1422; }
.spn-split-text .spn-sub{ margin-bottom:26px; }

/* ---------- Ships, tech & tools ---------- */
.spn-fleet-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:center; }
.spn-ships{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.spn-ship{ border-radius:12px; overflow:hidden; aspect-ratio:1; border:1px solid rgba(95,231,249,.16); background:#06101c; }
.spn-ship img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.spn-ship:hover img{ transform:scale(1.08); }
.spn-tool-col{ display:flex; flex-direction:column; gap:14px; }
.spn-gfx{ display:flex; justify-content:center; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-top:40px; }
.spn-gfx-item img{ height:92px; width:auto; display:block; filter:drop-shadow(0 8px 18px rgba(0,0,0,.55)); transition:transform .25s ease; }
.spn-gfx-item:hover img{ transform:translateY(-6px) scale(1.05); }

/* ---------- Rankings (battle HoF + universe HoF) ---------- */
.spn-rank-h{ font-size:18px; color:#fff; margin:0 0 16px; }
.spn-rank-list{ list-style:none; margin:0; padding:0; }
.spn-rank-row{ display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:10px;
    background:var(--spn-panel); border:1px solid rgba(95,231,249,.12); margin-bottom:8px; }
.spn-rank-pos{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:13px; color:#06121e; background:var(--spn-accent); }
.spn-rank-row:nth-child(1) .spn-rank-pos{ background:linear-gradient(135deg,#ffd76a,#e0a93b); }
.spn-rank-row:nth-child(2) .spn-rank-pos{ background:linear-gradient(135deg,#e3e8f0,#aab4c4); }
.spn-rank-row:nth-child(3) .spn-rank-pos{ background:linear-gradient(135deg,#e6a86a,#b9763c); }
.spn-rank-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.spn-rank-names{ color:#fff; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spn-vs{ color:var(--spn-text-dim); font-weight:400; font-size:12px; padding:0 4px; }
.spn-rank-sub{ color:var(--spn-text-dim); font-size:11px; }
.spn-rank-val{ flex:0 0 auto; color:var(--spn-accent); font-weight:700; font-size:14px; }
.spn-hof-uni{ background:var(--spn-panel); border:1px solid rgba(139,75,161,.22); border-radius:10px; padding:14px 16px; margin-bottom:10px; }
.spn-hof-uni-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.spn-hof-uni-head b{ color:#fff; font-size:15px; }
.spn-hof-uni-head span{ color:var(--spn-text-dim); font-size:12px; }
.spn-hof-winners{ display:flex; flex-direction:column; gap:5px; }
.spn-hof-winner{ color:#dbe7f2; font-size:13px; }

@media (max-width: 880px){
    .spn-split{ grid-template-columns:1fr; }
    .spn-fleet-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
    .spn-glow::after, .spn-scroll-hint, .spn-regbtn,
    .spn-regbtn::before, #bitmeup-login .loginbutton::before{ animation:none !important; }
}

/* ---------- Lightning strikes from around the button (in the glow area, not inside) ---------- */
.spn-svgdefs{ position:absolute; width:0; height:0; pointer-events:none; }
.spn-regbtn-wrap{ position:relative; padding:36px 40px; }
.spn-regbtn{ position:relative; z-index:2; }
.spn-regbtn-label{ position:relative; z-index:2; }
/* canvas lightning sits above the button so the sparks hint on the border */
.spn-regbtn-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
/* gentle glow pulse (the canvas lightning provides the strikes) */
.spn-auth-register .spn-regbtn{ animation:spn-cta-pulse 2.6s ease-in-out infinite; }
@keyframes spn-regflash{ 0%,100%{ filter:brightness(1); } 1%{ filter:brightness(1.16); } 9%{ filter:brightness(1); } }

/* ---------- Register / screenshot modal: blur backdrop, narrow box, page scrolls ---------- */
#div_register_site, #div_screenshots_site{
    background:rgba(2,6,12,.7) !important; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
    overflow-y:auto;   /* tall content scrolls the overlay (page-like), never the box itself */
}
#div_register_site > table{ height:auto !important; }
#div_register_site > table > tbody > tr > td{ vertical-align:top !important; padding:48px 16px !important; }
#div_register_site .light_container_box{ padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
#div_register_site #registration_box{
    width:auto !important; max-width:440px !important; margin:0 auto !important; overflow:visible !important;
    background:linear-gradient(180deg, rgba(10,18,30,.98), rgba(6,12,22,.98)) !important;
    border:1px solid var(--spn-border); border-radius:16px; padding:32px 30px 26px !important;
    box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.7);
}
/* modern close button (the anchor is the button), inside the box so it never clips */
#div_register_site #registration_box > div[style*="absolute"]{ top:14px !important; right:14px !important; }
#div_register_site #registration_box > div[style*="absolute"] > a{
    display:flex !important; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%; text-decoration:none !important;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
    transition:background .2s ease, border-color .2s ease;
}
#div_register_site #registration_box > div[style*="absolute"] > a:hover{ background:rgba(95,231,249,.18); border-color:var(--spn-border); }
#div_register_site .glyphicons-remove-circle{
    font-size:0 !important; width:auto !important; height:auto !important; background:none !important; border:0 !important;
    box-shadow:none !important; color:transparent !important; text-shadow:none !important; position:relative;
}
#div_register_site .glyphicons-remove-circle::before{
    content:"\2715" !important; font-family:Arial,"Helvetica Neue",sans-serif !important; font-size:16px !important;
    color:#cfe6f5; line-height:1;
}

/* clean modern font across the whole modal/login (kills the Comic-Sans look) */
#div_register_site, #div_register_site *, #bitmeup-login, #bitmeup-login *{
    font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
}
/* keep the icon font on login glyphicons (the password-forgot "?") */
#bitmeup-login [class*="glyphicons"], #bitmeup-login [class*="glyphicons"]::before{
    font-family:'Glyphicons' !important;
}
/* sci-fi title */
#bitmeup-register > div > span.bitmeupfont{
    font-family:"Orbitron","Segoe UI",sans-serif !important; letter-spacing:1px; color:#eaf6ff !important; font-weight:700 !important;
}

/* register social connect buttons -> clean gradient labels */
#bitmeup-register div[onclick*="Facebook"], #bitmeup-register div[onclick*="Google"], #bitmeup-register div[onclick*="Steam"]{
    width:100% !important; max-width:360px; margin:9px auto !important; padding:11px 16px !important;
    background-image:none !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:11px !important;
    box-shadow:none !important; box-sizing:border-box;
}
#bitmeup-register div[onclick*="Facebook"]{ background:linear-gradient(135deg,#1877F2,#0f57c8) !important; }
#bitmeup-register div[onclick*="Google"]{ background:linear-gradient(135deg,#3a3f4b,#23272f) !important; }
#bitmeup-register div[onclick*="Steam"]{ background:linear-gradient(135deg,#2a475e,#1b2838) !important; }
#bitmeup-register div[onclick*="Facebook"] span, #bitmeup-register div[onclick*="Google"] span, #bitmeup-register div[onclick*="Steam"] span{
    color:#fff !important; text-shadow:none !important; font-size:15px !important; font-weight:600 !important;
}
#bitmeup-register div[onclick] img{ border-radius:4px; }

/* ---------- Carousel tiles: corner honeycomb + desynced thin glow ---------- */
.spn-caro-tile-in{ z-index:3 !important; }
.spn-corner-hex{
    position:absolute; left:0; bottom:0; width:120px; height:92px; z-index:2; pointer-events:none; opacity:.5;
    background:#8fe9ff;
    -webkit-mask:url('/images/client/hexagon_si.svg') bottom left / 25px 14px repeat,
                 radial-gradient(120% 120% at 0% 100%, #000 0%, transparent 72%);
    -webkit-mask-composite:source-in;
            mask:url('/images/client/hexagon_si.svg') bottom left / 25px 14px repeat,
                 radial-gradient(120% 120% at 0% 100%, #000 0%, transparent 72%);
    mask-composite:intersect;
}
.spn-caro-track .spn-caro-tile:nth-child(2n)::after{ animation-delay:-1.4s; animation-duration:5.1s; }
.spn-caro-track .spn-caro-tile:nth-child(3n)::after{ animation-delay:-2.7s; }
.spn-caro-track .spn-caro-tile:nth-child(4n)::after{ animation-delay:-0.8s; animation-duration:4.2s; }
.spn-caro-track .spn-caro-tile:nth-child(5n)::after{ animation-delay:-3.3s; }

/* ---------- Arsenal: 4 icon categories, the 2 (bigger) tool boxes overlap the lower rows ---------- */
.spn-arsenal{ position:relative; margin-top:34px; padding-bottom:18px; }
.spn-arsenal-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.spn-cat-label{ text-align:center; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--spn-text-dim); margin-bottom:10px; }
.spn-cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.spn-cat-ic{ aspect-ratio:1; border-radius:6px; background:rgba(8,16,28,.45); border:1px solid rgba(95,231,249,.09);
    display:flex; align-items:center; justify-content:center; padding:3px; overflow:hidden; }
.spn-cat-ic img{ width:100%; height:100%; object-fit:contain; transition:opacity .45s ease; }
/* the two feature boxes sit over the bottom 1-2 icon rows, larger */
.spn-arsenal-tools{ position:absolute; left:0; right:0; bottom:0;
    display:flex; gap:26px; justify-content:center; align-items:flex-end; pointer-events:none; padding:0 10px; }
.spn-arsenal-tools .spn-tool{ pointer-events:auto; width:min(440px,48%); padding:22px;
    background:rgba(6,12,22,.93); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
    box-shadow:0 22px 54px rgba(0,0,0,.75); }
.spn-arsenal-tools .spn-tool h4{ font-size:17px; }
@media (max-width:880px){
    .spn-arsenal-cats{ grid-template-columns:repeat(2,1fr); }
    .spn-cat-grid{ grid-template-columns:repeat(4,1fr); }
    .spn-arsenal-tools{ position:static; transform:none; flex-direction:column; margin-top:22px; padding:0; }
    .spn-arsenal-tools .spn-tool{ width:100%; }
}

/* ---------- Discord: purple, slowly drifting honeycomb ---------- */
.spn-hex-purple::before{
    background:#b07bd8 !important; opacity:.42 !important;
    -webkit-mask:url('/images/client/hexagon_si.svg') 0 0 / 30px 17px repeat,
                 radial-gradient(130% 130% at 0% 0%, #000 0%, transparent 62%) !important;
            mask:url('/images/client/hexagon_si.svg') 0 0 / 30px 17px repeat,
                 radial-gradient(130% 130% at 0% 0%, #000 0%, transparent 62%) !important;
    animation:spn-hexshift 16s linear infinite;
}
@keyframes spn-hexshift{ to{ -webkit-mask-position:60px 34px, 0 0; mask-position:60px 34px, 0 0; } }

@media (prefers-reduced-motion: reduce){
    .spn-bolt, .spn-auth-register .spn-regbtn, #bitmeup-login input:focus, #bitmeup-register input:focus,
    .spn-hex-purple::before{ animation:none !important; }
}

/* ---------- Hero news: corner honeycomb (top-right, like the video tiles) ---------- */
.spn-hero-news{ position:relative; overflow:hidden; }
.spn-corner-hex-tr{
    left:auto; right:0; top:0; bottom:auto; width:110px; height:80px; opacity:.4;
    -webkit-mask:url('/images/client/hexagon_si.svg') top right / 22px 12px repeat,
                 radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 72%);
    -webkit-mask-composite:source-in;
            mask:url('/images/client/hexagon_si.svg') top right / 22px 12px repeat,
                 radial-gradient(120% 120% at 100% 0%, #000 0%, transparent 72%);
    mask-composite:intersect;
}

/* ---------- Synth: finer, denser, barely-there honeycomb ---------- */
.spn-hex-fine::before{
    opacity:.2 !important;
    -webkit-mask:url('/images/client/hexagon_si.svg') 0 0 / 15px 8.5px repeat,
                 radial-gradient(135% 135% at 100% 0%, #000 0%, transparent 58%) !important;
            mask:url('/images/client/hexagon_si.svg') 0 0 / 15px 8.5px repeat,
                 radial-gradient(135% 135% at 100% 0%, #000 0%, transparent 58%) !important;
}

/* ---------- Discord: purple honeycomb inside the box (top-right + bottom-right corners) ---------- */
.spn-discord{
    overflow:hidden;
    background:
        radial-gradient(260px 220px at 100% 0%, rgba(88,101,242,.30), transparent 70%),
        linear-gradient(120deg, rgba(88,101,242,.22), rgba(41,137,216,.12)) !important;
}
.spn-discord::before, .spn-discord::after{
    content:""; position:absolute; pointer-events:none; z-index:0; border-radius:0;
}
.spn-discord::before{
    top:0; right:0; left:auto; bottom:auto; width:48%; height:72%; background:#b07bd8; opacity:.5;
    -webkit-mask:url('/images/client/hexagon_si.svg') top right / 27px 15px repeat,
                 radial-gradient(125% 125% at 100% 0%, #000 0%, transparent 66%);
    -webkit-mask-composite:source-in;
            mask:url('/images/client/hexagon_si.svg') top right / 27px 15px repeat,
                 radial-gradient(125% 125% at 100% 0%, #000 0%, transparent 66%);
    mask-composite:intersect; animation:spn-hexshift 20s linear infinite;
}
.spn-discord::after{
    bottom:0; right:0; left:auto; top:auto; width:44%; height:66%; background:#9d6fd6; opacity:.45;
    -webkit-mask:url('/images/client/hexagon_si.svg') bottom right / 27px 15px repeat,
                 radial-gradient(125% 125% at 100% 100%, #000 0%, transparent 66%);
    -webkit-mask-composite:source-in;
            mask:url('/images/client/hexagon_si.svg') bottom right / 27px 15px repeat,
                 radial-gradient(125% 125% at 100% 100%, #000 0%, transparent 66%);
    mask-composite:intersect; animation:spn-hexshift 26s linear infinite reverse;
}
.spn-discord > *{ position:relative; z-index:1; }

/* ---------- SI2 two-button row + forgot-password link ---------- */
.spn-si2-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.spn-forgot{ text-align:right; margin:9px 2px 2px; }
.spn-forgot a{ font-size:12px; color:var(--spn-text-dim); }
.spn-forgot a:hover{ color:var(--spn-accent); }

/* ---------- Legacy / history (timeline + 7Games CD) ---------- */
.spn-legacy{ display:grid; grid-template-columns:290px 1fr; gap:46px; align-items:start; }
.spn-legacy-media{ text-align:center; }
.spn-legacy-cd{ border-radius:14px; overflow:hidden; border:1px solid var(--spn-border); box-shadow:0 20px 50px rgba(0,0,0,.6); }
.spn-legacy-cd img{ width:100%; display:block; }
.spn-legacy-cap{ margin-top:12px; font-size:12px; color:var(--spn-text-dim); font-style:italic; }
.spn-timeline{ list-style:none; margin:0; padding:0; position:relative; }
.spn-timeline:before{ content:""; position:absolute; left:64px; top:6px; bottom:14px; width:2px;
    background:linear-gradient(180deg, var(--spn-accent), rgba(95,231,249,.08)); }
.spn-timeline li{ position:relative; display:flex; gap:32px; padding:0 0 24px; }
.spn-tl-year{ flex:0 0 48px; text-align:right; font-weight:800; color:var(--spn-accent); font-size:15px; }
.spn-tl-year:after{ content:""; position:absolute; left:59px; top:5px; width:11px; height:11px; border-radius:50%;
    background:var(--spn-accent); box-shadow:var(--spn-glow); }
.spn-tl-now .spn-tl-year{ color:#fff; }
.spn-tl-now .spn-tl-year:after{ background:#fff; }
.spn-tl-body{ flex:1; }
.spn-tl-body b{ color:#fff; font-size:15px; display:block; margin-bottom:4px; }
.spn-tl-body p{ margin:0; color:var(--spn-text-dim); font-size:13.5px; }
.spn-legacy-logos{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:42px; flex-wrap:wrap; }
.spn-legacy-logos-label{ color:var(--spn-text-dim); font-size:12px; text-transform:uppercase; letter-spacing:1.5px; }
.spn-legacy-logo{ height:28px; width:auto; opacity:.82; transition:opacity .2s ease; }
.spn-legacy-logo:hover{ opacity:1; }
.spn-legacy-badge{ font-weight:800; color:#cfe0f0; font-size:18px; letter-spacing:.5px; }
.spn-legacy-dot{ color:var(--spn-text-dim); }
.spn-legacy-pub{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.spn-legacy-years{ font-size:11px; color:var(--spn-text-dim); letter-spacing:.5px; }
@media(max-width:760px){ .spn-legacy{ grid-template-columns:1fr; } .spn-legacy-media{ max-width:240px; margin:24px auto 0; order:2; } .spn-timeline{ order:1; } }

/* ---------- Forgot-password / status box -> styled like the register modal ---------- */
#game\.status{ backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); background:rgba(2,6,12,.72) !important; }
#game\.status, #game\.status *{ font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important; }
#game\.status #bitmeup\.status\.color{ min-width:0 !important; min-height:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
#game\.status .bitmeup_border_2{ display:none !important; }
#game\.status .bitmeup_border_content{ position:static !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
/* the single visible card (only the inner box, never the #bitmeup.status.color wrapper itself) */
#game\.status #bitmeup\.status\.color .status_blue,
#game\.status #bitmeup\.status\.color > div[style*="width"]{
    width:380px !important; max-width:90vw !important; height:auto !important; min-height:0 !important; overflow:visible !important;
    padding:28px !important; border-radius:16px !important; border:1px solid var(--spn-border) !important;
    background:linear-gradient(180deg, rgba(10,18,30,.98), rgba(6,12,22,.98)) !important;
    box-shadow:0 30px 70px rgba(0,0,0,.7) !important;
}
#game\.status span{ color:#e8f4ff !important; font-size:15px !important; }
#game\.status input[type="text"], #game\.status input[type="password"]{
    width:100% !important; box-sizing:border-box !important; height:46px !important; padding:0 15px !important; margin:10px 0 !important;
    background:rgba(4,10,20,.72) !important; background-image:none !important;
    border:1px solid rgba(95,231,249,.22) !important; border-radius:10px !important; color:#fff !important; font-size:15px !important;
    outline:none !important; box-shadow:none !important;
}
#game\.status input[type="text"]:focus, #game\.status input[type="password"]:focus{ border-color:var(--spn-accent) !important; }
#game\.status input[type="button"]{
    height:44px !important; min-width:130px; padding:0 18px !important; margin:8px 5px 0 !important; border:0 !important;
    border-radius:10px !important; cursor:pointer; font-weight:800 !important; font-size:15px !important;
    background:linear-gradient(135deg, var(--spn-accent), var(--spn-accent-2)) !important; color:#06121e !important;
    box-shadow:0 8px 24px rgba(41,137,216,.4) !important; transition:filter .15s ease, transform .15s ease;
}
#game\.status input[type="button"]:hover{ filter:brightness(1.1); transform:translateY(-1px); }
/* the abort/cancel button -> ghost */
#game\.status input[type="button"][onclick*="hide"]{
    background:transparent !important; color:var(--spn-text) !important; border:1px solid var(--spn-border) !important; box-shadow:none !important;
}

/* ---------- Publisher logo at its era in the timeline ---------- */
.spn-tl-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:4px; }
.spn-tl-head b{ display:inline; margin:0; }
.spn-tl-publogo{ height:26px; width:auto; opacity:.9; }
.spn-tl-pubbadge{ font-weight:800; color:#cfe0f0; font-size:15px; letter-spacing:.3px; }

/* ---------- Publisher bar above the CD ---------- */
.spn-legacy-pubbar{ text-align:center; margin-bottom:22px; }
.spn-legacy-pubbar .spn-legacy-logos-label{ display:block; margin-bottom:12px; }
.spn-legacy-pubbar .spn-legacy-pubs{ display:flex; justify-content:center; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.spn-legacy-pubbar .spn-legacy-pub{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.spn-legacy-pubbar .spn-legacy-logo{ height:30px; width:auto; opacity:.9; }
.spn-legacy-pubbar .spn-legacy-badge{ font-size:19px; }

/* ---------- Thanks box under the CD ---------- */
.spn-thanks{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(95,231,249,.12); text-align:center; }
.spn-thanks-h{ font-size:12px; text-transform:uppercase; letter-spacing:2px; color:var(--spn-accent); margin-bottom:10px; }
.spn-thanks-special{ font-size:15px; color:#fff; margin-bottom:9px; }
.spn-thanks-special b{ color:#fff; }
.spn-thanks-star{ color:#ffd76a; }
.spn-thanks-role{ font-size:11px; color:var(--spn-text-dim); }
.spn-thanks-names{ font-size:13px; color:#cfe0f0; line-height:1.8; }
.spn-thanks-sub{ font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--spn-text-dim); margin:13px 0 4px; }
.spn-thanks-former{ color:var(--spn-text-dim); }

/* ---------- Publisher eras stacked in the CD column ---------- */
.spn-pub-eras{ margin-bottom:22px; }
.spn-pub-eras .spn-legacy-logos-label{ display:block; text-align:center; margin-bottom:12px; }
.spn-pub-era{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    border:1px solid rgba(95,231,249,.14); border-radius:12px; background:rgba(8,16,28,.5); padding:16px; }
.spn-pub-era + .spn-pub-era{ margin-top:10px; }
.spn-pub-era-bp{ min-height:92px; }
.spn-pub-era-bmu{ min-height:152px; background:linear-gradient(180deg, rgba(95,231,249,.06), rgba(8,16,28,.5)); }
.spn-pub-era .spn-legacy-logo{ height:40px; width:auto; opacity:.92; }
.spn-pub-era .spn-legacy-badge{ font-size:26px; }
.spn-pub-era .spn-legacy-years{ font-size:12px; color:var(--spn-text-dim); }

/* ---------- Thanks band (full width, sectioned, honeycomb + glowing lead) ---------- */
.spn-thanks{ margin-top:46px; padding:38px 34px; border-radius:18px; position:relative; overflow:hidden; text-align:center;
    background:linear-gradient(180deg, rgba(8,16,28,.5), rgba(6,12,22,.72)); border:1px solid rgba(95,231,249,.14); }
.spn-thanks-title{ font-size:13px; text-transform:uppercase; letter-spacing:3px; color:var(--spn-accent); font-weight:600; margin-bottom:26px; }
.spn-thanks-lead{ max-width:320px; margin:0 auto 30px; padding:24px 22px; border-radius:14px; position:relative;
    background:radial-gradient(120% 130% at 50% 0%, rgba(95,231,249,.16), rgba(8,16,28,.65)); border:1px solid var(--spn-border); }
.spn-thanks-lead-tag{ display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:2px; color:#3a2a06; font-weight:800;
    background:linear-gradient(135deg,#ffe08a,#e0a93b); padding:5px 14px; border-radius:20px; margin-bottom:12px; box-shadow:0 4px 14px rgba(224,169,59,.4); }
.spn-thanks-lead-name{ font-family:"Orbitron",sans-serif; font-size:28px; font-weight:800; color:#fff; letter-spacing:1px;
    animation:spn-lead-glow 3s ease-in-out infinite; }
@keyframes spn-lead-glow{ 0%,100%{ text-shadow:0 0 14px rgba(95,231,249,.4); } 50%{ text-shadow:0 0 28px rgba(95,231,249,.8); } }
.spn-thanks-lead-note{ font-size:12px; color:var(--spn-text-dim); margin-top:6px; }
.spn-thanks-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.spn-thanks-card{ background:rgba(8,16,28,.55); border:1px solid rgba(95,231,249,.12); border-radius:12px; padding:20px 16px;
    transition:border-color .2s ease, transform .2s ease; }
.spn-thanks-card:hover{ border-color:var(--spn-border); transform:translateY(-3px); }
.spn-thanks-card-h{ font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--spn-accent); font-weight:700; margin-bottom:14px; }
.spn-thanks-people{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.spn-thanks-people span{ font-size:13.5px; color:#dbe7f2; background:rgba(95,231,249,.07); border:1px solid rgba(95,231,249,.14);
    padding:5px 14px; border-radius:20px; transition:background .2s ease, color .2s ease; }
.spn-thanks-people span:hover{ background:rgba(95,231,249,.16); color:#fff; }
@media(max-width:760px){ .spn-thanks-grid{ grid-template-columns:repeat(2,1fr); } }

/* remove the broken "?" forgot icon in the login password field (we have a text link) */
#bitmeup-login .glyphicons-question-sign{ display:none !important; }

/* ---------- Hero quick links under the news ---------- */
.spn-hero-quick{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.spn-hero-quick a{ display:inline-flex; align-items:center; font-size:13px; font-weight:600; color:var(--spn-text);
    padding:9px 18px; border-radius:8px; background:rgba(6,12,22,.5); border:1px solid var(--spn-border);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform .15s ease, border-color .2s ease, box-shadow .25s ease; }
.spn-hero-quick a:hover{ color:#fff; border-color:var(--spn-accent); box-shadow:var(--spn-glow); transform:translateY(-2px); }

/* ---------- Welcome heading: one line, may spill over the frame, centered ---------- */
.spn-auth-title{ text-align:center; white-space:normal; font-size:20px; font-weight:700; margin:0 0 16px;
    line-height:1.14; height:1.14em; overflow:visible;
    display:flex; flex-direction:column; justify-content:flex-end;
    text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 22px rgba(95,231,249,.25); }

/* ---------- Forgot-password chip inside the password field (slanted left edge) ---------- */
.spn-forgot{ display:block; text-align:right; margin:7px 2px 0; font-size:11px; color:var(--spn-text-dim); text-decoration:none; }
.spn-forgot:hover{ color:var(--spn-accent); }
/* wrap holds only the password input, so the chip anchors to the field */
.spn-pwwrap{ margin:6px 0; }
#bitmeup-login .spn-pwwrap input[type="password"]{ margin:0 !important; }
.spn-forgot-in{ position:absolute; right:1px; bottom:1px; margin:0; z-index:6; text-align:left;
    font-size:9px; line-height:1; color:#aac4d8; padding:5px 10px 5px 15px; background:rgba(95,231,249,.16);
    -webkit-clip-path:polygon(11px 0, 100% 0, 100% 100%, 0 100%); clip-path:polygon(11px 0, 100% 0, 100% 100%, 0 100%);
    border-radius:0 0 9px 0; transition:background .2s ease, color .2s ease; }
.spn-forgot-in:hover{ background:rgba(95,231,249,.32); color:#fff; }

/* ---------- Social: two per row (Google+Facebook, Steam+Steam Store) ---------- */
.spn-sso-list{ gap:9px; }
.spn-sso-row{ display:flex; gap:9px; }
.spn-sso-row .spn-sso{ flex:1; min-width:0; }
.spn-sso-row .spn-sso-tx{ padding:0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spn-sso-row .spn-sso-ic{ flex-basis:40px; width:40px; }
.spn-sso-steamstore{ background:linear-gradient(135deg,#1b2838,#0c1219); }

/* ---------- "All games at bitmeup" corner link ---------- */
.spn-auth-bmu{ display:block; text-align:right; margin-top:14px; font-size:11px; color:var(--spn-text-dim); letter-spacing:.2px; }
.spn-auth-bmu:hover{ color:var(--spn-accent); }

/* ---------- Register/Play button flash on each strike ---------- */
.spn-regbtn-flash{ filter:brightness(1.12) !important; box-shadow:0 0 0 1px rgba(168,236,255,.65), 0 0 15px rgba(95,231,249,.45), 0 0 26px rgba(95,231,249,.2), 0 10px 28px rgba(41,137,216,.45) !important; }

/* ---------- Reverse the running-light direction (flight calculator) ---------- */
.spn-glow-rev::after{ animation-direction: reverse; }

/* ---------- Hero Play-now button (wide, centered, lightning from all sides) ---------- */
.spn-hero-play{ display:flex; justify-content:center; margin:-8px 0 -6px; }
.spn-hero-play .spn-regbtn-wrap{ padding:14px 40px; }
.spn-hero-play .spn-regbtn{ min-width:300px; padding:18px 52px; font-size:18px; }
.spn-hero-left .spn-hero-tag{ margin-bottom:16px; }

/* ---------- centre the quick links ---------- */
.spn-hero-quick{ justify-content:center; }

/* ---------- Steam Store: small icon in the corner, centred label ---------- */
.spn-sso-steamstore{ position:relative; }
.spn-sso-steamstore .spn-sso-ic{ position:absolute; top:0; left:1px; flex:none; width:auto; height:auto; background:none; }
.spn-sso-steamstore .spn-sso-ic img{ width:16px; height:16px; }
.spn-sso-steamstore .spn-sso-tx{ flex:1; text-align:center; padding:0 10px; }

/* ---------- bitmeup footer bar at the bottom of the auth box ---------- */
.spn-auth-bmu{ display:flex; align-items:center; justify-content:center; gap:9px;
    margin:18px -20px -22px; padding:13px 16px; border-radius:0 0 15px 15px;
    background:linear-gradient(to top, rgba(2,6,12,.92), rgba(2,6,12,0));
    font-size:11px; color:var(--spn-text-dim); text-decoration:none; letter-spacing:.2px;
    transition:background .3s ease, color .25s ease; }
.spn-auth-bmu img{ height:52px; width:auto; opacity:.92; margin:-10px 0 -12px; transition:opacity .25s ease; }
.spn-auth-bmu:hover{ color:#fff; background:linear-gradient(to top, rgba(41,137,216,.5), rgba(95,231,249,0)); }
.spn-auth-bmu:hover img{ opacity:1; }

/* ---------- Tight honeycomb in the bottom corners of the key buttons ---------- */
.spn-regbtn::after, .spn-honey::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:.4; background:#eafdff;
    -webkit-mask:url('/images/client/hexagon_si.svg') 0 100% / 13px 7.5px repeat,
                 linear-gradient(90deg,#000 0%, transparent 30%, transparent 70%, #000 100%) no-repeat,
                 linear-gradient(0deg,#000 0%, transparent 50%) no-repeat;
    -webkit-mask-composite:source-in, source-in;
            mask:url('/images/client/hexagon_si.svg') 0 100% / 13px 7.5px repeat,
                 linear-gradient(90deg,#000 0%, transparent 30%, transparent 70%, #000 100%) no-repeat,
                 linear-gradient(0deg,#000 0%, transparent 50%) no-repeat;
    mask-composite:intersect, intersect;
}
.spn-honey{ position:relative; overflow:hidden; }
.spn-honey > span{ position:relative; z-index:1; }

/* ---------- Register social boxes: honeycomb fading in from the right ---------- */
#bitmeup-register div[onclick*="Facebook"], #bitmeup-register div[onclick*="Google"], #bitmeup-register div[onclick*="Steam"]{ position:relative; overflow:hidden; }
#bitmeup-register div[onclick*="Facebook"] > table, #bitmeup-register div[onclick*="Google"] > table, #bitmeup-register div[onclick*="Steam"] > table{ position:relative; z-index:1; }
#bitmeup-register div[onclick*="Facebook"]::after, #bitmeup-register div[onclick*="Google"]::after, #bitmeup-register div[onclick*="Steam"]::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.4; background:#eafdff;
    -webkit-mask:url('/images/client/hexagon_si.svg') 100% 50% / 13px 7.5px repeat,
                 linear-gradient(90deg, transparent 52%, #000 100%) no-repeat;
    -webkit-mask-composite:source-in;
            mask:url('/images/client/hexagon_si.svg') 100% 50% / 13px 7.5px repeat,
                 linear-gradient(90deg, transparent 52%, #000 100%) no-repeat;
    mask-composite:intersect;
}

/* ---------- Register modal: centre the "?" help icons in the fields ---------- */
#bitmeup-register div[style*="cursor:help"]{ top:50% !important; bottom:auto !important; right:13px !important; transform:translateY(-50%); }
#bitmeup-register .questm{ font-size:20px !important; color:#7f94a8 !important; }

/* ---------- Register modal: sleek modern "oder" divider ---------- */
#bitmeup-register br{ display:none !important; }
#bitmeup-register table:has(.register_link){ width:100% !important; margin:16px 0 !important; }
#bitmeup-register td > div[style*="height:1px"]{
    width:100% !important; height:1px !important; margin:0 !important;
    background:rgba(255,255,255,.16) !important; box-shadow:none !important;
}
#div_register_site .register_link{
    animation:none !important; cursor:default !important;
    font-size:12px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:2px;
    color:var(--spn-text-dim) !important; text-shadow:none !important; padding:0 6px;
}

/* ---------- Headline: uppercase, smaller white top line ---------- */
.spn-hero-left h1{ text-transform:uppercase; }
.spn-h1-top{ display:inline-block; font-size:.5em; font-weight:700; letter-spacing:1.5px; line-height:1.1; margin-bottom:2px; }
/* v2: keep the headline on two single lines (shrink via font-size, never wrap a line) */
.spn-v2 .spn-hero-left h1 .spn-grad,
.spn-v2 .spn-hero-left h1 .spn-h1-top{ white-space:nowrap; }

/* ---------- Lock the page scroll while a modal is open (only the box scrolls) ---------- */
html.spn-modal-open, html.spn-modal-open body{ overflow:hidden !important; }
#div_register_site, #game\.status, #div_screenshots_site{ overscroll-behavior:contain; }

/* ============================================================================
   MOBILE / NARROW VIEWPORTS
   The new landing is now the default everywhere, so it must work on phones.
   Layout is width-driven; the .spn-mobile class (real devices) also gates heavy FX.
   ============================================================================ */
.spn-burger{ display:none; }

@media (max-width: 980px){
    /* safety net: never let anything make the page wider than the screen */
    .spn-page{ overflow-x:clip; }
    /* ---- nav: brand + hamburger; links collapse into a dropdown panel ---- */
    .spn-nav{ padding:10px 14px; }
    .spn-brand{ left:14px; top:9px; }
    .spn-brand img,
    .spn-nav-solid .spn-brand img{ height:40px !important; }
    .spn-burger{
        display:flex; flex-direction:column; justify-content:center; gap:5px;
        width:46px; height:40px; padding:10px 11px; margin-left:auto; z-index:3;
        background:rgba(8,16,28,.65); border:1px solid var(--spn-border); border-radius:11px; cursor:pointer;
    }
    .spn-burger span{ display:block; height:2px; width:100%; background:#dceaf6; border-radius:2px;
        transition:transform .25s ease, opacity .2s ease; }
    .spn-nav.spn-menu-open .spn-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .spn-nav.spn-menu-open .spn-burger span:nth-child(2){ opacity:0; }
    .spn-nav.spn-menu-open .spn-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    .spn-nav-links{
        position:absolute; top:100%; left:0; right:0;
        flex-direction:column; align-items:stretch; gap:0;
        background:rgba(6,12,22,.98); border-bottom:1px solid var(--spn-border);
        padding:6px 16px 14px; box-shadow:0 22px 44px rgba(0,0,0,.55);
        max-height:0; overflow:hidden; opacity:0; pointer-events:none;
        transition:max-height .3s ease, opacity .2s ease;
    }
    .spn-nav.spn-menu-open .spn-nav-links{ max-height:84vh; overflow:auto; opacity:1; pointer-events:auto; }
    .spn-nav-links a:not(.spn-nav-cta){ display:block; padding:13px 4px; font-size:16px;
        border-bottom:1px solid rgba(255,255,255,.06); color:#cfe0ee; }
    .spn-nav-cta{ margin-top:13px; text-align:center; padding:13px; font-size:16px; }
    .spn-nav-langs{ padding:11px 4px; border-bottom:1px solid rgba(255,255,255,.06); }
    .spn-nav-langs .spn-lang-menu{ position:static; display:none; box-shadow:none; background:transparent;
        border:0; margin-top:10px; padding:0; }
    .spn-nav-langs.spn-open .spn-lang-menu{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px; }

    /* ---- hero: single column, copy first, auth box below ---- */
    /* minmax(0,1fr) (NOT plain 1fr=minmax(auto,1fr)) so the column can shrink below
       its children's min-content instead of forcing the whole hero wider than the screen */
    .spn-hero{ padding-top:88px !important; align-items:flex-start !important; min-height:auto; }
    .spn-hero-grid{ grid-template-columns:minmax(0,1fr) !important; gap:24px !important; }
    /* flatten the left column into the grid so news + quick-links can be ordered
       BELOW the login box (the pitch stays one block via .spn-hero-pitch) */
    .spn-hero-left{ display:contents; }
    .spn-hero-pitch{ order:1; }
    .spn-hero-right{ order:2; }
    .spn-hero-news{ order:3; }
    .spn-hero-quick{ order:4; }
    .spn-hero-pitch, .spn-hero-news, .spn-hero-quick, .spn-hero-right{ min-width:0; max-width:100%; }
    .spn-hero-left h1{ font-size:34px !important; overflow-wrap:break-word; }
    .spn-v2 .spn-hero-left h1 .spn-grad, .spn-v2 .spn-hero-left h1 .spn-h1-top{ white-space:normal; } /* allow wrap on phones */
    .spn-v2 .spn-hero-tag{ max-width:none; }
    .spn-hero-play{ justify-content:center; }          /* centre the Play-now button on mobile */
    .spn-hero-play .spn-regbtn{ min-width:0; width:auto; padding:16px 30px; }
    .spn-auth{ max-width:none !important; width:100%; margin:0 !important; padding:18px 18px 20px !important; box-sizing:border-box; }
    #bitmeup-login, #bitmeup-login table{ max-width:100% !important; }
    .spn-hero-quick{ justify-content:center; }

    /* ---- sections: tighter, single column ---- */
    .spn-section{ padding:48px 0; }
    .spn-h2{ font-size:24px; }
    .spn-split{ grid-template-columns:1fr; gap:22px; }
    .spn-discord{ padding:28px 22px; }
    .spn-discord h3{ font-size:22px; }
    .spn-arsenal-cats{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .spn-arsenal-tools{ position:static; margin-top:22px; flex-direction:column; gap:14px; }
    .spn-arsenal-tools .spn-tool{ width:100%; }
    .spn-footer-row{ flex-direction:column; align-items:flex-start; gap:16px; }
}

@media (max-width: 560px){
    .spn-hero-left h1{ font-size:30px !important; }
    .spn-thanks-grid{ grid-template-columns:1fr; }
    .spn-hero-quick a{ flex:1 1 100%; text-align:center; }
    .spn-caro-tile-in h4{ font-size:18px; }
}

/* ---- real-device FX gating: drop the expensive decorative animations ---- */
.spn-mobile .spn-glow::after,
.spn-mobile .spn-regbtn{ animation:none !important; }
.spn-mobile .spn-regbtn-canvas{ display:none; }       /* lightning canvas is skipped in JS too */
.spn-mobile .spn-scroll-hint{ display:none; }