:root {
  /* Typography notes: Fraunces display, Quicksand body, Noto Serif KR Korean inscriptions, Space Grotesk room-key labels, Inter tiny practical annotations; all use CSS/system or bundled-safe fallbacks with no external asset dependency. Inter available for tiny practical annotations if the implementation needs extra clarity. Use Noto Serif KR for occasional Korean text such as “바다의 집 Space Grotesk only for small room-key labels and tide-coordinate plaques. */
  --deep-tide: #063A52;
  --moon-aqua: #67D3D0;
  --sea-glass: #A7E8D4;
  --plaster: #F4EFE2;
  --shell-coral: #FF8F7A;
  --kelp: #183F35;
  --brass: #D6A84F;
  --ink: #071923;
  --display: Fraunces, Georgia, 'Times New Roman', serif;
  --body: Quicksand, 'Trebuchet MS', Arial, sans-serif;
  --kr: 'Noto Serif KR', Georgia, serif;
  --space: 'Space Grotesk', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; overflow: hidden; }

body {
  background: var(--ink);
  color: var(--ink);
  font-family: var(--body);
}

.tidal-casa {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, var(--deep-tide), var(--ink));
}

.tidal-casa::-webkit-scrollbar { height: 0; }

.water-skin {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 7;
  mix-blend-mode: screen;
  opacity: .42;
}

.caustic-light {
  background:
    radial-gradient(ellipse at 18% 18%, rgba(103,211,208,.45), transparent 28%),
    radial-gradient(ellipse at 62% 26%, rgba(167,232,212,.28), transparent 30%),
    repeating-linear-gradient(112deg, transparent 0 34px, rgba(167,232,212,.16) 35px 39px, transparent 40px 70px);
  animation: causticDrift 9s ease-in-out infinite alternate;
}

.manta-shadow {
  position: fixed;
  width: 34vw;
  height: 18vh;
  top: 8vh;
  left: -38vw;
  z-index: 8;
  opacity: .18;
  background: var(--ink);
  border-radius: 55% 45% 60% 40%;
  clip-path: polygon(0 52%, 18% 26%, 44% 43%, 58% 15%, 74% 44%, 100% 28%, 86% 57%, 100% 84%, 67% 68%, 51% 90%, 34% 68%, 0 82%);
  animation: mantaSwim 24s linear infinite;
}

.sea-room {
  position: relative;
  flex: 0 0 88vw;
  min-width: 88vw;
  height: 100vh;
  padding: 5vh 0 7vh;
  scroll-snap-align: start;
  margin-right: -5vw;
}

.room-shell {
  position: relative;
  height: 100%;
  margin: 0 2vw;
  border: 2px solid rgba(6,58,82,.22);
  border-bottom: 0;
  border-radius: 3rem 3rem 0 0;
  overflow: hidden;
  box-shadow: inset 0 0 70px rgba(103,211,208,.16), 0 30px 70px rgba(7,25,35,.42);
}

