/* HOFMATT AGAR — Flamboyant Deluxe Edition */

:root {
    --neon-pink:   #FF00FF;
    --neon-cyan:   #00FFFF;
    --neon-gold:   #FFD700;
    --neon-green:  #00FF41;
    --neon-orange: #FF6600;
    --deep-bg:     #060010;
    --dialog-bg:   #0F0020;
    --border-px:   3px;
}

/* ─── KEYFRAMES ─────────────────────────────────────────────────── */

@keyframes neonPulse {
    0%,100% { box-shadow:0 0 6px var(--neon-pink),0 0 14px var(--neon-pink),0 0 28px var(--neon-pink),inset 0 0 6px rgba(255,0,255,.1); }
    50%     { box-shadow:0 0 12px var(--neon-pink),0 0 30px var(--neon-pink),0 0 60px var(--neon-pink),inset 0 0 12px rgba(255,0,255,.2); }
}

@keyframes rainbowBorder {
    0%   { border-color:#FF0080; }
    16%  { border-color:#FF8C00; }
    33%  { border-color:#FFE600; }
    50%  { border-color:#00FF41; }
    66%  { border-color:#00CFFF; }
    83%  { border-color:#CC00FF; }
    100% { border-color:#FF0080; }
}

@keyframes titleGlow {
    0%,100% { text-shadow:0 0 8px #FF0080,0 0 20px #FF0080,0 0 40px #FF0080; color:#FF80C0; }
    50%     { text-shadow:0 0 8px #00FFFF,0 0 20px #00FFFF,0 0 40px #00FFFF; color:#80FFFF; }
}

@keyframes goldGlow {
    0%,100% { text-shadow:0 0 6px #FFD700,0 0 14px #FFD700; color:#FFD700; }
    50%     { text-shadow:0 0 6px #FF8C00,0 0 14px #FF8C00; color:#FFA040; }
}

@keyframes btnPulse {
    0%,100% { box-shadow:0 0 8px var(--neon-pink),0 0 16px var(--neon-pink); }
    50%     { box-shadow:0 0 18px var(--neon-pink),0 0 36px var(--neon-pink),0 0 54px var(--neon-pink); }
}

@keyframes spin {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}

@keyframes blink {
    0%,49%  { opacity:1; }
    50%,99% { opacity:0; }
}

@keyframes slideUp {
    from { transform:translate(-50%,-40%); opacity:0; }
    to   { transform:translate(-50%,-50%); opacity:1; }
}

@keyframes scanline {
    from { transform:translateY(-100vh); }
    to   { transform:translateY(100vh); }
}

@keyframes starTwinkle {
    0%,100% { opacity:.25; }
    50%     { opacity:1; }
}

@keyframes splashFanfare {
    0%   { transform:scale(.4) rotate(-8deg); opacity:0; }
    60%  { transform:scale(1.06) rotate(2deg); opacity:1; }
    100% { transform:scale(1) rotate(0deg); opacity:1; }
}

/* ─── GLOBAL ────────────────────────────────────────────────────── */

*,*::before,*::after { box-sizing:border-box; }

body {
    margin:0; padding:0;
    overflow:hidden;
    background:var(--deep-bg);
    font-family:'Courier New',monospace;
}

/* ─── CANVAS ────────────────────────────────────────────────────── */

#canvas {
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
}

/* ─── SPLASH SCREEN ─────────────────────────────────────────────── */

#splashScreen {
    position:fixed;
    inset:0;
    z-index:9999;
    background:radial-gradient(ellipse at 50% 40%,#220050 0%,#080018 55%,#000005 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    overflow:hidden;
    transition:opacity .9s ease;
}

#splashScreen.hidden {
    opacity:0;
    pointer-events:none;
}

/* Star field */
.splash-stars::before,
.splash-stars::after {
    content:'';
    position:absolute;
    top:0; left:0;
    width:2px; height:2px;
    border-radius:50%;
    background:transparent;
    box-shadow:
        42px 67px #fff,123px 31px #fff,198px 189px #fff,275px 55px #fff,
        352px 143px #fff,427px 22px #fff,503px 278px #fff,581px 96px #fff,
        656px 213px #fff,731px 18px #fff,808px 159px #fff,883px 304px #fff,
        958px 77px #fff,1034px 241px #fff,1109px 133px #fff,1184px 58px #fff,
        71px 321px #fff,147px 408px #fff,223px 489px #fff,299px 367px #fff,
        375px 445px #fff,451px 522px #fff,527px 395px #fff,603px 468px #fff,
        679px 540px #fff,755px 412px #fff,831px 488px #fff,907px 359px #fff,
        983px 527px #fff,1059px 448px #fff,1135px 381px #fff,1211px 515px #fff;
    animation:starTwinkle 2.8s ease-in-out infinite;
}

.splash-stars::after {
    width:1px; height:1px;
    box-shadow:
        88px 172px rgba(255,200,255,.8),164px 56px rgba(200,255,255,.8),
        240px 248px rgba(255,255,200,.8),316px 124px rgba(255,200,200,.8),
        392px 336px rgba(200,255,200,.8),468px 200px rgba(255,200,255,.8),
        544px 88px rgba(200,200,255,.8),620px 312px rgba(255,255,200,.8),
        696px 176px rgba(255,200,255,.8),772px 424px rgba(200,255,255,.8),
        848px 64px rgba(200,255,200,.8),924px 280px rgba(255,200,200,.8),
        1000px 448px rgba(200,200,255,.8),1076px 112px rgba(255,255,200,.8);
    animation:starTwinkle 1.9s ease-in-out infinite .6s;
}

/* Scanline sweep */
#splashScreen::after {
    content:'';
    position:absolute;
    left:0; right:0; height:3px;
    background:linear-gradient(transparent,rgba(255,0,255,.18),transparent);
    animation:scanline 3.4s linear infinite;
    pointer-events:none;
    z-index:1;
}

.splash-logo {
    width:130px; height:130px;
    z-index:2;
    filter:drop-shadow(0 0 12px var(--neon-pink)) drop-shadow(0 0 28px #8800FF);
    animation:spin 10s linear infinite, splashFanfare .8s cubic-bezier(.23,1,.32,1) both;
}

.splash-logo .st0 { fill:var(--neon-pink); }

.splash-title {
    font-size:clamp(28px,5vw,52px);
    font-weight:900;
    letter-spacing:6px;
    text-transform:uppercase;
    text-align:center;
    line-height:1.3;
    animation:titleGlow 2.2s ease-in-out infinite;
    z-index:2;
    padding:0 16px;
    margin:24px 0 6px;
}

.splash-subtitle {
    font-size:14px;
    letter-spacing:4px;
    text-transform:uppercase;
    animation:goldGlow 1.6s ease-in-out infinite;
    z-index:2;
    margin:0 0 36px;
}

.splash-presskey {
    font-size:13px;
    letter-spacing:2px;
    color:var(--neon-cyan);
    text-shadow:0 0 10px var(--neon-cyan),0 0 22px var(--neon-cyan);
    text-transform:uppercase;
    z-index:2;
    animation:blink 1.3s step-end infinite;
    margin:0;
}

.splash-version {
    position:absolute;
    bottom:18px; right:22px;
    font-size:10px;
    color:rgba(200,100,255,.5);
    letter-spacing:2px;
    z-index:2;
}

/* ─── OVERLAYS BACKDROP ─────────────────────────────────────────── */

#overlays {
    display:none;
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at center,rgba(50,0,90,.72) 0%,rgba(0,0,20,.88) 100%);
    z-index:200;
}

/* ─── MAIN DIALOG ───────────────────────────────────────────────── */

#helloDialog {
    width:min(430px,95vw);
    background:linear-gradient(150deg,#180030 0%,#0A0018 60%,#180030 100%);
    border:var(--border-px) solid var(--neon-pink);
    border-radius:14px;
    padding:10px 20px 16px;
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    animation:neonPulse 2.6s ease-in-out infinite, slideUp .45s cubic-bezier(.23,1,.32,1) both;
    box-shadow:0 0 22px var(--neon-pink),0 0 50px rgba(255,0,255,.25),inset 0 0 18px rgba(255,0,255,.06);
}

/* Rainbow outer ring */
#helloDialog::before {
    content:'';
    position:absolute;
    inset:-5px;
    border-radius:17px;
    border:2px solid #FF0080;
    animation:rainbowBorder 3.2s linear infinite;
    pointer-events:none;
    z-index:-1;
}

#title {
    text-align:center;
    font-size:22px;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
    padding:10px 0 4px;
    animation:titleGlow 2.2s ease-in-out infinite;
}

#subtitle {
    font-size:12px;
    text-align:center;
    padding-bottom:.9rem;
    letter-spacing:1px;
    animation:goldGlow 1.8s ease-in-out infinite;
}

/* ─── LOGO IN DIALOG ────────────────────────────────────────────── */

.logo {
    width:80px;
    display:flex;
    margin:1.2rem auto .4rem;
    filter:drop-shadow(0 0 8px var(--neon-pink));
}

.st0 { fill:var(--neon-pink); }

/* ─── MUSIC TOGGLE ──────────────────────────────────────────────── */

#musicToggle {
    position:absolute;
    top:10px; right:12px;
    background:rgba(100,0,150,.5);
    border:1px solid #8800CC;
    border-radius:6px;
    color:#CC88FF;
    font-size:16px;
    cursor:pointer;
    padding:2px 7px;
    line-height:1.4;
    transition:all .2s;
    z-index:1;
}

#musicToggle:hover { background:rgba(150,0,220,.6); color:#FF88FF; }

/* ─── FORM ──────────────────────────────────────────────────────── */

#nick {
    width:65%; float:left;
    background:rgba(0,0,30,.85) !important;
    border:2px solid var(--neon-cyan) !important;
    border-radius:7px !important;
    color:var(--neon-cyan) !important;
    text-shadow:0 0 4px var(--neon-cyan);
    box-shadow:0 0 10px rgba(0,255,255,.25),inset 0 0 5px rgba(0,255,255,.08);
    height:36px; padding:0 12px;
    font-size:13px; letter-spacing:1px;
    transition:all .3s;
}

#nick:focus {
    border-color:var(--neon-pink) !important;
    color:#FF80FF !important;
    box-shadow:0 0 15px rgba(255,0,255,.45),inset 0 0 8px rgba(255,0,255,.12);
    outline:none;
}

#nick::placeholder { color:rgba(0,255,255,.35); }

#gamemode { width:0%; float:right; }
#play-btn { width:85%; float:left; }

/* ─── BUTTONS ───────────────────────────────────────────────────── */

.btn-play {
    background:linear-gradient(135deg,#BB00FF 0%,#FF0080 55%,#FF5500 100%) !important;
    border:2px solid var(--neon-pink) !important;
    border-radius:8px !important;
    color:#FFF !important;
    font-size:15px !important;
    font-weight:900 !important;
    letter-spacing:3px !important;
    text-transform:uppercase !important;
    text-shadow:0 0 8px rgba(255,255,255,.85) !important;
    animation:btnPulse 2.2s ease-in-out infinite;
    transition:filter .15s;
}

.btn-play:hover,.btn-play:focus {
    filter:brightness(1.18);
    box-shadow:0 0 24px var(--neon-pink),0 0 48px var(--neon-pink) !important;
}

#settings-btn {
    width:13%; float:right;
    background:linear-gradient(135deg,#5500AA 0%,#9900FF 100%) !important;
    border:2px solid #BB00FF !important;
    border-radius:7px !important;
    color:var(--neon-gold) !important;
    text-shadow:0 0 6px var(--neon-gold) !important;
    box-shadow:0 0 8px rgba(150,0,255,.45);
}

#settings-btn:hover {
    background:linear-gradient(135deg,#8800CC 0%,#CC44FF 100%) !important;
    box-shadow:0 0 18px rgba(170,0,255,.75) !important;
}

.btn-info {
    background:linear-gradient(135deg,#0033BB 0%,#0077FF 100%) !important;
    border:2px solid #00AAFF !important;
    border-radius:7px !important;
    color:#FFF !important;
    text-shadow:0 0 5px rgba(255,255,255,.7) !important;
    box-shadow:0 0 8px rgba(0,180,255,.3);
    transition:filter .15s;
}

.btn-info:hover,.btn-info:focus {
    filter:brightness(1.15);
    box-shadow:0 0 16px rgba(0,180,255,.55) !important;
}

#spectate-btn {
    margin-top:-5px;
    background:linear-gradient(135deg,#002200 0%,#004400 100%) !important;
    border:2px solid var(--neon-green) !important;
    color:var(--neon-green) !important;
    text-shadow:0 0 6px var(--neon-green) !important;
    box-shadow:0 0 8px rgba(0,255,65,.25);
    width:100%; border-radius:7px !important;
    transition:filter .15s;
}

#spectate-btn:hover { filter:brightness(1.2); }

.btn-default,.btn-default:active,.btn-default.active {
    background:linear-gradient(135deg,#1E0035 0%,#360055 100%) !important;
    border:2px solid #7700BB !important;
    color:#CC88FF !important;
    box-shadow:0 0 5px rgba(120,0,200,.3);
    border-radius:6px !important;
}

.btn-default:hover {
    background:linear-gradient(135deg,#2E0050 0%,#550080 100%) !important;
    border-color:#AA44FF !important;
    color:#FFAAFF !important;
}

/* Upload row */
.btn.btn-sm {
    font-size:11px !important;
}

/* ─── SETTINGS PANEL ────────────────────────────────────────────── */

#settings {
    background:rgba(0,0,22,.6);
    border:1px solid #440099;
    border-radius:9px;
    padding:8px 12px;
    margin-top:8px;
}

.checkbox label {
    margin-right:10px;
    color:#BB88FF;
    text-shadow:0 0 4px rgba(200,136,255,.4);
    font-size:11px;
    cursor:pointer;
    transition:color .2s;
}

.checkbox label:hover { color:var(--neon-pink); text-shadow:0 0 7px var(--neon-pink); }

.checkbox input[type="checkbox"] { accent-color:var(--neon-pink); }

/* ─── INSTRUCTIONS ──────────────────────────────────────────────── */

#instructions { color:#9988BB; font-size:11.5px; letter-spacing:.4px; }
#instructions hr { border-color:#330066; margin:8px 0; }
#instructions b { color:var(--neon-gold); text-shadow:0 0 5px var(--neon-gold); }

/* ─── CONNECTING ────────────────────────────────────────────────── */

#connecting {
    display:none;
    position:absolute; inset:0;
    z-index:100;
    background:radial-gradient(ellipse at center,rgba(50,0,90,.82) 0%,rgba(0,0,25,.92) 100%);
}

#connecting > div {
    width:min(380px,90vw);
    background:linear-gradient(150deg,#180030,#0A0018);
    border:var(--border-px) solid var(--neon-pink);
    border-radius:14px;
    padding:20px 24px;
    margin:100px auto;
    box-shadow:0 0 24px rgba(255,0,255,.35);
    color:#CC88FF;
}

#connecting h2 { color:#FF80FF; animation:titleGlow 2s ease-in-out infinite; }

/* ─── MODAL ─────────────────────────────────────────────────────── */

.modal-content {
    background:linear-gradient(150deg,#180030 0%,#0A001A 100%) !important;
    border:2px solid var(--neon-pink) !important;
    border-radius:12px !important;
    box-shadow:0 0 30px rgba(255,0,255,.35) !important;
    color:#EE88FF !important;
}

.modal-header {
    border-bottom:1px solid #440088 !important;
    background:rgba(80,0,120,.3) !important;
    border-radius:10px 10px 0 0 !important;
}

.modal-footer { border-top:1px solid #440088 !important; }

.modal-title { color:#FF80FF !important; text-shadow:0 0 8px var(--neon-pink); }

.close { color:#FF80FF !important; text-shadow:0 0 6px var(--neon-pink); opacity:.8; }
.close:hover { opacity:1; color:#FFF !important; }

/* ─── LOADER SPINNER ────────────────────────────────────────────── */

.loader {
    border:4px solid rgba(255,0,255,.12);
    border-top:4px solid var(--neon-pink);
    border-right:4px solid var(--neon-cyan);
    border-radius:50%;
    width:44px; height:44px;
    animation:spin .7s linear infinite;
    box-shadow:0 0 12px rgba(255,0,255,.4);
}

.center { display:table; margin:0 auto; }

/* ─── CHAT BOX ──────────────────────────────────────────────────── */

#chat_textbox {
    position:absolute; z-index:1;
    bottom:10px; left:10px;
    width:300px; height:34px;
    background:rgba(0,0,22,.65);
    border:2px solid rgba(0,200,255,.35) !important;
    border-radius:7px;
    outline:none;
    color:var(--neon-cyan);
    text-indent:10px; font-size:13px;
    transition:all .3s;
    box-shadow:0 0 8px rgba(0,200,255,.15);
}

#chat_textbox:focus {
    background:rgba(0,0,32,.88);
    border-color:var(--neon-cyan) !important;
    box-shadow:0 0 16px rgba(0,255,255,.35);
}

#chat_textbox::placeholder { color:rgba(0,200,255,.35); font-style:italic; }

/* ─── MISC ──────────────────────────────────────────────────────── */

.mb-10 { margin-bottom:10px; }

#hint {
    color:#FF4444 !important;
    text-shadow:0 0 8px #FF0000;
    font-weight:bold; text-align:center;
}

#footer { text-align:center; margin:-10px 0 10px; }

/* Upload preview */
#uploadPreview {
    border:2px solid var(--neon-pink) !important;
    box-shadow:0 0 8px rgba(255,0,255,.4);
}

#uploadStatus { color:#9966CC; }