/* layout.css — The page frame: the masthead (the home page's wide picture,
   a strip on every other page), the navigation under it, the page
   and the footer, on a plain dark page. */

.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.page-content {
    flex: 1;
    width: 100%;
    max-width: var(--frame);
    margin: 0 auto;
    padding: 1.5rem;
}
/* The forum, shop and admin pages still wrap their content in a container. */
.page-content .container { max-width: none; padding: 0; }

/* ===== THE NAME ===== */
.logo { display: block; flex: none; }
.logo img { width: 100%; height: auto; }
.logo:hover { filter: brightness(1.08); }

/* ===== THE ACCOUNT, TOP RIGHT ===== */
.masthead-account {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.4rem;
    background: rgba(10, 8, 6, 0.82);
    border: 1px solid var(--line-strong);
}
.masthead-account .nav-user { padding: 0 0.4rem; color: var(--text-muted); font-size: 0.86rem; }
.masthead-account .nav-user strong { color: var(--text-bright); }

/* ===== MASTHEAD =====
   Every page but the home page: a strip of the top picture, dark enough
   for the name and the account to stand on. */
.masthead {
    position: relative;
    height: 112px;
    overflow: hidden;
    border-bottom: 1px solid var(--line-gold);
}
.masthead-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 26%;
    filter: brightness(0.55);
}
.masthead-inner {
    position: relative;
    height: 100%;
    max-width: var(--frame);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.masthead .logo { width: 210px; }

/* ===== HERO =====
   The home page's masthead: the picture across the whole window, fading into
   the page at its foot, the account at the top right, and the name with the way
   into the game together at the lower left. */
.hero {
    position: relative;
    height: clamp(430px, 38vw, 972px);
    overflow: hidden;
}
.hero-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
/* The foot of the picture goes into the page, and a shade at the lower left gives
   the name something to stand on. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, var(--ink) 0%, rgba(10, 8, 6, 0.5) 4%, rgba(10, 8, 6, 0) 10%),
        radial-gradient(ellipse 46% 62% at 22% 88%, rgba(10, 8, 6, 0.62) 0%, rgba(10, 8, 6, 0) 100%);
    pointer-events: none;
}
.hero-account {
    position: relative;
    z-index: 1;
    max-width: var(--frame);
    margin: 0 auto;
    padding: 1.4rem 1.5rem 0;
    display: flex;
    justify-content: flex-end;
}
.hero-lead {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: clamp(1.6rem, 3.2vw, 4.2rem);
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--frame);
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}
.hero .logo { width: clamp(240px, 19vw, 400px); }
.btn-hero {
    min-width: 280px;
    padding: 1.05rem 2.6rem;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 1.35rem;
    white-space: normal;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 4px 26px rgba(0, 0, 0, 0.7), 0 0 34px rgba(242, 220, 158, 0.28);
}
.hero-closed {
    padding: 0.6rem 1.4rem;
    color: var(--amber);
    background: rgba(10, 8, 6, 0.85);
    border: 1px solid var(--line-gold);
}

/* ===== NAVIGATION =====
   A row of tabs under the masthead, as over the game's windows. */
.navbar {
    background: linear-gradient(180deg, #1d1711, #140f0b);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line-strong);
}
.navbar-inner {
    max-width: var(--frame);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: stretch;
}
.nav-links { display: flex; flex: 1; flex-wrap: wrap; }
.nav-links a {
    padding: 0.75rem 1.2rem;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.95rem;
    border-right: 1px solid var(--line);
}
.nav-links a:first-child { border-left: 1px solid var(--line); }
.nav-links a:hover { color: var(--text-bright); background: rgba(200, 173, 112, 0.06); text-decoration: none; }
.nav-links a.active {
    color: var(--gold-bright);
    background: var(--ink);
    box-shadow: inset 0 2px 0 var(--gold);
}

.nav-toggle {
    display: none;
    background: none;
    color: var(--gold);
    font: 700 0.92rem var(--font-text);
    cursor: pointer;
}

/* ===== PAGE TITLE =====
   A page's name and what it is for, over its content. */
.page-title { margin-bottom: 1.25rem; }
.page-title h1 { font-size: 1.9rem; }
.page-title p { color: var(--text-muted); margin-top: 0.25rem; max-width: 65ch; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.back-link { display: inline-block; margin-bottom: 0.5rem; font-size: 0.88rem; }

/* A page's main column beside a narrow one of boxes. */
.with-side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.side { display: grid; gap: 1.25rem; min-width: 0; }
.main { display: grid; gap: 1.25rem; min-width: 0; }

/* ===== FOOTER ===== */
.footer {
    border-top: 1px solid var(--line-strong);
    background: #070504;
    color: var(--text-dim);
    font-size: 0.82rem;
}
.footer-inner { max-width: var(--frame); margin: 0 auto; padding: 1.25rem 1.5rem 1.5rem; }
.footer-links { display: flex; gap: 0.4rem 1.25rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.footer-links a { color: var(--text-muted); }
.footer-note { color: var(--text-dim); }

/* ===== SMALLER SCREENS ===== */
@media (max-width: 960px) {
    .with-side { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .page-content { padding: 1rem; }
    .masthead { height: 96px; }
    .masthead-inner { padding: 0 1rem; }
    .masthead .logo { width: 124px; }
    .masthead-account { padding: 0.25rem; gap: 0.3rem; flex-wrap: nowrap; }
    .masthead-account .nav-user { display: none; }
    .masthead-account .btn-small { padding: 0.3rem 0.55rem; font-size: 0.78rem; }
    .hero { height: 500px; }
    /* The picture centres on the party, and the name and the button stand below it on
       the page's dark, so they cover no figure. */
    .hero-picture { height: calc(100% - 150px); object-position: 88% 50%; }
    .hero::after { background: linear-gradient(0deg, var(--ink) 150px, rgba(10, 8, 6, 0) 200px); }
    .hero-account { padding: 0.8rem 1rem 0; }
    .hero-lead { left: 0; right: 0; bottom: 1rem; transform: none; align-items: center; gap: 0.5rem; padding: 0 1rem; }
    .hero .logo { width: 210px; }
    .btn-hero { min-width: 240px; padding: 0.9rem 1.6rem; font-size: 1.15rem; }
    .navbar-inner { flex-direction: column; padding: 0; }
    .nav-toggle { display: block; margin: 0; padding: 0.7rem 1rem; border: none; text-align: left; }
    .nav-links { display: none; flex-direction: column; }
    .nav-links.open { display: flex; }
    .nav-links a { border-right: none; border-left: none; border-top: 1px solid var(--line); }
    .nav-links a:first-child { border-left: none; }
}