@import url('/css/design-system.css');

.portal-layout {
    --ink: #171713;
    --gold: #d1a54c;
    --muted: #b6af9c;
    --line: #d1a54c30;
    background: #171713;
    color: #f0e7cf;
    padding-left: 260px;
}
.portal-layout .site-header {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    height: 100dvh;
    max-width: none;
    margin: 0;
    padding: 28px 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 22px;
    border-right: 1px solid var(--line);
    background: #12130f;
    overflow-y: auto;
    z-index: 40;
}
.portal-layout .site-header .brand { gap: 10px; }
.portal-layout .site-header .brand strong { font: 17px Georgia, serif; }
.portal-layout .site-header .brand small { font-size: 8px; letter-spacing: 1px; }
.portal-layout .site-header .brand-mark { width: 38px; height: 38px; }
.portal-layout .site-navigation { position: static; width: 100%; flex: 1; display: flex; flex-direction: column; }
.portal-layout .site-header nav {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 4px;
    flex: 1;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.portal-layout .site-header nav a,
.portal-layout .site-header .nav-form button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #b6af9c;
    font: 15px 'Segoe UI', sans-serif;
    gap: 12px;
    text-align: left;
}
.portal-layout .site-header nav a:hover,
.portal-layout .site-header nav a[aria-current="page"],
.portal-layout .site-header .nav-form button:hover {
    color: #edc96f;
    background: #d1a54c12;
    border-color: var(--line);
}
.portal-layout .sidebar-stats {
    margin-top: 0;
    padding: 16px 12px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font: 12px 'Segoe UI', sans-serif;
}
.portal-layout .sidebar-stats dl { display: grid; gap: 10px; margin: 0; }
.portal-layout .sidebar-stats dl div { display: flex; justify-content: space-between; gap: 12px; }
.portal-layout .sidebar-stats dd { margin: 0; color: #f0e7cf; }
.portal-layout main { width: 100%; max-width: 1320px; padding: 36px clamp(20px, 4vw, 60px); }
.portal-layout .page-shell { padding-block: 24px 48px; }
.portal-layout .site-footer { margin-inline: 32px; border-color: var(--line); }
.portal-layout .page-shell .panel,
.portal-layout .character-card,
.portal-layout .notice { border-radius: 10px; border-color: var(--line); background: #20211b; }
.portal-layout input, .portal-layout select, .portal-layout textarea { border-radius: 6px; }
.portal-layout .button { border-radius: 7px; }
.portal-layout .player-preview { --preview-background: #171713; background: #171713; }
.portal-layout .site-header .navigation-toggle { display: none; }
.portal-layout .nav-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.portal-layout .site-account-bar { display: grid; gap: 8px; margin-top: auto; padding-top: 22px; }
.portal-layout .site-account-bar a, .portal-layout .site-account-bar button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 16px; font: 14px 'Segoe UI', sans-serif; color: #edc96f; background: transparent; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.portal-layout .site-account-bar a:hover, .portal-layout .site-account-bar button:hover { background: #d1a54c12; }
.portal-layout .site-account-bar .nav-form { margin: 0; }
.portal-layout .site-header .site-account-bar a, .portal-layout .site-header .site-account-bar button { justify-content: center; border: 1px solid var(--line); background: var(--surface-card); border-radius: var(--radius-control); font-size: 14px; }
.portal-layout .site-header .site-account-bar a[href^="/Register"] { background: var(--gold); color: #171713; font-weight: 600; }
.portal-layout .site-header .site-account-bar .nav-play { background: #d1a54c; color: #171713; font-weight: 600; }
.portal-layout .site-header .site-account-bar .nav-discord { background: #89733b; color: #fff4d4; font-weight: 600; }
.portal-layout .session-links { display: grid; gap: 8px; }
.portal-layout .nav-language { width: 100%; margin: 6px 0 0; }
.portal-layout .nav-language select { width: 100%; max-width: none; }
.masthead .language-picker { margin-inline-end: 0; }
.portal-layout .sidebar-stats p { margin-bottom: 0; }
.language-picker { display: inline-flex; align-items: center; gap: 8px; font: 12px var(--font-body); margin-inline-end: auto; }
.language-picker select { min-height: 40px; max-width: 155px; padding: 8px; color: #edc96f; background: #20211b; border: 1px solid var(--line); border-radius: 7px; }
.language-picker > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html[dir="rtl"] .portal-layout { padding-left: 0; padding-right: 260px; }
html[dir="rtl"] .portal-layout .site-header { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--line); }
html[dir="rtl"] .portal-layout .site-header nav a { text-align: right; }
.portal-layout .play-actions .button { min-height: 62px; padding: 17px 24px; font-size: 16px; font-weight: 600; }
.portal-layout .play-actions { gap: 12px; }
.portal-layout .auth-page {
    width: 100%;
    margin-left: 0;
    min-height: 560px;
    max-width: 1000px;
    margin: 20px auto 40px;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.portal-layout .auth-story { display: flex; align-items: flex-end; padding: 36px; min-width: 0; }
.portal-layout .auth-story-copy { width: 100%; max-width: none; padding: 0; margin: 0; }
.portal-layout .auth-story-copy img { width: min(230px, 100%); height: auto; margin: 0 0 32px; }
.portal-layout .auth-story-copy h1 { font: 38px/1.15 var(--font-heading); margin: 16px 0; letter-spacing: -.02em; }
.portal-layout .auth-story-copy > p { font: 15px/1.7 var(--font-body); }
.portal-layout .auth-story-copy .eyebrow { font-size: 10px; }
.portal-layout .auth-card-wrap { min-width: 0; padding: 40px; display: flex; align-items: center; background: var(--surface-base); }
.portal-layout .auth-card { width: 100%; max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none; }
.portal-layout .auth-card h2 { font: 32px/1.2 var(--font-heading); }
.portal-layout .auth-card header { margin-bottom: 26px; }
.portal-layout .auth-card header p { font: 14px/1.6 var(--font-body); }
.portal-layout .auth-field { margin-bottom: 20px; }
.portal-layout .auth-label-row { gap: 12px; flex-wrap: wrap; }
.portal-layout .auth-card :is(input:not([type="checkbox"]):not([type="hidden"]), .auth-submit) { min-height: 50px; font-size: 15px; border-radius: var(--radius-control); }
.portal-layout .auth-card footer { margin-top: 24px; color: var(--muted); font: 12px/1.6 var(--font-body); }
.portal-layout .auth-card .password-field { border-radius: var(--radius-control); }
@media (max-width: 1100px) {
    .portal-layout .auth-page { grid-template-columns: 1fr; max-width: 560px; }
    .portal-layout .auth-story { display: none; }
}
@media (max-width: 860px) {
    .portal-layout { padding-left: 0; }
    html[dir="rtl"] .portal-layout { padding-right: 0; }
    .portal-layout .site-header {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 70px;
        padding: 16px 20px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .portal-layout .site-navigation { width: auto; flex: none; }
    .portal-layout .site-header .navigation-toggle { display: flex; }
    .portal-layout .site-header nav {
        position: absolute;
        top: calc(100% + 4px);
        right: 16px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: min(370px, calc(100vw - 32px));
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #171713;
        box-shadow: 0 12px 32px #0008;
    }
    .portal-layout .site-navigation:not(.is-open) nav { display: none; }
    .portal-layout .site-account-bar { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; padding-top: 14px; margin-top: 0; }
    .portal-layout .session-links, .portal-layout .nav-language { grid-column: 1 / -1; }
    .portal-layout .sidebar-stats { display: none; }
    .portal-layout main { padding: 24px 20px; }
    .portal-layout .auth-card-wrap { padding: 24px; }
}