@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&display=swap');

:root {
  --ink: #2f2416;
  --parchment: #f5efe0;
  --line: #d8cdb2;
  --accent: #7a3b2e;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: system-ui, sans-serif;
  background: #e9e2cf;
  color: var(--ink);
}

header {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 18px;
  background: var(--parchment);
  border-bottom: 1px solid var(--line);
}
header h1 {
  font-family: 'IM Fell English', serif;
  font-size: 19px;
  margin: 0;
}
header a {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
header a:hover { text-decoration: underline; }

#canvas-area {
  height: calc(100vh - 45px);
  overflow: auto;
  background: #cfc6ac;
  display: flex;
  padding: 24px;
}
#canvas-area canvas {
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  background: #fff;
}

#map-list { list-style: none; margin: 24px auto; padding: 0; max-width: 480px; }
#map-list li { margin-bottom: 8px; }
#map-list a {
  display: block;
  padding: 12px 16px;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-family: 'IM Fell English', serif;
  font-size: 18px;
}
#map-list a:hover { background: #fff; border-color: var(--accent); }