/* Standalone game and community chooser for the main page */
body.portal-open { overflow: hidden; }
.portal-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity .24s ease, visibility .24s ease; }
.portal-modal.is-open { visibility: visible; opacity: 1; }
.portal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; background: rgba(6,5,13,.82); border: 0; backdrop-filter: blur(12px); }
.portal-panel { position: relative; z-index: 1; width: min(620px,100%); padding: 38px; color: #f3efff; background: radial-gradient(ellipse at 50% -20%,#30213f,#171420 58%,#11111b); border: 1px solid #493650; border-radius: 22px; box-shadow: 0 30px 100px #000b; transform: translateY(12px) scale(.985); transition: transform .24s ease; }
.portal-modal.is-open .portal-panel { transform: translateY(0) scale(1); }
.portal-close { position: absolute; top: 14px; right: 15px; display: grid; width: 36px; height: 36px; place-items: center; color: #cfc5d9; font-size: 25px; cursor: pointer; background: #ffffff0a; border: 1px solid #ffffff1a; border-radius: 50%; }
.portal-close:hover { color: white; background: #ffffff16; }
.portal-heading { margin: 0 30px 24px 0; }
.portal-eyebrow { color: #bba1d9; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.portal-heading h2 { margin: 9px 0 5px; color: #fff; font-family: var(--font-display); font-size: clamp(29px,5vw,39px); letter-spacing: -.05em; }
.portal-heading p { margin: 0; color: #afa7ba; font-size: 12px; }
.portal-options { display: grid; gap: 10px; }
.portal-option { display: flex; min-height: 74px; align-items: center; gap: 14px; padding: 12px 15px; color: inherit; text-decoration: none; background: #ffffff07; border: 1px solid #ffffff17; border-radius: 13px; transition: transform .18s,border-color .18s,background .18s; }
.portal-option:hover { transform: translateY(-2px); background: #ffffff0e; border-color: #a76cbd88; }
.portal-option:focus-visible, .portal-close:focus-visible, .portal-dismiss:focus-visible { outline: 2px solid #8ed8fb; outline-offset: 3px; }
.portal-option-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; color: #fff; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: -.04em; background: linear-gradient(145deg,#8b70db,#547db9); border-radius: 12px; box-shadow: 0 7px 18px #0003; }
.portal-omsi .portal-option-icon { background: linear-gradient(145deg,#e98950,#bd4c67); }
.portal-ets2 .portal-option-icon { background: linear-gradient(145deg,#e1a842,#b7613a); }
.portal-store .portal-option-icon { background: linear-gradient(145deg,#d749a7,#8255df 65%,#54aee0); font-size: 19px; }
.portal-option-copy { display: grid; min-width: 0; gap: 3px; }
.portal-option-copy strong { color: #f5effa; font-size: 13px; }
.portal-option-copy small { color: #aaa2b6; font-size: 10px; line-height: 1.45; }
.portal-option-arrow { margin-left: auto; color: #e477bf; font-size: 17px; }
.portal-dismiss { display: block; margin: 19px auto 0; padding: 8px 12px; color: #b8afc2; font: inherit; font-size: 10px; cursor: pointer; background: transparent; border: 0; }
.portal-dismiss:hover { color: white; }
@media (max-width: 620px) {
    .portal-modal { padding: 13px; }
    .portal-panel { padding: 30px 19px 19px; border-radius: 17px; }
    .portal-heading { margin-bottom: 19px; }
    .portal-option { min-height: 68px; gap: 11px; padding: 10px; }
    .portal-option-icon { width: 40px; height: 40px; flex-basis: 40px; }
    .portal-option-copy strong { font-size: 12px; }
    .portal-option-copy small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .portal-modal, .portal-panel, .portal-option { transition-duration: .01ms; } }