:root {
    color-scheme: dark;
}

html,
body.prp-fullscreen-page {
    width: 100%;
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #020c18;
}

body.prp-fullscreen-page {
    overflow: hidden;
}

body.prp-fullscreen-page #wpadminbar,
body.prp-fullscreen-page .site-header,
body.prp-fullscreen-page .site-footer,
body.prp-fullscreen-page header:not(.prp-header),
body.prp-fullscreen-page nav,
body.prp-fullscreen-page footer:not(.prp-footer),
body.prp-fullscreen-page .wp-block-template-part,
body.prp-fullscreen-page .entry-header,
body.prp-fullscreen-page .page-header,
body.prp-fullscreen-page .page-title {
    display: none !important;
}

body.prp-fullscreen-page #prp-page-root,
body.prp-fullscreen-page .wp-site-blocks,
body.prp-fullscreen-page main {
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.prp-shell,
.prp-shell * {
    box-sizing: border-box;
}

.prp-shell {
    --prp-accent: #d6a537;
    --prp-accent-light: #ffe69a;
    --prp-page-bg: #031326;
    --prp-card-bg: #071c32;
    --prp-overlay: .06;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: minmax(0, 1fr) clamp(88px, 11.8vh, 110px);
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
    color: #f7f1e2;
    background: var(--prp-page-bg);
    font-family: Georgia, 'Times New Roman', serif;
}

.prp-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -5;
    pointer-events: none;
    background-image: var(--prp-custom-bg);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.prp-shell::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background:
        linear-gradient(rgba(0, 0, 0, var(--prp-overlay)), rgba(0, 0, 0, var(--prp-overlay))),
        radial-gradient(circle at 50% 17%, rgba(255, 213, 113, .08), transparent 23%),
        linear-gradient(180deg, transparent 0%, rgba(0, 6, 13, .04) 68%, rgba(0, 6, 13, .24) 100%);
}

/* Old decorative elements are kept in the markup for compatibility,
   but the new built-in background already contains the exact artwork. */
.prp-bg-image,
.prp-orbit,
.prp-dot-map,
.prp-skyline {
    display: none !important;
}

.prp-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
    padding-top: clamp(44px, 6.1vh, 58px);
}

.prp-header {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.prp-logo-wrap {
    position: relative;
    display: grid;
    width: min(420px, 46vw);
    height: clamp(205px, 26.5vh, 249px);
    flex: 0 0 auto;
    place-items: center;
    margin: 0 auto;
    isolation: isolate;
}

.prp-logo-wrap::before,
.prp-logo-wrap::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 47%;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.prp-logo-wrap::before {
    width: 86%;
    height: 78%;
    background: radial-gradient(ellipse, rgba(255, 226, 147, .25) 0%, rgba(214, 165, 55, .12) 37%, rgba(214, 165, 55, 0) 72%);
    filter: blur(12px);
}

.prp-logo-wrap::after {
    width: 60%;
    height: 54%;
    background: radial-gradient(ellipse, rgba(255, 237, 177, .18), rgba(255, 210, 98, 0) 70%);
    filter: blur(6px);
}

.prp-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0 auto;
    object-fit: contain;
    filter:
        drop-shadow(0 0 2px rgba(255, 244, 201, .9))
        drop-shadow(0 0 8px rgba(255, 211, 105, .62))
        drop-shadow(0 0 20px rgba(214, 165, 55, .38));
}

.prp-header h1 {
    margin: 15px 0 0;
    color: #f8e9bb;
    font-size: clamp(2.6rem, 3.28vw, 3.45rem);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: .006em;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(255, 224, 144, .18);
}

.prp-title-rule {
    display: grid;
    grid-template-columns: 132px 10px 132px;
    align-items: center;
    gap: 12px;
    margin: 16px 0 11px;
}

.prp-title-rule span {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--prp-accent));
}

.prp-title-rule span:last-child {
    transform: scaleX(-1);
}

.prp-title-rule i {
    display: block;
    width: 9px;
    height: 9px;
    border: 2px solid var(--prp-accent-light);
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(255, 221, 129, .46);
}

.prp-header p {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: clamp(1.12rem, 1.55vw, 1.58rem);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: .045em;
    text-shadow: 0 1px 4px #000;
}

.prp-portal-grid {
    display: grid;
    grid-template-columns: repeat(var(--prp-desktop-columns, 6), minmax(0, 1fr));
    gap: clamp(10px, 1.15vw, 18px);
    width: 100%;
    margin-top: clamp(34px, 4.3vh, 40px);
}

