:root {
    --bg: #0c0e12;
    --panel: #15181e;
    --line: #bca27638;
    --gold: #eac58b;
    --muted: #bbb6ae;
}
body { background: var(--bg); }
body::before { animation: none; }
.bg { background: radial-gradient(ellipse at 70% 0, #282020, transparent 48%), #0c0e12; }
.top { background: #0d0f14ed; }
.nav { height: 72px; gap: 1rem; }
.brand img { width: clamp(110px, 14vw, 180px); animation: none; }
.menu { gap: .2rem; }
.menu a { padding: .65rem .6rem; font-weight: 650; }
.card { border-radius: 12px; box-shadow: none; animation: none; }
.card:hover { box-shadow: none; }
.btn { border-radius: 8px; background: #eac58b; color: #1c1510; box-shadow: none; }
.btn.ghost { background: #14161bcc; }
:focus-visible { outline: 2px solid #f3ce91; outline-offset: 3px; }
.portal-hero {
    min-height: clamp(22rem, 43vw, 36rem);
    display: flex;
    align-items: end;
    padding: clamp(1.25rem, 5vw, 4.5rem);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(95deg, #0b0d13f5, #10101563 72%), url('../img/elysium-landscape.jpg') center / cover;
}
.portal-hero-copy { max-width: 39rem; }
.portal-kicker { color: var(--gold); letter-spacing: .22em; font-weight: 750; font-size: .8rem; }
.portal-hero h1 { margin: .6rem 0; font: 600 clamp(2.4rem, 6vw, 5rem)/1 Georgia, serif; overflow-wrap: anywhere; }
.portal-hero p { color: #eee7da; line-height: 1.65; }
.portal-stats, .portal-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: .75rem; }
.portal-stats div, .portal-shortcuts a { border: 1px solid var(--line); border-radius: 10px; padding: clamp(.65rem, 2vw, 1.25rem); background: #15181e; }
.portal-stats span { display: block; color: var(--muted); }
.portal-stats strong { display: block; margin-top: .25rem; font-size: clamp(1.35rem, 3vw, 2rem); color: var(--gold); }
.portal-shortcuts a { display: flex; align-items: center; gap: .65rem; }
.portal-shortcuts small, .portal-shortcuts span { color: var(--gold); }
.portal-shortcuts span { margin-left: auto; }
.portal-home-panels > * { min-width: 0; }
@media(max-width: 1150px) {
    .hamb { display: block; }
    .menu { display: none; position: absolute; top: 72px; left: 4vw; right: 4vw; flex-direction: column; align-items: stretch;
        border: 1px solid var(--line); border-radius: 12px; background: #111319; padding: .75rem; max-height: 75vh; overflow: auto; }
    .menu.open { display: flex; }
    .menu a { min-height: 44px; display: grid; place-items: center; }
    .langs { justify-content: center; }
}
@media(max-width: 520px) {
    .portal-shortcuts { grid-template-columns: 1fr; }
    .portal-stats span { font-size: .8rem; overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion: reduce) {
    .card, .brand img, .glow::before { animation: none; }
}

.form textarea { width: 100%; padding: .75rem; border: 1px solid var(--line); border-radius: 8px;
    color: var(--txt); background: #0e1015; font: inherit; resize: vertical; }

.forum { overflow-wrap: anywhere; }
.forum li { padding-block: .4rem; }
.forum-post { border-block-start: 1px solid #ffffff26; padding-block: .8rem; }
.forum-post time { opacity: .8; }
.forum textarea { max-width: 100%; }

.portal-hero { background: linear-gradient(90deg,#0a111cea,#10162033 85%), url('../img/portal-hero.webp') center / cover; }
.portal-banner { width: min(100%, 28rem); height: auto; display: block; }
.portal-shortcuts { grid-template-columns: repeat(auto-fit,minmax(min(100%,13rem),1fr)); }
.forum-boards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.forum-board, .forum-topics li { display: flex; align-items: center; gap: .85rem; padding: 1rem; background: #111722; border: 1px solid var(--line); border-radius: .65rem; }
.forum-board:hover, .forum-topics li:hover { border-color: var(--gold); }
.forum-icon { display: grid; place-items: center; background: #263041; color: var(--gold); border-radius: .55rem; width: 2.5rem; height: 2.5rem; flex: none; }
.forum-board > :last-child, .forum-topics li > span { margin-inline-start: auto; color: var(--muted); }
.forum-topics { list-style: none; padding: 0; display: grid; gap: .5rem; }
.forum-post { background: #111722; border: 1px solid var(--line); border-radius: .65rem; padding: 1rem; margin-block: .75rem; }
@media(max-width: 560px) { .forum-boards { grid-template-columns: 1fr; } }

.portal-game-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:1rem; margin-block:1rem; }
.portal-game-card { display:grid; grid-template-columns:5rem minmax(0,1fr); gap:1rem; align-items:center; }
.portal-game-card img { width:100%; height:auto; }
.portal-game-card h2 { margin:0; font-size:1.1rem; }
.portal-game-card p { margin:.4rem 0 0; color:var(--muted); }

.guild-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 29rem), 1fr));
    align-items: start;
    gap: .85rem;
    margin-block: 1rem;
}
.guild-card {
    min-width: 0;
    padding: clamp(.75rem, 2.5vw, 1.25rem);
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: var(--panel);
    overflow-wrap: anywhere;
}
.guild-card-heading h2, .guild-card-heading h3 { margin: 0; }
.guild-card-heading a:hover, .guild-roster .row a:hover { color: var(--gold); text-decoration: underline; }
.guild-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: .5rem;
    margin-block: .8rem;
}
.guild-metrics > div {
    min-width: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: var(--bg);
}
.guild-metrics dt { color: var(--muted); font-size: .875rem; }
.guild-metrics dd { margin: .25rem 0 0; color: var(--gold); font-weight: 700; }
.guild-gold { display: inline-flex; align-items: center; gap: .4rem; }
.guild-gold img { flex: none; object-fit: contain; }

.guild-details {
    margin-block: .65rem;
    padding-inline: .75rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
}
.guild-details > summary {
    display: list-item;
    min-block-size: 44px;
    padding: .7rem 0;
    cursor: pointer;
    color: var(--gold);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.guild-details[open] > summary { border-block-end: 1px solid var(--line); }
.guild-status { color: var(--muted); line-height: 1.5; }
.guild-ability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .5rem;
    margin: .75rem 0;
    padding: 0;
    list-style: none;
}
.guild-ability {
    display: flex;
    align-items: start;
    gap: .6rem;
    min-width: 0;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: var(--bg);
    overflow-wrap: anywhere;
}
.guild-ability > img { flex: none; object-fit: contain; }
.guild-ability > div { min-width: 0; }
.guild-ability strong { display: block; line-height: 1.3; }
.guild-ability p { margin: .3rem 0; line-height: 1.45; }
.guild-ability small { display: block; margin-top: .2rem; color: var(--muted); line-height: 1.45; }
.guild-roster { margin-block: 1.25rem 0; overflow-wrap: anywhere; }
.guild-roster .row { grid-template-columns: auto minmax(0, 1fr) minmax(5rem, auto); }
@media (max-width: 480px) {
    .guild-roster .row { grid-template-columns: auto minmax(0, 1fr); }
    .guild-roster .row > small { grid-column: 2; }
}