:root{
--bg:#050805;
--panel:#0b100b;
--green:#35ff5a;
--dark:#16852b;
--soft:#8cff9d;
--text:#d5ffd9;
--red:#ff4444;
--yellow:#ffff55
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
min-height:100vh;
background:radial-gradient(circle,#101810 0,#030503 80%);
color:var(--text);
font-family:"Courier New",monospace;
overflow-x:hidden
}

body:before{
content:"";
pointer-events:none;
position:fixed;
inset:0;
z-index:9999;
background:repeating-linear-gradient(
to bottom,
rgba(255,255,255,.025) 0,
rgba(255,255,255,.025) 1px,
transparent 2px,
transparent 4px
)
}

body:after{
content:"";
pointer-events:none;
position:fixed;
inset:0;
z-index:9998;
box-shadow:
inset 0 0 100px #000,
inset 0 0 20px rgba(0,255,50,.08)
}

button,input,textarea{font-family:inherit}

a{
color:var(--green);
text-decoration:none
}

a:hover{
color:#fff;
text-shadow:0 0 8px var(--green)
}

.wrapper{
width:min(1200px,calc(100% - 20px));
margin:15px auto
}

header,nav,.sidebar,.panel,footer{
border:2px solid var(--dark);
background:var(--panel);
box-shadow:inset 0 0 25px rgba(0,255,50,.025)
}

header{padding:18px}

.logo{
color:var(--green);
font-size:clamp(25px,5vw,55px);
font-weight:bold;
letter-spacing:5px;
text-shadow:
0 0 4px var(--green),
0 0 15px rgba(50,255,80,.5)
}

.logo-small{
color:var(--soft);
font-size:14px;
margin-top:5px
}

.blink{
animation:blink 1s steps(2,start) infinite
}

@keyframes blink{
50%{opacity:0}
}

.status{
margin-top:15px;
padding-top:10px;
border-top:1px dashed var(--dark);
display:flex;
flex-wrap:wrap;
gap:20px;
font-size:13px
}

.online{color:var(--green)}
.offline{color:var(--red)}
.warning{color:var(--yellow)}

nav{
margin-top:10px;
display:flex;
flex-wrap:wrap
}

nav button{
padding:12px 15px;
border:0;
border-right:1px solid var(--dark);
background:transparent;
color:var(--green);
cursor:pointer;
font-weight:bold
}

nav button:hover,
nav button.active{
background:var(--green);
color:#001800
}

.marquee{
    overflow:hidden;
    white-space:nowrap;
    border-top:1px dashed var(--dark);
    border-bottom:1px dashed var(--dark);
    padding:7px;
    color:var(--soft);
}

.marquee span{
    display:inline-block;
    white-space:nowrap;
    transform:translateX(100%);
    animation:scrollText 9s linear infinite;
}

.marquee-random{
    border-top:0;
    color:var(--green);
}

.marquee-random span{
    animation-duration:9s;
}

@keyframes scrollText{
    0%{
        transform:translateX(100%);
    }

    100%{
        transform:translateX(-100%);
    }
}

.layout{
display:grid;
grid-template-columns:220px 1fr;
gap:10px;
margin-top:10px
}

@media(max-width:750px){
.layout{grid-template-columns:1fr}
}

.sidebar{
height:max-content;
padding:10px
}

.sidebar h3{
margin-top:0;
padding-bottom:8px;
border-bottom:1px dashed var(--dark);
color:var(--green)
}

.side-link{
padding:8px;
border-bottom:1px dotted #245b2c;
cursor:pointer
}

.side-link:hover{
background:#142014
}

.side-box{
margin-top:15px;
padding:10px;
border:1px solid var(--dark);
font-size:12px
}

.account-mini{
text-align:center
}

.account-mini img{
width:80px;
height:80px;
object-fit:cover;
border:2px solid var(--green);
background:#000;
margin-bottom:8px
}

.account-mini-name{
color:var(--green);
font-weight:bold;
word-break:break-word
}

.page{display:none}
.page.active{display:block}

.panel{
margin-bottom:10px
}

.panel-title{
padding:9px 12px;
border-bottom:1px solid var(--dark);
background:#101b10;
color:var(--green);
font-weight:bold
}

.panel-content{
padding:15px
}

.hero{
min-height:270px;
display:flex;
align-items:center
}

.hero h1{
color:var(--green);
font-size:clamp(25px,5vw,45px)
}

.prompt{color:var(--green)}

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px
}

@media(max-width:700px){
.cards{grid-template-columns:1fr}
}

.card{
padding:15px;
border:1px solid var(--dark);
background:#091009
}

.card:hover{
border-color:var(--green)
}

.retro-btn{
padding:8px 12px;
border:1px solid var(--green);
background:#0a160a;
color:var(--green);
cursor:pointer
}

.retro-btn:hover{
background:var(--green);
color:#001500
}

.retro-btn.danger{
border-color:var(--red);
color:var(--red)
}

