:root {
  /* Space Mono is used sparingly for tiny market-stamp details: stall coordinates and lot marks. */
  --morning-blue: #8ED8FF;
  --shell-pearl: #FFF4E8;
  --nacre-pink: #FFC7D6;
  --cloud-mint: #B8F2E6;
  --auction-indigo: #26345D;
  --brass-gold: #E5B84B;
  --coral-ink: #F47D63;
  --deep-tide: #132033;
  --phase-a: #FFF4E8;
  --phase-b: #8ED8FF;
  --phase-c: #FFC7D6;
  --ink: #132033;
  --display: "Fraunces", serif;
  --body: "Plus Jakarta Sans", sans-serif;
  --kr: "Noto Sans KR", sans-serif;
  --mono: "Space Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  color: var(--deep-tide);
  font-family: var(--body);
  overflow-x: hidden;
  background: var(--shell-pearl);
}

body.phase-morning { --phase-a: #FFF4E8; --phase-b: #8ED8FF; --phase-c: #FFC7D6; --ink: #132033; }
body.phase-noon { --phase-a: #B8F2E6; --phase-b: #8ED8FF; --phase-c: #FFF4E8; --ink: #132033; }
body.phase-dusk { --phase-a: #FFC7D6; --phase-b: #F47D63; --phase-c: #26345D; --ink: #132033; }
body.phase-moon { --phase-a: #26345D; --phase-b: #132033; --phase-c: #8ED8FF; --ink: #FFF4E8; }

.sky-orbit {
  position: relative;
  min-height: 600vh;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 87%, rgba(19, 32, 51, .22) 0 2%, transparent 15%),
    radial-gradient(circle at 78% 12%, rgba(255, 244, 232, .72), transparent 28%),
    linear-gradient(132deg, var(--phase-a), var(--phase-b) 46%, var(--phase-c));
  transition: background 900ms ease;
}

.nacre-wash {
  position: fixed;
  inset: -20%;
  z-index: -2;
  background:
    repeating-radial-gradient(ellipse at 72% 34%, rgba(255,255,255,.18) 0 3px, transparent 4px 22px),
    conic-gradient(from 230deg at 34% 76%, rgba(255,199,214,.34), rgba(184,242,230,.35), rgba(142,216,255,.26), rgba(255,244,232,.44), rgba(255,199,214,.34));
  mix-blend-mode: screen;
  opacity: .9;
  transform: rotate(var(--sky-rotate, 0deg));
}

.sun-pearl {
  position: fixed;
  width: 13rem;
  height: 13rem;
  right: 8vw;
  top: 7vh;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #FFF4E8 0 18%, #FFC7D6 38%, rgba(229,184,75,.4) 58%, transparent 70%);
  filter: blur(.3px);
  opacity: .88;
  animation: pearlPulse 5.5s ease-in-out infinite;
}

.tide-pool {
  position: fixed;
  left: -8vw;
  bottom: -10vh;
  width: 42vw;
  height: 28vh;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 45% 42%, rgba(184,242,230,.72), transparent 34%),
    radial-gradient(ellipse at 54% 52%, rgba(142,216,255,.7), rgba(38,52,93,.44) 62%, rgba(19,32,51,.34));
  box-shadow: inset 0 0 0 2px rgba(255,244,232,.55), 0 -2rem 7rem rgba(142,216,255,.45);
}

.rope-ladder {
  position: fixed;
  left: 10vw;
  bottom: 8vh;
  width: 5rem;
  height: 44vh;
  transform: rotate(-18deg);
  border-left: 3px dashed rgba(38,52,93,.58);
  border-right: 3px dashed rgba(38,52,93,.58);
  opacity: .72;
}
.rope-ladder span {
  display: block;
  height: 3px;
  margin: 2.8rem .55rem;
  background: rgba(229,184,75,.72);
  border-radius: 2rem;
}

.spiral-map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: .93;
}
#spiralPath {
  fill: none;
  stroke: url(#none);
  stroke: rgba(255,244,232,.68);
  stroke-width: 74;
  stroke-linecap: round;
  stroke-dasharray: 3000;
  stroke-dashoffset: calc(3000 - (3000 * var(--draw, .05)));
  filter: drop-shadow(0 13px 26px rgba(38,52,93,.14));
}
.spiral-rib {
  fill: none;
  stroke: rgba(38,52,93,.35);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 9 17;
  animation: ribDrift 8s linear infinite;
}
.rib-two { stroke: rgba(244,125,99,.34); animation-duration: 11s; }
.rib-three { stroke: rgba(229,184,75,.48); animation-duration: 13s; }
.rib-four { stroke: rgba(184,242,230,.72); animation-duration: 9s; }

.weather-vane {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  display: grid;
  gap: .55rem;
}
.weather-vane button {
  width: 8.4rem;
  padding: .48rem .74rem;
  color: var(--deep-tide);
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  background: rgba(255,244,232,.54);
  border: 1px solid rgba(38,52,93,.22);
  border-radius: 999px 999px 999px 0;
  box-shadow: 0 .6rem 1.7rem rgba(19,32,51,.08);
  cursor: pointer;
  transition: transform 300ms ease, background 300ms ease;
}
.weather-vane button.active {
  transform: translateX(-.9rem) rotate(-4deg);
  background: #E5B84B;
}

.market-scroll { position: relative; z-index: 3; }
.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 8vh 10vw;
}
.scene-harbor { align-items: end; padding-bottom: 11vh; }
.scene-awnings { justify-items: end; padding-right: 16vw; }
.scene-echo { justify-items: start; padding-left: 16vw; }
.scene-pearl { justify-items: center; }
.scene-courier { justify-items: end; padding-right: 13vw; }
.scene-auction { justify-items: center; color: #FFF4E8; }

.stall-sign, .vellum-card, .auction-ring {
  position: relative;
  max-width: 37rem;
  padding: 2rem;
  border: 1px solid rgba(19,32,51,.16);
  background:
    linear-gradient(135deg, rgba(255,244,232,.78), rgba(255,199,214,.34)),
    repeating-linear-gradient(-9deg, transparent 0 12px, rgba(38,52,93,.035) 13px 14px);
  border-radius: 2.2rem 1rem 2.8rem 1.2rem;
  box-shadow: 0 1.4rem 4rem rgba(19,32,51,.14);
  backdrop-filter: blur(15px);
}
.hero-sign { margin-left: 8vw; margin-bottom: 3vh; padding-top: 3.3rem; transform: rotate(-2deg); }
.stall-canopy {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: -1.4rem;
  height: 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border-radius: 2rem 2rem 1rem 1rem;
  filter: drop-shadow(0 .6rem 1rem rgba(38,52,93,.13));
}
.stall-canopy span { background: radial-gradient(circle at 50% 100%, transparent 0 24%, #FFF4E8 25% 100%); animation: canopyFold 3.6s ease-in-out infinite; }
.stall-canopy span:nth-child(even) { background: radial-gradient(circle at 50% 100%, transparent 0 24%, #FFC7D6 25% 100%); animation-delay: .45s; }

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  letter-spacing: -.055em;
  line-height: .88;
}
h1 { font-size: clamp(4.2rem, 13vw, 12rem); color: #26345D; text-shadow: .04em .04em 0 rgba(255,199,214,.75); }
h2 { font-size: clamp(3rem, 7.8vw, 7rem); color: #26345D; }
.scene-auction h2 { color: #FFF4E8; text-shadow: 0 0 28px rgba(142,216,255,.28); }
p { font-size: clamp(1rem, 1.45vw, 1.32rem); line-height: 1.7; margin: 1rem 0 0; }
.bilingual { font-family: var(--kr); font-weight: 800; color: #F47D63; letter-spacing: .04em; }
.market-stamp { margin: 0 0 .75rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: #F47D63; }

.object-cluster { position: absolute; display: flex; flex-wrap: wrap; gap: 1rem; }
.harbor-goods { left: 42vw; bottom: 18vh; max-width: 26rem; }
.glass-jar, .shell-token, .flag, .tag, .echo-shells span, .kite, .orbiting-goods span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(38,52,93,.18);
  border-radius: 999px 999px 999px 20px;
  background: rgba(255,244,232,.66);
  box-shadow: 0 .8rem 2rem rgba(19,32,51,.12);
  font-family: var(--mono);
  font-size: .76rem;
  text-transform: uppercase;
}
.glass-jar { background: linear-gradient(180deg, rgba(184,242,230,.48), rgba(142,216,255,.38)); border-radius: 1.2rem 1.2rem 2.2rem 2.2rem; }
.shell-token { background: radial-gradient(circle, #FFF4E8, #FFC7D6); }
.flag { background: #F47D63; color: #FFF4E8; animation: flagBreath 2.8s ease-in-out infinite; transform-origin: left center; }

.awning-row { position: absolute; left: 7vw; top: 21vh; width: 52vw; display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; transform: rotate(-7deg); }
.awning-row span { height: 14rem; border-radius: 4rem 4rem 1rem 1rem; background: radial-gradient(circle at 50% 100%, transparent 0 25%, rgba(255,244,232,.82) 26%), linear-gradient(#B8F2E6, #8ED8FF); animation: awningOpen 4s ease-in-out infinite; }
.awning-row span:nth-child(2n) { background: radial-gradient(circle at 50% 100%, transparent 0 25%, rgba(255,199,214,.84) 26%), linear-gradient(#FFF4E8, #FFC7D6); animation-delay: .5s; }
.swinging { position: absolute; right: -2rem; bottom: -1.3rem; transform-origin: top center; animation: tagSwing 2.9s ease-in-out infinite; }

.echo-shells { position: absolute; right: 14vw; top: 23vh; display: grid; gap: 1.3rem; transform: rotate(8deg); }
.echo-shells span { border-radius: 50% 38% 52% 42%; min-width: 8rem; aspect-ratio: 1.25; background: repeating-radial-gradient(ellipse at 34% 42%, #FFF4E8 0 8px, #FFC7D6 10px 14px, #B8F2E6 16px 20px); animation: shellHum 4s ease-in-out infinite; }
.echo-shells span:nth-child(2) { animation-delay: .7s; }
.echo-shells span:nth-child(3) { animation-delay: 1.2s; }

.shell-scale {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 15rem;
  height: 10rem;
  z-index: 4;
  transform: translate(-50%, -50%) rotate(var(--scale-tilt, -4deg));
  pointer-events: none;
  opacity: .78;
  transition: opacity 400ms ease;
}
.scale-beam { position: absolute; left: 1rem; right: 1rem; top: 2.8rem; height: .35rem; background: #E5B84B; border-radius: 999px; box-shadow: 0 0 0 2px rgba(38,52,93,.2); }
.scale-stem { position: absolute; left: calc(50% - .18rem); top: 2.8rem; width: .36rem; height: 6rem; background: #26345D; border-radius: 999px; }
.scale-pan { position: absolute; top: 4rem; width: 5.4rem; height: 2.1rem; border-bottom: .35rem solid #E5B84B; border-radius: 0 0 50% 50%; }
.left-pan { left: .2rem; }
.right-pan { right: .2rem; }
.pearl, .cloud-puff { position: absolute; left: 50%; top: -.9rem; transform: translateX(-50%); width: 1.55rem; height: 1.55rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4E8, #FFC7D6); }
.cloud-puff { width: 2.8rem; background: radial-gradient(circle at 30% 50%, #FFF4E8 0 28%, transparent 29%), radial-gradient(circle at 55% 38%, #FFF4E8 0 35%, transparent 36%), radial-gradient(circle at 72% 56%, #B8F2E6 0 30%, transparent 31%); }
.pearl-lamps { position: absolute; left: 11vw; top: 20vh; display: flex; gap: 2rem; transform: rotate(-9deg); }
.pearl-lamps i { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: radial-gradient(circle, #FFF4E8 15%, #E5B84B 42%, transparent 70%); animation: lampBlink 3.2s ease-in-out infinite; }
.pearl-lamps i:nth-child(2n) { animation-delay: 1s; }

.kite-lane { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kite { position: absolute; width: 10rem; height: 5.2rem; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #FFF4E8; color: #26345D; animation: kiteCross 10s linear infinite; }
.kite-one { top: 18vh; animation-delay: -2s; }
.kite-two { top: 47vh; background: #FFC7D6; animation-duration: 12s; animation-delay: -6s; }
.kite-three { top: 70vh; background: #B8F2E6; animation-duration: 9s; animation-delay: -4s; }

.auction-ring {
  width: min(76vw, 58rem);
  min-height: 36rem;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  color: #FFF4E8;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,244,232,.13), transparent 33%),
    repeating-radial-gradient(circle, rgba(142,216,255,.18) 0 2px, transparent 4px 34px),
    linear-gradient(135deg, rgba(38,52,93,.88), rgba(19,32,51,.92));
  border-color: rgba(184,242,230,.34);
}
.auction-ring p { max-width: 38rem; }
.orbiting-goods { position: absolute; inset: 0; animation: orbitRing 22s linear infinite; }
.orbiting-goods span { position: absolute; background: rgba(255,244,232,.85); color: #132033; }
.orbiting-goods span:nth-child(1) { left: 45%; top: -1rem; }
.orbiting-goods span:nth-child(2) { right: -2rem; top: 32%; }
.orbiting-goods span:nth-child(3) { right: 15%; bottom: 1rem; }
.orbiting-goods span:nth-child(4) { left: 7%; bottom: 9%; }
.orbiting-goods span:nth-child(5) { left: -2rem; top: 28%; }

.bubble-lenses { position: fixed; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.bubble-lenses span {
  position: absolute;
  width: clamp(4rem, 9vw, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,244,232,.75);
  background: radial-gradient(circle at 36% 29%, rgba(255,244,232,.62), rgba(142,216,255,.16) 45%, rgba(255,199,214,.08));
  backdrop-filter: blur(2px) saturate(1.4);
  mix-blend-mode: screen;
  animation: bubbleDrift 18s ease-in-out infinite;
}
.bubble-lenses span:nth-child(1) { left: 9vw; top: 24vh; }
.bubble-lenses span:nth-child(2) { left: 63vw; top: 12vh; animation-delay: -5s; }
.bubble-lenses span:nth-child(3) { left: 81vw; top: 66vh; animation-delay: -9s; }
.bubble-lenses span:nth-child(4) { left: 28vw; top: 72vh; animation-delay: -13s; }
.bubble-lenses span:nth-child(5) { left: 46vw; top: 42vh; animation-delay: -16s; }
.shell-dust { position: fixed; left: 0; top: 0; width: .55rem; height: .55rem; border-radius: 50%; background: #E5B84B; box-shadow: 0 0 1.2rem #FFF4E8, .8rem .4rem 0 rgba(255,199,214,.9), -.7rem .65rem 0 rgba(184,242,230,.8); z-index: 10; pointer-events: none; transform: translate(-100px,-100px); opacity: .75; }

@keyframes pearlPulse { 50% { transform: scale(1.06); opacity: .72; } }
@keyframes ribDrift { to { stroke-dashoffset: -52; } }
@keyframes canopyFold { 50% { transform: translateY(.5rem) scaleY(.82); } }
@keyframes flagBreath { 50% { transform: rotate(4deg) scaleX(1.08); } }
@keyframes awningOpen { 50% { transform: scaleY(.76) translateY(-.4rem); } }
@keyframes tagSwing { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes shellHum { 50% { transform: translateY(-.9rem) rotate(-4deg); filter: hue-rotate(18deg); } }
@keyframes lampBlink { 0%, 58%, 100% { opacity: .48; transform: scale(.86); } 20% { opacity: 1; transform: scale(1.1); } }
@keyframes kiteCross { from { transform: translateX(-18vw) rotate(-16deg); } to { transform: translateX(118vw) rotate(22deg); } }
@keyframes orbitRing { to { transform: rotate(360deg); } }
@keyframes bubbleDrift { 50% { transform: translate(3rem, -5rem) scale(1.15); } }

@media (max-width: 820px) {
  .weather-vane { right: .4rem; }
  .weather-vane button { width: 2.7rem; overflow: hidden; color: transparent; }
  .scene { padding: 8vh 6vw; }
  .hero-sign { margin-left: 2vw; }
  .harbor-goods, .echo-shells, .pearl-lamps { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 2rem; }
  .shell-scale { width: 11rem; opacity: .45; }
  .auction-ring { width: 91vw; min-height: 29rem; }
}