/*
 * bumr - the "/" landing + login page, modelled on Roblox's classic full-bleed landing screen:
 * a darkened game screenshot, the wordmark and tagline over it, login inline in a thin dark top
 * bar, and a translucent sign-up panel floating on the right.
 *
 * Colours and controls are the GENUINE 2016 values from the real bundles already on this server
 * (/css/rbx2016-main.css, /css/rbx2016-login.css):
 *     .btn-primary-md  #02b757, hover #3FC679, radius 3px
 *     .form-control    height 34px, padding 6px 12px, colour #555
 *     a:link           #0055B3
 * Source Sans Pro is @font-face'd from /fonts by auth2016.css - no third-party CDN.
 *
 * ---------------------------------------------------------------------------------------------
 * TO CHANGE THE BACKGROUND: edit --hero below. It is the ONLY line that needs to change.
 * It currently points at a real place icon from this server (Natural Disaster Survival). That
 * source is 420x420, so it is deliberately blurred and darkened - it reads as atmosphere rather
 * than a stretched icon. Drop a wide in-game screenshot in and you can lower the blur to 0.
 * ---------------------------------------------------------------------------------------------
 */
:root {
    --hero: url('/images/thumbnails/8d184ca3d8d36bc2c7cb177a7ac66906fb7951c2bc5ba5241b3b30c177067ede.png');
    --hero-blur: 18px;
    --bumr-green: #02b757;
    --bumr-green-hi: #3FC679;
}

/* Every element on this page uses border-box. Without it, anything with width:100% plus padding
   and a border overflows its parent by (padding*2 + border*2) - which is exactly what pushed the
   Connect Discord button out of the sign-up panel by 22px. The full-width submit button had the
   same 20px bug, it just was not visible in the login state. */
body.login2016-body,
body.login2016-body *,
body.login2016-body *::before,
body.login2016-body *::after { box-sizing: border-box; }

