/* 실타래 광장 지도 V1. Same palette, type and card language as the Hoodimong games
   (cream felt, stitched borders, Jua), with knit texture, a yarn garland and a living map. */
:root {
  --cream: #f6eee3; --paper: #fffaf3; --ink: #3b3029; --muted: #8b7d70; --line: #eadccb;
  --coral: #e8846a; --coral-dark: #c96a52; --gold: #e9b44c; --stitch: #e0c6a8; --lilac: #b9a3d6;
  --shadow: 0 6px 18px rgba(92, 66, 40, .14);
  --head: "Jua", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --body: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --knit: linear-gradient(135deg, rgba(255, 255, 255, .34) 25%, transparent 25%) 0 0 / 14px 18px,
          linear-gradient(225deg, rgba(255, 255, 255, .34) 25%, transparent 25%) 0 0 / 14px 18px,
          linear-gradient(45deg, rgba(150, 110, 70, .07) 25%, transparent 25%) 7px 0 / 14px 18px,
          linear-gradient(315deg, rgba(150, 110, 70, .07) 25%, transparent 25%) 7px 0 / 14px 18px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--cream) url(expedition/assets/bg/env_plaza.jpg) center / cover no-repeat fixed; color: var(--ink); font: 15px/1.45 var(--body); }
body::before { content: ""; position: fixed; inset: 0; background: var(--knit), rgba(246, 238, 227, .82); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: -1; }
img { display: block; }
button { font: inherit; color: inherit; }
#app { max-width: 780px; margin: 0 auto; padding: 12px 16px calc(22px + env(safe-area-inset-bottom, 0px)); }

/* header */
.topbar { display: flex; align-items: center; gap: 8px; }
.title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.title b { font: 29px/1 var(--head); color: var(--coral-dark); text-shadow: 0 2px 0 #fff; }
.title small { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
html[lang="en"] .title b { font-size: 26px; letter-spacing: -.2px; }
.helped { display: flex; flex-direction: column; align-items: center; padding: 5px 9px 4px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); line-height: 1; white-space: nowrap; }
.helped small { font-size: 10px; color: var(--muted); }
.helped b { font: 19px/1.05 var(--head); color: var(--coral-dark); margin-top: 2px; }
.helped b i { font-style: normal; font-size: 13px; color: var(--muted); }
.lang { flex: none; width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--paper); box-shadow: var(--shadow); font: 16px/1 var(--head); color: var(--coral-dark); cursor: pointer; }
.lang:active { transform: scale(.94); }

