/* Стили страниц авторизации VNLLA.RU.
 * Файл отдаёт САЙТ (/var/www/vnlla.ru/style.css), а не плагин:
 * так внешний вид меняется без пересборки AntiGrief и без рестарта сервера.
 * Оригинал плагина остаётся в его коде как запасной вариант.
 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --mc-yellow: #b44fff; --mc-gold: #b44fff; --mc-gold-dk: #6a1fa0;
    --mc-green: #4ade80; --mc-green-dk: #256b3a; --mc-white: #ffffff;
    --mc-gray: #a99fbb; --discord: #5865F2; --google: #4285F4; --telegram: #26A5E4;
}
html, body { height: 100%; }
body {
    font-family: 'Press Start 2P', monospace; color: var(--mc-white); font-size: 12px;
    min-height: 100vh;
    background: #080810;
    background-image: radial-gradient(ellipse at 50% 30%, #0d0b1a 0%, #0d0d0d 100%);
    background-attachment: fixed;
    position: relative; display: flex; flex-direction: column; align-items: center;
    padding: 24px 14px 0; box-sizing: border-box;
}
body::before {
    content: ""; position: fixed; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.05), rgba(0,0,0,.35) 95%);
    pointer-events: none; z-index: 0;
}
.container { position: relative; z-index: 1; width: 100%; max-width: 540px; display: flex; flex-direction: column; align-items: center; flex: 1; }
.card {
    width: 100%;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, rgba(255,255,255,.04) 2px 4px), #14111f;
    border: 4px solid #000;
    box-shadow: inset 4px 4px 0 0 #241c33, inset -4px -4px 0 0 #080810, 0 0 0 4px #000, 0 10px 0 0 rgba(0,0,0,.35);
    padding: 26px 22px; margin-bottom: 22px;
}
.card--ender {
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,.10) 2px 4px), #2d1b3d;
    box-shadow: inset 4px 4px 0 0 #6b4a8a, inset -4px -4px 0 0 #160d20, 0 0 0 4px #000, 0 10px 0 0 rgba(0,0,0,.4);
}
.card-title {
    font-size: 13px; color: var(--mc-yellow);
    text-shadow: 2px 2px 0 #1c1030;
    text-align: center; margin-bottom: 18px; line-height: 1.6;
}
.card-title--ender { color: #d98aff; text-shadow: 2px 2px 0 #1a0a26; }
.card-subtitle {
    color: var(--mc-gray); font-size: 10px; margin-bottom: 12px;
    text-shadow: 1px 1px 0 #000;
}
.btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 14px 16px;
    font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1.6;
    color: var(--mc-white); text-shadow: 2px 2px 0 #080810;
    text-decoration: none; cursor: pointer; border: none;
    background: linear-gradient(180deg, #a3a3a3 0%, #8b8b8b 45%, #6f6f6f 100%);
    box-shadow: inset 3px 3px 0 0 #d6cfe4, inset -3px -3px 0 0 #1a1526, 0 4px 0 0 #0d0b1a;
    transition: filter .05s linear, transform .05s linear; user-select: none;
}
.btn:hover { filter: brightness(1.18); background: linear-gradient(180deg, #b9b9b9 0%, #9d9d9d 45%, #7c7c7c 100%); color: var(--mc-yellow); }
.btn:active { transform: translateY(4px); box-shadow: inset 3px 3px 0 0 #1a1526, inset -3px -3px 0 0 #d6cfe4, 0 0 0 0 #0d0b1a; }
.btn svg { width: 22px; height: 22px; flex: 0 0 22px; }
.btn-discord { background: linear-gradient(180deg, #7782ff 0%, #5865F2 45%, #3c47c9 100%); box-shadow: inset 3px 3px 0 0 #aab0ff, inset -3px -3px 0 0 #2a338f, 0 4px 0 0 #1d2360; }
.btn-discord:hover { filter: brightness(1.15); color: #fff; }
.btn-google { background: linear-gradient(180deg, #6fa3ff 0%, #4285F4 45%, #2b66cc 100%); box-shadow: inset 3px 3px 0 0 #a9c8ff, inset -3px -3px 0 0 #1f4d9e, 0 4px 0 0 #143566; }
.btn-google:hover { filter: brightness(1.15); color: #fff; }
.btn-telegram { background: linear-gradient(180deg, #5bc2f0 0%, #26A5E4 45%, #1782b8 100%); box-shadow: inset 3px 3px 0 0 #9ad9f7, inset -3px -3px 0 0 #115f88, 0 4px 0 0 #0c4561; }
.btn-telegram:hover { filter: brightness(1.15); color: #fff; }
.btn-green { background: linear-gradient(180deg, #7ab83a 0%, #5a8a22 45%, #3a6010 100%); box-shadow: inset 3px 3px 0 0 #a0d060, inset -3px -3px 0 0 #2a5010, 0 4px 0 0 #1a3008; }
.btn-green:hover { filter: brightness(1.15); color: #fff; }
.btn-red { background: linear-gradient(180deg, #e06666 0%, #c0392b 45%, #8e2820 100%); box-shadow: inset 3px 3px 0 0 #ff9d9d, inset -3px -3px 0 0 #6e1e16, 0 4px 0 0 #4d150f; }
.btn-red:hover { filter: brightness(1.15); color: #fff; }
.btn-small { font-size: 10px; padding: 10px 14px; margin: 0; width: auto; }
.input-field {
    width: 100%; font-family: 'Press Start 2P', monospace;
    font-size: 11px; color: var(--mc-green); text-shadow: 1px 1px 0 var(--mc-green-dk);
    background: #241c33; border: none; padding: 14px 12px;
    box-shadow: inset 3px 3px 0 0 #0d0b1a, inset -3px -3px 0 0 #6f6486, 0 0 0 3px #000;
    outline: none;
}
.input-field:focus { background: #666; box-shadow: inset 3px 3px 0 0 #0d0b1a, inset -3px -3px 0 0 #6f6486, 0 0 0 3px var(--mc-yellow); }
.input-field::placeholder { color: #cfcfcf; opacity: .7; }
.nick-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.nick-item { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--mc-green); text-shadow: 2px 2px 0 var(--mc-green-dk); background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); border: 2px solid #000; box-shadow: inset 2px 2px 0 #2a2a2a, inset -2px -2px 0 #000; padding: 11px 12px; }
.nick-item .grass { width: 18px; height: 18px; flex: 0 0 18px; background: linear-gradient(180deg, #5fae3a 0 35%, #7a5234 35% 100%); border: 1px solid #000; }
.nick-name { flex: 1; color: var(--mc-green); font-size: 11px; text-shadow: 2px 2px 0 var(--mc-green-dk); }
.msg-success { color: var(--mc-green); padding: 12px; background: #16241c; border: 4px solid #000; box-shadow: inset 3px 3px 0 0 #4a8a4a, inset -3px -3px 0 0 #1a4a1a, 0 0 0 3px #000; margin-bottom: 12px; text-shadow: 1px 1px 0 #0c1a10; text-align: center; }
.msg-error { color: #ff5555; padding: 12px; background: #3a1a1a; border: 4px solid #000; box-shadow: inset 3px 3px 0 0 #8a4444, inset -3px -3px 0 0 #4a1515, 0 0 0 3px #000; margin-bottom: 12px; text-shadow: 1px 1px 0 #330000; text-align: center; }
.error-cube { width: 64px; height: 64px; margin: 0 auto 18px; background: linear-gradient(180deg, #e06666, #8e2820); border: 4px solid #080810; box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; font-size: 30px; animation: shake 2.4s ease-in-out infinite; }
@keyframes shake { 0%, 92%, 100% { transform: translateX(0) rotate(0); } 94% { transform: translateX(-3px) rotate(-3deg); } 96% { transform: translateX(3px) rotate(3deg); } 98% { transform: translateX(-2px) rotate(-1deg); } }
.error-msg { font-size: 11px; color: #ff9d9d; text-shadow: 2px 2px 0 #3a0e0e; text-align: center; line-height: 1.9; }
.social-icons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.social-icon { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 8px; border: 2px solid #080810; box-shadow: inset 2px 2px 0 rgba(255,255,255,.15), inset -2px -2px 0 rgba(0,0,0,.3); }
.social-icon svg { width: 14px; height: 14px; }
.social-icon.linked { color: var(--mc-green); background: #16241c; border-color: #2d6a2d; }
.social-icon.not-linked { color: #6b5a2a; background: #1a1005; border-color: #4a3510; }
.footer { position: relative; z-index: 1; margin-top: auto; padding: 22px 10px; text-align: center; color: var(--mc-gray); font-size: 8px; text-shadow: 1px 1px 0 #000; line-height: 2; width: 100%; flex-shrink: 0; }
.footer b { color: var(--mc-yellow); }
.login-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.login-buttons .btn { width: 100%; }
.add-nick-form { display: flex; gap: 12px; align-items: stretch; margin-top: 14px; flex-wrap: wrap; }
.add-nick-form .input-field { flex: 1; min-width: 180px; }
.add-nick-form .btn { width: auto; padding: 14px 18px; white-space: nowrap; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 6px 8px; border: 2px solid #080810; text-align: left; font-size: 10px; }
th { background: #14111f; color: var(--mc-yellow); text-shadow: 1px 1px 0 #080810; }
td { background: #080810; }
.banned { color: #ff5555; text-shadow: 1px 1px 0 #330000; }
.not-banned { color: var(--mc-green); text-shadow: 1px 1px 0 #0c1a10; }
.mc-divider { height: 8px; margin: 20px 0; width: 100%; background: linear-gradient(180deg, #080810 0 2px, #241c33 2px 4px, #373737 4px 6px, #080810 6px 8px); border-radius: 0; }
.mc-splash { position: absolute; left: 50%; top: 24px; margin-left: 92px; font-size: 11px; color: var(--mc-yellow); text-shadow: 2px 2px 0 #1c1030; transform: rotate(-16deg); transform-origin: left center; white-space: nowrap; pointer-events: none; z-index: 2; animation: splashPulse 1s ease-in-out infinite; }
@keyframes splashPulse { 0%, 100% { transform: rotate(-16deg) scale(1); } 50% { transform: rotate(-16deg) scale(1.10); } }
.title-block { position: relative; display: block; text-align: center; margin: 24px 0 14px; }
.mc-title { font-size: 30px; line-height: 1.35; text-align: center; color: var(--mc-gold); letter-spacing: 1px; margin: 0; text-shadow: 4px 4px 0 var(--mc-gold-dk), 4px 4px 0 #1c1030; }
.mc-subtitle { font-size: 9px; color: var(--mc-yellow); text-shadow: 2px 2px 0 #1c1030; text-align: center; margin-bottom: 26px; line-height: 1.7; }
.login-header { text-align: center; margin-bottom: 8px; }
.login-header .server-name { color: var(--mc-gold); font-size: 22px; text-shadow: 4px 4px 0 var(--mc-gold-dk), 4px 4px 0 #1c1030; letter-spacing: 2px; }
.login-header .server-ip { color: var(--mc-green); font-size: 10px; margin-top: 6px; text-shadow: 1px 1px 0 var(--mc-green-dk); }
.profile-avatar { width: 56px; height: 56px; flex: 0 0 56px; image-rendering: pixelated; border: 3px solid #080810; box-shadow: inset 0 0 0 1px #000, 3px 3px 0 rgba(0,0,0,.5); }
.profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.profile-name { color: var(--mc-gold); font-size: 14px; text-shadow: 2px 2px 0 #1c1030; line-height: 1.6; }
.profile-sub { font-size: 8px; color: var(--mc-green); text-shadow: 1px 1px 0 var(--mc-green-dk); margin-top: 8px; line-height: 1.8; }
.nick-skin { display: inline-block; width: 16px; height: 16px; background: var(--mc-green); margin-right: 6px; image-rendering: pixelated; vertical-align: middle; }
.nick-remove { font-family: inherit; font-size: 9px; color: #ff8a8a; background: #5a1f1a; border: 2px solid #000; box-shadow: inset 1px 1px 0 #a04040, inset -1px -1px 0 #2a0f0c; padding: 5px 8px; cursor: pointer; text-shadow: 1px 1px 0 #000; }
.nick-remove:hover { filter: brightness(1.25); }
.nick-empty { font-size: 9px; color: var(--mc-gray); line-height: 1.9; text-align: center; padding: 8px; }
.section-label { font-size: 10px; color: var(--mc-yellow); text-shadow: 2px 2px 0 #1c1030; margin-bottom: 12px; }
@media (max-width: 520px) { .mc-title { font-size: 20px; } .btn { font-size: 10px; padding: 12px 10px; } .card { padding: 20px 14px; } .add-nick-form { flex-direction: column; } .add-nick-form .btn { width: 100%; } .profile-name { font-size: 12px; } }
@media (max-width: 360px) { .mc-title { font-size: 16px; } .btn { font-size: 9px; } }

/* Шапка возврата на основной сайт. Вставляется nginx'ом в страницы плагина. */
.site-nav {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    padding: 0 22px; height: 52px;
    background: #0a0818; border-bottom: 1px solid rgba(180,79,255,0.15);
    font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1px;
    margin-bottom: 24px;
}
.site-nav a { color: rgba(255,255,255,0.55); text-decoration: none; }
.site-nav a:hover { color: #fff; }
.site-nav a:first-child { color: #b44fff; }
@media (max-width: 560px) {
    .site-nav { height: auto; padding: 12px 14px; gap: 12px; font-size: 8px; }
}

/* Плашка со «сплэшем» вылезала за правый край на телефонах —
   прячем её на узких экранах и не даём растягивать страницу. */
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 620px) {
    .mc-splash { display: none; }
}