/* ============================================================
   UNIVERS2000FUN — STYLESHEET OFFICIEL
   Optimisé pour Internet Explorer 6.0 — Résolution 800x600
   WebMaster : admin@univers2000fun.com
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== BODY & BACKGROUND ===== */
body {
    background-color: #000011;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,150,0.15) 1px, transparent 1px);
    background-size: 80px 80px, 130px 130px, 200px 200px;
    background-position: 0 0, 40px 40px, 100px 70px;
    color: #FFFFFF;
    font-family: 'Comic Sans MS', 'Trebuchet MS', Arial, sans-serif;
    font-size: 13px;
    min-width: 810px;
}

/* ===== LINKS ===== */
a               { color: #00CCFF; text-decoration: underline; }
a:visited       { color: #FF9900; }
a:hover         { color: #FFFF00; text-decoration: underline; }
a:active        { color: #FF3300; }

/* ===== WRAPPER ===== */
#wrapper {
    width: 808px;
    margin: 0 auto;
    border-left:  1px solid #222244;
    border-right: 1px solid #222244;
}

/* ===== HEADER ===== */
#header {
    background: linear-gradient(180deg,
        #000066 0%,
        #000044 30%,
        #110022 60%,
        #220000 80%,
        #000000 100%
    );
    border: 3px solid #FF6600;
    border-bottom: none;
    text-align: center;
    padding: 14px 10px 10px;
    position: relative;
    overflow: hidden;
}
#header::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(255,102,0,0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 50%, rgba(0,100,255,0.12) 0%, transparent 55%);
    pointer-events: none;
}
.site-title {
    font-size: 46px;
    font-weight: 900;
    font-family: Impact, 'Arial Black', Arial, sans-serif;
    color: orange;
}
.site-subtitle {
    color: #00FFFF;
    font-size: 13px;
    font-style: italic;
    margin-top: 4px;
}
.site-tagline {
    font-size: 11px;
    color: #FF9999;
    margin-top: 3px;
    letter-spacing: 1px;
}
.header-flames { font-size: 30px; vertical-align: middle; }

/* ===== MARQUEE BAR ===== */
.marquee-bar {
    background: linear-gradient(180deg, #880000 0%, #BB0000 50%, #880000 100%);
    border-left:  3px solid #FF6600;
    border-right: 3px solid #FF6600;
    padding: 5px 0;
    color: #FFFF00;
    font-weight: bold;
    font-size: 12px;
}

/* ===== NAVIGATION ===== */
#navigation {
    background: linear-gradient(180deg, #001033 0%, #001A55 50%, #001033 100%);
    border: 3px solid #0066CC;
    border-top: none;
    padding: 10px 0 12px;
    text-align: center;
}
.nav-table {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 6px 0;
}

/* --- Bouton ORANGE --- */
.btn-nav-orange {
    display: inline-block;
    width: 148px;
    padding: 9px 6px;
    background: linear-gradient(180deg,
        #FFAA00 0%,
        #FF7700 30%,
        #EE4400 60%,
        #FF5500 100%
    );
    border-top:    2px solid #FFDD88;
    border-left:   2px solid #FFCC55;
    border-bottom: 2px solid #882200;
    border-right:  2px solid #882200;
    border-radius: 3px;
    color: #FFFFFF !important;
    font-weight: bold;
    font-size: 12px;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    line-height: 1.35;
}
.btn-nav-orange:hover {
    background: linear-gradient(180deg,
        #FFCC00 0%,
        #FF9900 30%,
        #FF5500 60%,
        #FF7700 100%
    );
    border-top:    2px solid #882200;
    border-left:   2px solid #882200;
    border-bottom: 2px solid #FFCC55;
    border-right:  2px solid #FFDD88;
    color: #FFFF00 !important;
}
.btn-nav-orange:visited { color: #FFFFFF !important; }

/* --- Bouton BLEU --- */
.btn-nav-blue {
    display: inline-block;
    width: 148px;
    padding: 9px 6px;
    background: linear-gradient(180deg,
        #55AAFF 0%,
        #1177EE 30%,
        #0044BB 60%,
        #0055CC 100%
    );
    border-top:    2px solid #88CCFF;
    border-left:   2px solid #66BBFF;
    border-bottom: 2px solid #001166;
    border-right:  2px solid #001166;
    border-radius: 3px;
    color: #FFFFFF !important;
    font-weight: bold;
    font-size: 12px;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    line-height: 1.35;
}
.btn-nav-blue:hover {
    background: linear-gradient(180deg,
        #77CCFF 0%,
        #2299FF 30%,
        #0055CC 60%,
        #0077DD 100%
    );
    border-top:    2px solid #001166;
    border-left:   2px solid #001166;
    border-bottom: 2px solid #66BBFF;
    border-right:  2px solid #88CCFF;
    color: #CCFFFF !important;
}
.btn-nav-blue:visited { color: #FFFFFF !important; }

/* ===== MAIN LAYOUT ===== */
#main {
    background: linear-gradient(180deg, #000018 0%, #000030 100%);
    border-left:  3px solid #0055AA;
    border-right: 3px solid #0055AA;
    border-bottom: 3px solid #0055AA;
    display: flex;
    min-height: 600px;
}
#content {
    flex: 1;
    padding: 10px 12px;
    border-right: 2px dashed #223355;
}
#sidebar {
    width: 192px;
    padding: 8px 7px;
    background: linear-gradient(180deg, #00000F 0%, #000025 100%);
    flex-shrink: 0;
}

/* ===== CONTENT BOXES ===== */
.box {
    border: 1px solid #224477;
    margin-bottom: 10px;
    background: #00001E;
}
.box-title {
    background: linear-gradient(180deg, #003399 0%, #001166 100%);
    color: #FFFF00;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 1px solid #0044BB;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.box-title-orange {
    background: linear-gradient(180deg, #CC4400 0%, #881100 100%);
    color: #FFFF00;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 1px solid #FF5500;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.box-title-green {
    background: linear-gradient(180deg, #006600 0%, #002200 100%);
    color: #00FF88;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 1px solid #00AA44;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.box-content {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.55;
    color: #CCCCCC;
}

/* ===== SIDEBAR ===== */
.sbox {
    border: 1px solid #FF6600;
    margin-bottom: 8px;
    background: #00000A;
}
.sbox-title {
    background: linear-gradient(180deg, #CC4400 0%, #881100 100%);
    color: #FFFF00;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sbox-title-blue {
    background: linear-gradient(180deg, #003399 0%, #001166 100%);
    color: #CCFFFF;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sbox-content {
    padding: 6px 7px;
    font-size: 11px;
    color: #AAAACC;
    line-height: 1.5;
}

/* ===== VISITOR COUNTER ===== */
.counter-display {
    background: #000000;
    border: 2px inset #00CC00;
    color: #00FF00;
    font-family: 'Courier New', monospace;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    padding: 5px 4px;
    letter-spacing: 4px;
    display: block;
    margin: 4px 0;
}

/* ===== FOOTER ===== */
#footer {
    background: linear-gradient(180deg, #000000 0%, #000022 100%);
    border: 3px solid #0055AA;
    border-top: 1px solid #112244;
    padding: 10px;
    text-align: center;
    color: #555588;
    font-size: 11px;
}
#footer a { color: #4488BB; }

/* ===== SEPARATOR ===== */
.separator {
    height: 2px;
    background: linear-gradient(90deg, transparent, #FF6600, #FFFF00, #00FF00, #00FFFF, #0088FF, #FF00FF, #FF6600, transparent);
    margin: 7px 0;
    border: none;
}
hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #336699, #00CCFF, #336699, transparent);
    margin: 6px 0;
}

/* ===== JOKE ITEMS ===== */
.joke-item {
    background: linear-gradient(180deg, #00111E 0%, #00080F 100%);
    border: 1px solid #224455;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.joke-question {
    color: #FFCC00;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
}
.joke-answer {
    color: #00FFAA;
    font-size: 12px;
    padding: 4px 8px;
    border-left: 3px solid #00AA66;
    background: rgba(0,200,100,0.07);
}
.btn-reveal {
    background: linear-gradient(180deg, #FF9900 0%, #CC5500 100%);
    border: 1px outset #FFBB44;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    padding: 3px 10px;
    cursor: pointer;
    margin-top: 5px;
}
.btn-reveal:hover {
    background: linear-gradient(180deg, #FFAA00 0%, #DD6600 100%);
    border-style: inset;
}
.joke-meta {
    font-size: 10px;
    color: #556677;
    margin-top: 4px;
}
.stars { color: #FFCC00; }
.votes { color: #667788; font-size: 10px; }

/* ===== IMAGE GRID ===== */
.img-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
}
.img-card {
    border: 2px solid #224466;
    background: #000018;
    text-align: center;
    padding: 5px;
    cursor: pointer;
}
.img-card:hover {
    border-color: #FF6600;
    background: #00001F;
}
.img-placeholder {
    width: 100%;
    height: 110px;
    background: linear-gradient(135deg, #001133 0%, #002255 50%, #001133 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    margin-bottom: 5px;
    border: 1px solid #224466;
}
.img-caption {
    color: #AAAACC;
    font-size: 10px;
    line-height: 1.3;
}
.img-title {
    color: #FF9900;
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 2px;
}
.img-rating { color: #FFCC00; font-size: 12px; }

/* ===== VIDEO ITEMS ===== */
.video-item {
    display: flex;
    gap: 10px;
    background: linear-gradient(180deg, #0F0000 0%, #080000 100%);
    border: 1px solid #442222;
    padding: 8px;
    margin-bottom: 7px;
    align-items: flex-start;
}
.video-thumb {
    width: 128px;
    height: 96px;
    background: linear-gradient(135deg, #110000, #330000, #110000);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    border: 2px solid #CC2200;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}
.play-btn {
    position: absolute;
    font-size: 28px;
    opacity: 0.7;
}
.video-info { flex: 1; }
.video-title { color: #FF8800; font-weight: bold; font-size: 13px; margin-bottom: 4px; }
.video-desc  { color: #AAAAAA; font-size: 11px; line-height: 1.45; }
.video-meta  { color: #556677; font-size: 10px; margin-top: 5px; }

/* ===== GAME GRID ===== */
.game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 8px;
}
.game-card {
    background: linear-gradient(180deg, #001100 0%, #000811 100%);
    border: 2px solid #005522;
    padding: 8px;
    text-align: center;
    cursor: pointer;
}
.game-card:hover { border-color: #00FF66; }
.game-thumb {
    width: 100%;
    height: 95px;
    background: linear-gradient(135deg, #001100, #003311, #001100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    margin-bottom: 6px;
    border: 1px solid #005522;
}
.game-title { color: #00FF88; font-weight: bold; font-size: 12px; }
.game-genre { color: #88AAAA; font-size: 10px; margin-top: 2px; }
.game-desc  { color: #AAAAAA; font-size: 10px; margin-top: 3px; line-height: 1.35; }
.flash-warning {
    background: linear-gradient(180deg, #220000 0%, #110000 100%);
    border: 2px dashed #FF4400;
    padding: 10px 14px;
    margin: 10px;
    text-align: center;
    color: #FF9900;
    font-size: 12px;
}

/* ===== ZONE X ===== */
.age-gate {
    background: linear-gradient(180deg, #110000 0%, #000000 100%);
    border: 3px solid #FF0000;
    padding: 25px 20px;
    margin: 15px;
    text-align: center;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.zone-x-joke {
    background: linear-gradient(180deg, #110000 0%, #080000 100%);
    border: 1px solid #442222;
    border-left: 4px solid #CC0000;
    padding: 10px 12px;
    margin-bottom: 7px;
}

/* ===== LIVRE D'OR ===== */
.message-card {
    background: linear-gradient(180deg, #000022 0%, #000011 100%);
    border: 1px solid #224466;
    padding: 9px 11px;
    margin-bottom: 7px;
}
.msg-author  { color: #FF8800; font-weight: bold; font-size: 13px; }
.msg-date    { color: #557799; font-size: 10px; float: right; }
.msg-city    { color: #0099CC; font-size: 11px; margin-top: 2px; }
.msg-text    { color: #CCCCCC; font-size: 12px; margin-top: 6px; clear: both; line-height: 1.55; }
.msg-smiley  { font-size: 18px; }
.form-container {
    background: #000018;
    border: 1px solid #003399;
    padding: 14px;
    margin: 0 0 12px;
}
.form-field        { margin-bottom: 9px; }
.form-field label  { display: block; color: #FFFF00; font-size: 12px; font-weight: bold; margin-bottom: 3px; }
.form-field input,
.form-field textarea,
.form-field select {
    background: #00002A;
    border: 1px inset #004488;
    color: #FFFFFF;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 12px;
    padding: 4px 6px;
    width: 100%;
}
.form-field textarea { resize: vertical; }
.btn-submit {
    background: linear-gradient(180deg, #FF9900 0%, #CC5500 100%);
    border-top:    2px solid #FFCC44;
    border-left:   2px solid #FFBB33;
    border-bottom: 2px solid #882200;
    border-right:  2px solid #882200;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    padding: 7px 24px;
    cursor: pointer;
}
.btn-submit:hover {
    background: linear-gradient(180deg, #FFAA00 0%, #DD6600 100%);
    border-top:    2px solid #882200;
    border-left:   2px solid #882200;
    border-bottom: 2px solid #FFCC44;
    border-right:  2px solid #FFBB33;
}

/* ===== BADGE NEW / HOT ===== */
.badge-new {
    display: inline-block;
    background: linear-gradient(180deg, #FF0000 0%, #CC0000 100%);
    color: #FFFF00;
    font-size: 9px;
    font-weight: bold;
    font-family: Impact, Arial, sans-serif;
    padding: 1px 5px;
    border: 1px solid #FF6666;
    text-transform: uppercase;
    vertical-align: middle;
    letter-spacing: 1px;
}
.badge-hot {
    display: inline-block;
    background: linear-gradient(180deg, #FF6600 0%, #CC3300 100%);
    color: #FFFF00;
    font-size: 9px;
    font-weight: bold;
    font-family: Impact, Arial, sans-serif;
    padding: 1px 5px;
    border: 1px solid #FF9944;
    text-transform: uppercase;
    vertical-align: middle;
    letter-spacing: 1px;
}

/* ===== FAKE BANNER ===== */
.fake-banner {
    background: linear-gradient(90deg, #000033, #002266, #000033);
    border: 2px solid #0088FF;
    padding: 7px 10px;
    text-align: center;
    margin: 8px 0;
    font-size: 12px;
    color: #FFFF00;
    cursor: pointer;
    font-weight: bold;
}
.fake-banner:hover { background: linear-gradient(90deg, #000044, #003388, #000044); }
.fake-banner-red {
    background: linear-gradient(90deg, #220000, #550000, #220000);
    border: 2px solid #FF2200;
    padding: 7px 10px;
    text-align: center;
    margin: 8px 0;
    font-size: 12px;
    color: #FFFF88;
    cursor: pointer;
    font-weight: bold;
}

/* ===== POLL ===== */
.poll-option { margin: 3px 0; }
.poll-option label { color: #CCCCCC; font-size: 11px; cursor: pointer; }
.poll-bar-bg { height: 10px; background: #001122; border: 1px solid #224466; margin: 1px 0 3px; }
.poll-bar    { height: 10px; background: linear-gradient(90deg, #0066CC, #00AAFF); }

/* ===== MISC ===== */
.text-yellow { color: #FFFF00; }
.text-orange { color: #FF8800; }
.text-cyan   { color: #00CCFF; }
.text-green  { color: #00FF88; }
.text-red    { color: #FF4444; }
.text-pink   { color: #FF88BB; }
.bold        { font-weight: bold; }
.center      { text-align: center; }
.small       { font-size: 11px; }

/* ===== CURSOR TRAIL (via JS) ===== */
.cursor-star {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    user-select: none;
    font-size: 14px;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ===== PAGE TITLE BAR ===== */
.page-title-bar {
    background: linear-gradient(180deg, #220044 0%, #110022 100%);
    border: 1px solid #660099;
    padding: 6px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-title-bar h1 {
    color: #FF88FF;
    font-size: 18px;
    font-weight: bold;
}
.page-title-bar-orange {
    background: linear-gradient(180deg, #331100 0%, #220800 100%);
    border: 1px solid #AA4400;
    padding: 6px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-title-bar-orange h1 {
    color: #FFCC88;
    font-size: 18px;
    font-weight: bold;
}

/* ===== CAT ITEMS (top 5 list) ===== */
.top-item { padding: 3px 0; border-bottom: 1px dotted #223344; font-size: 11px; }
.top-item a { color: #00CCFF; }
.top-num { color: #FF6600; font-weight: bold; margin-right: 4px; }

/* ===== RESPONSIVE hint ===== */
@media (max-width: 820px) {
    #wrapper { width: 100%; min-width: 0; }
    body { min-width: 0; }
    .img-grid { grid-template-columns: repeat(2, 1fr); }
    .game-grid { grid-template-columns: 1fr; }
}