/* Chrome for the embeddable map. The canvas paints its own sea and island, so
   only the surround is themed here - deliberately in the light parchment of
   the host record site rather than the dark observer at /, because a framed
   panel that fights its host page reads as a broken widget. */
:root { --ink:#14211f; --moss:#365b4e; --paper:#f5f1e8; --stone:#d9d2c4; --rust:#b45a3d; --quiet:#53625d; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Georgia,'Times New Roman',serif; }
.embed { max-width:1120px; margin-inline:auto; padding:18px; }

.bar { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.hero-status { display:flex; gap:10px; align-items:flex-start; }
.hero-status strong { display:block; font:700 .86rem/1.3 Arial,Helvetica,sans-serif; }
.hero-status small { display:block; color:var(--quiet); font:.8rem/1.4 Arial,Helvetica,sans-serif; }
.status-dot { width:10px; height:10px; margin-top:5px; flex:none; border-radius:50%; background:var(--rust); }
.hero-status[data-state="ready"] .status-dot { background:var(--moss); }
.hero-status[data-state="error"] .status-dot { background:#b4433d; }

.controls { display:flex; flex-wrap:wrap; gap:8px; }
.controls button { border:1px solid #9aab9f; background:transparent; color:var(--moss); padding:9px 13px; font:700 .78rem/1 Arial,Helvetica,sans-serif; cursor:pointer; }
.controls button:hover { border-color:var(--ink); color:var(--ink); }

.canvas-shell { position:relative; overflow:hidden; border:1px solid var(--stone); background:#0d3040; }
#world-map { display:block; width:100%; height:auto; touch-action:none; cursor:grab; }
#world-map[data-dragging="true"] { cursor:grabbing; }
.coordinate { position:absolute; right:10px; bottom:9px; padding:4px 8px; background:#0b1f19cc; color:#e7efe4; font:12px/1.2 Consolas,monospace; pointer-events:none; }
.help { margin:10px 0 0; color:var(--quiet); font-size:.9rem; font-style:italic; }

.layer-bar,.legend { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:12px; color:var(--quiet); font:.84rem Arial,Helvetica,sans-serif; }
.layer-bar label { cursor:pointer; }
.layer-bar input { accent-color:var(--moss); }
.legend { padding-top:11px; border-top:1px solid var(--stone); }
.legend span { display:inline-flex; gap:7px; align-items:center; }
.legend i { width:11px; height:11px; display:inline-block; border-radius:50%; background:#bbb; }
.legend .participant { background:#e6cf87; box-shadow:0 0 0 2px #6b5a83; }
.legend .resource { background:#d8a83f; }
.legend .depleted { background:transparent; border:2px solid #8b9a90; }
.legend .construction { border-radius:2px; background:#b97846; }
.legend .record { border-radius:2px; transform:rotate(45deg); background:#a97fc4; }

.readouts { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.readouts section { padding:18px; border:1px solid var(--stone); background:#faf8f2; }
.readouts h2 { margin:0 0 12px; font:700 .72rem/1 Arial,Helvetica,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); }
#tile-inspector h3 { margin:0 0 7px; font-size:1.15rem; font-weight:500; letter-spacing:-.02em; }
#tile-inspector p,#tile-inspector li { color:var(--quiet); font-size:.93rem; line-height:1.5; }
#tile-inspector ul { margin:9px 0 0; padding-left:18px; }
#snapshot-facts { display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:0; font-size:.9rem; }
#snapshot-facts dt { color:var(--quiet); }
#snapshot-facts dd { margin:0; text-align:right; }
#snapshot-facts code { font:.82rem Consolas,monospace; }
.counts { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; padding-top:13px; border-top:1px solid var(--stone); }
.counts span { display:flex; flex-direction:column; color:var(--quiet); font:.76rem Arial,Helvetica,sans-serif; }
.counts strong { font:500 1.5rem/1 Georgia,'Times New Roman',serif; color:var(--ink); letter-spacing:-.03em; }

.semantics { margin:20px 0 0; color:var(--quiet); font-size:.9rem; line-height:1.5; }
details { margin-top:14px; }
summary { color:var(--moss); font:700 .8rem Arial,Helvetica,sans-serif; cursor:pointer; }
#snapshot-json { max-height:280px; overflow:auto; margin:11px 0 0; padding:13px; border:1px solid var(--stone); background:#faf8f2; font:.76rem/1.5 Consolas,monospace; }
.source { margin:16px 0 0; font:700 .8rem Arial,Helvetica,sans-serif; }
.source a { color:var(--moss); }

@media (max-width:700px) { .readouts { grid-template-columns:1fr; } .embed { padding:12px; } }

/* The wheel only zooms once the reader has clicked into the map; until then it
   scrolls the host page. Say so on the frame rather than leaving it to be
   discovered. */
.canvas-shell::after { content:'Click the map to zoom with the wheel'; position:absolute; left:10px; bottom:9px; padding:4px 8px; background:#0b1f19cc; color:#e7efe4; font:12px/1.2 Arial,Helvetica,sans-serif; pointer-events:none; transition:opacity .18s; }
body[data-map-active="true"] .canvas-shell::after { opacity:0; }