* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: #241d12;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #f3ead9;
  overflow: hidden;
}

#wrap { display: flex; height: 100%; }
#stage { position: relative; flex: 1; height: 100%; }
#game { width: 100%; height: 100%; display: block; cursor: crosshair; }

/* ---- side panel ---------------------------------------------------------- */
#panel {
  width: 264px; flex: none;
  background: #33291a; border-left: 3px solid #4d3f27;
  padding: 18px 16px; overflow-y: auto;
}
#panel h1 { margin: 0; font-size: 21px; letter-spacing: .3px; }
#panel .zone { margin: 2px 0 16px; color: #c9ab6d; font-weight: 600; }
#panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
            color: #b09a6d; margin: 18px 0 8px; }

.stats { display: flex; gap: 8px; }
.stats div { flex: 1; background: #40331f; border-radius: 10px; padding: 9px 4px; text-align: center; }
.stats b { display: block; font-size: 20px; color: #f0cd77; }
.stats span { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: #a8926a; }

.menu-btn {
  width: 100%; margin-top: 12px; background: #4d3f27; color: #f3ead9;
  border: none; border-radius: 10px; padding: 11px; font: inherit; font-weight: 600;
  cursor: pointer; display: flex; justify-content: center; gap: 8px; align-items: center;
}
.menu-btn:hover { background: #5c4c30; }
.menu-btn span {
  background: #6d5a38; border-radius: 5px; padding: 1px 7px; font-size: 12px; color: #e0cda3;
}

#cat-list { list-style: none; margin: 0; padding: 0; }
#cat-list li {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 8px; margin-bottom: 4px;
  background: #3b2f1d; opacity: .45; font-size: 14px;
}
#cat-list li.got { opacity: 1; background: #4a5f34; }
#cat-list li.got .nm::after { content: " ✓"; color: #b9e08a; }
.dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }

.key { margin: 10px 0 0; font-size: 11.5px; color: #a8926a; display: flex; align-items: center; }
.key .dot { width: 10px; height: 10px; margin: 0 5px 0 10px; }
.key .dot:first-child { margin-left: 0; }

#hint {
  margin-top: 18px; font-size: 12.5px; line-height: 1.75;
  color: #b6a179; border-top: 1px solid #4d3f27; padding-top: 14px;
}

/* ---- toast --------------------------------------------------------------- */
#toast {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  background: rgba(30,22,10,.9); color: #f6ecd6; padding: 11px 20px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s; max-width: 80%; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- overlays ------------------------------------------------------------ */
#card, #summary, #menu {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; background: rgba(20, 15, 8, .72);
}
#card.open, #summary.open, #menu.open { display: flex; }

.card-inner {
  position: relative; background: #f6efdf; color: #2f2617;
  width: min(560px, 92vw); border-radius: 16px; padding: 26px 28px 24px;
  box-shadow: 0 22px 60px rgba(0,0,0,.5); max-height: 92vh; overflow-y: auto;
}
.card-inner.wide { width: min(720px, 94vw); }

#card-close, #menu-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  font-size: 26px; line-height: 1; color: #8b7a5c; cursor: pointer;
}

.card-inner .found { margin: 0; color: #8a7754; font-size: 13px;
                     text-transform: uppercase; letter-spacing: 1.2px; }
