:root {
  --coral: #FF6B5A;
  --sun: #FFD54A;
  --sky: #4AA8F0;
  --mint: #5FCFB3;
  --ink: #2B2A38;
  --soft: #6A6776;
  --paper: #FFF8F1;
  --line: rgba(43, 42, 56, 0.08);
  --land: #E8DFD0;
  --land-line: #4F4A43;
  --land-known: #D8EFE8;
  --land-cook: #FFE9A8;
  --land-solid: #BFE8DC;
  --land-shine: #7ED9C2;
  --land-ask: #FFD54A;
  --land-miss: #F3D6D1;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper); color: var(--ink);
  font-family: "ui-rounded", Nunito, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  min-height: 100%;
}
button { font: inherit; cursor: pointer; }
.screen { display: none; min-height: 100vh; }
.screen.on { display: flex; flex-direction: column; }
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 8px; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { margin: 0; font-size: 1.15rem; letter-spacing: -0.02em; }
.brand small { color: var(--soft); font-weight: 600; }
.who {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 6px 12px;
  box-shadow: 0 6px 16px var(--line); font-size: 0.92rem;
}
.mission {
  margin: 0 18px 10px;
  background: #fff; border-radius: 18px; padding: 12px 16px;
  box-shadow: 0 8px 20px var(--line);
  color: var(--soft); font-weight: 600;
}
.mission strong { color: var(--ink); }
.map-wrap {
  margin: 0 12px; background: #fff; border-radius: 22px;
  box-shadow: 0 10px 24px var(--line);
  padding: 8px 8px 0; overflow: hidden;
  flex: 1;
}
#map {
  width: 100%; height: auto; display: block;
  max-height: min(62vh, 640px);
}
#map path.state {
  fill: var(--land);
  stroke: var(--land-line);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 0.18s ease, stroke 0.18s ease;
}
#map path.state:hover { stroke: var(--ink); stroke-width: 2.4; }
#map path.state.miss { fill: var(--land-miss); }
#map path.state.dim { opacity: 0.45; }
#map .star { pointer-events: none; stroke-width: 1.3; }
#map .star.on { fill: var(--sun); stroke: #c49216; }
#map .star.off { fill: transparent; stroke: #6F675C; }
.doors {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; padding: 12px 18px 18px;
}
.door {
  background: #fff; border: 0; border-radius: 16px;
  padding: 14px 10px; text-align: left;
  box-shadow: 0 8px 18px var(--line);
}
.door .ic { font-size: 1.25rem; display: block; margin-bottom: 4px; }
.door .nm { font-weight: 800; }
.door .ds { color: var(--soft); font-size: 0.8rem; }
.door.suggested { outline: 2px solid var(--mint); }
.nav {
  display: flex; justify-content: center; gap: 8px;
  padding: 0 18px 18px;
}
.nav button, .ghost, .primary, .softbtn {
  border: 0; border-radius: 999px; padding: 10px 16px;
}
.ghost { background: transparent; color: var(--soft); }
.primary { background: var(--ink); color: #fff; }
.softbtn { background: #fff; color: var(--ink); box-shadow: 0 6px 16px var(--line); }
.sheet {
  position: fixed; inset: auto 12px 12px; background: #fff;
  border-radius: 22px; padding: 18px 18px 16px;
  box-shadow: 0 16px 40px rgba(43,42,56,.16);
  display: none; z-index: 5;
}
.sheet.on { display: block; }
.sheet h2 { margin: 0 0 6px; font-size: 1.2rem; }
.sheet p { margin: 0 0 12px; color: var(--soft); }
.sheet label { display: block; font-size: 0.82rem; color: var(--soft); font-weight: 700; margin: 8px 0 4px; }
.sheet input[type=text] {
  width: 100%; border: 2px solid var(--line); border-radius: 12px;
  padding: 10px 12px; font: inherit; background: var(--paper);
}
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hint { font-size: 0.9rem; color: var(--soft); min-height: 1.2em; }
.hook { background: #FFF6D6; border-radius: 12px; padding: 8px 10px; font-size: 0.92rem; margin: 8px 0; }
.profiles { padding: 28px 18px; max-width: 640px; margin: 0 auto; }
.profiles h1 { text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.card {
  background: #fff; border-radius: 18px; padding: 18px 12px; text-align: center;
  box-shadow: 0 8px 18px var(--line); cursor: pointer;
}
.card .av { font-size: 2rem; }
.avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.avatars span {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; background: var(--paper); cursor: pointer; font-size: 1.3rem;
}
.avatars span.sel { outline: 2px solid var(--mint); }
.parent { padding: 18px; max-width: 720px; margin: 0 auto; }
.parent table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.parent th, .parent td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  z-index: 8;
}
.toast.show { opacity: 1; }
@media (max-width: 700px) {
  .doors { grid-template-columns: 1fr 1fr; }
  #map { max-height: 48vh; }
}