@font-face {
        font-family: 'Martel';
        src: url('/res/martel.ttf') format('truetype');
    }

    /* ========== GLOBAL STYLES ========== */
    * { box-sizing: border-box; }

    body {
        margin: 0;
        padding: 0;
        background-color: #5a483a;
        background-image: url('/res/images/content/scroll.gif');
        background-attachment: fixed;
        font-family: Verdana, Tahoma, Arial, sans-serif;
        font-size: 11px;
        line-height: 1.5;
        color: #FFF2db;
    }

    a { color: #ffcc00; text-decoration: none; }
    a:hover { color: #ffffff; text-decoration: underline; }

    /* ========== MAIN LAYOUT ========== */
    .site-wrapper {
        max-width: 1100px;
        margin: 0 auto;
        padding: 10px;
    }

    /* Header Area */
    .header-area {
        text-align: center;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header-logo {
        max-height: 100px;
        margin-bottom: 5px;
    }

    .header-artwork {
        width: 100%;
        height: 200px;
        background: url('/res/images/tibia_art.jpeg') center center no-repeat;
        background-size: cover;
        border: 2px solid #8b7355;
        margin-bottom: 10px;
    }

    /* 3-Column Layout */
    .main-layout {
        display: grid;
        grid-template-columns: 170px minmax(0, 1fr) 170px;
        gap: 10px;
        align-items: start;
    }

    .left-column { grid-column: 1; }
    .center-column { grid-column: 2; }
    .right-column { grid-column: 3; }

    /* ========== THEMEBOX (Sidebar Boxes) ========== */
    .themebox {
        background: #d4c4a8;
        border: 1px solid #8b7355;
        margin-bottom: 10px;
    }

    .themebox-header {
        background: linear-gradient(to bottom, #8b7355 0%, #6b5a45 100%);
        padding: 8px 10px;
        font-family: 'Martel', Georgia, serif;
        font-size: 13px;
        font-weight: bold;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 1px solid #5a4a38;
        text-shadow: 1px 1px 2px #3a2a1a;
    }

    .themebox-content {
        padding: 10px;
        color: #3a2a1a;
    }

    /* ========== LOGIN BOX ========== */
    .loginbox {
        background: #d4c4a8;
        border: 2px solid #8b7355;
        margin-bottom: 10px;
    }

    .loginbox-header {
        background: linear-gradient(to bottom, #8b7355 0%, #6b5a45 100%);
        padding: 8px 10px;
        text-align: center;
        font-family: 'Martel', Georgia, serif;
        font-weight: bold;
        color: #fff;
        border-bottom: 1px solid #5a4a38;
        text-shadow: 1px 1px 2px #3a2a1a;
    }

    .loginbox-content {
        padding: 10px;
    }

    .loginbox input[type="text"],
    .loginbox input[type="password"] {
        width: 100%;
        background: #fff8f0;
        border: 1px solid #8b7355;
        padding: 5px 8px;
        color: #3a2a1a;
        font-size: 11px;
        margin-bottom: 5px;
    }

    .loginbox input[type="text"]:focus,
    .loginbox input[type="password"]:focus {
        outline: none;
        border-color: #5a4a38;
        background: #ffffff;
    }

    .loginbox-btn {
        display: block;
        width: 100%;
        background: linear-gradient(to bottom, #5f7a3d 0%, #4a6030 50%, #3a4a25 100%);
        border: 1px solid #2a3a18;
        color: #fff;
        padding: 6px 10px;
        font-weight: bold;
        font-size: 11px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        margin-top: 5px;
        text-shadow: 1px 1px 1px #1a2a10;
    }

    .loginbox-btn:hover {
        background: linear-gradient(to bottom, #6f8a4d 0%, #5a7040 50%, #4a5a35 100%);
        color: #ffffff;
        text-decoration: none;
    }

    .loginbox-links {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .loginbox-links a.create-account {
        display: block;
        background: linear-gradient(to bottom, #30a030 0%, #208020 100%);
        border: 1px solid #186018;
        color: #fff;
        padding: 8px 10px;
        font-weight: bold;
        font-size: 11px;
        text-align: center;
        text-decoration: none;
        text-shadow: 1px 1px 1px #105010;
    }

    .loginbox-links a.create-account:hover {
        background: linear-gradient(to bottom, #40b040 0%, #309030 100%);
    }

    .loginbox-links a.lost-account {
        display: block;
        text-align: center;
        color: #5a4a38;
        font-size: 10px;
        text-decoration: underline;
    }

    .loginbox-links a.lost-account:hover {
        color: #3a2a1a;
    }

    /* Logged In State */
    .account-info {
        text-align: center;
        color: #3a2a1a;
    }

    .account-info strong {
        color: #5a4a38;
    }

    /* ========== MENU/NAVIGATION ========== */
    .menu-section {
        margin-bottom: 15px;
    }

    .menu-header {
        background: linear-gradient(to bottom, #8b7355 0%, #6b5a45 100%);
        padding: 6px 10px;
        font-size: 11px;
        font-weight: bold;
        color: #fff;
        border: 1px solid #5a4a38;
        margin-bottom: 0;
        text-shadow: 1px 1px 1px #3a2a1a;
    }

    .menu-items {
        background: #d4c4a8;
        border: 1px solid #8b7355;
        border-top: none;
    }

    .menu-item {
        display: block;
        padding: 4px 10px 4px 20px;
        color: #5a4a38;
        font-size: 10px;
        border-bottom: 1px solid #b8a888;
        text-decoration: none;
    }

    .menu-item:hover {
        background: #c4b498;
        color: #3a2a1a;
        text-decoration: none;
    }

    .menu-item:last-child {
        border-bottom: none;
    }

    /* ========== CONTENT BOX (Main Content Area) ========== */
    .content-box {
        position: relative;
        background: #FFF2db;
        border: 2px solid #5A2800;
        margin-bottom: 15px;
    }

    .content-box-inner {
        border: 1px solid #debb9d;
        margin: 3px;
    }

    .content-box-header {
        background: linear-gradient(to bottom, #6f5d51 0%, #5f4d41 50%, #4f3d31 100%);
        padding: 8px 15px;
        color: white;
        font-family: 'Martel', Georgia, serif;
        font-size: 14px;
        font-weight: bold;
        text-shadow: 1px 1px 2px #000;
        border-bottom: 2px solid #3a2a1a;
    }

    .content-box-body {
        padding: 15px;
        color: #2b1d12;
        font-size: 12px;
        line-height: 1.6;
    }

    /* Corner Decorations */
    .content-box .corner {
        position: absolute;
        width: 17px;
        height: 17px;
        z-index: 10;
    }
    .content-box .corner-tl { top: -5px; left: -5px; background: url('/res/images/content/corner-tl.gif'); }
    .content-box .corner-tr { top: -5px; right: -5px; background: url('/res/images/content/corner-tr.gif'); }
    .content-box .corner-bl { bottom: -5px; left: -5px; background: url('/res/images/content/corner-bl.gif'); }
    .content-box .corner-br { bottom: -5px; right: -5px; background: url('/res/images/content/corner-br.gif'); }

    /* ========== HEADLINE IMAGES ========== */
    .headline-img {
        display: block;
        margin: 0 auto 10px;
    }

    /* ========== BUTTONS ========== */
    .tibia-btn {
        display: inline-block;
        background: linear-gradient(to bottom, #5f7a3d 0%, #4a6030 50%, #3a4a25 100%);
        border: 1px solid #2a3a18;
        border-radius: 3px;
        color: #fff !important;
        padding: 6px 15px;
        font-weight: bold;
        font-size: 11px;
        text-decoration: none !important;
        text-shadow: 1px 1px 1px #1a2a10;
        cursor: pointer;
        white-space: nowrap;
    }

    .tibia-btn:hover {
        background: linear-gradient(to bottom, #6f8a4d 0%, #5a7040 50%, #4a5a35 100%);
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .tibia-btn-brown {
        background: linear-gradient(to bottom, #a08060 0%, #8b7355 50%, #6b5a45 100%);
        border: 1px solid #5a4a38;
        color: #fff !important;
        text-shadow: 1px 1px 1px #3a2a1a;
    }

    .tibia-btn-brown:hover {
        background: linear-gradient(to bottom, #b09070 0%, #9b8365 50%, #7b6a55 100%);
    }

    .tibia-btn-cta {
        background: linear-gradient(to bottom, #8b6914 0%, #6b5010 50%, #4a3808 100%);
        border: 2px solid #cfa600;
        color: #fff !important;
    }

    .tibia-btn-cta:hover {
        background: linear-gradient(to bottom, #a07a18 0%, #7b5a12 50%, #5a4208 100%);
    }

    .tibia-btn-green {
        background: linear-gradient(to bottom, #2d5a2d 0%, #1a3a1a 50%, #0f250f 100%);
        border: 2px solid #4a9a4a;
        color: #90ee90 !important;
    }

    .tibia-btn-green:hover {
        background: linear-gradient(to bottom, #3d6a3d 0%, #2a4a2a 50%, #1a351a 100%);
        color: #fff !important;
    }

    .tibia-btn-blue {
        background: linear-gradient(to bottom, #4a7090 0%, #3a5a70 50%, #2a4a60 100%);
        border: 1px solid #1a3a50;
        color: #fff !important;
        text-shadow: 1px 1px 1px #0a2030;
    }

    .tibia-btn-blue:hover {
        background: linear-gradient(to bottom, #5a80a0 0%, #4a6a80 50%, #3a5a70 100%);
    }

    /* ========== TABLES ========== */
    .tibia-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
    }

    .tibia-table th {
        background: linear-gradient(to bottom, #5f4d41 0%, #4f3d31 100%);
        color: white;
        padding: 6px 10px;
        text-align: left;
        font-weight: bold;
        text-shadow: 1px 1px 1px #000;
        border-bottom: 2px solid #3a2a1a;
    }

    .tibia-table td {
        padding: 6px 10px;
        border-bottom: 1px solid #debb9d;
        color: #2b1d12;
    }

    .tibia-table tr:nth-child(odd) td { background: #f8f0e3; }
    .tibia-table tr:nth-child(even) td { background: #efe3d0; }
    .tibia-table tr:hover td { background: #e8d4b4; }

    /* ========== FORM INPUTS ========== */
    .tibia-input {
        background: #fff8ee;
        border: 2px solid #793d03;
        padding: 6px 10px;
        font-size: 12px;
        color: #2b1d12;
        width: 100%;
    }

    .tibia-input:focus {
        outline: none;
        border-color: #004294;
        box-shadow: 0 0 5px rgba(0,66,148,0.3);
    }

    .tibia-select {
        background: #fff8ee;
        border: 2px solid #793d03;
        padding: 6px 10px;
        font-size: 12px;
        color: #2b1d12;
    }

    /* ========== FORM STYLING ========== */
    .form-tibia {
        max-width: 400px;
        margin: 0 auto;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        color: #5a4a32;
        margin-bottom: 5px;
    }

    .form-group input[type="text"],
    .form-group input[type="password"],
    .form-group input[type="email"],
    .form-group input[type="number"],
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 8px 10px;
        font-size: 12px;
        border: 1px solid #5a4a32;
        background: #fff8f0;
        color: #2b1d12;
        box-sizing: border-box;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #004294;
        background: #ffffff;
    }

    .form-group.is-invalid label {
        color: #8b0000;
    }

    .form-group.is-invalid input,
    .form-group.is-invalid select,
    .form-group.is-invalid textarea {
        border-color: #8b0000;
        background: #fff4f4;
    }

    .form-hint {
        font-size: 10px;
        color: #8a7a5a;
        margin-top: 3px;
    }

    .form-error {
        display: none;
        margin-top: 4px;
        font-size: 10px;
        font-weight: bold;
        color: #8b0000;
    }

    .form-group.is-invalid .form-error {
        display: block;
    }

    .btn-submit {
        width: 100%;
        padding: 10px;
        font-size: 13px;
        font-weight: bold;
        color: white;
        background: linear-gradient(180deg, #30a030 0%, #208020 100%);
        border: 1px solid #186018;
        cursor: pointer;
        text-shadow: 1px 1px 1px #105010;
    }

    .btn-submit:hover {
        background: linear-gradient(180deg, #40b040 0%, #309030 100%);
    }

    .btn-link {
        display: inline-block;
        padding: 8px 20px;
        font-size: 12px;
        font-weight: bold;
        color: white;
        background: linear-gradient(180deg, #6080b0 0%, #405880 100%);
        border: 1px solid #304060;
        text-decoration: none;
        text-shadow: 1px 1px 1px #203040;
    }

    .btn-link:hover {
        background: linear-gradient(180deg, #7090c0 0%, #506890 100%);
        text-decoration: none;
    }

    .form-footer {
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #b8a88a;
        text-align: center;
        font-size: 12px;
        color: #5a4a32;
    }

    .text-link {
        color: #5a4a32;
        text-decoration: underline;
    }

    .text-link:hover {
        color: #2b1d12;
    }

    /* ========== ALERTS ========== */
    .alert {
        padding: 10px 15px;
        margin-bottom: 15px;
        border: 1px solid;
        font-size: 12px;
    }

    .alert-success {
        background: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

    .alert-error {
        background: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }

    .alert-warning {
        background: #fff3cd;
        border-color: #ffeeba;
        color: #856404;
    }

    /* ========== CONTENT BOX BODY ========== */
    .content-box-body {
        padding: 15px;
        background: #f5edd8;
    }

    /* ========== CONTENT LINKS ========== */
    .content-box a {
        color: #004294;
    }

    .content-box a:hover {
        color: #0063DC;
    }

    /* ========== NEWS STYLING ========== */
    .news-entry {
        border-bottom: 1px solid #debb9d;
        padding: 15px 0;
    }

    .news-entry:last-child {
        border-bottom: none;
    }

    .news-date {
        color: #793d03;
        font-size: 10px;
        margin-bottom: 5px;
    }

    .news-title {
        font-family: 'Martel', Georgia, serif;
        font-size: 14px;
        font-weight: bold;
        color: #5A2800;
        margin-bottom: 8px;
    }

    .news-content {
        color: #2b1d12;
        font-size: 12px;
        line-height: 1.6;
    }

    .news-readmore {
        display: inline-block;
        margin-top: 8px;
        font-size: 11px;
        color: #004294;
    }

    /* ========== STATUS INDICATORS ========== */
    .status-online {
        color: #32cd32;
        font-weight: bold;
    }

    .status-offline {
        color: #dc143c;
        font-weight: bold;
    }

    .player-count {
        background: #c4b498;
        padding: 3px 8px;
        border: 1px solid #8b7355;
        font-size: 10px;
        color: #3a2a1a;
    }

    /* ========== SERVER INFO BOX ========== */
    .serverinfo-box {
        text-align: center;
        padding: 10px;
    }

    .serverinfo-box img {
        max-width: 100%;
    }

    .server-status {
        margin-top: 10px;
        padding: 8px;
        background: #c4b498;
        border: 1px solid #8b7355;
        font-size: 10px;
        color: #3a2a1a;
    }

    .server-status-row {
        display: flex;
        justify-content: space-between;
        padding: 3px 0;
        border-bottom: 1px solid #b8a888;
    }

    .server-status-row:last-child {
        border-bottom: none;
    }

    /* ========== WORLD ENTRIES ========== */
    .world-entry {
        display: block;
        padding: 10px 12px;
        border-bottom: 1px solid #b8a888;
        text-decoration: none;
        color: #3a2a1a;
        transition: background 0.15s;
    }

    .world-entry:hover {
        background: #c4b498;
        text-decoration: none;
    }

    .world-entry:last-of-type {
        border-bottom: none;
    }

    .world-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }

    .world-name {
        font-weight: bold;
        font-size: 12px;
        color: #3a2a1a;
    }

    .status-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-left: auto;
    }

    .status-dot.online {
        background: #32cd32;
        box-shadow: 0 0 4px #32cd32;
    }

    .status-dot.offline {
        background: #dc143c;
        box-shadow: 0 0 4px #dc143c;
    }

    .world-players {
        font-size: 10px;
        color: #6a5a48;
    }

    .world-total {
        padding: 8px 12px;
        background: #c4b498;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        color: #3a2a1a;
        border-top: 1px solid #b8a888;
    }

    /* ========== FOOTER ========== */
    .footer {
        margin-top: 20px;
        padding: 15px;
        background: #d4c4a8;
        border: 1px solid #8b7355;
        text-align: center;
        font-size: 10px;
        color: #5a4a38;
    }

    .footer a {
        color: #5a4a38;
        font-weight: bold;
        margin: 0 10px;
    }

    .footer a:hover {
        color: #3a2a1a;
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 900px) {
        .site-wrapper {
            padding: 8px;
        }

        .main-layout {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .center-column {
            order: 1;
        }

        .left-column {
            order: 2;
        }

        .right-column {
            order: 3;
        }

        .header-artwork {
            height: 120px;
        }
    }

    /* ========== STATUS BADGES ========== */
    .badge {
        display: inline-block;
        padding: 3px 8px;
        font-size: 10px;
        font-weight: bold;
        border-radius: 3px;
        white-space: nowrap;
    }

    .badge-success {
        background: #d4edda;
        color: #155724;
    }

    .badge-warning {
        background: #fef3cd;
        color: #856404;
    }

    .badge-info {
        background: #cce5ff;
        color: #004085;
    }

    .badge-secondary {
        background: #e2e3e5;
        color: #383d41;
    }

    .badge-danger {
        background: #f8d7da;
        color: #721c24;
    }

    /* ========== UTILITY CLASSES ========== */
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-nowrap { white-space: nowrap; }
    .mt-10 { margin-top: 10px; }
    .mb-10 { margin-bottom: 10px; }
    .mb-5 { margin-bottom: 5px; }
    .p-10 { padding: 10px; }
    .bold { font-weight: bold; }