.retro-btn.danger:hover{
background:var(--red);
color:#160000
}

.retro-input,
.retro-textarea{
width:100%;
margin-bottom:10px;
padding:10px;
outline:0;
border:1px solid var(--dark);
background:#020602;
color:var(--soft)
}

.retro-input:focus,
.retro-textarea:focus{
border-color:var(--green);
box-shadow:0 0 8px rgba(53,255,90,.15)
}

.retro-textarea{
min-height:120px;
resize:vertical
}

.auth-box{
max-width:600px;
margin:auto
}

.auth-section{
padding:15px;
border:1px solid var(--dark);
background:#080d08;
margin-bottom:10px
}

.auth-section h3{
margin-top:0;
color:var(--green)
}

.auth-label{
display:block;
color:var(--soft);
margin-bottom:5px
}

.auth-status{
min-height:22px;
margin-top:12px;
padding:8px;
border:1px dashed var(--dark);
background:#020502
}

.auth-status.success{color:var(--green)}
.auth-status.error{color:var(--red)}

.account-card{
text-align:center;
max-width:600px;
margin:auto
}

.account-avatar{
width:150px;
height:150px;
object-fit:cover;
border:3px solid var(--green);
background:#000
}

.account-username{
margin:15px 0 5px;
color:var(--green);
font-size:28px;
font-weight:bold
}

.account-id{
color:#58745c;
font-size:12px
}

.account-status{
margin:15px 0;
color:var(--green)
}

.account-actions{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap
}

.avatar-editor{
margin-top:20px;
padding:15px;
border:1px dashed var(--dark);
text-align:left;
background:#050905
}

.avatar-preview{
display:flex;
align-items:center;
gap:15px;
margin-bottom:15px
}

.avatar-preview img{
width:90px;
height:90px;
object-fit:cover;
border:2px solid var(--green);
background:#000
}

.upload-box{
margin-bottom:15px;
padding:20px;
border:1px dashed var(--dark)
}

.upload-status{
margin-top:10px;
color:var(--soft)
}

.media-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:10px
}

.media-item{
padding:10px;
border:1px solid var(--dark);
background:#080d08;
overflow:hidden
}

.media-item img,
.media-item video{
width:100%;
max-height:200px;
object-fit:contain;
background:#000
}

.media-item audio{
width:100%
}

#neocities-info {
    margin-top: 10px;
}

/* ================= CHAT ================= */

.chat-box{
height:420px;
overflow-y:auto;
padding:10px;
border:1px solid var(--dark);
background:#020502
}

.chat-message{
margin-bottom:10px;
padding-left:10px;
border-left:3px solid var(--dark);
word-break:break-word
}

.chat-user{
color:var(--green);
font-weight:bold
}

.chat-time{
color:#58745c;
font-size:11px
}

.chat-form{
display:flex;
gap:5px;
margin-top:10px;
align-items:flex-start
}

.chat-input-area{
flex:1;
display:flex;
gap:5px;
position:relative
}

.chat-input-area input{
margin:0;
flex:1
}

/* ================= EMOTES ================= */

.emote-button{
min-width:90px;
height:40px;
padding:8px 10px;
border:1px solid var(--green);
background:#0a160a;
color:var(--green);
cursor:pointer;
font-weight:bold
}

.emote-button:hover,
.emote-button.active{
background:var(--green);
color:#001500
}

.emote-picker{
display:none;
position:absolute;
bottom:48px;
left:0;
width:min(520px,90vw);
max-height:300px;
overflow-y:auto;
padding:10px;
border:2px solid var(--dark);
background:#050905;
box-shadow:
0 0 20px rgba(0,255,50,.15),
inset 0 0 20px rgba(0,255,50,.04);
z-index:100
}

.emote-picker.open{
display:block
}

.emote-title{
color:var(--green);
font-weight:bold;
padding-bottom:8px;
margin-bottom:10px;
border-bottom:1px dashed var(--dark)
}

.emote-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
gap:8px
}

.emote-item{
min-height:85px;
padding:6px;
border:1px solid #245b2c;
background:#080d08;
color:var(--soft);
cursor:pointer;
text-align:center
}

.emote-item:hover{
border-color:var(--green);
background:#102010;
color:#fff
}

.emote-item img{
display:block;
width:55px;
height:55px;
object-fit:contain;
margin:0 auto 5px;
background:#000
}

.emote-name{
font-size:10px;
word-break:break-all
}

/* Emotes affichées dans le chat */

.chat-emote{
display:inline-block;
width:70px;
height:70px;
object-fit:contain;
vertical-align:middle;
margin:3px;
background:#000;
border:1px solid #245b2c
}

.chat-text{
white-space:pre-wrap
}

@media(max-width:700px){

.chat-form{
flex-direction:column
}

.chat-input-area{
width:100%
}

.chat-form button{
width:100%
}

.emote-button{
width:100%
}

.emote-picker{
bottom:90px
}

}

