@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --bg:#f1eee6; --surface:#fbfaf6; --surface-alt:#e7e2d7; --text:#20241f; --muted:#687068; --line:#d6d0c4; --accent:#b94735; --accent-strong:#993425; --mint:#b9cdb6; --gold:#d7ad55; --shadow:0 16px 38px rgba(46,43,34,.11); }
:root[data-theme="dark"] { --bg:#151916; --surface:#20251f; --surface-alt:#292f28; --text:#f3f0e7; --muted:#afb6aa; --line:#3b443b; --accent:#e76d58; --accent-strong:#fa836d; --mint:#9fc49e; --gold:#e0b55f; --shadow:0 16px 38px rgba(0,0,0,.26); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Manrope,system-ui,sans-serif; min-width:320px; }
button { font:inherit; cursor:pointer; }
.topbar { min-height:76px; padding:0 clamp(1.25rem,4vw,4.5rem); display:flex; align-items:center; gap:2rem; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 92%,transparent); position:sticky; z-index:5; top:0; backdrop-filter:blur(12px); }
.brand { color:var(--text); display:flex; align-items:center; gap:.55rem; text-decoration:none; font-size:1.1rem; font-weight:800; letter-spacing:-.04em; white-space:nowrap; }.brand-mark { color:var(--accent); font-size:1.5rem; }
.main-nav { display:flex; justify-content:center; gap:clamp(.75rem,2.5vw,2rem); flex:1; }.main-nav a { color:var(--muted); text-decoration:none; font-size:.86rem; font-weight:700; }.main-nav a:hover { color:var(--accent); }
.settings { display:flex; align-items:center; gap:1rem; }.icon-button,.language-button { border:0; background:transparent; color:var(--text); }.icon-button { display:flex; align-items:center; gap:.35rem; font-size:1rem; }.toggle-knob { width:28px; height:16px; border-radius:999px; background:var(--accent); display:inline-block; position:relative; }.toggle-knob:after { content:""; width:11px; height:11px; border-radius:50%; background:white; position:absolute; top:2.5px; left:3px; transition:transform .2s; }:root[data-theme="dark"] .toggle-knob:after { transform:translateX(11px); }.language-button { font:700 .72rem "DM Mono",monospace; letter-spacing:.04em; }.language-button span { color:var(--muted); margin:0 .12rem; }
main { max-width:1250px; margin:0 auto; padding:clamp(2.5rem,5vw,5rem) clamp(1.25rem,4vw,4.5rem) 3.25rem; }.intro { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin:0 0 3rem; }.eyebrow { color:var(--accent); margin:0 0 .6rem; font:500 .69rem "DM Mono",monospace; letter-spacing:.12em; }.intro h1 { max-width:680px; font-size:clamp(2.2rem,5vw,4.4rem); letter-spacing:-.065em; line-height:1.04; margin:0; }.intro-copy { color:var(--muted); max-width:570px; margin:1.1rem 0 0; font-size:1rem; line-height:1.65; }.session-card { display:grid; grid-template-columns:auto 1fr; column-gap:.55rem; align-items:center; min-width:190px; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:.75rem; color:var(--muted); }.session-card strong { grid-column:2; color:var(--text); font-size:.86rem; margin-top:.16rem; }.status-dot { width:8px; height:8px; background:var(--mint); border-radius:50%; box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 20%,transparent); }
.tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }.tool-card { min-height:330px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.6rem; box-shadow:var(--shadow); display:flex; flex-direction:column; }.card-heading { display:flex; justify-content:space-between; gap:1rem; }.card-heading h2 { font-size:1.35rem; letter-spacing:-.045em; margin:0; }.card-icon { color:var(--accent); font-size:1.6rem; line-height:1; }.npc-result,.loot-result { display:flex; align-items:center; gap:1rem; flex:1; margin:1.35rem 0; }.portrait { flex:0 0 58px; height:58px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--accent),var(--gold)); }.npc-result h3,.loot-result strong { margin:0 0 .25rem; font-size:1.02rem; }.npc-result p,.loot-result p { color:var(--muted); margin:.25rem 0; font-size:.83rem; line-height:1.55; }.npc-hook { color:var(--text)!important; font-style:italic; }.primary-button { border:0; background:var(--accent); color:white; border-radius:9px; padding:.85rem 1rem; font-weight:800; font-size:.85rem; transition:background .2s,transform .2s; }.primary-button:hover { background:var(--accent-strong); transform:translateY(-1px); }.compact { padding:.7rem .9rem; }.text-button { border:0; margin-top:auto; padding:0; background:transparent; text-align:left; color:var(--accent); font-weight:800; font-size:.85rem; }.text-button:hover { color:var(--accent-strong); }
.screen-grid { margin:1.25rem 0; display:grid; grid-template-columns:1fr 1fr; gap:.65rem; flex:1; }.rule-note { background:var(--surface-alt); border-radius:10px; padding:.9rem; display:flex; flex-direction:column; min-height:88px; }.rule-note span,.dialog-columns span { color:var(--muted); font-size:.68rem; font-weight:700; }.rule-note strong { margin-top:.25rem; font-size:1rem; }.rule-note small { color:var(--muted); margin-top:auto; font-size:.68rem; }.wide { grid-column:1 / -1; min-height:65px; }.tracker { flex:1; margin:1.15rem 0; border-top:1px solid var(--line); }.combatant { min-height:48px; display:grid; grid-template-columns:31px 28px 1fr auto; align-items:center; gap:.55rem; border-bottom:1px solid var(--line); font-size:.82rem; }.combatant.active { color:var(--accent); }.initiative { font:500 .75rem "DM Mono",monospace; }.token { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; font-size:.65rem; font-weight:800; }.hero { background:var(--mint); color:#172019; }.enemy { background:var(--gold); color:#30230d; }.hp { color:var(--muted); font:500 .68rem "DM Mono",monospace; }.tracker-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.loot-icon { display:grid; place-items:center; flex:0 0 52px; height:52px; border-radius:14px; font-size:1.4rem; color:#5e4316; background:var(--gold); }
.screen-dialog { width:min(650px,calc(100% - 2rem)); border:1px solid var(--line); border-radius:16px; padding:1.5rem; color:var(--text); background:var(--surface); box-shadow:0 25px 90px rgba(0,0,0,.4); }.screen-dialog::backdrop { background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }.dialog-header { display:flex; align-items:center; justify-content:space-between; }.dialog-header h2 { margin:0; }.close-button { border:0; color:var(--text); background:transparent; font-size:1.8rem; }.screen-dialog>p { color:var(--muted); line-height:1.6; }.dialog-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }.dialog-columns div { padding:1rem; border-radius:10px; background:var(--surface-alt); }.dialog-columns strong { display:block; margin-top:.3rem; font-size:.82rem; } footer { max-width:1250px; margin:0 auto; padding:1.5rem clamp(1.25rem,4vw,4.5rem) 2.25rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; } footer span:first-child { color:var(--text); font-weight:800; }
@media (max-width:760px) { .topbar { min-height:64px; padding:0 1.1rem; gap:.75rem; }.main-nav { display:none; }.settings { margin-left:auto; }.intro { margin-bottom:2rem; align-items:flex-start; flex-direction:column; }.session-card { width:100%; }.tool-grid { grid-template-columns:1fr; }.tool-card { min-height:290px; }.dialog-columns { grid-template-columns:1fr; } footer { flex-direction:column; gap:.5rem; } }