:root{
  --ink: #f4f1ff;
  --ink-soft: #cfc9ef;
  --panel: rgba(20, 18, 46, 0.72);
  --accent: #ffd9a0;
  --focus: #8ecbff;
  --radius: 22px;
  --text-scale: 1;
}

*{ box-sizing: border-box; }

html,body{
  height:100%;
  margin:0;
  overscroll-behavior:none;
}

body{
  font-family: "Segoe UI", "Avenir Next", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #0d0e24;
  -webkit-tap-highlight-color: transparent;
}

#app{
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #171933 0%, #232152 55%, #34215c 100%);
  transition: background 2.5s ease;
  display: flex;
  flex-direction: column;
}

/* twinkling starfield (fixed decorative layer, independent of room art) */
#sky{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 10% 12%, #fff, transparent 60%),
    radial-gradient(2px 2px at 85% 8%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 5%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 25% 18%, #fff, transparent 60%);
  opacity:.4;
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.25; }
  50%{ opacity:.5; }
}

#topbar{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between;
  padding: max(14px, env(safe-area-inset-top)) 16px 0 16px;
}

.iconBtn{
  width:52px; height:52px;
  border-radius:50%;
  border: none;
  background: var(--panel);
  color: var(--ink);
  font-size: 20px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink: 0;
}
.iconBtn:focus-visible, .segBtn:focus-visible, .wideBtn:focus-visible, .actionBtn:focus-visible, .actionBtn.scanning{
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}

#stage{
  position:relative; z-index:1;
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding: 68px 20px 14px 20px;
  gap: 8px;
  overflow-y: auto;
}

#illustration{
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 2.7;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
#backdrop{ position:absolute; inset:0; }
#backdrop svg{ width:100%; height:100%; display:block; }
#catLayer{
  position:absolute; left:50%; bottom:2%;
  width: 34%;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
#catLayer svg{ width:100%; height:auto; display:block; }

#roomTitle{
  margin: 6px 0 0 0;
  font-size: calc(1.15rem * var(--text-scale));
  font-weight: 700;
  color: var(--accent);
}

#narration{
  max-width: 560px;
  font-size: calc(1.08rem * var(--text-scale));
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

#note{
  max-width: 560px;
  font-size: calc(0.95rem * var(--text-scale));
  line-height: 1.4;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
}

#actions{
  position: relative; z-index: 2;
  flex-shrink: 0;
  display:flex; flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 10px 16px max(14px, env(safe-area-inset-bottom)) 16px;
  background: linear-gradient(0deg, rgba(10,9,30,.55) 0%, rgba(10,9,30,0) 100%);
}

.actionBtn{
  border: none;
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: calc(0.98rem * var(--text-scale));
  font-weight: 600;
  padding: 14px 20px;
  min-height: 48px;
  cursor: pointer;
  flex: 0 1 auto;
}
.actionBtn.accentBtn{
  background: var(--accent);
  color: #3a2a06;
}
.actionBtn.dirBtn{
  background: rgba(142, 203, 255, 0.18);
}

#settingsPanel{
  position:absolute; z-index:10; inset: auto 16px 16px 16px;
  max-width: 420px; margin: 0 auto;
  background: #191735;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  max-height: 82vh;
  overflow-y: auto;
}
#settingsPanel h2{ margin: 0 0 14px 0; font-size: 1.3rem; }
.settingRow{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; margin: 14px 0;
  font-size: 1.05rem;
}
.settingRow input[type="checkbox"]{ width:28px; height:28px; flex-shrink:0; }
.settingHint{
  margin: -8px 0 14px 0;
  font-size: .85rem;
  color: var(--ink-soft);
}

.segmented{ display:flex; border-radius: 999px; overflow:hidden; border: 1px solid rgba(255,255,255,.25); }
.segBtn{
  border:none; background: transparent; color: var(--ink);
  padding: 10px 14px; cursor:pointer; font-size: .95rem;
}
.segBtn[aria-pressed="true"]{ background: var(--accent); color:#3a2a06; font-weight:700; }

.wideBtn{
  width:100%;
  margin-top: 10px;
  padding: 16px;
  border-radius: var(--radius);
  border: none;
  background: var(--accent);
  color: #3a2a06;
  font-weight:700;
  font-size: 1.05rem;
  cursor:pointer;
}
#closeSettingsBtn{ background: rgba(255,255,255,.12); color: var(--ink); }

/* text scale classes applied to #app */
.textscale-large{ --text-scale: 1.2; }
.textscale-xlarge{ --text-scale: 1.45; }

.reduce-motion *{
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}

@media (prefers-reduced-motion: reduce){
  #sky{ animation: none; }
}

/* cat illustration motion */
.tail-flick{
  transform-origin: 140px 90px;
  animation: tailFlick 3.2s ease-in-out infinite;
}
.tail-flick-slow{
  transform-origin: 160px 75px;
  animation: tailFlick 5s ease-in-out infinite;
}
@keyframes tailFlick{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-6deg); }
}

.breathe{
  transform-origin: center;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.02); }
}

.zzz text{
  opacity: 0;
  animation: zzzFloat 4s ease-in infinite;
}
.zzz text:nth-child(2){ animation-delay: 1.3s; }
@keyframes zzzFloat{
  0%{ opacity: 0; transform: translateY(6px); }
  20%{ opacity: .9; }
  80%{ opacity: .7; transform: translateY(-14px); }
  100%{ opacity: 0; transform: translateY(-20px); }
}

.flicker{
  animation: flicker 1.6s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes flicker{
  0%,100%{ transform: scaleY(1); opacity: 1; }
  50%{ transform: scaleY(1.08); opacity: .85; }
}

[class^="firefly-"]{ animation: fireflyBlink 2.4s ease-in-out infinite; }
.firefly-1{ animation-delay: .6s; }
.firefly-2{ animation-delay: 1.2s; }
@keyframes fireflyBlink{
  0%,100%{ opacity: .2; }
  50%{ opacity: 1; }
}