/* ============================================================
   RENA'S ROOM — Japandi palette, day & night
   ============================================================ */
:root {
  --wall: #ede6da;
  --wall-deep: #e2d9c9;
  --floor: #c9b08f;
  --floor-line: #b89e7c;
  --wood: #8a6f5a;
  --wood-dark: #6e5744;
  --paper: #f6f1e7;
  --sage: #a8b5a0;
  --moss: #7d8c74;
  --clay: #b08968;
  --charcoal: #3e3a35;
  --ink: #4a443c;
  --gold: #c9a227;
  --blush: #e8d8cf;
  --page: #f3ede2;
  --text: #4a443c;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, "Helvetica Neue", "Segoe UI", sans-serif;
}
body.night {
  --wall: #423c34;
  --wall-deep: #37322b;
  --floor: #59493a;
  --floor-line: #4c3e31;
  --paper: #e9e0cb;
  --page: #2d2a25;
  --text: #e6ddcb;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
  transition: background 1.2s ease, color 1.2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- title ---------- */
#title { text-align: center; padding: 26px 16px 6px; }
#title h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 5.5vw, 44px);
  letter-spacing: .01em;
}
#title h1 span { font-style: italic; }
#title .heart {
  font-style: normal; color: #c77e5e; display: inline-block;
  font-size: .72em; vertical-align: .08em;
  animation: heartbeat 2.8s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 28%, 100% { transform: scale(1); }
  10% { transform: scale(1.18); }
  19% { transform: scale(1.05); }
}
#title p {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: lowercase;
  opacity: .55;
}

/* ---------- room ---------- */
#room-wrap { display: flex; justify-content: center; padding: 8px 10px 24px; }
#room {
  width: min(96vw, 640px);
  height: auto;
  display: block;
}

.wall { fill: var(--wall); transition: fill 1.2s ease; }
.baseboard { fill: var(--wall-deep); transition: fill 1.2s ease; }
.floor { fill: var(--floor); transition: fill 1.2s ease; }
.planks line { stroke: var(--floor-line); stroke-width: 2; transition: stroke 1.2s ease; }

.hotspot { cursor: pointer; outline: none; }
.hotspot:hover, .hotspot:focus-visible { filter: brightness(1.04); }

/* window */
.winframe { fill: var(--wood); }
.winframe-mullion, .winsill { fill: var(--wood-dark); }
.shoji-paper { fill: var(--paper); fill-opacity: .96; transition: fill 1.2s ease; }
.shoji-grid line, .shoji-grid rect { stroke: var(--wood); stroke-width: 3; }
#shoji-left, #shoji-right { transition: transform 1.4s cubic-bezier(.7, 0, .2, 1); }
#room.window-open #shoji-left  { transform: translateX(-132px); }
#room.window-open #shoji-right { transform: translateX(132px); }
#scene-bali { opacity: 0; transition: opacity 1.6s ease .4s; }
#room.window-open #scene-bali { opacity: 1; }
#scene-norway { transition: opacity 1.6s ease .4s; }
#room.window-open #scene-norway { opacity: 0; }
#bali-caption {
  font-family: var(--serif); font-style: italic; font-size: 17px; fill: #faf6ec;
  filter: drop-shadow(0 1px 2px rgba(40, 50, 35, .6));
  opacity: 0; transition: opacity 1.6s ease .4s;
}
#room.window-open #bali-caption { opacity: 1; }
#win-stars { opacity: 0; transition: opacity 1.5s ease; }
#win-night-tint { opacity: 0; transition: opacity 1.5s ease; pointer-events: none; }
body.night #win-stars { opacity: .9; }
body.night #win-night-tint { opacity: .42; }
#plane { transition: opacity .4s ease; }
#room.window-open #plane { opacity: 1; animation: fly 7s ease-in-out .8s forwards; }
@keyframes fly { from { transform: translate(0, 10px); } to { transform: translate(360px, -26px); } }