.prp-portal-card {
    position: relative;
    display: flex;
    height: clamp(250px, 29.7vh, 276px);
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px 17px;
    overflow: hidden;
    color: #f8e9bd !important;
    text-align: center;
    text-decoration: none !important;
    border: 1px solid rgba(255, 216, 108, .92);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .065), transparent 34%),
        linear-gradient(180deg, #152d45 0%, var(--prp-card-bg) 72%, #031427 100%);
    box-shadow:
        0 0 0 1px rgba(214, 165, 55, .18),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 12px 28px rgba(0, 0, 0, .48),
        0 0 17px rgba(214, 165, 55, .18);
    transform: translateZ(0);
    transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease, background .32s ease;
}

.prp-portal-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, .024);
    border-radius: 18px;
    pointer-events: none;
}

.prp-card-glow {
    position: absolute;
    left: 50%;
    top: -34%;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 224, 137, .16), transparent 68%);
    transform: translateX(-50%);
    opacity: .78;
    transition: opacity .32s ease, transform .32s ease;
}

.prp-icon-ring {
    position: relative;
    display: grid;
    width: 98px;
    height: 98px;
    flex: 0 0 auto;
    place-items: center;
    border: 2px solid var(--prp-accent-light);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 28%, rgba(255, 255, 255, .09), rgba(2, 16, 31, .96));
    box-shadow: 0 0 0 1px rgba(214, 165, 55, .25), 0 0 18px rgba(214, 165, 55, .25);
    transition: transform .32s ease, box-shadow .32s ease;
}

.prp-icon-ring::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -13px;
    width: 84px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 195, 61, .82), transparent 68%);
    transform: translateX(-50%);
    filter: blur(1px);
}

.prp-icon {
    display: grid;
    width: 52%;
    height: 52%;
    place-items: center;
    color: var(--prp-accent-light);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}

.prp-icon svg,
.prp-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.prp-card-title {
    display: block;
    margin-top: 26px;
    color: #f7e8b9;
    font-size: clamp(1.22rem, 1.48vw, 1.66rem);
    font-weight: 500;
    line-height: 1.15;
    text-shadow: 0 2px 2px #000;
}

.prp-card-divider {
    display: block;
    width: 78%;
    height: 1px;
    margin: 14px 0 10px;
    background: linear-gradient(90deg, transparent, rgba(214, 165, 55, .36), transparent);
}

.prp-card-arrow {
    display: block;
    color: #f2b83f;
    font-family: Arial, sans-serif;
    font-size: 2.45rem;
    font-weight: 300;
    line-height: .75;
    transition: transform .32s ease, color .32s ease;
}

.prp-portal-card:hover,
.prp-portal-card:focus-visible {
    color: #fff4cf !important;
    border-color: #fff1b6;
    outline: none;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .105), transparent 38%),
        linear-gradient(180deg, #1a3954 0%, #0a2138 72%, #04182c 100%);
    box-shadow:
        0 0 0 1px rgba(255, 230, 154, .48),
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 19px 40px rgba(0, 0, 0, .56),
        0 0 30px rgba(214, 165, 55, .44);
    transform: translateY(-9px) scale(1.015);
}

.prp-portal-card:hover .prp-card-glow,
.prp-portal-card:focus-visible .prp-card-glow {
    opacity: 1;
    transform: translateX(-50%) scale(1.15);
}

.prp-portal-card:hover .prp-icon-ring,
.prp-portal-card:focus-visible .prp-icon-ring {
    box-shadow: 0 0 0 1px rgba(255, 234, 170, .44), 0 0 28px rgba(214, 165, 55, .54);
    transform: scale(1.055);
}

.prp-portal-card:hover .prp-card-arrow,
.prp-portal-card:focus-visible .prp-card-arrow {
    color: var(--prp-accent-light);
    transform: translateX(9px);
}

.prp-footer {
    position: relative;
    z-index: 3;
    display: flex !important;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px max(20px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    border-top: 1px solid rgba(214, 165, 55, .38);
    background: linear-gradient(180deg, rgba(0, 7, 14, .36), rgba(0, 7, 14, .72));
}

.prp-footer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -1px;
    width: min(520px, 52vw);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--prp-accent-light), transparent);
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(255, 218, 121, .46);
}

.prp-footer-items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.prp-footer-items a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 28px;
    color: rgba(255, 255, 255, .94) !important;
    font-size: clamp(.96rem, 1.18vw, 1.12rem);
    line-height: 1.4;
    text-decoration: none !important;
    text-shadow: 0 1px 3px #000;
    transition: color .22s ease, text-shadow .22s ease;
}

