:root { color-scheme: light; --green:#2e7d32; --ink:#25352a; --line:#d7e3d8; --paper:#fff; --mist:#f2f7f2; }
* { box-sizing:border-box; }
body { background:var(--mist); color:var(--ink); font-family:Roboto,Arial,sans-serif; }
.shell { width:min(1500px,calc(100% - 36px)); margin:auto; }
nav .brand-logo { position:static; left:auto; transform:none; font-size:1.5rem; font-weight:600; }
nav .nav-wrapper { display:flex; justify-content:space-between; align-items:center; }
.locale-picker { display:flex; align-items:center; gap:.6rem; color:white; }
.locale-picker select { width:auto; background:#fff; color:var(--ink); height:2.2rem; border:0; border-radius:4px; }
main { padding:22px 0 60px; }
h1 { font-size:2rem; margin:.2rem 0 .6rem; } h2 { font-size:1.35rem; margin:0 0 1rem; font-weight:600; } h3 { font-size:1rem; font-weight:600; margin:1.5rem 0 .5rem; }
p { line-height:1.55; } .eyebrow { margin:0; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green); font-weight:700; }
.card-panel { background:var(--paper); border-radius:12px; box-shadow:0 3px 15px #183a2020; padding:20px; }
.start-card { max-width:700px; margin:7vh auto; } .start-card select { margin:8px 0 22px; }
select { display:block; width:100%; height:2.7rem; padding:0 .6rem; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink); margin:.3rem 0 1rem; }
button { cursor:pointer; } button:disabled { opacity:.45; cursor:not-allowed; } button:focus-visible, select:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline:3px solid #e5ac35; outline-offset:2px; }
.btn-flat { color:var(--green); } .notice { padding:12px 16px; margin:0 0 16px; border-radius:8px; background:#fff7d6; border:1px solid #e5ac35; }
.notice.error { background:#fff1ef; border-color:#e05252; } .notice button { margin-left:12px; }
.loading-indicator { position:fixed; top:72px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; white-space:nowrap; padding:6px 12px; border-radius:20px; background:#25352ae8; color:white; box-shadow:0 2px 8px #183a2033; font-size:.8rem; }
.game-head { display:flex; justify-content:space-between; align-items:center; gap:20px; } .game-head h1 { margin:0; }
.period { display:flex; align-items:center; gap:7px; color:#506658; }
.period img { image-rendering:pixelated; }
.stop-reason { color:#7a520d; background:#fff6db; border-left:4px solid #e5ac35; padding:7px 10px; }
.head-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .head-controls select { width:80px; margin:0; } .head-controls .chip { margin:0 12px 0 0; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; } .section-title h2 { margin-bottom:.6rem; }
.game-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:20px; align-items:start; }
.main-column,.side-column { min-width:0; } .main-column>.card-panel,.side-column>.card-panel { margin:0 0 20px; }
.timeline { display:flex; overflow-x:auto; gap:3px; padding:6px 0 12px; } .timeline button { min-width:42px; height:42px; border:1px solid var(--line); background:#fff; border-radius:6px; color:var(--ink); }
.timeline button.current { background:var(--green); color:white; } .timeline button.today { border-color:#e5ac35; border-width:2px; } .timeline button.future { opacity:.4; }
.map-panel svg { display:block; width:100%; height:auto; max-height:700px; background:#eaf2eb; border-radius:8px; }
.map-link { stroke:#a9bcae; stroke-width:4; } .map-link.checkpoint { stroke:#e5ac35; stroke-dasharray:9 7; }
.map-district { fill:white; stroke:#73a77b; stroke-width:3; cursor:pointer; } .map-district.local { fill:#d4eed9; stroke:var(--green); stroke-width:5; }
.map-district.remote { fill:#eef1ee; stroke:#a9b6aa; }
.map-label { font:600 17px Roboto,Arial,sans-serif; fill:#203626; text-anchor:middle; pointer-events:none; }
.map-marker { cursor:pointer; } .map-marker text { font:700 15px Roboto,Arial,sans-serif; fill:white; text-anchor:middle; pointer-events:none; }
.map-player { fill:#17291b; stroke:white; stroke-width:3; } .map-encounter { fill:#e5ac35; stroke:#734e06; stroke-width:2; }
.legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .legend span { font-size:.78rem; border-left:5px solid; padding:3px 7px; background:#f7faf7; }
.muted { color:#607166; } .inspector-list { margin:0; } .inspector-list dt { font-size:.77rem; color:#647468; } .inspector-list dd { margin:0 0 .6rem; }
.journal { max-height:540px; overflow:auto; padding-left:24px; } .journal li { padding:9px 0; border-bottom:1px solid var(--line); } .journal button { border:0; background:none; color:var(--green); text-decoration:underline; padding:0; }
.queue { padding-left:24px; } .queue li { padding:8px 0; } .queue button { margin-left:3px; font-size:.8rem; }
.secondary-actions { display:flex; flex-wrap:wrap; } .ending { border-top:5px solid #e5ac35; } .ending h2 { font-size:2rem; }
.progress-summary { margin:16px 0; } .progress-summary ul { margin:4px 0 12px; padding-left:20px; } .progress-summary li { list-style:disc; }
.new-ending { display:inline-block; padding:5px 10px; background:#fff4cf; color:#634308; border-radius:5px; font-weight:700; }
#feedback-form { margin-top:24px; border-top:1px solid var(--line); padding-top:16px; } #feedback-text { display:block; width:100%; min-height:90px; resize:vertical; border:1px solid var(--line); border-radius:5px; padding:10px; margin:8px 0; font:inherit; } #feedback-text:focus-visible { outline:3px solid #e5ac35; }
[hidden] { display:none !important; }
@media (max-width:900px) { .game-grid { grid-template-columns:1fr; } .game-head { align-items:flex-start; flex-direction:column; } }
@media (max-width:600px) { .shell { width:calc(100% - 20px); } nav .brand-logo { font-size:1rem; } .locale-picker span { display:none; } h1 { font-size:1.6rem; } .card-panel { padding:14px; } .head-controls { width:100%; } .head-controls .chip { width:100%; } .map-label { font-size:19px; } .loading-indicator { top:64px; } }