:root {
    --bg: #14151a;
    --bg-alt: #1c1e26;
    --border: #2c2f3a;
    --text: #e6e6eb;
    --text-dim: #9a9daa;
    --accent: #b0302f;
    --accent-hover: #d13a39;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg) url('/assets/site/body-texture.jpg') repeat;
    color: var(--text);
    line-height: 1.5;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.game-header {
    background: #000 url('/assets/site/nav-texture.jpg') repeat-x bottom;
    text-align: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.brand-banner {
    display: block;
    width: 100%;
    max-width: 914px;
    aspect-ratio: 914 / 253;
    margin: 0 auto;
    background-image: url('/assets/site/banner.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.stat-bars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    max-width: 900px;
    margin: 0.75rem auto 0;
    padding: 0 1.25rem;
}

.stat-bar { width: 200px; text-align: left; }
.stat-bar-label { font-size: 0.78rem; color: var(--text-dim); }
.stat-bar-track {
    height: 8px;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}
.stat-bar-fill { height: 100%; }
.bar-health { background: linear-gradient(90deg, #7a1f1f, #d13a39); }
.bar-energy { background: linear-gradient(90deg, #1f5a7a, #3aa7d1); }
.bar-awake { background: linear-gradient(90deg, #6a4d1f, #d1a13a); }
.bar-nerve { background: linear-gradient(90deg, #4d1f6a, #a13ad1); }

.top-links {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-top: 0.6rem;
}

.game-body {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    gap: 1.5rem;
    align-items: flex-start;
    min-height: 60vh;
}

.sidebar { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; }

.menu-box {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.menu-box h3 {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: #000 url('/assets/site/nav-texture.jpg') repeat-x;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
}
.menu-box a, .menu-box .menu-disabled {
    display: block;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.88rem;
    text-decoration: none;
    color: var(--text-dim);
}
.menu-box a:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.menu-box .menu-disabled { color: #565963; cursor: default; }
.menu-box .inline-form { display: block; }
.menu-logout {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.88rem;
}

.content { flex: 1; min-width: 0; }

.inline-form { display: inline; }

.link-button {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.link-button:hover { color: var(--text); }

.hero { text-align: center; padding: 3rem 0; }
.hero h1 { font-size: 2.25rem; margin-bottom: 0.5rem; }
.hero p { color: var(--text-dim); margin-bottom: 2rem; }

.cta-row { display: flex; gap: 0.75rem; justify-content: center; }

.button {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
}
.button:hover { background: var(--accent-hover); }
.button.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.button.secondary:hover { border-color: var(--text-dim); }

.auth-form { max-width: 380px; margin: 0 auto; }
.auth-form h1 { text-align: center; margin-bottom: 1.5rem; }
.auth-form form { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--text-dim); }
.auth-form input {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.55rem 0.7rem;
    color: var(--text);
    font: inherit;
}
.auth-form button {
    margin-top: 0.4rem;
    padding: 0.65rem;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.auth-form button:hover { background: var(--accent-hover); }
.auth-form p { text-align: center; font-size: 0.9rem; color: var(--text-dim); }
.auth-form p a { color: var(--accent); }

.error {
    background: rgba(176, 48, 47, 0.15);
    border: 1px solid var(--accent);
    color: #f0a3a2;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.success {
    background: rgba(60, 160, 90, 0.15);
    border: 1px solid #3ca05a;
    color: #8fe0ab;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.crime-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.crime-table th, .crime-table td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.crime-table button {
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font: inherit;
}
.crime-table button:hover:not(:disabled) { background: var(--accent-hover); }
.crime-table button:disabled { background: var(--border); color: var(--text-dim); cursor: not-allowed; }

.gym-form {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.5rem;
}
.gym-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--text-dim); }
.gym-form input, .gym-form select {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    color: var(--text);
    font: inherit;
}
.gym-form button {
    padding: 0.55rem 1.2rem;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.gym-form button:hover:not(:disabled) { background: var(--accent-hover); }
.gym-form button:disabled { background: var(--border); color: var(--text-dim); cursor: not-allowed; }

.stat-list { list-style: none; padding: 0; }
.stat-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.site-footer {
    border-top: none;
    background: #0c0d10;
    color: var(--text-dim);
    font-size: 0.85rem;
}
.footer-cap {
    height: 16px;
    background: url('/assets/site/footer-cap.png') repeat-x;
    background-size: auto 16px;
}
.site-footer .container { padding: 1.25rem 0; }