/* LoupGarou Voice — companion theme styles.
   v1.1.0: professional app shell, mobile-first and safe-area aware. */
:root {
    --lt-bg: #06070d;
    --lt-bg-2: #10162a;
    --lt-fg: #ecf0ff;
    --lt-dim: #8a93b3;
    --lt-accent: #ffd676;
    --lt-accent-2: #c9963b;
    --lt-border: rgba(255,255,255,0.10);
    --lt-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { min-height: 100%; background: var(--lt-bg); }
body {
    min-height: 100vh;
    min-height: 100svh;
    background: var(--lt-bg);
    color: var(--lt-fg);
    font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Georgia', serif;
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.loupgarou-theme {
    background:
        radial-gradient(900px 600px at 90% -10%, #1f1133 0%, transparent 60%),
        radial-gradient(700px 500px at 0% 0%, #122a3a 0%, transparent 60%),
        var(--lt-bg);
    display: flex;
    flex-direction: column;
}

.lt-container { width: min(100% - 32px, 1180px); margin-inline: auto; }
.lt-site-main { flex: 1; }
a { color: var(--lt-accent); }
a:hover { color: var(--lt-accent-2); }

.skip-link { position:absolute; left:-9999px; top:-9999px; }
.skip-link:focus { left:8px; top:8px; background:#000; color:#fff; padding:6px 10px; z-index:99999; }

.lt-site-header {
    border-bottom: 1px solid var(--lt-border);
    background: rgba(7,9,15,.74);
    backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.lt-site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; }
.lt-brand { display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--lt-fg); font-family:'Cinzel',serif; font-size:19px; letter-spacing:.05em; }
.lt-brand__icon { font-size:22px; filter:drop-shadow(0 0 10px #ffd67644); }
.lt-nav .lt-menu { list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.lt-nav a { color:var(--lt-fg); text-decoration:none; font-family:var(--lt-font-ui); font-size:14px; }
.lt-nav a:hover { color:var(--lt-accent); }

.lt-site-footer { border-top:1px solid var(--lt-border); margin-top:40px; background:rgba(0,0,0,.25); }
.lt-site-footer__inner { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; color:var(--lt-dim); padding-block:18px; font-family:var(--lt-font-ui); font-size:13px; }
.lt-foot-menu { list-style:none; display:flex; gap:14px; margin:0; padding:0; }
.lt-foot-menu a { color:var(--lt-dim); text-decoration:none; }
.lt-foot-menu a:hover { color:var(--lt-accent); }
.lt-dim { color:var(--lt-dim); }

.lt-hero-section { padding:12px 0 32px; }
.lt-article { background:rgba(255,255,255,.02); border:1px solid var(--lt-border); padding:22px; border-radius:14px; margin-bottom:18px; }
.lt-article__title { font-family:'Cinzel',serif; font-size:clamp(26px,4vw,38px); margin:0 0 12px; color:var(--lt-accent); }
.lt-article__content p, .lt-article__content li { font-size:18px; }
.lt-callout { padding:16px; background:rgba(255,214,118,.10); border:1px solid #ffd67644; border-radius:12px; }
.lt-btn { display:inline-block; padding:10px 16px; background:linear-gradient(180deg,var(--lt-accent),var(--lt-accent-2)); color:#1b1306; border-radius:999px; font-weight:700; text-decoration:none; }
.lt-btn:hover { color:#1b1306; opacity:.92; }
.lt-404 { text-align:center; padding:60px 16px; }

/* Full-screen app shell used by the actual game and landing page. */
body.loupgarou-app-page { overflow-x:hidden; }
.loupgarou-app-page .lt-site-header,
.loupgarou-app-page .lt-site-footer { display:none; }
.loupgarou-app-page .lt-site-main,
.loupgarou-app-page .lt-hero-section { min-height:100vh; min-height:100svh; padding:0; }
.loupgarou-app-page .lt-container { width:100%; max-width:none; margin:0; }

@media (max-width: 640px) {
    .lt-site-header__inner { align-items:flex-start; flex-direction:column; gap:8px; }
    .lt-nav .lt-menu { gap:12px; flex-wrap:wrap; }
}