.plaster-wall { background: linear-gradient(160deg, var(--plaster) 0 55%, #e7dfce 100%); }
.tiled-wall { background: linear-gradient(180deg, #ecf6ed, var(--plaster)); }
.kitchen-wall { background: linear-gradient(150deg, var(--plaster), #f1dacb 72%, var(--sea-glass)); }
.courtyard-wall { background: radial-gradient(circle at 52% 58%, rgba(103,211,208,.28), transparent 32%), linear-gradient(170deg, var(--plaster), #d8eee6); }
.loft-wall { background: linear-gradient(180deg, #f7f0df, #dbe8dd 72%, rgba(6,58,82,.48)); }
.balcony-wall { background: linear-gradient(90deg, var(--plaster) 0 38%, var(--deep-tide) 38% 100%); }

.room-plaque {
  position: absolute;
  top: 7vh;
  left: 7vw;
  z-index: 5;
  max-width: 32rem;
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(244,239,226,.92), rgba(167,232,212,.38));
  border: 1px solid rgba(214,168,79,.75);
  box-shadow: 0 14px 30px rgba(7,25,35,.16);
}

.room-plaque small {
  display: block;
  font-family: var(--space);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--deep-tide);
  font-size: .74rem;
  margin-bottom: .25rem;
}

.room-plaque h1, .room-plaque h2 {
  margin: 0;
  font-family: var(--display);
  color: var(--deep-tide);
  font-weight: 700;
  line-height: .92;
}

.room-plaque h1 { font-size: clamp(3.2rem, 8vw, 7rem); }
.room-plaque h2 { font-size: clamp(2.1rem, 5vw, 5rem); }
.room-plaque p { margin: .7rem 0 0; font-size: 1.05rem; color: var(--kelp); }
.main-plaque small { font-family: var(--kr); font-size: 1rem; letter-spacing: .08em; }

.arched-threshold {
  position: absolute;
  right: 14vw;
  bottom: 18vh;
  width: min(28vw, 360px);
  height: 58vh;
  border: 12px solid var(--plaster);
  border-bottom-width: 18px;
  border-radius: 48% 48% 1.8rem 1.8rem / 28% 28% 1.8rem 1.8rem;
  background: rgba(6,58,82,.14);
  box-shadow: inset 0 0 0 2px rgba(214,168,79,.35), 0 24px 40px rgba(6,58,82,.24);
}

.sea-glass-pane {
  position: absolute;
  inset: 1rem;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(167,232,212,.7), rgba(103,211,208,.28) 45%, rgba(6,58,82,.7)),
    repeating-linear-gradient(90deg, rgba(244,239,226,.32) 0 2px, transparent 2px 42px);
}

.sea-glass-door::after, .attic-window::after, .small-arch::after {
  content: "";
  position: absolute;
  left: 50%; top: 1rem; bottom: 1rem;
  width: 2px;
  background: rgba(244,239,226,.55);
}

.small-arch { width: 20vw; height: 42vh; right: 8vw; bottom: 23vh; }
.open-arch { right: 8vw; width: 24vw; background: rgba(7,25,35,.24); }
.attic-window { right: 11vw; bottom: 36vh; width: 20vw; height: 34vh; }
.night-pane { background: radial-gradient(circle at 30% 28%, var(--moon-aqua), transparent 10%), linear-gradient(140deg, var(--deep-tide), var(--ink)); }

.shell-handle {
  position: absolute;
  right: 16%;
  top: 52%;
  width: 28px;
  height: 34px;
  background: radial-gradient(circle at 50% 80%, var(--shell-coral), var(--brass));
  border-radius: 50% 50% 45% 45%;
  box-shadow: inset 0 -8px 0 rgba(7,25,35,.12);
}

.shell-handle::before {
  content: "";
  position: absolute;
  inset: 5px 7px 12px;
  border-top: 2px solid rgba(244,239,226,.65);
  border-radius: 50%;
}

.tide-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18vh;
  height: 4px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, var(--moon-aqua), var(--sea-glass), transparent);
  box-shadow: 0 0 20px rgba(103,211,208,.85);
  animation: tideLift 6s ease-in-out infinite alternate;
}

.tide-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 4px;
  height: 23vh;
  background: linear-gradient(180deg, rgba(103,211,208,.24), rgba(6,58,82,.44));
}

.tide-line span {
  position: absolute;
  right: 3vw;
  bottom: .45rem;
  font-family: var(--space);
  color: var(--deep-tide);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.wall-note, .room-poem {
  position: absolute;
  z-index: 5;
  max-width: 23rem;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--kelp);
}

.wall-note { left: 9vw; bottom: 25vh; transform: rotate(-2deg); font-family: var(--kr); }
.room-poem { left: 8vw; bottom: 22vh; }

.floating-object { position: absolute; z-index: 6; animation: floatObject 5s ease-in-out infinite alternate; }
.slipper { width: 70px; height: 26px; background: var(--shell-coral); border-radius: 60% 25% 30% 60%; box-shadow: inset -18px 0 rgba(214,168,79,.28); }
.slipper-a { left: 42vw; bottom: 29vh; }
.slipper-b { left: 48vw; bottom: 23vh; transform: rotate(16deg); animation-delay: -1.5s; }
.shell-cup { width: 58px; height: 54px; left: 48vw; bottom: 31vh; border-radius: 45% 45% 52% 52%; background: var(--plaster); border: 4px solid var(--shell-coral); }
.brass-spoon { width: 16px; height: 96px; left: 55vw; bottom: 26vh; background: var(--brass); border-radius: 40%; transform: rotate(28deg); }

.tile-grid {
  position: absolute;
  inset: 23vh 34vw 16vh 6vw;
  border-radius: 2rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(6,58,82,.16) 45px 48px),
    repeating-linear-gradient(90deg, rgba(167,232,212,.56) 0 44px, rgba(6,58,82,.16) 45px 48px),
    var(--plaster);
  box-shadow: inset 0 0 44px rgba(103,211,208,.35);
}

.tile-inscription,
.tide-coordinate {
  position: absolute;
  z-index: 6;
  color: var(--deep-tide);
  background: rgba(244,239,226,.62);
  border: 1px solid rgba(214,168,79,.5);
  box-shadow: 0 12px 28px rgba(7,25,35,.12);
}

.tile-inscription {
  left: 18vw;
  top: 26vh;
  padding: .7rem 1rem;
  border-radius: .9rem .9rem 1.3rem .9rem;
  font-family: var(--kr);
  font-size: clamp(1rem, 1.5vw, 1.45rem);
  letter-spacing: .05em;
  transform: rotate(-2deg);
}

.tide-coordinate {
  left: 8vw;
  top: 28vh;
  padding: .55rem .7rem;
  border-radius: 999px;
  font-family: var(--space);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.courtyard-script { left: 12vw; top: 33vh; transform: rotate(3deg); }
.loft-coordinate { left: 54vw; top: 24vh; }

.kelp-curtain, .garland { position: absolute; z-index: 5; display: flex; gap: .7rem; }
.kelp-curtain { top: 14vh; left: 6vw; height: 52vh; }
.kelp-curtain i, .garland i {
  display: block;
  width: 18px;
  height: 100%;
  background: linear-gradient(var(--kelp), var(--sea-glass));
  border-radius: 80% 30% 80% 30%;
  transform-origin: top;
  animation: kelpSway 4s ease-in-out infinite alternate;
}
.kelp-curtain i:nth-child(2), .garland i:nth-child(2) { animation-delay: -.8s; height: 88%; }
.kelp-curtain i:nth-child(3), .garland i:nth-child(3) { animation-delay: -1.4s; height: 95%; }
.kelp-curtain i:nth-child(4), .garland i:nth-child(4) { animation-delay: -2s; height: 82%; }

.bubble-trail { position: absolute; right: 32vw; bottom: 22vh; width: 12vw; height: 40vh; }
.bubble-trail b {
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--moon-aqua);
  border-radius: 50%;
  animation: bubbleRise 5s ease-in infinite;
}
.bubble-trail b:nth-child(2) { left: 25%; animation-delay: -1s; }
.bubble-trail b:nth-child(3) { left: 50%; animation-delay: -2.2s; }
.bubble-trail b:nth-child(4) { left: 70%; animation-delay: -3.1s; }
.bubble-trail b:nth-child(5) { left: 88%; animation-delay: -4s; }

.cabinet {
  position: absolute;
  right: 12vw;
  bottom: 18vh;
  width: 28vw;
  height: 50vh;
  background: linear-gradient(180deg, rgba(214,168,79,.24), rgba(244,239,226,.64));
  border: 8px solid var(--plaster);
  border-radius: 48% 48% 2rem 2rem / 32% 32% 2rem 2rem;
  box-shadow: inset 0 0 0 2px var(--brass);
}

.pearl-lamp {
  position: absolute;
  left: 42%; top: 18%;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--sea-glass));
  box-shadow: 0 0 34px var(--moon-aqua);
}

.garland { top: 24vh; left: 9vw; width: 32vw; height: 16vh; align-items: flex-start; transform: rotate(-3deg); }
.garland i { height: 90px; width: 13px; }

.moon-pool {
  position: absolute;
  left: 22vw;
  bottom: 13vh;
  width: min(38vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,239,226,.92) 0 15%, var(--moon-aqua) 16% 35%, var(--deep-tide) 36% 62%, var(--ink));
  box-shadow: inset 0 0 60px rgba(244,239,226,.45), 0 0 70px rgba(103,211,208,.45);
}
.moon-pool span { position: absolute; inset: 18%; border: 2px solid rgba(244,239,226,.5); border-radius: 50%; animation: ripple 4s ease-out infinite; }
.moon-pool span:nth-child(2) { animation-delay: -1.3s; }
.moon-pool span:nth-child(3) { animation-delay: -2.6s; }

