/* ============================================
   UPDATES/CHANGELOG SYSTEM
   - Preview section for main menu
   - Full updates page
   - Category badges with colors
   ============================================ */

/* ============================================
   UPDATES PREVIEW (Main Menu)
   ============================================ */

.updates-preview-section {
    background: rgba(20, 20, 30, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.updates-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.updates-preview-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
}

.updates-preview-header .view-all {
    color: #3498db;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s;
    text-decoration: none;
}

.updates-preview-header .view-all:hover {
    color: #5dade2;
}

.updates-preview-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.update-item {
    background: rgba(30, 30, 40, 0.5);
    border-radius: 8px;
    padding: 12px 16px;
    border-left: 3px solid #3498db;
    transition: all 0.3s;
}

.update-item:hover {
    background: rgba(40, 40, 50, 0.6);
    transform: translateX(4px);
}

.update-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.update-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.update-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.update-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.update-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   CATEGORY BADGES
   ============================================ */

.update-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Physics - Blue */
.badge-physics {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.4);
}

/* Camera - Purple */
.badge-camera {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.4);
}

/* UI/UX - Green */
.badge-ui {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}

/* Bug Fix - Red */
.badge-bugfix {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.4);
}

/* Feature - Yellow/Gold */
.badge-feature {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.4);
}

/* Performance - Cyan */
.badge-performance {
    background: rgba(26, 188, 156, 0.2);
    color: #1abc9c;
    border: 1px solid rgba(26, 188, 156, 0.4);
}

/* Gameplay - Orange */
.badge-gameplay {
    background: rgba(230, 126, 34, 0.2);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.4);
}

/* Network - Gray */
.badge-network {
    background: rgba(149, 165, 166, 0.2);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.4);
}

/* ============================================
   FULL UPDATES PAGE
   ============================================ */

/* ============================================
   UPDATES PAGE (updates.html) — arena skin; loads after arena-pages.css
   ============================================ */
.updates-page { }
.updates-page-header { position: relative; padding: 56px 0 30px; }
.updates-page-header h1 { font: italic 800 clamp(48px, 8vw, 92px)/0.9 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; text-shadow: 6px 6px 0 var(--orange), 0 0 40px rgba(0, 0, 0, .6); margin: 10px 0 14px; }
.updates-page-header .subtitle { font: 800 12px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.updates-page-header .back-link { display: none; }
.updates-page-header::after { content: ''; display: block; height: 2px; margin-top: 30px; background: linear-gradient(90deg, var(--orange), transparent 40%); }

/* Timeline */
.updates-timeline { position: relative; padding-left: 34px; }
.updates-timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--orange), var(--line-strong) 30%, var(--line) 100%); }
.update-entry { position: relative; margin-bottom: 22px; }
.update-entry::before { content: ''; position: absolute; left: -31px; top: 22px; width: 12px; height: 12px; background: var(--bg-4); border: 2px solid var(--line-strong); transform: rotate(45deg); }
.update-entry:first-child::before { background: var(--orange); border-color: var(--orange-hi); box-shadow: 0 0 14px var(--orange); }
.update-card {
    position: relative; isolation: isolate; padding: 22px 26px;
    background: linear-gradient(180deg, rgba(22, 28, 69, .86), rgba(10, 13, 32, .96));
    clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
    transition: transform var(--t); animation: ar-rise 420ms cubic-bezier(.2, .8, .2, 1) both;
}
.update-card::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(160deg, rgba(140, 160, 255, .5), rgba(140, 160, 255, .08) 40%, rgba(255, 122, 26, .3));
    clip-path: polygon(evenodd, var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer),
                       var(--chamfer) 0, calc(var(--chamfer) + .4px) 1px, 1px calc(var(--chamfer) + .4px), 1px calc(100% - 1px), calc(100% - var(--chamfer) - .4px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--chamfer) - .4px), calc(100% - 1px) 1px, calc(var(--chamfer) + .4px) 1px);
}
.update-card:hover { transform: translateX(3px); }
.update-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.update-card-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.update-card-date { font: 800 11px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.update-card-title { font: italic 800 30px/1 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 14px; }
.update-card-content { color: var(--fg-1); font-size: 14.5px; line-height: 1.6; }
.update-card-content p { margin-bottom: 10px; }
.update-card-content ul { margin: 0 0 12px; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.update-card-content li { position: relative; padding-left: 16px; color: var(--fg-2); }
.update-card-content li::before { content: '›'; position: absolute; left: 2px; top: -1px; color: var(--orange); font: 800 16px/1 var(--f-display); }
.update-card-content strong { color: var(--fg-0); }
.update-card-content code { background: var(--bg-3); border: 1px solid var(--line-strong); border-radius: 2px; padding: 1px 6px; font: 800 12.5px var(--f-display); color: var(--fg-0); }

/* Badges on the page (override the menu-preview rules above) */
.updates-page .update-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 2px; font: italic 800 11px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; background: rgba(14, 18, 48, .8); color: var(--cyan); border: 1px solid rgba(34, 229, 255, .45); transform: skewX(var(--skew)); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.updates-page .badge-feature { background: var(--magenta); color: #fff; border: 0; }
.updates-page .badge-gameplay { background: var(--orange); color: var(--orange-ink); border: 0; }
.updates-page .badge-physics { color: var(--ok); border-color: rgba(61, 255, 155, .45); }
.updates-page .badge-bugfix { color: var(--red); border-color: rgba(255, 70, 85, .45); }
.updates-page .badge-performance { color: var(--gold); border-color: rgba(255, 200, 61, .45); }
.updates-page .badge-network { color: var(--violet); border-color: rgba(139, 92, 255, .5); }

@media (max-width: 700px) { .updates-timeline { padding-left: 22px; } .update-entry::before { left: -19px; } .update-card { padding: 16px; } .update-card-title { font-size: 24px; } }