/* ========== home.css ==========
   Home page (客廳), shared page chrome for all full-page overlays,
   room scene, wall calendar, door
   ============================== */

/* Shared page chrome — all full-page overlay pages */
#home-page, #room-page, #yingyu-room-page, #calendar-page, #settings-page, #memory-page {
  display: none; position: fixed; inset: 0;
  background: var(--bg); z-index: 200; flex-direction: column;
  overflow: hidden;
}
#home-page.active, #room-page.active, #yingyu-room-page.active, #calendar-page.active, #settings-page.active, #memory-page.active {
  display: flex;
}
/* Combined back buttons and headers for all pages */
#home-header, #room-page-header, #yingyu-room-header, #calendar-page-header, #settings-page-header, #memory-page-header {
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-size: 15px; font-weight: 600;
}
#home-back-btn, #room-back-btn, #yingyu-room-back-btn, #calendar-back-btn, #settings-back-btn, #memory-back-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: none; border: 1px solid var(--border);
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#home-back-btn svg, #room-back-btn svg, #yingyu-room-back-btn svg, #calendar-back-btn svg, #settings-back-btn svg, #memory-back-btn svg {
  width: 16px; height: 16px; stroke: var(--text-muted);
}

/* Shared room scene structure */
#room-scene, #my-room-scene, #yingyu-room-scene {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
#room-wall, #my-room-wall, #yingyu-room-wall {
  flex: 1; background: linear-gradient(180deg, #e8ddd3 0%, #ddd0c4 100%);
  display: flex; align-items: stretch; position: relative;
  padding: 24px 20px 0;
}
#room-baseboard, #my-room-baseboard, #yingyu-room-baseboard {
  height: 10px; background: #c9b8a8; flex-shrink: 0;
}
/* Floor — display:flex so furniture items are positioned on it */
#room-floor, #my-room-floor, #yingyu-room-floor {
  height: 130px; flex-shrink: 0;
  background: repeating-linear-gradient(90deg, #c4a07a 0px, #c4a07a 56px, #b89068 56px, #b89068 58px);
  border-top: 2px solid #a07858;
  display: flex; align-items: flex-end; padding: 0 20px 0; gap: 16px;
}

/* Home lobby scene — specific elements */
#home-header, #room-page-header {
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-size: 15px; font-weight: 600;
}
#home-back-btn, #room-back-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: none; border: 1px solid var(--border);
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#home-back-btn svg, #room-back-btn svg { width: 16px; height: 16px; stroke: var(--text-muted); }

/* Room scene */
#room-scene { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#room-wall {
  flex: 1; background: linear-gradient(180deg, #e8ddd3 0%, #ddd0c4 100%);
  display: flex; align-items: stretch; position: relative;
  padding: 24px 20px 0;
}
#room-wall-left { width: 100px; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0; }
#room-wall-right {
  width: 110px; flex-shrink: 0; display: flex; align-items: flex-end; padding-bottom: 0;
}
#room-baseboard { height: 10px; background: #c9b8a8; flex-shrink: 0; }

/* Window */
#room-window {
  width: 90px; height: 100px; flex-shrink: 0; align-self: flex-start; margin-top: 20px;
  background: #c8d8e8; border: 4px solid #c0b09a; border-radius: 4px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 3px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.1), 2px 2px 6px rgba(0,0,0,0.1);
}
.window-pane { background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(200,220,240,0.7) 100%); border-radius: 2px; }

/* Calendar on wall */
#wall-calendar {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 16px; cursor: pointer;
}
#wall-cal-frame {
  background: #faf6f0; border: 3px solid #b8a090; border-radius: 4px;
  width: 80px; padding: 10px 8px 8px;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  position: relative;
}
#wall-cal-frame::before {
  content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 10px; background: #8b6445; border-radius: 2px 2px 0 0;
}
#wall-cal-month { font-size: 9px; color: #a07858; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
#wall-cal-date { font-size: 28px; font-weight: 700; color: #3d2f27; line-height: 1; }
#wall-cal-label { font-size: 8px; color: #b0a090; margin-top: 2px; }
#wall-calendar:hover #wall-cal-frame { box-shadow: 2px 4px 14px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6); transform: translateY(-1px); }