.loft-bed {
  position: absolute;
  left: 16vw;
  bottom: 18vh;
  width: 46vw;
  height: 26vh;
  background: linear-gradient(180deg, #fff7e7, var(--plaster));
  border: 8px solid rgba(214,168,79,.45);
  border-radius: 2.4rem 2.4rem .8rem .8rem;
  box-shadow: 0 22px 40px rgba(7,25,35,.18);
}
.blanket-wave { position: absolute; inset: 42% 0 0; background: repeating-radial-gradient(ellipse at 20% 0, var(--moon-aqua) 0 10px, var(--sea-glass) 11px 22px); border-radius: 60% 60% .6rem .6rem; }
.lamp-two { left: auto; right: 10%; top: -34px; }
.loft-bubbles { right: 12vw; }

.balcony-rail { position: absolute; left: 8vw; bottom: 18vh; width: 38vw; height: 30vh; border-top: 8px solid var(--brass); display: flex; justify-content: space-around; }
.balcony-rail i { width: 7px; height: 100%; background: var(--brass); border-radius: 1rem; }
.deep-window { position: absolute; right: 0; top: 0; bottom: 0; width: 62%; background: radial-gradient(circle at 42% 30%, rgba(103,211,208,.25), transparent 20%), linear-gradient(180deg, var(--deep-tide), var(--ink)); overflow: hidden; }
.final-plaque { left: 7vw; }

.fish-shadow {
  position: absolute;
  width: 72px;
  height: 24px;
  background: rgba(7,25,35,.48);
  border-radius: 50%;
  clip-path: polygon(0 50%, 25% 15%, 72% 18%, 100% 0, 88% 50%, 100% 100%, 72% 82%, 25% 85%);
  animation: fishPass 9s linear infinite;
}
.fish-one { top: 35%; left: -30%; }
.fish-two { top: 58%; left: -50%; animation-delay: -4s; transform: scale(.65); }
.fish-three { top: 45%; left: -40%; animation-delay: -2s; }
.fish-four { top: 62%; left: -30%; animation-delay: -5s; }
.fish-five { top: 28%; left: -40%; animation-delay: -1.2s; }
.fish-six { top: 30%; left: -12%; animation-duration: 12s; background: rgba(167,232,212,.42); }
.fish-seven { top: 66%; left: -22%; animation-delay: -6s; animation-duration: 14s; background: rgba(103,211,208,.35); transform: scale(1.4); }

.room-keys {
  position: fixed;
  left: 50%;
  bottom: 2.5vh;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: .55rem;
  padding: .55rem;
  border-radius: 999px;
  background: rgba(7,25,35,.58);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(167,232,212,.24);
}
.shell-key {
  border: 0;
  cursor: pointer;
  color: var(--plaster);
  background: rgba(244,239,226,.12);
  border-radius: 999px;
  padding: .55rem .8rem;
  font-family: var(--body);
  font-size: .78rem;
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
.shell-key span { font-family: var(--space); color: var(--brass); margin-right: .22rem; }
.shell-key.active { background: var(--plaster); color: var(--deep-tide); transform: translateY(-4px); }

@keyframes causticDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1%, 0) scale(1.04); } }
@keyframes mantaSwim { to { transform: translateX(150vw) translateY(10vh) rotate(5deg); } }
@keyframes tideLift { from { transform: translateY(8px); } to { transform: translateY(-22px); } }
@keyframes floatObject { from { translate: 0 0; rotate: -4deg; } to { translate: 0 -26px; rotate: 7deg; } }
@keyframes kelpSway { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
@keyframes bubbleRise { from { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: .9; } to { transform: translateY(-38vh) scale(1.25); opacity: 0; } }
@keyframes ripple { from { transform: scale(.35); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
@keyframes fishPass { from { transform: translateX(0); } to { transform: translateX(34vw); } }

@media (max-width: 760px) {
  .sea-room { flex-basis: 96vw; min-width: 96vw; margin-right: -2vw; }
  .room-plaque { left: 6vw; right: 6vw; top: 6vh; }
  .arched-threshold, .cabinet, .moon-pool, .loft-bed { left: 12vw; right: auto; width: 72vw; }
  .room-keys { max-width: 94vw; overflow-x: auto; justify-content: flex-start; }
  .shell-key { white-space: nowrap; }
  .room-poem, .wall-note { left: 8vw; right: 8vw; bottom: 24vh; }
}