/* Public gaming room. The first image is the supplied gaming-room artwork;
   the existing universe image is a fallback until that asset is available. */
:root { color-scheme:dark; font-family:'Trebuchet MS',Arial,sans-serif; color:#f4f0ff; background:#080919; }

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body { margin:0; background:linear-gradient(180deg,#07091930,#08091ab0 65%,#080919f5),url('../images/gaming-consoles-background.png') center top / cover fixed,url('../images/moaliverse-background.png') center top / cover fixed; }

/* Header links remain usable without any script or member session. */
.console-header { max-width:1440px; margin:auto; padding:28px 5%; display:flex; justify-content:space-between; align-items:center; gap:24px; }

.console-brand { color:#dbd6ff; text-decoration:none; font-weight:800; letter-spacing:3px; text-shadow:0 0 24px #ae74ff; }

.console-header nav { display:flex; flex-wrap:wrap; gap:12px; }

.console-header nav a { color:#eeebff; background:#14172b9e; border:1px solid #c2a2ff42; border-radius:24px; padding:11px 17px; text-decoration:none; font-size:13px; backdrop-filter:blur(12px); }

main { max-width:1440px; padding:0 5%; margin:auto; }

/* Generous hero spacing reveals the artwork above the collection. */
.console-hero { min-height:72vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:75px 0; }

.console-eyebrow { font-size:11px; letter-spacing:3px; color:#a4e5ff; font-weight:700; }

.console-hero h1 { font-size:clamp(44px,6.5vw,92px); line-height:1.06; margin:20px 0; letter-spacing:-3px; text-shadow:0 4px 35px #080719,0 0 50px #8e5afb45; }

.console-intro { max-width:520px; font-size:18px; line-height:1.7; color:#e0dced; text-shadow:0 2px 8px #000; }

.console-action { display:inline-flex; align-items:center; gap:24px; color:white; text-decoration:none; font-size:14px; font-weight:700; padding:16px 23px; margin-top:20px; border:1px solid #c4adff8c; border-radius:28px; background:linear-gradient(145deg,#9564cebc,#293e76ce); box-shadow:inset 0 2px 2px #ffffff38,0 4px 0 #161329,0 0 30px #a672ff28; }

.console-public { display:block; font-size:10px; letter-spacing:2px; color:#d2c6e6; margin-top:30px; }

.console-collection { padding:45px 0 65px; scroll-margin-top:25px; }

.console-section-heading h2,.console-community h2 { font-size:clamp(28px,3.5vw,44px); margin:12px 0; }

.console-section-heading>p:last-child,.console-community p { color:#c3bcd5; line-height:1.7; }

.console-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:35px; }

/* Each console family has its own lighting colour on a glass-like card. */
.console-card { --light:125,159,255; padding:30px 24px; border:1px solid rgba(var(--light),.45); border-radius:26px; background:radial-gradient(ellipse at top,rgba(var(--light),.2),transparent 70%),#101327dc; box-shadow:inset 0 2px 2px #ffffff22,0 14px 35px #0005; backdrop-filter:blur(12px); }

.console-xbox { --light:125,230,144; }

.console-nintendo { --light:255,113,156; }

.console-retro { --light:255,201,111; }

.console-mark { display:block; min-height:65px; font-size:34px; letter-spacing:4px; color:rgb(var(--light)); text-shadow:0 0 25px rgba(var(--light),.65); }

.console-card-label { font-size:9px; letter-spacing:1.5px; color:rgb(var(--light)); }

.console-card h3 { font-size:25px; margin:12px 0; }

.console-card>p:last-child { font-size:14px; color:#c8c2d7; line-height:1.8; }

.console-community { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:35px; border:1px solid #b48eff38; border-radius:28px; background:linear-gradient(120deg,#322143c7,#152c3bbd); margin:0 0 60px; }

.console-community .console-action { flex-shrink:0; margin:0; }

.console-footer { max-width:1440px; margin:auto; padding:25px 5% 35px; display:flex; justify-content:space-between; gap:20px; color:#9e96b4; font-size:11px; }

.console-footer a { color:#b8dfff; text-decoration:none; }

/* Focus indication and reduced motion support keyboard/device preferences. */
a:focus-visible { outline:2px solid #89e6ff; outline-offset:5px; }

@media(max-width:1000px) { .console-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media(max-width:600px) { body { background-attachment:scroll; }.console-header { align-items:flex-start; flex-direction:column; }.console-header nav { gap:7px; }.console-header nav a { font-size:11px; padding:9px 12px; }.console-hero { min-height:65vh; padding:55px 0; }.console-hero h1 { letter-spacing:-1px; }.console-grid { grid-template-columns:1fr; }.console-community { flex-direction:column; align-items:flex-start; padding:25px; }.console-footer { flex-direction:column; } }

@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Reserve only the collapsed tab edge so the gaming artwork has more room. */
body {
    padding-left: 48px;
}

/* Both Explore and Member Pages share one scrollable left-edge tab rail. */
.console-member-sidebar {
    position: fixed;
    left: 0;
    top: 100px;
    bottom: 12px;
    width: 190px;
    z-index: 50;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
    border: 0;
    pointer-events: none;
    scrollbar-width: none;
}

/* Hide the scrollbar visually; wheel, touch, and keyboard scrolling still work. */
.console-member-sidebar::-webkit-scrollbar {
    display: none;
}

/* Keep the two groups distinct without taking space away from the content. */
.console-member-sidebar .side-menu-section {
    display: grid;
    gap: 7px;
    margin: 0 0 20px;
}

/* Match the main page's compact edge navigation by hiding group headings. */
.console-member-sidebar .side-menu-title {
    display: none;
}

/* Leave an arrow visible at the left edge; the label slides out on interaction. */
.console-member-sidebar .side-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 190px;
    min-height: 38px;
    padding: 9px 12px;
    margin: 0;
    color: #e0d9ed;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid #80caff38;
    border-left: 0;
    border-radius: 0 16px 16px 0;
    background: linear-gradient(145deg, #17172bef, #092936ef);
    box-shadow: inset 0 1px 1px #ffffff15;
    transform: translateX(-146px);
    transition: transform 250ms ease, background 250ms ease;
    pointer-events: auto;
}

/* The chevron stays visible even when a tab label is tucked offscreen. */
.console-member-sidebar .side-menu-item::after {
    content: '›';
    margin-left: auto;
    color: #7bdfff;
    font-size: 20px;
}

/* Support mouse hover and keyboard focus with the same slide-out behavior. */
.console-member-sidebar .side-menu-item:hover,
.console-member-sidebar .side-menu-item:focus-visible {
    transform: translateX(0);
    color: #fff;
    background: linear-gradient(145deg, #272858, #093646);
    border-color: #52e1ff6b;
    box-shadow: 10px 12px 30px #0006;
}

/* Highlight the current Game link without permanently expanding its tab. */
.console-member-sidebar .side-menu-item.active {
    border-color: #b899ff80;
}

/* Reuse the main navigation's glowing cyan dot. */
.console-member-sidebar .side-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7bdfff;
    box-shadow: 0 0 10px #7bdfff;
}

/* Touch devices show labels directly because they have no hover interaction. */
@media (hover: none) {
    body { padding-left: 160px; }
    .console-member-sidebar { width: 150px; }
    .console-member-sidebar .side-menu-item { width: 150px; transform: none; }
}

/* Respect device motion preferences when revealing a navigation label. */
@media (prefers-reduced-motion: reduce) {
    .console-member-sidebar .side-menu-item { transition: none; }
}