/* ============================================================
   SERQAY SITE - AUTHENTIC 2000s / MYSPACE / COMBATBABY STYLES
   ============================================================ */

/* Base & Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Classic repeating retro tile background */
    background-color: #2b3345;
    background-image: 
        radial-gradient(#3d4860 15%, transparent 16%),
        radial-gradient(#3d4860 15%, transparent 16%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 1.4;
    padding: 15px 0 30px 0;
}

a {
    color: #003399;
    text-decoration: underline;
}

a:hover {
    color: #ff6600;
}

.site-outer {
    max-width: 820px;
    margin: 0 auto;
}

/* ============================================================
   TOP BRAND BAR & NAV (003399 / 82B3E5)
   ============================================================ */
.top-header-table {
    border: 1px solid #003399;
    border-collapse: collapse;
}

.brand-bar {
    background-color: #003399;
    padding: 8px 16px;
    border-bottom: 1px solid #002266;
}

.brand-content {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.myspace-logo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #001a4d;
}

.myspace-sub {
    font-size: 11px;
    color: #b1d0ef;
}

.nav-bar {
    background-color: #82b3e5;
    border-top: 1px solid #b1d0ef;
    border-bottom: 2px solid #6699cc;
    padding: 6px 10px;
}

.top-nav-links {
    font-size: 12px;
    font-weight: bold;
    color: #002266;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.nav-link {
    color: #003399;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 2px;
    transition: all 0.1s ease;
}

.nav-link:hover {
    background-color: #003399;
    color: #ffffff;
}

.nav-link.active {
    background-color: #003399;
    color: #ffffff;
}

.nav-sep {
    color: #002266;
    font-size: 13px;
    font-weight: bold;
    user-select: none;
}

/* ============================================================
   MAIN TWO-COLUMN LAYOUT TABLE
   ============================================================ */
.main-body-table {
    border-left: 1px solid #6699cc;
    border-right: 1px solid #6699cc;
    border-bottom: 1px solid #6699cc;
    border-collapse: collapse;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

.left-col {
    border-right: 1px dashed #d0d0d0;
    padding-right: 14px;
}

.right-col {
    padding-left: 14px;
}

.sep-line {
    height: 1px;
    background: #e0e0e0;
    margin: 12px 0;
}

/* ============================================================
   LEFT COLUMN: PROFILE & CONTACTS
   ============================================================ */
.profile-name-header {
    font-size: 17px;
    color: #000000;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e0e0;
}

.avatar-table {
    margin-bottom: 6px;
}

.avatar-frame {
    border: 1px solid #999999;
    padding: 2px;
    background: #ffffff;
    width: 106px;
}

.profile-avatar {
    width: 100px;
    height: auto;
    display: block;
}

.view-pics-link {
    margin-top: 5px;
    text-align: center;
    font-size: 10px;
}

.user-quick-info {
    font-size: 11px;
    line-height: 1.5;
}

.user-quote {
    font-style: italic;
    font-weight: bold;
    color: #333333;
    margin-bottom: 8px;
}

.user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.online-now-badge {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #008800;
}

.online-indicator {
    width: 9px;
    height: 9px;
    background: #00cc00;
    border: 1px solid #006600;
    border-radius: 50%;
    display: inline-block;
}

/* Contact Box (6699cc) */
.contact-box {
    border: 1px solid #6699cc;
    border-collapse: collapse;
}

.box-header {
    background-color: #6699cc;
    padding: 4px 8px;
}

.box-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 11px;
}

.box-content {
    background-color: #ffffff;
    padding: 6px;
}

.contact-btn {
    display: block;
    background: #d5e7ff;
    border: 1px solid #6699cc;
    color: #003399;
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 6px;
    text-align: center;
    border-radius: 2px;
}

.contact-btn:hover {
    background: #b1d0ef;
    color: #002266;
}

.url-box-table {
    border-collapse: collapse;
    font-size: 10px;
}

.site-raw-url {
    word-break: break-all;
    font-size: 10px;
}

/* ============================================================
   iPod MP3 PLAYER WIDGET
   ============================================================ */
.ipod-container {
    text-align: center;
    margin: 8px 0;
}

.ipod-chrome {
    width: 200px;
    margin: 0 auto;
    background: linear-gradient(180deg, #eaeaea 0%, #cccccc 100%);
    border: 2px solid #888888;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
}

.ipod-screen {
    background: #d4e3eb;
    border: 2px solid #555555;
    border-radius: 4px;
    padding: 6px 8px;
    text-align: left;
    font-size: 9px;
    color: #111111;
    font-family: 'Courier New', monospace;
    min-height: 90px;
}

.ipod-header {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: bold;
    border-bottom: 1px solid #8ba4b3;
    padding-bottom: 3px;
    margin-bottom: 4px;
}

.ipod-track {
    padding: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ipod-track.active {
    background: #003399;
    color: #ffffff;
    padding: 2px 4px;
    font-weight: bold;
}

.ipod-wheel {
    width: 65px;
    height: 65px;
    background: radial-gradient(circle, #f0f0f0 40%, #d8d8d8 100%);
    border: 1px solid #aaaaaa;
    border-radius: 50%;
    margin: 10px auto 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.8), inset -1px -1px 2px rgba(0,0,0,0.2);
}

.ipod-center-btn {
    font-size: 7px;
    font-weight: bold;
    color: #777;
    font-family: Arial, sans-serif;
}

.ipod-caption {
    font-size: 10px;
    color: #555;
    margin-top: 5px;
    font-style: italic;
}

/* ============================================================
   LEFT COLUMN: ГИФКИ & BADGES TOWER
   ============================================================ */
.gif-tower-heading {
    background: #003399;
    color: #ffffff;
    font-weight: bold;
    font-size: 11px;
    padding: 4px 8px;
    margin-bottom: 10px;
    text-align: center;
}

.gif-collection {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.gif-item {
    border: 1px solid #cccccc;
    padding: 4px;
    background: #ffffff;
    max-width: 100%;
}

.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 88x31 Buttons */
.friends-button-box {
    border: 1px dashed #6699cc;
    padding: 8px;
    background: #f4f8fc;
    width: 100%;
    text-align: center;
}

.friends-box-title {
    font-size: 10px;
    font-weight: bold;
    color: #003399;
    margin-bottom: 6px;
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}

.retro-btn-88 {
    width: 88px;
    height: 31px;
    border: 1px solid #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 0px #000;
    box-shadow: inset 1px 1px 0px rgba(255,255,255,0.4), inset -1px -1px 0px rgba(0,0,0,0.5);
    user-select: none;
    cursor: pointer;
}

.b-orange { background: linear-gradient(180deg, #ea580c, #9a3412); }
.b-green  { background: linear-gradient(180deg, #16a34a, #166534); }
.b-blue   { background: linear-gradient(180deg, #0284c7, #075985); }
.b-pink   { background: linear-gradient(180deg, #e11d48, #9f1239); }
.b-purple { background: linear-gradient(180deg, #9333ea, #6b21a8); }
.b-yellow { background: linear-gradient(180deg, #d97706, #92400e); }

/* Blinkies */
.stamps-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.blinkie {
    border: 1px solid #000000;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    padding: 3px 6px;
    color: #ffffff;
    text-shadow: 1px 1px 0px #000000;
    box-shadow: inset 1px 1px 0px rgba(255,255,255,0.3);
}

.bl-1 { background: repeating-linear-gradient(45deg, #cc0000, #cc0000 8px, #990000 8px, #990000 16px); }
.bl-2 { background: repeating-linear-gradient(45deg, #0066cc, #0066cc 8px, #004499 8px, #004499 16px); }
.bl-3 { background: repeating-linear-gradient(45deg, #660099, #660099 8px, #440066 8px, #440066 16px); }

/* Visitor Counter */
.counter-panel {
    background: #000000;
    border: 2px inset #666666;
    padding: 4px 10px;
    text-align: center;
}

.counter-text {
    font-size: 8px;
    color: #888888;
    margin-bottom: 2px;
}

.counter-screen {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: bold;
    color: #00ff00;
    letter-spacing: 3px;
    text-shadow: 0 0 4px #00ff00;
}

/* ============================================================
   RIGHT COLUMN: MYSPACE BOXES & CONTENT
   ============================================================ */
.network-table {
    border-collapse: collapse;
    margin-bottom: 12px;
}

.network-title {
    color: #000000;
    font-size: 13px;
    line-height: 1.4;
}

/* Classic MySpace Box */
.myspace-box {
    border: 1px solid #6699cc;
    border-collapse: collapse;
    margin-bottom: 14px;
}

.box-header-orange {
    background-color: #ff6600;
    color: #ffffff;
    padding: 4px 8px;
    font-size: 12px;
}

.box-header-text {
    color: #ffffff;
}

.box-header-text a {
    color: #ffffff;
    text-decoration: underline;
}

.box-body-white {
    background-color: #ffffff;
    padding: 10px;
    font-size: 11px;
    line-height: 1.5;
}

.blurb-subhead {
    color: #ff6600;
    font-weight: bold;
    font-size: 11px;
    display: block;
    margin-top: 6px;
    margin-bottom: 2px;
}

.blurb-text {
    margin-bottom: 10px;
    color: #222222;
}

.blog-date {
    font-size: 10px;
    color: #666666;
    display: block;
    margin-bottom: 6px;
}

.blog-preview {
    margin-bottom: 8px;
}

.blog-comments-count {
    font-size: 10px;
}

/* Interests Table */
.interests-table {
    border-collapse: collapse;
    margin-bottom: 14px;
}

.interests-main-head {
    padding: 4px 8px;
}

.whitetext12 {
    color: #ffffff;
    font-size: 12px;
}

.int-label {
    padding: 5px 8px;
    font-size: 11px;
    color: #003399;
}

.int-desc {
    padding: 5px 8px;
    font-size: 11px;
    color: #111111;
}

/* Top 8 Friends */
.friend-count-label {
    margin-bottom: 10px;
    font-size: 11px;
}

.top8-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    text-align: center;
}

.friend-item {
    font-size: 10px;
}

.friend-name {
    margin-bottom: 4px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-avatar {
    width: 68px;
    height: 68px;
    border: 1px solid #999999;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
}

.a-tom     { background: #a2c4c9 linear-gradient(135deg, #76a5af, #45818e); }
.a-suzanne { background: #ea580c linear-gradient(135deg, #ea580c, #c2410c); }
.a-steve   { background: #16a34a linear-gradient(135deg, #16a34a, #15803d); }
.a-bryce   { background: #003399 linear-gradient(135deg, #003399, #001a4d); }
.a-gordon  { background: #d97706 linear-gradient(135deg, #d97706, #b45309); }
.a-lain    { background: #9333ea linear-gradient(135deg, #9333ea, #7e22ce); }
.a-cat     { background: #db2777 linear-gradient(135deg, #db2777, #be185d); }
.a-c418    { background: #0284c7 linear-gradient(135deg, #0284c7, #0369a1); }

/* Comments Wall */
.comments-count-bar {
    margin-bottom: 10px;
    font-size: 11px;
}

.comment-table {
    border-collapse: collapse;
}

.comment-table td {
    padding: 8px;
    font-size: 11px;
    border: 1px solid #ffffff;
}

.comm-avatar {
    width: 50px;
    height: 50px;
    border: 1px solid #999;
    margin: 4px auto;
}

.comm-date {
    font-size: 9px;
    color: #666666;
    display: block;
}

/* Tab Management */
.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Blog Tab Entries */
.blog-full-post {
    margin-bottom: 16px;
}

.post-title-retro {
    font-size: 13px;
    color: #003399;
    margin-bottom: 4px;
}

.post-meta-retro {
    font-size: 10px;
    color: #777777;
    margin-bottom: 8px;
}

/* Games Tab */
.game-entry {
    margin-bottom: 14px;
}

.game-heading {
    font-size: 13px;
    color: #003399;
    margin-bottom: 4px;
}

/* Artwork Tab */
.art-vintage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.art-vintage-card {
    border: 1px solid #6699cc;
    background: #f4f8fc;
    text-align: center;
    padding: 6px;
}

.art-thumb {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    font-size: 11px;
    border: 1px solid #555555;
    margin-bottom: 6px;
}

.art-box-1 { background: linear-gradient(135deg, #1e1b4b, #4338ca); }
.art-box-2 { background: linear-gradient(135deg, #064e3b, #047857); }
.art-box-3 { background: linear-gradient(135deg, #7c2d12, #c2410c); }

.art-caption {
    font-size: 10px;
    line-height: 1.3;
}

/* Footer */
.footer-table {
    margin-top: 10px;
}