@import "https://wapchan.org/stylesheets/wapstyles/fontimport.css";

/* ==========================================================
   SIDEBAR ROOT + SAFE RESET
   ========================================================== */

.sidebar {
    width: 250px;
    flex-shrink: 0;

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
}

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

/* ==========================================================
   GENERIC UTILS
   ========================================================== */

.sidebar .pixel {
    image-rendering: pixelated;
}

.sidebar a {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================
   SECTIONS
   ========================================================== */

.sidebar .forum-section {
    background: #D6DAF0;
    border: 2px solid #B7C5D9;
    margin-bottom: 10px;
}

.sidebar .section-header {
    background: #D6DAF0;
    color: black;
    padding: 6px 10px;
    font-weight: bold;
    font-size: 12px;
}

/* ==========================================================
   FORUM ROWS
   ========================================================== */

.sidebar .forum-title {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 2px solid #333;
    font-weight: bold;
    font-size: 14px;
    background: #D6DAF0;
    color: #0F0C5D;
}

.sidebar .forum-title:hover {
    background: #D6DAF0;
    color: black;
}

.sidebar .forum-title:last-child {
    border-bottom: none;
}

.sidebar .holder {
    margin-left: 1em;
    margin-right: auto;
}

.sidebar .forum-info {
    flex: 1;
    min-width: 0;
}

.sidebar .forum-stats {
    font-size: 11px;
    white-space: nowrap;
}

/* ==========================================================
   SIDEBAR CONTENT BLOCKS
   ========================================================== */

.sidebar .sidebar-content {
    padding: 8px 10px;
    font-size: 11px;
    border-left: 2px solid #444;
    border-right: 2px solid #444;
}

.sidebar .sidebar-content ul {
    list-style: none;
}

.sidebar .sidebar-content li {
    margin-bottom: 5px;
}

/* ==========================================================
   FRIEND BUTTONS
   ========================================================== */

.sidebar #friends {
    text-align: center;
}

.sidebar #friends li {
    display: inline-block;
}

.sidebar #friends img {
    max-width: 70px;
}

/* ==========================================================
   TV / CRT WIDGET
   ========================================================== */

.sidebar .tv {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 7%;
    background: #4a3b2a;
    border-radius: 5%;
    box-shadow:
        inset -8px -8px 0 #2d2218,
        inset 8px 8px 0 #6b5640;
}

.sidebar .antenna {
    position: absolute;
    width: 1%;
    min-width: 3px;
    height: 30%;
    background: #bbb;
    top: -28%;
}

.sidebar .antenna.left {
    left: 32%;
    transform: rotate(-20deg);
}

.sidebar .antenna.right {
    right: 32%;
    transform: rotate(20deg);
}

.sidebar .screen {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 6%;
    overflow: hidden;
    box-shadow: inset 0 0 6vw rgba(0,255,0,0.15);
}

.sidebar .screen img {
    width: 100%;
    display: block;
    filter: contrast(1.2) brightness(1.1) saturate(1.2);
}

.sidebar .scanlines {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.2),
            rgba(0,0,0,0.2) 1px,
            transparent 2px,
            transparent 4px
        );
    pointer-events: none;
    mix-blend-mode: multiply;
}

.sidebar .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4%;
}

.sidebar .dial-group {
    display: flex;
    gap: 10px;
}

.sidebar .dial {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #777, #222);
    box-shadow:
        inset -2px -2px 4px #000,
        inset 2px 2px 4px #999;
}
.logo img {
    max-width: 150px;
}
/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
    }

    .sidebar .forum-title {
        align-items: flex-start;
    }
}