:root {
    --bb-blue: #285b8f;
    --bb-blue-dark: #163c67;
    --bb-blue-deep: #0c294a;
    --bb-sky: #dcecf8;
    --bb-line: #b5c6d4;
    --bb-paper: #f8fbfd;
    --bb-paper-2: #eef5fa;
    --bb-text: #35404b;
    --bb-muted: #748494;
    --bb-gold: #d5a247;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.bakbakan-portal-body {
    min-width: 320px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--bb-text);
    background:
        linear-gradient(rgba(238,246,251,.96), rgba(222,235,244,.96)),
        repeating-linear-gradient(45deg, #eef4f8 0, #eef4f8 2px, #e5eef4 2px, #e5eef4 4px);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}
a { color: #245f99; text-decoration: none; }
a:hover { color: #153e68; text-decoration: underline; }
.portal-width { width: min(1000px, calc(100% - 28px)); margin: 0 auto; }
.portal-topline { background: #0d2c4c; color: #d7e6f3; border-bottom: 1px solid #071c31; font-size: 11px; letter-spacing: .04em; }
.portal-topline .portal-width { min-height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.portal-topline-separator { opacity: .55; }
.portal-hero {
    position: relative;
    overflow: hidden;
    height: 205px;
    background:
        radial-gradient(circle at 76% 42%, rgba(255,255,255,.82) 0 4%, rgba(255,255,255,0) 29%),
        radial-gradient(ellipse at 83% 100%, rgba(184,143,90,.32) 0 18%, transparent 19%),
        radial-gradient(ellipse at 69% 100%, rgba(146,113,78,.2) 0 23%, transparent 24%),
        linear-gradient(180deg, #8dc2e5 0%, #dceef9 56%, #f1e7d7 100%);
    border-bottom: 1px solid #7f9db6;
}
.portal-hero:before, .portal-hero:after { content:""; position:absolute; bottom:-25px; width:420px; height:100px; border-radius:50%; background:rgba(113,128,114,.17); filter:blur(1px); }
.portal-hero:before { right: 80px; transform: rotate(-7deg); }
.portal-hero:after { right: -180px; background:rgba(141,105,75,.16); transform:rotate(4deg); }
.portal-hero-inner { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 42px; }
.portal-brand { display: inline-flex; width: fit-content; flex-direction: column; justify-self: start; text-decoration: none !important; color: #17395c; text-shadow: 0 1px 0 rgba(255,255,255,.85); }
.portal-brand-small { font-size: 13px; letter-spacing: .36em; margin-left: 6px; }
.portal-brand-main { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 53px; line-height: .92; letter-spacing: -.045em; color:#1d4e7c; }
.portal-brand-sub { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(30,77,120,.32); font-size: 11px; letter-spacing: .21em; text-align: center; }
.portal-hero-copy { justify-self: end; width: min(100%, 365px); padding: 17px 0 15px 0; text-align: right; color: #254c6e; border-left: 0; text-shadow: 0 1px rgba(255,255,255,.8); }
.portal-hero-copy strong { display:block; font-family: Georgia, serif; font-size: 22px; line-height:1.18; color:#173b5e; }
.portal-hero-copy span { display:block; }
.portal-hero-eyebrow { margin-bottom:5px; color:#6d8aa2; font-size:9px; font-weight:bold; letter-spacing:.20em; }
.portal-hero-meta { margin-top:7px; font-size:11px; letter-spacing:.035em; }
.portal-nav { background: linear-gradient(#477ca8, #265b87 52%, #1d4c77 53%, #1a4269); border-top: 1px solid #6f9fc4; border-bottom: 3px solid #cfdae4; box-shadow: 0 2px 6px rgba(16,43,69,.24); }
.portal-nav-inner { display:flex; align-items:stretch; }
.portal-nav a { flex: 1 1 auto; min-width: 0; color:#fff; text-align:center; padding: 12px 9px 11px; font-size:11px; font-weight:bold; letter-spacing:.05em; text-shadow:0 -1px rgba(0,0,0,.25); border-left:1px solid rgba(255,255,255,.13); border-right:1px solid rgba(0,0,0,.14); text-decoration:none; }
.portal-nav a:hover { background: linear-gradient(#5a8eb8,#346d9c); text-decoration:none; }
.portal-layout { flex: 1 0 auto; display:grid; grid-template-columns: 210px minmax(0,1fr); gap: 18px; align-items:start; padding: 20px 0 34px; }
.portal-sidebar { display:flex; flex-direction:column; gap:12px; }
.portal-sidebox { border:1px solid #aebfce; background:#f6fafc; box-shadow:0 1px 3px rgba(27,54,78,.12); }
.portal-sidebox h2 { margin:0; padding:8px 10px; background:linear-gradient(#f8fbfd,#dbe8f1); border-bottom:1px solid #b7c8d5; color:#2c5d88; font-size:12px; letter-spacing:.08em; }
.portal-sidebox-body { padding:11px; }
.portal-login-mini { display:grid; gap:7px; }
.portal-login-mini input, .portal-login-mini select { width:100%; height:30px; padding:5px 8px; border:1px solid #b8c7d3; background:#fff; color:#35404b; }
.portal-login-mini button { height:31px; border:1px solid #1e4e78; background:linear-gradient(#4b84b3,#255e8e); color:#fff; font-weight:bold; cursor:pointer; }
.portal-member-links { display:flex; flex-wrap:wrap; gap:3px 8px; margin-top:9px; font-size:11px; }
.portal-side-link { display:block; padding:6px 7px; border-bottom:1px dotted #c4d0d9; }
.portal-welcome { margin:0 0 8px; }
.portal-quicklinks { padding:0; }
.portal-quicklinks a { display:flex; gap:9px; align-items:center; padding:9px 10px; border-bottom:1px solid #d6e0e7; color:#44515d; text-decoration:none; }
.portal-quicklinks a:hover { background:#edf5fa; color:#204f7b; }
.portal-quicklinks a:last-child { border-bottom:0; }
.portal-quicklinks span { display:inline-grid; place-items:center; width:25px; height:20px; background:#d8e8f3; border:1px solid #bdd0df; color:#35688f; font-size:9px; font-weight:bold; }
.portal-server-card dl { margin:0; }
.portal-server-card dl div { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dotted #ced8df; }
.portal-server-card dl div:last-child { border-bottom:0; }
.portal-server-card dt { color:#6d7d89; }.portal-server-card dd { margin:0; font-weight:bold; color:#275b87; }
.portal-admin-links a { display:block; padding:4px 0; font-size:11px; }
.portal-main { min-width:0; background:rgba(255,255,255,.75); border:1px solid #c2d0da; padding:18px; box-shadow:0 2px 7px rgba(34,56,76,.10); }
.portal-message, p.message { margin:0 0 14px; padding:10px 12px; background:#fff9d9; border:1px solid #e5d68f; color:#66531a; }
.portal-kicker { display:block; color:#5f83a0; font-size:10px; font-weight:bold; letter-spacing:.14em; text-transform:uppercase; }
.portal-page-heading { padding:3px 4px 13px; margin-bottom:16px; border-bottom:1px solid #cedae3; }
.portal-page-heading h1, .portal-home-intro h1 { margin:4px 0 5px; color:#255985; font:700 27px/1.15 Georgia, 'Times New Roman', serif; }
.portal-page-heading p { margin:0; color:#70808d; }
.portal-home-intro { position:relative; padding:22px; margin:-4px -4px 18px; overflow:hidden; border:1px solid #b7c8d5; background:linear-gradient(135deg,#f8fbfd 0,#eaf3f8 62%,#f7eee2 100%); }
.portal-home-intro:after { content:""; position:absolute; right:-40px; bottom:-65px; width:250px; height:150px; border-radius:50%; background:rgba(82,124,156,.08); }
.portal-home-intro p { max-width:620px; margin:0; color:#61717e; }
.portal-home-actions { display:flex; gap:9px; margin-top:15px; position:relative; z-index:1; }
.portal-button { display:inline-block; padding:8px 15px; border:1px solid #9eb3c2; background:linear-gradient(#fff,#e6edf2); color:#355b79 !important; font-weight:bold; text-decoration:none !important; border-radius:2px; }
.portal-button:hover { background:#fff; }
.portal-button-primary { border-color:#1d527d; background:linear-gradient(#5388b2,#2a6798); color:#fff !important; text-shadow:0 -1px rgba(0,0,0,.2); }
.portal-button-primary:hover { background:linear-gradient(#6294bc,#356f9f); }
.portal-button-disabled { opacity:.55; cursor:default; }.portal-button-block { display:block; text-align:center; }
.portal-home-columns { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.portal-board { border:1px solid #b8c8d4; background:#fff; }
.portal-board-title { display:flex; align-items:center; justify-content:space-between; min-height:37px; padding:0 11px; background:linear-gradient(#f8fbfd,#e0ebf3); border-bottom:1px solid #c0ced9; }
.portal-board-title h2 { margin:0; color:#2a5f8b; font-size:13px; letter-spacing:.08em; }.portal-board-title span,.portal-board-title a{font-size:10px;color:#83919c;}
.portal-notice-list,.portal-news-list { list-style:none; margin:0; padding:0; }
.portal-notice-list li,.portal-news-list li { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; min-height:37px; padding:7px 10px; border-bottom:1px dotted #d6dee4; }
.portal-notice-list li:last-child,.portal-news-list li:last-child{border-bottom:0;}
.portal-notice-list strong{font-size:9px;color:#b16b3f;}.portal-notice-list span,.portal-news-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.portal-notice-list time,.portal-news-list time{font-size:9px;color:#94a0a8;white-space:nowrap;}
.portal-empty-news { padding:18px 12px; color:#7a8892; }.portal-empty-news strong,.portal-empty-news span{display:block;}.portal-empty-news strong{color:#4b657a;margin-bottom:4px;}
.portal-feature-band { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:16px; border:1px solid #bbcbd6; background:#bbcbd6; }
.portal-feature-band div { padding:13px; background:#eef5f9; }.portal-feature-band strong{display:block;color:#285d88;font-size:11px;}.portal-feature-band span{display:block;margin-top:3px;color:#7a8893;font-size:10px;}
.portal-card { padding:16px; margin:0 0 14px; border:1px solid #c4d2dc; background:#f9fbfc; }.portal-card h2{margin:0 0 8px;color:#2b5e88;font:700 18px Georgia,serif;}.portal-card p:last-child{margin-bottom:0;}
.portal-callout { text-align:center; padding:28px 20px; background:linear-gradient(#fbfdfe,#edf4f8); }
.portal-info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }.portal-info-grid .portal-card{margin:0;}.portal-info-grid strong,.portal-info-grid span{display:block;}.portal-info-grid strong{font-size:10px;color:#83919d;text-transform:uppercase;letter-spacing:.08em;}.portal-info-grid span{margin-top:4px;color:#285d88;font-weight:bold;}
.portal-feature-list { margin:0; padding-left:18px; }.portal-feature-list li{margin:4px 0;}
.portal-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.portal-action-card{padding:22px;border:1px solid #b9cad6;background:linear-gradient(#fff,#edf4f8);text-decoration:none!important;}.portal-action-card strong,.portal-action-card span{display:block;}.portal-action-card strong{font:700 20px Georgia,serif;color:#2a5f89;}.portal-action-card span{margin-top:4px;color:#7c8b96;}.portal-action-card.is-disabled{opacity:.65;pointer-events:none;}
.portal-error, p.red { padding:9px 11px; background:#fff1ef; border:1px solid #e8b8b2; color:#a04237; font-weight:bold; }
.portal-form { max-width:720px; }.generic-form-table{width:100%!important;border-collapse:collapse;}.generic-form-table th{width:180px;text-align:right;vertical-align:top;padding:8px 12px 8px 0!important;color:#536777!important;background:transparent!important;border:0!important;}.generic-form-table td{padding:6px!important;background:transparent!important;border:0!important;}.generic-form-table input[type=text],.generic-form-table input[type=password],.generic-form-table input[type=email],.generic-form-table select{width:min(100%,340px);min-height:32px;padding:6px 8px;border:1px solid #b7c6d1;background:#fff;color:#33424e;}.generic-form-table input[type=submit],.generic-form-table button{min-height:32px;padding:6px 14px;cursor:pointer;}
.portal-account-links { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 3px; padding-top:12px; border-top:1px dotted #cbd6de; }
#submenu,#pagemenu { margin:0 0 14px!important; }.sub-menu,.page-menu{margin-top:0!important;}
.portal-footer { border-top:3px solid #c7d4de; background:#183c5f; color:#bdcfdd; }.portal-footer-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px;}.portal-footer strong,.portal-footer span{display:block;}.portal-footer strong{color:#fff;letter-spacing:.08em;}.portal-footer span{margin-top:4px;font-size:11px;}.portal-footer-right{display:flex;gap:15px;}.portal-footer a{color:#d9e8f3;}.portal-flux-credit{text-align:center;padding:7px;background:#102e4b;color:#7895aa;font-size:10px;}
@media (max-width: 800px){.portal-hero{height:170px}.portal-brand-main{font-size:43px}.portal-hero-copy{display:none}.portal-nav-inner{flex-wrap:wrap}.portal-nav a{flex:1 1 33.333%;}.portal-layout{grid-template-columns:1fr}.portal-sidebar{display:grid;grid-template-columns:1fr 1fr}.portal-main{grid-row:1}.portal-home-columns{grid-template-columns:1fr}.portal-info-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.portal-width{width:min(100% - 18px,1000px)}.portal-topline .portal-width{justify-content:center;text-align:center}.portal-hero{height:145px}.portal-brand-main{font-size:37px}.portal-brand-small{font-size:10px}.portal-brand-sub{font-size:9px}.portal-nav a{flex:1 1 50%;padding:10px 5px;font-size:10px}.portal-layout{padding-top:10px}.portal-sidebar{grid-template-columns:1fr}.portal-main{padding:12px}.portal-feature-band,.portal-action-grid,.portal-info-grid{grid-template-columns:1fr}.portal-footer-inner{padding:18px 0;align-items:flex-start;flex-direction:column}.generic-form-table,.generic-form-table tbody,.generic-form-table tr,.generic-form-table th,.generic-form-table td{display:block;width:100%!important;text-align:left}.generic-form-table th{padding:8px 6px 2px!important}.generic-form-table td{padding:2px 6px 7px!important}}

/* Bakbakan homepage showcase refresh */
.portal-quicklinks a { gap:0; }
.portal-quicklinks span { display:none; }

/* Compact, clean screenshot carousel */
.portal-showcase {
    width: min(100%, 700px);
    margin: 16px auto 2px;
    background: #f9fbfd;
    border-color: #afc2d0;
    box-shadow: 0 2px 7px rgba(24,57,84,.11);
}
.portal-showcase .portal-board-title {
    min-height: 34px;
    padding: 0 10px;
}
.portal-showcase .portal-board-title h2 {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
}
.portal-showcase .portal-board-title h2:before {
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#2e5f8a;
    box-shadow:0 0 0 2px #dce8f1;
}
.portal-showcase .portal-board-title span {
    color:#8a98a3;
    font-size:9px;
}
.portal-showcase-frame {
    padding: 9px;
    background: linear-gradient(#fbfdfe, #eef5fa);
    border-bottom: 1px solid #d2dee7;
}
.portal-showcase-stage {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid #91a9bb;
    background: #0f2538;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 1px 4px rgba(24,57,84,.14);
}
.portal-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s ease;
}
.portal-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.portal-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0f2538;
}
.portal-slide-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 14px 11px;
    color: #fff;
    background: linear-gradient(transparent, rgba(7,26,42,.88));
    text-shadow: 0 1px 2px rgba(0,0,0,.75);
}
.portal-slide-caption strong {
    display: block;
    font: 700 17px Georgia, 'Times New Roman', serif;
    letter-spacing:.01em;
}
.portal-slide-caption span {
    display: block;
    margin-top: 1px;
    font-size: 9px;
    color: #dce9f2;
}
.portal-slide-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.32);
    background: rgba(10,38,61,.50);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: .62;
    transition: opacity .2s ease, background .2s ease;
}
.portal-showcase-stage:hover .portal-slide-arrow { opacity:.82; }
.portal-slide-arrow:hover { opacity:1 !important; background:rgba(20,68,103,.86); }
.portal-slide-prev { left: 8px; }
.portal-slide-next { right: 8px; }
.portal-slide-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 9px 0 10px;
    background:#f8fbfd;
}
.portal-slide-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid #7793a9;
    border-radius: 50%;
    background: #dce6ed;
    cursor: pointer;
}
.portal-slide-dots button.is-active {
    background: #2c638f;
    border-color: #1e4d73;
    box-shadow:0 0 0 2px #e3edf4;
}

/* Slim classic portal footer, anchored at the bottom on short pages */
.portal-footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid #9fb7c9;
    background: linear-gradient(#eef4f8, #dce8f0);
    box-shadow: inset 0 1px #fff;
}
.portal-footer-copyright {
    width: min(1000px, calc(100% - 28px));
    min-height: 38px;
    padding: 7px 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    background: linear-gradient(#285b87, #193f64);
    border: 1px solid #163b5e;
    border-bottom: 0;
    color: #dce8f2;
    font-size: 9px;
    box-shadow: inset 0 1px rgba(255,255,255,.16);
}
.portal-footer-copyright span { color:#eef5fa; margin:0; }
.portal-footer-copyright small { color:#9eb8cc; font-size:9px; margin:0; }
.portal-footer-copyright small:before { content:"•"; margin-right:8px; color:#6f91aa; }
.portal-footer-copyright a { color:#c6d8e6; }

@media (max-width: 800px) {
    .portal-hero-inner { grid-template-columns: 1fr; }
    .portal-hero-copy { display:none; }
    .portal-brand { justify-self:center; }
    .portal-showcase { width:min(100%, 660px); }
}
@media (max-width: 560px) {
    .portal-showcase { width:100%; }
    .portal-showcase-frame { padding:6px; }
    .portal-slide-caption { padding:26px 10px 8px; }
    .portal-slide-caption strong { font-size:15px; }
    .portal-slide-caption span { font-size:9px; }
    .portal-slide-arrow { width:28px; height:42px; font-size:17px; }
    .portal-footer { padding-top:4px; }
    .portal-footer-copyright {
        width:calc(100% - 18px);
        min-height:42px;
        padding:8px 10px;
        flex-direction:column;
        gap:1px;
    }
    .portal-footer-copyright small:before { content:""; margin:0; }
}

/* V5: simplified full-width content + reliable responsive carousel */
.portal-layout.portal-layout-full {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1000px;
}
.portal-layout.portal-layout-full .portal-main {
    width: 100%;
    max-width: 100%;
}
.portal-admin-sidebar { width:210px; }

.portal-showcase {
    width: min(100%, 680px);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.portal-showcase-frame {
    width: 100%;
    overflow: hidden;
}
.portal-showcase-stage {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 0;
    height: auto;
}
.portal-slide,
.portal-slide img {
    max-width: 100%;
}
.portal-slide img {
    object-fit: contain;
}

@media (max-width: 800px) {
    .portal-layout.portal-layout-full { grid-template-columns: 1fr; }
    .portal-showcase { width: min(100%, 650px); max-width: 650px; }
}
@media (max-width: 560px) {
    .portal-showcase { width: 100%; max-width: 100%; }
}

/* V6: guaranteed automatic slideshow fallback.
   CSS handles auto-slide even if inline/external JS is blocked; JS enhances arrows/dots. */
.portal-showcase:not(.js-ready) .portal-slide {
    opacity: 0;
    visibility: visible;
    z-index: 1;
    animation: bakbakanAutoSlide 13.5s infinite;
}
.portal-showcase:not(.js-ready) .portal-slide:nth-of-type(1) { animation-delay: 0s; }
.portal-showcase:not(.js-ready) .portal-slide:nth-of-type(2) { animation-delay: 4.5s; }
.portal-showcase:not(.js-ready) .portal-slide:nth-of-type(3) { animation-delay: 9s; }

@keyframes bakbakanAutoSlide {
    0%, 28% { opacity: 1; }
    33%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

.portal-showcase.js-ready .portal-slide {
    animation: none !important;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
}
.portal-showcase.js-ready .portal-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* V9 logged-in account status */
.portal-login-status {
    margin-top: 16px;
    position: relative;
    top: 9px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}
.portal-welcome-user {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #244e72;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: nowrap;
}
.portal-welcome-user strong { color: #173b5e; font-size: 13px; }
.portal-login-actions { display: flex; gap: 5px; flex: 0 0 auto; }
.portal-login-actions a {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid #285b84;
    background: linear-gradient(#4f82aa, #275c88);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0,0,0,.2);
    border-radius: 2px;
    white-space: nowrap;
}
.portal-login-actions a:hover { background: linear-gradient(#5d91ba, #326c9b); text-decoration: none; }
@media (max-width: 800px) {
    .portal-login-status { display: none; }
}


/* V12 hero/nav cleanup */
.portal-topline { display: none !important; }
.portal-episode-label {
    display: block;
    margin: 0 0 6px;
    color: #5c7f9b;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: none;
    white-space: nowrap;
}
.portal-nav {
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
}
.portal-nav-inner {
    background: linear-gradient(#477ca8, #265b87 52%, #1d4c77 53%, #1a4269);
    border-top: 1px solid #6f9fc4;
    border-bottom: 3px solid #cfdae4;
    box-shadow: 0 2px 6px rgba(16,43,69,.24);
}
@media (max-width: 800px) {
    .portal-episode-label { display: none; }
}


/* V13 cleaner full-width edges + episode label under brand */
.portal-hero {
    border-bottom: 0 !important;
}
.portal-brand-episode {
    display: block;
    margin-top: 5px;
    color: #4f7593;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.25;
    letter-spacing: .045em;
    text-align: center;
    white-space: nowrap;
}
.portal-episode-label { display: none !important; }
.portal-footer {
    border-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
}
.portal-footer-copyright {
    border-top: 0 !important;
}
@media (max-width: 800px) {
    .portal-brand-episode {
        margin-top: 5px;
        font-size: 9px;
        white-space: normal;
    }
}
@media (max-width: 560px) {
    .portal-brand-episode { font-size: 8px; }
}


/* V14: Demise of Morroc visual test */
body.bakbakan-portal-body {
    background:
        linear-gradient(rgba(240, 245, 249, .88), rgba(223, 234, 242, .92)),
        url('../images/design/morroc-parchment-bg.png') center top / cover no-repeat fixed;
}
.portal-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.portal-hero {
    height: 255px;
    background:
        linear-gradient(90deg, rgba(11,16,22,.20) 0%, rgba(13,18,26,.18) 44%, rgba(20,12,14,.32) 100%),
        linear-gradient(180deg, rgba(250,242,227,.12) 0%, rgba(9,14,23,.06) 64%, rgba(18,15,20,.18) 100%),
        url('../images/design/morroc-hero-banner.png') center center / cover no-repeat;
    border-bottom: 1px solid #6e8091;
    box-shadow: inset 0 -26px 36px rgba(0,0,0,.08);
}
.portal-hero:before, .portal-hero:after { display:none; }
.portal-hero-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    min-height: 255px;
    align-items: center;
    gap: 18px;
}
.portal-brand { text-decoration:none !important; }
.portal-brand.portal-brand-image {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    max-width: 600px;
    padding-top: 14px;
}
.portal-brand.portal-brand-image img {
    display:block;
    width: min(100%, 600px);
    height:auto;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.portal-hero-copy {
    align-self:center;
    justify-self:end;
    text-align:right;
    max-width: 385px;
    padding: 16px 0 0;
}
.portal-hero-copy strong {
    color:#fff8ef;
    text-shadow: 0 2px 10px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.5);
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: .03em;
}
.portal-hero-meta {
    margin-top: 8px;
    color: #f6dfca;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
    font-weight: bold;
    letter-spacing: .03em;
}
.portal-login-status {
    margin-top: 18px;
    align-items:flex-end;
}
.portal-welcome-user {
    color:#fff6ea;
    text-shadow:0 1px 5px rgba(0,0,0,.45);
    font-size:13px;
}
.portal-welcome-user strong {
    display:inline;
    font-size:19px;
    line-height:1.1;
    color:#fff3dc;
}
.portal-login-actions a {
    background: linear-gradient(#335f8a, #1d4467);
    border-color:#153b60;
    box-shadow: inset 0 1px rgba(255,255,255,.18);
}
.portal-nav {
    margin-top: -14px;
}
.portal-main {
    background:
        linear-gradient(rgba(249,251,252,.95), rgba(249,251,252,.95)),
        url('../images/design/morroc-parchment-bg.png') center top / cover no-repeat;
}
@media (max-width: 980px) {
    .portal-hero { height: 230px; }
    .portal-hero-inner { min-height: 230px; grid-template-columns: minmax(0,1fr) minmax(280px,.9fr); }
    .portal-brand.portal-brand-image img { width: min(100%, 520px); }
    .portal-hero-copy strong { font-size: 24px; }
}
@media (max-width: 800px) {
    .portal-hero { height: 180px; }
    .portal-hero-inner { grid-template-columns: 1fr; min-height: 180px; }
    .portal-brand.portal-brand-image { justify-content:center; padding-top:8px; }
    .portal-brand.portal-brand-image img { width: min(100%, 460px); }
    .portal-nav { margin-top: 0; }
}
@media (max-width: 560px) {
    .portal-hero { height: 145px; }
    .portal-brand.portal-brand-image img { width: min(100%, 320px); }
}


/* V15: Morroc palette refinement */
body.bakbakan-portal-body {
    background:
        linear-gradient(rgba(238,243,247,.80), rgba(222,232,239,.86)),
        url('../images/design/morroc-parchment-bg.png') center top / cover no-repeat fixed;
}
.portal-hero {
    background:
        linear-gradient(90deg, rgba(12,14,18,.15) 0%, rgba(10,14,20,.10) 42%, rgba(35,14,10,.30) 100%),
        linear-gradient(180deg, rgba(255,241,218,.05) 0%, rgba(8,12,18,.05) 68%, rgba(20,10,10,.20) 100%),
        url('../images/design/morroc-hero-banner.png') center center / cover no-repeat;
}
.portal-brand.portal-brand-image {
    max-width: 650px;
}
.portal-brand.portal-brand-image img {
    width: min(100%, 650px);
    filter: drop-shadow(0 12px 20px rgba(0,0,0,.30));
}
.portal-nav {
    background: linear-gradient(#2e516f, #203f5a 50%, #18354d 51%, #142d43);
    border-top: 1px solid #9a7a4f;
    border-bottom: 2px solid #7e5f38;
    box-shadow: 0 3px 8px rgba(32,24,18,.22);
}
.portal-nav a {
    color:#f4eee5;
    border-left:1px solid rgba(214,180,132,.12);
    border-right:1px solid rgba(0,0,0,.20);
    text-shadow:0 -1px rgba(0,0,0,.38);
}
.portal-nav a:hover {
    background: linear-gradient(#486985, #31536f);
    color:#fff7ea;
}
.portal-main {
    background:
        linear-gradient(rgba(250,251,252,.93), rgba(247,249,250,.93)),
        url('../images/design/morroc-parchment-bg.png') center top / cover no-repeat;
    border-color:#c8b99f;
    box-shadow:0 3px 10px rgba(72,53,32,.12);
}
.portal-footer {
    background: linear-gradient(#eee9df, #ded5c8);
    border-top: 0;
}
.portal-footer-copyright {
    background: linear-gradient(#29475f, #18364d);
    border-color:#6d5537;
    color:#e9e2d8;
    box-shadow: inset 0 1px rgba(255,255,255,.12);
}
.portal-footer-copyright span { color:#f4eee6; }
.portal-footer-copyright a { color:#d9c3a4; }
.portal-board, .portal-sidebox, .portal-card {
    border-color:#c7baa5;
}
.portal-board-title, .portal-sidebox h2 {
    background: linear-gradient(#faf8f4, #e9e2d8);
    border-bottom-color:#c8baa3;
}
.portal-board-title h2, .portal-sidebox h2, .portal-page-heading h1, .portal-card h2 {
    color:#37566f;
}
@media (max-width: 980px) {
    .portal-brand.portal-brand-image img { width:min(100%, 570px); }
}
@media (max-width: 800px) {
    .portal-brand.portal-brand-image img { width:min(100%, 480px); }
}
@media (max-width: 560px) {
    .portal-brand.portal-brand-image img { width:min(100%, 330px); }
}

/* V16: stronger visible Morroc page background */
body.bakbakan-portal-body {
    background-color: #e7ded0;
    background-image:
        linear-gradient(rgba(244,247,248,.18), rgba(223,231,236,.34)),
        url('../images/design/morroc-parchment-bg.png');
    background-position: center top, center 235px;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* Keep the center panels readable while allowing the surrounding artwork to show. */
.portal-main {
    background: rgba(249,250,250,.94);
    border-color: #c7b79e;
    box-shadow: 0 4px 14px rgba(68,47,27,.15);
}

.portal-layout {
    position: relative;
    z-index: 1;
}

/* Slight warm transparency on inner panels, without washing out the page background. */
.portal-home-intro,
.portal-board,
.portal-card,
.portal-action-card {
    background-color: rgba(250,249,246,.94);
}

.portal-footer {
    background: rgba(231,223,211,.88);
}

@media (max-width: 800px) {
    body.bakbakan-portal-body {
        background-position: center top, center 180px;
        background-size: cover, auto 100%;
        background-attachment: scroll, scroll;
    }
}

/* V17: stable Morroc backdrop across every page */
html {
    background: #e4d8c7;
}
body.bakbakan-portal-body {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    background-image: none !important;
}
body.bakbakan-portal-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #e4d8c7;
    background-image:
        linear-gradient(rgba(248,245,238,.10), rgba(232,235,235,.17)),
        url('../images/design/morroc-parchment-bg.png');
    background-position: center center, center center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

/* Prevent page height from changing the backdrop crop/scale. */
.portal-layout,
.portal-hero,
.portal-nav,
.portal-footer {
    position: relative;
}

/* Remove the stray full-width footer line/strip; keep only the centered copyright bar. */
.portal-footer {
    padding-top: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.portal-footer-copyright {
    margin-top: 0;
}

/* The content stays readable while the surrounding Morroc art remains visible. */
.portal-main {
    background: rgba(249,250,250,.94) !important;
}

@media (max-width: 800px) {
    body.bakbakan-portal-body::before {
        background-position: center center, center center;
        background-size: cover, cover;
    }
}

/* V18: lock Morroc backdrop scale across pages */
html {
    /* Always reserve the scrollbar so Home and short pages use the same viewport width. */
    overflow-y: scroll;
}
body.bakbakan-portal-body::before {
    /* Scale only from viewport width, not page/content height. */
    background-position: center top, center top;
    background-size: 100% 100%, 100vw auto;
    background-repeat: no-repeat, no-repeat;
}

@media (max-width: 800px) {
    body.bakbakan-portal-body::before {
        /* Portrait/mobile needs height coverage; still stays fixed and consistent page-to-page. */
        background-position: center top, center top;
        background-size: 100% 100%, auto 100vh;
    }
}

/* V19: clean single-frame screenshot slideshow */
.portal-showcase {
    position: relative;
    overflow: hidden;
    width: min(100%, 680px);
    max-width: 680px;
    margin: 16px auto 2px;
    padding: 0;
    border: 1px solid #b9ab94 !important;
    background: #f7f3ec !important;
    box-shadow: 0 3px 10px rgba(55,39,23,.14);
}
.portal-showcase .portal-board-title {
    min-height: 34px;
    padding: 0 11px;
    border-bottom: 1px solid #c9baa1;
    background: linear-gradient(#fbf8f2, #ebe3d6);
}
.portal-showcase-frame {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.portal-showcase-stage {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0 !important;
    box-shadow: none !important;
    background: #101d27;
}
.portal-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #101d27;
}
/* Put the navigation dots on the screenshot itself instead of reserving a white strip. */
.portal-slide-dots {
    position: absolute;
    left: 50%;
    bottom: 11px;
    z-index: 7;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 5px 8px;
    margin: 0;
    border-radius: 14px;
    background: rgba(8,20,30,.45) !important;
    backdrop-filter: blur(2px);
}
.portal-slide-dots button {
    width: 8px;
    height: 8px;
    border-color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.48);
}
.portal-slide-dots button.is-active {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(0,0,0,.18);
}
.portal-slide-caption {
    padding-bottom: 30px;
}
@media (max-width: 560px) {
    .portal-showcase { width: 100%; }
    .portal-slide-dots { bottom: 8px; }
    .portal-slide-caption { padding-bottom: 27px; }
}

/* V20: final portal polish — active nav, warmer panels, refined hero/footer, mobile cleanup */
.portal-nav a {
    position: relative;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.portal-nav a.is-active,
.portal-nav a[aria-current="page"] {
    color: #fff7e8;
    background: linear-gradient(#5b7080, #3d5364 48%, #30485b 49%, #253d50);
    box-shadow: inset 0 3px 0 #b88a52, inset 0 -1px 0 rgba(255,255,255,.09);
    text-shadow: 0 1px 2px rgba(0,0,0,.48);
}
.portal-nav a.is-active:after,
.portal-nav a[aria-current="page"]:after {
    content: "";
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 2px;
    height: 1px;
    background: rgba(221,184,132,.78);
}

/* Slightly calmer hero copy, with more breathing room around the login state. */
.portal-hero-copy {
    padding-top: 4px;
    transform: translateY(-5px);
}
.portal-hero-copy > strong {
    font-size: 25px;
    line-height: 1.08;
    letter-spacing: .025em;
}
.portal-hero-meta {
    margin-top: 5px;
    font-size: 11px;
    opacity: .96;
}
.portal-login-status {
    margin-top: 16px;
    top: 7px;
}

/* Warm parchment-white content surfaces; keep text crisp while tying into Morroc. */
.portal-main {
    background: rgba(251,249,244,.955) !important;
    border-color: #c6b495 !important;
    box-shadow: 0 4px 14px rgba(61,43,24,.16);
}
.portal-home-intro,
.portal-board,
.portal-card,
.portal-action-card,
.portal-sidebox {
    background-color: rgba(252,250,246,.955);
    border-color: #c9b99e;
}
.portal-board-title,
.portal-sidebox h2 {
    background: linear-gradient(#fcfaf6, #ece3d5);
    border-bottom-color: #c8b596;
}

/* Bronze accent on server/info tiles to match the Demise logo without overpowering the UI. */
.portal-info-grid .portal-card {
    position: relative;
    overflow: hidden;
    border-top: 2px solid #a97843;
    box-shadow: inset 0 1px rgba(255,255,255,.72);
}
.portal-info-grid .portal-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 38%;
    height: 2px;
    background: #d2ad78;
}
.portal-info-grid .portal-card strong {
    color: #846542;
}
.portal-info-grid .portal-card span {
    color: #34566f;
}

/* Thinner, darker footer with a restrained bronze highlight. */
.portal-footer {
    padding-top: 0 !important;
    background: transparent !important;
}
.portal-footer-copyright {
    min-height: 32px;
    padding: 5px 12px;
    background: linear-gradient(#203b50, #132d40);
    border: 1px solid #4f4436;
    border-top: 2px solid #9c7446 !important;
    color: #e8dfd3;
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 -1px 0 rgba(0,0,0,.08);
}
.portal-footer-copyright span { color: #f1e9de; }
.portal-footer-copyright small { color: #a9b6bf; }
.portal-footer-copyright a { color: #d2b487; }

/* Mobile cleanup: keep the logo dominant and navigation readable. */
@media (max-width: 800px) {
    .portal-hero {
        height: 174px;
    }
    .portal-hero-inner {
        min-height: 174px;
    }
    .portal-brand.portal-brand-image {
        padding-top: 5px;
    }
    .portal-brand.portal-brand-image img {
        width: min(100%, 470px);
        max-height: 160px;
        object-fit: contain;
    }
    .portal-nav a {
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .portal-nav a.is-active:after,
    .portal-nav a[aria-current="page"]:after {
        left: 35%;
        right: 35%;
    }
    .portal-main {
        padding: 14px;
    }
}
@media (max-width: 560px) {
    .portal-hero {
        height: 140px;
    }
    .portal-hero-inner {
        min-height: 140px;
    }
    .portal-brand.portal-brand-image img {
        width: min(100%, 340px);
        max-height: 128px;
    }
    .portal-nav a {
        min-height: 36px;
        padding: 9px 5px;
        font-size: 9px;
    }
    .portal-footer-copyright {
        min-height: 38px;
        padding: 7px 9px;
    }
}

/* V21: white active navigation + refreshed Episode 12 logo */
.portal-nav a.is-active,
.portal-nav a[aria-current="page"] {
    color: #214f72 !important;
    background: linear-gradient(#ffffff, #f5f8fa 58%, #edf3f7 100%) !important;
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #c5d2db, 0 1px 3px rgba(0,0,0,.10) !important;
    text-shadow: none !important;
}
.portal-nav a.is-active:after,
.portal-nav a[aria-current="page"]:after {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    background: #dfe8ee !important;
}
.portal-brand.portal-brand-image {
    max-width: 650px;
    padding-top: 4px;
}
.portal-brand.portal-brand-image img {
    width: min(100%, 640px);
    max-height: 205px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 9px 16px rgba(0,0,0,.28));
}
@media (max-width: 980px) {
    .portal-brand.portal-brand-image img {
        width: min(100%, 560px);
        max-height: 190px;
    }
}
@media (max-width: 800px) {
    .portal-brand.portal-brand-image img {
        width: min(100%, 470px);
        max-height: 158px;
    }
}
@media (max-width: 560px) {
    .portal-brand.portal-brand-image img {
        width: min(100%, 335px);
        max-height: 125px;
    }
}

/* V24: mobile-first compact portal polish for phone/in-app browsers */
@media (max-width: 560px) {
    .portal-width {
        width: calc(100% - 12px);
    }

    /* Keep the logo prominent, but reclaim vertical space. */
    .portal-hero {
        height: 128px !important;
    }
    .portal-hero-inner {
        min-height: 128px !important;
    }
    .portal-brand.portal-brand-image {
        padding-top: 2px !important;
        max-width: 100%;
    }
    .portal-brand.portal-brand-image img {
        width: min(100%, 320px) !important;
        max-height: 118px !important;
    }

    /* Two-row navigation instead of the tall 2-column/four-row stack. */
    .portal-nav-inner {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
    }
    .portal-nav a {
        flex: none !important;
        min-width: 0 !important;
        min-height: 35px !important;
        padding: 7px 3px !important;
        font-size: 8px !important;
        line-height: 1.15;
        letter-spacing: .025em;
        white-space: normal;
    }
    .portal-nav a:nth-child(7) {
        grid-column: 3 / 5;
    }

    /* Reduce the oversized first-screen feel without changing desktop typography. */
    .portal-layout {
        padding-top: 8px !important;
        padding-bottom: 14px !important;
    }
    .portal-main {
        padding: 10px !important;
    }
    .portal-home-intro {
        padding: 16px 14px !important;
        margin: 0 0 12px !important;
    }
    .portal-home-intro .portal-kicker {
        font-size: 8px;
        letter-spacing: .11em;
    }
    .portal-page-heading h1,
    .portal-home-intro h1 {
        margin: 4px 0 7px !important;
        font-size: 23px !important;
        line-height: 1.08 !important;
    }
    .portal-home-intro p {
        font-size: 12px;
        line-height: 1.55;
    }
    .portal-home-actions {
        margin-top: 12px !important;
    }
    .portal-button {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }

    /* Keep gallery readable but trim chrome around it. */
    .portal-showcase {
        margin-top: 10px !important;
    }
    .portal-showcase .portal-board-title {
        min-height: 30px !important;
        padding: 0 8px !important;
    }
    .portal-showcase .portal-board-title h2 {
        font-size: 9px !important;
    }
    .portal-showcase .portal-board-title span {
        font-size: 8px !important;
    }
    .portal-slide-arrow {
        width: 26px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    .portal-slide-caption {
        padding: 22px 9px 23px !important;
    }
    .portal-slide-caption strong {
        font-size: 14px !important;
    }
    .portal-slide-caption span {
        font-size: 8px !important;
    }

    .portal-footer-copyright {
        width: calc(100% - 12px) !important;
        min-height: 34px !important;
        padding: 6px 8px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 380px) {
    .portal-nav a {
        font-size: 7.5px !important;
    }
    .portal-page-heading h1,
    .portal-home-intro h1 {
        font-size: 21px !important;
    }
}


/* V25: mobile logged-in status bar */
.portal-mobile-account-status {
    display: none;
}
@media (max-width: 800px) {
    /* Desktop hero copy stays hidden on small screens, but account state gets its own compact row. */
    .portal-mobile-account-status {
        width: min(1000px, calc(100% - 12px));
        min-height: 34px;
        margin: 0 auto;
        padding: 5px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        color: #f5eadb;
        background: linear-gradient(#203f59, #16344d);
        border-left: 1px solid rgba(255,255,255,.08);
        border-right: 1px solid rgba(255,255,255,.08);
        border-bottom: 1px solid #8d704f;
        box-shadow: inset 0 1px rgba(255,255,255,.08);
        font-size: 9px;
        line-height: 1.2;
        text-align: center;
    }
    .portal-mobile-account-status span {
        white-space: nowrap;
    }
    .portal-mobile-account-status strong {
        color: #fff;
        font-size: 12px;
    }
    .portal-mobile-account-status > div {
        display: flex;
        gap: 5px;
    }
    .portal-mobile-account-status a {
        display: inline-block;
        padding: 4px 7px;
        color: #fff;
        background: linear-gradient(#4477a0, #24577f);
        border: 1px solid #173f62;
        border-radius: 2px;
        font-size: 9px;
        font-weight: bold;
        line-height: 1.1;
        text-decoration: none;
        white-space: nowrap;
    }
    .portal-mobile-account-status a:hover {
        background: linear-gradient(#5687ad, #30658e);
    }
}
@media (max-width: 380px) {
    .portal-mobile-account-status {
        gap: 6px;
        padding: 5px 6px;
    }
    .portal-mobile-account-status strong {
        font-size: 11px;
    }
    .portal-mobile-account-status a {
        padding: 4px 6px;
        font-size: 8px;
    }
}

/* V26: tighter mobile refinement */
@media (max-width: 560px) {
    /* Slimmer logged-in strip. */
    .portal-mobile-account-status {
        min-height: 30px !important;
        padding: 3px 7px !important;
        gap: 7px !important;
        font-size: 9px !important;
    }
    .portal-mobile-account-status strong {
        font-size: 11px !important;
    }
    .portal-mobile-account-status > div {
        gap: 4px !important;
    }
    .portal-mobile-account-status a {
        padding: 3px 6px !important;
        font-size: 8px !important;
        min-height: 24px;
        display: inline-flex;
        align-items: center;
    }

    /* Shorter navigation without sacrificing tap targets. */
    .portal-nav a {
        min-height: 31px !important;
        padding: 6px 3px !important;
        font-size: 7.8px !important;
        line-height: 1.1 !important;
    }

    /* More content visible above the fold. */
    .portal-main {
        padding: 8px !important;
    }
    .portal-home-intro {
        padding: 13px 12px !important;
        margin-bottom: 9px !important;
    }
    .portal-home-intro .portal-kicker {
        font-size: 7.5px !important;
        letter-spacing: .10em !important;
    }
    .portal-page-heading h1,
    .portal-home-intro h1 {
        font-size: 20px !important;
        line-height: 1.05 !important;
        margin: 3px 0 6px !important;
    }
    .portal-home-intro p {
        font-size: 11px !important;
        line-height: 1.45 !important;
        margin-bottom: 0 !important;
    }
    .portal-home-actions {
        margin-top: 9px !important;
    }
    .portal-button {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }

    /* Let the screenshot itself use more of the available phone width. */
    .portal-showcase {
        margin-top: 8px !important;
    }
    .portal-showcase-frame {
        padding: 2px !important;
    }
    .portal-showcase-stage {
        border-width: 1px !important;
    }
    .portal-showcase .portal-board-title {
        min-height: 27px !important;
        padding: 0 6px !important;
    }
    .portal-showcase .portal-board-title h2 {
        gap: 5px !important;
        font-size: 8.5px !important;
    }
    .portal-showcase .portal-board-title h2:before {
        width: 6px !important;
        height: 6px !important;
    }
    .portal-showcase .portal-board-title span {
        font-size: 7.5px !important;
    }
    .portal-slide-arrow {
        width: 24px !important;
        height: 38px !important;
        font-size: 15px !important;
    }
    .portal-slide-caption {
        padding: 20px 8px 20px !important;
    }
    .portal-slide-caption strong {
        font-size: 13px !important;
    }
    .portal-slide-caption span {
        font-size: 7.5px !important;
    }

    .portal-footer-copyright {
        min-height: 31px !important;
        padding: 5px 7px !important;
        font-size: 8.5px !important;
    }
}

@media (max-width: 380px) {
    .portal-mobile-account-status {
        gap: 5px !important;
        padding: 3px 5px !important;
    }
    .portal-mobile-account-status strong {
        font-size: 10px !important;
    }
    .portal-mobile-account-status a {
        padding: 3px 5px !important;
        font-size: 7.5px !important;
    }
    .portal-nav a {
        font-size: 7.2px !important;
    }
    .portal-page-heading h1,
    .portal-home-intro h1 {
        font-size: 19px !important;
    }
}

/* V27: flush mobile account bar */
@media (max-width: 800px) {
    .portal-mobile-account-status {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
    }
}

/* V28: floating centered desktop navigation — reveal Morroc art at the sides */
@media (min-width: 801px) {
    .portal-nav {
        background: transparent !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .portal-nav-inner {
        position: relative;
        overflow: visible;
        background: linear-gradient(#244f72, #153d60 50%, #0f3150 51%, #0c2944);
        border-top: 1px solid rgba(255,255,255,.15);
        border-bottom: 2px solid #a8783e;
        box-shadow: 0 4px 10px rgba(22,28,35,.28);
    }
    .portal-nav-inner:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 1px;
        background: rgba(255,238,205,.38);
        pointer-events: none;
    }
}


/* V31: one Morroc artwork for hero + page, with subtle scroll fade */
:root {
    --bb-scroll-fade: .04;
}

html {
    background: #e9dfcf;
}

body.bakbakan-portal-body {
    position: relative;
    isolation: isolate;
    background: #e9dfcf !important;
}

/* One source image only: the same artwork used by the original hero. */
body.bakbakan-portal-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: #e9dfcf;
    background-image: url('../images/design/morroc-hero-banner.png');
    background-position: center top;
    background-size: 100vw auto;
    background-repeat: no-repeat;
}

/* Parchment veil: softens the scene below the hero and grows slightly on scroll. */
body.bakbakan-portal-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(246,238,225,.00) 0px,
            rgba(246,238,225,.02) 185px,
            rgba(246,238,225,.16) 285px,
            rgba(246,238,225,.48) 470px,
            rgba(246,238,225,.76) 650px,
            rgba(246,238,225,.88) 100%),
        rgba(248,244,237,var(--bb-scroll-fade));
    transition: background-color .12s linear;
}

/* The hero no longer owns a separate background; it reveals the same page artwork. */
.portal-hero {
    background: transparent !important;
    border: 0 !important;
    box-shadow: inset 0 -22px 30px rgba(43,25,13,.08) !important;
}
.portal-hero:before,
.portal-hero:after {
    display: none !important;
}

/* Main panels stay readable while allowing the shared art to breathe around them. */
.portal-main {
    background: rgba(252,250,246,.945) !important;
}
.portal-home-intro,
.portal-board,
.portal-card,
.portal-action-card,
.portal-sidebox {
    background-color: rgba(253,251,247,.95);
}

@media (max-width: 800px) {
    body.bakbakan-portal-body::before {
        background-position: center top;
        background-size: auto 180px;
    }
    body.bakbakan-portal-body::after {
        background:
            linear-gradient(to bottom,
                rgba(246,238,225,.00) 0px,
                rgba(246,238,225,.03) 105px,
                rgba(246,238,225,.34) 165px,
                rgba(246,238,225,.72) 280px,
                rgba(246,238,225,.88) 100%),
            rgba(248,244,237,var(--bb-scroll-fade));
    }
}

@media (max-width: 560px) {
    body.bakbakan-portal-body::before {
        background-size: auto 150px;
    }
    body.bakbakan-portal-body::after {
        background:
            linear-gradient(to bottom,
                rgba(246,238,225,.00) 0px,
                rgba(246,238,225,.04) 92px,
                rgba(246,238,225,.44) 150px,
                rgba(246,238,225,.80) 245px,
                rgba(246,238,225,.90) 100%),
            rgba(248,244,237,var(--bb-scroll-fade));
    }
}


/* V32: full-page extension of the SAME Morroc hero artwork; no abrupt cutoff */
body.bakbakan-portal-body::before {
    background-color: #eee4d5 !important;
    background-image: url('../images/design/morroc-unified-page.png') !important;
    background-position: center top !important;
    background-size: 100vw auto !important;
    background-repeat: no-repeat !important;
}

/* Only the veil changes on scroll; the artwork itself remains one continuous image. */
body.bakbakan-portal-body::after {
    background:
        linear-gradient(to bottom,
            rgba(248,243,235,0) 0px,
            rgba(248,243,235,.01) 210px,
            rgba(248,243,235,.06) 350px,
            rgba(248,243,235,.16) 560px,
            rgba(248,243,235,.28) 850px,
            rgba(248,243,235,.40) 1200px,
            rgba(248,243,235,.52) 100%),
        rgba(248,244,237,var(--bb-scroll-fade)) !important;
}

@media (max-width: 800px) {
    body.bakbakan-portal-body::before {
        background-size: cover !important;
        background-position: center top !important;
    }
}


/* V33: true single-image full-screen Morroc background — no stitched/extended seams */
:root {
    --bb-scroll-fade: 0;
}

body.bakbakan-portal-body {
    background: #ded1bf !important;
}

/* Use the ORIGINAL hero art as the only page background, fixed and covering the viewport. */
body.bakbakan-portal-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: #36271e !important;
    background-image: url('../images/design/morroc-hero-banner.png') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Smooth parchment veil only; no image joins, bands, or hard cutoffs. */
body.bakbakan-portal-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(248,243,235,0) 0%,
            rgba(248,243,235,0) 18%,
            rgba(248,243,235,.08) 34%,
            rgba(248,243,235,.20) 52%,
            rgba(248,243,235,.34) 72%,
            rgba(248,243,235,.46) 100%),
        rgba(248,244,237,var(--bb-scroll-fade)) !important;
}

/* Hero simply reveals the same full-screen background. */
.portal-hero {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Remove the decorative seam below the desktop floating navigation. */
@media (min-width: 801px) {
    .portal-nav-inner {
        border-bottom: 0 !important;
        box-shadow: 0 4px 10px rgba(22,28,35,.24) !important;
    }
    .portal-nav-inner:after {
        display: none !important;
    }
}

/* Keep panels readable without hiding the artwork completely. */
.portal-main {
    background: rgba(252,250,246,.935) !important;
}
.portal-home-intro,
.portal-board,
.portal-card,
.portal-action-card,
.portal-sidebox {
    background-color: rgba(253,251,247,.945) !important;
}

@media (max-width: 800px) {
    body.bakbakan-portal-body::before {
        background-position: center center !important;
        background-size: cover !important;
    }
    body.bakbakan-portal-body::after {
        background:
            linear-gradient(to bottom,
                rgba(248,243,235,0) 0%,
                rgba(248,243,235,.02) 20%,
                rgba(248,243,235,.16) 42%,
                rgba(248,243,235,.32) 68%,
                rgba(248,243,235,.48) 100%),
            rgba(248,244,237,var(--bb-scroll-fade)) !important;
    }
}

/* V34: episode-themed side character art + restrained atmosphere */
.portal-character-art {
    display: none;
    position: fixed;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .78;
    filter: saturate(.92) contrast(1.02);
}
.portal-character-left {
    left: 0;
    width: clamp(250px, 21vw, 350px);
    height: min(72vh, 690px);
    background-image: url('../images/design/morroc-knight-left.png');
    background-position: left bottom;
}
.portal-character-right {
    right: 0;
    width: clamp(250px, 21vw, 350px);
    height: min(72vh, 690px);
    background-image: url('../images/design/morroc-priest-right.png');
    background-position: right bottom;
}

/* Tiny ember field; decorative only and deliberately low-contrast. */
.portal-ember-layer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .28;
    background-image:
        radial-gradient(circle at 8% 72%, rgba(255,122,48,.95) 0 2px, transparent 3px),
        radial-gradient(circle at 15% 88%, rgba(255,179,91,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 87% 69%, rgba(255,103,45,.85) 0 2px, transparent 3px),
        radial-gradient(circle at 92% 84%, rgba(255,185,92,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 73% 30%, rgba(255,116,60,.7) 0 1px, transparent 2px);
    background-size: 100% 100%;
    animation: bakbakanEmberFloat 8s ease-in-out infinite alternate;
}
@keyframes bakbakanEmberFloat {
    from { transform: translate3d(0, 6px, 0); opacity: .20; }
    to   { transform: translate3d(0, -8px, 0); opacity: .32; }
}

.portal-home-intro {
    min-height: 170px;
    padding-right: 250px;
}
.portal-episode-badge {
    position: absolute;
    right: 28px;
    bottom: 22px;
    z-index: 2;
    min-width: 210px;
    padding: 8px 18px 7px;
    text-align: center;
    color: #76442d;
    background: linear-gradient(180deg, rgba(253,245,225,.96), rgba(231,211,175,.95));
    border: 1px solid #b99058;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 2px 6px rgba(71,44,22,.14);
    font-family: Georgia, 'Times New Roman', serif;
}
.portal-episode-badge:before,
.portal-episode-badge:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 34px;
    height: 1px;
    background: #b48349;
}
.portal-episode-badge:before { left: -24px; }
.portal-episode-badge:after { right: -24px; }
.portal-episode-badge span {
    display: block;
    margin-bottom: 1px;
    color: #8d6542;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: .08em;
}
.portal-episode-badge strong {
    display: block;
    color: #6f3525;
    font-size: 13px;
    line-height: 1.1;
    letter-spacing: .015em;
}

@media (min-width: 1450px) {
    .portal-character-art,
    .portal-ember-layer {
        display: block;
    }
}

@media (max-width: 900px) {
    .portal-home-intro {
        min-height: 0;
        padding-right: 22px;
    }
    .portal-episode-badge {
        position: static;
        width: fit-content;
        min-width: 0;
        margin: 15px 0 0 auto;
        padding: 7px 13px 6px;
    }
    .portal-episode-badge:before,
    .portal-episode-badge:after {
        display: none;
    }
}

@media (max-width: 560px) {
    .portal-episode-badge {
        display: none;
    }
}

/* V35: reference-inspired HD integrated Episode 12 portal */
body.bakbakan-portal-body {
    background: #4a3024 !important;
}

/* One baked HD scene: characters, Morroc city and sky are part of the same artwork. */
body.bakbakan-portal-body::before {
    background-color: #4a3024 !important;
    background-image: url('../images/design/morroc-hd-integrated.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    filter: none !important;
}

/* Keep the artwork vivid at the top and gently soften it behind long content. */
body.bakbakan-portal-body::after {
    background:
        linear-gradient(to bottom,
            rgba(249,241,226,0) 0%,
            rgba(249,241,226,0) 23%,
            rgba(249,241,226,.05) 38%,
            rgba(249,241,226,.12) 58%,
            rgba(249,241,226,.22) 78%,
            rgba(249,241,226,.30) 100%),
        rgba(249,242,230,var(--bb-scroll-fade)) !important;
}

.portal-hero {
    background: transparent !important;
}

/* Reference-style navigation with gold icons and restrained gold trim. */
@media (min-width: 801px) {
    .portal-nav-inner {
        border: 1px solid #9d6b2e !important;
        border-top-color: #c99a50 !important;
        background: linear-gradient(#174d75, #0d3559 52%, #082b4b 53%, #06233d) !important;
        box-shadow: 0 3px 10px rgba(24,13,6,.30), inset 0 1px rgba(255,255,255,.10) !important;
    }
}
.portal-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #f8f0e2;
}
.portal-nav-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: #e2b867;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    filter: drop-shadow(0 1px rgba(0,0,0,.35));
}
.portal-icon-home { -webkit-mask-image:url('../images/icons/home.svg'); mask-image:url('../images/icons/home.svg'); }
.portal-icon-news { -webkit-mask-image:url('../images/icons/news.svg'); mask-image:url('../images/icons/news.svg'); }
.portal-icon-server { -webkit-mask-image:url('../images/icons/server.svg'); mask-image:url('../images/icons/server.svg'); }
.portal-icon-guide { -webkit-mask-image:url('../images/icons/guide.svg'); mask-image:url('../images/icons/guide.svg'); }
.portal-icon-account { -webkit-mask-image:url('../images/icons/account.svg'); mask-image:url('../images/icons/account.svg'); }
.portal-icon-download { -webkit-mask-image:url('../images/icons/download.svg'); mask-image:url('../images/icons/download.svg'); }
.portal-icon-community { -webkit-mask-image:url('../images/icons/community.svg'); mask-image:url('../images/icons/community.svg'); }
.portal-nav-label { line-height: 1; }

.portal-nav a.is-active,
.portal-nav a[aria-current="page"] {
    color: #243e54 !important;
    background: linear-gradient(#fffdf7, #f5efe3) !important;
    box-shadow: inset 0 1px #fff, inset 0 -1px #cfb88e !important;
}
.portal-nav a.is-active .portal-nav-icon,
.portal-nav a[aria-current="page"] .portal-nav-icon {
    background-color: #a92923 !important;
    filter: none;
}

/* Parchment-like central surfaces inspired by the selected reference. */
.portal-main {
    background: rgba(253,247,235,.955) !important;
    border: 1px solid #b68a50 !important;
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.55),
        0 4px 14px rgba(56,31,13,.20) !important;
}
.portal-home-intro,
.portal-board,
.portal-card,
.portal-action-card,
.portal-sidebox {
    background: rgba(255,250,239,.96) !important;
    border-color: #c49b64 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.58);
}
.portal-home-intro {
    min-height: 0 !important;
    padding-right: 22px !important;
}
.portal-home-intro:before,
.portal-showcase:before {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    border: 1px solid rgba(170,116,57,.24);
}
.portal-home-intro h1 {
    color: #234f72;
}
.portal-episode-badge {
    display: none !important;
}

/* Red CTA like the approved reference. */
.portal-home-intro .portal-button-primary {
    padding: 9px 18px !important;
    border: 1px solid #6d0b09 !important;
    outline: 1px solid rgba(187,139,69,.72);
    outline-offset: 1px;
    background: linear-gradient(#c52b22, #a30e0b 54%, #7d0807 55%, #8d0c08) !important;
    color: #fff9ed !important;
    text-shadow: 0 -1px rgba(62,0,0,.55);
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 2px 4px rgba(72,20,10,.20);
}
.portal-home-intro .portal-button-primary:hover {
    background: linear-gradient(#d64236, #b21611 55%, #8c0a08 56%, #9b120c) !important;
}
.portal-home-intro .portal-button-primary:after {
    content: "  ›";
    font-size: 16px;
    line-height: 0;
}

/* Warm up the screenshot gallery to match the new parchment frame. */
.portal-showcase {
    position: relative;
    border-color: #bd925b !important;
    background: rgba(255,249,237,.97) !important;
    box-shadow: 0 3px 10px rgba(62,35,15,.18) !important;
}
.portal-showcase .portal-board-title {
    background: linear-gradient(#fffaf0, #eee0c8) !important;
    border-bottom-color: #c69b62 !important;
}
.portal-showcase .portal-board-title h2 {
    color: #6e2a22 !important;
}
.portal-showcase .portal-board-title h2:before {
    background: #a92923 !important;
    box-shadow: 0 0 0 2px #ead4a8 !important;
}

@media (max-width: 800px) {
    body.bakbakan-portal-body::before {
        background-position: center center !important;
        background-size: cover !important;
    }
    .portal-nav a {
        gap: 4px;
    }
    .portal-nav-icon {
        width: 15px;
        height: 15px;
    }
}
@media (max-width: 560px) {
    .portal-nav a {
        gap: 3px;
    }
    .portal-nav-icon {
        width: 13px;
        height: 13px;
    }
    .portal-home-intro .portal-button-primary {
        padding: 7px 12px !important;
    }
}


/* V36: reference-match pass — composition, ornate parchment, reliable nav icons */
body.bakbakan-portal-body {
    background: #dcecf5 !important;
}
body.bakbakan-portal-body::before {
    background-color: #dcecf5 !important;
    background-image: url('../images/design/romidgard-nostalgia-bg.png') !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    filter: none !important;
}
body.bakbakan-portal-body::after {
    background:
        linear-gradient(to bottom,
            rgba(253,245,230,0) 0%,
            rgba(253,245,230,0) 36%,
            rgba(253,245,230,.04) 55%,
            rgba(253,245,230,.10) 76%,
            rgba(253,245,230,.18) 100%),
        rgba(249,242,230,var(--bb-scroll-fade)) !important;
}
.portal-hero { background: transparent !important; }

/* Stronger reference-style navigation frame. */
@media (min-width: 801px) {
    .portal-nav-inner {
        border: 1px solid #986427 !important;
        border-top-color: #d1a556 !important;
        border-bottom-color: #6d421d !important;
        outline: 1px solid rgba(225,183,99,.34);
        outline-offset: 2px;
        background: linear-gradient(#174f78, #103b61 49%, #0b3153 50%, #082744) !important;
        box-shadow:
            0 4px 10px rgba(31,17,7,.34),
            inset 0 1px rgba(255,255,255,.12),
            inset 0 -1px rgba(0,0,0,.22) !important;
    }
}
.portal-nav a {
    gap: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px !important;
    letter-spacing: .015em !important;
}
.portal-nav-icon {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    fill: #e2b85e !important;
    color: #e2b85e !important;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.45));
}
.portal-nav a.is-active .portal-nav-icon,
.portal-nav a[aria-current="page"] .portal-nav-icon {
    fill: #a8241e !important;
    color: #a8241e !important;
}

/* One ornate parchment frame for the main content area. */
.portal-main {
    background-color: rgba(255,248,234,.965) !important;
    background-image:
        url('../images/design/ornaments/corner-tl.svg'),
        url('../images/design/ornaments/corner-tr.svg'),
        url('../images/design/ornaments/corner-bl.svg'),
        url('../images/design/ornaments/corner-br.svg') !important;
    background-position:
        7px 7px,
        calc(100% - 7px) 7px,
        7px calc(100% - 7px),
        calc(100% - 7px) calc(100% - 7px) !important;
    background-size: 34px 34px !important;
    background-repeat: no-repeat !important;
    border: 1px solid #aa7736 !important;
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.62),
        inset 0 0 0 4px rgba(202,157,91,.27),
        0 5px 16px rgba(56,29,10,.23) !important;
    padding: 17px !important;
}

.portal-home-intro {
    min-height: 190px !important;
    padding: 22px 390px 22px 24px !important;
    overflow: hidden !important;
    background-color: rgba(255,250,240,.965) !important;
    background-image:
        linear-gradient(90deg, rgba(255,250,240,1) 0%, rgba(255,250,240,.97) 49%, rgba(255,250,240,.66) 72%, rgba(255,250,240,.42) 100%),
        url('../images/design/intro-city-fade.png') !important;
    background-position: center, right bottom !important;
    background-size: 100% 100%, auto 100% !important;
    background-repeat: no-repeat !important;
    border: 1px solid #c39a61 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.75) !important;
}
.portal-home-intro:after { display:none !important; }
.portal-home-intro:before {
    inset: 5px !important;
    border-color: rgba(174,119,52,.26) !important;
}
.portal-home-intro .portal-kicker {
    color: #3e6681 !important;
    font-size: 10px !important;
}
.portal-home-intro h1 {
    color: #244f70 !important;
    font-size: 30px !important;
    line-height: 1.08 !important;
    margin-top: 3px !important;
}
.portal-home-intro p {
    max-width: 580px !important;
    color: #3f4a50 !important;
}
.portal-home-intro .portal-button-primary {
    padding: 10px 20px !important;
    font: 700 16px Georgia, 'Times New Roman', serif !important;
    border: 1px solid #6f0b08 !important;
    outline: 1px solid #b88642 !important;
    outline-offset: 1px !important;
    background: linear-gradient(#c9271d, #a4110c 52%, #7e0906 53%, #950f0b) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.18),
        0 2px 5px rgba(78,25,10,.28) !important;
}

/* Larger gallery, closer to the approved reference proportion. */
.portal-showcase {
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    margin-top: 14px !important;
    background-color: rgba(255,249,236,.975) !important;
    background-image:
        url('../images/design/ornaments/corner-tl.svg'),
        url('../images/design/ornaments/corner-tr.svg'),
        url('../images/design/ornaments/corner-bl.svg'),
        url('../images/design/ornaments/corner-br.svg') !important;
    background-position:
        5px 5px,
        calc(100% - 5px) 5px,
        5px calc(100% - 5px),
        calc(100% - 5px) calc(100% - 5px) !important;
    background-size: 28px 28px !important;
    background-repeat: no-repeat !important;
    border: 1px solid #b98749 !important;
    padding: 0 8px 8px !important;
}
.portal-showcase:before { display:none !important; }
.portal-showcase .portal-board-title {
    min-height: 43px !important;
    padding: 0 16px 0 8px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(172,119,54,.34) !important;
}
.portal-showcase .portal-board-title h2 {
    color: #4f3025 !important;
    font: 700 15px Georgia, 'Times New Roman', serif !important;
    letter-spacing: .025em !important;
}
.portal-showcase .portal-board-title h2:before {
    width: 25px !important;
    height: 25px !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url('../images/design/ornaments/preview-emblem.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
}
.portal-showcase .portal-board-title span {
    color: #6f7677 !important;
    font-size: 10px !important;
}
.portal-showcase-frame { padding: 0 !important; }
.portal-showcase-stage {
    border: 1px solid #9d7649 !important;
    box-shadow: 0 2px 5px rgba(48,27,10,.17) !important;
}
.portal-slide-dots button.is-active {
    background: #2a618f !important;
    border-color: #1d4d74 !important;
}

@media (max-width: 1050px) {
    .portal-home-intro { padding-right: 300px !important; }
}
@media (max-width: 800px) {
    body.bakbakan-portal-body::before {
        background-position: center top !important;
        background-size: cover !important;
    }
    .portal-home-intro {
        min-height: 0 !important;
        padding: 18px !important;
        background-image: linear-gradient(rgba(255,250,240,.96),rgba(255,250,240,.96)) !important;
    }
    .portal-nav-icon {
        width: 15px !important;
        height: 15px !important;
        flex-basis: 15px !important;
    }
}
@media (max-width: 560px) {
    .portal-main { padding: 9px !important; }
    .portal-showcase { width:100% !important; padding: 0 4px 4px !important; }
    .portal-home-intro h1 { font-size: 20px !important; }
    .portal-nav-icon { width: 12px !important; height:12px !important; flex-basis:12px !important; }
    .portal-nav a { gap: 3px !important; font-family: Arial, Helvetica, sans-serif !important; }
}

/* V37: closer reference proportions and section framing */
@media (min-width: 801px) {
    /* Slightly wider centered portal like the approved sample. */
    .portal-width {
        width: min(1060px, calc(100% - 28px)) !important;
    }

    /* Stronger framed navigation bar. */
    .portal-nav-inner {
        border: 2px solid #8a5720 !important;
        border-top-color: #d0a056 !important;
        border-bottom-color: #5f3817 !important;
        outline: 2px solid rgba(224,176,88,.48) !important;
        outline-offset: 3px !important;
        box-shadow:
            0 4px 10px rgba(32,17,7,.35),
            inset 0 1px rgba(255,255,255,.12),
            inset 0 -1px rgba(0,0,0,.25) !important;
    }

    .portal-nav a {
        min-height: 44px !important;
        padding: 10px 12px !important;
        gap: 9px !important;
    }
    .portal-nav-icon {
        width: 21px !important;
        height: 21px !important;
        flex-basis: 21px !important;
    }

    /* The outer main panel should stay quiet; ornaments belong to each section. */
    .portal-main {
        background-image: none !important;
        padding: 10px !important;
        border-color: rgba(164,113,53,.72) !important;
    }

    /* Intro panel: match sample proportions and put four ornaments on this panel. */
    .portal-home-intro {
        min-height: 190px !important;
        margin: 0 0 12px !important;
        padding: 24px 395px 22px 28px !important;
        background-color: rgba(255,250,239,.97) !important;
        background-image:
            url('../images/design/ornaments/corner-tl.svg'),
            url('../images/design/ornaments/corner-tr.svg'),
            url('../images/design/ornaments/corner-bl.svg'),
            url('../images/design/ornaments/corner-br.svg'),
            linear-gradient(90deg, rgba(255,250,239,1) 0%, rgba(255,250,239,.98) 48%, rgba(255,250,239,.72) 70%, rgba(255,250,239,.48) 100%),
            url('../images/design/intro-city-fade.png') !important;
        background-position:
            7px 7px,
            calc(100% - 7px) 7px,
            7px calc(100% - 7px),
            calc(100% - 7px) calc(100% - 7px),
            center,
            right bottom !important;
        background-size:
            38px 38px,
            38px 38px,
            38px 38px,
            38px 38px,
            100% 100%,
            auto 100% !important;
        background-repeat: no-repeat !important;
        border: 1px solid #b9813f !important;
        box-shadow:
            inset 0 0 0 3px rgba(255,255,255,.70),
            inset 0 0 0 4px rgba(199,151,82,.20) !important;
    }
    .portal-home-intro:before {
        inset: 8px !important;
        border-color: rgba(171,112,48,.24) !important;
    }
    .portal-home-intro h1 {
        font-size: 29px !important;
        white-space: nowrap;
    }
    .portal-home-intro p {
        max-width: 600px !important;
    }

    /* Screenshot Preview should occupy almost the full content width, like the sample. */
    .portal-showcase {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 10px 12px !important;
        background-color: rgba(255,249,236,.98) !important;
        background-image:
            url('../images/design/ornaments/corner-tl.svg'),
            url('../images/design/ornaments/corner-tr.svg'),
            url('../images/design/ornaments/corner-bl.svg'),
            url('../images/design/ornaments/corner-br.svg') !important;
        background-position:
            7px 7px,
            calc(100% - 7px) 7px,
            7px calc(100% - 7px),
            calc(100% - 7px) calc(100% - 7px) !important;
        background-size: 38px 38px !important;
        background-repeat: no-repeat !important;
        border: 1px solid #b9813f !important;
        box-shadow:
            inset 0 0 0 3px rgba(255,255,255,.68),
            inset 0 0 0 4px rgba(199,151,82,.18) !important;
    }
    .portal-showcase .portal-board-title {
        min-height: 47px !important;
        padding: 0 24px 0 40px !important;
        border-bottom: 1px solid rgba(166,108,47,.30) !important;
    }
    .portal-showcase .portal-board-title h2 {
        font-size: 16px !important;
    }
    .portal-showcase .portal-board-title h2:before {
        width: 27px !important;
        height: 27px !important;
    }

    /* Intentional inner margin around the game screenshot, matching the sample. */
    .portal-showcase-frame {
        width: 88% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    .portal-showcase-stage {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        border: 1px solid #92704b !important;
        box-shadow: 0 2px 6px rgba(46,26,10,.20) !important;
    }
    .portal-slide-dots {
        bottom: 10px !important;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .portal-home-intro {
        padding-right: 330px !important;
    }
    .portal-home-intro h1 {
        white-space: normal;
    }
}


/* V38: apply the approved ornate reference treatment */
@media (min-width: 801px) {
    /* Navigation: gold diamond endcaps and clean active icon. */
    .portal-nav-inner {
        position: relative !important;
        overflow: visible !important;
        outline: none !important;
        border: 2px solid #8c571d !important;
        box-shadow:
            0 0 0 2px rgba(223,174,77,.64),
            0 4px 11px rgba(40,20,6,.34),
            inset 0 1px rgba(255,255,255,.12),
            inset 0 -1px rgba(0,0,0,.28) !important;
    }
    .portal-nav-inner:before,
    .portal-nav-inner:after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        width: 26px !important;
        height: 26px !important;
        z-index: 5 !important;
        background:
            linear-gradient(135deg, transparent 42%, #d7aa55 43% 48%, transparent 49%),
            linear-gradient(45deg, transparent 42%, #9a631f 43% 48%, transparent 49%),
            rgba(15,49,79,.88) !important;
        border: 2px solid #c8973e !important;
        box-shadow: 0 0 0 2px rgba(80,45,13,.65), inset 0 0 0 2px rgba(241,207,125,.35) !important;
        transform: translateY(-50%) rotate(45deg) !important;
        pointer-events: none !important;
    }
    .portal-nav-inner:before { left: -16px !important; }
    .portal-nav-inner:after  { right: -16px !important; bottom: auto !important; }

    /* Never paint a square behind the inline SVG icon. */
    .portal-nav a.is-active .portal-nav-icon,
    .portal-nav a[aria-current="page"] .portal-nav-icon {
        background: transparent !important;
        background-color: transparent !important;
        -webkit-mask: none !important;
        mask: none !important;
        fill: #a9231d !important;
        color: #a9231d !important;
        box-shadow: none !important;
    }

    /* Approved intro frame: larger ornate corners and fine inner rule. */
    .portal-home-intro {
        background-image:
            url('../images/design/ornaments/corner-tl.svg'),
            url('../images/design/ornaments/corner-tr.svg'),
            url('../images/design/ornaments/corner-bl.svg'),
            url('../images/design/ornaments/corner-br.svg'),
            linear-gradient(90deg, rgba(255,250,239,1) 0%, rgba(255,250,239,.98) 48%, rgba(255,250,239,.72) 70%, rgba(255,250,239,.48) 100%),
            url('../images/design/intro-city-fade.png') !important;
        background-position:
            7px 7px,
            calc(100% - 7px) 7px,
            7px calc(100% - 7px),
            calc(100% - 7px) calc(100% - 7px),
            center,
            right bottom !important;
        background-size:
            50px 50px,
            50px 50px,
            50px 50px,
            50px 50px,
            100% 100%,
            auto 100% !important;
        background-repeat: no-repeat !important;
        border: 2px solid #a86e2d !important;
        box-shadow:
            inset 0 0 0 3px rgba(255,255,255,.72),
            inset 0 0 0 5px rgba(202,156,79,.22),
            0 2px 5px rgba(55,30,10,.13) !important;
    }

    /* Screenshot panel: exact gallery feel from the approved sample. */
    .portal-showcase {
        padding: 0 18px 18px !important;
        background-image:
            url('../images/design/ornaments/corner-tl.svg'),
            url('../images/design/ornaments/corner-tr.svg'),
            url('../images/design/ornaments/corner-bl.svg'),
            url('../images/design/ornaments/corner-br.svg') !important;
        background-position:
            7px 7px,
            calc(100% - 7px) 7px,
            7px calc(100% - 7px),
            calc(100% - 7px) calc(100% - 7px) !important;
        background-size: 50px 50px !important;
        background-repeat: no-repeat !important;
        border: 2px solid #a86e2d !important;
        box-shadow:
            inset 0 0 0 3px rgba(255,255,255,.70),
            inset 0 0 0 5px rgba(202,156,79,.20),
            0 3px 8px rgba(55,30,10,.16) !important;
    }
    .portal-showcase .portal-board-title {
        min-height: 46px !important;
        padding: 0 30px 0 44px !important;
        border-bottom: 1px solid rgba(154,98,34,.30) !important;
    }
    .portal-showcase .portal-board-title h2 {
        font-size: 14px !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }
    .portal-showcase .portal-board-title h2:before {
        width: 27px !important;
        height: 27px !important;
        flex: 0 0 27px !important;
        background-image: url('../images/design/ornaments/gallery-icon.svg') !important;
        background-color: transparent !important;
        background-position: center !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .portal-showcase-frame {
        width: 94% !important;
        margin: 0 auto !important;
    }
    .portal-showcase-stage {
        aspect-ratio: 16 / 7.2 !important;
        overflow: hidden !important;
    }
    .portal-slide img {
        object-fit: cover !important;
        object-position: center center !important;
    }
    .portal-slide-caption {
        display: none !important;
    }
    .portal-slide-dots {
        bottom: 8px !important;
    }

    /* Every non-home tab/page gets the four ornate edge corners. */
    .portal-main-inner {
        position: relative !important;
        padding: 22px !important;
        background-color: rgba(255,248,234,.965) !important;
        background-image:
            url('../images/design/ornaments/corner-tl.svg'),
            url('../images/design/ornaments/corner-tr.svg'),
            url('../images/design/ornaments/corner-bl.svg'),
            url('../images/design/ornaments/corner-br.svg') !important;
        background-position:
            7px 7px,
            calc(100% - 7px) 7px,
            7px calc(100% - 7px),
            calc(100% - 7px) calc(100% - 7px) !important;
        background-size: 50px 50px !important;
        background-repeat: no-repeat !important;
        border: 2px solid #a86e2d !important;
        box-shadow:
            inset 0 0 0 3px rgba(255,255,255,.70),
            inset 0 0 0 5px rgba(202,156,79,.20),
            0 4px 12px rgba(56,29,10,.20) !important;
    }
    .portal-main-inner:before {
        content: "";
        position: absolute;
        inset: 9px;
        border: 1px solid rgba(171,112,48,.24);
        pointer-events: none;
        z-index: 0;
    }
    .portal-main-inner > * {
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 800px) {
    /* Keep mobile clean; use the gallery icon but no large desktop flourishes. */
    .portal-nav a.is-active .portal-nav-icon,
    .portal-nav a[aria-current="page"] .portal-nav-icon {
        background: transparent !important;
        background-color: transparent !important;
        fill: #a9231d !important;
        color: #a9231d !important;
    }
    .portal-showcase .portal-board-title h2:before {
        background-image: url('../images/design/ornaments/gallery-icon.svg') !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }
}


/* V39: match approved corner/title/town reference */
@media (min-width: 801px) {
    /* Hero title: two centered lines with RETURNS centered and gold rules. */
    .portal-hero-copy {
        width: min(100%, 390px) !important;
        max-width: 390px !important;
        text-align: center !important;
        transform: translateY(-6px) !important;
    }
    .portal-hero-title {
        display: block !important;
        color: #fff7ea !important;
        font-family: Georgia, 'Times New Roman', serif !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.46), 0 1px 1px rgba(70,22,12,.85) !important;
    }
    .portal-hero-title-top,
    .portal-hero-title-bottom {
        display: block !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    .portal-hero-title-top {
        font-size: 24px !important;
        line-height: 1.02 !important;
        letter-spacing: .018em !important;
    }
    .portal-hero-title-bottom {
        position: relative !important;
        width: max-content !important;
        min-width: 210px !important;
        margin: 1px auto 0 !important;
        padding: 0 55px !important;
        font-size: 22px !important;
        line-height: 1.05 !important;
        letter-spacing: .035em !important;
    }
    .portal-hero-title-bottom:before,
    .portal-hero-title-bottom:after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        width: 44px !important;
        height: 1px !important;
        background: linear-gradient(90deg, rgba(222,177,91,.15), #d7a856) !important;
        box-shadow: 0 1px rgba(80,30,12,.30) !important;
    }
    .portal-hero-title-bottom:before { left: 0 !important; }
    .portal-hero-title-bottom:after {
        right: 0 !important;
        transform: scaleX(-1) !important;
    }
    .portal-hero-meta {
        margin-top: 7px !important;
        text-align: center !important;
        color: #fff1de !important;
    }

    /* Exact-style ornate corner treatment, used by home sections and inner tabs. */
    .portal-home-intro,
    .portal-showcase,
    .portal-main-inner {
        background-position:
            4px 4px,
            calc(100% - 4px) 4px,
            4px calc(100% - 4px),
            calc(100% - 4px) calc(100% - 4px),
            center,
            right center !important;
        background-size:
            64px 64px,
            64px 64px,
            64px 64px,
            64px 64px,
            100% 100%,
            auto 100% !important;
    }

    /* Home intro: use the reference town artwork and keep it clearly visible. */
    .portal-home-intro {
        background-image:
            url('../images/design/ornaments/corner-tl-v39.svg'),
            url('../images/design/ornaments/corner-tr-v39.svg'),
            url('../images/design/ornaments/corner-bl-v39.svg'),
            url('../images/design/ornaments/corner-br-v39.svg'),
            linear-gradient(90deg,
                rgba(255,250,239,1) 0%,
                rgba(255,250,239,.99) 43%,
                rgba(255,250,239,.78) 59%,
                rgba(255,250,239,.34) 76%,
                rgba(255,250,239,.08) 100%),
            url('../images/design/intro-town-reference.png') !important;
        background-position:
            4px 4px,
            calc(100% - 4px) 4px,
            4px calc(100% - 4px),
            calc(100% - 4px) calc(100% - 4px),
            center,
            right 12px center !important;
        background-size:
            64px 64px,
            64px 64px,
            64px 64px,
            64px 64px,
            100% 100%,
            385px auto !important;
        padding-right: 405px !important;
        border: 1px solid #b77c32 !important;
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,.82),
            inset 0 0 0 4px rgba(196,145,69,.20),
            0 2px 6px rgba(61,32,12,.14) !important;
    }
    .portal-home-intro:before {
        inset: 7px !important;
        border: 1px solid rgba(173,113,43,.30) !important;
    }

    /* Screenshot panel uses the same approved corner family. */
    .portal-showcase {
        background-image:
            url('../images/design/ornaments/corner-tl-v39.svg'),
            url('../images/design/ornaments/corner-tr-v39.svg'),
            url('../images/design/ornaments/corner-bl-v39.svg'),
            url('../images/design/ornaments/corner-br-v39.svg') !important;
        background-position:
            4px 4px,
            calc(100% - 4px) 4px,
            4px calc(100% - 4px),
            calc(100% - 4px) calc(100% - 4px) !important;
        background-size: 64px 64px !important;
        background-repeat: no-repeat !important;
        border: 1px solid #b77c32 !important;
    }
    .portal-showcase .portal-board-title {
        padding-left: 42px !important;
    }
    .portal-showcase .portal-board-title h2 {
        font-size: 13px !important;
        letter-spacing: .005em !important;
    }

    /* All inner tabs/pages use the same four corner design. */
    .portal-main-inner {
        background-image:
            url('../images/design/ornaments/corner-tl-v39.svg'),
            url('../images/design/ornaments/corner-tr-v39.svg'),
            url('../images/design/ornaments/corner-bl-v39.svg'),
            url('../images/design/ornaments/corner-br-v39.svg') !important;
        background-position:
            4px 4px,
            calc(100% - 4px) 4px,
            4px calc(100% - 4px),
            calc(100% - 4px) calc(100% - 4px) !important;
        background-size: 64px 64px !important;
        background-repeat: no-repeat !important;
        border: 1px solid #b77c32 !important;
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,.78),
            inset 0 0 0 4px rgba(196,145,69,.20),
            0 4px 12px rgba(56,29,10,.18) !important;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .portal-home-intro {
        padding-right: 330px !important;
        background-size:
            58px 58px,
            58px 58px,
            58px 58px,
            58px 58px,
            100% 100%,
            315px auto !important;
    }
    .portal-hero-title-top { font-size: 22px !important; }
    .portal-hero-title-bottom { font-size: 20px !important; }
}

/* V40: annotated cleanup — simpler ornaments, sharp town, full screenshots */
@media (min-width: 801px) {
    /* Navigation endcaps: lightweight gold filigree, no blue diamond block. */
    .portal-nav-inner:before,
    .portal-nav-inner:after {
        width: 30px !important;
        height: 44px !important;
        top: 50% !important;
        border: 0 !important;
        box-shadow: none !important;
        background: url('../images/design/ornaments/nav-endcap-v40.svg') center / contain no-repeat !important;
        transform: translateY(-50%) !important;
        opacity: .96 !important;
    }
    .portal-nav-inner:before { left: -23px !important; }
    .portal-nav-inner:after {
        right: -23px !important;
        left: auto !important;
        transform: translateY(-50%) scaleX(-1) !important;
    }

    /* Reference-like corners without the multiple nested L-lines from V39. */
    .portal-home-intro,
    .portal-showcase,
    .portal-main-inner {
        background-size:
            56px 56px,
            56px 56px,
            56px 56px,
            56px 56px !important;
    }

    .portal-home-intro {
        background-color: #fff9ed !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v40.png'),
            url('../images/design/ornaments/corner-tr-v40.png'),
            url('../images/design/ornaments/corner-bl-v40.png'),
            url('../images/design/ornaments/corner-br-v40.png'),
            url('../images/design/intro-town-v40.png') !important;
        background-position:
            2px 2px,
            calc(100% - 2px) 2px,
            2px calc(100% - 2px),
            calc(100% - 2px) calc(100% - 2px),
            right 4px center !important;
        background-size:
            56px 56px,
            56px 56px,
            56px 56px,
            56px 56px,
            650px auto !important;
        background-repeat: no-repeat !important;
        border: 1px solid #b77b31 !important;
        box-shadow: 0 2px 6px rgba(57,31,10,.14) !important;
        padding-right: 400px !important;
    }
    /* Remove the extra nested line that made the intro look over-framed. */
    .portal-home-intro:before {
        display: none !important;
        content: none !important;
    }

    /* Screenshot panel: same simpler reference corners, one clean frame. */
    .portal-showcase {
        background-color: #fff9ed !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v40.png'),
            url('../images/design/ornaments/corner-tr-v40.png'),
            url('../images/design/ornaments/corner-bl-v40.png'),
            url('../images/design/ornaments/corner-br-v40.png') !important;
        background-position:
            2px 2px,
            calc(100% - 2px) 2px,
            2px calc(100% - 2px),
            calc(100% - 2px) calc(100% - 2px) !important;
        background-size: 56px 56px !important;
        background-repeat: no-repeat !important;
        border: 1px solid #b77b31 !important;
        box-shadow: 0 3px 8px rgba(57,31,10,.14) !important;
        padding: 0 16px 18px !important;
    }
    .portal-showcase .portal-board-title {
        min-height: 42px !important;
        padding: 0 26px 0 40px !important;
        border-bottom: 1px solid rgba(155,99,37,.24) !important;
    }
    .portal-showcase .portal-board-title h2 {
        font-size: 12px !important;
        line-height: 1 !important;
        letter-spacing: .015em !important;
        white-space: nowrap !important;
    }
    .portal-showcase .portal-board-title h2:before {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }

    /* Preserve the full original 4:3 screenshots. No crop. */
    .portal-showcase-frame {
        width: 82% !important;
        max-width: 820px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #101d27 !important;
    }
    .portal-showcase-stage {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        overflow: hidden !important;
        background: #101d27 !important;
        border: 1px solid #92704b !important;
    }
    .portal-slide,
    .portal-slide img {
        width: 100% !important;
        height: 100% !important;
    }
    .portal-slide img {
        object-fit: contain !important;
        object-position: center center !important;
        background: #101d27 !important;
    }

    /* Inner tabs use the same cleaned-up corner family. */
    .portal-main-inner {
        background-color: rgba(255,249,237,.97) !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v40.png'),
            url('../images/design/ornaments/corner-tr-v40.png'),
            url('../images/design/ornaments/corner-bl-v40.png'),
            url('../images/design/ornaments/corner-br-v40.png') !important;
        background-position:
            2px 2px,
            calc(100% - 2px) 2px,
            2px calc(100% - 2px),
            calc(100% - 2px) calc(100% - 2px) !important;
        background-size: 56px 56px !important;
        background-repeat: no-repeat !important;
        border: 1px solid #b77b31 !important;
        box-shadow: 0 4px 12px rgba(56,29,10,.17) !important;
    }
    .portal-main-inner:before {
        display: none !important;
        content: none !important;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .portal-home-intro {
        padding-right: 330px !important;
        background-size:
            50px 50px,
            50px 50px,
            50px 50px,
            50px 50px,
            540px auto !important;
    }
    .portal-showcase-frame {
        width: 86% !important;
    }
}

/* V41: SS5-reference corners + sharper intro town */
@media (min-width: 801px) {
    /* Navigation: replace the V40 X-like endcap with subtle frame corners from the SS5 reference. */
    .portal-nav-inner:before,
    .portal-nav-inner:after {
        content: "" !important;
        position: absolute !important;
        width: 34px !important;
        height: 34px !important;
        top: -3px !important;
        opacity: .96 !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        pointer-events: none !important;
        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }
    .portal-nav-inner:before {
        left: -3px !important;
        background-image: url('../images/design/ornaments/corner-tl-v41.png') !important;
        background-position: left top !important;
    }
    .portal-nav-inner:after {
        left: auto !important;
        right: -3px !important;
        bottom: auto !important;
        background-image: url('../images/design/ornaments/corner-tr-v41.png') !important;
        background-position: right top !important;
    }

    /* Use the actual SS5-style filigree family on every framed panel. */
    .portal-home-intro,
    .portal-showcase,
    .portal-main-inner {
        border: 1px solid #b9853f !important;
        box-shadow: 0 2px 7px rgba(57,31,10,.13) !important;
    }

    .portal-home-intro {
        background-color: #fff9ed !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v41.png'),
            url('../images/design/ornaments/corner-tr-v41.png'),
            url('../images/design/ornaments/corner-bl-v41.png'),
            url('../images/design/ornaments/corner-br-v41.png'),
            url('../images/design/intro-town-v41.jpg') !important;
        background-position:
            2px 2px,
            calc(100% - 2px) 2px,
            2px calc(100% - 2px),
            calc(100% - 2px) calc(100% - 2px),
            right center !important;
        background-size:
            64px 64px,
            64px 64px,
            64px 64px,
            64px 64px,
            510px 263px !important;
        background-repeat: no-repeat !important;
        padding-right: 390px !important;
    }
    .portal-home-intro:before,
    .portal-home-intro:after {
        display: none !important;
        content: none !important;
    }

    .portal-showcase {
        background-color: #fff9ed !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v41.png'),
            url('../images/design/ornaments/corner-tr-v41.png'),
            url('../images/design/ornaments/corner-bl-v41.png'),
            url('../images/design/ornaments/corner-br-v41.png') !important;
        background-position:
            2px 2px,
            calc(100% - 2px) 2px,
            2px calc(100% - 2px),
            calc(100% - 2px) calc(100% - 2px) !important;
        background-size: 64px 64px !important;
        background-repeat: no-repeat !important;
    }

    .portal-main-inner {
        background-color: rgba(255,249,237,.975) !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v41.png'),
            url('../images/design/ornaments/corner-tr-v41.png'),
            url('../images/design/ornaments/corner-bl-v41.png'),
            url('../images/design/ornaments/corner-br-v41.png') !important;
        background-position:
            2px 2px,
            calc(100% - 2px) 2px,
            2px calc(100% - 2px),
            calc(100% - 2px) calc(100% - 2px) !important;
        background-size: 64px 64px !important;
        background-repeat: no-repeat !important;
    }
    .portal-main-inner:before,
    .portal-main-inner:after {
        display: none !important;
        content: none !important;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .portal-home-intro {
        padding-right: 325px !important;
        background-size:
            56px 56px,
            56px 56px,
            56px 56px,
            56px 56px,
            430px 222px !important;
    }
}

/* V42: simplified reference framing + clearer Morroc town + full screenshot preservation */
@media (min-width: 801px) {
    /* Remove decorative nav end-corners; the menu itself stays clean. */
    .portal-nav-inner:before,
    .portal-nav-inner:after {
        display: none !important;
        content: none !important;
        background-image: none !important;
    }

    /* One clean frame per Home section, with only four modest SS5-style corners. */
    .portal-home-intro,
    .portal-showcase {
        border: 1px solid #b9853f !important;
        box-shadow: 0 2px 7px rgba(57,31,10,.12) !important;
        background-color: #fff9ed !important;
    }

    .portal-home-intro {
        min-height: 174px !important;
        padding: 22px 390px 22px 28px !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v42.png'),
            url('../images/design/ornaments/corner-tr-v42.png'),
            url('../images/design/ornaments/corner-bl-v42.png'),
            url('../images/design/ornaments/corner-br-v42.png'),
            url('../images/design/intro-town-v42.png') !important;
        background-position:
            5px 5px,
            calc(100% - 5px) 5px,
            5px calc(100% - 5px),
            calc(100% - 5px) calc(100% - 5px),
            right center !important;
        background-size:
            38px 40px,
            38px 40px,
            38px 40px,
            38px 40px,
            520px auto !important;
        background-repeat: no-repeat !important;
    }
    .portal-home-intro:before,
    .portal-home-intro:after {
        display: none !important;
        content: none !important;
    }

    .portal-showcase {
        padding: 10px 18px 16px !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v42.png'),
            url('../images/design/ornaments/corner-tr-v42.png'),
            url('../images/design/ornaments/corner-bl-v42.png'),
            url('../images/design/ornaments/corner-br-v42.png') !important;
        background-position:
            5px 5px,
            calc(100% - 5px) 5px,
            5px calc(100% - 5px),
            calc(100% - 5px) calc(100% - 5px) !important;
        background-size: 38px 40px !important;
        background-repeat: no-repeat !important;
    }

    .portal-board-title {
        padding: 0 28px 8px !important;
    }

    /* Keep the full original 4:3 screenshots visible. Never crop them. */
    .portal-showcase-frame {
        width: min(80%, 760px) !important;
        max-width: 760px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #101d27 !important;
    }
    .portal-showcase-stage {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        background: #101d27 !important;
        border: 1px solid #92704b !important;
    }
    .portal-slide,
    .portal-slide img {
        width: 100% !important;
        height: 100% !important;
    }
    .portal-slide img {
        object-fit: contain !important;
        object-position: center center !important;
        background: #101d27 !important;
    }

    /* Inner pages: only one four-corner frame around the main content. */
    .portal-main-inner {
        background-color: rgba(255,249,237,.975) !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v42.png'),
            url('../images/design/ornaments/corner-tr-v42.png'),
            url('../images/design/ornaments/corner-bl-v42.png'),
            url('../images/design/ornaments/corner-br-v42.png') !important;
        background-position:
            6px 6px,
            calc(100% - 6px) 6px,
            6px calc(100% - 6px),
            calc(100% - 6px) calc(100% - 6px) !important;
        background-size: 38px 40px !important;
        background-repeat: no-repeat !important;
        border: 1px solid #b9853f !important;
        box-shadow: 0 3px 10px rgba(57,31,10,.13) !important;
    }
    .portal-main-inner:before,
    .portal-main-inner:after {
        display: none !important;
        content: none !important;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .portal-home-intro {
        padding-right: 320px !important;
        background-size:
            34px 36px,
            34px 36px,
            34px 36px,
            34px 36px,
            430px auto !important;
    }
    .portal-showcase-frame {
        width: 86% !important;
    }
}


/* V43: inner-page ornament spacing cleanup */
@media (min-width: 801px) {
    /* Keep Home exactly as V42; only inner tabs/pages are adjusted. */
    .portal-main-inner {
        padding: 27px 24px 24px 34px !important;
        background-position:
            8px 8px,
            calc(100% - 8px) 8px,
            8px calc(100% - 8px),
            calc(100% - 8px) calc(100% - 8px) !important;
        background-size: 25px 27px !important;
    }

    /* Ensure the first heading/eyebrow starts clear of the top-left ornament. */
    .portal-main-inner > :first-child {
        margin-top: 0 !important;
    }
}

@media (max-width: 800px) {
    /* Mobile stays compact; ornaments are intentionally smaller. */
    .portal-main-inner {
        background-size: 22px 24px !important;
        background-position:
            6px 6px,
            calc(100% - 6px) 6px,
            6px calc(100% - 6px),
            calc(100% - 6px) calc(100% - 6px) !important;
    }
}


/* V45: restrained long-corner frame — elegant, not crowded */
@media (min-width: 801px) {
    /* No decorative endcaps on the nav; keep the frame focus on content panels. */
    .portal-nav-inner:before,
    .portal-nav-inner:after {
        display: none !important;
        content: none !important;
        background: none !important;
    }

    /* Home intro: one small long ornament per outer corner only. */
    .portal-home-intro {
        position: relative !important;
        border: 1px solid #ad7a31 !important;
        padding: 24px 350px 22px 36px !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v44.png'),
            url('../images/design/ornaments/corner-tr-v44.png'),
            url('../images/design/ornaments/corner-bl-v44.png'),
            url('../images/design/ornaments/corner-br-v44.png'),
            url('../images/design/intro-town-v42.png') !important;
        background-position:
            4px 4px,
            calc(100% - 4px) 4px,
            4px calc(100% - 4px),
            calc(100% - 4px) calc(100% - 4px),
            right center !important;
        background-size:
            28px 48px,
            28px 48px,
            28px 52px,
            28px 52px,
            500px auto !important;
        background-repeat: no-repeat !important;
        box-shadow: 0 3px 10px rgba(60,34,12,.14) !important;
    }
    .portal-home-intro:before,
    .portal-home-intro:after {
        display: none !important;
        content: none !important;
    }

    /* Screenshot panel: same restrained frame, with generous breathing room. */
    .portal-showcase {
        position: relative !important;
        border: 1px solid #ad7a31 !important;
        padding: 12px 18px 16px !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v44.png'),
            url('../images/design/ornaments/corner-tr-v44.png'),
            url('../images/design/ornaments/corner-bl-v44.png'),
            url('../images/design/ornaments/corner-br-v44.png') !important;
        background-position:
            4px 4px,
            calc(100% - 4px) 4px,
            4px calc(100% - 4px),
            calc(100% - 4px) calc(100% - 4px) !important;
        background-size:
            28px 48px,
            28px 48px,
            28px 52px,
            28px 52px !important;
        background-repeat: no-repeat !important;
    }
    .portal-showcase .portal-board-title {
        padding: 0 34px 8px !important;
    }

    /* Keep every screenshot complete — never crop. */
    .portal-showcase-frame {
        width: min(80%, 760px) !important;
        max-width: 760px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #101d27 !important;
    }
    .portal-showcase-stage {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        background: #101d27 !important;
    }
    .portal-slide,
    .portal-slide img {
        width: 100% !important;
        height: 100% !important;
    }
    .portal-slide img {
        object-fit: contain !important;
        object-position: center center !important;
        background: #101d27 !important;
    }

    /* Inner pages: same corner family, smaller still so headings stay clear. */
    .portal-main-inner {
        position: relative !important;
        padding: 28px 26px 26px 36px !important;
        border: 1px solid #ad7a31 !important;
        background-color: rgba(255,249,237,.975) !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v44.png'),
            url('../images/design/ornaments/corner-tr-v44.png'),
            url('../images/design/ornaments/corner-bl-v44.png'),
            url('../images/design/ornaments/corner-br-v44.png') !important;
        background-position:
            5px 5px,
            calc(100% - 5px) 5px,
            5px calc(100% - 5px),
            calc(100% - 5px) calc(100% - 5px) !important;
        background-size:
            24px 42px,
            24px 42px,
            24px 46px,
            24px 46px !important;
        background-repeat: no-repeat !important;
        box-shadow: 0 3px 10px rgba(60,34,12,.13) !important;
    }
    .portal-main-inner:before,
    .portal-main-inner:after {
        display: none !important;
        content: none !important;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .portal-home-intro {
        padding-right: 300px !important;
        background-size:
            24px 42px,
            24px 42px,
            24px 46px,
            24px 46px,
            420px auto !important;
    }
}

@media (max-width: 800px) {
    /* Mobile: tiny ornaments only, to preserve useful screen space. */
    .portal-home-intro,
    .portal-showcase,
    .portal-main-inner {
        background-image:
            url('../images/design/ornaments/corner-tl-v44.png'),
            url('../images/design/ornaments/corner-tr-v44.png'),
            url('../images/design/ornaments/corner-bl-v44.png'),
            url('../images/design/ornaments/corner-br-v44.png') !important;
        background-position:
            3px 3px,
            calc(100% - 3px) 3px,
            3px calc(100% - 3px),
            calc(100% - 3px) calc(100% - 3px) !important;
        background-size:
            18px 31px,
            18px 31px,
            18px 34px,
            18px 34px !important;
        background-repeat: no-repeat !important;
    }
}

/* V46: match the approved sample layout + Morroc town treatment */
@media (min-width: 801px) {
    /* The Home page should read as two clean framed cards, not a framed card inside another card. */
    .portal-main-home {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Approved sample corner family: one clean motif per outer corner only. */
    .portal-home-intro,
    .portal-showcase {
        border: 1px solid #ad7a31 !important;
        background-color: #fff9ed !important;
        box-shadow: 0 3px 10px rgba(61,34,11,.15) !important;
        background-repeat: no-repeat !important;
    }

    .portal-home-intro {
        min-height: 205px !important;
        margin: 0 0 12px !important;
        padding: 30px 455px 28px 60px !important;
        overflow: hidden !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v46.png'),
            url('../images/design/ornaments/corner-tr-v46.png'),
            url('../images/design/ornaments/corner-bl-v46.png'),
            url('../images/design/ornaments/corner-br-v46.png'),
            url('../images/design/intro-town-v46.png') !important;
        background-position:
            0 0,
            100% 0,
            0 100%,
            100% 100%,
            right center !important;
        background-size:
            64px 64px,
            64px 64px,
            64px 64px,
            64px 64px,
            510px 195px !important;
    }
    .portal-home-intro:before,
    .portal-home-intro:after {
        display: none !important;
        content: none !important;
    }
    .portal-home-intro .portal-kicker {
        position: relative !important;
        z-index: 2 !important;
        font-size: 11px !important;
        letter-spacing: 1.4px !important;
    }
    .portal-home-intro h1 {
        position: relative !important;
        z-index: 2 !important;
        max-width: 560px !important;
        margin-top: 5px !important;
        font-size: 29px !important;
        line-height: 1.08 !important;
    }
    .portal-home-intro p {
        position: relative !important;
        z-index: 2 !important;
        max-width: 575px !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }
    .portal-home-actions {
        position: relative !important;
        z-index: 3 !important;
        margin-top: 16px !important;
    }
    .portal-home-intro .portal-button-primary {
        padding: 12px 22px !important;
        min-width: 170px !important;
        font-size: 16px !important;
    }

    .portal-showcase {
        margin: 0 !important;
        padding: 14px 34px 18px !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v46.png'),
            url('../images/design/ornaments/corner-tr-v46.png'),
            url('../images/design/ornaments/corner-bl-v46.png'),
            url('../images/design/ornaments/corner-br-v46.png') !important;
        background-position:
            0 0,
            100% 0,
            0 100%,
            100% 100% !important;
        background-size: 64px 64px !important;
    }
    .portal-showcase:before,
    .portal-showcase:after {
        display: none !important;
        content: none !important;
    }
    .portal-showcase .portal-board-title {
        padding: 0 20px 10px !important;
        min-height: 30px !important;
    }
    .portal-showcase .portal-board-title h2 {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }
    .portal-showcase .portal-board-title h2:before {
        width: 26px !important;
        height: 26px !important;
        margin-right: 9px !important;
    }
    .portal-showcase .portal-board-title span {
        font-size: 11px !important;
    }

    /* Full original 4:3 screenshot — never crop. */
    .portal-showcase-frame {
        width: min(82%, 800px) !important;
        max-width: 800px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #101d27 !important;
    }
    .portal-showcase-stage {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        background: #101d27 !important;
        border: 1px solid #92704b !important;
    }
    .portal-slide,
    .portal-slide img {
        width: 100% !important;
        height: 100% !important;
    }
    .portal-slide img {
        object-fit: contain !important;
        object-position: center center !important;
        background: #101d27 !important;
    }

    /* Inner pages use the same approved frame language, with extra content clearance. */
    .portal-main-inner {
        position: relative !important;
        padding: 38px 32px 30px 48px !important;
        border: 1px solid #ad7a31 !important;
        background-color: rgba(255,249,237,.98) !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v46.png'),
            url('../images/design/ornaments/corner-tr-v46.png'),
            url('../images/design/ornaments/corner-bl-v46.png'),
            url('../images/design/ornaments/corner-br-v46.png') !important;
        background-position:
            0 0,
            100% 0,
            0 100%,
            100% 100% !important;
        background-size: 54px 54px !important;
        background-repeat: no-repeat !important;
        box-shadow: 0 3px 10px rgba(61,34,11,.14) !important;
    }
    .portal-main-inner:before,
    .portal-main-inner:after {
        display: none !important;
        content: none !important;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .portal-home-intro {
        padding-right: 350px !important;
        background-size:
            56px 56px,
            56px 56px,
            56px 56px,
            56px 56px,
            430px 164px !important;
    }
    .portal-showcase-frame {
        width: 86% !important;
    }
}

@media (max-width: 800px) {
    /* Keep the approved decorative family on mobile, but small enough not to steal space. */
    .portal-home-intro,
    .portal-showcase,
    .portal-main-inner {
        background-image:
            url('../images/design/ornaments/corner-tl-v46.png'),
            url('../images/design/ornaments/corner-tr-v46.png'),
            url('../images/design/ornaments/corner-bl-v46.png'),
            url('../images/design/ornaments/corner-br-v46.png') !important;
        background-position:
            0 0,
            100% 0,
            0 100%,
            100% 100% !important;
        background-size: 30px 30px !important;
        background-repeat: no-repeat !important;
    }
    .portal-home-intro {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .portal-showcase-frame {
        width: 100% !important;
        max-width: 100% !important;
    }
    .portal-showcase-stage {
        aspect-ratio: 4 / 3 !important;
    }
    .portal-slide img {
        object-fit: contain !important;
    }
}

/* V47: clean floral corners + seamless Morroc town panel */
@media (min-width: 801px) {
    /* Keep Home as two separate clean panels. */
    .portal-main-home {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .portal-home-intro,
    .portal-showcase,
    .portal-main-inner {
        border: 1px solid #b98a42 !important;
        background-color: #fff9ed !important;
        background-image:
            url('../images/design/ornaments/floral-corner-tl-v47.svg'),
            url('../images/design/ornaments/floral-corner-tr-v47.svg'),
            url('../images/design/ornaments/floral-corner-bl-v47.svg'),
            url('../images/design/ornaments/floral-corner-br-v47.svg') !important;
        background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px) !important;
        background-repeat: no-repeat !important;
        box-shadow:
            inset 0 0 0 3px rgba(238,216,172,.30),
            0 3px 10px rgba(64,34,10,.14) !important;
    }

    /* One continuous parchment panel; the town is a separate transparent layer. */
    .portal-home-intro {
        position: relative !important;
        isolation: isolate !important;
        min-height: 196px !important;
        margin: 0 0 12px !important;
        padding: 30px 455px 26px 48px !important;
        overflow: hidden !important;
        background-size: 46px 46px !important;
    }
    .portal-home-intro::before {
        display: none !important;
        content: none !important;
    }
    .portal-home-intro::after {
        display: block !important;
        content: "" !important;
        position: absolute !important;
        z-index: 0 !important;
        right: 8px !important;
        top: 7px !important;
        bottom: 7px !important;
        width: 525px !important;
        height: auto !important;
        border-radius: 0 !important;
        background: url('../images/design/intro-town-v47.png') no-repeat right center / 520px 195px !important;
        pointer-events: none !important;
        opacity: .97 !important;
    }
    .portal-home-intro > * {
        position: relative !important;
        z-index: 2 !important;
    }
    .portal-home-intro .portal-kicker {
        font-size: 11px !important;
        letter-spacing: 1.35px !important;
    }
    .portal-home-intro h1 {
        max-width: 580px !important;
        margin: 5px 0 6px !important;
        font-size: 29px !important;
        line-height: 1.08 !important;
    }
    .portal-home-intro p {
        max-width: 570px !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }
    .portal-home-actions {
        margin-top: 16px !important;
    }

    /* Screenshot panel: modest ornament size, full screenshot preserved. */
    .portal-showcase {
        margin: 0 !important;
        padding: 14px 28px 18px !important;
        background-size: 44px 44px !important;
    }
    .portal-showcase::before,
    .portal-showcase::after {
        display: none !important;
        content: none !important;
    }
    .portal-showcase .portal-board-title {
        padding: 0 18px 10px !important;
        min-height: 30px !important;
    }
    .portal-showcase .portal-board-title h2 {
        font-size: 17px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }
    .portal-showcase-frame {
        width: min(82%, 800px) !important;
        max-width: 800px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #101d27 !important;
    }
    .portal-showcase-stage {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        background: #101d27 !important;
        border: 1px solid #92704b !important;
    }
    .portal-slide,
    .portal-slide img {
        width: 100% !important;
        height: 100% !important;
    }
    .portal-slide img {
        object-fit: contain !important;
        object-position: center center !important;
        background: #101d27 !important;
    }

    /* All inner pages: same floral family, smaller and kept away from headings. */
    .portal-main-inner {
        position: relative !important;
        padding: 38px 34px 30px 44px !important;
        background-size: 40px 40px !important;
    }
    .portal-main-inner::before,
    .portal-main-inner::after {
        display: none !important;
        content: none !important;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .portal-home-intro {
        padding-right: 330px !important;
    }
    .portal-home-intro::after {
        width: 390px !important;
        background-size: 390px auto !important;
    }
    .portal-showcase-frame {
        width: 86% !important;
    }
}

@media (max-width: 800px) {
    .portal-home-intro,
    .portal-showcase,
    .portal-main-inner {
        background-image:
            url('../images/design/ornaments/floral-corner-tl-v47.svg'),
            url('../images/design/ornaments/floral-corner-tr-v47.svg'),
            url('../images/design/ornaments/floral-corner-bl-v47.svg'),
            url('../images/design/ornaments/floral-corner-br-v47.svg') !important;
        background-position: 3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px) !important;
        background-size: 24px 24px !important;
        background-repeat: no-repeat !important;
    }
    .portal-home-intro::after {
        display: none !important;
    }
    .portal-showcase-stage {
        aspect-ratio: 4 / 3 !important;
    }
    .portal-slide img {
        object-fit: contain !important;
    }
}

/* V48: nested Home frame using the selected long gold corner ornament */
@media (min-width: 801px) {
    /* Home is one framed composition again: outer shell + two framed children. */
    .portal-main-home {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .portal-home-shell {
        position: relative !important;
        margin: 0 !important;
        padding: 13px !important;
        border: 1px solid #9e6d2f !important;
        background-color: rgba(255,249,237,.96) !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v48.png'),
            url('../images/design/ornaments/corner-tr-v48.png'),
            url('../images/design/ornaments/corner-bl-v48.png'),
            url('../images/design/ornaments/corner-br-v48.png') !important;
        background-position: 3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px) !important;
        background-repeat: no-repeat !important;
        background-size: 58px auto !important;
        box-shadow:
            inset 0 0 0 3px rgba(230,197,134,.26),
            0 5px 14px rgba(55,27,8,.16) !important;
    }

    /* Each child is its own real box inside the outer Home frame. */
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        position: relative !important;
        margin: 0 !important;
        border: 1px solid #b68442 !important;
        background-color: #fffaf0 !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v48.png'),
            url('../images/design/ornaments/corner-tr-v48.png'),
            url('../images/design/ornaments/corner-bl-v48.png'),
            url('../images/design/ornaments/corner-br-v48.png') !important;
        background-position: 3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px) !important;
        background-repeat: no-repeat !important;
        background-size: 64px auto !important;
        box-shadow: inset 0 0 0 2px rgba(231,204,153,.20) !important;
    }

    .portal-home-shell > .portal-home-intro {
        min-height: 196px !important;
        padding: 29px 455px 27px 44px !important;
        overflow: hidden !important;
    }

    /* Keep Morroc as artwork inside the Welcome box, behind content. */
    .portal-home-shell > .portal-home-intro::before {
        display: none !important;
        content: none !important;
    }
    .portal-home-shell > .portal-home-intro::after {
        display: block !important;
        content: "" !important;
        position: absolute !important;
        z-index: 0 !important;
        top: 5px !important;
        right: 5px !important;
        bottom: 5px !important;
        width: 525px !important;
        height: auto !important;
        border-radius: 0 !important;
        background: url('../images/design/intro-town-v47.png') no-repeat right center / 520px 195px !important;
        opacity: .98 !important;
        pointer-events: none !important;
    }
    .portal-home-shell > .portal-home-intro > * {
        position: relative !important;
        z-index: 2 !important;
    }

    .portal-home-shell > .portal-showcase {
        margin-top: 13px !important;
        padding: 13px 25px 18px !important;
    }
    .portal-home-shell > .portal-showcase::before,
    .portal-home-shell > .portal-showcase::after {
        display: none !important;
        content: none !important;
    }
    .portal-home-shell .portal-showcase .portal-board-title {
        padding: 0 20px 10px !important;
        min-height: 31px !important;
    }
    .portal-home-shell .portal-showcase .portal-board-title h2 {
        font-size: 17px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    /* Full original 4:3 preview: never crop. */
    .portal-home-shell .portal-showcase-frame {
        width: min(82%, 800px) !important;
        max-width: 800px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #101d27 !important;
    }
    .portal-home-shell .portal-showcase-stage {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        background: #101d27 !important;
        border: 1px solid #92704b !important;
    }
    .portal-home-shell .portal-slide,
    .portal-home-shell .portal-slide img {
        width: 100% !important;
        height: 100% !important;
    }
    .portal-home-shell .portal-slide img {
        object-fit: contain !important;
        object-position: center center !important;
        background: #101d27 !important;
    }

    /* Inner pages: same chosen ornament, one in each corner of the single main box. */
    .portal-main-inner {
        position: relative !important;
        padding: 40px 38px 32px 46px !important;
        border: 1px solid #9e6d2f !important;
        background-color: #fff9ed !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v48.png'),
            url('../images/design/ornaments/corner-tr-v48.png'),
            url('../images/design/ornaments/corner-bl-v48.png'),
            url('../images/design/ornaments/corner-br-v48.png') !important;
        background-position: 3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px) !important;
        background-repeat: no-repeat !important;
        background-size: 55px auto !important;
        box-shadow:
            inset 0 0 0 3px rgba(230,197,134,.24),
            0 4px 12px rgba(55,27,8,.15) !important;
    }
    .portal-main-inner::before,
    .portal-main-inner::after {
        display: none !important;
        content: none !important;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .portal-home-shell > .portal-home-intro {
        padding-right: 330px !important;
    }
    .portal-home-shell > .portal-home-intro::after {
        width: 390px !important;
        background-size: 390px auto !important;
    }
    .portal-home-shell .portal-showcase-frame {
        width: 86% !important;
    }
}

@media (max-width: 800px) {
    .portal-home-shell {
        margin: 0 !important;
        padding: 7px !important;
        border: 1px solid #a87838 !important;
        background-color: rgba(255,249,237,.97) !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v48.png'),
            url('../images/design/ornaments/corner-tr-v48.png'),
            url('../images/design/ornaments/corner-bl-v48.png'),
            url('../images/design/ornaments/corner-br-v48.png') !important;
        background-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px) !important;
        background-repeat: no-repeat !important;
        background-size: 30px auto !important;
    }
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        border: 1px solid #b98a42 !important;
        background-color: #fffaf0 !important;
        background-image:
            url('../images/design/ornaments/corner-tl-v48.png'),
            url('../images/design/ornaments/corner-tr-v48.png'),
            url('../images/design/ornaments/corner-bl-v48.png'),
            url('../images/design/ornaments/corner-br-v48.png') !important;
        background-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px) !important;
        background-repeat: no-repeat !important;
        background-size: 27px auto !important;
    }
    .portal-home-shell > .portal-showcase {
        margin-top: 7px !important;
    }
    .portal-home-shell > .portal-home-intro::after {
        display: none !important;
        content: none !important;
    }
    .portal-home-shell .portal-slide img {
        object-fit: contain !important;
    }
    .portal-main-inner {
        background-image:
            url('../images/design/ornaments/corner-tl-v48.png'),
            url('../images/design/ornaments/corner-tr-v48.png'),
            url('../images/design/ornaments/corner-bl-v48.png'),
            url('../images/design/ornaments/corner-br-v48.png') !important;
        background-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px) !important;
        background-repeat: no-repeat !important;
        background-size: 28px auto !important;
    }
}

/* V49: exact user-selected corner ornament, compact nested Home framing */
@media (min-width: 801px) {
    /* Make the parent frame visibly separate from the two inner boxes. */
    .portal-main-home {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .portal-home-shell {
        position: relative !important;
        margin: 0 !important;
        padding: 20px !important;
        border: 1px solid #8e642c !important;
        background-color: rgba(250,243,229,.95) !important;
        background-image:
            url('../images/design/ornaments/user-corner-tl-v49.png'),
            url('../images/design/ornaments/user-corner-tr-v49.png'),
            url('../images/design/ornaments/user-corner-bl-v49.png'),
            url('../images/design/ornaments/user-corner-br-v49.png') !important;
        background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px) !important;
        background-repeat: no-repeat !important;
        background-size: 34px auto !important;
        box-shadow:
            inset 0 0 0 3px rgba(216,177,102,.18),
            0 5px 16px rgba(58,30,10,.17) !important;
    }

    /* One clean box for Welcome and one for Screenshot Preview. */
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        position: relative !important;
        margin: 0 !important;
        border: 1px solid #b8833a !important;
        background-color: rgba(255,250,240,.985) !important;
        background-image:
            url('../images/design/ornaments/user-corner-tl-v49.png'),
            url('../images/design/ornaments/user-corner-tr-v49.png'),
            url('../images/design/ornaments/user-corner-bl-v49.png'),
            url('../images/design/ornaments/user-corner-br-v49.png') !important;
        background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px) !important;
        background-repeat: no-repeat !important;
        background-size: 46px auto !important;
        box-shadow: inset 0 0 0 2px rgba(225,194,137,.20) !important;
    }

    .portal-home-shell > .portal-home-intro {
        min-height: 196px !important;
        padding: 30px 455px 28px 46px !important;
        overflow: hidden !important;
    }
    .portal-home-shell > .portal-home-intro::before {
        display: none !important;
        content: none !important;
    }
    .portal-home-shell > .portal-home-intro::after {
        display: block !important;
        content: "" !important;
        position: absolute !important;
        z-index: 0 !important;
        top: 7px !important;
        right: 7px !important;
        bottom: 7px !important;
        width: 520px !important;
        height: auto !important;
        background: url('../images/design/intro-town-v47.png') no-repeat right center / 515px 190px !important;
        opacity: .96 !important;
        pointer-events: none !important;
    }
    .portal-home-shell > .portal-home-intro > * {
        position: relative !important;
        z-index: 2 !important;
    }

    .portal-home-shell > .portal-showcase {
        margin-top: 16px !important;
        padding: 16px 28px 22px !important;
    }
    .portal-home-shell > .portal-showcase::before,
    .portal-home-shell > .portal-showcase::after {
        display: none !important;
        content: none !important;
    }
    .portal-home-shell .portal-showcase .portal-board-title {
        padding: 0 26px 11px !important;
        min-height: 32px !important;
    }
    .portal-home-shell .portal-showcase .portal-board-title h2 {
        font-size: 17px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    /* Preserve the entire original screenshot. */
    .portal-home-shell .portal-showcase-frame {
        width: min(82%, 800px) !important;
        max-width: 800px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #101d27 !important;
    }
    .portal-home-shell .portal-showcase-stage {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        background: #101d27 !important;
        border: 1px solid #92704b !important;
    }
    .portal-home-shell .portal-slide,
    .portal-home-shell .portal-slide img {
        width: 100% !important;
        height: 100% !important;
    }
    .portal-home-shell .portal-slide img {
        object-fit: contain !important;
        object-position: center center !important;
        background: #101d27 !important;
    }

    /* Inner pages: same ornament only at the four corners of the single main box. */
    .portal-main-inner {
        position: relative !important;
        padding: 42px 40px 34px 48px !important;
        border: 1px solid #986a2d !important;
        background-color: #fff9ed !important;
        background-image:
            url('../images/design/ornaments/user-corner-tl-v49.png'),
            url('../images/design/ornaments/user-corner-tr-v49.png'),
            url('../images/design/ornaments/user-corner-bl-v49.png'),
            url('../images/design/ornaments/user-corner-br-v49.png') !important;
        background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px) !important;
        background-repeat: no-repeat !important;
        background-size: 38px auto !important;
        box-shadow:
            inset 0 0 0 3px rgba(225,194,137,.20),
            0 4px 13px rgba(55,27,8,.14) !important;
    }
    .portal-main-inner::before,
    .portal-main-inner::after {
        display: none !important;
        content: none !important;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .portal-home-shell > .portal-home-intro {
        padding-right: 330px !important;
    }
    .portal-home-shell > .portal-home-intro::after {
        width: 390px !important;
        background-size: 390px auto !important;
    }
    .portal-home-shell .portal-showcase-frame {
        width: 86% !important;
    }
}

@media (max-width: 800px) {
    .portal-home-shell {
        padding: 9px !important;
        border: 1px solid #966a30 !important;
        background-color: rgba(250,243,229,.97) !important;
        background-image:
            url('../images/design/ornaments/user-corner-tl-v49.png'),
            url('../images/design/ornaments/user-corner-tr-v49.png'),
            url('../images/design/ornaments/user-corner-bl-v49.png'),
            url('../images/design/ornaments/user-corner-br-v49.png') !important;
        background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px) !important;
        background-repeat: no-repeat !important;
        background-size: 22px auto !important;
    }
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        border: 1px solid #b38342 !important;
        background-color: #fffaf0 !important;
        background-image:
            url('../images/design/ornaments/user-corner-tl-v49.png'),
            url('../images/design/ornaments/user-corner-tr-v49.png'),
            url('../images/design/ornaments/user-corner-bl-v49.png'),
            url('../images/design/ornaments/user-corner-br-v49.png') !important;
        background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px) !important;
        background-repeat: no-repeat !important;
        background-size: 27px auto !important;
    }
    .portal-home-shell > .portal-showcase {
        margin-top: 9px !important;
    }
    .portal-home-shell > .portal-home-intro::after {
        display: none !important;
        content: none !important;
    }
    .portal-home-shell .portal-slide img {
        object-fit: contain !important;
    }
    .portal-main-inner {
        background-image:
            url('../images/design/ornaments/user-corner-tl-v49.png'),
            url('../images/design/ornaments/user-corner-tr-v49.png'),
            url('../images/design/ornaments/user-corner-bl-v49.png'),
            url('../images/design/ornaments/user-corner-br-v49.png') !important;
        background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px) !important;
        background-repeat: no-repeat !important;
        background-size: 25px auto !important;
    }
}

/* V50: Morroc crest corners — compact gold/bronze with crimson crystal */
@media (min-width: 801px) {
    /* Outer Home composition: subtle corner accents only. */
    .portal-home-shell {
        background-image:
            url('../images/design/ornaments/morroc-corner-tl-v50.svg'),
            url('../images/design/ornaments/morroc-corner-tr-v50.svg'),
            url('../images/design/ornaments/morroc-corner-bl-v50.svg'),
            url('../images/design/ornaments/morroc-corner-br-v50.svg') !important;
        background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px) !important;
        background-repeat: no-repeat !important;
        background-size: 30px 30px !important;
        border-color: #8b5a20 !important;
        box-shadow: inset 0 0 0 2px rgba(222,180,94,.16), 0 5px 16px rgba(45,20,5,.16) !important;
    }

    /* Welcome + Screenshot: same motif, slightly stronger. */
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        background-image:
            url('../images/design/ornaments/morroc-corner-tl-v50.svg'),
            url('../images/design/ornaments/morroc-corner-tr-v50.svg'),
            url('../images/design/ornaments/morroc-corner-bl-v50.svg'),
            url('../images/design/ornaments/morroc-corner-br-v50.svg') !important;
        background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px) !important;
        background-repeat: no-repeat !important;
        background-size: 42px 42px !important;
        border-color: #ae7730 !important;
        box-shadow: inset 0 0 0 2px rgba(230,197,128,.16) !important;
    }

    /* Keep headings comfortably clear of the new compact crest. */
    .portal-home-shell > .portal-home-intro {
        padding-left: 50px !important;
    }
    .portal-home-shell .portal-showcase .portal-board-title {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Inner pages use the same design language. */
    .portal-main-inner {
        background-image:
            url('../images/design/ornaments/morroc-corner-tl-v50.svg'),
            url('../images/design/ornaments/morroc-corner-tr-v50.svg'),
            url('../images/design/ornaments/morroc-corner-bl-v50.svg'),
            url('../images/design/ornaments/morroc-corner-br-v50.svg') !important;
        background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px) !important;
        background-repeat: no-repeat !important;
        background-size: 35px 35px !important;
        border-color: #936126 !important;
    }

    /* Preserve every screenshot exactly; no crop. */
    .portal-home-shell .portal-showcase-stage {
        aspect-ratio: 4 / 3 !important;
    }
    .portal-home-shell .portal-slide img {
        object-fit: contain !important;
        object-position: center center !important;
    }
}

@media (max-width: 800px) {
    .portal-home-shell,
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase,
    .portal-main-inner {
        background-image:
            url('../images/design/ornaments/morroc-corner-tl-v50.svg'),
            url('../images/design/ornaments/morroc-corner-tr-v50.svg'),
            url('../images/design/ornaments/morroc-corner-bl-v50.svg'),
            url('../images/design/ornaments/morroc-corner-br-v50.svg') !important;
        background-position: 3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px) !important;
        background-repeat: no-repeat !important;
        background-size: 22px 22px !important;
    }
    .portal-home-shell .portal-slide img {
        object-fit: contain !important;
    }
}

/* V51: one Home box only; user-selected gold ornament on OUTER corners only */
@media (min-width: 801px) {
    /* Home container itself is the single visible ornamental box. */
    .portal-main-home {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .portal-home-shell {
        position: relative !important;
        margin: 0 !important;
        padding: 18px 18px 20px !important;
        border: 1px solid #a66e2e !important;
        background-color: #fffaf0 !important;
        background-image:
            url('../images/design/ornaments/user-gold-corner-tl-v51.png'),
            url('../images/design/ornaments/user-gold-corner-tr-v51.png'),
            url('../images/design/ornaments/user-gold-corner-bl-v51.png'),
            url('../images/design/ornaments/user-gold-corner-br-v51.png') !important;
        background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px) !important;
        background-repeat: no-repeat !important;
        background-size: 62px auto !important;
        box-shadow:
            inset 0 0 0 2px rgba(239,216,167,.28),
            0 5px 16px rgba(48,24,8,.18) !important;
    }

    /* Welcome and Screenshot Preview are SECTIONS inside the same outer box. */
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .portal-home-shell > .portal-home-intro {
        min-height: 190px !important;
        margin: 0 !important;
        padding: 25px 440px 20px 30px !important;
        overflow: hidden !important;
    }

    /* Keep the existing Morroc town as artwork inside the Welcome section. */
    .portal-home-shell > .portal-home-intro::before {
        display: none !important;
        content: none !important;
    }
    .portal-home-shell > .portal-home-intro::after {
        display: block !important;
        content: "" !important;
        position: absolute !important;
        z-index: 0 !important;
        top: 3px !important;
        right: 3px !important;
        bottom: 3px !important;
        width: 510px !important;
        height: auto !important;
        background: url('../images/design/intro-town-v47.png') no-repeat right center / 505px 186px !important;
        opacity: .95 !important;
        pointer-events: none !important;
    }
    .portal-home-shell > .portal-home-intro > * {
        position: relative !important;
        z-index: 2 !important;
    }

    /* Simple divider only — Screenshot Preview remains inside the same box. */
    .portal-home-shell > .portal-showcase {
        margin: 0 !important;
        padding: 15px 24px 18px !important;
        border-top: 1px solid rgba(161,111,48,.38) !important;
    }
    .portal-home-shell .portal-showcase .portal-board-title {
        padding: 0 8px 11px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(173,128,70,.20) !important;
    }
    .portal-home-shell .portal-showcase-frame {
        margin-top: 10px !important;
    }

    /* Screenshot images always display in full, never cropped. */
    .portal-home-shell .portal-showcase-stage {
        aspect-ratio: 4 / 3 !important;
    }
    .portal-home-shell .portal-slide,
    .portal-home-shell .portal-slide img {
        width: 100% !important;
        height: 100% !important;
    }
    .portal-home-shell .portal-slide img {
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* Inner pages are already one box, so the ornament stays only on that outer box. */
    .portal-main-inner {
        background-image:
            url('../images/design/ornaments/user-gold-corner-tl-v51.png'),
            url('../images/design/ornaments/user-gold-corner-tr-v51.png'),
            url('../images/design/ornaments/user-gold-corner-bl-v51.png'),
            url('../images/design/ornaments/user-gold-corner-br-v51.png') !important;
        background-position: 5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px) !important;
        background-repeat: no-repeat !important;
        background-size: 52px auto !important;
        border-color: #a66e2e !important;
        box-shadow: inset 0 0 0 2px rgba(239,216,167,.20), 0 4px 13px rgba(48,24,8,.13) !important;
        padding-top: 28px !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
        padding-bottom: 28px !important;
    }
}

@media (max-width: 800px) {
    .portal-main-home {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .portal-home-shell {
        padding: 10px !important;
        border: 1px solid #a66e2e !important;
        background-color: #fffaf0 !important;
        background-image:
            url('../images/design/ornaments/user-gold-corner-tl-v51.png'),
            url('../images/design/ornaments/user-gold-corner-tr-v51.png'),
            url('../images/design/ornaments/user-gold-corner-bl-v51.png'),
            url('../images/design/ornaments/user-gold-corner-br-v51.png') !important;
        background-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px) !important;
        background-repeat: no-repeat !important;
        background-size: 34px auto !important;
    }
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        border: 0 !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    .portal-home-shell > .portal-home-intro {
        margin: 0 !important;
        padding: 24px 18px 22px !important;
    }
    .portal-home-shell > .portal-home-intro::after {
        opacity: .18 !important;
    }
    .portal-home-shell > .portal-showcase {
        margin: 0 !important;
        padding: 14px 8px 12px !important;
        border-top: 1px solid rgba(161,111,48,.38) !important;
    }
    .portal-home-shell .portal-slide img {
        object-fit: contain !important;
    }
    .portal-main-inner {
        background-image:
            url('../images/design/ornaments/user-gold-corner-tl-v51.png'),
            url('../images/design/ornaments/user-gold-corner-tr-v51.png'),
            url('../images/design/ornaments/user-gold-corner-bl-v51.png'),
            url('../images/design/ornaments/user-gold-corner-br-v51.png') !important;
        background-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px) !important;
        background-repeat: no-repeat !important;
        background-size: 30px auto !important;
    }
}

/* V52: ornaments sit slightly OUTSIDE the outer box, using the approved V51 gold design */
@media (min-width: 801px) {
    .portal-home-shell,
    .portal-main-inner {
        position: relative !important;
        overflow: visible !important;
        /* Remove the in-box copies; V52 renders physical corner ornaments outside instead. */
        background-image: none !important;
    }

    .portal-outer-ornament {
        position: absolute !important;
        z-index: 8 !important;
        width: 48px !important;
        height: 61px !important;
        display: block !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        pointer-events: none !important;
    }

    .portal-ornament-tl {
        top: -16px !important;
        left: -15px !important;
        background-image: url('../images/design/ornaments/user-gold-corner-tl-v51.png') !important;
    }
    .portal-ornament-tr {
        top: -16px !important;
        right: -15px !important;
        background-image: url('../images/design/ornaments/user-gold-corner-tr-v51.png') !important;
    }
    .portal-ornament-bl {
        bottom: -16px !important;
        left: -15px !important;
        background-image: url('../images/design/ornaments/user-gold-corner-bl-v51.png') !important;
    }
    .portal-ornament-br {
        bottom: -16px !important;
        right: -15px !important;
        background-image: url('../images/design/ornaments/user-gold-corner-br-v51.png') !important;
    }

    /* Keep Home as one box: no ornament on Welcome/Screenshot sections themselves. */
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        background-image: none !important;
    }
}

@media (max-width: 800px) {
    .portal-home-shell,
    .portal-main-inner {
        position: relative !important;
        overflow: visible !important;
        background-image: none !important;
    }
    .portal-outer-ornament {
        position: absolute !important;
        z-index: 8 !important;
        width: 27px !important;
        height: 34px !important;
        display: block !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        pointer-events: none !important;
    }
    .portal-ornament-tl { top:-7px !important; left:-6px !important; background-image:url('../images/design/ornaments/user-gold-corner-tl-v51.png') !important; }
    .portal-ornament-tr { top:-7px !important; right:-6px !important; background-image:url('../images/design/ornaments/user-gold-corner-tr-v51.png') !important; }
    .portal-ornament-bl { bottom:-7px !important; left:-6px !important; background-image:url('../images/design/ornaments/user-gold-corner-bl-v51.png') !important; }
    .portal-ornament-br { bottom:-7px !important; right:-6px !important; background-image:url('../images/design/ornaments/user-gold-corner-br-v51.png') !important; }
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase { background-image:none !important; }
}

/* V53: keep approved V51 ornaments visible while sitting just outside the outer frame */
@media (min-width: 801px) {
    .portal-main-home,
    .portal-main-inner,
    .portal-home-shell {
        position: relative !important;
        overflow: visible !important;
    }

    .portal-outer-ornament {
        display: block !important;
        position: absolute !important;
        z-index: 30 !important;
        width: 50px !important;
        height: 64px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        pointer-events: none !important;
        filter: drop-shadow(0 1px 1px rgba(65,32,8,.28));
    }

    .portal-ornament-tl {
        top: -7px !important;
        left: -7px !important;
        background-image: url('../images/design/ornaments/user-gold-corner-tl-v51.png') !important;
    }
    .portal-ornament-tr {
        top: -7px !important;
        right: -7px !important;
        background-image: url('../images/design/ornaments/user-gold-corner-tr-v51.png') !important;
    }
    .portal-ornament-bl {
        bottom: -7px !important;
        left: -7px !important;
        background-image: url('../images/design/ornaments/user-gold-corner-bl-v51.png') !important;
    }
    .portal-ornament-br {
        bottom: -7px !important;
        right: -7px !important;
        background-image: url('../images/design/ornaments/user-gold-corner-br-v51.png') !important;
    }

    /* Only the one outer frame carries ornaments on Home. */
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        background-image: none !important;
        overflow: visible !important;
    }
}

@media (max-width: 800px) {
    .portal-main-home,
    .portal-main-inner,
    .portal-home-shell {
        position: relative !important;
        overflow: visible !important;
    }

    .portal-outer-ornament {
        display: block !important;
        position: absolute !important;
        z-index: 30 !important;
        width: 30px !important;
        height: 38px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        pointer-events: none !important;
    }
    .portal-ornament-tl { top:-4px !important; left:-4px !important; background-image:url('../images/design/ornaments/user-gold-corner-tl-v51.png') !important; }
    .portal-ornament-tr { top:-4px !important; right:-4px !important; background-image:url('../images/design/ornaments/user-gold-corner-tr-v51.png') !important; }
    .portal-ornament-bl { bottom:-4px !important; left:-4px !important; background-image:url('../images/design/ornaments/user-gold-corner-bl-v51.png') !important; }
    .portal-ornament-br { bottom:-4px !important; right:-4px !important; background-image:url('../images/design/ornaments/user-gold-corner-br-v51.png') !important; }

    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        background-image: none !important;
    }
}


/* V54: self-contained visible outer ornaments (Home + inner pages) */
@media (min-width: 801px) {
    .portal-main-home,
    .portal-main-inner,
    .portal-home-shell {
        position: relative !important;
        overflow: visible !important;
    }

    .portal-home-shell {
        background-image: none !important;
    }

    .portal-outer-ornament {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        z-index: 999 !important;
        width: 44px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: contain !important;
        pointer-events: none !important;
        filter: drop-shadow(0 1px 1px rgba(58,28,6,.32));
    }

    /* Just outside the frame, but still mostly anchored to the box. */
    .portal-ornament-tl { top:-3px !important; left:-3px !important; background-image:url('../images/design/ornaments/user-gold-corner-tl-v51.png') !important; }
    .portal-ornament-tr { top:-3px !important; right:-3px !important; background-image:url('../images/design/ornaments/user-gold-corner-tr-v51.png') !important; }
    .portal-ornament-bl { bottom:-3px !important; left:-3px !important; background-image:url('../images/design/ornaments/user-gold-corner-bl-v51.png') !important; }
    .portal-ornament-br { bottom:-3px !important; right:-3px !important; background-image:url('../images/design/ornaments/user-gold-corner-br-v51.png') !important; }

    /* Welcome and Screenshot Preview stay in ONE Home box, no inside ornaments. */
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase {
        background-image: none !important;
    }
}

@media (max-width: 800px) {
    .portal-main-home,
    .portal-main-inner,
    .portal-home-shell {
        position: relative !important;
        overflow: visible !important;
    }
    .portal-home-shell { background-image:none !important; }
    .portal-outer-ornament {
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        position:absolute !important;
        z-index:999 !important;
        width:26px !important;
        height:33px !important;
        background-color:transparent !important;
        background-repeat:no-repeat !important;
        background-position:center center !important;
        background-size:contain !important;
        pointer-events:none !important;
    }
    .portal-ornament-tl { top:-2px !important; left:-2px !important; background-image:url('../images/design/ornaments/user-gold-corner-tl-v51.png') !important; }
    .portal-ornament-tr { top:-2px !important; right:-2px !important; background-image:url('../images/design/ornaments/user-gold-corner-tr-v51.png') !important; }
    .portal-ornament-bl { bottom:-2px !important; left:-2px !important; background-image:url('../images/design/ornaments/user-gold-corner-bl-v51.png') !important; }
    .portal-ornament-br { bottom:-2px !important; right:-2px !important; background-image:url('../images/design/ornaments/user-gold-corner-br-v51.png') !important; }
    .portal-home-shell > .portal-home-intro,
    .portal-home-shell > .portal-showcase { background-image:none !important; }
}


/* V55: real IMG ornaments, no background-image dependency */
.portal-home-shell,
.portal-main-inner,
.portal-main-home {
    position: relative !important;
    overflow: visible !important;
}

/* Remove all older background-image corner implementations. */
.portal-home-shell,
.portal-main-inner {
    background-image: none !important;
}
.portal-home-shell > .portal-home-intro,
.portal-home-shell > .portal-showcase {
    background-image: none !important;
}

.portal-outer-ornament,
.portal-page-ornament {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    z-index: 5000 !important;
    width: 50px !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    object-fit: contain !important;
    pointer-events: none !important;
    filter: drop-shadow(0 1px 1px rgba(63,32,9,.30));
}

/* Slightly outside the frame, but visibly gripping the corners. */
.portal-ornament-tl,
.portal-page-ornament-tl { top: -8px !important; left: -8px !important; }
.portal-ornament-tr,
.portal-page-ornament-tr { top: -8px !important; right: -8px !important; }
.portal-ornament-bl,
.portal-page-ornament-bl { bottom: -8px !important; left: -8px !important; }
.portal-ornament-br,
.portal-page-ornament-br { bottom: -8px !important; right: -8px !important; }

/* Home remains one single box: Welcome + Screenshot are internal sections only. */
.portal-main-home {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.portal-home-shell {
    border: 1px solid #a66e2e !important;
    background-color: #fffaf0 !important;
    box-shadow: inset 0 0 0 2px rgba(239,216,167,.22), 0 5px 16px rgba(48,24,8,.18) !important;
}
.portal-home-shell > .portal-home-intro,
.portal-home-shell > .portal-showcase {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 800px) {
    .portal-outer-ornament,
    .portal-page-ornament {
        width: 34px !important;
    }
    .portal-ornament-tl,
    .portal-page-ornament-tl { top: -5px !important; left: -5px !important; }
    .portal-ornament-tr,
    .portal-page-ornament-tr { top: -5px !important; right: -5px !important; }
    .portal-ornament-bl,
    .portal-page-ornament-bl { bottom: -5px !important; left: -5px !important; }
    .portal-ornament-br,
    .portal-page-ornament-br { bottom: -5px !important; right: -5px !important; }
}

/* V57: girl-focused nostalgic classic-RO artwork in Welcome panel */
@media (min-width: 801px) {
    .portal-home-shell > .portal-home-intro::after {
        background: url('../images/design/intro-nostalgia-girl-v57.png') no-repeat right center / 505px 186px !important;
        opacity: .98 !important;
    }
}

@media (max-width: 800px) {
    .portal-home-shell > .portal-home-intro::after {
        background: url('../images/design/intro-nostalgia-girl-v57.png') no-repeat right center / cover !important;
        opacity: .16 !important;
    }
}

/* V58: festive nostalgic group artwork in Welcome panel */
@media (min-width: 801px) {
    .portal-home-shell > .portal-home-intro::after {
        background: url('../images/design/intro-nostalgia-group-v58.png') no-repeat right center / 505px 186px !important;
        opacity: .99 !important;
    }
}

@media (max-width: 800px) {
    .portal-home-shell > .portal-home-intro::after {
        background: url('../images/design/intro-nostalgia-group-v58.png') no-repeat right center / cover !important;
        opacity: .16 !important;
    }
}

/* V59: smaller Screenshot Preview heading/icon + frameless readable footer */
.portal-home-shell .portal-showcase .portal-board-title h2 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    letter-spacing: .01em !important;
}
.portal-home-shell .portal-showcase .portal-board-title h2:before {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-right: 7px !important;
    background-size: contain !important;
}
.portal-home-shell .portal-showcase .portal-board-title {
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
}
.portal-home-shell .portal-showcase .portal-board-title > span {
    font-size: 9px !important;
}

/* Copyright text directly over the page — no footer box/bar. */
.portal-footer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 12px 0 15px !important;
}
.portal-footer-copyright {
    width: min(100% - 24px, 1000px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    text-align: center !important;
}
.portal-footer-copyright span,
.portal-footer-copyright small,
.portal-footer-copyright a {
    text-shadow: 0 1px 2px rgba(22,11,4,.98), 0 0 4px rgba(22,11,4,.78) !important;
}
.portal-footer-copyright span {
    margin: 0 !important;
    color: #fff5e6 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
}
.portal-footer-copyright small {
    margin: 0 !important;
    color: #efe1cf !important;
    font-size: 9px !important;
}
.portal-footer-copyright a {
    color: #ffe0a6 !important;
}

@media (max-width: 800px) {
    .portal-home-shell .portal-showcase .portal-board-title h2 {
        font-size: 13px !important;
    }
    .portal-home-shell .portal-showcase .portal-board-title h2:before {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        margin-right: 6px !important;
    }
    .portal-home-shell .portal-showcase .portal-board-title > span {
        font-size: 8px !important;
    }
    .portal-footer {
        padding: 10px 0 12px !important;
    }
    .portal-footer-copyright {
        width: calc(100% - 18px) !important;
        padding: 0 6px !important;
        gap: 5px !important;
        flex-wrap: wrap !important;
    }
    .portal-footer-copyright span {
        font-size: 9px !important;
    }
    .portal-footer-copyright small {
        font-size: 8px !important;
    }
}




/* V64 — desktop logged-in account status raised slightly; cache-bumped in header */
@media (min-width: 801px) {
    .portal-hero-copy .portal-login-status {
        transform: translateY(42px) !important;
        position: relative !important;
        z-index: 10 !important;
    }
}

/* V65 — Create Account birthdate layout */
.generic-form-table .birthdate-fields {
    display: grid !important;
    grid-template-columns: minmax(82px, 1fr) minmax(128px, 1.45fr) minmax(72px, .8fr) !important;
    gap: 8px !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    align-items: end !important;
}
.generic-form-table .birthdate-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #536777 !important;
    font-weight: 600 !important;
}
.generic-form-table .birthdate-field > span {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #6d7d89 !important;
    letter-spacing: .03em !important;
}
.generic-form-table .birthdate-field select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 6px 26px 6px 8px !important;
    box-sizing: border-box !important;
}
@media (max-width: 560px) {
    .generic-form-table .birthdate-fields {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 7px !important;
    }
}


/* V66 — polished Security Code refresh control */
.generic-form-table .security-code-tools {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: min(100%, 340px) !important;
    margin: 0 0 8px !important;
    flex-wrap: wrap !important;
}
.generic-form-table .security-code {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}
.generic-form-table .security-code img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    border: 1px solid #bba77f !important;
    border-radius: 3px !important;
    background: #f7f1e6 !important;
    box-shadow: 0 1px 3px rgba(64,43,18,.18) !important;
}
.generic-form-table .security-code-refresh {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    border: 1px solid #b7985e !important;
    border-radius: 3px !important;
    background: linear-gradient(#fffdf7, #eadcc0) !important;
    color: #315b78 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-shadow: 0 1px rgba(255,255,255,.8) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 1px 2px rgba(75,48,18,.15) !important;
    white-space: nowrap !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}
.generic-form-table .security-code-refresh-icon {
    display: inline-block !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: #b47618 !important;
    transform-origin: center !important;
    transition: transform .2s ease !important;
}
.generic-form-table .security-code-refresh:hover,
.generic-form-table .security-code-refresh:focus {
    border-color: #9d7434 !important;
    background: linear-gradient(#ffffff, #f3e7cf) !important;
    color: #173f60 !important;
    box-shadow: inset 0 1px rgba(255,255,255,1), 0 2px 4px rgba(75,48,18,.2) !important;
    outline: none !important;
}
.generic-form-table .security-code-refresh:hover .security-code-refresh-icon,
.generic-form-table .security-code-refresh:focus .security-code-refresh-icon {
    transform: rotate(45deg) !important;
}
.generic-form-table .security-code-input {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    box-sizing: border-box !important;
}
@media (max-width: 560px) {
    .generic-form-table .security-code-tools,
    .generic-form-table .security-code-input {
        width: 100% !important;
        max-width: 100% !important;
    }
    .generic-form-table .security-code-tools {
        align-items: flex-start !important;
    }
}


/* V68 — CAPTCHA refresh functional state */
.generic-form-table .security-code-refresh.is-refreshing {
    opacity: .78 !important;
    cursor: wait !important;
}
.generic-form-table .security-code-refresh.is-refreshing .security-code-refresh-icon {
    animation: bakbakanCaptchaSpin .7s linear infinite !important;
}
@keyframes bakbakanCaptchaSpin {
    to { transform: rotate(360deg); }
}

/* V84 — refined inner account UI: fantasy-clean tabs + account card */
.portal-main-inner #submenu.portal-submenu-tabs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: 0 0 20px !important;
    padding: 5px !important;
    width: fit-content !important;
    max-width: 100% !important;
    border: 1px solid rgba(177, 137, 69, .55) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(rgba(255,253,246,.94), rgba(247,239,222,.94)),
        #fbf5e9 !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.95),
        0 1px 3px rgba(72,44,14,.10) !important;
}
.portal-main-inner #submenu.portal-submenu-tabs .sub-menu-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 7px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 3px !important;
    color: #38566e !important;
    background: transparent !important;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: .015em !important;
    text-decoration: none !important;
    text-shadow: 0 1px rgba(255,255,255,.8) !important;
    white-space: nowrap !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
.portal-main-inner #submenu.portal-submenu-tabs .sub-menu-item:hover {
    color: #173f60 !important;
    border-color: rgba(186,145,73,.62) !important;
    background: linear-gradient(#fffdf8, #f4e7cf) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.95) !important;
    transform: translateY(-1px) !important;
}
.portal-main-inner #submenu.portal-submenu-tabs .sub-menu-item.current-sub-menu {
    color: #fff9eb !important;
    border-color: #b98a3d !important;
    background: linear-gradient(#315f86, #173f62) !important;
    text-shadow: 0 -1px rgba(0,0,0,.28) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.16),
        0 1px 2px rgba(24,42,57,.22) !important;
    transform: none !important;
}

.bb-account-page {
    max-width: 720px !important;
}
.bb-account-heading {
    position: relative !important;
    margin: 0 0 14px !important;
    padding: 0 0 10px !important;
}
.bb-account-kicker {
    display: block !important;
    margin: 0 0 3px !important;
    color: #9b7438 !important;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .18em !important;
}
.bb-account-heading h2 {
    margin: 0 !important;
    color: #274d6d !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 25px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    text-shadow: 0 1px rgba(255,255,255,.75) !important;
}
.bb-account-heading-rule {
    display: block !important;
    width: 58px !important;
    height: 2px !important;
    margin-top: 8px !important;
    background: linear-gradient(90deg, #b88235, #e0c27c 72%, transparent) !important;
}

.bb-account-card {
    overflow: hidden !important;
    width: min(100%, 620px) !important;
    border: 1px solid #c5aa75 !important;
    border-radius: 4px !important;
    background: rgba(255,253,247,.92) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.95),
        0 3px 9px rgba(70,46,20,.10) !important;
}
.bb-account-card-header {
    min-height: 54px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border-bottom: 1px solid #d8c6a1 !important;
    background: linear-gradient(90deg, #f6ead4, #fffaf0 56%, #f4e8d1) !important;
}
.bb-account-card-header > div {
    min-width: 0 !important;
}
.bb-account-card-label {
    display: block !important;
    margin-bottom: 1px !important;
    color: #a47734 !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
}
.bb-account-card-header strong {
    color: #2b4c67 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}
.bb-account-card-note {
    color: #8a7960 !important;
    font-size: 10px !important;
    white-space: nowrap !important;
}

.bb-account-table.vertical-table {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
}
.bb-account-table.vertical-table tr {
    border: 0 !important;
    border-bottom: 1px solid rgba(199,181,145,.48) !important;
    background: transparent !important;
    transition: background .15s ease !important;
}
.bb-account-table.vertical-table tr:last-child {
    border-bottom: 0 !important;
}
.bb-account-table.vertical-table tr:hover {
    background: rgba(247,238,220,.52) !important;
}
.bb-account-table.vertical-table th,
.bb-account-table.vertical-table td {
    border: 0 !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
}
.bb-account-table.vertical-table th {
    width: 170px !important;
    color: #77664d !important;
    background: rgba(241,232,214,.42) !important;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    text-align: left !important;
}
.bb-account-table.vertical-table td {
    color: #344b5e !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: left !important;
}
.bb-account-primary-value {
    color: #1f496b !important;
    font-size: 13px !important;
}
.bb-account-email {
    color: #566979 !important;
    letter-spacing: .015em !important;
}
.bb-account-points {
    display: inline-block !important;
    min-width: 42px !important;
    color: #8f641f !important;
    font-weight: 700 !important;
}
.bb-premium-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 23px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    border: 1px solid transparent !important;
}
.bb-premium-status.is-active {
    color: #42652c !important;
    border-color: #b8c99d !important;
    background: #eef5e5 !important;
}
.bb-premium-status.is-inactive {
    color: #75695a !important;
    border-color: #d4c9b8 !important;
    background: #f3eee6 !important;
}

@media (max-width: 700px) {
    .portal-main-inner #submenu.portal-submenu-tabs {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .portal-main-inner #submenu.portal-submenu-tabs .sub-menu-item {
        width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }
    .bb-account-page,
    .bb-account-card {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .portal-main-inner #submenu.portal-submenu-tabs {
        grid-template-columns: 1fr !important;
    }
    .bb-account-heading h2 {
        font-size: 22px !important;
    }
    .bb-account-card-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 3px !important;
    }
    .bb-account-card-note {
        white-space: normal !important;
    }
    .bb-account-table.vertical-table tr {
        display: grid !important;
        grid-template-columns: 118px minmax(0,1fr) !important;
    }
    .bb-account-table.vertical-table th,
    .bb-account-table.vertical-table td {
        width: auto !important;
        padding: 9px 10px !important;
    }
}

/* V92 — Compact Ragnarok-themed Community social panel */
.portal-community-heading {
    margin-bottom: 16px;
}
.portal-social-panel {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    aspect-ratio: 3 / 1;
    min-height: 250px;
    padding: 22px 20px 24px;
    border: 1px solid #b98d55;
    background:
        linear-gradient(90deg, rgba(12,24,24,.16), rgba(18,28,30,.08) 48%, rgba(20,26,30,.14)),
        url('../images/design/community-forest-party-v94.png') center center / cover no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(255,244,219,.12),
        0 8px 20px rgba(45,26,12,.18);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.portal-social-panel:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 48% 62% at 50% 51%,
            rgba(8,15,20,.44) 0%,
            rgba(8,15,20,.32) 34%,
            rgba(8,15,20,.16) 56%,
            rgba(8,15,20,.05) 72%,
            transparent 88%),
        linear-gradient(to bottom, rgba(6,18,18,.035), rgba(8,18,18,.07));
}
.portal-social-panel-copy,
.portal-social-links {
    position: relative;
    z-index: 1;
}
.portal-social-panel-copy {
    max-width: 590px;
    margin: 0 auto 17px;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0,0,0,.55);
}
.portal-social-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #f1d49a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}
.portal-social-panel-copy h2 {
    margin: 0;
    color: #fff8eb;
    font: 700 22px/1.15 Georgia, 'Times New Roman', serif;
    text-shadow: 0 2px 7px rgba(0,0,0,.5);
}
.portal-social-panel-copy p {
    margin: 6px 0 0;
    color: #f0e8dc;
    font-size: 11px;
    line-height: 1.45;
}
.portal-social-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    max-width: 620px;
    margin: 0 auto;
}
.portal-social-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 76px;
    padding: 10px 38px 10px 13px;
    overflow: hidden;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.24) !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.17),
        0 6px 13px rgba(0,0,0,.24) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    backdrop-filter: blur(1px);
}
.portal-social-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,.11), transparent 38%, rgba(255,255,255,.035));
    pointer-events: none;
}
.portal-social-card:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow:
        inset 0 1px rgba(255,255,255,.19),
        0 10px 18px rgba(0,0,0,.28) !important;
}
.portal-social-discord {
    background: linear-gradient(135deg, rgba(88,101,242,.93), rgba(65,72,163,.94) 68%, rgba(48,54,111,.95)) !important;
}
.portal-social-facebook {
    background: linear-gradient(135deg, rgba(40,120,207,.94), rgba(23,92,167,.95) 62%, rgba(16,72,127,.96)) !important;
}
.portal-social-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-right: 11px;
    color: #fff;
}
.portal-social-icon svg {
    display: block;
    width: 36px;
    height: 36px;
}
.portal-social-icon-facebook {
    border-radius: 50%;
    background: #fff;
    color: #1877f2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 7px rgba(0,0,0,.18);
}
.portal-social-icon-facebook svg {
    width: 20px;
    height: 20px;
}
.portal-social-copy {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
}
.portal-social-lead,
.portal-social-copy strong,
.portal-social-copy small {
    display: block;
}
.portal-social-lead {
    margin-bottom: 1px;
    color: rgba(255,255,255,.90);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.05;
}
.portal-social-copy strong {
    color: #fff;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .02em;
    text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.portal-social-copy small {
    margin-top: 4px;
    color: rgba(255,255,255,.78);
    font-size: 8px;
    letter-spacing: .015em;
}
.portal-social-arrow {
    position: absolute;
    z-index: 1;
    right: 13px;
    top: 50%;
    transform: translateY(-52%);
    color: rgba(255,255,255,.75);
    font: 400 24px/1 Arial, sans-serif;
    transition: transform .18s ease, color .18s ease;
}
.portal-social-card:hover .portal-social-arrow {
    transform: translate(2px,-52%);
    color: #fff;
}
.portal-social-card.is-disabled {
    opacity: .60;
    cursor: default;
    pointer-events: none;
    filter: grayscale(.14);
}
@media (max-width: 800px) {
    .portal-social-links {
        grid-template-columns: 1fr;
        max-width: 430px;
    }
}
@media (max-width: 560px) {
    .portal-social-panel {
        aspect-ratio: auto;
        min-height: 0;
        padding: 18px 12px 20px;
        background-position: 48% center;
        background-size: cover;
    }
    .portal-social-panel-copy h2 {
        font-size: 20px;
    }
    .portal-social-panel-copy p {
        font-size: 10px;
    }
    .portal-social-card {
        min-height: 70px;
        padding: 9px 34px 9px 12px;
        border-radius: 11px;
    }
    .portal-social-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        margin-right: 9px;
    }
    .portal-social-icon svg {
        width: 32px;
        height: 32px;
    }
    .portal-social-icon-facebook svg {
        width: 18px;
        height: 18px;
    }
    .portal-social-lead {
        font-size: 11px;
    }
    .portal-social-copy strong {
        font-size: 18px;
    }
    .portal-social-copy small {
        font-size: 8px;
    }
    .portal-social-arrow {
        right: 11px;
        font-size: 22px;
    }
}

/* V96 — Game Info Wiki CTA + protected Top Up placeholder */
.portal-wiki-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: 18px 0 2px;
    padding: 18px 20px;
    border: 1px solid #c6a46a;
    background: linear-gradient(135deg, rgba(255,251,238,.98), rgba(245,235,209,.96));
    box-shadow: inset 0 1px rgba(255,255,255,.7), 0 4px 12px rgba(79,50,22,.08);
}
.portal-wiki-kicker,
.portal-topup-kicker {
    display: block;
    margin-bottom: 4px;
    color: #a47a35;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}
.portal-wiki-cta h2 {
    margin: 0 0 5px;
    color: #31536d;
    font: 700 18px/1.2 Georgia, 'Times New Roman', serif;
}
.portal-wiki-cta p {
    margin: 0;
    color: #6d777e;
    font-size: 12px;
    line-height: 1.5;
}
.portal-wiki-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #1c4a70;
    border-radius: 3px;
    background: linear-gradient(#3b6d94, #204d72);
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    text-shadow: 0 -1px rgba(0,0,0,.2);
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 3px 8px rgba(30,45,58,.14);
}
.portal-wiki-link:hover {
    background: linear-gradient(#4b7ea5, #285a82);
    transform: translateY(-1px);
}
.portal-topup-coming-soon,
.portal-wiki-coming-soon {
    padding: 34px 24px;
}
.portal-topup-emblem {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border: 1px solid #c7a15d;
    border-radius: 50%;
    background: linear-gradient(#fff8df, #ead4a7);
    color: #9b6b22;
    box-shadow: inset 0 1px rgba(255,255,255,.8), 0 4px 10px rgba(100,63,22,.12);
}
.portal-topup-emblem svg {
    width: 32px;
    height: 32px;
}
.portal-topup-coming-soon h2,
.portal-wiki-coming-soon h2 {
    color: #31536d;
}
@media (max-width: 650px) {
    .portal-wiki-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    .portal-wiki-link {
        width: 100%;
    }
}



/* V97 — move Game Wiki CTA near the top of Game Info */
.portal-wiki-cta-top {
    margin: 2px 0 18px !important;
    padding: 14px 18px !important;
    border-color: #b98b43 !important;
    background: linear-gradient(135deg, rgba(255,252,240,.99), rgba(243,231,198,.98)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.8), 0 5px 14px rgba(79,50,22,.10) !important;
}
.portal-wiki-cta-top .portal-wiki-kicker {
    color: #9a6c25;
}
.portal-wiki-cta-top .portal-wiki-link {
    min-height: 42px;
    padding: 0 19px;
    border-color: #173f61;
    background: linear-gradient(#467aa3, #244f74);
    font-size: 11px;
    box-shadow: inset 0 1px rgba(255,255,255,.2), 0 4px 10px rgba(28,52,72,.18);
}
.portal-wiki-cta-top .portal-wiki-link:hover {
    background: linear-gradient(#568bb4, #2d618b);
}


/* V99 — bring Game Wiki button closer to its copy */
.portal-wiki-cta-top {
    justify-content: flex-start !important;
    gap: 16px !important;
}
.portal-wiki-cta-top > div {
    flex: 0 1 auto;
    max-width: 610px;
}
.portal-wiki-cta-top .portal-wiki-link {
    margin-left: 0;
}
@media (max-width: 650px) {
    .portal-wiki-cta-top > div {
        max-width: none;
    }
}


/* V100 — place Game Wiki button directly below its description */
.portal-wiki-cta-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}
.portal-wiki-cta-top > div {
    width: 100%;
    max-width: none;
}
.portal-wiki-cta-top .portal-wiki-link {
    align-self: flex-start;
    width: auto;
    margin: 0 !important;
}
@media (max-width: 650px) {
    .portal-wiki-cta-top .portal-wiki-link {
        width: auto;
    }
}

/* V106 — compact left-aligned registration layout */
.bb-register-page {
    width: min(100%, 520px);
    margin: 0;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
    color: #17354e;
}
.bb-register-heading {
    margin: 0 0 18px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(184, 139, 56, .35);
}
.bb-register-kicker {
    display: block;
    margin-bottom: 6px;
    color: #9a6f27;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .20em;
    text-transform: uppercase;
}
.bb-register-heading h1 {
    margin: 0 0 7px !important;
    color: #183d5d !important;
    font-family: "Cinzel", Georgia, "Times New Roman", serif !important;
    font-size: clamp(27px, 4vw, 34px) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase;
}
.bb-register-heading p {
    margin: 0;
    color: #697b88;
    font-size: 14px;
    line-height: 1.45;
}
.bb-register-heading a,
.bb-register-terms a {
    color: #1e5d86;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bb-register-alert {
    margin: 0 0 18px;
    padding: 11px 13px;
    border: 1px solid #d8a7a0;
    border-radius: 3px;
    background: #fff2f0;
    color: #8a3028;
    font-size: 13px;
    font-weight: 600;
}
.bb-register-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.bb-register-field {
    margin: 0 0 15px;
}
.bb-register-field > label,
.bb-register-label {
    display: block;
    margin: 0 0 6px;
    color: #17354e;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
}
.bb-register-field input[type="text"],
.bb-register-field input[type="email"],
.bb-register-field input[type="password"],
.bb-register-field input[type="date"],
.bb-register-field select {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 43px !important;
    padding: 9px 12px !important;
    border: 1px solid #8ea4b5 !important;
    border-radius: 3px !important;
    outline: none !important;
    background: #fff !important;
    color: #17354e !important;
    font: 500 15px/1.25 "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
    box-shadow: inset 0 1px 1px rgba(16, 43, 64, .035) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.bb-register-field input:focus,
.bb-register-field select:focus {
    border-color: #263f54 !important;
    box-shadow: 0 0 0 2px rgba(201, 158, 66, .36) !important;
}
.bb-register-field input.is-valid {
    border-color: #379467 !important;
}
.bb-register-field input.is-invalid {
    border-color: #bc665d !important;
}
.bb-register-field > small,
.bb-register-field .bb-password-match {
    display: block;
    margin-top: 6px;
    color: #7b8891;
    font-size: 12px;
    line-height: 1.35;
}
.bb-password-input-wrap {
    position: relative;
    display: flex;
    width: 100%;
}
.bb-password-input-wrap input {
    padding-right: 98px !important;
}
.bb-password-toggle {
    position: absolute !important;
    z-index: 2;
    top: 1px;
    right: 1px;
    bottom: 1px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 88px !important;
    min-height: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-left: 1px solid #d2dce3 !important;
    border-radius: 0 2px 2px 0 !important;
    background: #f8fafb !important;
    color: #536b7d !important;
    font: 700 12px/1 "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
    letter-spacing: .04em !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.bb-password-toggle:hover,
.bb-password-toggle:focus {
    background: #eef3f6 !important;
    color: #173f5e !important;
}
.bb-password-toggle svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    opacity: .9;
}
.bb-password-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    margin-top: 8px;
}
.bb-password-rule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #81909a;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    transition: color .15s ease;
}
.bb-requirement-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    overflow: hidden;
    border: 1px solid #a9b7c1;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    transition: all .15s ease;
}
.bb-password-rule.is-valid {
    color: #398663;
}
.bb-password-rule.is-valid .bb-requirement-dot {
    border-color: #2f9769;
    background: #2f9769;
    color: #fff;
}
.bb-password-match.is-valid {
    color: #398663 !important;
    font-weight: 600;
}
.bb-password-match.is-invalid {
    color: #a95a52 !important;
    font-weight: 600;
}
.bb-gender-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border: 1px solid #8ea4b5;
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}
.bb-gender-option {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}
.bb-gender-option + .bb-gender-option {
    border-left: 1px solid #8ea4b5;
}
.bb-gender-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.bb-gender-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 12px;
    background: #fff;
    color: #536b7d;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.bb-gender-option:hover .bb-gender-choice {
    background: #f5f8fa;
    color: #173f5e;
}
.bb-gender-option input:focus + .bb-gender-choice {
    box-shadow: inset 0 0 0 2px rgba(201, 158, 66, .38);
}
.bb-gender-option input:checked + .bb-gender-choice {
    background: #204f76;
    color: #fff;
    box-shadow: inset 0 -2px #d6a947;
}
.bb-register-field input[type="date"] {
    color-scheme: light;
}
.bb-register-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .72;
    cursor: pointer;
}
.bb-security-code-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 7px;
}
.bb-register-security .security-code {
    display: flex !important;
    align-items: center !important;
    min-height: 43px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #8ea4b5 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    background: #fff !important;
}
.bb-register-security .security-code img {
    display: block !important;
    width: auto !important;
    max-width: 155px !important;
    height: 43px !important;
    object-fit: contain !important;
    border: 0 !important;
}
.bb-security-refresh {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 43px !important;
    padding: 7px 13px !important;
    border: 1px solid #8ea4b5 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #314f66 !important;
    font: 700 11px/1 "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
    letter-spacing: .06em !important;
    cursor: pointer !important;
}
.bb-security-refresh:hover,
.bb-security-refresh:focus {
    border-color: #355f80 !important;
    background: #f4f7f9 !important;
}
.bb-register-terms {
    margin: 4px 0 14px;
    color: #607584;
    font-size: 12px;
    line-height: 1.45;
}
.bb-register-submit {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    border: 1px solid #a9771e !important;
    border-radius: 3px !important;
    background: linear-gradient(#f3c85c, #dba63a) !important;
    color: #17354e !important;
    font: 700 13px/1 "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px rgba(255,255,255,.35) !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(60,44,18,.14) !important;
}
.bb-register-submit:hover,
.bb-register-submit:focus {
    background: linear-gradient(#f7d06a, #e2ad40) !important;
    border-color: #8c641b !important;
}
@media (max-width: 640px) {
    .bb-register-page {
        width: 100%;
    }
    .bb-register-heading h1 {
        font-size: 26px !important;
    }
    .bb-password-requirements {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .bb-password-rule {
        white-space: normal;
    }
    .bb-security-code-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}


/* V107 — compact register panel + cleaned separators */
.bb-register-heading {
    border-bottom: 0 !important;
    padding-bottom: 4px !important;
    margin-bottom: 14px !important;
}
.bb-register-field {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.bb-register-field::before,
.bb-register-field::after,
.bb-register-form::before,
.bb-register-form::after {
    content: none !important;
    display: none !important;
}
@media (min-width: 801px) {
    .portal-layout.portal-layout-full .portal-main.portal-main-register {
        width: 650px !important;
        max-width: 650px !important;
        justify-self: start !important;
        padding: 20px 24px 28px !important;
    }
    .portal-main-register .bb-register-page {
        width: 500px !important;
        max-width: 500px !important;
        margin-left: 16px !important;
        margin-right: 0 !important;
    }
}
@media (max-width: 800px) {
    .portal-layout.portal-layout-full .portal-main.portal-main-register {
        width: 100% !important;
        max-width: 100% !important;
    }
    .portal-main-register .bb-register-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* V108 — remove inherited register form outline + fit CAPTCHA image */
.portal-main-register form.bb-register-form,
.portal-main-register form.generic-form.bb-register-form {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep only the intentional borders of the actual controls. */
.portal-main-register .bb-register-form > fieldset,
.portal-main-register .bb-register-form fieldset {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* CAPTCHA: fixed box and image fill so there is no loose inner gap. */
.portal-main-register .bb-register-security .security-code {
    box-sizing: border-box !important;
    flex: 0 0 130px !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.portal-main-register .bb-register-security .security-code img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: fill !important;
    vertical-align: top !important;
}

/* V109 — explicit User ID/password conflict feedback + required server-rules agreement */
.bb-password-rule.is-invalid {
    color: #a4493f;
}
.bb-password-rule.is-invalid .bb-requirement-dot {
    border-color: #b75a50;
    background: #fff;
    color: #b75a50;
}
.bb-password-rule.is-invalid .bb-requirement-dot::before {
    content: "!";
    color: #b75a50;
    font-size: 10px;
    font-weight: 800;
}
.bb-password-rule.is-invalid .bb-requirement-dot {
    font-size: 0;
}
.bb-password-username-error {
    min-height: 0;
    margin-top: 7px;
    color: #a4493f;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}
.bb-password-username-error:not(:empty)::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font: 800 9px/1 Arial, Helvetica, sans-serif;
    vertical-align: 1px;
}
.bb-register-rules {
    margin: 6px 0 14px !important;
}
.bb-rules-agreement {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    color: #536b7d;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}
.bb-rules-agreement input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 0 !important;
    accent-color: #245a7f;
    cursor: pointer;
}
.bb-rules-agreement a {
    color: #1e5d86;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* V111 — two-column register layout + consistent account heading typography */
.portal-page-heading h1,
.bb-register-heading h1 {
    font-family: "Cinzel", Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
}

.bb-register-heading {
    margin: 0 0 18px !important;
    padding: 0 !important;
}
.bb-register-heading h1 {
    margin: 0 !important;
}

.bb-register-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 16px;
    align-items: start;
}
.bb-register-grid .bb-register-field {
    margin: 0 !important;
    min-width: 0;
}
.bb-register-grid .bb-register-password {
    align-self: start;
}
.bb-register-grid .bb-register-gender,
.bb-register-grid .bb-register-birthdate {
    align-self: start;
}
.bb-register-grid .bb-gender-choice,
.bb-register-grid .bb-register-field input[type="date"] {
    min-height: 43px !important;
}

/* Keep the new two-column form compact inside the left-side registration panel. */
@media (min-width: 801px) {
    .portal-main-register .bb-register-page {
        width: 586px !important;
        max-width: 586px !important;
        margin-left: 16px !important;
        margin-right: 0 !important;
    }
}

/* Security, rules and submit span the full form width below the two-column grid. */
.bb-register-security {
    margin-top: 18px !important;
    margin-bottom: 14px !important;
}
.bb-register-rules {
    margin-top: 4px !important;
}

/* Password rules fit naturally under the left password column. */
.bb-register-grid .bb-password-requirements {
    gap: 7px 12px;
}
.bb-register-grid .bb-password-rule {
    white-space: normal;
}

@media (max-width: 800px) {
    .bb-register-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .portal-main-register .bb-register-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}


/* V112 — account-sized register panel + revised two-column field order */
.bb-register-heading h1 {
    font-size: 27px !important;
    line-height: 1.15 !important;
    text-transform: none !important;
}

@media (min-width: 801px) {
    .portal-layout.portal-layout-full .portal-main.portal-main-register {
        width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        padding: 20px 24px 28px !important;
    }
    .portal-main-register .bb-register-page {
        width: 650px !important;
        max-width: 650px !important;
        margin-left: 16px !important;
        margin-right: 0 !important;
    }
}

.bb-register-grid {
    column-gap: 18px;
    row-gap: 16px;
}
.bb-register-grid .bb-register-security {
    margin: 0 !important;
    align-self: start;
}
.bb-register-grid .bb-register-security .bb-security-code-row {
    margin-bottom: 7px !important;
}
.bb-register-grid .bb-register-security .security-code-input {
    width: 100% !important;
    max-width: 100% !important;
}
.bb-register-submit {
    display: block !important;
    width: 250px !important;
    max-width: calc(100% - 20px) !important;
    min-height: 44px !important;
    margin: 18px auto 0 !important;
}

@media (max-width: 800px) {
    .portal-main-register .bb-register-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    .bb-register-submit {
        width: min(250px, 100%) !important;
    }
}

/* V113 — centered inner register layout + revised two-column alignment */
@media (min-width: 801px) {
    .portal-main-register .bb-register-page {
        width: 650px !important;
        max-width: 650px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .bb-register-grid .bb-register-userid {
        grid-column: 1;
        grid-row: 1;
    }
    .bb-register-grid .bb-register-email {
        grid-column: 2;
        grid-row: 1;
    }
    .bb-register-grid .bb-register-password {
        grid-column: 1;
        grid-row: 2;
    }
    .bb-register-grid .bb-register-confirm-email {
        grid-column: 2;
        grid-row: 2;
    }
    .bb-register-grid .bb-register-confirm-password {
        grid-column: 1;
        grid-row: 3;
    }
    .bb-register-grid .bb-register-gender {
        grid-column: 2;
        grid-row: 3;
    }
    .bb-register-grid .bb-register-security {
        grid-column: 1;
        grid-row: 4;
    }
    .bb-register-grid .bb-register-birthdate {
        grid-column: 2;
        grid-row: 4;
    }
}

.bb-register-grid .bb-register-security .security-code-input {
    width: 180px !important;
    max-width: 100% !important;
}

.bb-register-rules {
    text-align: center !important;
    margin-top: 14px !important;
}
.bb-register-rules .bb-rules-agreement {
    justify-content: center !important;
    text-align: left !important;
}

@media (max-width: 800px) {
    .bb-register-grid .bb-register-userid,
    .bb-register-grid .bb-register-email,
    .bb-register-grid .bb-register-password,
    .bb-register-grid .bb-register-confirm-email,
    .bb-register-grid .bb-register-confirm-password,
    .bb-register-grid .bb-register-gender,
    .bb-register-grid .bb-register-security,
    .bb-register-grid .bb-register-birthdate {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    .bb-register-grid .bb-register-userid { order: 1; }
    .bb-register-grid .bb-register-email { order: 2; }
    .bb-register-grid .bb-register-confirm-email { order: 3; }
    .bb-register-grid .bb-register-password { order: 4; }
    .bb-register-grid .bb-register-confirm-password { order: 5; }
    .bb-register-grid .bb-register-gender { order: 6; }
    .bb-register-grid .bb-register-security { order: 7; }
    .bb-register-grid .bb-register-birthdate { order: 8; }

    .bb-register-grid .bb-register-security .security-code-input {
        width: 100% !important;
    }
}

/* V114 — password rule alignment + Return of Midgard Server Rules page */
@media (min-width: 801px) {
    /* Slightly wider inner register block so all password checks fit cleanly on one line. */
    .portal-main-register .bb-register-page {
        width: 720px !important;
        max-width: 720px !important;
    }

    .bb-register-grid {
        /* Give the password column extra room for the longer live-check row. */
        grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
        column-gap: 22px;
    }

    .bb-register-grid .bb-register-password .bb-password-requirements {
        flex-wrap: nowrap !important;
        gap: 8px 10px !important;
        width: 100%;
        max-width: 100%;
    }

    .bb-register-grid .bb-register-password .bb-password-rule {
        white-space: nowrap !important;
    }
}

/* Keep the new rules page intentionally empty until the real rules are written. */
.portal-server-rules-heading {
    margin-bottom: 10px;
}
.portal-server-rules-content {
    min-height: 320px;
}


/* V115 — consistent member-form typography + compact Login Security row */
.bb-member-form,
.bb-member-form input,
.bb-member-form select,
.bb-member-form button,
.bb-member-form textarea {
    font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
}

.bb-member-form-table th > label,
.bb-member-form-table th label {
    color: #17354e !important;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.bb-member-form-table input[type="text"],
.bb-member-form-table input[type="password"],
.bb-member-form-table input[type="email"],
.bb-member-form-table select,
.bb-member-form-table textarea {
    box-sizing: border-box !important;
    min-height: 43px !important;
    padding: 9px 12px !important;
    border: 1px solid #8ea4b5 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #17354e !important;
    font: 500 15px/1.25 "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
    box-shadow: inset 0 1px 1px rgba(16,43,64,.035) !important;
}

.bb-member-form-table input[type="text"]:focus,
.bb-member-form-table input[type="password"]:focus,
.bb-member-form-table input[type="email"]:focus,
.bb-member-form-table select:focus,
.bb-member-form-table textarea:focus {
    border-color: #263f54 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(201,158,66,.36) !important;
}

.bb-member-form-table td > p,
.bb-member-form > p,
.bb-member-form-table td p {
    font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Login security controls: keep CAPTCHA + refresh together and the code input compact. */
.bb-login-form .bb-member-security-row > td {
    min-width: 0 !important;
}

.bb-login-form .bb-member-security-tools {
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 0 8px !important;
}

.bb-login-form .bb-member-security-tools .security-code {
    box-sizing: border-box !important;
    flex: 0 0 130px !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #8ea4b5 !important;
    border-radius: 3px !important;
    background: #fff !important;
    line-height: 0 !important;
}

.bb-login-form .bb-member-security-tools .security-code img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: fill !important;
    box-shadow: none !important;
}

.bb-login-form .bb-member-security-tools .security-code-refresh {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 43px !important;
    height: 43px !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
    font: 700 11px/1 "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
}

.bb-login-form .bb-member-security-input {
    width: 220px !important;
    max-width: 100% !important;
}

/* Keep Login / Forgot Password / Resend forms visually aligned with Registration. */
.bb-member-form.portal-form,
.bb-member-form {
    max-width: 720px;
}

@media (max-width: 560px) {
    .bb-login-form .bb-member-security-tools {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }
    .bb-login-form .bb-member-security-input {
        width: 100% !important;
    }
}

/* V116 — extend Registration/V115 member-form typography to account security forms */
.bb-member-form-table th,
.bb-member-form-table th > label,
.bb-member-form-table th label {
    color: #17354e !important;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.bb-change-email-form input[type="text"],
.bb-change-email-form input[type="password"],
.bb-change-email-form input[type="email"],
.bb-change-password-form input[type="text"],
.bb-change-password-form input[type="password"],
.bb-change-password-form input[type="email"],
.bb-reset-storage-form input[type="text"],
.bb-reset-storage-form input[type="password"],
.bb-reset-storage-form input[type="email"] {
    width: min(100%, 340px) !important;
    box-sizing: border-box !important;
}

.bb-change-email-form input[type="submit"],
.bb-change-password-form input[type="submit"],
.bb-change-password-form button,
.bb-reset-storage-form input[type="submit"],
.bb-reset-storage-form button {
    font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
}

/* Keep helper text aligned with the same compact account-form typography. */
.bb-change-email-form .bb-member-form-table td > p,
.bb-reset-storage-form .bb-member-form-table td > p {
    margin: 4px 0 !important;
    color: #657888 !important;
}

@media (max-width: 560px) {
    .bb-change-email-form input[type="text"],
    .bb-change-email-form input[type="password"],
    .bb-change-email-form input[type="email"],
    .bb-change-password-form input[type="text"],
    .bb-change-password-form input[type="password"],
    .bb-change-password-form input[type="email"],
    .bb-reset-storage-form input[type="text"],
    .bb-reset-storage-form input[type="password"],
    .bb-reset-storage-form input[type="email"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* V117 — submit-time required-field highlighting for registration */
.bb-register-field.has-submit-error > label,
.bb-register-field.has-submit-error > .bb-register-label {
    color: #9c4039 !important;
}

.bb-register-field.has-submit-error input[type="text"],
.bb-register-field.has-submit-error input[type="email"],
.bb-register-field.has-submit-error input[type="password"],
.bb-register-field.has-submit-error input[type="date"],
.bb-register-field.has-submit-error select {
    border-color: #b94f47 !important;
    background: #fff8f7 !important;
    box-shadow: 0 0 0 1px rgba(185, 79, 71, .06) !important;
}

.bb-register-field.has-submit-error .bb-gender-options {
    border-color: #b94f47 !important;
    background: #fff8f7 !important;
    box-shadow: 0 0 0 1px rgba(185, 79, 71, .06) !important;
}
.bb-register-field.has-submit-error .bb-gender-choice {
    background: #fff8f7;
}
.bb-register-field.has-submit-error .bb-gender-option input:checked + .bb-gender-choice {
    background: #204f76;
    color: #fff;
}

.bb-register-field.has-submit-error input:focus,
.bb-register-field.has-submit-error select:focus {
    border-color: #a53f38 !important;
    box-shadow: 0 0 0 2px rgba(185, 79, 71, .18) !important;
}

.bb-required-error {
    display: block !important;
    margin-top: 6px !important;
    color: #a4493f !important;
    font: 700 12px/1.3 "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif !important;
}
.bb-required-error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font: 800 9px/1 Arial, Helvetica, sans-serif;
    vertical-align: 1px;
}

.bb-register-rules.has-submit-error .bb-rules-agreement {
    color: #9c4039 !important;
}
.bb-register-rules.has-submit-error .bb-rules-agreement input[type="checkbox"] {
    outline: 2px solid rgba(185, 79, 71, .45);
    outline-offset: 2px;
}
.bb-register-rules.has-submit-error .bb-required-error {
    text-align: center;
}

/* V123: ROMidgard morning-background polish */
/* Slightly translucent warm parchment so the bright nostalgic background can breathe through. */
.portal-main:not(.portal-main-home) {
    background: rgba(255, 250, 240, .92) !important;
    backdrop-filter: blur(1.2px);
    -webkit-backdrop-filter: blur(1.2px);
}
.portal-home-shell {
    background-color: rgba(255, 250, 240, .94) !important;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

/* Make the top-right slogan quieter against the bright morning sky. */
@media (min-width: 801px) {
    .portal-hero-copy {
        width: min(100%, 365px) !important;
        max-width: 365px !important;
        transform: translateY(-5px) !important;
    }
    .portal-hero-title {
        text-shadow: 0 1px 3px rgba(25, 48, 65, .34), 0 1px 0 rgba(255,255,255,.22) !important;
    }
    .portal-hero-title-top {
        font-size: 21px !important;
        letter-spacing: .015em !important;
    }
    .portal-hero-title-bottom {
        min-width: 190px !important;
        padding: 0 48px !important;
        font-size: 19px !important;
        letter-spacing: .03em !important;
    }
    .portal-hero-title-bottom:before,
    .portal-hero-title-bottom:after {
        width: 38px !important;
        opacity: .82;
    }
}


/* V124: approved-preview composition tuning */
@media (min-width: 801px) {
    /* Slightly larger brand mark, closer to the approved preview proportions. */
    .portal-brand.portal-brand-image img {
        width: min(100%, 410px) !important;
        max-height: 230px !important;
        object-fit: contain !important;
    }

    /* Keep the slogan compact so the airship remains fully visible between brand and copy. */
    .portal-hero-copy {
        width: min(100%, 355px) !important;
        max-width: 355px !important;
        transform: translateY(-5px) !important;
    }
}


/* V125: top-right slogan readability polish */
@media (min-width: 801px) {
    .portal-hero-copy {
        width: min(100%, 355px) !important;
        max-width: 355px !important;
        transform: translateY(10px) !important;
        padding-top: 10px !important;
        position: relative;
        z-index: 3;
    }

    .portal-hero-title {
        position: relative;
        display: inline-flex !important;
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
        color: #fffdf8 !important;
        text-shadow:
            0 2px 5px rgba(16, 41, 66, .82),
            0 0 12px rgba(18, 54, 88, .28),
            0 1px 0 rgba(255, 255, 255, .18) !important;
        filter: drop-shadow(0 2px 4px rgba(12, 34, 54, .24));
    }

    .portal-hero-title-top {
        font-size: 21px !important;
        letter-spacing: .028em !important;
    }

    .portal-hero-title-bottom {
        min-width: 198px !important;
        padding: 0 44px !important;
        font-size: 19px !important;
        letter-spacing: .07em !important;
    }

    .portal-hero-title-bottom:before,
    .portal-hero-title-bottom:after {
        width: 36px !important;
        opacity: .95 !important;
        box-shadow: 0 1px 2px rgba(18, 52, 85, .38);
    }

    .portal-hero-meta {
        margin-top: 10px !important;
        font-size: 11px !important;
        letter-spacing: .05em !important;
        color: rgba(250, 248, 244, .98) !important;
        text-shadow:
            0 2px 4px rgba(16, 41, 66, .78),
            0 0 8px rgba(18, 54, 88, .22) !important;
        font-weight: 700 !important;
    }

    .portal-hero-meta:before {
        content: "";
        display: block;
        width: 154px;
        height: 1px;
        margin: 0 auto 8px auto;
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0),
            rgba(248, 231, 179, .95) 18%,
            rgba(255, 255, 255, .95) 50%,
            rgba(248, 231, 179, .95) 82%,
            rgba(255, 255, 255, 0));
        box-shadow: 0 1px 2px rgba(16, 41, 66, .28);
        opacity: .92;
    }

    .portal-home-shell {
        background-color: rgba(255, 250, 240, .955) !important;
    }
}

/* V126: lower top-right title a bit more + stronger readability + logo shadow polish */
@media (min-width: 801px) {
    .portal-hero-copy {
        transform: translateY(18px) !important;
        padding-top: 10px !important;
    }

    .portal-hero-title {
        color: #fffdf8 !important;
        text-shadow:
            0 3px 8px rgba(14, 38, 63, .88),
            0 0 14px rgba(18, 54, 88, .30),
            0 1px 0 rgba(255,255,255,.20) !important;
        filter: drop-shadow(0 2px 5px rgba(10, 28, 46, .28));
    }

    .portal-hero-title-top,
    .portal-hero-title-bottom {
        position: relative;
    }

    .portal-hero-meta {
        text-shadow:
            0 3px 7px rgba(14, 38, 63, .84),
            0 0 10px rgba(18, 54, 88, .22) !important;
    }

    .portal-brand.portal-brand-image img {
        filter:
            drop-shadow(0 12px 24px rgba(0,0,0,.36))
            drop-shadow(0 3px 8px rgba(16, 41, 66, .18))
            drop-shadow(0 0 10px rgba(255,245,214,.12)) !important;
    }
}

/* V127: slight logo downscale + lower top-right title + subtle premium glow */
@media (min-width: 801px) {
    .portal-brand.portal-brand-image {
        transform: scale(0.94);
        transform-origin: left top;
    }

    .portal-hero-copy {
        transform: translateY(26px) !important;
        padding-top: 12px !important;
    }

    .portal-hero-title {
        color: #fffdf8 !important;
        text-shadow:
            0 3px 10px rgba(14, 38, 63, .92),
            0 0 16px rgba(120, 197, 255, .22),
            0 0 5px rgba(255, 244, 214, .18),
            0 1px 0 rgba(255,255,255,.22) !important;
        filter: drop-shadow(0 2px 6px rgba(10, 28, 46, .30));
    }

    .portal-hero-meta {
        text-shadow:
            0 3px 8px rgba(14, 38, 63, .88),
            0 0 10px rgba(120, 197, 255, .14) !important;
    }
}

/* V128: animated ROMidgard logo aura/glow */
@keyframes romidgard-logo-glow {
    0%, 100% {
        filter:
            drop-shadow(0 10px 20px rgba(0,0,0,.34))
            drop-shadow(0 0 6px rgba(255,220,135,.28))
            drop-shadow(0 0 10px rgba(125,190,255,.10));
    }
    50% {
        filter:
            drop-shadow(0 12px 24px rgba(0,0,0,.38))
            drop-shadow(0 0 14px rgba(255,225,145,.72))
            drop-shadow(0 0 26px rgba(125,190,255,.42));
    }
}

@keyframes romidgard-logo-halo {
    0%, 100% {
        opacity: .22;
        transform: scale(.94);
    }
    50% {
        opacity: .48;
        transform: scale(1.05);
    }
}

@media (min-width: 801px) {
    .portal-brand.portal-brand-image {
        position: relative;
        isolation: isolate;
    }

    .portal-brand.portal-brand-image::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 48%;
        width: 82%;
        height: 64%;
        transform: translate(-50%, -50%) scale(.94);
        border-radius: 50%;
        background: radial-gradient(ellipse at center,
            rgba(255, 234, 170, .30) 0%,
            rgba(154, 206, 255, .18) 38%,
            rgba(255,255,255,0) 72%);
        filter: blur(14px);
        pointer-events: none;
        z-index: -1;
        animation: romidgard-logo-halo 4.2s ease-in-out infinite;
    }

    .portal-brand.portal-brand-image img {
        animation: romidgard-logo-glow 4.2s ease-in-out infinite !important;
        will-change: filter;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-brand.portal-brand-image img,
    .portal-brand.portal-brand-image::before {
        animation: none !important;
    }
}


/* V129: clearly visible live logo glow test */
@keyframes romidgard-logo-glow-v129 {
    0%, 100% {
        transform: scale(1);
        filter:
            brightness(1.00)
            saturate(1.00)
            drop-shadow(0 10px 20px rgba(0,0,0,.34))
            drop-shadow(0 0 8px rgba(255,214,110,.38))
            drop-shadow(0 0 14px rgba(105,180,255,.18));
    }
    50% {
        transform: scale(1.022);
        filter:
            brightness(1.16)
            saturate(1.08)
            drop-shadow(0 12px 24px rgba(0,0,0,.38))
            drop-shadow(0 0 20px rgba(255,224,120,.92))
            drop-shadow(0 0 38px rgba(100,185,255,.62));
    }
}

@keyframes romidgard-logo-halo-v129 {
    0%, 100% {
        opacity: .34;
        transform: translate(-50%, -50%) scale(.94);
    }
    50% {
        opacity: .78;
        transform: translate(-50%, -50%) scale(1.12);
    }
}

@media (min-width: 801px) {
    .portal-brand.portal-brand-image {
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
    }

    .portal-brand.portal-brand-image::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 96% !important;
        height: 78% !important;
        border-radius: 50% !important;
        background: radial-gradient(ellipse at center,
            rgba(255, 229, 145, .58) 0%,
            rgba(128, 196, 255, .34) 42%,
            rgba(255,255,255,0) 74%) !important;
        filter: blur(18px) !important;
        pointer-events: none !important;
        z-index: 0 !important;
        animation: romidgard-logo-halo-v129 3.2s ease-in-out infinite !important;
    }

    .portal-brand.portal-brand-image img {
        position: relative !important;
        z-index: 1 !important;
        transform-origin: center center !important;
        animation: romidgard-logo-glow-v129 3.2s ease-in-out infinite !important;
        will-change: transform, filter !important;
    }
}

/* V130: fixed-size logo with breathing gold/blue aura only */
@keyframes romidgard-logo-glow-v130 {
    0%, 100% {
        filter:
            brightness(1.00)
            saturate(1.00)
            drop-shadow(0 10px 20px rgba(0,0,0,.34))
            drop-shadow(0 0 7px rgba(255,214,110,.34))
            drop-shadow(0 0 13px rgba(105,180,255,.14));
    }
    50% {
        filter:
            brightness(1.11)
            saturate(1.05)
            drop-shadow(0 12px 24px rgba(0,0,0,.38))
            drop-shadow(0 0 18px rgba(255,226,130,.82))
            drop-shadow(0 0 34px rgba(105,188,255,.48));
    }
}

@keyframes romidgard-logo-halo-v130 {
    0%, 100% {
        opacity: .30;
        transform: translate(-50%, -50%) scale(.96);
    }
    50% {
        opacity: .68;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@media (min-width: 801px) {
    .portal-brand.portal-brand-image::before {
        animation: romidgard-logo-halo-v130 4s ease-in-out infinite !important;
    }

    .portal-brand.portal-brand-image img {
        /* Keep logo size completely fixed; only light/filter breathes. */
        animation: romidgard-logo-glow-v130 4s ease-in-out infinite !important;
        will-change: transform, filter !important;
    }
}

/* V131: noticeable pulse + stronger live gold/blue aura */
@keyframes romidgard-logo-glow-v131 {
    0%, 100% {
        transform: scale(1);
        filter:
            brightness(1.00)
            saturate(1.02)
            drop-shadow(0 10px 20px rgba(0,0,0,.36))
            drop-shadow(0 0 10px rgba(255,216,105,.46))
            drop-shadow(0 0 18px rgba(100,185,255,.26));
    }
    50% {
        transform: scale(1.025);
        filter:
            brightness(1.18)
            saturate(1.10)
            drop-shadow(0 12px 25px rgba(0,0,0,.40))
            drop-shadow(0 0 24px rgba(255,228,125,.98))
            drop-shadow(0 0 44px rgba(92,190,255,.72))
            drop-shadow(0 0 58px rgba(255,246,205,.24));
    }
}

@keyframes romidgard-logo-halo-v131 {
    0%, 100% {
        opacity: .38;
        transform: translate(-50%, -50%) scale(.94);
    }
    50% {
        opacity: .90;
        transform: translate(-50%, -50%) scale(1.16);
    }
}

@media (min-width: 801px) {
    .portal-brand.portal-brand-image {
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
    }

    .portal-brand.portal-brand-image::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 104% !important;
        height: 84% !important;
        border-radius: 50% !important;
        background: radial-gradient(ellipse at center,
            rgba(255,232,145,.72) 0%,
            rgba(128,202,255,.46) 40%,
            rgba(255,255,255,0) 75%) !important;
        filter: blur(20px) !important;
        pointer-events: none !important;
        z-index: 0 !important;
        animation: romidgard-logo-halo-v131 3.4s ease-in-out infinite !important;
        will-change: opacity, transform !important;
    }

    .portal-brand.portal-brand-image img {
        position: relative !important;
        z-index: 1 !important;
        transform-origin: center center !important;
        animation: romidgard-logo-glow-v131 3.4s ease-in-out infinite !important;
        will-change: transform, filter !important;
    }
}


/* V132: restore real logo pulse + higher-contrast gold/ivory aura */
@keyframes romidgard-logo-glow-v132 {
    0%, 100% {
        transform: scale(1);
        filter:
            brightness(1.00)
            saturate(1.02)
            drop-shadow(0 10px 20px rgba(8, 25, 43, .52))
            drop-shadow(0 0 8px rgba(255, 205, 84, .58))
            drop-shadow(0 0 14px rgba(255, 246, 208, .28));
    }
    50% {
        transform: scale(1.035);
        filter:
            brightness(1.18)
            saturate(1.08)
            drop-shadow(0 13px 25px rgba(8, 25, 43, .58))
            drop-shadow(0 0 18px rgba(255, 202, 70, .98))
            drop-shadow(0 0 34px rgba(255, 238, 174, .78))
            drop-shadow(0 0 48px rgba(255, 255, 238, .36));
    }
}

@keyframes romidgard-logo-halo-v132 {
    0%, 100% {
        opacity: .34;
        transform: translate(-50%, -50%) scale(.94);
    }
    50% {
        opacity: .88;
        transform: translate(-50%, -50%) scale(1.14);
    }
}

@media (min-width: 801px) {
    .portal-brand.portal-brand-image::before {
        background: radial-gradient(ellipse at center,
            rgba(255, 221, 112, .72) 0%,
            rgba(255, 243, 196, .44) 38%,
            rgba(255, 255, 245, .18) 56%,
            rgba(255,255,255,0) 76%) !important;
        filter: blur(18px) !important;
        animation: romidgard-logo-halo-v132 3.4s ease-in-out infinite !important;
    }

    .portal-brand.portal-brand-image img {
        transform-origin: center center !important;
        animation: romidgard-logo-glow-v132 3.4s ease-in-out infinite !important;
        will-change: transform, filter !important;
    }
}

/* V133: live logo glow sampler — cycles through four aura styles */
@keyframes romidgard-logo-glow-sampler {
    0%, 5%, 20%, 100% {
        transform: scale(1.000) !important;
        filter:
            brightness(1.02)
            drop-shadow(0 12px 24px rgba(0,0,0,.38))
            drop-shadow(0 0 10px rgba(255,236,174,.45))
            drop-shadow(0 0 24px rgba(255,184,64,.42)) !important;
    }
    10%, 15% {
        transform: scale(1.035) !important;
        filter:
            brightness(1.12)
            saturate(1.04)
            drop-shadow(0 14px 28px rgba(0,0,0,.42))
            drop-shadow(0 0 16px rgba(255,246,196,.95))
            drop-shadow(0 0 34px rgba(255,196,74,.78))
            drop-shadow(0 0 54px rgba(255,143,36,.34)) !important;
    }

    25%, 30%, 45% {
        transform: scale(1.000) !important;
        filter:
            brightness(1.03)
            drop-shadow(0 12px 24px rgba(0,0,0,.38))
            drop-shadow(0 0 12px rgba(255,255,245,.62))
            drop-shadow(0 0 30px rgba(255,250,220,.38)) !important;
    }
    35%, 40% {
        transform: scale(1.035) !important;
        filter:
            brightness(1.16)
            drop-shadow(0 14px 28px rgba(0,0,0,.42))
            drop-shadow(0 0 18px rgba(255,255,250,1))
            drop-shadow(0 0 38px rgba(255,244,208,.72))
            drop-shadow(0 0 60px rgba(255,255,255,.28)) !important;
    }

    50%, 55%, 70% {
        transform: scale(1.000) !important;
        filter:
            brightness(1.02)
            drop-shadow(0 12px 24px rgba(0,0,0,.38))
            drop-shadow(0 0 12px rgba(135,201,255,.48))
            drop-shadow(0 0 28px rgba(72,151,255,.34)) !important;
    }
    60%, 65% {
        transform: scale(1.035) !important;
        filter:
            brightness(1.11)
            saturate(1.04)
            drop-shadow(0 14px 28px rgba(0,0,0,.42))
            drop-shadow(0 0 16px rgba(188,224,255,.96))
            drop-shadow(0 0 34px rgba(82,164,255,.70))
            drop-shadow(0 0 56px rgba(61,119,225,.28)) !important;
    }

    75%, 80%, 95% {
        transform: scale(1.000) !important;
        filter:
            brightness(1.02)
            drop-shadow(0 14px 28px rgba(6,25,48,.48))
            drop-shadow(0 0 11px rgba(255,231,155,.54))
            drop-shadow(0 0 24px rgba(255,183,57,.36)) !important;
    }
    85%, 90% {
        transform: scale(1.035) !important;
        filter:
            brightness(1.12)
            saturate(1.05)
            drop-shadow(0 16px 32px rgba(6,25,48,.58))
            drop-shadow(0 0 17px rgba(255,242,192,.96))
            drop-shadow(0 0 36px rgba(255,190,66,.72))
            drop-shadow(0 0 56px rgba(23,67,113,.34)) !important;
    }
}

@keyframes romidgard-sun-rays-sampler {
    0%, 20%, 100% { opacity: .40; transform: scale(.92) rotate(0deg); }
    10%, 15% { opacity: .82; transform: scale(1.08) rotate(3deg); }
    25%, 45% { opacity: .24; transform: scale(.96) rotate(0deg); }
    35%, 40% { opacity: .55; transform: scale(1.03) rotate(-2deg); }
    50%, 70% { opacity: .18; transform: scale(.96) rotate(0deg); }
    60%, 65% { opacity: .38; transform: scale(1.02) rotate(2deg); }
    75%, 95% { opacity: .28; transform: scale(.96) rotate(0deg); }
    85%, 90% { opacity: .58; transform: scale(1.04) rotate(-2deg); }
}

@media (min-width: 801px) {
    .portal-brand.portal-brand-image {
        position: relative !important;
        isolation: isolate;
        overflow: visible !important;
    }

    .portal-brand.portal-brand-image::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 3%;
        top: 0%;
        width: 94%;
        height: 96%;
        pointer-events: none;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 48%, rgba(255,250,214,.82) 0 10%, rgba(255,208,103,.48) 24%, rgba(255,153,45,.20) 43%, transparent 69%),
            repeating-conic-gradient(from 0deg at 50% 48%, rgba(255,226,139,.25) 0deg 4deg, transparent 4deg 14deg);
        filter: blur(8px);
        mix-blend-mode: screen;
        animation: romidgard-sun-rays-sampler 16s ease-in-out infinite !important;
        transform-origin: 50% 48%;
    }

    .portal-brand.portal-brand-image img {
        transform-origin: 50% 52% !important;
        animation: romidgard-logo-glow-sampler 16s ease-in-out infinite !important;
        will-change: transform, filter;
    }
}


/* V134: reliable sun-aura logo pulse (container pulse + separate aura) */
@keyframes romidgard-brand-pulse-v134 {
    0%, 100% {
        transform: scale(.94);
    }
    50% {
        transform: scale(.978);
    }
}

@keyframes romidgard-sun-aura-v134 {
    0%, 100% {
        opacity: .42;
        transform: scale(.90) rotate(-1deg);
    }
    50% {
        opacity: .96;
        transform: scale(1.12) rotate(1.5deg);
    }
}

@media (min-width: 801px) {
    .portal-brand.portal-brand-image {
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
        transform-origin: left top !important;
        animation: romidgard-brand-pulse-v134 3.4s ease-in-out infinite !important;
        will-change: transform !important;
    }

    .portal-brand.portal-brand-image::before {
        content: "" !important;
        position: absolute !important;
        z-index: 0 !important;
        left: -2% !important;
        top: -8% !important;
        width: 108% !important;
        height: 116% !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        background:
            radial-gradient(ellipse at center,
                rgba(255,255,236,.96) 0%,
                rgba(255,238,150,.90) 16%,
                rgba(255,192,70,.66) 34%,
                rgba(255,137,28,.30) 52%,
                rgba(255,184,60,0) 72%),
            repeating-conic-gradient(from -4deg at 50% 50%,
                rgba(255,232,145,.34) 0deg 3deg,
                rgba(255,255,255,0) 3deg 13deg) !important;
        filter: blur(7px) !important;
        animation: romidgard-sun-aura-v134 3.4s ease-in-out infinite !important;
        transform-origin: 50% 50% !important;
    }

    .portal-brand.portal-brand-image img {
        position: relative !important;
        z-index: 1 !important;
        animation: none !important;
        transform: none !important;
        filter:
            drop-shadow(0 11px 22px rgba(5,24,43,.58))
            drop-shadow(0 0 7px rgba(255,242,188,.78))
            drop-shadow(0 0 13px rgba(255,188,64,.34)) !important;
    }
}

/* V135: subtle pulse + Lv99 light-blue fairy lights + Ivory Halo */
@keyframes romidgard-brand-pulse-v135 {
    0%, 100% { transform: scale(.94); }
    50%      { transform: scale(.956); }
}

@keyframes romidgard-ivory-halo-v135 {
    0%, 100% {
        opacity: .46;
        transform: scale(.96);
    }
    50% {
        opacity: .72;
        transform: scale(1.035);
    }
}

@keyframes romidgard-fairy-twinkle-v135 {
    0%, 100% { opacity: .38; filter: brightness(.95); }
    45%      { opacity: 1; filter: brightness(1.20); }
    70%      { opacity: .62; filter: brightness(1.04); }
}

@keyframes romidgard-fairy-path-1-v135 {
    0%   { transform: translate(-205px,-42px) scale(.78); }
    18%  { transform: translate(-124px,-105px) scale(1.05); }
    39%  { transform: translate(34px,-118px) scale(.88); }
    63%  { transform: translate(198px,-30px) scale(1.12); }
    82%  { transform: translate(126px,76px) scale(.84); }
    100% { transform: translate(-205px,-42px) scale(.78); }
}

@keyframes romidgard-fairy-path-2-v135 {
    0%   { transform: translate(154px,-92px) scale(.82); }
    23%  { transform: translate(218px,18px) scale(1.05); }
    48%  { transform: translate(92px,100px) scale(.90); }
    73%  { transform: translate(-146px,70px) scale(1.10); }
    88%  { transform: translate(-218px,-22px) scale(.80); }
    100% { transform: translate(154px,-92px) scale(.82); }
}

@keyframes romidgard-fairy-path-3-v135 {
    0%   { transform: translate(-148px,86px) scale(.74); }
    16%  { transform: translate(-220px,6px) scale(1.06); }
    41%  { transform: translate(-78px,-102px) scale(.86); }
    66%  { transform: translate(142px,-76px) scale(1.08); }
    84%  { transform: translate(206px,34px) scale(.83); }
    100% { transform: translate(-148px,86px) scale(.74); }
}

@keyframes romidgard-fairy-path-4-v135 {
    0%   { transform: translate(35px,98px) scale(.76); }
    21%  { transform: translate(168px,62px) scale(1.04); }
    46%  { transform: translate(108px,-98px) scale(.88); }
    69%  { transform: translate(-92px,-110px) scale(1.08); }
    87%  { transform: translate(-188px,20px) scale(.80); }
    100% { transform: translate(35px,98px) scale(.76); }
}

@media (min-width: 801px) {
    .portal-brand.portal-brand-image {
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
        transform-origin: left top !important;
        animation: romidgard-brand-pulse-v135 5.6s ease-in-out infinite !important;
        will-change: transform !important;
    }

    /* Ivory Halo: soft creamy-white aura behind the logo. */
    .portal-brand.portal-brand-image::before {
        content: "" !important;
        position: absolute !important;
        z-index: 0 !important;
        left: 0% !important;
        top: -2% !important;
        width: 100% !important;
        height: 104% !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        background: radial-gradient(ellipse at center,
            rgba(255,255,246,.82) 0%,
            rgba(255,251,226,.58) 24%,
            rgba(250,243,211,.30) 43%,
            rgba(255,255,255,.10) 58%,
            rgba(255,255,255,0) 74%) !important;
        filter: blur(14px) !important;
        animation: romidgard-ivory-halo-v135 5.6s ease-in-out infinite !important;
        transform-origin: center center !important;
    }

    .portal-brand.portal-brand-image img {
        position: relative !important;
        z-index: 2 !important;
        animation: none !important;
        transform: none !important;
        filter:
            drop-shadow(0 10px 20px rgba(6,28,50,.46))
            drop-shadow(0 0 5px rgba(255,252,232,.36)) !important;
    }

    /* Small Lv99-style light-blue fairy lights. */
    .portal-brand.portal-brand-image .romidgard-fairy {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        z-index: 3 !important;
        width: 6px !important;
        height: 6px !important;
        margin: -3px 0 0 -3px !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        background: rgba(241,252,255,.98) !important;
        box-shadow:
            0 0 4px 2px rgba(230,249,255,.92),
            0 0 9px 4px rgba(130,215,255,.68),
            0 0 16px 7px rgba(72,171,255,.26) !important;
        transform-origin: center center !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy::before,
    .portal-brand.portal-brand-image .romidgard-fairy::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 999px !important;
        background: rgba(220,247,255,.88) !important;
        box-shadow: 0 0 5px rgba(121,207,255,.42) !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy::before {
        width: 1px !important;
        height: 15px !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy::after {
        width: 15px !important;
        height: 1px !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy-1 {
        animation:
            romidgard-fairy-path-1-v135 13.8s ease-in-out infinite,
            romidgard-fairy-twinkle-v135 2.7s ease-in-out infinite !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy-2 {
        animation:
            romidgard-fairy-path-2-v135 17.6s ease-in-out infinite,
            romidgard-fairy-twinkle-v135 3.2s ease-in-out .7s infinite !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy-3 {
        animation:
            romidgard-fairy-path-3-v135 20.4s ease-in-out infinite,
            romidgard-fairy-twinkle-v135 2.9s ease-in-out 1.1s infinite !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy-4 {
        animation:
            romidgard-fairy-path-4-v135 15.9s ease-in-out infinite,
            romidgard-fairy-twinkle-v135 3.5s ease-in-out .3s infinite !important;
    }
}

/* Keep the small decorative lights out of the compact mobile header. */
@media (max-width: 800px) {
    .portal-brand.portal-brand-image .romidgard-fairy {
        display: none !important;
    }
}


/* V136: approved V5 logo effect + pure diamond surface shine */
@keyframes romidgard-brand-pulse-v136 {
    0%, 100% { transform: scale(.94); }
    50%      { transform: scale(.9522); }
}

@keyframes romidgard-ivory-halo-v136 {
    0%, 100% {
        opacity: .55;
        transform: scale(.97);
    }
    50% {
        opacity: .78;
        transform: scale(1.045);
    }
}

@keyframes romidgard-fairy-twinkle-v136 {
    from { opacity: .48; filter: brightness(.94); }
    to   { opacity: 1;   filter: brightness(1.18); }
}

@keyframes romidgard-fairy-path-1-v136 {
    0%   { transform: translate(-205px,-42px) scale(.82); }
    19%  { transform: translate(-110px,-106px) scale(1.02); }
    43%  { transform: translate(86px,-86px) scale(.90); }
    69%  { transform: translate(202px,20px) scale(1.05); }
    84%  { transform: translate(68px,98px) scale(.86); }
    100% { transform: translate(-205px,-42px) scale(.82); }
}

@keyframes romidgard-fairy-path-2-v136 {
    0%   { transform: translate(136px,-94px) scale(.82); }
    24%  { transform: translate(208px,8px) scale(1.04); }
    47%  { transform: translate(104px,98px) scale(.90); }
    72%  { transform: translate(-130px,74px) scale(1.04); }
    88%  { transform: translate(-205px,-14px) scale(.84); }
    100% { transform: translate(136px,-94px) scale(.82); }
}

@keyframes romidgard-fairy-path-3-v136 {
    0%   { transform: translate(-145px,88px) scale(.78); }
    21%  { transform: translate(-210px,-10px) scale(1.03); }
    49%  { transform: translate(-48px,-104px) scale(.88); }
    74%  { transform: translate(164px,-62px) scale(1.05); }
    89%  { transform: translate(202px,50px) scale(.84); }
    100% { transform: translate(-145px,88px) scale(.78); }
}

@keyframes romidgard-fairy-path-4-v136 {
    0%   { transform: translate(34px,100px) scale(.80); }
    23%  { transform: translate(165px,64px) scale(1.03); }
    51%  { transform: translate(96px,-98px) scale(.88); }
    78%  { transform: translate(-168px,-70px) scale(1.05); }
    100% { transform: translate(34px,100px) scale(.80); }
}

/* Pure glossy sweep only: no star/cross flare. */
@keyframes romidgard-gem-sweep-top-v136 {
    0%, 8%, 100% { left: -90%; opacity: 0; }
    10%          { opacity: .22; }
    13%          { opacity: .92; }
    17%          { left: 135%; opacity: .62; }
    20%          { left: 135%; opacity: 0; }
}

@keyframes romidgard-gem-sweep-bottom-v136 {
    0%, 52%, 100% { left: -90%; opacity: 0; }
    54%           { opacity: .22; }
    57%           { opacity: .92; }
    61%           { left: 135%; opacity: .62; }
    64%           { left: 135%; opacity: 0; }
}

@keyframes romidgard-gem-bloom-top-v136 {
    0%, 9%, 100% { opacity: 0; }
    13%          { opacity: .55; }
    17%          { opacity: .22; }
    20%          { opacity: 0; }
}

@keyframes romidgard-gem-bloom-bottom-v136 {
    0%, 53%, 100% { opacity: 0; }
    57%           { opacity: .55; }
    61%           { opacity: .22; }
    64%           { opacity: 0; }
}

@media (min-width: 801px) {
    .portal-brand.portal-brand-image {
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
        transform-origin: left top !important;
        animation: romidgard-brand-pulse-v136 6.8s ease-in-out infinite !important;
        will-change: transform !important;
    }

    /* Approved V5 softer Ivory Halo. */
    .portal-brand.portal-brand-image::before {
        content: "" !important;
        position: absolute !important;
        z-index: 0 !important;
        left: -16% !important;
        top: -16% !important;
        width: 132% !important;
        height: 132% !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        background: radial-gradient(circle,
            rgba(255,255,245,.72) 0%,
            rgba(255,246,216,.38) 40%,
            rgba(255,255,255,0) 72%) !important;
        opacity: .70 !important;
        filter: blur(20px) !important;
        animation: romidgard-ivory-halo-v136 6.8s ease-in-out infinite !important;
        transform-origin: center center !important;
    }

    /* Wrapper follows the exact image box so gem coordinates stay aligned. */
    .portal-brand.portal-brand-image .romidgard-logo-art {
        position: relative !important;
        display: block !important;
        flex: 0 1 410px !important;
        width: 410px !important;
        max-width: 100% !important;
        line-height: 0 !important;
        z-index: 2 !important;
    }

    .portal-brand.portal-brand-image .romidgard-logo-art img {
        display: block !important;
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        max-width: 410px !important;
        max-height: 230px !important;
        height: auto !important;
        object-fit: contain !important;
        animation: none !important;
        transform: none !important;
        filter:
            drop-shadow(0 12px 22px rgba(5,20,35,.45))
            drop-shadow(0 0 10px rgba(255,255,244,.78))
            drop-shadow(0 0 30px rgba(255,245,215,.54)) !important;
    }

    /* Approved V5 small Lv99-style light-blue fairies. */
    .portal-brand.portal-brand-image .romidgard-fairy {
        width: 6px !important;
        height: 6px !important;
        margin: -3px 0 0 -3px !important;
        background: #fffef8 !important;
        box-shadow:
            0 0 4px 1px rgba(230,249,255,.96),
            0 0 8px 3px rgba(122,220,255,.68),
            0 0 14px 5px rgba(110,207,255,.22) !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy::before {
        width: 1px !important;
        height: 15px !important;
        background: rgba(177,235,255,.96) !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy::after {
        width: 15px !important;
        height: 1px !important;
        background: rgba(177,235,255,.96) !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy-1 {
        animation:
            romidgard-fairy-path-1-v136 16.5s ease-in-out infinite,
            romidgard-fairy-twinkle-v136 2.4s ease-in-out infinite alternate !important;
    }
    .portal-brand.portal-brand-image .romidgard-fairy-2 {
        animation:
            romidgard-fairy-path-2-v136 19.5s ease-in-out infinite,
            romidgard-fairy-twinkle-v136 2.9s ease-in-out infinite alternate !important;
    }
    .portal-brand.portal-brand-image .romidgard-fairy-3 {
        animation:
            romidgard-fairy-path-3-v136 22s ease-in-out infinite,
            romidgard-fairy-twinkle-v136 2.6s ease-in-out infinite alternate !important;
    }
    .portal-brand.portal-brand-image .romidgard-fairy-4 {
        animation:
            romidgard-fairy-path-4-v136 18.2s ease-in-out infinite,
            romidgard-fairy-twinkle-v136 3.2s ease-in-out infinite alternate !important;
    }

    /* Measured from the 1672x941 source PNG blue-pixel bounds. */
    .portal-brand.portal-brand-image .romidgard-gem-shine {
        position: absolute !important;
        z-index: 4 !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: none !important;
        overflow: hidden !important;
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%) !important;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine-top {
        left: 50.09% !important;
        top: 24.28% !important;
        width: 18px !important;
        height: 23px !important;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine-bottom {
        left: 50.09% !important;
        top: 73.27% !important;
        width: 14px !important;
        height: 17px !important;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine::before {
        content: "" !important;
        position: absolute !important;
        top: -20% !important;
        left: -90%;
        width: 48% !important;
        height: 140% !important;
        background: linear-gradient(90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.16) 20%,
            rgba(255,255,255,.92) 48%,
            rgba(224,245,255,.64) 60%,
            rgba(255,255,255,0) 100%) !important;
        filter: blur(.35px) !important;
        transform: skewX(-18deg) !important;
        mix-blend-mode: screen !important;
        opacity: 0;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine::after {
        content: "" !important;
        position: absolute !important;
        inset: 10% !important;
        background: radial-gradient(circle at 36% 28%,
            rgba(255,255,255,.62) 0%,
            rgba(226,244,255,.26) 28%,
            rgba(226,244,255,0) 68%) !important;
        opacity: 0;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine-top::before {
        animation: romidgard-gem-sweep-top-v136 6.4s ease-in-out infinite !important;
    }
    .portal-brand.portal-brand-image .romidgard-gem-shine-top::after {
        animation: romidgard-gem-bloom-top-v136 6.4s ease-in-out infinite !important;
    }
    .portal-brand.portal-brand-image .romidgard-gem-shine-bottom::before {
        animation: romidgard-gem-sweep-bottom-v136 6.4s ease-in-out infinite !important;
    }
    .portal-brand.portal-brand-image .romidgard-gem-shine-bottom::after {
        animation: romidgard-gem-bloom-bottom-v136 6.4s ease-in-out infinite !important;
    }
}

@media (max-width: 800px) {
    .portal-brand.portal-brand-image .romidgard-gem-shine {
        display: none !important;
    }
}


/* V137: live-safe explicit Ivory Halo + more visible pure diamond surface shine */
@keyframes romidgard-ivory-halo-v137 {
    0%, 100% {
        opacity: .50;
        transform: translate(-50%, -50%) scale(.985);
    }
    50% {
        opacity: .68;
        transform: translate(-50%, -50%) scale(1.035);
    }
}

@keyframes romidgard-gem-sweep-top-v137 {
    0%, 6%, 100% { left: -105%; opacity: 0; }
    9%            { opacity: .28; }
    13%           { opacity: .98; }
    19%           { left: 150%; opacity: .80; }
    24%           { left: 150%; opacity: 0; }
}

@keyframes romidgard-gem-sweep-bottom-v137 {
    0%, 48%, 100% { left: -105%; opacity: 0; }
    51%           { opacity: .28; }
    55%           { opacity: .98; }
    61%           { left: 150%; opacity: .80; }
    66%           { left: 150%; opacity: 0; }
}

@keyframes romidgard-gem-bloom-top-v137 {
    0%, 7%, 100% { opacity: 0; }
    12%           { opacity: .72; }
    18%           { opacity: .34; }
    24%           { opacity: 0; }
}

@keyframes romidgard-gem-bloom-bottom-v137 {
    0%, 49%, 100% { opacity: 0; }
    54%           { opacity: .72; }
    60%           { opacity: .34; }
    66%           { opacity: 0; }
}

@media (min-width: 801px) {
    /* Disable the older pseudo halo. The live halo is now a real DOM element. */
    .portal-brand.portal-brand-image::before {
        content: none !important;
        display: none !important;
        animation: none !important;
    }

    .portal-brand.portal-brand-image .romidgard-ivory-halo-live {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 48% !important;
        width: 118% !important;
        height: 108% !important;
        z-index: 1 !important;
        pointer-events: none !important;
        border-radius: 50% !important;
        background: radial-gradient(circle,
            rgba(255,255,245,.68) 0%,
            rgba(255,248,225,.34) 38%,
            rgba(255,246,216,.13) 56%,
            rgba(255,255,255,0) 73%) !important;
        filter: blur(17px) !important;
        animation: romidgard-ivory-halo-v137 6.8s ease-in-out infinite !important;
        transform-origin: center center !important;
        will-change: opacity, transform !important;
    }

    .portal-brand.portal-brand-image .romidgard-logo-art {
        z-index: 3 !important;
    }

    .portal-brand.portal-brand-image .romidgard-fairy {
        z-index: 6 !important;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine {
        z-index: 8 !important;
        display: block !important;
    }

    /* Keep pure glossy sweep only, but make it easier to notice on the live site. */
    .portal-brand.portal-brand-image .romidgard-gem-shine::before {
        width: 62% !important;
        background: linear-gradient(90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.20) 18%,
            rgba(255,255,255,1) 48%,
            rgba(224,245,255,.78) 62%,
            rgba(255,255,255,0) 100%) !important;
        filter: blur(.25px) !important;
        mix-blend-mode: screen !important;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine::after {
        background: radial-gradient(circle at 36% 28%,
            rgba(255,255,255,.78) 0%,
            rgba(226,244,255,.36) 30%,
            rgba(226,244,255,0) 70%) !important;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine-top::before {
        animation: romidgard-gem-sweep-top-v137 5.8s ease-in-out infinite !important;
    }
    .portal-brand.portal-brand-image .romidgard-gem-shine-top::after {
        animation: romidgard-gem-bloom-top-v137 5.8s ease-in-out infinite !important;
    }
    .portal-brand.portal-brand-image .romidgard-gem-shine-bottom::before {
        animation: romidgard-gem-sweep-bottom-v137 5.8s ease-in-out infinite !important;
    }
    .portal-brand.portal-brand-image .romidgard-gem-shine-bottom::after {
        animation: romidgard-gem-bloom-bottom-v137 5.8s ease-in-out infinite !important;
    }
}

@media (max-width: 800px) {
    .portal-brand.portal-brand-image .romidgard-ivory-halo-live {
        display: none !important;
    }
}

/* V138: restore approved title position + robust live Ivory Halo + pure gem surface shine */
@keyframes romidgard-ivory-halo-v138 {
    0%, 100% {
        opacity: .58;
        transform: translate(-50%, -50%) scale(.985);
    }
    50% {
        opacity: .76;
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@keyframes romidgard-gem-sweep-top-v138 {
    0%, 7%, 100% { left: -110%; opacity: 0; }
    10%           { opacity: .30; }
    14%           { opacity: 1; }
    21%           { left: 155%; opacity: .88; }
    27%           { left: 155%; opacity: 0; }
}

@keyframes romidgard-gem-sweep-bottom-v138 {
    0%, 49%, 100% { left: -110%; opacity: 0; }
    52%           { opacity: .30; }
    56%           { opacity: 1; }
    63%           { left: 155%; opacity: .88; }
    69%           { left: 155%; opacity: 0; }
}

@keyframes romidgard-gem-bloom-top-v138 {
    0%, 8%, 100% { opacity: 0; }
    14%           { opacity: .86; }
    21%           { opacity: .42; }
    27%           { opacity: 0; }
}

@keyframes romidgard-gem-bloom-bottom-v138 {
    0%, 50%, 100% { opacity: 0; }
    56%            { opacity: .86; }
    63%            { opacity: .42; }
    69%            { opacity: 0; }
}

@media (min-width: 801px) {
    /* Restore the previously stable V125 top-right composition. */
    .portal-hero-copy {
        width: min(100%, 355px) !important;
        max-width: 355px !important;
        transform: translateY(10px) !important;
        padding-top: 10px !important;
        position: relative !important;
        z-index: 3 !important;
    }

    .portal-hero-title {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 1px !important;
    }

    /* Real DOM halo, centered directly behind the 410px logo artwork. */
    .portal-brand.portal-brand-image .romidgard-ivory-halo-live {
        display: block !important;
        left: 50% !important;
        top: 50% !important;
        width: 126% !important;
        height: 118% !important;
        z-index: 1 !important;
        opacity: .68 !important;
        background: radial-gradient(ellipse,
            rgba(255,255,247,.82) 0%,
            rgba(255,249,230,.44) 34%,
            rgba(255,246,216,.18) 54%,
            rgba(255,255,255,0) 74%) !important;
        filter: blur(18px) !important;
        animation: romidgard-ivory-halo-v138 6.8s ease-in-out infinite !important;
        transform-origin: center center !important;
    }

    /* Edge glow guarantees the Ivory Halo remains visible on the bright sky. */
    .portal-brand.portal-brand-image .romidgard-logo-art img {
        filter:
            drop-shadow(0 12px 22px rgba(5,20,35,.45))
            drop-shadow(0 0 9px rgba(255,255,244,.84))
            drop-shadow(0 0 24px rgba(255,245,215,.58)) !important;
    }

    /* Pure glossy shine only: no star/cross flare. */
    .portal-brand.portal-brand-image .romidgard-gem-shine {
        z-index: 10 !important;
        display: block !important;
        overflow: hidden !important;
        pointer-events: none !important;
        mix-blend-mode: screen !important;
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%) !important;
    }

    /* Re-measured directly from the actual blue gem pixels in the source PNG. */
    .portal-brand.portal-brand-image .romidgard-gem-shine-top {
        left: 50.09% !important;
        top: 24.18% !important;
        width: 18px !important;
        height: 22px !important;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine-bottom {
        left: 50.06% !important;
        top: 73.22% !important;
        width: 15px !important;
        height: 18px !important;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine::before {
        content: "" !important;
        position: absolute !important;
        top: -22% !important;
        left: -110%;
        width: 70% !important;
        height: 145% !important;
        opacity: 0;
        background: linear-gradient(90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.24) 18%,
            rgba(255,255,255,1) 46%,
            rgba(229,247,255,.90) 58%,
            rgba(255,255,255,.18) 72%,
            rgba(255,255,255,0) 100%) !important;
        filter: blur(.20px) !important;
        transform: skewX(-18deg) !important;
        mix-blend-mode: screen !important;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine::after {
        content: "" !important;
        position: absolute !important;
        inset: 5% !important;
        opacity: 0;
        background: radial-gradient(circle at 38% 30%,
            rgba(255,255,255,.92) 0%,
            rgba(230,247,255,.48) 27%,
            rgba(204,235,255,.12) 48%,
            rgba(226,244,255,0) 72%) !important;
        filter: blur(.35px) !important;
    }

    .portal-brand.portal-brand-image .romidgard-gem-shine-top::before {
        animation: romidgard-gem-sweep-top-v138 7.2s ease-in-out infinite !important;
    }
    .portal-brand.portal-brand-image .romidgard-gem-shine-top::after {
        animation: romidgard-gem-bloom-top-v138 7.2s ease-in-out infinite !important;
    }
    .portal-brand.portal-brand-image .romidgard-gem-shine-bottom::before {
        animation: romidgard-gem-sweep-bottom-v138 7.2s ease-in-out infinite !important;
    }
    .portal-brand.portal-brand-image .romidgard-gem-shine-bottom::after {
        animation: romidgard-gem-bloom-bottom-v138 7.2s ease-in-out infinite !important;
    }
}