/* Dawnlight Theme: softer light background, warm highlights, high readability */
:root{
  --bg-0:#e9edf4;        /* base paper sky */
  --bg-1:#f3f6fb;        /* card tint */
  --bg-2:#ffffff;        /* highlights */
  --fg:#1b2430;          /* ink */
  --muted:#5b6b7e;       /* soft slate */
  --border:#cfd7e4;      /* light border */
  --accent:#c77b30;      /* amber/rose-gold accent */
  --accent-2:#2454d1;    /* dawn blue accent */
  --danger:#b91c1c;      /* clear warning */
  --good:#0c7a43;        /* green ok */
  --shadow: rgba(10,26,56,.15);
  --radius:16px;
  --mono: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
:root.dark{
  --bg-0:#0e141d; --bg-1:#121a26; --bg-2:#0f1726;
  --fg:#e7ecf4; --muted:#9aa7b6; --border:#283548;
  --accent:#f3a76a; --accent-2:#8fb0ff; --danger:#fda4af; --good:#70e2a6;
  --shadow: rgba(0,0,0,.4);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--fg); font-family:var(--sans); line-height:1.7;
  background:
    radial-gradient(900px 600px at 20% -10%, #f8fafc 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #eef2f8 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  position:relative;
}
/* Paper grain + soft vignette */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    url("assets/textures/noise.png"),
    radial-gradient(1100px 780px at 50% -10%, rgba(255,255,255,.7), transparent 60%);
  mix-blend-mode:soft-light; opacity:.35;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(1100px 600px at 50% 120%, rgba(0,0,0,.04), rgba(0,0,0,.06) 70%);
  opacity:.9;
}
.container{ max-width:1000px; margin:40px auto 100px; padding:0 22px }
.header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px; background: linear-gradient(180deg, var(--bg-2), rgba(255,255,255,.85));
  border:1px solid var(--border); border-radius:var(--radius); box-shadow: 0 12px 36px var(--shadow);
  backdrop-filter: blur(4px);
}
h1.title{ margin:0; font-size:28px; letter-spacing:.2px; display:flex; gap:12px; align-items:baseline; text-shadow:0 1px 0 rgba(255,255,255,.6) }
small.sub{ color:var(--muted); font-size:14px }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap }
.toolbar button{
  background:linear-gradient(180deg, var(--bg-2), #eef3fb);
  color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer
}
.toolbar button:hover{ border-color:#b9c6dc; transform: translateY(-1px) }
.card{
  margin-top:16px; background: linear-gradient(180deg, var(--bg-2), rgba(255,255,255,.92));
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 10px 32px var(--shadow); padding:24px;
}
.hud{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; font-size:14px; color:var(--muted) }
.hud .icon{ width:18px; height:18px; vertical-align:-3px; margin-right:6px; opacity:.9 }
.health .val{ color:var(--fg) } .health.low .val{ color:var(--danger) } .health.full .val{ color:var(--good) }
.notice{ color:var(--muted); font-size:14px } .success{ color:var(--good) } .warn{ color:var(--danger) }
hr.sep{ border:none; border-top:1px solid var(--border); margin:14px 0 }
a{ color:var(--accent-2); text-decoration:none; border-bottom:1px dashed rgba(36,84,209,.35); transition:border-color .2s ease, color .2s ease }
a:hover{ border-bottom-style:solid }
.choices a{
  display:block; padding:12px 14px; margin:10px 0; background: linear-gradient(180deg, var(--bg-2), #eef3fb);
  border:1px solid var(--border); border-radius:12px; box-shadow:0 6px 20px var(--shadow);
  position:relative; transition: transform .12s ease, box-shadow .12s ease, border-color .2s ease;
}
.choices a:hover{ transform: translateY(-1px); box-shadow:0 10px 26px var(--shadow); border-color:#b9c6dc }
.choices a:active{ transform: translateY(0) }
.choices a.locked{ opacity:.6; filter:saturate(.85) contrast(.95) }
.badge{ display:inline-block; margin-left:8px; padding:2px 8px; font-size:12px; color:var(--muted); border:1px solid var(--border); border-radius:999px; background:#f7fafc }
.mapgrid{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin:14px 0 }
.mapgrid a{ display:block; text-align:center; padding:8px 4px; border:1px solid var(--border); border-radius:10px; background:#f7fbff; transition: transform .1s ease, border-color .2s ease }
.mapgrid a:hover{ transform: translateY(-1px); border-color:#b9c6dc }
.footer{ margin-top:18px; color:var(--muted); font-size:13px }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; border-radius:10px }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important } }

/* Optional Dark toggle (for night readers) */
body.dark { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); color: var(--fg) }

/* Splash banner */
.splash{
  display:flex; align-items:center; gap:16px; margin:16px 0 8px 0;
  padding:12px; border:1px dashed var(--border); border-radius:12px; background:rgba(255,255,255,.75)
}
.splash img{ width:120px; height:auto; border-radius:10px; box-shadow:0 6px 20px var(--shadow) }
.splash .txt{ font-size:14px; color:var(--muted) }