.prp-footer-items a + a {
    border-left: 1px solid rgba(214, 165, 55, .78);
}

.prp-footer-items a:hover,
.prp-footer-items a:focus-visible {
    color: var(--prp-accent-light) !important;
    outline: none;
    text-shadow: 0 0 9px rgba(255, 224, 142, .55);
}

.prp-footer-note {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .62);
    font-family: Arial, sans-serif;
    font-size: .76rem;
    letter-spacing: .04em;
}

/* Laptops with a shorter browser viewport: preserve the same proportions. */
@media (min-width: 1121px) and (max-height: 820px) {
    .prp-shell {
        min-height: 650px;
        grid-template-rows: minmax(0, 1fr) 78px;
    }

    .prp-content {
        padding-top: 24px;
    }

    .prp-logo-wrap {
        height: 190px;
        width: min(365px, 41vw);
    }

    .prp-header h1 {
        margin-top: 8px;
        font-size: 2.75rem;
    }

    .prp-title-rule {
        margin-top: 10px;
        margin-bottom: 7px;
    }

    .prp-header p {
        font-size: 1.15rem;
    }

    .prp-portal-grid {
        margin-top: 22px;
    }

    .prp-portal-card {
        height: 226px;
        min-height: 226px;
        padding-top: 15px;
        padding-bottom: 13px;
    }

    .prp-icon-ring {
        width: 80px;
        height: 80px;
    }

    .prp-card-title {
        margin-top: 20px;
        font-size: 1.38rem;
    }

    .prp-card-divider {
        margin-top: 10px;
        margin-bottom: 7px;
    }

    .prp-card-arrow {
        font-size: 2rem;
    }
}

@media (min-width: 1121px) and (max-width: 1380px) {
    .prp-content {
        width: min(1340px, calc(100% - 24px));
    }

    .prp-portal-grid {
        gap: 10px;
    }

    .prp-portal-card {
        padding-right: 9px;
        padding-left: 9px;
    }

    .prp-card-title {
        font-size: clamp(1.02rem, 1.22vw, 1.3rem);
    }
}

@media (min-width: 1121px) and (max-width: 1380px) {
    .prp-icon-ring {
        width: 78px;
        height: 78px;
    }

    .prp-card-title {
        margin-top: 20px;
        line-height: 1.08;
    }

    .prp-card-divider {
        width: 84%;
    }
}

@media (max-width: 1120px) {
    body.prp-fullscreen-page {
        overflow: auto;
    }

    .prp-shell {
        display: flex;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        flex-direction: column;
        overflow: hidden;
    }

    .prp-shell::before {
        background-size: cover;
    }

    .prp-content {
        flex: 1 0 auto;
        width: min(860px, calc(100% - 40px));
        padding-top: 28px;
        padding-bottom: 38px;
    }

    .prp-logo-wrap {
        width: min(350px, 58vw);
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .prp-header h1 {
        font-size: clamp(2rem, 5vw, 2.8rem);
    }

    .prp-header p {
        font-size: clamp(1rem, 2.4vw, 1.25rem);
    }

    .prp-portal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        margin-top: 30px;
    }

    .prp-portal-card {
        height: auto;
        min-height: 250px;
    }

    .prp-footer {
        min-height: 86px;
    }
}

