/* layout.css — The page frame: one board in the middle of the world, with
   the masthead (a picture of the game, the name and the account), the
   navigation bar under it, the page and the footer. */

.page-wrapper {
    max-width: var(--frame);
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-left: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
    box-shadow: 0 0 0 1px #000, 0 0 60px rgba(0, 0, 0, 0.8);
}
.page-content { flex: 1; padding: 1.5rem; }
/* The forum, shop and admin pages still wrap their content in a container. */
.page-content .container { max-width: none; padding: 0; }

/* ===== MASTHEAD =====
   The outpost seen from above, the game's name over it and, at the top
   right, the account. The home page's is tall; the others' a strip. */
.masthead {
    position: relative;
    height: 150px;
    display: flex;
    align-items: flex-end;
    padding: 0 1.5rem 1.1rem;
    background:
        linear-gradient(0deg, rgba(10, 8, 6, 0.9) 0%, rgba(10, 8, 6, 0.15) 60%),
        url('/static/img/hero.webp') 50% 38% / cover no-repeat;
    image-rendering: pixelated;
    border-bottom: 1px solid var(--line-gold);
}
.masthead-tall { height: 300px; background-position: 50% 45%; }
.masthead > * { image-rendering: auto; }

.logo {
    font-family: var(--font-title);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--gold-bright);
    text-shadow: 0 2px 0 #000, 0 0 3px #000, 0 0 24px rgba(0, 0, 0, 0.9);
}
.masthead-tall .logo { font-size: 4.2rem; }
.logo:hover { color: #fff3cf; text-decoration: none; }
.masthead-line {
    margin-top: 0.45rem;
    color: var(--text);
    font-size: 1.05rem;
    text-shadow: 0 1px 2px #000, 0 0 12px #000;
}

.masthead-account {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    display: flex;
    align-items: center;
    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); }

/* ===== NAVIGATION =====
   A row of tabs under the masthead, as over the game's windows. */
.navbar {
    display: flex;
    align-items: stretch;
    background: linear-gradient(180deg, #1d1711, #140f0b);
    border-bottom: 1px solid var(--line-strong);
}
.nav-links { display: flex; flex: 1; flex-wrap: wrap; }
.nav-links a {
    padding: 0.7rem 1.15rem;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.92rem;
    border-right: 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(--bg);
    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) 300px; gap: 1.25rem; align-items: start; }
.side { display: grid; gap: 1.25rem; }
.main { display: grid; gap: 1.25rem; min-width: 0; }

/* ===== FOOTER ===== */
.footer {
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid var(--line-strong);
    background: var(--ink);
    color: var(--text-dim);
    font-size: 0.82rem;
}
.footer-links { display: flex; gap: 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: 1180px) {
    .page-wrapper { border: none; }
}
@media (max-width: 900px) {
    .with-side { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .page-content { padding: 1rem; }
    .masthead { height: 120px; padding: 0 1rem 0.8rem; }
    .masthead-tall { height: 200px; }
    .logo { font-size: 2rem; }
    .masthead-tall .logo { font-size: 2.8rem; }
    .masthead-line { font-size: 0.95rem; }
    .masthead-account { top: 0.6rem; right: 0.6rem; }
    .masthead-account .nav-user { display: none; }
    .navbar { flex-direction: column; }
    .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-top: 1px solid var(--line); }
}