/* Door */
#room-door {
  width: 90px; cursor: pointer; display: flex; flex-direction: column; align-items: center;
}
#door-inner {
  width: 90px; height: 140px;
  background: linear-gradient(180deg, #a07858 0%, #8b6445 100%);
  border: 3px solid #6b4c2e; border-bottom: none; border-radius: 4px 4px 0 0;
  position: relative;
  box-shadow: inset -3px 0 8px rgba(0,0,0,0.15), 3px 0 8px rgba(0,0,0,0.1);
}
#door-inner::before {
  content: ''; position: absolute; inset: 8px; border: 1px solid #c4a07a; border-radius: 2px; opacity: 0.4;
}
#door-handle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #e8c87a;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
#door-label { font-size: 10px; color: #7a6050; margin-top: 5px; text-align: center; }
#door-lock-badge {
  position: absolute; top: 8px; left: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #c0392b; box-shadow: 0 0 4px rgba(0,0,0,0.3);
  transition: background 0.3s;
}
#door-lock-badge.unlocked { background: #27ae60; }
#room-door:hover #door-inner { filter: brightness(1.05); }
/* 詠諭的房間門 */
#yingyu-door {
  width: 80px; cursor: pointer; display: flex; flex-direction: column; align-items: center;
}
#yingyu-door-inner {
  width: 80px; height: 124px;
  background: linear-gradient(180deg, #a07858 0%, #8b6445 100%);
  border: 3px solid #6b4c2e; border-bottom: none; border-radius: 4px 4px 0 0;
  position: relative;
  box-shadow: inset -3px 0 8px rgba(0,0,0,0.15), 3px 0 8px rgba(0,0,0,0.1);
}
#yingyu-door-inner::before {
  content: ''; position: absolute; inset: 7px; border: 1px solid #c4a07a; border-radius: 2px; opacity: 0.4;
}
#yingyu-door-handle {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #e8c87a;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
#yingyu-door:hover #yingyu-door-inner { filter: brightness(1.05); }
#yingyu-door-label { font-size: 10px; color: #7a6050; margin-top: 5px; text-align: center; }

/* ========== 客廳 Photo Mode ========== */
#home-page.lobby-photo #room-scene {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('/images/lobby.jpg');
  background-size: 100% 100%; background-repeat: no-repeat;
}
#home-page.lobby-photo #room-wall,
#home-page.lobby-photo #room-baseboard,
#home-page.lobby-photo #room-floor { display: none; }

#home-page.lobby-photo #home-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
  color: #fff; border-bottom: none;
}
#home-page.lobby-photo #home-header button svg { stroke: #fff; }
#home-page.lobby-photo #home-header span { color: #fff; }

/* labels */
.lobby-label {
  display: none; position: absolute;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(6px);
  color: #fff; border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px; padding: 4px 8px;
  font-size: 11px; letter-spacing: 1px; cursor: pointer; z-index: 10;
  text-align: center; max-width: 52px; line-height: 1.3;
}
#home-page.lobby-photo .lobby-label { display: block; }

#lobby-label-yingyu  { top: 47%; left: 0%; }
#lobby-label-caelum  { top: 47%; right: 0%; }
#lobby-label-calendar { top: 28%; left: 70%; }

/* bottom bar */
#lobby-photo-bar {
  display: none; position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  gap: 10px; justify-content: center; z-index: 10;
}
#home-page.lobby-photo #lobby-photo-bar { display: flex; }
#lobby-photo-bar button {
  background: rgba(255,255,255,0.18); backdrop-filter: blur(6px);
  color: #fff; border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px; padding: 10px 20px;
  font-size: 14px; font-family: 'Georgia', 'Noto Serif TC', serif;
  letter-spacing: 1px; cursor: pointer;
}
#lobby-photo-bar button:active { background: rgba(255,255,255,0.35); }