@media (max-width: 680px) {
    .prp-shell::before {
        background-position: center top;
    }

    .prp-content {
        width: min(100% - 26px, 470px);
        padding-top: max(22px, env(safe-area-inset-top));
        padding-bottom: 30px;
    }

    .prp-logo-wrap {
        width: min(320px, 86vw);
    }

    .prp-header h1 {
        max-width: 96%;
        margin-top: 12px;
        font-size: clamp(1.8rem, 8vw, 2.35rem);
    }

    .prp-title-rule {
        grid-template-columns: minmax(64px, 102px) 9px minmax(64px, 102px);
        gap: 10px;
        margin-top: 13px;
        margin-bottom: 9px;
    }

    .prp-header p {
        max-width: 94%;
        font-size: .98rem;
        line-height: 1.45;
    }

    .prp-portal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        margin: 26px auto 0;
    }

    .prp-portal-card {
        min-width: 0;
        min-height: 205px;
        padding: 16px 7px 13px;
        border-radius: 17px;
    }

    .prp-icon-ring {
        width: 68px;
        height: 68px;
    }

    .prp-icon-ring::after {
        bottom: -10px;
        width: 62px;
        height: 7px;
    }

    .prp-card-title {
        margin-top: 18px;
        font-size: clamp(.94rem, 4.25vw, 1.22rem);
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .prp-card-divider {
        width: 86%;
        margin-top: 10px;
        margin-bottom: 7px;
    }

    .prp-card-arrow {
        font-size: 1.9rem;
    }

    .prp-footer {
        min-height: auto;
        padding-top: 19px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .prp-footer-items {
        flex-direction: column;
        gap: 7px;
    }

    .prp-footer-items a {
        min-height: auto;
        padding: 0;
        font-size: .93rem;
        overflow-wrap: anywhere;
    }

    .prp-footer-items a + a {
        border-left: 0;
    }
}

@media (max-width: 380px) {
    .prp-content {
        width: calc(100% - 14px);
    }

    .prp-logo-wrap {
        width: 92vw;
    }

    .prp-portal-grid {
        gap: 8px;
    }

    .prp-portal-card {
        min-height: 190px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .prp-icon-ring {
        width: 60px;
        height: 60px;
    }

    .prp-card-title {
        margin-top: 16px;
        font-size: clamp(.82rem, 4.15vw, 1rem);
    }

    .prp-card-arrow {
        font-size: 1.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prp-portal-card,
    .prp-card-glow,
    .prp-icon-ring,
    .prp-card-arrow {
        transition: none;
    }
}

/* Mobile/tablet browser fullscreen and standalone-app support. */
html {
    min-height: 100%;
    background: #020c18;
}

body.prp-fullscreen-page {
    min-height: var(--prp-app-height, 100dvh);
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1120px), (pointer: coarse) {
    .prp-shell {
        min-height: var(--prp-app-height, 100dvh);
    }
}

.prp-fullscreen-gate[hidden],
.prp-fullscreen-fab[hidden],
.prp-install-button[hidden],
.prp-fullscreen-help[hidden] {
    display: none !important;
}

.prp-fullscreen-gate {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding:
        max(22px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(22px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
    overflow-y: auto;
    background:
        radial-gradient(circle at 50% 32%, rgba(214, 165, 55, .18), transparent 34%),
        rgba(1, 10, 20, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.prp-fullscreen-dialog {
    width: min(100%, 430px);
    padding: 30px 25px 24px;
    color: #f7e9bd;
    text-align: center;
    border: 1px solid rgba(255, 220, 122, .8);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 36%),
        linear-gradient(180deg, #112b43 0%, #061a2e 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 24px 60px rgba(0, 0, 0, .62),
        0 0 34px rgba(214, 165, 55, .25);
}

.prp-fullscreen-symbol {
    display: grid;
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    place-items: center;
    color: var(--prp-accent-light, #ffe69a);
    font-family: Arial, sans-serif;
    font-size: 2.8rem;
    border: 2px solid var(--prp-accent-light, #ffe69a);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 226, 147, .12), rgba(2, 16, 31, .95));
    box-shadow: 0 0 24px rgba(214, 165, 55, .4);
}

.prp-fullscreen-dialog h2 {
    margin: 0 0 12px;
    color: #f8e9bb;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.65rem, 6vw, 2.05rem);
    font-weight: 500;
    line-height: 1.15;
}

.prp-fullscreen-dialog > p {
    margin: 0 auto 22px;
    color: rgba(255, 255, 255, .85);
    font-family: Arial, sans-serif;
    font-size: .98rem;
    line-height: 1.55;
}

.prp-fullscreen-dialog button {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: .98rem;
    font-weight: 700;
    border-radius: 14px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.prp-fullscreen-dialog button + button {
    margin-top: 10px;
}

.prp-fullscreen-primary,
.prp-install-button {
    color: #061426;
    border: 1px solid #fff1b6;
    background: linear-gradient(135deg, #fff0ad, #d7a536 55%, #f6d873);
    box-shadow: 0 8px 24px rgba(214, 165, 55, .3);
}

.prp-fullscreen-secondary {
    color: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 221, 135, .34);
    background: rgba(2, 15, 29, .54);
}

.prp-fullscreen-dialog button:active {
    transform: scale(.985);
}

.prp-fullscreen-dialog button:focus-visible {
    outline: 2px solid #fff4c5;
    outline-offset: 3px;
}

.prp-fullscreen-help {
    margin: 17px 0 0 !important;
    padding: 13px 14px;
    color: #fff0bd !important;
    font-size: .9rem !important;
    border: 1px solid rgba(255, 218, 112, .32);
    border-radius: 12px;
    background: rgba(214, 165, 55, .08);
}

.prp-fullscreen-fab {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 99999;
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    cursor: pointer;
    place-items: center;
    color: #ffe9a4;
    font-family: Arial, sans-serif;
    font-size: 1.65rem;
    border: 1px solid rgba(255, 224, 135, .8);
    border-radius: 50%;
    background: rgba(3, 20, 38, .88);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .48), 0 0 18px rgba(214, 165, 55, .26);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

:fullscreen .prp-fullscreen-gate,
:fullscreen .prp-fullscreen-fab,
:-webkit-full-screen .prp-fullscreen-gate,
:-webkit-full-screen .prp-fullscreen-fab,
.prp-is-fullscreen .prp-fullscreen-gate,
.prp-is-fullscreen .prp-fullscreen-fab {
    display: none !important;
}

@media (min-width: 1121px) and (pointer: fine) {
    .prp-fullscreen-gate,
    .prp-fullscreen-fab {
        display: none !important;
    }
}

/* Country flags shown below the subtitle. */
.prp-country-flags {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(10px, 1vw, 15px);
    margin-top: clamp(15px, 1.9vh, 20px);
}

.prp-country-flag {
    position: relative;
    display: block;
    width: clamp(58px, 4.5vw, 70px);
    aspect-ratio: 3 / 2;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 226, 146, .92);
    border-radius: 5px;
    background: rgba(4, 19, 34, .88);
    box-shadow:
        0 0 0 1px rgba(214, 165, 55, .16),
        0 5px 14px rgba(0, 0, 0, .42),
        0 0 12px rgba(214, 165, 55, .24);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.prp-country-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 38%);
}

.prp-country-flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prp-country-flag:hover {
    border-color: #fff1b6;
    box-shadow:
        0 0 0 1px rgba(255, 230, 154, .4),
        0 8px 18px rgba(0, 0, 0, .5),
        0 0 18px rgba(214, 165, 55, .38);
    transform: translateY(-3px);
}

.prp-has-flags .prp-portal-grid {
    margin-top: clamp(21px, 2.8vh, 28px);
}

@media (min-width: 1121px) and (max-height: 820px) {
    .prp-country-flags {
        gap: 9px;
        margin-top: 9px;
    }

    .prp-country-flag {
        width: 48px;
    }

    .prp-has-flags .prp-portal-grid {
        margin-top: 12px;
    }
}

@media (max-width: 1120px) {
    .prp-country-flags {
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 16px;
    }

    .prp-country-flag {
        width: 60px;
    }

    .prp-has-flags .prp-portal-grid {
        margin-top: 25px;
    }
}

@media (max-width: 680px) {
    .prp-country-flags {
        flex-wrap: nowrap;
        width: 100%;
        gap: clamp(6px, 2.1vw, 10px);
        margin-top: 14px;
    }

    .prp-country-flag {
        width: clamp(46px, 15vw, 56px);
        border-radius: 4px;
    }

    .prp-has-flags .prp-portal-grid {
        margin-top: 22px;
    }
}

@media (max-width: 380px) {
    .prp-country-flags {
        gap: 5px;
    }

    .prp-country-flag {
        width: clamp(42px, 14.4vw, 49px);
    }
}

@media (min-width: 1121px) {
    .prp-has-flags .prp-logo-wrap {
        width: min(390px, 43vw);
        height: clamp(190px, 23vh, 225px);
    }

    .prp-has-flags .prp-header h1 {
        margin-top: 10px;
    }

    .prp-has-flags .prp-portal-card {
        height: clamp(238px, 27.8vh, 260px);
        min-height: 238px;
    }
}


/* Dynamic portal cards (v1.7.0). Existing six-card desktop layouts remain unchanged. */
body.prp-fullscreen-page.prp-portal-scroll-page {
    overflow: auto;
}

@media (min-width: 1121px) {
    .prp-card-count-many .prp-portal-grid {
        gap: 10px;
    }

    .prp-card-count-many .prp-portal-card {
        padding-right: 8px;
        padding-left: 8px;
    }

    .prp-card-count-many .prp-icon-ring {
        width: 86px;
        height: 86px;
    }

    .prp-card-count-many .prp-card-title {
        margin-top: 22px;
        font-size: clamp(1rem, 1.22vw, 1.38rem);
        line-height: 1.1;
        overflow-wrap: anywhere;
    }

    .prp-shell.prp-multi-row {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        overflow: visible;
        grid-template-rows: auto clamp(88px, 11.8vh, 110px);
    }

    .prp-shell.prp-multi-row .prp-content {
        padding-bottom: 42px;
    }
}