#wrapper {
    max-width: var(--max-width-wrapper);
    margin: 0 auto;
    padding: var(--padding-wrapper);
    background: var(--color-bg-wrapper);
}

/* Classic Top Navigation */
#top-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
    font-size: var(--font-size-small);
}

.nav-left {
    color: var(--color-text-muted);
    letter-spacing: 1px;
}

.nav-right a {
    color: var(--color-text-main);
    margin-left: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

.nav-right a:hover {
    color: var(--color-text-dn-red);
}

#main-header {
    text-align: center;
    padding: 15px 0 25px 0;
}

/* PURE CSS FANTASY LOGO */
.css-logo {
    text-align: center;
    user-select: none;
}

.css-logo h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 52px;
    font-weight: bold;
    margin: 0;
    letter-spacing: 2px;
    background: linear-gradient(to bottom, #ffea00, #ff8800);
    color: #ffaa00;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 4px 15px rgba(255, 100, 0, 0.8);
    line-height: 1;
}

.css-logo .logo-sub {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 10px;
    margin-top: 5px;
    text-shadow: 0px 2px 4px #000000;
}

/* Flex Architecture (Fixed for Desktop Integrity) */
#main-container {
    display: flex;
    flex-direction: row;
    gap: var(--gap-standard);
    padding: 0 0 var(--gap-standard) 0;
}

#content-panel {
    flex: 1 1 650px; 
    min-width: 0; 
    display: flex;
    flex-direction: column;
    gap: var(--gap-standard);
}

#sidebar-panel {
    flex: 0 0 260px; 
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
}

/* MODERN CAROUSEL */
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-hero);
    background-clip: padding-box;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    flex: 0 0 100%; 
}

.carousel-slide img {
    width: 100%;
    display: block;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    padding: 12px 15px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s;
}

.carousel-nav:hover {
    background: rgba(217, 0, 0, 0.8); 
}

.carousel-nav.prev { left: 0; }
.carousel-nav.next { right: 0; }

/* PURE CSS NEWS BOX */
.news-box {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-news);
    border: 1px solid var(--color-border-news);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.5);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-clip: padding-box;
}

.news-header {
    background: var(--gradient-news-header);
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--color-text-dn-red);
}

.news-header h3 {
    text-transform: uppercase;
    font-size: var(--font-size-heading);
    letter-spacing: 1px;
    margin: 0;
}

.btn-more-news {
    font-size: var(--font-size-xsmall);
    color: #aaaaaa;
    text-transform: uppercase;
}

.btn-more-news:hover { color: #ffffff; }

.news-content-area {
    padding: 15px;
}

.news-item {
    display: flex;
    gap: 15px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dotted #bbbbbb;
}

.news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Pure CSS Date Flags */
.news-date {
    flex: 0 0 45px;
    background: var(--gradient-news-date);
    text-align: center;
    color: #aaaaaa;
    font-size: 9px;
    text-transform: uppercase;
    padding: 5px 0;
    border-top: 3px solid var(--color-text-dn-red);
    box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
    height: 45px;
}

.news-date span {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 2px;
}

.news-text h4 {
    font-size: var(--font-size-base);
    color: var(--color-text-news-dark);
    margin-bottom: 4px;
}

.news-text p {
    font-size: var(--font-size-small);
    color: var(--color-text-news-light);
    margin-bottom: 6px;
}

.read-more {
    font-size: var(--font-size-small);
    color: var(--color-text-dn-red);
    font-weight: bold;
}

.read-more:hover {
    text-decoration: underline;
    color: #ff0000;
}

/* -------------------------------------- */
/* EXACT 2013 CLASSIC GUIDE BAR GRAPHICS  */
/* -------------------------------------- */
.guide-section-classic {
    display: flex;
    height: 70px; 
    
    background: linear-gradient(to bottom, #303030 0%, #1e1e1e 40%, #121212 100%);
    border: 1px solid #000;
    border-top: 1px solid #555; 
    border-bottom: 2px solid #000; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.8), inset 0 1px 3px rgba(0,0,0,0.5);
    border-radius: 2px;
}

.guide-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    
    border-right: 1px solid #050505; 
    box-shadow: 1px 0 0 #3a3a3a; 
    padding: 0 5px;
    transition: background 0.2s ease;
}

.guide-card:hover {
    background: rgba(255, 255, 255, 0.05); 
}

.guide-card:last-child {
    border-right: none;
    box-shadow: none;
}

.guide-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0px 2px 3px rgba(0,0,0,1)); 
    transition: transform 0.2s;
}

.guide-card:hover .guide-icon {
    transform: scale(1.1); 
}

.icon-scroll { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d1ab57'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); }
.icon-sprout { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d1ab57'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66l.95-2.3c.48.17 1.04.3 1.71.3c4.76 0 8.64-4.32 8.64-9.66c0-.09 0-.19-.01-.28c2.78-1.52 4.01-4.06 4.01-6.06C21 2 19 2 19 2s0 2-2 6z'/%3E%3C/svg%3E"); }
.icon-swords { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d1ab57'%3E%3Cpath d='M6.54 13.06L4.77 14.83l1.41 1.41l1.77-1.77l1.77 1.77l1.41-1.41l-1.77-1.77l1.77-1.77l-1.41-1.41l-1.77 1.77l-1.77-1.77l-1.41 1.41l1.77 1.77zM18.89 3.7c-.39-.39-1.02-.39-1.41 0L8.99 12.19l1.41 1.41l8.49-8.49c.39-.39.39-1.02 0-1.41z'/%3E%3C/svg%3E"); }
.icon-book { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d1ab57'%3E%3Cpath d='M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1z'/%3E%3C/svg%3E"); }

.guide-text {
    display: flex;
    flex-direction: column;
}

.guide-text h4 {
    margin: 0;
    font-family: Arial, Tahoma, sans-serif;
    font-size: 11px;
    color: #e6c867; 
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px #000, 0px 2px 2px #000; 
    letter-spacing: 0.5px;
}

.guide-text p {
    margin: 0;
    font-family: Arial, Tahoma, sans-serif;
    font-size: 10px;
    color: #8a8a8a; 
    text-shadow: 1px 1px 0px #000;
}

/* Sidebar Ad / Video Box */
.sidebar-ad {
    border: 1px solid var(--color-border-light);
    padding: 2px;
    background: var(--color-bg-hero);
    margin-top: 5px;
    background-clip: padding-box;
}

/* Footer Architecture */
#main-footer {
    padding: 25px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
}

.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.f-logo {
    max-height: 40px;
    width: auto;
    filter: grayscale(100%) opacity(50%);
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.f-logo:hover {
    filter: grayscale(0%) opacity(100%);
}

.copyright {
    font-size: var(--font-size-xsmall);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

/* Responsive Rules */
@media (max-width: 850px) {
    #main-container { flex-direction: column; }
    #sidebar-panel { width: 100%; flex: 1 1 auto; }
    #top-navigation { flex-direction: column; gap: 10px; }
}

@media (max-width: 600px) {
    .guide-section-classic { height: auto; flex-direction: column; border-bottom: 1px solid #000; }
    .guide-card { padding: 15px; border-right: none; box-shadow: none; border-bottom: 1px solid #000; position: relative; }
    .guide-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #3a3a3a; }
    .guide-card:last-child::after { display: none; }
}