/* =========================================================
   RANDOM GALLERY
========================================================= */

.random-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fill,160px);

    gap:10px;

    margin-top:20px;
}

.random-card{
    position:relative;

    width:160px;
    height:80px;

    overflow:hidden;

    border:2px solid var(--dark);

    background:#020502;

    cursor:pointer;

    transition:
        transform .15s,
        border-color .15s,
        box-shadow .15s;
}

.random-card:hover{

    border-color:var(--green);

    transform:scale(1.03);

    box-shadow:
        0 0 15px
        rgba(53,255,90,.25);
}


/* GIF / PNG / WEBP / JPG */

.random-card img{

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;

    display:block;

}


/* TITRE */

.random-card-title{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:7px;
    padding-top:25px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.95)
        );

    color:var(--green);

    font-size:12px;

    pointer-events:none;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;
}


/* NUMERO */

.random-card-number{

    position:absolute;

    top:5px;
    left:5px;

    padding:3px 6px;

    background:#020502;

    border:1px solid var(--dark);

    color:var(--green);

    font-size:10px;

    pointer-events:none;
}


/* MOBILE */

@media(max-width:700px){

    .random-grid{

        grid-template-columns:
            repeat(2,160px);

    }

}


@media(max-width:400px){

    .random-grid{

        grid-template-columns:
            160px;

    }

}

/* =========================================================
   GLITCH EFFECT
========================================================= */

.random-glitch{

    animation:
        randomGlitch .08s
        steps(2)
        infinite;

}


@keyframes randomGlitch{

    0%{
        transform:translate(0,0);
    }

    25%{
        transform:translate(-5px,2px);
    }

    50%{
        transform:translate(5px,-2px);
    }

    75%{
        transform:translate(-2px,-3px);
    }

    100%{
        transform:translate(0,0);
    }

}

/* ================= FIN CHAT ================= */

.terminal{
min-height:380px;
padding:12px;
overflow-y:auto;
border:1px solid var(--dark);
background:#020502
}

.terminal-output{
min-height:320px;
white-space:pre-wrap;
line-height:1.5
}

.terminal-input-line{
display:flex
}

.terminal-input{
flex:1;
border:0;
outline:0;
background:transparent;
color:var(--green)
}

.game{
padding:20px;
text-align:center
}

.click-target{
width:120px;
height:120px;
margin:30px auto;
display:flex;
justify-content:center;
align-items:center;
border:3px solid var(--green);
cursor:pointer;
user-select:none
}

.muted{
color:#58745c;
font-size:12px
}

footer{
margin-top:10px;
padding:20px;
text-align:center;
font-size:12px
}

/* =========================
   DAVID SHOP
========================= */

.shop-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
    padding:15px;
    border:1px solid var(--dark);
    background:#050805;
}

.shop-coins{
    color:var(--yellow);
    font-weight:bold;
    white-space:nowrap;
}

.shop-grid{
    display:grid;
    grid-template-columns:repeat(
        auto-fit,
        minmax(180px, 1fr)
    );
    gap:15px;
}

.shop-item{
    padding:12px;
    border:1px solid var(--dark);
    background:#050805;
    text-align:center;
}

.shop-item:hover{
    border-color:var(--green);
}

.shop-preview{
    height:140px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:12px;
    background:#000;
    border:1px solid #183b1d;
    overflow:hidden;
}

.shop-preview img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.shop-item-title{
    margin-bottom:8px;
    color:var(--green);
    font-weight:bold;
}

.shop-item-description{
    min-height:35px;
    margin-bottom:10px;
    font-size:12px;
    color:var(--soft);
}

.shop-item-price{
    margin:10px 0;
    color:var(--yellow);
    font-weight:bold;
}

.shop-buy-btn{
    width:100%;
    padding:9px;
    border:1px solid var(--green);
    background:#061006;
    color:var(--green);
    font-family:inherit;
    font-weight:bold;
    cursor:pointer;
}

.shop-buy-btn:hover{
    background:var(--green);
    color:#000;
}

.shop-buy-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.shop-loading,
.shop-message{
    grid-column:1/-1;
    padding:25px;
    border:1px dashed var(--dark);
    text-align:center;
    color:var(--soft);
}

.david-chat-iframe {
    width: 100% !important;
    height: 650px !important;
    min-height: 650px !important;
    max-height: none !important;
    border: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* =========================
   NAME EFFECTS
========================= */

.shop-name-preview{
    font-size:32px;
    font-weight:bold;
    letter-spacing:2px;
    text-transform:uppercase;
}

.name-rgb{
    background:linear-gradient(
        90deg,
        red,
        orange,
        yellow,
        lime,
        cyan,
        blue,
        violet,
        red
    );

    background-size:400% 100%;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:nameRGB 3s linear infinite;
}

@keyframes nameRGB{

    0%{
        background-position:0% 50%;
    }

    100%{
        background-position:400% 50%;
    }

}