/* yarn garland: a string with felt flags */
.garland { position: relative; height: 22px; margin: 6px -6px 2px; }
.garland::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 8px; border-top: 2px solid #c9a27c; border-radius: 50%; }
.garland::after { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 15px;
  background: linear-gradient(90deg, #e8846a 0 30px, #e9b44c 30px 60px, #9fbedb 60px 90px, #afc598 90px 120px, #b9a3d6 120px 150px) 0 0 / 150px 100% repeat-x;
  -webkit-mask: conic-gradient(from -35deg at 50% 100%, #000 70deg, transparent 0) 0 0 / 30px 15px repeat-x;
  mask: conic-gradient(from -35deg at 50% 100%, #000 70deg, transparent 0) 0 0 / 30px 15px repeat-x;
  filter: drop-shadow(0 2px 1px rgba(92, 66, 40, .25)); }

/* the map */
.map-wrap { position: relative; border-radius: 26px; padding: 7px; background: var(--knit), #e9d6bd; box-shadow: var(--shadow), inset 0 0 0 2px #fff6; }
.map { position: relative; z-index: 0; display: flex; height: clamp(300px, 52vh, 500px); overflow: auto; border-radius: 20px; background: #a9d4dc; scrollbar-width: none; overscroll-behavior: contain; cursor: grab; touch-action: pan-x pan-y; }
.map::-webkit-scrollbar { display: none; }
.map.dragging { cursor: grabbing; }
.map[data-zoom="0"] { height: auto; }
.map.dragging .pin { pointer-events: none; }
.map-inner { position: relative; flex: none; margin: auto; }
.map-img { width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.map-deco { position: absolute; inset: 7px; border-radius: 20px; pointer-events: none; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255, 250, 243, .7), inset 0 0 26px rgba(70, 50, 30, .28); }
.map-deco::after { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(255, 250, 243, .85); border-radius: 15px; }
.cloud { position: absolute; width: 96px; height: 34px; border-radius: 30px; opacity: .78;
  background: radial-gradient(circle at 30% 40%, #fff 0 15px, transparent 16px), radial-gradient(circle at 60% 30%, #fff 0 19px, transparent 20px), radial-gradient(circle at 80% 60%, #fff 0 13px, transparent 14px), linear-gradient(#fff, #fff) 12px 18px / 72px 16px no-repeat;
  filter: drop-shadow(0 3px 2px rgba(80, 90, 110, .18)); animation: drift 34s linear infinite; }
.cloud.c1 { top: 10%; left: -110px; }
.cloud.c2 { top: 58%; left: -110px; transform: scale(.75); animation-duration: 47s; animation-delay: -21s; }
.spark { position: absolute; width: 12px; height: 12px; background: radial-gradient(circle, #fff 0 2px, transparent 3px), conic-gradient(from 45deg, transparent 0 20deg, #fff8 20deg 70deg, transparent 70deg 110deg, #fff8 110deg 160deg, transparent 160deg 200deg, #fff8 200deg 250deg, transparent 250deg 290deg, #fff8 290deg 340deg, transparent 340deg); border-radius: 50%; animation: twinkle 2.6s ease-in-out infinite; }
.spark.s1 { top: 18%; left: 72%; } .spark.s2 { top: 70%; left: 20%; animation-delay: -.9s; } .spark.s3 { top: 40%; left: 46%; animation-delay: -1.7s; }
.map-tools { display: flex; align-items: center; gap: 10px; margin: 8px 4px 0; }
.map-hint { flex: 1; min-width: 0; margin: 0; font-size: 12px; color: #6d5a49; line-height: 1.35; }
.zoom { flex: none; display: flex; gap: 6px; }
.zoom button { width: 40px; height: 36px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); font: 22px/1 var(--head); color: var(--coral-dark); cursor: pointer; }
.zoom button:active { transform: scale(.94); }
.zoom button:disabled { opacity: .4; cursor: default; }

/* threads from the plaza */
.threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.thread { fill: none; stroke-linecap: round; }
.thread.open { stroke: #fff6ea; stroke-width: 7; stroke-dasharray: 20 16; opacity: .85; filter: drop-shadow(0 0 3px rgba(232, 132, 106, .9)); animation: march 1.6s linear infinite; }
.thread.soon { stroke: #fffaf3; stroke-width: 5; stroke-dasharray: 4 16; opacity: .55; }
.thread.on { stroke: var(--gold); stroke-width: 11; opacity: 1; filter: drop-shadow(0 0 6px rgba(233, 180, 76, .95)); }
.ball { fill: var(--coral); stroke: #fff; stroke-width: 5; opacity: 0; }
.ball.go { opacity: 1; }

/* the five friends wait on the plaza */
.friends { position: absolute; display: flex; align-items: flex-end; transform: translate(calc(-100% - 30px), -26px); pointer-events: none; }
.friends img { width: 27px; margin: 0 -3px; animation: sway 1.5s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(0 2px 2px rgba(60, 40, 20, .35)); }
.friends img:nth-child(2n) { animation-delay: -.75s; }
.map.small-whole .friends img { width: 17px; }

/* pins */
.pin { --h: 23px; position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, calc(-1 * var(--h))); padding: 0; border: 0; background: none; cursor: pointer; z-index: 1; }
.pin .badge { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--plate); box-shadow: 0 0 0 3px #fffaf3, 0 0 0 5px rgba(201, 106, 82, .5), 0 5px 10px rgba(50, 30, 15, .35); animation: bob 2.4s ease-in-out infinite; transition: transform .2s; }
.pin .badge::after { content: ""; position: absolute; inset: 3px; border: 1.5px dashed rgba(255, 255, 255, .8); border-radius: 50%; }
.pin .badge > img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60, 40, 20, .25)); }
.pin .num { position: absolute; left: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--coral-dark); color: #fff; font: 12px/18px var(--head); font-style: normal; box-shadow: 0 0 0 2px #fffaf3; }
.pin .done { position: absolute; right: -6px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%; background: var(--gold); color: #fff; font: 12px/19px var(--head); font-style: normal; box-shadow: 0 0 0 2px #fffaf3; }
.pin .label { margin-top: 5px; max-width: 92px; padding: 2px 8px; border-radius: 11px; background: rgba(255, 250, 243, .94); box-shadow: 0 2px 5px rgba(50, 30, 15, .25); font: 11.5px/1.18 var(--head); color: var(--ink); text-align: center; word-break: keep-all; }
.pin.up { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + var(--h))); }
.pin.right { flex-direction: row; transform: translate(calc(-1 * var(--h)), -50%); }
.pin.right.down { transform: translate(calc(-1 * var(--h)), -14px); }
.pin.right .label { margin: 0 0 0 5px; }
.pin.tuck .label { translate: -30px 0; }
.pin.up .label { margin: 0 0 5px; }
.pin.soon { --h: 20px; }
.pin.soon .badge { width: 40px; height: 40px; background: #ece4f3; box-shadow: 0 0 0 3px #fffaf3, 0 0 0 5px rgba(140, 120, 170, .45), 0 5px 10px rgba(50, 30, 15, .3); animation: none; }
.pin.soon .pin-neighbour { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; filter: grayscale(.55) opacity(.75); }
.pin.soon .pin-knot { position: absolute; right: -9px; bottom: -7px; width: 24px; height: 24px; object-fit: contain; }
.pin.soon .label { background: rgba(236, 228, 243, .94); color: #6e5f86; }
.pin.on { z-index: 3; }
.pin.on .badge { transform: scale(1.22); box-shadow: 0 0 0 3px #fffaf3, 0 0 0 6px var(--gold), 0 0 22px 6px rgba(233, 180, 76, .75), 0 6px 12px rgba(50, 30, 15, .35); animation: bob 1.2s ease-in-out infinite; }
.pin .label { position: relative; z-index: 1; }
.pin.on .label { background: var(--coral-dark); color: #fff; margin-top: 11px; }
.pin.on.up .label { margin: 0 0 11px; }
.pin.on.right .label { margin: 0 0 0 11px; }
.pin:active .badge { transform: scale(1.1); }
/* whole map on a small screen: small pins, no names (the card below names the place) */
.map.small-whole .pin { --h: 12px; }
.map.small-whole .pin .badge { width: 24px; height: 24px; }
.map.small-whole .pin .num, .map.small-whole .pin .done { display: none; }
.map.small-whole .pin .label { display: none; }
.map.small-whole .pin.soon .pin-knot { width: 16px; height: 16px; right: -6px; bottom: -5px; }

/* neighbour portraits cut from the site's residents board (4 × 3) */
.portrait, .mini, .tiny { flex: none; background: #f1e7d8 url(assets/world/residents-board.webp) no-repeat; background-size: 400% 300%; }
.portrait { width: 70px; height: 82px; border-radius: 16px; box-shadow: inset 0 0 0 2px #fff, 0 3px 8px rgba(92, 66, 40, .18); }
.mini { display: block; width: 100%; height: 100%; background-size: 400% 300%; }
.tiny { width: 30px; height: 35px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px #fff; }
.sketch { display: grid; place-items: center; background: #e7eadb; color: #809376; font: 22px var(--head); }
.portrait.sketch { font-size: 36px; }
.tiny.sketch { font-size: 16px; }

/* place chips */
.chips { display: flex; gap: 7px; overflow-x: auto; margin: 12px -16px 0; padding: 4px 16px 8px; scrollbar-width: none; scroll-padding: 0 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip-zone { flex: none; display: flex; align-items: center; gap: 5px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; background: var(--paper); box-shadow: 0 3px 8px rgba(92, 66, 40, .12); font: 14px/1 var(--head); color: var(--ink); cursor: pointer; }
.chip-zone i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fde5dc; color: var(--coral-dark); font-style: normal; font-size: 12px; }
.chip-zone.soon { color: #6e5f86; background: #f4eef9; }
.chip-zone.soon i { background: #e4daf0; color: #6e5f86; }
.chip-zone[aria-pressed="true"] { background: var(--coral-dark); color: #fff; box-shadow: 0 4px 10px rgba(201, 106, 82, .4); }
.chip-zone[aria-pressed="true"] i { background: #fff; color: var(--coral-dark); }

/* the place card */
.zone { position: relative; margin-top: 6px; padding: 16px 16px 14px; border-radius: 24px; background: var(--knit), var(--paper); box-shadow: var(--shadow); }
.zone::after { content: ""; position: absolute; inset: 6px; border: 2px dashed var(--stitch); border-radius: 19px; pointer-events: none; }
.zone.flip { animation: card-in .38s cubic-bezier(.2, .8, .3, 1.2); }
.zone-head { display: flex; align-items: center; gap: 9px; }
.zn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--coral-dark); color: #fff; font: 18px var(--head); box-shadow: 0 0 0 3px #fde5dc; }
.zt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.zt b { font: 23px/1.1 var(--head); }
.zt small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.step { position: relative; z-index: 1; width: 36px; height: 36px; border: 0; border-radius: 12px; background: #fff3e2; color: var(--coral-dark); font: 22px/1 var(--head); cursor: pointer; }
.step:active { transform: scale(.92); }
.knot { position: relative; margin: 12px 0 0; padding: 10px 12px 11px; border-radius: 16px; background: #fdf0e6; font-size: 14.5px; line-height: 1.5; }
.knot-tag { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; font: 13px var(--head); color: var(--coral-dark); }
.knot-tag img { width: 20px; height: 20px; object-fit: contain; animation: wiggle 2.8s ease-in-out infinite; }
.neighbour { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.nt { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.nt b { font: 20px/1.1 var(--head); }
.nt .concept { padding: 1px 7px; border-radius: 999px; background: #eef1e4; color: #6f8364; font: 11px/1.5 var(--head); }
.nt small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.nt em { flex-basis: 100%; font-style: normal; font-size: 13.5px; color: #5c4a3b; }
.others { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.others-label { flex-basis: 100%; font: 12px var(--head); color: var(--muted); }
.other { display: flex; align-items: center; gap: 6px; }
.other b { font: 14px var(--head); }
.other small { color: var(--muted); font-size: 11.5px; }
.play { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 4px 12px rgba(92, 66, 40, .14); color: inherit; text-decoration: none; }
a.play:active { transform: scale(.98); }
.play .pic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .07); }
.play .pic img { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(92, 66, 40, .22)); }
.play .pt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.play .pt b { font: 19px/1.15 var(--head); }
.play .pt small { color: #6d5a49; font-size: 12.5px; line-height: 1.35; }
.play .chip { margin-top: 3px; font: 12.5px var(--head); background: #fff3e2; color: #8a6a4c; border-radius: 999px; padding: 2px 9px; }
.play .chip.fresh { background: #fde5dc; color: var(--coral-dark); }
.play .chip.soon { background: #ece4f3; color: #6e5f86; }
.play .go { flex: none; display: flex; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--coral); color: #fff; font: 15px/1 var(--head); box-shadow: 0 3px 0 var(--coral-dark); }
.play .go i { font-style: normal; font-size: 19px; }
.play.soon { background: #f6f1fa; box-shadow: none; }
.play.soon .pic { background: #ece4f3; }
.place { margin: 12px 2px 0; font-size: 13px; color: #6d5a49; line-height: 1.5; }
.place b { font: 12.5px var(--head); color: var(--muted); margin-right: 3px; }

.story { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px; border-radius: 16px; background: #eef0f8; color: inherit; text-decoration: none; }
.story:active { transform: scale(.98); }
.story-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; box-shadow: 0 2px 5px rgba(60, 70, 120, .25);
  background: linear-gradient(#fff, #fff) 6px 6px / 20px 8px no-repeat, linear-gradient(#fff, #fff) 6px 17px / 9px 9px no-repeat, linear-gradient(#fff, #fff) 17px 17px / 9px 9px no-repeat, #7b8fc4; }
.story > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 11.5px; color: #6c7392; line-height: 1.25; }
.story b { font: 15px/1.2 var(--head); color: #3f4a78; }
.story > i { font-style: normal; font: 20px var(--head); color: #7b8fc4; }
.note, .tip { margin: 12px 4px 0; font-size: 12px; color: var(--muted); text-align: center; }
.tip { margin-top: 4px; }

@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes march { to { stroke-dashoffset: -36; } }
@keyframes drift { to { transform: translateX(980px); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes card-in { from { opacity: .3; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .friends img, .pin .badge, .pin.on .badge, .thread.open, .cloud, .spark, .knot-tag img { animation: none; }
  .zone.flip { animation: none; }
}
@media (min-width: 640px) { .title b { font-size: 34px; } .map { height: clamp(360px, 58vh, 540px); } }