.card-inner h3 { margin: 2px 0 10px; font-size: 27px; }
.card-inner .ask { margin: 0 0 14px; color: #5d5138; font-weight: 600; }
.card-inner .big { font-size: 17px; margin: 0 0 14px; }

.badge {
  display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 11.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: #fff;
  margin-bottom: 14px;
}

.fact {
  display: block; width: 100%; text-align: left;
  background: #fff; border: 2px solid #ddd0b2; border-radius: 11px;
  padding: 13px 15px; margin-bottom: 9px;
  font: inherit; font-size: 15.5px; line-height: 1.45; color: #2f2617; cursor: pointer;
}
.fact:hover { border-color: #c2a86a; background: #fffdf6; }
#card-facts.done .fact { cursor: default; }
#card-facts.done .fact:hover { border-color: #ddd0b2; background: #fff; }
.fact.right { background: #dff3d0; border-color: #7fb05a; }
.fact.wrong { background: #f6d9d5; border-color: #c9736a; }

.result { margin: 12px 2px 0; min-height: 22px; font-weight: 600; font-size: 15px; }
.result.good { color: #4a7a2c; }
.result.bad  { color: #a8493e; }

/* ---- summary ------------------------------------------------------------- */
.sum-list { list-style: none; margin: 0 0 20px; padding: 0; }
.sum-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 2px; border-bottom: 1px solid #e4dac2;
}
.sum-list li span { color: #6b5d40; }
.sum-list li b { font-size: 17px; }

button.primary {
  background: #6b8f45; color: #fff; border: none; border-radius: 11px;
  padding: 13px 22px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
button.primary:hover { background: #7aa050; }

/* ---- menu ---------------------------------------------------------------- */
.purse { margin: 0 0 18px; color: #8a7754; font-weight: 600; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.big-action {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: #6b8f45; color: #fff; border: none; border-radius: 13px;
  padding: 16px 18px; font: inherit; cursor: pointer;
}
.big-action b { font-size: 17px; }
.big-action span { font-size: 13px; opacity: .9; line-height: 1.4; }
.big-action:hover { filter: brightness(1.08); }
.big-action.ghost { background: #e6dbc0; color: #3f3624; }

.menu-h { margin: 24px 0 10px; font-size: 12.5px; text-transform: uppercase;
          letter-spacing: 1.1px; color: #8a7754; }
#zone-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.zone-card {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  background: #fff; border: 2px solid #ddd0b2; border-radius: 11px;
  padding: 12px; font: inherit; cursor: pointer; text-align: left;
}
.zone-card .swatch { width: 100%; height: 26px; border-radius: 6px; margin-bottom: 6px; }
.zone-card .zname { font-weight: 700; font-size: 15px; color: #2f2617; }
.zone-card .zstate { font-size: 12px; color: #8a7754; }
.zone-card:hover:not(.locked) { border-color: #7fb05a; }
.zone-card.done { border-color: #7fb05a; background: #f2f8ec; }
.zone-card.locked { opacity: .5; cursor: default; }

/* ---- leaving the shop ---------------------------------------------------- */
.leave-btn {
  position: fixed; left: 18px; bottom: 18px; display: none;
  background: rgba(30,22,10,.86); color: #f6ecd6; border: none; border-radius: 10px;
  padding: 11px 16px; font: inherit; font-weight: 600; cursor: pointer;
}
body[data-scene="shop"] .leave-btn { display: block; }
body[data-scene="shop"] #hint { display: none; }

@media (max-width: 760px) {
  #wrap { flex-direction: column; }
  #panel { width: 100%; height: 210px; border-left: none; border-top: 3px solid #4d3f27; }
  .menu-actions { grid-template-columns: 1fr; }
}

/* ---- extra overlays: map + score board ----------------------------------- */
#map, #board { position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; background: rgba(20,15,8,.78); }
#map.open, #board.open { display: flex; }

.row-btns { display: flex; gap: 10px; align-items: center; }
.ghost-btn {
  background: #e6dbc0; color: #3f3624; border: none; border-radius: 11px;
  padding: 13px 20px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.finish-btn {
  width: 100%; margin-top: 16px; background: #b5763c; color: #fff; border: none;
  border-radius: 11px; padding: 13px; font: inherit; font-weight: 600; cursor: pointer;
}
.finish-btn:hover { background: #c4843f; }

.sum-list li.score { border-bottom: none; margin-top: 4px; }
.sum-list li.score b { font-size: 24px; color: #6b8f45; }
.unlocked { background: #eaf5e0; border: 2px solid #7fb05a; border-radius: 11px;
            padding: 12px 14px; margin: 0 0 16px; font-size: 15px; }
.warn { color: #a8493e; font-weight: 600; margin: 0 0 16px; }

/* the map itself */
#map .card-inner { width: min(1080px, 96vw); }
#map-canvas {
  position: relative; width: 100%; aspect-ratio: 2 / 1;
  border-radius: 14px; overflow: hidden; border: 3px solid #d8c9a4;
}
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#map-boat {
  position: absolute; font-size: 26px; line-height: 1;
  transform: translate(-50%, -60%); display: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
#map-boat.sailing { display: block; }
#map-wake {
  position: absolute; inset: 0; pointer-events: none; display: none;
}
#map-wake.sailing { display: block; }
#map-pins { position: absolute; inset: 0; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.94); border: 2px solid #b9a87f; border-radius: 11px;
  padding: 7px 10px; font: inherit; cursor: pointer; text-align: left;
  display: flex; gap: 8px; align-items: flex-start; max-width: 210px;
}
.pin:hover:not(:disabled) { border-color: #6b8f45; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.pin .blob { width: 15px; height: 15px; border-radius: 50%; flex: none; margin-top: 2px;
             border: 2px solid rgba(0,0,0,.18); }
.pin .plabel { display: flex; flex-direction: column; line-height: 1.3; }
.pin b { font-size: 14px; color: #2f2617; }
.pin i { font-style: normal; font-size: 11px; color: #7d6d4c; }
.pin em { font-style: normal; font-size: 10.5px; text-transform: uppercase;
          letter-spacing: .6px; color: #6b8f45; font-weight: 700; }
.pin u { text-decoration: none; font-size: 10px; color: #97865f; margin-top: 3px; display: block; }
.pin.locked { opacity: .62; cursor: default; }
.pin.locked em { color: #a8493e; }
.pin.done { border-color: #7fb05a; }
.pin.here { border-color: #b5763c; }
.pin.here em { color: #b5763c; }

/* the score board */
#board-rows { margin-bottom: 14px; }
.brow { display: grid; grid-template-columns: 34px 1fr 1fr 82px 70px; gap: 8px;
        align-items: center; padding: 9px 6px; border-bottom: 1px solid #e4dac2; }
.brow.top { background: #f5f0dd; border-radius: 8px; }
.brow .rank { font-weight: 700; color: #97865f; }
.brow .who { font-weight: 700; }
.brow .where, .brow .cats { font-size: 13px; color: #7d6d4c; }
.brow .pts { font-weight: 700; text-align: right; font-size: 17px; color: #6b8f45; }
.empty { color: #8a7754; }
.save-row { display: flex; gap: 9px; }
.save-row input {
  flex: 1; border: 2px solid #ddd0b2; border-radius: 10px; padding: 11px 13px;
  font: inherit; font-size: 15px; background: #fff; color: #2f2617;
}

/* ---- touch controls ------------------------------------------------------- */
#touch { display: none; }

#dpad {
  position: absolute; left: 16px; bottom: 16px;
  width: 168px; height: 168px; touch-action: none; z-index: 5;
}
.pad {
  position: absolute; width: 56px; height: 56px; border: none; border-radius: 14px;
  background: rgba(38,28,14,.62); color: #f6ecd6; font-size: 19px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.pad:active { background: rgba(107,143,69,.85); }
.pad.up    { left: 56px; top: 0; }
.pad.left  { left: 0;    top: 56px; }
.pad.right { left: 112px;top: 56px; }
.pad.down  { left: 56px; top: 112px; }

#actions {
  position: absolute; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 5;
}
.round {
  border: none; border-radius: 50%; background: rgba(38,28,14,.68); color: #f6ecd6;
  font: inherit; font-weight: 700; touch-action: none;
  user-select: none; -webkit-user-select: none;
  width: 62px; height: 62px; font-size: 15px;
}
.round.big { width: 86px; height: 86px; font-size: 17px; background: rgba(107,143,69,.88); }
.round.big.dim { background: rgba(38,28,14,.5); color: #9c8f78; }
.round.small { width: 56px; height: 56px; font-size: 13px; }
.round:active { filter: brightness(1.25); }

/* Show the pad on anything with a touch screen, or any small window. */
@media (pointer: coarse), (max-width: 900px) {
  #touch { display: block; }
  #hint { display: none; }
}

@media (max-width: 760px) {
  #panel { height: 168px; padding: 12px 14px; }
  #panel h1 { font-size: 18px; }
  #panel h2 { margin: 12px 0 6px; }
  #cat-list li { padding: 5px 7px; font-size: 13px; }
  #dpad { bottom: 12px; left: 12px; }
  #actions { bottom: 12px; right: 12px; }
}

/* ---- start again ---------------------------------------------------------- */
#confirm { position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; background: rgba(20,15,8,.82); }
#confirm.open { display: flex; }

.restart-btn {
  width: 100%; margin-top: 9px; background: transparent; color: #a8493e;
  border: 2px solid #d9b7b1; border-radius: 11px; padding: 11px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.restart-btn:hover { background: #f6e6e3; border-color: #c9736a; }

button.danger {
  background: #b04a3e; color: #fff; border: none; border-radius: 11px;
  padding: 13px 20px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
button.danger:hover { background: #c2564a; }
.keepsafe { background: #eaf5e0; border-radius: 10px; padding: 10px 13px;
            margin: 0 0 18px; font-size: 14px; color: #3f5a2a; }

/* ---- pick your starting cat ---------------------------------------------- */
#start { position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; background: rgba(20,15,8,.9); z-index: 20; }
#start.open { display: flex; }

#starter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.starter {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: #fff; border: 3px solid #ddd0b2; border-radius: 14px;
  padding: 12px; font: inherit; cursor: pointer; text-align: left;
}
.starter:hover { border-color: #6b8f45; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.starter .portrait { width: 100%; height: auto; background: #efe6cd;
                     border-radius: 10px; margin-bottom: 6px; }
.starter b { font-size: 18px; color: #2f2617; }
.starter .worth { font-size: 12.5px; font-weight: 700; color: #6b8f45; }
.starter .sblurb { font-size: 13px; line-height: 1.45; color: #5d5138; margin-top: 3px; }
.starter-row .nm { font-style: italic; }

@media (max-width: 620px) { #starter-grid { grid-template-columns: 1fr; } }

/* ---- meeting a tracker ---------------------------------------------------- */
#meet, #win { position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; background: rgba(20,15,8,.8); }
#meet.open, #win.open { display: flex; }

#meet-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 16px; }
#meet-lists .side { background: #efe6cd; border-radius: 12px; padding: 11px 12px; }
#meet-lists h5 { margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase;
                 letter-spacing: 1px; color: #8a7754; }
.catrow { display: flex; flex-direction: column; gap: 6px; }
.catchip {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #fff; border: 2px solid #ddd0b2; border-radius: 9px;
  padding: 8px 10px; font: inherit; font-size: 14px; text-align: left; color: #2f2617;
}
button.catchip { cursor: pointer; }
button.catchip:hover { border-color: #6b8f45; background: #fbfff5; }
.catchip .dot { width: 12px; height: 12px; }
.catchip .val { margin-left: auto; font-weight: 700; color: #8a6a2a; font-size: 13px; }
.catchip.taken { border-color: #c9736a; background: #fbeeec; }
.catchip.prize { border-color: #7fb05a; background: #f2f8ec; }
.catrow .none { color: #8a7754; font-size: 13.5px; font-style: italic; }

#meet-question { display: none; }
#meet-question.open { display: block; }
#meet-close { margin-top: 14px; }

#win-body .big { font-size: 17px; }

/* ---- the way in, and who is playing --------------------------------------- */
#gate, #naming { position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; background: #241d12; z-index: 30; }
#gate.open, #naming.open { display: flex; }

#gate input, #naming input {
  width: 100%; border: 2px solid #ddd0b2; border-radius: 10px; padding: 13px 15px;
  font: inherit; font-size: 17px; background: #fff; color: #2f2617; margin-bottom: 10px;
}
#gate .primary, #naming .primary { width: 100%; }
.wherenote { margin: 12px 0 0; font-size: 12px; color: #8a7754; }

/* ---- Android: keep the panel clear of the system navigation bar ------------ */
#panel {
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
#dpad { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
#actions { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
#toast { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
.leave-btn { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.card-inner { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 760px) {
  #panel { height: auto; max-height: 46vh; }
  #map .card-inner { padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
  /* the map was far too zoomed in on a phone — give it the full width and a
     shallower box so you can see the whole world at once */
  #map-canvas { aspect-ratio: 2.4 / 1; }
  .pin { max-width: 128px; padding: 5px 7px; }
  .pin b { font-size: 11px; }
  .pin i { font-size: 9px; }
  .pin em { font-size: 8.5px; }
  .pin u { display: none; }
  .pin .blob { width: 10px; height: 10px; }
}