/* lamp */
.cord { stroke: var(--charcoal); stroke-width: 2.5; }
.lamp-cap { fill: var(--charcoal); }
.lamp-paper { fill: var(--paper); stroke: #d8cdb4; stroke-width: 1.5; transition: fill 1.2s ease; }
.lamp-rib { fill: none; stroke: #d8cdb4; stroke-width: 1.5; }
#lamp-glow { opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
body.night #lamp-glow { opacity: .5; }
body.night .lamp-paper { fill: #f7ead0; }

/* gallery */
.frame { fill: var(--wood-dark); }
.frame-mat { fill: var(--paper); transition: fill 1.2s ease; }

/* sideboard & furniture */
.sideboard { fill: var(--wood); }
.sideboard-top { fill: var(--wood-dark); }
.sideboard-line { stroke: var(--wood-dark); stroke-width: 2.5; }
.sideboard-leg, .table-leg { fill: var(--wood-dark); }
.knob { fill: var(--wood-dark); }
.table-top { fill: var(--wood); }
.crate { fill: var(--wood-dark); }
.plinth { fill: #4a443c; }
.stand { fill: var(--wood-dark); }

/* vinyl spin */
#vinyl-disc { transform-origin: 182px 566px; }
#room.spinning #vinyl-disc { animation: spin 3.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#tonearm { transform-origin: 272px 548px; transition: transform .8s ease; }
#room.spinning #tonearm { transform: rotate(6deg); }

/* tea steam */
.steam-line { stroke: #ded3bd; stroke-width: 4; opacity: 0; }
body.night .steam-line { stroke: #a99d85; }
#room.steaming .steam-line { animation: steam 2.6s ease-out infinite; }
#room.steaming .steam-line.s2 { animation-delay: .5s; }
#room.steaming .steam-line.s3 { animation-delay: 1s; }
@keyframes steam {
  0%   { opacity: 0; transform: translateY(8px); }
  30%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-26px); }
}
.tea-fill { stroke: #9bb08a; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity 1s ease .6s; }
#room.steaming .tea-fill { opacity: 1; }

/* blossoms */
.blossom { opacity: 0; transform: scale(.2); transform-origin: center; transform-box: fill-box; transition: opacity .8s ease, transform .9s cubic-bezier(.2, 1.6, .4, 1); }
.blossom.bloomed { opacity: 1; transform: scale(1); }

/* gamelan keys */
#gamelan-keys rect { cursor: pointer; transform-box: fill-box; transform-origin: center; }
#gamelan-keys rect.struck { animation: strike .35s ease; }
@keyframes strike { 30% { transform: translateY(3px) } }

/* cat */
#cat { transform: translate(-90px, 1052px); }
#cat.strolling { animation: stroll 26s linear forwards; }
@keyframes stroll {
  0%   { transform: translate(-90px, 1052px); }
  48%  { transform: translate(390px, 1052px); }
  55%  { transform: translate(390px, 1052px); }
  100% { transform: translate(900px, 1052px); }
}

/* hint dots */
.hint { fill: var(--gold); opacity: .55; pointer-events: none; animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hint.off { display: none; }
@keyframes pulse { 50% { opacity: .15; transform: scale(1.7); } }

/* ---------- footer ---------- */
#footer { text-align: center; font-size: 12px; opacity: .5; padding: 0 16px 34px; letter-spacing: .04em; }

/* ============================================================
   INTRO — a lit shoji door, tap anywhere to slide it open
   ============================================================ */
#intro { position: fixed; inset: 0; z-index: 60; overflow: hidden; background: #efe8da; cursor: pointer; }
.shoji-panel {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background:
    repeating-linear-gradient(90deg, #c6b190 0 3px, transparent 3px 122px),
    repeating-linear-gradient(0deg, #c6b190 0 3px, transparent 3px 96px),
    linear-gradient(180deg, #f9f4ea, #f2ebdc);
  border: 12px solid #8a6f5a;
  box-shadow: inset 0 0 70px rgba(138, 111, 90, .16);
  transition: transform 1.5s cubic-bezier(.75, 0, .2, 1);
}
.shoji-panel.left  { left: 0;  border-right: 13px solid #6e5744; }
.shoji-panel.right { right: 0; border-left: 13px solid #6e5744; }
.hikite {
  position: absolute; top: 72%; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f2ead8, #d6c5a5 68%);
  box-shadow: inset 0 2px 6px rgba(62, 58, 53, .35), 0 1px 0 rgba(255, 255, 255, .55);
  transform: translateY(-50%);
}
.shoji-panel.left  .hikite { right: 16px; }
.shoji-panel.right .hikite { left: 16px; }
/* lamplight breathing through the paper */
#intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(closest-side at 50% 42%, rgba(233, 196, 121, .4), rgba(233, 196, 121, 0) 72%);
  animation: breathe 7s ease-in-out infinite alternate;
  transition: opacity .6s ease;
}
@keyframes breathe { to { opacity: .5; } }
#intro.opening .shoji-panel.left  { transform: translateX(-102%); }
#intro.opening .shoji-panel.right { transform: translateX(102%); }
#intro.opening .intro-center, #intro.opening::before { opacity: 0; }
.intro-center {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease; pointer-events: none;
}
.intro-card {
  position: relative;
  width: min(86vw, 430px);
  padding: clamp(34px, 7vw, 52px) clamp(26px, 6vw, 48px);
  background: linear-gradient(175deg, #fbf7ee, #f6efe0);
  border: 1px solid rgba(110, 87, 68, .28);
  border-radius: 10px;
  box-shadow: 0 40px 80px -24px rgba(46, 40, 32, .45), 0 6px 18px rgba(46, 40, 32, .12);
  text-align: center;
  animation: card-in 1s cubic-bezier(.2, 1, .35, 1) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(30px) scale(.97); } }
/* hanko seal */
.intro-card::after {
  content: "♥";
  position: absolute; top: -13px; right: 22px;
  width: 30px; height: 30px; line-height: 30px;
  background: #b3502d; color: #f8f3e9; font-size: 14px; text-align: center;
  border-radius: 6px; transform: rotate(7deg);
  box-shadow: 0 6px 14px rgba(179, 80, 45, .4);
}
.intro-kicker, .intro-name, .intro-rule, #enter-btn { animation: fade-up .9s cubic-bezier(.2, 1, .4, 1) both; }
.intro-kicker { animation-delay: .25s; }
.intro-name   { animation-delay: .4s; }
.intro-rule   { animation-delay: .55s; }
#enter-btn    { animation-delay: .7s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
.intro-kicker { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: #a08e6f; }
.intro-name {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(58px, 15vw, 96px); line-height: 1.05; color: #3e3a35;
  margin: 10px 0 2px;
}
.intro-rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: #c77e5e; font-size: 13px; margin: 10px 0 26px;
}
.intro-rule span { display: block; width: 44px; height: 1px; background: rgba(110, 87, 68, .35); }
#enter-btn {
  pointer-events: auto;
  padding: 15px 42px; font-size: 13px; letter-spacing: .26em; text-transform: lowercase;
  background: #3e3a35; border: none; border-radius: 999px;
  color: #f6f1e7; font-family: var(--sans); cursor: pointer;
  transition: background .35s ease, letter-spacing .35s ease, transform .35s ease;
}
#enter-btn:hover { background: #6e5744; letter-spacing: .34em; }
#enter-btn:active { transform: scale(.97); }
.intro-jp {
  position: absolute; right: clamp(10px, 4vw, 46px); top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl; letter-spacing: .34em;
  font-size: 14px; color: rgba(110, 87, 68, .42);
}
@media (max-width: 700px) { .intro-jp { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #intro::before, .intro-card, .intro-kicker, .intro-name, .intro-rule, #enter-btn, #title .heart { animation: none; }
}

/* ============================================================
   OVERLAYS
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(42, 38, 32, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.overlay[hidden] { display: none; }

.card, .sheet-card, .kin-card {
  background: var(--paper); color: #4a443c;
  border-radius: 14px; padding: 30px 28px;
  max-width: 430px; width: 100%;
  box-shadow: 0 24px 70px rgba(30, 25, 18, .4);
  position: relative;
  animation: rise .45s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

.close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 26px; line-height: 1;
  color: #8a7f6d; cursor: pointer; padding: 6px;
}
.kicker { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #a08e6f; margin-bottom: 10px; }
.card h2, .sheet-card h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin-bottom: 12px; }
.card p#lb-body { line-height: 1.65; font-size: 15.5px; white-space: pre-line; }

/* music sheet */
.overlay.sheet { align-items: flex-end; padding: 0; }
.sheet-card { max-width: 560px; border-radius: 18px 18px 0 0; animation: sheetup .5s cubic-bezier(.2, 1.1, .4, 1); max-height: 82vh; overflow-y: auto; }
@keyframes sheetup { from { transform: translateY(60%); } }
#song-list { list-style: none; margin-top: 6px; }
#song-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 6px; border-bottom: 1px solid #e3d9c2;
  cursor: pointer; border-radius: 8px;
}
#song-list li:hover { background: #efe6d1; }
#song-list li.playing { background: #efe6d1; }
#song-list .disc { width: 30px; height: 30px; border-radius: 50%; background: #2e2b28; flex: none; position: relative; }
#song-list .disc::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #c77e5e; }
#song-list li.playing .disc { animation: spin 3s linear infinite; }
#song-list .t { font-size: 15px; font-weight: 600; }
#song-list .a { font-size: 12.5px; opacity: .6; }
#embed-slot { margin-top: 14px; }
#embed-slot iframe { width: 100%; height: 152px; border: 0; border-radius: 12px; }
#embed-slot .no-url { font-size: 13.5px; opacity: .7; padding: 10px 4px; font-style: italic; }

/* terminal */
.term-card {
  width: 100%; max-width: 560px; border-radius: 12px; overflow: hidden;
  background: #23201b; box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  animation: rise .45s cubic-bezier(.2, 1.2, .4, 1);
}
.term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #2e2a24; }
.term-bar span { width: 11px; height: 11px; border-radius: 50%; background: #c77e5e; }
.term-bar span:nth-child(2) { background: #d9b64a; }
.term-bar span:nth-child(3) { background: #a8b5a0; }
.term-bar em { margin-left: 10px; font-style: normal; font-size: 12px; color: #9a8f7c; font-family: ui-monospace, Menlo, monospace; }
#term-out {
  padding: 16px 18px 22px; min-height: 240px; max-height: 60vh; overflow-y: auto;
  font: 12.5px/1.75 ui-monospace, Menlo, "SF Mono", monospace;
  color: #ddd2ba; white-space: pre-wrap; word-break: break-word;
}
#term-out .h { color: #d9b64a; }
#term-out .ref { color: #a8b5a0; }
#term-out .dim { color: #857a66; }
#term-out .cursor { display: inline-block; width: 8px; height: 14px; background: #ddd2ba; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* kintsugi */
.kin-card { max-width: 520px; }
#big-bowl { width: 100%; height: auto; display: block; margin-top: 4px; }
#cracks path { cursor: pointer; }
#cracks .crack-base { stroke: #8b8272; stroke-width: 2.5; fill: none; }
#cracks .crack-gold { stroke: var(--gold); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#cracks .crack-hit { stroke: transparent; stroke-width: 26; fill: none; }
#bowl-glow { transition: opacity 1.6s ease; }
#kin-msgs { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
#kin-msgs .seam-msg {
  font-size: 14px; line-height: 1.5; padding: 9px 14px;
  background: #efe6d1; border-left: 3px solid var(--gold); border-radius: 6px;
  animation: rise .5s ease;
}
#kin-msgs .seam-final { font-family: var(--serif); font-style: italic; font-size: 16px; border-left-color: #3e3a35; }

/* bali mini-player */
#bali-player {
  position: fixed; left: 50%; bottom: 14px; transform: translate(-50%, 120%);
  width: min(92vw, 360px); z-index: 30;
  background: var(--paper); border-radius: 14px; padding: 12px 14px 14px;
  box-shadow: 0 14px 44px rgba(30, 25, 18, .3);
  transition: transform .7s cubic-bezier(.2, 1.1, .4, 1);
}
#bali-player.show { transform: translate(-50%, 0); }
#bali-player p { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #a08e6f; margin-bottom: 8px; }
#bali-player iframe { width: 100%; height: 80px; border: 0; border-radius: 10px; display: block; }

/* confetti */
#confetti { position: fixed; inset: 0; z-index: 55; pointer-events: none; }

@media (max-width: 480px) {
  .card, .sheet-card, .kin-card { padding: 24px 20px; }
  #title { padding-top: 18px; }
}