/* Freedom world map: the IdleRPG world (500x500) as a glowing arcade board: regions drawn like maze walls, online players chomp around, offline ones haunt it as ghosts. Single dark look on purpose. */
:root {
  --void: #07090c;
  --panel: #0b0f14;
  --rule: #222b34;
  --amber: #ffb547;
  --amber-dim: #9a7038;
  --paper: #f3dcb6;
  --cyan: #6fd3d8;
  --rose: #ff7a7a;
  --pac: #ffe14a;
  --display: "VT323", "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--void); color: var(--paper); font: 13px/1.5 var(--mono); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.wrap { max-width: 1080px; margin: 0 auto; padding-block: 24px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 24px; margin-bottom: 14px; }
h1 { font: 46px/1 var(--display); color: var(--amber); margin: 0; text-shadow: 0 0 14px rgba(255,181,71,.4); }
.sub { color: var(--amber-dim); margin: 4px 0 0; }
.stats { display: flex; gap: 22px; font: 22px/1 var(--display); color: var(--amber-dim); }
.stats b { display: block; color: var(--cyan); font-weight: 400; font-variant-numeric: tabular-nums; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.grid > * { min-width: 0; }
.board { position: relative; border: 1px solid var(--rule); background: var(--panel); aspect-ratio: 1; max-width: 100%; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.card { position: absolute; pointer-events: none; background: rgba(7,9,12,.95); border: 1px solid var(--amber-dim); padding: 8px 10px; font-size: 12px; min-width: 190px; max-width: 240px; }
.card b { color: var(--amber); font-size: 14px; }
.card .on { color: var(--cyan); } .card .off { color: var(--amber-dim); }
.side { display: flex; flex-direction: column; gap: 14px; }
.box { border: 1px solid var(--rule); background: var(--panel); }
.box h2 { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--rule); font: 20px/1 var(--display); color: var(--amber-dim); letter-spacing: .08em; font-weight: 400; }
.online { list-style: none; margin: 0; padding: 6px 0; max-height: 230px; overflow-y: auto; }
.online li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 12px; cursor: pointer; }
.online li:hover, .online li.sel { background: rgba(255,181,71,.07); }
.online li span:first-child { color: var(--pac); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online li span:last-child { color: var(--cyan); font-variant-numeric: tabular-nums; flex: none; }
.log { padding: 8px 12px; height: 250px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; font-size: 12px; }
.log div { flex: none; color: var(--amber-dim); }
.log .fight { color: var(--paper); } .log .good { color: var(--cyan); } .log .bad { color: var(--rose); } .log .quest { color: var(--pac); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12px; color: var(--amber-dim); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.note { margin-top: 10px; font-size: 12px; color: var(--amber-dim); max-width: 70ch; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } .log { height: 170px; } }
.legend .k-on { background: var(--pac); border-radius: 50%; }
.legend .k-off { background: #6b5a8f; }
.legend .k-quest { border: 1px dashed var(--pac); }
.legend .k-fight { background: var(--rose); }
.mode { display: inline-block; margin-left: 8px; padding: 0 6px; font-size: 11px; border: 1px solid var(--rule); color: var(--amber-dim); vertical-align: 2px; }
.mode.live { color: var(--cyan); border-color: var(--cyan); }
.top { display: flex; gap: 16px; font-size: 12px; margin-bottom: 10px; }
.top a { color: var(--amber-dim); }