:root {
  --ink: #182436;
  --muted: #607086;
  --paper: #f7f5f0;
  --surface: #fffdf9;
  --line: #e5e0d8;
  --accent: #c55348;
  --accent-dark: #963c35;
  --accent-soft: #fae7e3;
  --gold: #bd8b39;
  --green: #3c7a67;
  --navy: #253b59;
  --shadow: 0 8px 24px rgba(28, 39, 57, .08);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); }
body { line-height: 1.6; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(197, 83, 72, .35); outline-offset: 2px; }
.app-shell { min-height: 100vh; max-width: 680px; margin: 0 auto; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: rgba(255, 253, 249, .94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); }
.brand-mark { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: .04em; }
.brand-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--navy); color: #f9d79b; font-size: 17px; }
.top-actions { display: flex; gap: 8px; }
.icon-btn, .nav-item, .action-btn, .room-btn, .shop-buy, .equip-btn, .secondary-btn { min-height: 44px; border: 0; }
.icon-btn { width: 44px; border-radius: 12px; background: transparent; color: var(--muted); font-size: 21px; }
.icon-btn:hover { background: #f0ede7; }
.main-content { padding: 18px 16px 12px; }
.view { animation: appear .22s ease both; }
.is-hidden { display: none !important; }
@keyframes appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.status-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.stat { padding: 10px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.stat-label { color: var(--muted); font-size: 12px; display: block; }
.stat-value { display: block; font-weight: 800; font-size: 18px; margin-top: 1px; white-space: nowrap; }
.xp-track, .mood-track { background: #ebe7df; height: 8px; border-radius: 99px; overflow: hidden; }
.xp-fill { height: 100%; background: var(--accent); border-radius: inherit; transition: width .25s ease; }
.mood-fill { height: 100%; background: var(--green); border-radius: inherit; transition: width .25s ease; }
.goal-card { border: 1px solid #d6e4dc; background: #f2f8f4; border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.goal-icon { font-size: 20px; }
.goal-card p { margin: 0; font-size: 14px; color: #285645; }
.goal-card strong { color: var(--ink); }
.room-scene { border-radius: 24px; min-height: 370px; position: relative; overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(24, 36, 54, .12); display: flex; flex-direction: column; justify-content: flex-end; }
.room-scene.lab { background: linear-gradient(180deg, #dbe8ee 0 56%, #c79e76 56% 100%); }
.room-scene.bed { background: linear-gradient(180deg, #eadff0 0 58%, #b88991 58% 100%); }
.room-scene.bath { background: linear-gradient(180deg, #d9f0ed 0 60%, #91c8c4 60% 100%); }
.scene-decor { position: absolute; inset: 0; pointer-events: none; font-size: 31px; }
.scene-decor span { position: absolute; opacity: .72; }
.lab .scene-decor span:nth-child(1) { left: 20px; top: 34px; } .lab .scene-decor span:nth-child(2) { right: 24px; top: 50px; } .lab .scene-decor span:nth-child(3) { right: 30px; bottom: 52px; }
.lab .scene-decor span:nth-child(4) { left: 44%; top: 70px; }
.bed .scene-decor span:nth-child(1) { left: 24px; top: 40px; } .bed .scene-decor span:nth-child(2) { right: 22px; top: 30px; } .bed .scene-decor span:nth-child(3) { left: 28px; bottom: 48px; }
.bed .scene-decor span:nth-child(4) { right: 42%; bottom: 62px; }
.bath .scene-decor span:nth-child(1) { left: 22px; top: 34px; } .bath .scene-decor span:nth-child(2) { right: 27px; top: 62px; } .bath .scene-decor span:nth-child(3) { right: 38px; bottom: 48px; }
.bath .scene-decor span:nth-child(4) { left: 43%; bottom: 58px; }
.scene-label { position: absolute; top: 13px; left: 14px; padding: 4px 10px; border-radius: 99px; background: rgba(255,253,249,.82); color: var(--ink); font-size: 13px; font-weight: 700; }
.mira-wrap { margin: auto auto 42px; text-align: center; position: relative; z-index: 1; }
.mira-wrap::before { content: '研究助手'; position: absolute; z-index: 2; left: 50%; top: -10px; transform: translateX(-50%); border-radius: 99px; padding: 2px 8px; background: rgba(255,253,249,.88); color: var(--navy); font-size: 11px; font-weight: 800; white-space: nowrap; }
.mira-wrap.outfit-casual::before { content: '休日モード'; background: #f6e1b8; color: #72501e; }
.mira-wrap.outfit-pajamas::before { content: 'おやすみ'; background: #e0d9f4; color: #4c3b78; }
.mira-sprite { width: 176px; height: 220px; margin: 0 auto; background-image: url('assets/mira-sprites.png'); background-size: 200% 200%; background-position: 0 0; background-repeat: no-repeat; image-rendering: auto; filter: drop-shadow(0 12px 10px rgba(40, 30, 35, .2)); transition: transform .22s ease, filter .22s ease; }
.mira-sprite[style*="--outfit-image"] { background-image: var(--outfit-image); background-size: 200% 200%; background-position: 0 0; background-repeat: no-repeat; }
.mira-sprite.pose-happy { background-position: 100% 0; transform: translateY(-4px) scale(1.03); }
.mira-sprite.pose-soft { background-position: 0 100%; }
.mira-sprite.pose-sleep { background-position: 100% 100%; filter: drop-shadow(0 8px 8px rgba(40, 30, 35, .15)); }
.mira-wrap.outfit-casual .mira-sprite { filter: drop-shadow(0 12px 10px rgba(40,30,35,.2)); }
.mira-wrap.outfit-pajamas .mira-sprite { filter: drop-shadow(0 12px 10px rgba(40,30,35,.2)); }
.mira-sprite.is-petted { animation: pet .35s ease; }
@keyframes pet { 30% { transform: rotate(-3deg) translateY(-6px); } 70% { transform: rotate(3deg) translateY(-4px); } }
.mira-name { font-weight: 800; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.35); }
.speech { position: relative; z-index: 9; margin: 11px 12px 14px; background: rgba(255,253,249,.97); border: 1px solid rgba(24, 36, 54, .13); border-radius: 15px; padding: 10px 13px; color: var(--ink); font-size: 14px; line-height: 1.55; min-height: 54px; display: flex; align-items: center; box-shadow: 0 4px 14px rgba(28,39,57,.1); }
.speech::after { content: ''; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; background: inherit; border-left: 1px solid rgba(24,36,54,.13); border-top: 1px solid rgba(24,36,54,.13); transform: translateX(-50%) rotate(45deg); }
.room-switcher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.room-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; color: var(--muted); font-weight: 700; }
.room-btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 18px; }
.action-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.action-btn span { font-size: 22px; line-height: 1.2; }
.action-btn.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.action-btn:active, .room-btn:active, .shop-buy:active, .equip-btn:active { transform: translateY(1px); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 20px 0 10px; }
.section-head h2 { margin: 0; font-size: 18px; letter-spacing: .02em; }
.section-head p { margin: 0; color: var(--muted); font-size: 13px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 3px 12px rgba(28,39,57,.04); }
.panel + .panel { margin-top: 12px; }
.room-chip { font-size: 12px; color: var(--muted); }
.title-xl { margin: 0; font-size: 25px; letter-spacing: .01em; }
.subtle { color: var(--muted); font-size: 14px; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.primary-btn, .secondary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 800; border: 1px solid transparent; }
.primary-btn { background: var(--accent); color: #fff; }
.primary-btn:hover { background: var(--accent-dark); }
.secondary-btn { background: var(--surface); border-color: var(--line); color: var(--ink); }
.timer-clock { text-align: center; font-variant-numeric: tabular-nums; font-size: 52px; line-height: 1.15; font-weight: 800; color: var(--navy); margin: 10px 0; letter-spacing: .03em; }
.timer-status { text-align: center; margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.timer-bar { height: 10px; background: #e9e9e2; border-radius: 99px; overflow: hidden; margin: 14px 0 18px; }
.timer-bar span { display: block; height: 100%; background: var(--green); border-radius: inherit; transition: width .3s ease; }
.shop-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 8px 0; scroll-padding-inline: 12px; scrollbar-width: thin; scrollbar-color: #c9c2b7 transparent; position: relative; }
.tab-btn { min-height: 44px; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 0 14px; color: var(--muted); }
.tab-btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.shop-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 12px; display: flex; flex-direction: column; min-height: 190px; }
.item-emoji { font-size: 33px; height: 50px; display: grid; place-items: center; background: #f7f1e9; border-radius: 12px; margin-bottom: 8px; }
.shop-card h3 { font-size: 15px; margin: 0; }
.shop-card p { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 3px 0 10px; }
.shop-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.price { font-weight: 800; font-size: 14px; white-space: nowrap; }
.shop-buy, .equip-btn { min-height: 40px; border-radius: 10px; padding: 0 10px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }
.shop-buy:disabled { background: #e5e0d8; border-color: #e5e0d8; color: #7c7c76; cursor: not-allowed; }
.equip-btn { background: transparent; color: var(--accent-dark); }
.equip-btn.is-equipped { background: #f7e4cf; border-color: #d6af70; color: #704e19; }
.collection-list { display: grid; gap: 10px; }
.history-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.history-row:last-child { border-bottom: 0; }
.history-row span { color: var(--muted); text-align: right; }
.collection-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; background: var(--surface); }
.collection-item .item-emoji { width: 48px; height: 48px; margin: 0; flex: 0 0 48px; font-size: 25px; }
.collection-copy { min-width: 0; flex: 1; } .collection-copy h3 { font-size: 14px; margin: 0; } .collection-copy p { margin: 1px 0 0; color: var(--muted); font-size: 12px; }
.achievement { display: flex; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .achievement:last-child { border-bottom: 0; padding-bottom: 0; } .achievement:first-child { padding-top: 0; }
.achievement-icon { width: 40px; height: 40px; border-radius: 12px; background: #f0ece4; display: grid; place-items: center; font-size: 20px; } .achievement.is-done .achievement-icon { background: #f8e3b9; }
.achievement-copy { flex: 1; } .achievement-copy strong { display: block; font-size: 14px; } .achievement-copy small { color: var(--muted); font-size: 12px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 55px; border-bottom: 1px solid var(--line); } .setting-row:last-child { border-bottom: 0; }
.setting-row strong { font-size: 14px; display: block; } .setting-row small { color: var(--muted); font-size: 12px; }
.toggle { position: relative; width: 52px; height: 30px; border: 0; border-radius: 99px; background: #c8c4bd; padding: 3px; } .toggle::after { content: ''; display: block; width: 24px; height: 24px; background: #fff; border-radius: 50%; transition: transform .2s ease; } .toggle[aria-pressed=true] { background: var(--green); } .toggle[aria-pressed=true]::after { transform: translateX(22px); }
.empty { text-align: center; color: var(--muted); padding: 20px 6px; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 15px; font-size: 14px; max-width: calc(100vw - 36px); text-align: center; transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-celebration { background: var(--accent-dark); box-shadow: 0 8px 22px rgba(150,60,53,.24); }
.mira-sprite.is-celebrating { animation: celebrate .55s ease; }
@keyframes celebrate { 0% { transform: scale(1); } 35% { transform: scale(1.08) rotate(-3deg); } 70% { transform: scale(1.04) rotate(3deg); } 100% { transform: scale(1); } }
.bottom-nav { position: fixed; z-index: 20; bottom: 0; left: 50%; transform: translateX(-50%); width: min(680px, 100%); padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,253,249,.97); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
.nav-item { border: 0; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px; }
.nav-item span { font-size: 21px; line-height: 1.1; } .nav-item small { font-size: 11px; font-weight: 700; } .nav-item.is-active { color: var(--accent-dark); background: var(--accent-soft); }
.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: end center; background: rgba(24, 36, 54, .42); padding: 12px; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 24px); overflow: auto; background: var(--surface); border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(24,36,54,.2); padding: 18px; animation: sheet .22s ease both; }
@keyframes sheet { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .modal h2 { margin: 0; font-size: 20px; } .modal-close { width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 22px; border-radius: 10px; }
.form-label { display: block; margin: 12px 0 5px; font-weight: 700; font-size: 14px; } .text-input, .select-input { width: 100%; min-height: 46px; border: 1px solid #cfc9bf; background: #fff; border-radius: 10px; padding: 0 12px; color: var(--ink); } .text-area { padding-top: 10px; min-height: 90px; resize: vertical; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
@media (min-width: 700px) { .main-content { padding: 24px 20px 30px; } .room-scene { min-height: 430px; } .action-grid { gap: 12px; } .shop-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 360px) { .main-content { padding-inline: 12px; } .mira-sprite { width: 150px; height: 190px; } .room-scene { min-height: 340px; } .action-btn { font-size: 11px; } }

/* Luna room scenes: layered CSS illustration, tuned for a 390px phone. */
.scene-panel { padding: 0; overflow: hidden; }
.room-scene { min-height: 410px; isolation: isolate; background: #0e1d32; animation: room-enter .56s cubic-bezier(.22,.8,.25,1) both; }
.room-scene.lab { background: linear-gradient(180deg, #0b2038 0 60%, #172b42 60% 100%); }
.room-scene.bed { background: linear-gradient(180deg, #171b3c 0 62%, #2b294e 62% 100%); }
.room-scene.bath { background: linear-gradient(180deg, #12333e 0 63%, #1d5860 63% 100%); }
.room-architecture { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.room-architecture::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(4,12,25,.28)); }
.scene-label { z-index: 8; background: rgba(8,19,35,.74); color: #f4f7ff; border: 1px solid rgba(148,210,219,.25); box-shadow: 0 5px 14px rgba(0,0,0,.16); }
.scene-decor { z-index: 6; }
.scene-decor span { opacity: .95; filter: drop-shadow(0 5px 4px rgba(0,0,0,.24)); animation: decor-drift 5.7s ease-in-out infinite; }
.scene-decor span:nth-child(2) { animation-delay: -1.7s; }
.scene-decor span:nth-child(3) { animation-delay: -3.1s; }
.scene-decor span:nth-child(4) { animation-delay: -4.4s; }
.mira-wrap { z-index: 5; animation: mira-hover 6.4s ease-in-out infinite; }
.mira-sprite { animation: mira-breathe 4.1s ease-in-out infinite; }
.mira-name { color: #fff; }
.speech { z-index: 9; background: rgba(252,252,248,.96); }
.scene-reactions { position: absolute; inset: 50px 0 78px; z-index: 12; pointer-events: none; overflow: hidden; }
.scene-reaction { position: absolute; left: 50%; top: 48%; display: block; color: #f6d38d; font-size: 22px; font-weight: 900; text-shadow: 0 3px 8px rgba(0,0,0,.28); animation: reaction-rise 1.05s ease-out both; }
.reaction-1 { margin-left: -56px; animation-delay: .02s; }
.reaction-2 { margin-left: 18px; animation-delay: .14s; font-size: 16px; }
.reaction-3 { margin-left: 64px; animation-delay: .28s; font-size: 14px; }
.reaction-bath { color: #b7f5ed; }
.reaction-sleep { color: #e9d5ff; font-style: italic; }
.reaction-snack { color: #f7c986; }
.reaction-work { color: #91e5da; }

/* research lab */
.lab-window, .bed-window { position: absolute; top: 42px; left: 50%; width: 150px; height: 122px; transform: translateX(-50%); border: 8px solid #273a58; border-radius: 14px; box-shadow: 0 9px 0 rgba(4,13,27,.28), inset 0 0 0 2px rgba(167,218,222,.38); overflow: hidden; }
.lab-sky, .bed-sky { position: absolute; inset: 0; background: linear-gradient(155deg, #173c60, #0a192f 72%); }
.lab-sky::after, .bed-sky::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -8px; height: 35px; background: #0a1426; border-radius: 50% 50% 0 0; box-shadow: 25px -12px 0 #0e2138, 92px -5px 0 #102a43; }
.window-frame { position: absolute; background: rgba(151,211,215,.4); z-index: 2; }
.window-frame.frame-v { top: 0; bottom: 0; left: 50%; width: 4px; transform: translateX(-50%); }
.window-frame.frame-h { left: 0; right: 0; top: 55%; height: 4px; }
.sky-orb { position: absolute; width: 28px; height: 28px; top: 16px; right: 18px; border-radius: 50%; background: #f7c980; box-shadow: 0 0 18px rgba(247,201,128,.85); }
.sky-star, .bed-star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #d7f8f0; box-shadow: 0 0 8px #c4fff0; }
.sky-star.star-a { top: 28px; left: 26px; } .sky-star.star-b { top: 65px; left: 93px; }
.lab-shelf { position: absolute; top: 38px; right: 11px; width: 62px; height: 110px; border-left: 5px solid #4b6980; border-right: 5px solid #4b6980; background: rgba(19,35,53,.65); box-shadow: 4px 7px 0 rgba(0,0,0,.22); }
.lab-shelf::before, .lab-shelf::after { content: ''; position: absolute; left: -7px; width: 66px; height: 7px; border-radius: 3px; background: #64859a; box-shadow: 0 3px 0 rgba(0,0,0,.24); }
.lab-shelf::before { top: 34px; } .lab-shelf::after { top: 75px; }
.shelf-book { position: absolute; z-index: 1; width: 15px; height: 24px; left: 7px; top: 9px; border-radius: 2px; background: #c97580; transform: rotate(-4deg); }
.shelf-book.book-b { left: 26px; top: 5px; height: 28px; background: #75b7af; transform: rotate(4deg); }
.shelf-jar { position: absolute; z-index: 1; left: 9px; top: 48px; width: 13px; height: 20px; border-radius: 3px 3px 5px 5px; background: #8de2d0; box-shadow: inset 3px 0 0 rgba(255,255,255,.35); }
.shelf-jar.jar-b { left: 33px; top: 49px; background: #d6a3dc; }
.lab-desk { position: absolute; left: 0; right: 0; bottom: 42px; height: 84px; }
.desk-top { position: absolute; left: 20px; right: 20px; top: 18px; height: 14px; border-radius: 5px; background: linear-gradient(#8e6a5f,#644a4a); box-shadow: 0 6px 0 rgba(0,0,0,.24); }
.desk-leg { position: absolute; top: 31px; width: 9px; height: 54px; border-radius: 0 0 4px 4px; background: #4c3940; } .desk-leg.leg-a { left: 35px; } .desk-leg.leg-b { right: 35px; }
.desk-drawer { position: absolute; right: 44px; top: 36px; width: 43px; height: 28px; border-radius: 3px; background: #715355; box-shadow: inset 0 2px 0 rgba(255,255,255,.12); }
.lab-lamp { position: absolute; top: -3px; left: 55px; width: 48px; height: 48px; transform: rotate(-10deg); }
.lab-lamp::before { content: ''; position: absolute; left: 22px; top: 9px; width: 5px; height: 28px; border-radius: 5px; background: #b8cbd0; }
.lab-lamp i { position: absolute; top: 0; left: 7px; width: 34px; height: 18px; border-radius: 18px 18px 5px 5px; background: #e7ad65; box-shadow: 0 0 22px rgba(245,179,91,.65); }
.lab-lamp b { position: absolute; left: 20px; bottom: 0; width: 20px; height: 5px; border-radius: 5px; background: #b8cbd0; }
.lab-tools { position: absolute; top: 3px; left: 128px; display: flex; align-items: end; gap: 6px; }
.lab-flask { width: 18px; height: 28px; border-radius: 4px 4px 9px 9px; border: 2px solid #a3e2d4; background: linear-gradient(transparent 35%, #49b89d 36%); box-shadow: inset 3px 0 rgba(255,255,255,.28); }
.lab-flask::before { content: ''; display: block; width: 7px; height: 9px; margin: -9px auto 0; border: 2px solid #a3e2d4; border-bottom: 0; border-radius: 4px 4px 0 0; }
.lab-flask.flask-b { height: 22px; background: linear-gradient(transparent 35%, #cf7aaf 36%); }
.lab-test-tube { width: 7px; height: 27px; border: 2px solid #8de2d0; border-top-width: 3px; border-radius: 0 0 5px 5px; background: linear-gradient(transparent 42%, #e1b25f 43%); transform: rotate(8deg); }
.lab-test-tube.tube-b { height: 21px; background: linear-gradient(transparent 35%, #7097e0 36%); transform: rotate(-8deg); }
.lab-rug { position: absolute; left: 23px; right: 23px; bottom: 17px; height: 38px; border-radius: 50%; background: #315168; box-shadow: inset 0 0 0 5px rgba(117,185,185,.18), 0 8px 0 rgba(0,0,0,.18); }
.lab-particle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #83dfca; box-shadow: 0 0 9px #83dfca; animation: particle-float 4.6s ease-in-out infinite; }
.lab-particle.particle-a { left: 23%; top: 32%; } .lab-particle.particle-b { left: 71%; top: 28%; animation-delay: -1.4s; } .lab-particle.particle-c { left: 61%; top: 49%; animation-delay: -2.7s; }

/* bedroom */
.bed-window { top: 35px; width: 168px; height: 128px; border-color: #333960; }
.bed-sky { background: linear-gradient(155deg, #363b70, #10142f 74%); }
.bed-sky::after { box-shadow: 18px -10px 0 #1c2145, 105px -8px 0 #252b54; }
.moon { position: absolute; right: 19px; top: 15px; width: 37px; height: 37px; border-radius: 50%; background: #ffe0a6; box-shadow: 0 0 20px rgba(255,224,166,.72); }
.moon::after { content: ''; position: absolute; right: -6px; top: -4px; width: 33px; height: 33px; border-radius: 50%; background: #2a2f5b; }
.bed-star.star-a { left: 23px; top: 21px; } .bed-star.star-b { left: 78px; top: 35px; } .bed-star.star-c { left: 126px; top: 74px; }
.bed-wall-light { position: absolute; left: 11px; top: 55px; width: 34px; height: 64px; border-radius: 50%; background: rgba(210,176,238,.12); filter: blur(8px); }
.bed-headboard { position: absolute; left: 31px; right: 31px; bottom: 104px; height: 70px; border-radius: 18px 18px 5px 5px; background: #5d4b69; box-shadow: inset 0 8px 0 rgba(255,255,255,.08), 0 8px 0 rgba(0,0,0,.2); }
.bed-frame { position: absolute; left: 18px; right: 18px; bottom: 49px; height: 104px; border-radius: 15px 15px 7px 7px; background: #a56e72; box-shadow: 0 8px 0 rgba(0,0,0,.25); }
.bed-blanket { position: absolute; inset: 14px 8px 9px 48px; border-radius: 12px 12px 9px 7px; background: linear-gradient(145deg, #8db2c5, #557999 68%); box-shadow: inset 0 5px 0 rgba(255,255,255,.17); }
.blanket-fold { position: absolute; width: 74px; height: 13px; top: 22px; right: 11px; border-bottom: 2px solid rgba(225,242,241,.34); border-radius: 50%; transform: rotate(-7deg); }
.bed-pillow { position: absolute; left: 12px; top: 17px; width: 54px; height: 38px; border-radius: 13px; background: #e4d8e3; box-shadow: inset 0 5px 0 rgba(255,255,255,.3); transform: rotate(-4deg); }
.bed-pillow i { position: absolute; left: 8px; right: 8px; bottom: 8px; border-bottom: 2px solid rgba(117,84,122,.22); border-radius: 50%; }
.bed-leg { position: absolute; bottom: -8px; width: 8px; height: 18px; border-radius: 0 0 4px 4px; background: #594155; } .bed-leg.leg-a { left: 17px; } .bed-leg.leg-b { right: 17px; }
.bedside-table { position: absolute; right: 14px; bottom: 76px; width: 57px; height: 82px; }
.table-top { position: absolute; top: 13px; left: 0; width: 57px; height: 11px; border-radius: 4px; background: #8f616b; box-shadow: 0 4px 0 rgba(0,0,0,.23); }
.table-leg { position: absolute; top: 23px; width: 6px; height: 55px; background: #5b4352; } .table-leg.leg-a { left: 8px; } .table-leg.leg-b { right: 8px; }
.bed-lamp { position: absolute; z-index: 2; left: 17px; top: -16px; width: 35px; height: 40px; }
.bed-lamp::before { content: ''; position: absolute; left: 16px; top: 16px; width: 4px; height: 23px; background: #d1b7a6; }
.bed-lamp i { position: absolute; left: 2px; top: 0; width: 32px; height: 20px; border-radius: 18px 18px 5px 5px; background: #f0b985; box-shadow: 0 0 22px rgba(244,182,126,.72); }
.bed-lamp b { position: absolute; bottom: 0; left: 9px; width: 18px; height: 4px; border-radius: 4px; background: #d1b7a6; }
.bed-rug { position: absolute; left: 16px; right: 16px; bottom: 15px; height: 42px; border-radius: 50%; background: #45466f; box-shadow: inset 0 0 0 5px rgba(186,165,212,.16), 0 7px 0 rgba(0,0,0,.2); }
.bed-glow { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffd892; box-shadow: 0 0 15px 4px rgba(255,216,146,.7); animation: bed-glow 3.8s ease-in-out infinite; } .bed-glow.glow-a { left: 21%; top: 26%; } .bed-glow.glow-b { left: 73%; top: 19%; animation-delay: -1.7s; }

/* bath */
.bath-tiles { position: absolute; inset: 0; background-color: #153b48; background-image: linear-gradient(90deg, rgba(150,225,220,.13) 1px, transparent 1px), linear-gradient(rgba(150,225,220,.13) 1px, transparent 1px); background-size: 45px 36px; }
.bath-window { position: absolute; top: 29px; left: 16px; width: 80px; height: 76px; border: 6px solid #46737e; border-radius: 10px; overflow: hidden; background: #0b1d31; box-shadow: 0 6px 0 rgba(0,0,0,.22); }
.bath-window .window-frame.frame-v { width: 3px; } .bath-window .window-frame.frame-h { height: 3px; }
.bath-night { position: absolute; right: 12px; top: 13px; width: 19px; height: 19px; border-radius: 50%; background: #f3db9e; box-shadow: 0 0 13px rgba(243,219,158,.65); }
.bath-shower { position: absolute; right: 25px; top: 25px; width: 58px; height: 150px; }
.shower-pipe { position: absolute; right: 14px; top: 0; width: 8px; height: 93px; border: 5px solid #8db7b7; border-bottom: 0; border-radius: 12px 12px 0 0; }
.shower-head { position: absolute; right: -1px; top: 9px; width: 35px; height: 11px; border-radius: 8px; background: #9bc6c0; transform: rotate(15deg); box-shadow: 0 3px 0 rgba(0,0,0,.22); }
.water-drop { position: absolute; top: 36px; width: 4px; height: 17px; border-radius: 4px; background: #91e8e0; opacity: .7; animation: water-drop 1.5s linear infinite; } .drop-a { right: 12px; } .drop-b { right: 27px; top: 52px; animation-delay: -.65s; } .drop-c { right: 3px; top: 62px; animation-delay: -1.05s; }
.bath-shelf { position: absolute; left: 18px; bottom: 132px; width: 75px; height: 30px; border-bottom: 6px solid #759795; }
.bath-shelf span, .bath-shelf i, .bath-shelf b { position: absolute; bottom: 5px; width: 14px; height: 20px; border-radius: 4px 4px 7px 7px; background: #e19b9c; } .bath-shelf span { left: 8px; } .bath-shelf i { left: 31px; height: 25px; background: #efce87; } .bath-shelf b { left: 54px; background: #8ed0bd; }
.bath-tub { position: absolute; left: 14px; right: 14px; bottom: 28px; height: 112px; z-index: 2; border-radius: 44px 44px 15px 15px; background: #cce4df; box-shadow: 0 10px 0 rgba(0,0,0,.28), inset 0 9px 0 rgba(255,255,255,.5); }
.bath .bath-tub { z-index: 7; }
.tub-rim { position: absolute; inset: 7px 8px auto; height: 44px; border-radius: 50%; background: #f1fffa; box-shadow: inset 0 -7px 0 #9fc7c2; }
.bath-water { position: absolute; z-index: 2; left: 14px; right: 14px; top: 19px; height: 24px; border-radius: 50%; background: #63b8b1; overflow: hidden; box-shadow: inset 0 5px 0 rgba(225,255,248,.55); }
.water-line { position: absolute; width: 48px; border-top: 2px solid rgba(225,255,248,.7); border-radius: 50%; animation: water-wave 2.8s ease-in-out infinite; } .line-a { top: 10px; left: 17px; } .line-b { top: 15px; left: 74px; animation-delay: -1.1s; }
.tub-front { position: absolute; z-index: 4; left: 14px; right: 14px; bottom: 6px; height: 58px; border-radius: 8px 8px 13px 13px; background: linear-gradient(150deg, #e8f5ef, #a9cfca); }
.bath-steam { position: absolute; bottom: 127px; width: 19px; height: 48px; border-left: 4px solid rgba(226,255,248,.36); border-radius: 50%; filter: blur(.2px); animation: steam-rise 4.2s ease-in-out infinite; z-index: 3; } .steam-a { left: 34%; } .steam-b { left: 51%; height: 57px; animation-delay: -1.8s; } .steam-c { left: 66%; height: 43px; animation-delay: -3s; }
.bath-bubble { position: absolute; z-index: 5; width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(232,255,248,.8); animation: bubble-rise 3.6s ease-in-out infinite; } .bubble-a { left: 35%; bottom: 115px; } .bubble-b { left: 72%; bottom: 101px; width: 8px; height: 8px; animation-delay: -1.4s; }
.bath .mira-wrap { position: absolute; left: 50%; bottom: 45px; width: 180px; margin: 0 0 0 -90px; transform: none; z-index: 6; }
.bath .mira-wrap .mira-sprite { width: 150px; height: 188px; }
.bath .mira-wrap::before { top: -13px; }
.bath-foreground { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.bath-foreground::before { content: ''; position: absolute; left: 28px; right: 28px; bottom: 97px; height: 25px; border-radius: 50%; background: #63b8b1; box-shadow: inset 0 5px 0 rgba(225,255,248,.62), 0 2px 0 rgba(64,133,135,.45); }
.bath-foreground::after { content: ''; position: absolute; left: 28px; right: 28px; bottom: 34px; height: 66px; border-radius: 8px 8px 14px 14px; background: linear-gradient(150deg, #e8f5ef, #a9cfca); box-shadow: inset 0 7px 0 rgba(255,255,255,.22), 0 8px 0 rgba(0,0,0,.18); }

@keyframes room-enter { from { opacity: 0; transform: scale(1.035) translateY(8px); filter: saturate(.7); } to { opacity: 1; transform: scale(1) translateY(0); filter: saturate(1); } }
@keyframes mira-hover { 0%,100% { transform: translateY(0) rotate(-.35deg); } 50% { transform: translateY(-7px) rotate(.45deg); } }
@keyframes mira-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012, .994); } }
@keyframes decor-drift { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes particle-float { 0%,100% { opacity: .2; transform: translate(0, 4px) scale(.8); } 45% { opacity: .95; transform: translate(8px, -15px) scale(1); } }
@keyframes reaction-rise { 0% { opacity: 0; transform: translateY(10px) scale(.7) rotate(-8deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translateY(-74px) scale(1.1) rotate(10deg); } }
@keyframes bed-glow { 0%,100% { opacity: .48; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes water-drop { 0% { opacity: 0; transform: translateY(-8px); } 35% { opacity: .85; } 100% { opacity: 0; transform: translateY(45px); } }
@keyframes water-wave { 0%,100% { transform: translateX(-9px) scaleX(.82); opacity: .35; } 50% { transform: translateX(13px) scaleX(1.1); opacity: .85; } }
@keyframes steam-rise { 0%,100% { opacity: .15; transform: translateY(4px) rotate(5deg); } 50% { opacity: .62; transform: translateY(-15px) rotate(-8deg); } }
@keyframes bubble-rise { 0%,100% { opacity: .3; transform: translateY(4px) scale(.8); } 50% { opacity: .9; transform: translateY(-24px) scale(1.1); } }
.global-reactions { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.global-reactions .scene-reaction { top: 43%; }
@media (max-width: 360px) { .room-scene { min-height: 380px; } .lab-window, .bed-window { transform: translateX(-50%) scale(.9); transform-origin: top center; } .lab-desk { bottom: 38px; } .bath-tub { left: 9px; right: 9px; } }

/* Local time of day: the room keeps the same furniture while its light changes. */
.room-scene.time-morning { background: linear-gradient(180deg, #b9d4e6 0 60%, #b99075 60% 100%); }
.room-scene.time-day { background: linear-gradient(180deg, #82c8ed 0 60%, #c79e76 60% 100%); }
.room-scene.time-evening { background: linear-gradient(180deg, #5d557d 0 60%, #855f63 60% 100%); }
.room-scene.time-night { background: linear-gradient(180deg, #0e1c35 0 60%, #17283f 60% 100%); }
.room-scene.time-morning.bed { background: linear-gradient(180deg, #b9bfdc 0 62%, #987784 62% 100%); }
.room-scene.time-day.bed { background: linear-gradient(180deg, #a7d0e3 0 62%, #ae8388 62% 100%); }
.room-scene.time-evening.bed { background: linear-gradient(180deg, #55496f 0 62%, #493f61 62% 100%); }
.room-scene.time-night.bed { background: linear-gradient(180deg, #171b3c 0 62%, #2b294e 62% 100%); }
.room-scene.time-morning.bath { background: linear-gradient(180deg, #a9d9dc 0 63%, #73aaa9 63% 100%); }
.room-scene.time-day.bath { background: linear-gradient(180deg, #8dd4e2 0 63%, #86c4c2 63% 100%); }
.room-scene.time-evening.bath { background: linear-gradient(180deg, #514f70 0 63%, #3d6872 63% 100%); }
.room-scene.time-night.bath { background: linear-gradient(180deg, #12333e 0 63%, #1d5860 63% 100%); }
.room-scene.time-morning .room-architecture { filter: brightness(1.08) saturate(.94) sepia(.06); }
.room-scene.time-day .room-architecture { filter: brightness(1.17) saturate(.98); }
.room-scene.time-evening .room-architecture { filter: brightness(.97) saturate(1.08) sepia(.14); }
.room-scene.time-night .room-architecture { filter: brightness(.9) saturate(.94); }
.room-scene.time-morning .lab-sky, .room-scene.time-morning .bed-sky { background: linear-gradient(155deg, #f8b7c6, #8fc8e9 72%); }
.room-scene.time-day .lab-sky, .room-scene.time-day .bed-sky { background: linear-gradient(155deg, #6ec5f1, #d4f2ff 72%); }
.room-scene.time-evening .lab-sky, .room-scene.time-evening .bed-sky { background: linear-gradient(155deg, #f29a79, #5c4c86 72%); }
.room-scene.time-night .lab-sky { background: linear-gradient(155deg, #173c60, #0a192f 72%); }
.room-scene.time-night .bed-sky { background: linear-gradient(155deg, #363b70, #10142f 74%); }
.room-scene.time-morning .bath-window { background: linear-gradient(155deg, #f6b5c2, #8fcde1); }
.room-scene.time-day .bath-window { background: linear-gradient(155deg, #67c8ed, #d6f5ff); }
.room-scene.time-evening .bath-window { background: linear-gradient(155deg, #ef947c, #65578b); }
.room-scene.time-night .bath-window { background: #0b1d31; }
.room-scene.time-morning .sky-orb, .room-scene.time-day .sky-orb { background: #fff0b2; box-shadow: 0 0 20px rgba(255,237,166,.95); }
.room-scene.time-evening .sky-orb { background: #ffb273; box-shadow: 0 0 20px rgba(255,150,100,.8); }
.room-scene.time-morning .moon, .room-scene.time-day .moon { background: #fff0b2; box-shadow: 0 0 20px rgba(255,237,166,.9); }
.room-scene.time-evening .moon { background: #ffbb88; box-shadow: 0 0 20px rgba(255,155,120,.75); }
.room-scene.time-morning .bath-night, .room-scene.time-day .bath-night { background: #fff0b2; box-shadow: 0 0 14px rgba(255,237,166,.9); }
.room-scene.time-evening .bath-night { background: #ffb17e; box-shadow: 0 0 14px rgba(255,145,115,.75); }
.room-scene.time-day .lab-lamp i, .room-scene.time-day .bed-lamp i { opacity: .35; box-shadow: 0 0 10px rgba(245,179,91,.25); }
.room-scene.time-morning .lab-lamp i, .room-scene.time-morning .bed-lamp i { opacity: .65; }
.room-scene.time-evening .lab-lamp i, .room-scene.time-evening .bed-lamp i { opacity: .9; }
.room-scene.time-night .lab-lamp i, .room-scene.time-night .bed-lamp i { opacity: 1; }
.room-scene.time-day .lab-particle { opacity: .32 !important; filter: saturate(.62) brightness(.82); }
.room-scene.time-morning .lab-particle { opacity: .68 !important; }
.room-scene.time-evening .lab-particle { opacity: .86 !important; }
.room-scene.time-night .lab-particle { opacity: 1 !important; }
.mira-wrap.room-outfit-lab::before { content: '研究助手'; }
.mira-wrap.room-outfit-bed::before { content: 'おやすみ'; background: #e0d9f4; color: #4c3b78; }
.mira-wrap.outfit-bath::before, .mira-wrap.room-outfit-bath::before { content: '入浴中'; background: #c8f0e8; color: #23645f; }
@media (max-width: 480px) { .room-scene { min-height: 350px; } }