/* --- Core Setup & Variables --- */
:root {
    --font-family: 'Arimo', 'Segoe UI', sans-serif;
    --transition-speed: 0.5s;
    /* Blade Theme Colors */
    --c-live-bg: #c59e4b; --c-live-text: #6e4a12;
    --c-games-bg: #468812; --c-games-text-light: #d6f6b1;
    --c-media-bg: #135593; --c-media-text: #b9dfff;
    --c-system-bg: #554877; --c-system-text: #e4dff0;
    --c-inactive-bg: linear-gradient(to bottom, #e8e8e8, #b0b0b0);
    --c-inactive-border: #777;
}
body { background: #333; color: #fff; font-family: var(--font-family); overflow: hidden; margin: 0; height: 100vh; }
.blades-ui { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; perspective: 1500px; }
.blades-container { position: absolute; width: 100%; height: 600px; transform-style: preserve-3d; }
.content-container { position: relative; width: 800px; height: 550px; border-radius: 40px; transition: background var(--transition-speed) ease; box-shadow: inset 0 0 25px rgba(0,0,0,0.4); }

/* --- Visual Blade Styling --- */
.blade { position: absolute; top: 50%; left: 50%; width: 800px; height: 550px; border-radius: 40px; cursor: pointer; transform-origin: center center; transition: all var(--transition-speed) ease; background: var(--c-inactive-bg); border: 1px solid var(--c-inactive-border); }
.blade::before { content: ''; position: absolute; top: 1px; left: 1px; right: 1px; height: 275px; background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent); border-radius: 40px 40px 0 0; pointer-events: none; }
.blade-tab { position: absolute; top: 40px; width: 45px; height: 130px; background: inherit; border: inherit; border-radius: 20px; display: flex; justify-content: center; align-items: center; font-weight: 600; text-transform: lowercase; color: #555; writing-mode: vertical-rl; transform: rotate(180deg); }
.blade.active { transform: translate(-50%, -50%) translateZ(0) rotateY(0); z-index: 10; }
.blade.prev { transform: translate(-105%, -50%) translateZ(-300px) rotateY(35deg); z-index: 5; opacity: 0.9; }
.prev .blade-tab { left: auto; right: -23px; }
.blade.next { transform: translate(5%, -50%) translateZ(-300px) rotateY(-35deg); z-index: 5; opacity: 0.9; }
.next .blade-tab { left: -23px; }
.blade.hidden-prev { transform: translate(-150%, -50%) translateZ(-600px) rotateY(45deg); opacity: 0; }
.blade.hidden-next { transform: translate(50%, -50%) translateZ(-600px) rotateY(-45deg); opacity: 0; }

/* Apply active blade styles */
.blade[data-blade="games"].active { background: radial-gradient(circle, #95dd4a, #65b511); border-color: #4a8d11;}
.blade[data-blade="media"].active { background: radial-gradient(circle, #4899e3, #1e6abd); border-color: #1a5a9d;}
.blade[data-blade="system"].active { background: radial-gradient(circle, #b8a6d6, #8173b0); border-color: #6a5d93;}
.blade[data-blade="xbox-live"].active { background: radial-gradient(circle, #e7c57d, #c59e4b); border-color: #a17d3a;}

/* --- Content Styling --- */
.blade-content { display: none; padding: 25px 35px; color: #fff; height: 100%; box-sizing: border-box; flex-direction: column; }
.blade-content.active { display: flex; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.blade-title { font-size: 24px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.content-body { display: flex; gap: 20px; flex-grow: 1; }

/* Theme the content container and titles */
.content-container[data-active-blade="games"] { background: var(--c-games-bg); }
[data-blade="games"] .blade-title { color: var(--c-games-text-light); }
.content-container[data-active-blade="media"] { background: var(--c-media-bg); }
[data-blade="media"] .blade-title { color: var(--c-media-text); }
.content-container[data-active-blade="system"] { background: var(--c-system-bg); }
[data-blade="system"] .blade-title { color: var(--c-system-text); }
.content-container[data-active-blade="xbox-live"] { background: var(--c-live-bg); }
[data-blade="xbox-live"] .blade-title { color: var(--c-live-text); text-shadow: 0 1px 1px rgba(255,255,255,0.4); }

/* --- GAMES Blade Specifics --- */
.xbox-360-logo { width: 120px; height: 35px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/XBOX_360_logo.svg/1024px-XBOX_360_logo.svg.png'); }
.game-list { flex-basis: 58%; display: flex; flex-direction: column; gap: 4px; }
.game-item { display: flex; align-items: center; padding: 5px; border-radius: 8px; background: rgba(0,0,0,0.15); border: 2px solid transparent; cursor: pointer; }
.game-item.active { background: rgba(255,255,255,0.25); border-color: #fff; }
.game-item img { width: 60px; height: 60px; margin-right: 12px; border-radius: 5px; object-fit: cover; background: #222; }
.game-info p { margin: 0; font-weight: 600; font-size: 15px; }
.game-info span { font-size: 13px; opacity: 0.8; }
.game-system { margin-left: auto; font-size: 12px; font-weight: 600; color: #b7e891; padding-right: 5px; }
.game-details { flex-basis: 42%; display: flex; flex-direction: column; }
.game-artwork { width: 100%; border-radius: 8px; margin-bottom: 10px; border: 3px solid #64b52d; aspect-ratio: 4 / 3; object-fit: cover;}
.game-description { font-size: 13px; line-height: 1.45; margin-bottom: auto; padding-top: 5px; }
.ratings-box { display: flex; gap: 10px; margin-top: 10px;}
.esrb-rating.t { width: 40px; height: 55px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/ESRB_2013_Teen.svg/320px-ESRB_2013_Teen.svg.png'); }
.content-box { flex-grow: 1; background: rgba(0,0,0,0.25); border-radius: 8px; padding: 8px; display: flex; align-items: center; gap: 10px; }
.content-box p { margin: 0; font-size: 12px; }
.content-icon { width: 28px; height: 28px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url('https://i.imgur.com/qF08P8f.png'); }

/* --- MEDIA Blade Specifics --- */
.media-grid { display: flex; gap: 20px; height: 350px;}
.media-categories { flex-basis: 40%; }
.media-item { display: flex; align-items: center; gap: 15px; padding: 15px; font-size: 18px; font-weight: 600; border-radius: 8px; border: 2px solid transparent; }
.media-item.active { background: rgba(255,255,255,0.2); border-color: #fff; }
.media-item i { font-size: 24px; width: 30px; text-align: center; }
.mce-icon { width: 24px; height: 24px; background: url('https://i.imgur.com/S8qK1yR.png') no-repeat center center/contain; margin-left: 3px;}
.media-albums { flex-basis: 60%; display: flex; flex-direction: column; gap: 8px;}
.album-item { display: flex; align-items: center; gap: 15px; padding: 8px; background: rgba(0,0,0,0.2); border-radius: 8px; }
.album-item img { width: 60px; height: 60px; border-radius: 5px; object-fit: cover; }
.album-item p { margin: 0; font-weight: 600; }
.album-item span { font-size: 14px; opacity: 0.8; }
.now-playing-bar { display: flex; align-items: center; gap: 15px; margin-top: 15px; padding: 10px; background: rgba(0,0,0,0.15); border-radius: 8px; }
.now-playing-bar img { width: 40px; height: 40px; border-radius: 5px; }
.track-info { flex-grow: 1; }
.track-info p { margin: 0 0 5px 0; font-size: 14px; }
.progress-bar { width: 100%; height: 8px; background: rgba(0,0,0,0.3); border-radius: 4px; }
.progress { height: 100%; background: #fff; border-radius: 4px; }
.play-tray-bar { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 12px; border-radius: 20px; background: rgba(0,0,0,0.1); }
.play-icon { width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.play-icon::after { content: ''; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #fff; margin-left: 3px;}

/* --- SYSTEM Blade Specifics --- */
.system-grid { display: flex; gap: 30px; }
.system-menu { flex-basis: 50%; }
.system-item { display: flex; align-items: center; gap: 15px; padding: 12px; border-radius: 8px; border: 2px solid transparent; }
.system-item.active { background: rgba(255,255,255,0.2); border-color: #fff; }
.system-item i { font-size: 20px; width: 24px; text-align: center; }
.system-description { flex-basis: 50%; padding-top: 15px; font-size: 16px; line-height: 1.5; color: #e4dff0; }
.system-description ul { padding-left: 25px; margin-top: 10px; list-style: disc; }
.system-description li { margin-bottom: 5px; }

/* --- Xbox LIVE Blade Specifics --- */
[data-blade="xbox-live"] .content-body { color: var(--c-live-text); text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
.live-menu-items { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; }
.live-item, .live-item-dark { background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; box-shadow: inset 0 1px 2px rgba(255,255,255,0.4); padding: 10px; display: flex; align-items: center; }
.item-text h3 { margin: 0; font-size: 18px; }
.item-text p { margin: 0; font-size: 16px; line-height: 1.2; }
.profile-pic { width: 64px; height: 64px; margin-right: 15px; background-image: linear-gradient(45deg, #74a701 25%, #88c425 25%, #88c425 50%, #74a701 50%, #74a701 75%, #88c425 75%, #88c425 100%); background-size: 8px 8px; border: 3px solid #fff; border-radius: 8px; box-shadow: inset 0 0 5px rgba(0,0,0,0.3); }
.icon-globe, .icon-person, .icon-rings { width: 64px; height: 64px; margin-right: 15px; background-color: #eee; border-radius: 8px; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); }
.live-item-dark { background: #4a4a4a; border-color: #222; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); align-items: center; }
.xbox-logo-text { font-weight: 700; background: linear-gradient(to top, #f8941d, #8dc63f); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,0.4); line-height: 1; }
.live-item-dark .xbox-logo-text { font-size: 24px; }
.live-info-pane { width: 180px; flex-shrink: 0; padding-top: 20px; }
.live-info-pane .xbox-logo-text { font-size: 20px; margin-bottom: 10px; }
.live-info-pane p { font-size: 14px; line-height: 1.4; }
.tray-button { margin-top: 20px; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; box-shadow: inset 0 2px 3px rgba(0,0,0,0.1); padding: 10px; display: flex; align-items: center; font-size: 18px; color: var(--c-live-text); text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
.icon-tray { width: 24px; height: 24px; margin-right: 10px; background-color: #ddd; border-radius: 50%; box-shadow: inset 0 0 4px rgba(0,0,0,0.2); }
.button-prompt.b { background-color: #e51b1b; }
.button-prompt.a { background-color: #10a300; }