/* Sahdsu blue glass. Scoped to portal documents; upstream sites and game
   content keep their own styles. Large surfaces get blur, catalogue tiles do not. */
html[data-portal-page] {
    --green: #a8d9ff;
    --mint: #a8d9ff;
    --mint-soft: #dbf2ff;
    --ink: #091a23;
    --panel: #132d42;
    --panel2: #0b2235;
    --line: rgba(178, 222, 255, .28);
    --muted: #b6ccda;
    --glass-edge: rgba(196, 230, 255, .40);
    --glass-shine: inset 0 1px rgba(255, 255, 255, .20), inset 0 -1px rgba(137, 198, 240, .10);
    --glass-shadow: 0 26px 72px rgba(0, 4, 17, .42);
    color-scheme: dark;
}
html[data-portal-page] :where(a, button, input, textarea, select):focus-visible {
    outline: 2px solid #b8e5ff;
    outline-offset: 3px;
}
html[data-portal-page] :where(input, textarea, select)::placeholder { color: #8aafc6; }
html[data-portal-page]:not([data-portal-page="shell"]) main > a { color: #a8d9ff; }

/* The login backdrop carries across all portal pages. */
html[data-portal-page]:not([data-portal-page="shell"]):not([data-portal-page="player"]) body {
    isolation: isolate;
    color: #f0f9ff;
    background: radial-gradient(circle at 18% 15%, #2b839243, transparent 34rem),
                radial-gradient(circle at 85% 80%, #8168b338, transparent 38rem),
                radial-gradient(circle at 86% 4%, #306ea934, transparent 30rem), #091a23;
    background-attachment: fixed;
}
html[data-portal-page]:not([data-portal-page="shell"]):not([data-portal-page="player"]) body::before {
    content: "";
    position: fixed;
    z-index: -1;
    width: min(64vw, 620px);
    height: min(64vw, 620px);
    top: -24vw;
    right: -10vw;
    border: 1px solid #c1ecff50;
    border-radius: 50%;
    box-shadow: 0 0 0 55px #b4e9ff0c, 0 0 0 145px #b4e9ff08;
    pointer-events: none;
}
html[data-portal-page]:not([data-portal-page="shell"]):not([data-portal-page="player"]) body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: min(45vw, 470px);
    height: min(45vw, 470px);
    left: -18vw;
    bottom: -22vw;
    border: 1px solid #9ecdf039;
    border-radius: 50%;
    box-shadow: 0 0 0 48px #b4e9ff09, 0 0 0 110px #b4e9ff05;
    pointer-events: none;
}

/* A small set of large surfaces carries the liquid glass treatment. */
html[data-portal-page="home"] .hero,
html[data-portal-page="games"] .hero,
html[data-portal-page="welcome"] .card,
html[data-portal-page="feedback"] main,
html[data-portal-page="community"] .community-compose,
html[data-portal-page="chat"] .shell,
html[data-portal-page="account"] main > section,
html[data-portal-page="account"] main > .card,
html[data-portal-page="announcements"] main > section,
html[data-portal-page="announcements"] main > article,
html[data-portal-page="admin"] main > section,
html[data-portal-page="admin"] main > article,
html[data-portal-page="admin"] .dashboard-section {
    border: 1px solid var(--glass-edge);
    background: linear-gradient(145deg, #ffffff1a, #ffffff04 29%, transparent 55%),
                radial-gradient(circle at 95% 0, #8bb7f330, transparent 48%),
                linear-gradient(135deg, #24506ca8, #132b46cb 57%, #18293edb);
    box-shadow: var(--glass-shine), var(--glass-shadow);
    backdrop-filter: blur(16px) saturate(1.25);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
}

/* The outer navigation is blue without turning the proxied page blue. */
html[data-portal-page="shell"] {
    --shell: #091b2b;
    --shell-surface: #132c43;
    --shell-raised: #1e3f59;
    --shell-border: rgba(186, 225, 255, .29);
    --shell-mint: #abdfff;
    --shell-text: #f0f9ff;
    --shell-muted: #abc5d6;
}
html[data-portal-page="shell"] body { background: #091a29; }
html[data-portal-page="shell"] #tab-bar {
    border-bottom-color: #a7d5fb3d;
    background: linear-gradient(90deg, #0b2235, #152a42 56%, #172b47);
}
html[data-portal-page="shell"] #nav-bar {
    border-bottom-color: #b1dfff4c;
    background: linear-gradient(125deg, #18354cd9, #10283ed9 58%, #1d2d4bd9);
    box-shadow: inset 0 1px #ffffff18, 0 12px 32px #0004;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
html[data-portal-page="shell"] .brand-glyph {
    color: #09233c;
    background: linear-gradient(140deg, #e7f7ff, #86caff 70%, #6fa9f7);
    box-shadow: 0 0 22px #92d2ff5a;
}
html[data-portal-page="shell"] .browser-tab.active {
    border-color: #b3dfff45;
    border-bottom-color: #1a3650;
    color: #f0f9ff;
    background: linear-gradient(155deg, #315675, #1a3650);
    box-shadow: inset 0 2px #c8ecff, 0 -7px 25px #91d8ff19;
}
html[data-portal-page="shell"] .browser-tab:hover { background: #294762; }
html[data-portal-page="shell"] #nav-bar button,
html[data-portal-page="shell"] #new-tab {
    border-color: #b8dfff3d;
    color: #e9f6ff;
    background: linear-gradient(145deg, #315471aa, #1d3b58cc);
    box-shadow: inset 0 1px #ffffff12;
}
html[data-portal-page="shell"] #nav-bar button:hover,
html[data-portal-page="shell"] #new-tab:hover { border-color: #c7eaff83; background: #355c7c; }
html[data-portal-page="shell"] .address-wrap { border-color: #badfff48; background: #0b2235d9; }
html[data-portal-page="shell"] #go-btn { border-color: #aad9ff !important; color: #0b2a43 !important; background: #aad9ff !important; }
html[data-portal-page="shell"] .browser-menu,
html[data-portal-page="shell"] #more-menu {
    border-color: #b8dfff5c;
    color: #f0f9ff;
    background: linear-gradient(145deg, #25445eeb, #10273de8);
    box-shadow: var(--glass-shine), 0 26px 70px #0009;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
html[data-portal-page="shell"] .browser-menu-item { background: #24415a; }
html[data-portal-page="shell"] .browser-menu-item:hover { background: #335b7d; }
html[data-portal-page="shell"] #page-progress span { background: linear-gradient(90deg, #b8ecff, #87bdff, #b6a8ff); box-shadow: 0 0 18px #91caff; }

/* Home: an open blue hero with glass changelog and navigation tiles. */
html[data-portal-page="home"] .site-header { border-bottom-color: #aedfff43; }
html[data-portal-page="home"] .brand-mark {
    border-color: #dcf5ff9c;
    color: #09233c;
    background: linear-gradient(140deg, #e6f6ff, #91d1ff 67%, #79b5f6);
    box-shadow: 0 0 0 4px #b4e9ff0e, 0 8px 30px #90d4ff67;
}
html[data-portal-page="home"] .portal-menu-options a.active { color: #e3f6ff; background: #b8e4ff1c; }
html[data-portal-page="home"] .header-action,
html[data-portal-page="home"] .account-exit {
    border-color: #c2e5ff40;
    color: #e7f5ff;
    background: #20425b9c;
    box-shadow: inset 0 1px #ffffff13;
}
html[data-portal-page="home"] .header-action:hover,
html[data-portal-page="home"] .account-exit:hover { border-color: #d2efff8c; background: #315b7a; }
html[data-portal-page="home"] .hero {
    position: relative;
    isolation: isolate;
    min-height: 390px;
    padding: 36px clamp(22px, 3.5vw, 42px);
    border-radius: 30px;
    overflow: hidden;
}
html[data-portal-page="home"] .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(#d8efff0a 1px, transparent 1px),
                linear-gradient(90deg, #d8efff0a 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, #000a, transparent 80%);
    pointer-events: none;
}
html[data-portal-page="home"] .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 400px;
    height: 400px;
    right: -180px;
    bottom: -250px;
    border: 1px solid #d5f1ff6a;
    border-radius: 50%;
    box-shadow: 0 0 0 48px #b7e6ff0c, 0 0 0 105px #b7e6ff08;
    pointer-events: none;
}
html[data-portal-page="home"] .eyebrow,
html[data-portal-page="home"] .section-kicker { color: #c0e8ff; }
html[data-portal-page="home"] .eyebrow::before { background: #a8d9ff; box-shadow: 0 0 0 5px #a8d9ff24; }
html[data-portal-page="home"] h1 em {
    background: linear-gradient(105deg, #dff6ff 5%, #9fd4ff 53%, #acaeff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
html[data-portal-page="home"] .intro { color: #c4d8e7; }
html[data-portal-page="home"] .section-sub,
html[data-portal-page="home"] .search-hint,
html[data-portal-page="home"] .site-footer,
html[data-portal-page="home"] .destination-card small,
html[data-portal-page="home"] .recent-meta small { color: #a8c3d6; }
html[data-portal-page="home"] #home-query::placeholder { color: #9bbbd0; }
html[data-portal-page="home"] #home-search {
    border-color: #c5e8ff7a;
    background: #0a2339ad;
    box-shadow: inset 0 1px #ffffff1c, 0 0 0 5px #9bd8ff0d, 0 18px 40px #0005;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
html[data-portal-page="home"] #home-query { color: #f4fbff; }
html[data-portal-page="home"] #home-search button,
html[data-portal-page="home"] .notification-count {
    color: #08243d;
    background: linear-gradient(135deg, #d8f2ff, #8bc9ff);
}
html[data-portal-page="home"] .search-icon,
html[data-portal-page="home"] .card-arrow { color: #b5e4ff; }
html[data-portal-page="home"] #changelog-slot .changelog {
    border-color: #d1ebff6b;
    background: linear-gradient(145deg, #ffffff20, #ffffff05 28%, transparent 60%),
                linear-gradient(140deg, #2c5a77ae, #12304aca);
    box-shadow: var(--glass-shine), 0 22px 55px #0007;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
html[data-portal-page="home"] #changelog-slot .changelog header span { color: #bce6ff; }
html[data-portal-page="home"] #changelog-slot .change {
    border-color: #c8e9ff30;
    color: #ecf8ff;
    background: #102c45bc;
}
html[data-portal-page="home"] .reaction,
html[data-portal-page="home"] .changelog-inline-editor-actions button { background: #244561; color: #e8f6ff; }
html[data-portal-page="home"] .reaction.active,
html[data-portal-page="home"] .changelog-inline-editor-actions button[type="submit"] { color: #08243d; background: #a8d9ff; }
html[data-portal-page="home"] .destination-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: #caeaff50;
    color: #bde7ff;
    background: linear-gradient(145deg, #ffffff17, #ffffff04 30%, transparent 65%),
                linear-gradient(140deg, #254b69b5, #142d48d9);
    box-shadow: inset 0 1px #ffffff1b, 0 16px 40px #0003;
}
html[data-portal-page="home"] .destination-card:nth-child(2) { background-color: #1c3659; }
html[data-portal-page="home"] .destination-card:nth-child(3) { background-color: #213956; }
html[data-portal-page="home"] .destination-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 165px;
    height: 165px;
    top: -78px;
    right: -58px;
    border: 1px solid #d0eeff70;
    border-radius: 32px;
    transform: rotate(25deg);
    box-shadow: 0 0 0 28px #c6e9ff10;
    pointer-events: none;
}
html[data-portal-page="home"] .destination-card:hover,
html[data-portal-page="home"] .destination-card:focus-visible { border-color: #d6f0ffac; background-color: #315a7c; }
html[data-portal-page="home"] .card-icon { border-color: #b9e6ff5a; color: #c8edff; background: #9dd8ff1b; }
html[data-portal-page="home"] .surface {
    border-color: #bedfff42;
    background: linear-gradient(145deg, #ffffff0f, transparent 34%), #15334ac2;
    box-shadow: inset 0 1px #ffffff13;
}
html[data-portal-page="home"] .recent-link { border-color: #b4dfff39; background: #1a3b56b8; }
html[data-portal-page="home"] .recent-link:hover { background: #2a5272; }
html[data-portal-page="home"] .recent-favicon { color: #c8ebff; background: #a8d9ff24; }
html[data-portal-page="home"] .announcement-popover { border-color: #bedfff65; background: #17384fdc; backdrop-filter: blur(14px); }

/* Games: blue arcade art remains varied without rainbow page accents. */
html[data-portal-page="games"] main { width: min(1210px, calc(100% - 36px)); }
html[data-portal-page="games"] .hero {
    position: relative;
    min-height: 245px;
    align-items: center;
    padding: 32px clamp(25px, 4vw, 52px);
    border-radius: 28px;
    overflow: hidden;
}
html[data-portal-page="games"] .hero::before {
    content: "✦";
    position: absolute;
    right: clamp(30px, 9vw, 110px);
    top: -51px;
    color: #d7efff;
    font-size: clamp(200px, 28vw, 365px);
    line-height: 1;
    opacity: .15;
    transform: rotate(-18deg);
    text-shadow: 0 0 55px #8bc5ff;
    pointer-events: none;
}
html[data-portal-page="games"] .hero::after {
    content: "";
    position: absolute;
    right: 4%;
    bottom: -155px;
    width: 350px;
    height: 350px;
    border: 1px solid #c4e8ff61;
    border-radius: 50%;
    box-shadow: 0 0 0 34px #a9d9ff11, 0 0 0 82px #a9d9ff09;
    pointer-events: none;
}
html[data-portal-page="games"] .hero > * { position: relative; z-index: 1; }
html[data-portal-page="games"] .eyebrow { color: #bee5ff; }
html[data-portal-page="games"] h1 { color: #f3fbff; text-shadow: 0 8px 32px #9dd6ff50; }
html[data-portal-page="games"] .game-count {
    padding: 10px 14px;
    border: 1px solid #c5e7ff73;
    border-radius: 999px;
    background: #173b59bd;
    box-shadow: inset 0 1px #ffffff22;
}
html[data-portal-page="games"] #game-search { border-color: #b9e3ff66; background: #0e2840cc; }
html[data-portal-page="games"] #game-search::placeholder { color: #98b8cf; }
html[data-portal-page="games"] #game-search:focus { border-color: #a8d9ff; box-shadow: 0 0 0 4px #a8d9ff27; }
html[data-portal-page="games"] .clear-search { color: #e8f7ff; background: #294e6e; }
html[data-portal-page="games"] .games-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 16px; }
html[data-portal-page="games"] .game-card {
    min-height: 210px;
    content-visibility: auto;
    contain-intrinsic-size: auto 210px;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
    border-color: #b9e2ff48;
    border-radius: 18px;
    background: linear-gradient(155deg, #ffffff16, #ffffff05 34%, transparent 66%),
                linear-gradient(145deg, #265272ad, #162e49d9);
    box-shadow: inset 0 1px #ffffff1b, 0 10px 28px #0003;
}
html[data-portal-page="games"] .game-card:hover,
html[data-portal-page="games"] .game-card:focus-visible {
    border-color: #d3efffc1;
    background: linear-gradient(145deg, #366991, #1b3b5c);
    box-shadow: 0 0 0 3px #a8d9ff24, 0 17px 38px #0006;
}
html[data-portal-page="games"] .game-art {
    position: relative;
    width: 100%;
    height: 126px;
    flex: none;
    overflow: hidden;
    border: 1px solid #c4eaff6c;
    border-radius: 12px;
    color: #e8f7ff;
    background: radial-gradient(circle at 22% 19%, hsla(var(--accent), 96%, 78%, .5), transparent 37%),
                linear-gradient(135deg, hsla(var(--accent), 83%, 45%, .82), #122a49 82%);
    box-shadow: inset 0 1px #ffffff3a, inset 0 -30px 65px #0615254d;
    font-size: 1.9rem;
    text-shadow: 0 3px 18px #0008;
}
html[data-portal-page="games"] .game-art::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -34px;
    top: -48px;
    border: 1px solid #dcf2ff85;
    border-radius: 30px;
    transform: rotate(26deg);
    box-shadow: 0 0 0 21px #c7e9ff1a, 0 0 0 51px #c7e9ff0b;
    pointer-events: none;
}
html[data-portal-page="games"] .game-info { padding: 0 5px 5px; }
html[data-portal-page="games"] .game-info small span { color: #bde5ff; }

/* Community and chat use the same glass, with layouts tuned for discussion. */
html[data-portal-page="community"] main { max-width: 1040px; }
html[data-portal-page="community"] main > h1 {
    max-width: 760px;
    margin: 35px 0 25px;
    color: #f0f9ff;
    font-size: clamp(3.4rem, 9vw, 6.3rem);
    letter-spacing: -.075em;
    line-height: .93;
    text-shadow: 0 14px 45px #93d1ff50;
}
html[data-portal-page="community"] .community-lede { color: #bfd5e4; font-size: 1.05rem; }
html[data-portal-page="community"] .community-compose {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 25px;
}
html[data-portal-page="community"] .community-compose::before {
    content: "✦";
    position: absolute;
    z-index: -1;
    right: 7%;
    top: -69px;
    color: #d9f1ff;
    font-size: 220px;
    line-height: 1;
    opacity: .12;
    transform: rotate(-16deg);
    pointer-events: none;
}
html[data-portal-page="community"] .compose-heading span,
html[data-portal-page="community"] .control-label { color: #b8e3ff; }
html[data-portal-page="community"] .compose-heading button,
html[data-portal-page="community"] #compose-form > button,
html[data-portal-page="community"] .sort button.active,
html[data-portal-page="community"] .comment-form button,
html[data-portal-page="community"] .reply-form button { color: #0b2b44; background: #acdfff; }
html[data-portal-page="community"] .sort button,
html[data-portal-page="community"] .vote,
html[data-portal-page="community"] .reply-toggle { border-color: #b6ddfa4b; color: #e4f5ff; background: #1b3a54c7; }
html[data-portal-page="community"] .sort button.active { color: #0b2b44; }
html[data-portal-page="community"] #requests > .card {
    position: relative;
    overflow: hidden;
    border-color: #bedfff4c;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff12, transparent 35%), #17354ccf;
    box-shadow: inset 0 1px #ffffff14, 0 14px 34px #0003;
}
html[data-portal-page="community"] #requests > .card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #a8d9ff;
}
html[data-portal-page="community"] #requests > .card .kind,
html[data-portal-page="community"] #requests > .card .author { color: #bde5ff; }
html[data-portal-page="community"] .comment { border-left-color: #5e8bad; }
html[data-portal-page="community"] .comment-form textarea,
html[data-portal-page="community"] .reply-form textarea,
html[data-portal-page="community"] #compose-form :is(input, textarea, select) { border-color: #b6ddfa4b; background: #0d2940de; }

html[data-portal-page="chat"] .shell {
    background: linear-gradient(135deg, #234661ad, #10283ed9);
    box-shadow: var(--glass-shine), 0 30px 90px #0008, 0 0 0 5px #b7e1ff0a;
}
html[data-portal-page="chat"] .sidebar { border-right-color: #b5dfff49; background: linear-gradient(165deg, #234b68cc, #102c47dc 70%); }
html[data-portal-page="chat"] .sidebar-head { background: radial-gradient(circle at 100% 0, #a3d8ff2e, transparent 55%); }
html[data-portal-page="chat"] .sidebar h1 { color: #ecf8ff; font-size: 2.45rem; }
html[data-portal-page="chat"] .conversation:hover { background: #2d5271; }
html[data-portal-page="chat"] .conversation.active { color: #082b48; background: linear-gradient(110deg, #c8ebff, #8cc8f8); }
html[data-portal-page="chat"] .conversation.active small { color: #21445c; }
html[data-portal-page="chat"] .chat-head { border-bottom-color: #b5dfff49; background: #1b3b56b8; box-shadow: inset 0 1px #ffffff15; }
html[data-portal-page="chat"] .messages {
    background-image: radial-gradient(#d2ecff13 1px, transparent 1px), radial-gradient(circle at 58% 25%, #549ac228, transparent 40%);
    background-size: 26px 26px, auto;
}
html[data-portal-page="chat"] .bubble { border-color: #c0e2ff4d; background: linear-gradient(140deg, #28506dc9, #193c59e8); box-shadow: 0 7px 22px #0002; }
html[data-portal-page="chat"] .own .bubble { border-color: #d0edff75; background: linear-gradient(140deg, #386f98, #2d638b); }
html[data-portal-page="chat"] .composer { border-top-color: #b5dfff49; background: #17344fc9; }
html[data-portal-page="chat"] .composer input,
html[data-portal-page="chat"] .conversation-search,
html[data-portal-page="chat"] .message-search { border-color: #bbdfff52; background: #0c2a42; }
html[data-portal-page="chat"] .composer button,
html[data-portal-page="chat"] .primary { color: #092c48; background: #a8d9ff; }
html[data-portal-page="chat"] .connection.online { color: #b8e6ff; }
html[data-portal-page="chat"] .list-label { color: #aacde3; }
html[data-portal-page="chat"] .conversation[data-type="community"] .avatar { color: #092a47; background: #a8d9ff; }
html[data-portal-page="chat"] .admin-badge { color: #092a47; background: #a8d9ff; }
html[data-portal-page="chat"] .new-group,
html[data-portal-page="chat"] .mobile-people,
html[data-portal-page="chat"] .manage-group,
html[data-portal-page="chat"] .leave-group,
html[data-portal-page="chat"] .chat-mute-controls select,
html[data-portal-page="chat"] .chat-mute-button,
html[data-portal-page="chat"] .message-actions button,
html[data-portal-page="chat"] .dialog-actions button:not(.primary),
html[data-portal-page="chat"] .member-actions button:not(.kick) {
    border: 1px solid #b8dfff5c;
    color: #e8f6ff;
    background: #244865;
}
html[data-portal-page="chat"] .chat-mute-button:hover,
html[data-portal-page="chat"] .new-group:hover { border-color: #c6eaff; background: #315c7c; }
html[data-portal-page="chat"] .chat-mute-button.muted,
html[data-portal-page="chat"] .dialog-actions .primary,
html[data-portal-page="chat"] .inline-form button,
html[data-portal-page="chat"] .manage-section > button { color: #092a47; background: #a8d9ff; }
html[data-portal-page="chat"] .message-search-icon { color: #9bcbe8; }
html[data-portal-page="chat"] .message-search::placeholder { color: #96b9d0; }
html[data-portal-page="chat"] .message-search:hover { border-color: #b8dfff8c; background: #163a54; }
html[data-portal-page="chat"] .reply-preview,
html[data-portal-page="chat"] .member-row,
html[data-portal-page="chat"] .member-picker { border-color: #b8dfff4d; background: #15354c; }
html[data-portal-page="chat"] dialog { border-color: #b8dfff69; color: #f0f9ff; background: linear-gradient(145deg, #254660, #102940); }
html[data-portal-page="chat"] dialog label,
html[data-portal-page="chat"] .manage-section h3,
html[data-portal-page="chat"] .owner-badge { color: #c1e6ff; }
html[data-portal-page="chat"] dialog :is(input, select) { border-color: #b8dfff57; color: #f0f9ff; background: #0d2a42; }
html[data-portal-page="chat"] .chat-toast { border-color: #b8dfff75; color: #f0f9ff; background: #193b54; }
html[data-portal-page="chat"] .chat-toast strong { color: #b9e6ff; }
html[data-portal-page="chat"] .chat-toast-close { color: #e9f7ff; background: #2a5271; }

/* Identity, forms and account panels stay legible against the blue glass. */
html[data-portal-page="welcome"] .card {
    position: relative;
    overflow: hidden;
    width: min(460px, 100%);
    border-radius: 25px;
}
html[data-portal-page="welcome"] .card::before {
    content: "";
    position: absolute;
    width: 155px;
    height: 155px;
    top: -95px;
    right: -85px;
    border: 1px solid #d7f3ff75;
    border-radius: 25px;
    transform: rotate(32deg);
    box-shadow: 0 0 0 32px #def6ff0e;
    pointer-events: none;
}
html[data-portal-page="welcome"] .brand { color: #c2ecff; letter-spacing: .12em; text-transform: uppercase; }
html[data-portal-page="welcome"] h1 { color: #f0faff; }
html[data-portal-page="welcome"] input { border-color: #b8e8f159; background: #0a2338b8; }
html[data-portal-page="welcome"] .choices .button:first-child,
html[data-portal-page="welcome"] form button {
    border: 1px solid #dcf2ffb0;
    color: #092a47;
    background: linear-gradient(125deg, #e2f5ff 0%, #9dd2ff 55%, #79b8f3 100%);
    box-shadow: inset 0 1px #ffffffc9, 0 12px 28px #418fca52;
    font-weight: 850;
}
html[data-portal-page="welcome"] .choices .button:first-child:hover,
html[data-portal-page="welcome"] form button:hover { background: linear-gradient(125deg, #f1faff, #b7e2ff 58%, #8dc9ff); }
html[data-portal-page="welcome"] .choices .button.secondary {
    border: 1px solid #c5e6ff69;
    color: #e7f6ff;
    background: linear-gradient(145deg, #ffffff12, #ffffff03 34%), #12334dcc;
    box-shadow: inset 0 1px #ffffff16;
}
html[data-portal-page="welcome"] .choices .button.secondary:hover { border-color: #e0f3ffad; background-color: #245273; }

html[data-portal-page="account"] h1 { color: #eff9ff; text-shadow: 0 9px 35px #a3d6ff45; }
html[data-portal-page="account"] main > article,
html[data-portal-page="account"] .account-favourites,
html[data-portal-page="account"] .account-activity {
    border-color: #c5e7ff55;
    background: linear-gradient(145deg, #ffffff10, transparent 34%), #17364fc9;
    box-shadow: inset 0 1px #ffffff13, 0 16px 42px #0003;
}
html[data-portal-page="account"] :is(input, textarea, select) { border-color: #b8e1ff57; background: #0d2a42d9; }
html[data-portal-page="account"] .profile-grid > section {
    border-color: var(--glass-edge);
    background: linear-gradient(145deg, #ffffff16, #ffffff04 35%, transparent 60%),
                linear-gradient(135deg, #24506ca8, #132b46cb 57%, #18293edb);
    box-shadow: var(--glass-shine), 0 16px 42px #0003;
    backdrop-filter: blur(16px) saturate(1.25);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
html[data-portal-page="account"] main li { border-color: #b8dfff4d; background: #0d293f; }
html[data-portal-page="account"] .profile-grid label,
html[data-portal-page="account"] .account-activity li p,
html[data-portal-page="account"] .notification p { color: #c4e4f8; }
html[data-portal-page="account"] .top-games b { color: #092a47; background: #a8d9ff; }
html[data-portal-page="account"] main li button:not(.clear) { color: #e8f6ff; background: #244865; }
html[data-portal-page="account"] select,
html[data-portal-page="account"] select option { border-color: #b8dfff69; color: #e8f6ff; background-color: #0d2a42; }
html[data-portal-page="account"] select { background-image: linear-gradient(45deg, transparent 50%, #a8d9ff 50%), linear-gradient(135deg, #a8d9ff 50%, transparent 50%); }
html[data-portal-page="account"] select:hover { background-color: #1b405b; }
html[data-portal-page="account"] .notice { border-color: #b8dfff75; color: #d9f0ff; background: #2b5b7d7a; }

html[data-portal-page="feedback"] main { border-radius: 25px; }
html[data-portal-page="feedback"] :is(input, textarea) { border-color: #b8e1ff57; background: #0d2a42d9; }
html[data-portal-page="feedback"] button { color: #092a47; background: #a8d9ff; }
html[data-portal-page="feedback"] label,
html[data-portal-page="admin"] label { color: #c5e7ff; }

html[data-portal-page="announcements"] main > form textarea { border-color: #b8e1ff57; background: #0d2a42d9; }
html[data-portal-page="admin"] main > article,
html[data-portal-page="admin"] article,
html[data-portal-page="admin"] .grid > article {
    border-color: #b8e1ff4c;
    background: linear-gradient(145deg, #ffffff10, transparent 35%), #17354ac9;
    box-shadow: inset 0 1px #ffffff12, 0 15px 42px #0003;
}

html[data-portal-page="player"] .game-bar {
    border-bottom-color: #b8e1ff57;
    background: linear-gradient(90deg, #173e57, #142c49 60%, #202d4b);
    box-shadow: inset 0 1px #ffffff18;
}
html[data-portal-page="player"] .game-bar .title { color: #eef9ff; letter-spacing: .015em; }
html[data-portal-page="player"] .actions button.primary { border-color: #a8d9ff; color: #092a47; background: #a8d9ff; }

/* Legacy components that use fixed green values need explicit blue surfaces. */
html[data-portal-page="shell"] .browser-tab { color: #c4dced; background: #143047; }
html[data-portal-page="shell"] .browser-tab:hover { color: #f0f9ff; }
html[data-portal-page="shell"] .address-icon,
html[data-portal-page="shell"] #more-menu .menu-label { color: #a9d9f7; }
html[data-portal-page="shell"] #url-input { color: #f0f9ff; }
html[data-portal-page="shell"] #url-input::placeholder { color: #94b7d0; }
html[data-portal-page="shell"] #more-btn[aria-expanded="true"],
html[data-portal-page="shell"] #nav-bar #more-menu button:hover { background: #315a7a; }
html[data-portal-page="shell"] #nav-bar #more-menu button { color: #e9f6ff; }
html[data-portal-page="shell"] #chat-panel {
    border-left-color: #b8dfff42;
    color: #eef9ff;
    background: linear-gradient(175deg, #102b40, #0b2236 75%);
}
html[data-portal-page="shell"] #chat-header,
html[data-portal-page="shell"] #chat-form { border-color: #b8dfff42; background: #17374dbd; }
html[data-portal-page="shell"] #chat-messages { scrollbar-color: #5685a5 #0b2236; }
html[data-portal-page="shell"] #chat-messages::-webkit-scrollbar-track { background: #0b2236; }
html[data-portal-page="shell"] #chat-messages::-webkit-scrollbar-thumb { border-color: #0b2236; background: #5685a5; }
html[data-portal-page="shell"] .chat-content { border-color: #b8dfff42; background: #1a3b54; }
html[data-portal-page="shell"] .own .chat-content { background: #295779; }
html[data-portal-page="shell"] .chat-body { color: #eef9ff; }
html[data-portal-page="shell"] #chat-input { border-color: #b8dfff5c; color: #f0f9ff; background: #0c283d; }
html[data-portal-page="shell"] #send-btn { color: #092a47; background: #a8d9ff; }
html[data-portal-page="shell"] .chat-toast { border-color: #b8dfff75; color: #f0f9ff; background: #193b54; }
html[data-portal-page="shell"] .chat-toast strong { color: #b9e6ff; }
html[data-portal-page="shell"] .chat-toast-close,
html[data-portal-page="shell"] .browser-menu header button,
html[data-portal-page="shell"] .browser-menu-item button { color: #e9f7ff; background: #2a5271; }
html[data-portal-page="shell"] .browser-menu input:not([type="checkbox"]) { border-color: #b8dfff57; background: #0b273c; }
html[data-portal-page="shell"] .browser-menu form button { color: #092a47; background: #a8d9ff; }
html[data-portal-page="shell"] .browser-menu label { color: #d5eafa; }
html[data-portal-page="shell"] .browser-menu-item { border-color: #b8dfff42; }
html[data-portal-page="shell"] .browser-menu.home-position { border-color: #b8dfff85; }

html[data-portal-page="home"] .portal-menu-options a { color: #c1d8e8; }
html[data-portal-page="home"] .portal-menu-options a:hover,
html[data-portal-page="home"] .portal-menu-options a:focus-visible { color: #f0f9ff; background: #b8e4ff1c; }
html[data-portal-page="home"] #home-search:focus-within { border-color: #b8e5ff; box-shadow: 0 0 0 4px #a8d9ff27, 0 18px 45px #0004; }
html[data-portal-page="home"] #home-search button:hover { background: #d1eeff; }
html[data-portal-page="home"] .recent-empty,
html[data-portal-page="home"] .recent-arrow,
html[data-portal-page="home"] .site-footer a { color: #a8cde4; }
html[data-portal-page="home"] #changelog-slot .changelog { scrollbar-color: #6792ae transparent; }
html[data-portal-page="home"] #changelog-slot .changelog::-webkit-scrollbar-thumb { border-color: #17384e; background: #6792ae; }
html[data-portal-page="home"] #changelog-slot .changelog-form {
    border-color: #b8dfff5e;
    background: linear-gradient(145deg, #294c68, #16364e);
}
html[data-portal-page="home"] #changelog-slot .changelog-form textarea,
html[data-portal-page="home"] #changelog-slot .changelog-inline-editor textarea {
    border-color: #b8dfff69;
    color: #f0f9ff;
    background: #0b273c;
}
html[data-portal-page="home"] #changelog-slot .changelog-inline-editor textarea:focus { border-color: #b8e5ff; box-shadow: 0 0 0 3px #a8d9ff27; }
html[data-portal-page="home"] #changelog-slot .changelog-form button,
html[data-portal-page="home"] #changelog-slot .changelog-inline-editor-actions button[type="submit"] { border: 1px solid #d8f2ff; border-radius: 8px; padding: 8px 11px; color: #092a47; background: #a8d9ff; font-weight: 800; cursor: pointer; }
html[data-portal-page="home"] #changelog-slot .changelog-inline-editor-actions button:not([type="submit"]) { border-color: #b8dfff57; color: #e8f6ff; background: #294d69; }
html[data-portal-page="home"] .changelog-dialog { border-color: #c6e7ff73; color: #f0f9ff; background: linear-gradient(145deg, #254660, #102940); }
html[data-portal-page="home"] .changelog-dialog::backdrop { background: #061321cf; }
html[data-portal-page="home"] .changelog-dialog-intro { color: #b8d3e6; }
html[data-portal-page="home"] .changelog-dialog .change { border-color: #b8dfff47; background: #102c45; }
html[data-portal-page="home"] .changelog-dialog-close { color: #092a47; background: #a8d9ff; }
html[data-portal-page="home"] .changelog-dialog-close:hover { background: #d1eeff; }

html[data-portal-page="games"] .favourite-games {
    border-color: #b8dfff69;
    color: #f0f9ff;
    background: linear-gradient(150deg, #ffffff12, transparent 35%), #17374ecf;
    box-shadow: inset 0 1px #ffffff20, 0 16px 42px #0004;
}
html[data-portal-page="games"] .favourite-games .eyebrow { color: #bce6ff; }
html[data-portal-page="games"] .favourite-games > p,
html[data-portal-page="games"] .favourite-games li small { color: #b6ccda; }
html[data-portal-page="games"] .favourite-games li { border-color: #b8dfff4d; background: #0d293f; }
html[data-portal-page="games"] .favourite-rank { color: #092a47; background: #a8d9ff; }
html[data-portal-page="account"] .account-favourites li > span { color: #092a47; background: #a8d9ff; }
html[data-portal-page="account"] .activity-filter,
html[data-portal-page="account"] .account-activity select { border-color: #b8dfff57; color: #f0f9ff; background: #0d2a42; }
html[data-portal-page="account"] .activity-filter-label { color: #c2e4f8; }

html[data-portal-page="admin"] .eyebrow,
html[data-portal-page="admin"] .section-label,
html[data-portal-page="admin"] .views a.active,
html[data-portal-page="admin"] code { color: #bce6ff; }
html[data-portal-page="admin"] .tool-links a,
html[data-portal-page="admin"] .nav-grid a,
html[data-portal-page="admin"] .tabs a {
    border-color: #b8dfff52;
    color: #eaf7ff;
    background: linear-gradient(145deg, #ffffff0d, transparent 45%), #183950;
}
html[data-portal-page="admin"] .card {
    border-color: #b8dfff4c;
    background: linear-gradient(145deg, #ffffff10, transparent 40%), #183950;
    box-shadow: inset 0 1px #ffffff14, 0 10px 28px #0002;
}
html[data-portal-page="admin"] main > section.grid {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-portal-page="admin"] .code-list li {
    border-color: #b8dfff4d;
    background: #0d293f;
}
html[data-portal-page="admin"] .empty {
    border-color: #b8dfff4d;
    color: #b6ccda;
    background: linear-gradient(145deg, #ffffff0d, transparent 42%), #15354b;
}
html[data-portal-page="admin"] .activity-panel .account-favourites {
    border-color: #b8dfff4d;
    color: #eef8ff;
    background: linear-gradient(145deg, #ffffff0d, transparent 45%), #15354b;
}
html[data-portal-page="admin"] .activity-panel .activity-list li {
    border-color: #b8dfff42;
    background: #0d293f;
}
html[data-portal-page="admin"] .activity-panel .activity-heading strong { color: #bce6ff; }
html[data-portal-page="admin"] .activity-panel .activity-list p { color: #c4dced; }
html[data-portal-page="admin"] .activity-panel .activity-filter-label,
html[data-portal-page="admin"] .activity-panel .activity-empty { color: #bfd8e9; }
html[data-portal-page="admin"] .tool-links a:hover,
html[data-portal-page="admin"] .nav-grid a:hover,
html[data-portal-page="admin"] .tabs a:hover { border-color: #c9eaffaa; background-color: #2b5675; }
html[data-portal-page="admin"] .tabs a.active { border-color: #b8e5ff; color: #092a47; background: #a8d9ff; }
html[data-portal-page="admin"] .tool-links span,
html[data-portal-page="admin"] .nav-grid span,
html[data-portal-page="admin"] article p { color: #bfd8e9; }
html[data-portal-page="admin"] .state,
html[data-portal-page="admin"] .state.saved { color: #d7efff; background: #315b7b; }
html[data-portal-page="admin"] .state.dismissed { color: #ffd5dc; background: #633b4d; }
html[data-portal-page="admin"] .actions button,
html[data-portal-page="admin"] button:not(.danger),
html[data-portal-page="admin"] .button:not(.danger),
html[data-portal-page="admin"] .status:not(.warn):not(.bad) { color: #092a47; background: #a8d9ff; }
html[data-portal-page="admin"] .actions button.secondary,
html[data-portal-page="admin"] button.secondary,
html[data-portal-page="admin"] .button.secondary { border: 1px solid #b8dfff5c; color: #e6f5ff; background: #244865; }
html[data-portal-page="admin"] :is(input, textarea, select) { border-color: #b8dfff57; color: #f0f9ff; background: #0c2940; }

html[data-portal-page="announcements"] main > section,
html[data-portal-page="announcements"] main > article,
html[data-portal-page="announcements"] main > form {
    border-color: #b8dfff4c;
    background: linear-gradient(145deg, #ffffff10, transparent 35%), #17354ac9;
}
html[data-portal-page="announcements"] article form {
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
}
html[data-portal-page="announcements"] main button:not(.danger) { color: #092a47; background: #a8d9ff; }
html[data-portal-page="announcements"] article p,
html[data-portal-page="announcements"] .notice { color: #c5e5f8; }

/* The catalogue sidebar needs room outside the grid to remain on screen. */
@media (max-width: 1650px) {
    html[data-portal-page="games"] .favourite-games { position: static; width: auto; margin: 22px 0; }
    html[data-portal-page="games"] .favourite-games ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
}

@media (max-width: 980px) {
    html[data-portal-page="home"] .hero { padding: 26px; }
}
@media (max-width: 700px) {
    html[data-portal-page="home"] .hero { min-height: 0; padding: 22px 17px; border-radius: 22px; }
    html[data-portal-page="games"] .hero { min-height: 205px; padding: 25px; }
    html[data-portal-page="games"] .hero::before { right: -15px; opacity: .10; }
    html[data-portal-page="games"] .game-card { min-height: 188px; }
    html[data-portal-page="games"] .game-art { height: 100px; }
    html[data-portal-page="community"] main > h1 { margin-top: 28px; }
    html[data-portal-page] body::before,
    html[data-portal-page] body::after { opacity: .5; }
}
@media (max-width: 520px) {
    html[data-portal-page="games"] .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    html[data-portal-page="games"] .game-card { min-height: 162px; padding: 8px; }
    html[data-portal-page="games"] .game-art { height: 80px; }
    html[data-portal-page="games"] .game-info strong { font-size: .88rem; }
    html[data-portal-page="games"] .game-count { align-self: flex-start; }
    html[data-portal-page="community"] .community-compose::before { right: -70px; opacity: .08; }
}
@media (max-width: 380px) {
    html[data-portal-page="games"] .games-grid { grid-template-columns: 1fr; }
    html[data-portal-page="games"] .game-card { min-height: 94px; flex-direction: row; align-items: center; }
    html[data-portal-page="games"] .game-art { width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-portal-page] *, html[data-portal-page] *::before, html[data-portal-page] *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Keep changelog controls inside the compact home card, including the admin actions. */
html[data-portal-page="home"] #changelog-slot .change {
    min-width: 0;
    overflow: hidden;
}
html[data-portal-page="home"] #changelog-slot .change footer {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
html[data-portal-page="home"] #changelog-slot .change footer time {
    width: 100%;
    flex: 1 0 100%;
    margin: 0 0 2px;
}
html[data-portal-page="home"] #changelog-slot .change footer .reaction,
html[data-portal-page="home"] #changelog-slot .change footer .change-remove {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    padding: 6px 7px;
    font-size: .72rem;
    white-space: nowrap;
}

/* The full-width portal shell no longer reserves space for Quick Chat. */
html[data-portal-page="shell"] #chat-panel,
html[data-portal-page="shell"] #chat-toggle {
    display: none !important;
}

/* Give the home hero and changelog more room on desktop, with a clear scroll gutter. */
html[data-portal-page="home"] .site-shell {
    width: min(1400px, calc(100% - 68px));
}
html[data-portal-page="home"] .hero {
    min-height: 470px;
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr);
    align-items: stretch;
    gap: clamp(28px, 3vw, 44px);
}
html[data-portal-page="home"] #changelog-slot {
    display: flex;
    min-height: 0;
    align-self: stretch;
}
html[data-portal-page="home"] #changelog-slot .changelog {
    width: 100%;
    height: 410px;
    max-height: 410px;
    padding: 22px 30px 22px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}
html[data-portal-page="home"] #changelog-slot .changelog::-webkit-scrollbar {
    width: 10px;
}
html[data-portal-page="home"] #changelog-slot .changelog::-webkit-scrollbar-track {
    margin-block: 12px;
    border-radius: 999px;
    background: transparent;
}
html[data-portal-page="home"] #changelog-slot .changelog::-webkit-scrollbar-thumb {
    border: 2px solid #17384e;
    border-radius: 999px;
    background: #6792ae;
}
@media (max-width: 980px) {
    html[data-portal-page="home"] .site-shell {
        width: min(calc(100% - 40px), 1180px);
    }
    html[data-portal-page="home"] .hero {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }
    html[data-portal-page="home"] #changelog-slot .changelog {
        height: 340px;
        max-height: 340px;
    }
}
@media (max-width: 520px) {
    html[data-portal-page="home"] #changelog-slot .changelog {
        height: 280px;
        max-height: 280px;
        padding: 18px 24px 18px 18px;
    }
}

/* Keep the destinations visible in the desktop first view while giving updates room. */
html[data-portal-page="home"] main {
    padding-top: 28px;
}
html[data-portal-page="home"] .hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1.3fr) minmax(460px, .95fr);
    gap: clamp(26px, 2.5vw, 40px);
    padding: 26px clamp(24px, 3vw, 40px);
}
html[data-portal-page="home"] h1 {
    max-width: 700px;
    font-size: clamp(3rem, 4.15vw, 5rem);
    line-height: .94;
}
html[data-portal-page="home"] .intro {
    margin: 16px 0 21px;
}
html[data-portal-page="home"] #changelog-slot .changelog {
    height: 440px;
    max-height: 440px;
}
html[data-portal-page="home"] .section-head {
    margin-top: 26px;
}
html[data-portal-page="home"] .destination-card {
    min-height: 150px;
}
@media (max-width: 980px) {
    html[data-portal-page="home"] main {
        padding-top: 12px;
    }
    html[data-portal-page="home"] .hero {
        gap: 24px;
        padding: 26px;
    }
    html[data-portal-page="home"] h1 {
        max-width: 750px;
        font-size: clamp(3.3rem, 6.5vw, 6.7rem);
        line-height: .99;
    }
    html[data-portal-page="home"] #changelog-slot .changelog {
        height: 380px;
        max-height: 380px;
    }
    html[data-portal-page="home"] .section-head {
        margin-top: 32px;
    }
}
@media (max-width: 700px) {
    html[data-portal-page="home"] .hero {
        padding: 22px 17px;
    }
    html[data-portal-page="home"] .destination-card {
        min-height: 105px;
    }
}

/* Let the home destination cards use the open vertical space on desktop. */
@media (min-width: 701px) {
    html[data-portal-page="home"] .destination-card {
        height: clamp(170px, calc(100vh - 760px), 330px);
    }
}

/* Give the taller home destination cards a visual focus between the icon and title. */
html[data-portal-page="home"] .destination-preview {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 8px 0;
    pointer-events: none;
}
html[data-portal-page="home"] .game-preview::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 78px;
    border: 1px solid #b8e5ff36;
    border-radius: 50%;
    transform: rotate(-12deg);
    box-shadow: 0 0 0 14px #b8e5ff08;
}
html[data-portal-page="home"] .game-preview > span {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid #d1edff5c;
    border-radius: 16px;
    color: #e4f6ff;
    background: linear-gradient(145deg, #79c9f255, #315d86aa);
    box-shadow: inset 0 1px #ffffff33, 0 9px 20px #06182d55;
    font-size: 1.45rem;
}
html[data-portal-page="home"] .game-preview > span:first-child { transform: translateY(-7px) rotate(-9deg); }
html[data-portal-page="home"] .game-preview > span:nth-child(2) { transform: translateY(5px); }
html[data-portal-page="home"] .game-preview > span:last-child { transform: translateY(-5px) rotate(8deg); }
html[data-portal-page="home"] .community-preview > span {
    padding: 9px 13px;
    border: 1px solid #b9e5ff58;
    border-radius: 999px;
    color: #e4f6ff;
    background: #173b58c9;
    box-shadow: inset 0 1px #ffffff1b, 0 8px 18px #06182d42;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .12em;
}
html[data-portal-page="home"] .community-preview > span:first-child { transform: translateY(-10px) rotate(-7deg); }
html[data-portal-page="home"] .community-preview > span:nth-child(2) { transform: translateY(8px); }
html[data-portal-page="home"] .community-preview > span:last-child { transform: translateY(-7px) rotate(6deg); }
html[data-portal-page="home"] .chat-preview {
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
html[data-portal-page="home"] .chat-preview > span {
    position: relative;
    width: min(62%, 270px);
    height: 26px;
    border: 1px solid #b9e5ff55;
    border-radius: 12px 12px 12px 4px;
    background: linear-gradient(90deg, #b8e5ff2c 0 12%, #244c6a 12% 100%);
    box-shadow: inset 0 1px #ffffff18, 0 7px 16px #06182d38;
}
html[data-portal-page="home"] .chat-preview > span:nth-child(2) {
    align-self: flex-end;
    border-radius: 12px 12px 4px 12px;
    background: linear-gradient(90deg, #315f83 0 100%);
}
html[data-portal-page="home"] .chat-preview > span:last-child { width: min(48%, 205px); }
html[data-portal-page="home"] .chat-preview > span::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d8f1ff;
    box-shadow: 8px 0 #d8f1ff, 16px 0 #d8f1ff;
    opacity: .8;
}
@media (max-width: 700px) {
    html[data-portal-page="home"] .destination-preview { display: none; }
}

/* Make the changelog scrollbar easy to see and keep content clear of its gutter. */
html[data-portal-page="home"] #changelog-slot .changelog {
    padding-right: 36px;
    scrollbar-color: #a8d9ff #102d45;
    scrollbar-width: auto;
}
html[data-portal-page="home"] #changelog-slot .changelog::-webkit-scrollbar {
    width: 14px;
}
html[data-portal-page="home"] #changelog-slot .changelog::-webkit-scrollbar-track {
    margin-block: 12px;
    border: 1px solid #b8dfff42;
    border-radius: 999px;
    background: #102d45;
}
html[data-portal-page="home"] #changelog-slot .changelog::-webkit-scrollbar-thumb {
    min-height: 36px;
    border: 3px solid #102d45;
    border-radius: 999px;
    background: linear-gradient(180deg, #c7ebff, #78b8e3);
}
html[data-portal-page="home"] #changelog-slot .changelog::-webkit-scrollbar-thumb:hover {
    background: #e0f4ff;
}

/* Give the three home destinations distinct blue surfaces without the shared corner square. */
html[data-portal-page="home"] .destination-card::before {
    display: none;
}
html[data-portal-page="home"] .destinations > .destination-card:nth-child(1) {
    background: radial-gradient(circle at 84% 20%, #58d7f226, transparent 42%),
                linear-gradient(145deg, #1d536d, #112b45 78%);
}
html[data-portal-page="home"] .destinations > .destination-card:nth-child(2) {
    background: radial-gradient(circle at 18% 22%, #a894f52b, transparent 44%),
                linear-gradient(145deg, #3a4775, #1a2c4b 78%);
}
html[data-portal-page="home"] .destinations > .destination-card:nth-child(3) {
    background: radial-gradient(circle at 82% 78%, #61c6dd26, transparent 46%),
                linear-gradient(145deg, #28566b, #142740 78%);
}

/* Keep the home changelog scrollbar inset from the rounded outer frame. */
html[data-portal-page="home"] #changelog-slot .changelog-frame {
    display: flex;
    min-height: 0;
    overflow: hidden;
    padding: 10px;
}
html[data-portal-page="home"] #changelog-slot .changelog-scroll {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 20px 12px 10px;
    border-radius: 13px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: #a8d9ff #102d45;
    scrollbar-width: auto;
}
html[data-portal-page="home"] #changelog-slot .changelog-scroll::-webkit-scrollbar {
    width: 14px;
}
html[data-portal-page="home"] #changelog-slot .changelog-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #102d45;
}
html[data-portal-page="home"] #changelog-slot .changelog-scroll::-webkit-scrollbar-thumb {
    min-height: 36px;
    border: 3px solid #102d45;
    border-radius: 999px;
    background: linear-gradient(180deg, #c7ebff, #78b8e3);
}
html[data-portal-page="home"] #changelog-slot .changelog-scroll::-webkit-scrollbar-thumb:hover {
    background: #e0f4ff;
}

/* Large clipped bands and fine outlines echo the login screen geometry. */
html[data-portal-page="home"] .destination-shapes {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}
html[data-portal-page="home"] .destination-card > :not(.destination-shapes) {
    position: relative;
    z-index: 1;
}
html[data-portal-page="home"] .destination-shapes .shape-halo,
html[data-portal-page="home"] .destination-shapes .shape-band,
html[data-portal-page="home"] .destination-shapes .shape-line {
    fill: none;
    stroke: #c1ecff;
}
html[data-portal-page="home"] .destination-shapes .shape-halo {
    stroke-width: 130px;
    stroke-opacity: .035;
}
html[data-portal-page="home"] .destination-shapes .shape-band {
    stroke-width: 50px;
    stroke-opacity: .075;
}
html[data-portal-page="home"] .destination-shapes .shape-line {
    stroke-width: 1px;
    stroke-opacity: .32;
}
html[data-portal-page="home"] .shapes-triangles .shape-halo {
    stroke-width: 80px;
}
html[data-portal-page="home"] .shapes-triangles .shape-band {
    stroke-width: 32px;
}
html[data-portal-page="home"] .game-preview::before { display: none; }

/* Soften the changelog viewport edges when a card is scrolled mid-entry. */
html[data-portal-page="home"] #changelog-slot .changelog-scroll {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

/* Keep the portal's colour field calm behind the glass panels. */
html[data-portal-page]:not([data-portal-page="shell"]):not([data-portal-page="player"]) body {
    background:
        radial-gradient(circle at 18% 15%, #3699d36b, transparent 36rem),
        radial-gradient(circle at 85% 80%, #8877d64a, transparent 40rem),
        radial-gradient(circle at 86% 4%, #4388ca55, transparent 32rem),
        #0e2433;
    background-attachment: fixed;
}
html[data-portal-page]:not([data-portal-page="shell"]):not([data-portal-page="player"]) body::before {
    display: none;
}
html[data-portal-page]:not([data-portal-page="shell"]):not([data-portal-page="player"]) body::after {
    display: none;
}

/* Keep the headline's final word clear of the hero edge at every width. */
html[data-portal-page="home"] h1 em {
    display: block;
}

/* Give the oversized home headline a little room at narrow viewport widths. */
@media (max-width: 760px) {
    html[data-portal-page="home"] h1 {
        max-width: 100%;
        padding-right: .1em;
        font-size: clamp(2.45rem, 7.2vw, 3.5rem);
        line-height: 1;
    }
}

/* A light rim and soft colour shift make the large panels read as glass. */
html[data-portal-page="home"] .hero,
html[data-portal-page="games"] .hero,
html[data-portal-page="welcome"] .card,
html[data-portal-page="feedback"] main,
html[data-portal-page="community"] .community-compose,
html[data-portal-page="chat"] .shell,
html[data-portal-page="account"] main > section,
html[data-portal-page="account"] main > .card,
html[data-portal-page="announcements"] main > section,
html[data-portal-page="announcements"] main > article,
html[data-portal-page="admin"] main > section:not(.grid),
html[data-portal-page="admin"] main > article,
html[data-portal-page="admin"] .dashboard-section {
    border-color: #d9f1ff82;
    background:
        radial-gradient(ellipse 95% 68% at -8% -28%, #e0f6ff2b, transparent 65%),
        radial-gradient(ellipse 76% 83% at 110% 114%, #a0b8ff1c, transparent 72%),
        linear-gradient(118deg, #ffffff1d 0%, #ffffff03 24%, #c5edff0d 37%, transparent 54%, #d0e6ff0b 76%, #ffffff12 100%),
        linear-gradient(145deg, #24566faa, #14354fa0 57%, #192e4caf);
    box-shadow:
        inset 0 1px #ffffff68,
        inset 1px 0 #d2efff23,
        inset -1px 0 #9cc9ff1a,
        inset 0 -1px #9bc9ff22,
        0 26px 70px #0008,
        0 8px 28px #75bfff13;
    backdrop-filter: blur(22px) saturate(1.45) contrast(1.05);
    -webkit-backdrop-filter: blur(22px) saturate(1.45) contrast(1.05);
}

/* Home tiles keep their own colours while showing the brighter backdrop. */
html[data-portal-page="home"] .destination-card {
    border-color: #d7efff83;
    box-shadow: inset 0 1px #ffffff65, inset 1px 0 #d2f0ff26,
                inset 0 -1px #88bfff20, 0 18px 40px #0005;
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
}
html[data-portal-page="home"] .destinations > .destination-card:nth-child(1) {
    background: radial-gradient(ellipse at 8% 0%, #b6efff25, transparent 53%),
                linear-gradient(125deg, #ffffff16, transparent 38%, #9cd8ff0d 78%),
                linear-gradient(145deg, #1b5e79b8, #102d4cbc 78%);
}
html[data-portal-page="home"] .destinations > .destination-card:nth-child(2) {
    background: radial-gradient(ellipse at 3% 0%, #c8c7ff2a, transparent 56%),
                linear-gradient(125deg, #ffffff14, transparent 41%, #ada7ff0d 80%),
                linear-gradient(145deg, #3d4b84b3, #1b2d52bb 78%);
}
html[data-portal-page="home"] .destinations > .destination-card:nth-child(3) {
    background: radial-gradient(ellipse at 8% 0%, #b7f0ff24, transparent 56%),
                linear-gradient(125deg, #ffffff14, transparent 41%, #8de5ec0d 80%),
                linear-gradient(145deg, #245b70b4, #142c49bc 78%);
}
html[data-portal-page="home"] #changelog-slot .changelog,
html[data-portal-page="home"] .surface,
html[data-portal-page="games"] .favourite-games,
html[data-portal-page="community"] #requests > .card,
html[data-portal-page="account"] :is(main > article, .profile-grid > section),
html[data-portal-page="admin"] :is(main > article, article, .card) {
    border-color: #cceaff6b;
    background: radial-gradient(ellipse 95% 60% at 0% 0%, #c7eeff1d, transparent 72%),
                linear-gradient(130deg, #ffffff12, transparent 32%, #a9d9ff0a 75%),
                #143752b9;
    box-shadow: inset 0 1px #ffffff43, inset 1px 0 #d1eeff19,
                inset 0 -1px #9acfff1a, 0 18px 45px #0004;
}
html[data-portal-page="home"] #changelog-slot .changelog,
html[data-portal-page="home"] .surface,
html[data-portal-page="community"] #requests > .card,
html[data-portal-page="account"] .profile-grid > section {
    backdrop-filter: blur(14px) saturate(1.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
}

/* Catalogue cards get a glass highlight without blurring hundreds of tiles. */
html[data-portal-page="games"] .game-card {
    border-color: #cceaff69;
    background: radial-gradient(ellipse at 8% 0%, #d0f1ff1e, transparent 55%),
                linear-gradient(135deg, #ffffff19, transparent 37%, #a6cfff0c 80%),
                linear-gradient(145deg, #25587ba8, #152d4aba);
    box-shadow: inset 0 1px #ffffff58, inset 1px 0 #d9f2ff18,
                0 12px 30px #0004;
}
@media (max-width: 700px) {
    html[data-portal-page="home"] .hero,
    html[data-portal-page="games"] .hero,
    html[data-portal-page="welcome"] .card,
    html[data-portal-page="home"] .destination-card {
        backdrop-filter: blur(14px) saturate(1.35);
        -webkit-backdrop-filter: blur(14px) saturate(1.35);
    }
}