html, body.login2016-body {
    margin: 0; padding: 0; height: 100%;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    font-size: 14px; color: #191919; background: #1d2b34;
}
body.login2016-body { display: flex; flex-direction: column; min-height: 100vh; }
body.login2016-body a { color: #fff; text-decoration: none; }
body.login2016-body a:hover { text-decoration: underline; }

/* --- thin dark top bar, login on the right ------------------------------- */
.l16-bar {
    background: #2e2e2e; height: 42px; flex: 0 0 42px;
    display: flex; align-items: center; gap: 18px; padding: 0 14px;
    position: relative; z-index: 3;
}
.l16-bar-logo img { height: 22px; width: auto; display: block; }
.l16-nav { display: flex; gap: 4px; }
.l16-nav a, .l16-nav span {
    color: #d8d8d8; font-size: 13px; padding: 5px 10px; border-radius: 2px;
}
.l16-nav .on { background: var(--bumr-green); color: #fff; }
.l16-bar-spacer { flex: 1 1 auto; }

.l16-login { display: flex; align-items: center; gap: 6px; }
.l16-login input {
    height: 24px; width: 132px; padding: 3px 7px;
    font-size: 13px; color: #555; font-family: inherit;
    background: #fff; border: 1px solid #1b1b1b; border-radius: 2px; box-sizing: border-box;
}
.l16-login input:focus { outline: none; border-color: var(--bumr-green); }
.l16-login input:disabled { background: #ddd; color: #999; }
.l16-btn {
    background: var(--bumr-green); border: 1px solid var(--bumr-green); color: #fff;
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 4px 14px; border-radius: 2px; cursor: pointer; line-height: 1.2;
    transition: background .15s ease-in-out;
}
.l16-btn:hover, .l16-btn:focus { background: var(--bumr-green-hi); border-color: var(--bumr-green-hi); }
.l16-btn:disabled { background: #7a7a7a; border-color: #7a7a7a; cursor: default; }
/* strip directly under the bar: "Forgot Username/Password?" and any login error, right-aligned,
   in normal flow so the two can never overlap (they did when both were absolutely positioned). */
.l16-substrip {
    background: #263238; padding: 5px 14px; text-align: right;
    display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap;
    position: relative; z-index: 3;
}
.l16-forgot { font-size: 11px; }
.l16-forgot a { color: #cfd8dc; }

/* --- the hero ------------------------------------------------------------ */
.l16-hero { position: relative; flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
.l16-hero::before {
    content: ""; position: absolute; inset: -40px;         /* inset so the blur has no soft edge */
    background: var(--hero) center/cover no-repeat;
    filter: blur(var(--hero-blur)) brightness(.62) saturate(1.1);
    z-index: 0;
}
.l16-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(15,25,32,.62) 0%, rgba(15,25,32,.30) 45%, rgba(15,25,32,.55) 100%);
}
.l16-hero-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1040px; margin: 0 auto; padding: 34px 24px;
    display: flex; gap: 40px; align-items: center; flex-wrap: wrap;
}

.l16-brand { flex: 1 1 380px; color: #fff; }
.l16-brand img { width: 300px; max-width: 78%; height: auto; display: block;
                 filter: drop-shadow(0 3px 10px rgba(0,0,0,.55)); }
.l16-tagline {
    margin: 14px 0 0; font-size: 26px; font-weight: 300; color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
/* Sits directly under the tagline and stays deliberately quieter: same shadow, because it has to
   stay readable over whatever the hero image is doing, but around half the size and dimmed. */
.l16-subtagline {
    margin: 6px 0 0; font-size: 15px; font-weight: 400; color: rgba(255,255,255,.82);
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* --- the sign-up panel --------------------------------------------------- */
.l16-panel {
    flex: 0 0 330px; max-width: 100%;
    background: rgba(255,255,255,.92); border-radius: 4px;
    padding: 18px 20px 20px; box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.l16-panel h2 { margin: 0 0 14px; font-size: 19px; font-weight: 600; color: #343434; }
.l16-panel label { display: block; font-size: 12px; font-weight: 700; color: #555; margin-bottom: 3px; }
.l16-panel input[type=text] {
    width: 100%; height: 34px; padding: 6px 12px; font-size: 15px; color: #555;
    background: #fff; border: 1px solid #c3c3c3; border-radius: 3px;
    box-sizing: border-box; font-family: inherit;
}
.l16-panel input:focus { outline: none; border-color: var(--bumr-green); }
.l16-panel .l16-hint { font-size: 12px; color: #777; margin: 5px 0 0; }
.l16-panel .l16-submit {
    width: 100%; margin-top: 14px; padding: 9px; font-size: 17px; font-weight: 600;
    background: var(--bumr-green); border: 1px solid var(--bumr-green); color: #fff;
    border-radius: 3px; cursor: pointer; font-family: inherit; transition: background .15s ease-in-out;
}
.l16-panel .l16-submit:hover, .l16-panel .l16-submit:focus {
    background: var(--bumr-green-hi); border-color: var(--bumr-green-hi);
}

/* --- signup-specific pieces (/auth/signup shares this layout) ------------- */
.l16-panel input[type=password] {
    width: 100%; height: 34px; padding: 6px 12px; font-size: 15px; color: #555;
    background: #fff; border: 1px solid #c3c3c3; border-radius: 3px;
    box-sizing: border-box; font-family: inherit;
}
.l16-field { margin-bottom: 12px; }
.l16-discord {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; margin-top: 4px; padding: 10px; border-radius: 3px;
    background: #5865f2; border: 1px solid #5865f2; color: #fff;
    font-size: 16px; font-weight: 600; font-family: inherit; text-decoration: none;
    transition: background .15s ease-in-out;
}
.l16-discord:hover, .l16-discord:focus { background: #4752c4; border-color: #4752c4; text-decoration: none; color: #fff; }
.l16-discord svg { width: 20px; height: 20px; fill: #fff; flex: 0 0 20px; }
.l16-verified {
    display: flex; gap: 9px; align-items: flex-start;
    background: #eaf7ef; border: 1px solid #b6e0c6; border-radius: 3px;
    padding: 10px; margin-bottom: 14px;
}
.l16-verified svg { width: 18px; height: 18px; fill: #5865f2; flex: 0 0 18px; margin-top: 1px; }
.l16-verified strong { display: block; font-size: 13px; color: #24603c; }
.l16-verified p { margin: 1px 0 0; font-size: 12px; color: #3d7a55; }
.l16-invited { font-size: 13px; color: #555; margin: -8px 0 12px; }
.l16-agree { margin-top: 14px; }
.l16-agree label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px;
                   font-weight: 400; color: #555; cursor: pointer; }
.l16-agree input { flex: 0 0 auto; margin-top: 2px; }
.l16-agree a { color: #0055B3; }
.l16-pwnote { font-size: 12px; color: #777; margin: 10px 0 0; }
.l16-barlink { color: #d8d8d8; font-size: 13px; padding: 5px 10px; }

.l16-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px;
            border-top: 1px solid #e0e0e0; padding-top: 12px; }
.l16-note svg { width: 18px; height: 18px; fill: #5865f2; flex: 0 0 18px; margin-top: 1px; }
.l16-note strong { display: block; font-size: 13px; color: #343434; }
.l16-note p { margin: 1px 0 0; font-size: 12px; color: #777; }

/* --- alerts (2016 .errorStatusBar) --------------------------------------- */
.l16-alert {
    color: #000; background: #FAE5E5; border: 1px solid #c00;
    padding: 5px 9px; margin: 0 0 12px; font-size: 13px; border-radius: 2px;
}
.l16-alert-bar { margin: 0; max-width: 340px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* --- attribution, bottom-left like the original -------------------------- */
.l16-credit {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 12px 24px; color: rgba(255,255,255,.72); font-size: 12px;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.l16-credit a { color: rgba(255,255,255,.72); margin-right: 12px; }

@media (max-width: 820px) {
    .l16-bar { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 10px; }
    .l16-nav { order: 3; width: 100%; }
    .l16-substrip { justify-content: flex-start; }
    .l16-hero-inner { padding: 26px 16px 70px; }
    .l16-panel { flex: 1 1 100%; }
}