/* ============================================================
   TSUBASA UNIVERSITY — 翼大学
   The Campus: a soft anime world (Ghibli warmth × Shinkai skies)
   Point-and-click scenes · living day/night cycle
   ============================================================ */

/* 1. RESET & TIME-OF-DAY PALETTES
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* constant inks & papers */
  --paper:      #fdf8ec;
  --paper-2:    #f7efdc;
  --ink:        #4a3f30;
  --ink-soft:   #6b5d4a;
  --wood:       #8a5a3b;
  --wood-deep:  #6e4429;
  --leaf:       #7fb069;
  --leaf-deep:  #5e8c4f;
  --lantern:    #f2a65a;
  --blossom:    #f4b8c4;

  --font-round: 'Zen Maru Gothic', sans-serif;
  --font-title: 'Shippori Mincho', serif;

  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* day (default) — saturated Shinkai blue, sun high */
  --sky-top:    #3aa0e8;
  --sky-mid:    #8fd0f4;
  --sky-low:    #eaf8ff;
  --cloud:      #ffffff;
  --cloud-belly:#c6e4f5;
  --sun:        #fff9d6;
  --sun-x:      1150px;
  --sun-y:      170px;
  --hill-far:   #a6d29e;
  --hill-far-2: #79ad7c;
  --hill-near:  #8fc95f;
  --hill-near-2:#579a41;
  --stars-o:    0;
  --glow-o:     0;
  --ray-o:      .3;
  --fog-o:      0;
  --world-filter: none;
  --ui-tint:    rgba(255, 253, 246, .88);
}

:root[data-time="dawn"] {
  --sky-top:    #6f8ed4;
  --sky-mid:    #f2a49e;
  --sky-low:    #ffddba;
  --cloud:      #ffe6da;
  --cloud-belly:#eab0a6;
  --sun:        #ffd9a0;
  --sun-x:      280px;
  --sun-y:      420px;
  --hill-far:   #9cbca0;
  --hill-far-2: #789a80;
  --hill-near:  #7fb268;
  --hill-near-2:#548c48;
  --stars-o:    .25;
  --glow-o:     .35;
  --ray-o:      .22;
  --world-filter: brightness(.94) saturate(.95);
}

:root[data-time="golden"] {
  --sky-top:    #6d84cb;
  --sky-mid:    #ffa95c;
  --sky-low:    #ffe2a8;
  --cloud:      #ffdcb2;
  --cloud-belly:#f0ac7c;
  --sun:        #ffc76e;
  --sun-x:      1280px;
  --sun-y:      430px;
  --hill-far:   #b5ae7e;
  --hill-far-2: #8f9660;
  --hill-near:  #9cb85e;
  --hill-near-2:#6d8f42;
  --stars-o:    0;
  --glow-o:     .3;
  --ray-o:      .46;
  --world-filter: sepia(.16) saturate(1.12) brightness(.99);
}

:root[data-time="dusk"] {
  --sky-top:    #3a4682;
  --sky-mid:    #bd6d99;
  --sky-low:    #ff9d6c;
  --cloud:      #d998a6;
  --cloud-belly:#a86d88;
  --sun:        #ffb070;
  --sun-x:      1380px;
  --sun-y:      560px;
  --hill-far:   #5e7086;
  --hill-far-2: #47576c;
  --hill-near:  #4e7c56;
  --hill-near-2:#395f42;
  --stars-o:    .55;
  --glow-o:     .85;
  --ray-o:      .1;
  --world-filter: brightness(.8) saturate(.88);
}

:root[data-time="night"] {
  --sky-top:    #0b1531;
  --sky-mid:    #1d2f57;
  --sky-low:    #324b74;
  --cloud:      #3e5078;
  --cloud-belly:#2b3b5c;
  --sun:        #f4eeda;          /* the moon */
  --sun-x:      1180px;
  --sun-y:      150px;
  --hill-far:   #33485a;
  --hill-far-2: #263846;
  --hill-near:  #2e4f3a;
  --hill-near-2:#213f2c;
  --stars-o:    1;
  --glow-o:     1;
  --ray-o:      0;
  --world-filter: brightness(.55) saturate(.7);
  --ui-tint:    rgba(28, 36, 58, .82);
}

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  background: var(--sky-low);
  color: var(--ink);
  font-family: var(--font-round);
  line-height: 1.7;
  overflow-x: clip;
  transition: background 1.2s ease;
}

body.no-scroll { overflow: hidden; }

::selection { background: var(--leaf); color: #fff; }

/* themed cursor — a little pencil; sparkles over anything touchable */
body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M6 26 L10 18 14 22 Z' fill='%23e8c66a'/%3E%3Cpath d='M6 26 L7.8 22.4 9.6 24.2 Z' fill='%234a3f30'/%3E%3Cpath d='M10 18 L22 6 26 10 14 22 Z' fill='%237fb069'/%3E%3Cpath d='M21 7 L23.5 4.5 C24.5 3.5 26.5 3.5 27.5 4.5 C28.5 5.5 28.5 7.5 27.5 8.5 L25 11 Z' fill='%23f4b8c4'/%3E%3Cpath d='M10 18 L22 6 26 10 14 22 Z M6 26 L10 18 14 22 Z' fill='none' stroke='%234a3f30' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 26, auto;
}

a, button, [role="button"], [data-spirit], summary, label {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M6 26 L10 18 14 22 Z' fill='%23e8c66a'/%3E%3Cpath d='M6 26 L7.8 22.4 9.6 24.2 Z' fill='%234a3f30'/%3E%3Cpath d='M10 18 L22 6 26 10 14 22 Z' fill='%23f2a65a'/%3E%3Cpath d='M21 7 L23.5 4.5 C24.5 3.5 26.5 3.5 27.5 4.5 C28.5 5.5 28.5 7.5 27.5 8.5 L25 11 Z' fill='%23f4b8c4'/%3E%3Cpath d='M10 18 L22 6 26 10 14 22 Z M6 26 L10 18 14 22 Z' fill='none' stroke='%234a3f30' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M24 20 l1.3 2.8 2.8 1.3 -2.8 1.3 -1.3 2.8 -1.3 -2.8 -2.8 -1.3 2.8 -1.3 Z' fill='%23ffd98a'/%3E%3C/svg%3E") 6 26, pointer;
}

input, textarea { cursor: text; }

@media (pointer: coarse) {
  body, a, button, [role="button"], [data-spirit] { cursor: auto; }
}

/* film grain, very soft */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.024'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9990;
}

/* 2. LOADER — the little study spirit arrives
   ============================================================ */
#loader {
  position: fixed;
  inset: 0;
  background: linear-gradient(var(--sky-mid), var(--sky-low));
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  transition: opacity .7s ease;
}

#loader.done { opacity: 0; pointer-events: none; }

.loader-sprite { width: 88px; height: 88px; animation: spriteBounce 1.1s var(--ease-inout) infinite; }

@keyframes spriteBounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  35%      { transform: translateY(-16px) scale(.96, 1.05); }
  65%      { transform: translateY(0) scale(1.05, .94); }
}

.loader-name {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--ink);
}

.loader-sub {
  font-size: .74rem;
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.loader-dots { display: flex; gap: .5rem; margin-top: .4rem; }
.loader-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--leaf);
  animation: dotFloat 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: .15s; background: var(--lantern); }
.loader-dots span:nth-child(3) { animation-delay: .3s; background: var(--blossom); }

@keyframes dotFloat { 50% { transform: translateY(-7px); opacity: .55; } }

/* 3. THE VEIL — warm light you pass through between places
   ============================================================ */
.veil {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at var(--veil-x, 50%) var(--veil-y, 55%),
              #fff8e4 0%, #ffeecb 45%, #ffdba4 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 9970;
  transition: opacity .62s var(--ease-inout);
}

.veil.on { opacity: 1; }

/* 4. TOP BAR — floating paper strip
   ============================================================ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  background: var(--ui-tint);
  border-radius: 999px;
  padding: .35rem .95rem .35rem .5rem;
  box-shadow: 0 2px 14px rgba(58, 46, 24, .12);
  transition: background 1.2s ease;
}

.brand-sprite { width: 30px; height: 30px; }

.brand-name {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.1;
}

.brand-name small {
  display: block;
  font-family: var(--font-round);
  font-weight: 500;
  font-size: .58rem;
  letter-spacing: .3em;
  color: var(--ink-soft);
}

:root[data-time="night"] .brand-name,
:root[data-time="night"] .brand-name small { color: #e8e4d8; }

.topbar-right { display: flex; align-items: center; gap: .6rem; }

.signnav {
  display: flex;
  align-items: center;
  gap: .2rem;
  background: var(--ui-tint);
  border-radius: 999px;
  padding: .3rem .5rem;
  box-shadow: 0 2px 14px rgba(58, 46, 24, .12);
  transition: background 1.2s ease;
}

.signnav a {
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: .3rem .7rem;
  border-radius: 999px;
  transition: background .3s ease, color .3s ease;
}

.signnav a:hover { background: rgba(127, 176, 105, .18); color: var(--ink); }
.signnav a.here { background: var(--leaf); color: #fff; }

:root[data-time="night"] .signnav a { color: #cfd3de; }
:root[data-time="night"] .signnav a:hover { color: #fff; }

/* time dial */
.time-dial {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--ui-tint);
  box-shadow: 0 2px 14px rgba(58, 46, 24, .12);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .4s var(--ease), background 1.2s ease;
}

.time-dial:hover { transform: rotate(24deg) scale(1.08); }
.time-dial:active { transform: rotate(80deg) scale(.95); }

@media (max-width: 760px) {
  .signnav { display: none; }
}

/* mobile signpost menu (bottom) */
.signpost-menu {
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  background: var(--ui-tint);
  border-radius: 999px;
  padding: .35rem .5rem;
  box-shadow: 0 4px 18px rgba(58, 46, 24, .18);
  gap: .15rem;
  transition: background 1.2s ease;
}

.signpost-menu a {
  font-weight: 700;
  font-size: .68rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: .45rem .6rem;
  border-radius: 999px;
}

.signpost-menu a.here { background: var(--leaf); color: #fff; }
:root[data-time="night"] .signpost-menu a { color: #cfd3de; }

@media (max-width: 760px) {
  .signpost-menu { display: flex; }
}

/* 5. SCENE SHELL
   ============================================================ */
.scene-wrap {
  height: 100vh;
  height: 100svh;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  position: relative;
}

.scene-wrap::-webkit-scrollbar { display: none; }

.scene {
  height: 100%;
  aspect-ratio: 16 / 9;
  min-width: 100%;
  margin: 0 auto;
  position: relative;
  transition: transform .72s var(--ease-inout);
  transform-origin: var(--push-x, 50%) var(--push-y, 60%);
  /* cinematic settle on arrival (no fill: must not pin transform) */
  animation: sceneSettle 1.35s var(--ease);
}

@keyframes sceneSettle { from { transform: scale(1.05); } to { transform: scale(1); } }

.scene.push { transform: scale(2.3); animation: none; }

.scene svg { width: 100%; height: 100%; display: block; }

/* svg sub-layer colour hooks — gradient stops follow the hour */
.s-top  { stop-color: var(--sky-top); }
.s-mid  { stop-color: var(--sky-mid); }
.s-low  { stop-color: var(--sky-low); }

.st-hf1 { stop-color: var(--hill-far); }
.st-hf2 { stop-color: var(--hill-far-2); }
.st-hn1 { stop-color: var(--hill-near); }
.st-hn2 { stop-color: var(--hill-near-2); }
.st-haze{ stop-color: var(--sky-low); }

.s-top, .s-mid, .s-low, .st-hf1, .st-hf2, .st-hn1, .st-hn2, .st-haze {
  transition: stop-color 1.2s ease;
}

.sky-rect   { fill: url(#skyGrad); transition: all 1.2s ease; }
.sun-disc   { fill: var(--sun); transition: fill 1.2s ease;
              transform: translate(var(--sun-x), var(--sun-y)); }
.sun-halo   { transition: opacity 1.2s ease; }
.stars      { opacity: var(--stars-o); transition: opacity 1.2s ease; fill: #fdf6d8; }
.cloud      { fill: var(--cloud); transition: fill 1.2s ease; opacity: .94; }
.cloud-belly{ fill: var(--cloud-belly); transition: fill 1.2s ease; opacity: .85; }

#world,
.fg         { filter: var(--world-filter); transition: filter 1.2s ease; }
#glows,
.glows      { opacity: var(--glow-o); transition: opacity 1.2s ease; pointer-events: none; }
.ray        { opacity: var(--ray-o); transition: opacity 1.2s ease; pointer-events: none; }

/* drifting clouds */
.cloud-a { animation: drift 95s linear infinite; }
.cloud-b { animation: drift 140s linear infinite; animation-delay: -60s; }
.cloud-c { animation: drift 115s linear infinite; animation-delay: -30s; }

@keyframes drift {
  from { transform: translateX(-360px); }
  to   { transform: translateX(1960px); }
}

/* tree & grass sway */
.sway      { animation: sway 6.5s ease-in-out infinite alternate; transform-origin: 50% 100%; transform-box: fill-box; }
.sway-slow { animation-duration: 9s; }

@keyframes sway { from { transform: rotate(-.8deg); } to { transform: rotate(.9deg); } }

.blade {
  animation: blade 3.8s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
  transform-box: fill-box;
}

.blade:nth-child(2n)  { animation-delay: -1.2s; animation-duration: 4.4s; }
.blade:nth-child(3n)  { animation-delay: -2.1s; animation-duration: 3.4s; }

@keyframes blade { from { transform: rotate(-2.4deg); } to { transform: rotate(2.6deg); } }

/* birds */
.birds { animation: fly 46s linear infinite; opacity: .8; }
:root[data-time="night"] .birds, :root[data-time="dusk"] .birds { opacity: 0; }
@keyframes fly {
  0%   { transform: translate(-140px, 60px); }
  100% { transform: translate(1800px, -80px); }
}

/* fireflies (JS-spawned) */
.firefly {
  fill: #ffe9a3;
  animation: fireflyFloat var(--ff-dur, 7s) ease-in-out infinite alternate,
             fireflyGlow 2.4s ease-in-out infinite;
}

@keyframes fireflyFloat {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--ff-dx, 30px), var(--ff-dy, -40px)); }
}

@keyframes fireflyGlow { 0%, 100% { opacity: .1; } 50% { opacity: .95; } }

/* 6. DOORS — the whole point
   ============================================================ */
a.door { outline: none; }

/* Doors swing INWARD (positive rotateY, hinged left): under perspective the
   leaf foreshortens into the dark opening instead of bulging out over the
   wall. It also dims as it turns away from the light. */
a.door .door-leaf {
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform .6s var(--ease-inout), filter .6s ease;
}

a.door:not([data-locked]):not(.door-sealed):hover .door-leaf,
a.door:not([data-locked]):not(.door-sealed):focus-visible .door-leaf {
  transform: perspective(900px) rotateY(26deg);
  filter: brightness(.9);
}

a.door.opening .door-leaf {
  transform: perspective(900px) rotateY(76deg);
  filter: brightness(.72);
  transition-duration: .85s;
}

a.door .door-dark { opacity: 0; transition: opacity .45s ease .05s; }
a.door:not([data-locked]):not(.door-sealed):hover .door-dark,
a.door.opening .door-dark { opacity: 1; }

a.door .door-glint {
  opacity: 0;
  transition: opacity .35s ease;
  fill: #fff3c9;
}

a.door:not([data-locked]):not(.door-sealed):hover .door-glint,
a.door:not([data-locked]):not(.door-sealed):focus-visible .door-glint { opacity: .9; }

a.door:focus-visible .door-frame { stroke: var(--lantern); stroke-width: 5; }

/* hover halo behind interactive spots */
.spot-halo {
  opacity: 0;
  transition: opacity .4s ease, transform .5s var(--ease);
  transform: scale(.9);
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

a:hover .spot-halo, a:focus-visible .spot-halo { opacity: .55; transform: scale(1); }

/* locked & sealed doors hold fast — a knock, never a swing */
a.door[data-locked]:hover .door-leaf,
a.door[data-locked]:focus-visible .door-leaf,
a.door.door-sealed:hover .door-leaf,
a.door.door-sealed:focus-visible .door-leaf,
a.door.door-sealed.opening .door-leaf { transform: none; filter: none; }

a.door[data-locked]:hover,
a.door.door-sealed:hover { filter: brightness(1.05); }

/* sign labels bob gently */
.sign-bob { animation: signBob 4.5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: top center; }
@keyframes signBob { from { transform: rotate(-1.1deg); } to { transform: rotate(1.3deg); } }

/* locked door rattle */
@keyframes rattle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px) rotate(-.4deg); }
  40% { transform: translateX(3px)  rotate(.4deg); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

.rattling { animation: rattle .45s ease; transform-box: fill-box; }

/* sprite eyes blink */
.sprite-eye { animation: blink 5.2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }

/* 7. SCENE CAPTION — where am I
   ============================================================ */
.scene-caption {
  position: fixed; /* scenes can be wider than the screen; captions never are */
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  text-align: center;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  animation: captionIn 1.1s var(--ease) .5s forwards;
  width: max-content;
  max-width: 92vw;
}

@keyframes captionIn { to { opacity: 1; } }

.scene-caption .jp {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .55em;
  text-indent: .55em;
  color: #fff;
  text-shadow: 0 1px 10px rgba(30, 30, 40, .45);
}

.scene-caption h1 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  color: #fff;
  text-shadow: 0 2px 18px rgba(30, 30, 40, .5);
  margin-top: .2rem;
}

.scene-caption .hint {
  display: inline-block;
  margin-top: .7rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff;
  background: rgba(40, 44, 60, .55);
  padding: .4rem 1rem;
  border-radius: 999px;
  animation: hintPulse 3s ease-in-out infinite;
}

@keyframes hintPulse { 50% { opacity: .65; } }

@media (max-width: 760px) {
  .scene-caption { bottom: 4.6rem; width: max-content; max-width: 90vw; }
}

/* 8. THE GATE (arrival overlay scene)
   ============================================================ */
#gate {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  justify-content: center;
  overflow: hidden;
  transition: opacity .9s ease;
}

#gate.passed { opacity: 0; pointer-events: none; }

#gate .scene { transition: transform 1.15s var(--ease-inout); }
#gate.passed .scene { transform: scale(2.6); }

.gate-caption {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 30;
  width: max-content;
  max-width: 92vw;
}

.gate-caption .welcome {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .4em;
  text-indent: .4em;
  text-transform: uppercase;
  color: #fff;
  opacity: .85;
  text-shadow: 0 1px 8px rgba(30, 30, 50, .4);
}

.gate-caption h1 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  color: #fff;
  text-shadow: 0 3px 24px rgba(30, 30, 50, .45);
  margin: .3rem 0 .1rem;
}

.gate-caption .romaji {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .3em;
  color: #fff;
  opacity: .9;
}

.gate-enter {
  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%);
  z-index: 30;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .2em;
  color: var(--ink);
  background: var(--paper);
  border: none;
  border-radius: 999px;
  padding: 1rem 2.3rem;
  box-shadow: 0 6px 24px rgba(40, 36, 20, .3), inset 0 -3px 0 rgba(138, 90, 59, .25);
  transition: transform .4s var(--ease), box-shadow .4s ease;
  animation: enterFloat 3.4s ease-in-out infinite;
}

.gate-enter:hover { transform: translateX(-50%) scale(1.06); box-shadow: 0 10px 32px rgba(40, 36, 20, .38); }

@keyframes enterFloat { 50% { margin-bottom: 8px; } }

/* 9. SHOJI OVERLAY — rooms & boards open like paper doors
   ============================================================ */
.shoji {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: none;
  pointer-events: none;
}

.shoji.visible { display: block; }

.shoji-half {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;
  background:
    linear-gradient(rgba(120, 90, 55, .16) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(120, 90, 55, .16) 1px, transparent 1px) 0 0 / 20% 100%,
    linear-gradient(#faf4e4, #f3ead2);
  box-shadow: 0 0 40px rgba(40, 30, 10, .25);
  transition: transform .52s var(--ease-inout);
}

.shoji-half.l { left: 0; border-right: 10px solid var(--wood); transform: translateX(-101%); }
.shoji-half.r { right: 0; border-left: 10px solid var(--wood); transform: translateX(101%); }

.shoji.cover .shoji-half.l,
.shoji.cover .shoji-half.r { transform: translateX(0); }

.room {
  position: fixed;
  inset: 0;
  z-index: 955;
  display: none;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 75% 0%, rgba(255, 232, 178, .5), transparent 55%),
    linear-gradient(#fbf5e6, #f2e8d0);
}

.room.open { display: block; }

.room-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 6.5rem 2rem 5rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease .3s, transform .7s var(--ease) .3s;
}

.room.open .room-inner { opacity: 1; transform: none; }

.room-close {
  position: fixed;
  top: 1.1rem;
  right: 1.2rem;
  z-index: 965;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--wood);
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 4px 14px rgba(60, 40, 20, .3);
  transition: transform .35s var(--ease);
}

.room-close:hover { transform: rotate(90deg) scale(1.06); }

.room-kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--leaf-deep);
}

.room-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--ink);
  margin: .3rem 0 .4rem;
}

.room-lede { color: var(--ink-soft); max-width: 56ch; font-size: .95rem; }

.room-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 2.2rem 0 1.4rem;
  font-size: .95rem;
}

.room-divider::before, .room-divider::after {
  content: '';
  height: 2px;
  flex: 1;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(138, 90, 59, .35), transparent);
}

/* item cards inside rooms — like things on desks */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .9rem;
}

.shelf-item {
  background: #fffdf6;
  border: 2px solid rgba(138, 90, 59, .18);
  border-radius: 16px;
  padding: 1.3rem 1.2rem 1.1rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  box-shadow: 0 3px 0 rgba(138, 90, 59, .12);
  transition: transform .4s var(--ease), box-shadow .4s ease, border-color .3s ease;
}

a.shelf-item:hover {
  transform: translateY(-5px) rotate(-.4deg);
  border-color: var(--leaf);
  box-shadow: 0 12px 22px -10px rgba(94, 140, 79, .4);
}

.shelf-glyph { font-family: var(--font-title); font-size: 1.6rem; line-height: 1; }

.shelf-name { font-weight: 700; font-size: .95rem; color: var(--ink); }

.shelf-desc { font-size: .76rem; color: var(--ink-soft); line-height: 1.65; flex: 1; }

.shelf-item .tag {
  align-self: flex-start;
  margin-top: .5rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: 999px;
}

.tag--live { background: var(--leaf); color: #fff; }
.tag--soon { background: rgba(242, 166, 90, .18); color: #b0712f; border: 1.5px dashed rgba(242, 166, 90, .6); }

.shelf-item--soon { border-style: dashed; background: rgba(255, 253, 246, .55); }

/* jlpt trail inside classroom */
.trail {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.trail-stone {
  width: 52px; height: 52px;
  border-radius: 50% 46% 52% 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .82rem;
  background: #e9e2cd;
  color: #9a8f76;
  border: 2px solid rgba(138, 90, 59, .18);
}

.trail-stone.lit {
  background: var(--leaf);
  color: #fff;
  border-color: var(--leaf-deep);
  box-shadow: 0 0 0 5px rgba(127, 176, 105, .25), 0 6px 14px -4px rgba(94, 140, 79, .5);
}

.trail-stone.next { border-style: dashed; border-color: var(--lantern); color: #b0712f; }

.trail-path { color: #c4b795; font-size: .9rem; }

/* 10. FOOTNOTE STRIP
   ============================================================ */
.footnote {
  position: fixed;
  left: 1.2rem;
  bottom: 1rem;
  z-index: 890;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  opacity: .55;
  text-shadow: 0 1px 6px rgba(30, 30, 40, .5);
}

.footnote a { color: inherit; }

@media (max-width: 760px) { .footnote { display: none; } }

/* 11. LIVING DETAILS — smoke, petals, twinkle, weather of small things
   ============================================================ */
.smoke {
  fill: #fff;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: smokeRise 7.5s ease-out infinite;
}

.smoke.s2 { animation-delay: 2.5s; }
.smoke.s3 { animation-delay: 5s; }

@keyframes smokeRise {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
  12%  { opacity: .55; }
  100% { transform: translate(30px, -130px) scale(1.8); opacity: 0; }
}

.petal {
  fill: var(--blossom);
  opacity: 0;
  transform-box: fill-box;
  animation: petalFall var(--pf-dur, 14s) linear infinite;
  animation-delay: var(--pf-delay, 0s);
}

@keyframes petalFall {
  0%   { transform: translate(0, -30px) rotate(0deg); opacity: 0; }
  6%   { opacity: .95; }
  55%  { transform: translate(-180px, 300px) rotate(160deg); }
  92%  { opacity: .85; }
  100% { transform: translate(-330px, 560px) rotate(300deg); opacity: 0; }
}

.stars circle { animation: twinkle 3.8s ease-in-out infinite; }
.stars circle:nth-child(2n) { animation-delay: -1.3s; animation-duration: 4.6s; }
.stars circle:nth-child(3n) { animation-delay: -2.5s; animation-duration: 3.1s; }

/* your earned stars shine steadily — hundreds of twinkle animations
   would cost more than they charm */
.my-stars-campus circle { animation: none; opacity: .9; }

@keyframes twinkle { 50% { opacity: .3; } }

.shooting-star {
  stroke: #fdf6d8;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  animation: shoot 1.5s ease-out forwards;
}

@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0); stroke-dasharray: 0 200; }
  15%  { opacity: .95; }
  100% { opacity: 0; transform: translate(220px, 84px); stroke-dasharray: 90 200; }
}

/* 12. THE HIDDEN SPIRITS — a small hunt
   ============================================================ */
[data-spirit] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

[data-spirit] .found-star { opacity: 0; transition: opacity .5s ease; }
[data-spirit].found .found-star { opacity: 1; animation: twinkle 2.6s ease-in-out infinite; }

[data-spirit].pop { animation: spiritPop .65s var(--ease); }

@keyframes spiritPop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-16px) scale(1.18); }
  65%  { transform: translateY(0) scale(.94); }
  100% { transform: translateY(0) scale(1); }
}

.spirit-count {
  display: flex;
  align-items: center;
  background: var(--ui-tint);
  border-radius: 999px;
  padding: .55rem .85rem;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
  box-shadow: 0 2px 14px rgba(58, 46, 24, .12);
  transition: background 1.2s ease, color .4s ease;
  user-select: none;
}

:root[data-time="night"] .spirit-count { color: #cfd3de; }

.spirit-count.all {
  background: linear-gradient(120deg, #ffe9a3, #ffd98a);
  color: #7a5518;
  animation: honoraryGlow 2.6s ease-in-out infinite;
}

@keyframes honoraryGlow {
  0%, 100% { box-shadow: 0 2px 14px rgba(242, 166, 90, .35); }
  50%      { box-shadow: 0 2px 22px rgba(242, 166, 90, .7); }
}

/* 13. SCENE ROOMS — walk INTO a room, not onto a page
   The room is a wide illustrated panorama: drag to look around,
   the diorama tilts gently with your mouse, and everything on
   the desks and shelves is really there to touch.
   ============================================================ */
.room--scene {
  background: #201811;
  overflow: hidden; /* the panorama pans; the page doesn't scroll */
}

.roomscene-wrap {
  height: 100vh;
  height: 100svh;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  perspective: 1300px;
}

.roomscene-wrap::-webkit-scrollbar { display: none; }

.roomscene {
  height: 100%;
  aspect-ratio: 22 / 9;
  min-width: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .35s cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 0;
  scale: 1.04;
}

.room.open .roomscene {
  opacity: 1;
  scale: 1;
  transition: opacity .7s ease .25s, scale 1.1s var(--ease) .25s,
              transform .35s cubic-bezier(0.33, 1, 0.68, 1);
}

.roomscene svg { width: 100%; height: 100%; display: block; }

/* things you can touch glow softly and lean toward you */
.roomscene a, .roomscene [role="button"] { outline: none; }

.touchable {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .35s var(--ease), filter .35s ease;
}

a:hover .touchable, a:focus-visible .touchable,
[role="button"]:hover .touchable, [role="button"]:focus-visible .touchable {
  transform: translateY(-5px);
  filter: brightness(1.08) drop-shadow(0 6px 14px rgba(255, 226, 150, .45));
}

/* book spines pull out of the shelf */
.spine {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .3s var(--ease);
}

a:hover .spine, a:focus-visible .spine { transform: translateY(-10px); }

/* dust motes in the light */
.mote {
  fill: #fff3c9;
  animation: moteFloat var(--mote-dur, 9s) ease-in-out infinite alternate,
             moteGlow 3.2s ease-in-out infinite;
}

@keyframes moteFloat {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--mote-dx, 20px), var(--mote-dy, -34px)); }
}

@keyframes moteGlow { 0%, 100% { opacity: .12; } 50% { opacity: .8; } }

/* room caption hint */
.roomscene-hint {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 957;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #ffedc4;
  background: rgba(32, 24, 17, .68);
  padding: .45rem 1.1rem;
  border-radius: 999px;
  pointer-events: none;
  animation: hintPulse 3s ease-in-out infinite;
  width: max-content;
  max-width: 92vw;
}

/* 14. OVERPANELS — flashcards, cinema, paper notes (inside rooms)
   ============================================================ */
.overpanel {
  position: fixed;
  inset: 0;
  z-index: 958;
  display: none;
  align-items: center;
  justify-content: center;
}

.overpanel.open { display: flex; }

.overpanel-dim {
  position: absolute;
  inset: 0;
  background: rgba(12, 9, 5, .78);
  opacity: 0;
  transition: opacity .6s ease;
}

.overpanel.open .overpanel-dim { opacity: 1; }

.overpanel-box {
  position: relative;
  opacity: 0;
  transform: translateY(22px) scale(.97);
  transition: opacity .5s ease .15s, transform .6s var(--ease) .15s;
}

.overpanel.open .overpanel-box { opacity: 1; transform: none; }

.overpanel-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--wood);
  color: #fff;
  font-size: 1rem;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  transition: transform .3s var(--ease);
}

.overpanel-close:hover { transform: rotate(90deg) scale(1.08); }

/* ── the flashcard deck ── */
.deck-box {
  width: min(460px, 92vw);
  text-align: center;
}

.fc-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #ffd98a;
  margin-bottom: 1rem;
}

.fc-card {
  width: 100%;
  height: 250px;
  perspective: 1100px;
  cursor: pointer;
}

.fc-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .65s var(--ease-inout);
}

.fc-card.flipped .fc-inner { transform: rotateY(180deg); }

.fc-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.4rem;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(138, 90, 59, .25);
}

.fc-front { background: linear-gradient(150deg, #fffdf4, #f3e8cd); }
.fc-back  { background: linear-gradient(150deg, #f0f6e8, #dcead0); transform: rotateY(180deg); }

.fc-main {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 3rem);
  color: var(--ink);
  line-height: 1.2;
}

.fc-sub { font-size: .95rem; color: var(--ink-soft); }

.fc-hint { font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #b39a6b; margin-top: .6rem; }

.fc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.2rem;
}

.fc-btn {
  border: none;
  border-radius: 999px;
  padding: .65rem 1.2rem;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  background: rgba(255, 249, 232, .14);
  color: #ffedc4;
  border: 1.5px solid rgba(255, 237, 196, .35);
  transition: background .3s ease, transform .3s var(--ease);
}

.fc-btn:hover { background: rgba(255, 249, 232, .26); transform: translateY(-2px); }

.fc-count { font-size: .74rem; font-weight: 700; color: #cbb387; }

/* ── the cinema ── */
.cinema-beam {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(760px, 96vw);
  height: 58%;
  transform: translateX(-50%);
  background: linear-gradient(rgba(255, 243, 201, .16), rgba(255, 243, 201, .02));
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity .8s ease .3s;
  pointer-events: none;
}

.overpanel.open .cinema-beam { opacity: 1; }

.cinema-screen {
  width: min(680px, 92vw);
  aspect-ratio: 16 / 9;
  background: #0d0c0a;
  border-radius: 10px;
  border: 10px solid #2b2118;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 60px rgba(255, 240, 190, .12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transform-origin: top center;
  animation: screenRoll .8s var(--ease) both;
  position: relative;
  overflow: hidden;
}

@keyframes screenRoll { from { transform: scaleY(.05); } to { transform: scaleY(1); } }

/* old film flicker */
.cinema-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 2px, transparent 2px 4px);
  animation: filmFlicker .24s steps(2) infinite;
  pointer-events: none;
}

@keyframes filmFlicker { 50% { opacity: .55; } }

.cine-ring {
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 3px solid rgba(255, 237, 196, .5);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 700;
  color: #ffedc4;
}

.cine-ring::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #ffd98a;
  animation: cineSweep 2.4s linear infinite;
}

@keyframes cineSweep { to { transform: rotate(360deg); } }

.cine-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.15rem;
  color: #f4ecd8;
  letter-spacing: .12em;
}

.cine-sub { font-size: .74rem; color: #b8ab90; max-width: 40ch; text-align: center; line-height: 1.7; }

/* ── the paper note ── */
.note-box {
  width: min(420px, 90vw);
  background: linear-gradient(160deg, #fffdf4, #f3e8cd);
  border-radius: 4px 18px 4px 18px;
  padding: 2rem 1.9rem 1.7rem;
  box-shadow: 0 22px 54px -16px rgba(0, 0, 0, .6);
  transform: rotate(-.8deg);
}

.note-box::before {
  content: '📌';
  position: absolute;
  top: -12px;
  left: 26px;
  font-size: 1.3rem;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
}

.note-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: .5rem;
}

.note-body { font-size: .86rem; color: var(--ink-soft); line-height: 1.8; }

/* ── living objects: daruma & plant ── */
#daruma-eye { opacity: 0; transition: opacity .6s ease; }
.daruma-one #daruma-eye { opacity: 1; }

.plant-stage { opacity: 0; transition: opacity 1s ease; }
.plant-s1 .stage-1,
.plant-s2 .stage-1, .plant-s2 .stage-2,
.plant-s3 .stage-1, .plant-s3 .stage-2, .plant-s3 .stage-3 { opacity: 1; }

/* 15. THE SATCHEL — your study tools, carried everywhere
   ============================================================ */
.satchel {
  position: fixed;
  right: 1.2rem;
  bottom: 1.1rem;
  z-index: 930;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}

.satchel-btn {
  width: 62px;
  height: 58px;
  border: none;
  background: none;
  filter: drop-shadow(0 6px 14px rgba(40, 24, 8, .4));
  transition: transform .4s var(--ease);
}

.satchel-btn:hover { transform: translateY(-4px) rotate(-2deg); }

.satchel-btn svg { width: 100%; height: 100%; overflow: visible; }

.satchel-flap {
  transform-box: fill-box;
  transform-origin: top center;
  transition: transform .45s var(--ease-inout);
}

.satchel.open .satchel-flap { transform: rotateX(140deg) scaleY(-.6); }

.satchel-tray {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  align-items: center;
}

.satchel-tool {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--ui-tint);
  box-shadow: 0 3px 12px rgba(58, 46, 24, .22);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px) scale(.7);
  pointer-events: none;
  transition: opacity .35s ease, transform .45s var(--ease), background 1.2s ease;
}

.satchel.open .satchel-tool {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.satchel.open .satchel-tool:nth-child(1) { transition-delay: .12s; }
.satchel.open .satchel-tool:nth-child(2) { transition-delay: .06s; }
.satchel.open .satchel-tool:nth-child(3) { transition-delay: 0s; }

.satchel-tool:hover { transform: translateY(-3px) scale(1.1); }

body.focusing .satchel,
body.focusing .topbar,
body.focusing .signpost-menu,
body.focusing .footnote,
body.focusing .scene-caption {
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}

/* 16. STUDY PANELS — notebook, sky, lantern (above rooms)
   ============================================================ */
.studypanel {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.studypanel.open { display: flex; }

.studypanel-dim {
  position: absolute;
  inset: 0;
  background: rgba(14, 10, 5, .72);
  opacity: 0;
  transition: opacity .5s ease;
}

.studypanel.open .studypanel-dim { opacity: 1; }

.studypanel-box {
  position: relative;
  opacity: 0;
  transform: translateY(20px) scale(.98);
  transition: opacity .5s ease .1s, transform .6s var(--ease) .1s;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.studypanel-box::-webkit-scrollbar { display: none; }

.studypanel.open .studypanel-box { opacity: 1; transform: none; }

.studypanel-close {
  position: absolute;
  top: -12px; right: -12px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--wood);
  color: #fff;
  font-size: 1rem;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  transition: transform .3s var(--ease);
}

.studypanel-close:hover { transform: rotate(90deg) scale(1.08); }

/* ── the lantern start card ── */
.lantern-card {
  width: min(400px, 92vw);
  background: linear-gradient(165deg, #2c2118, #1c150e);
  border: 2px solid rgba(242, 166, 90, .35);
  border-radius: 20px;
  padding: 2.2rem 2rem 1.8rem;
  text-align: center;
  color: #f2e8d0;
}

.lantern-card h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: .4rem;
}

.lantern-card p { font-size: .82rem; color: #b8a888; line-height: 1.75; }

.incense-choice {
  display: flex;
  gap: .8rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.incense-opt {
  flex: 1;
  max-width: 150px;
  background: rgba(242, 166, 90, .08);
  border: 1.5px solid rgba(242, 166, 90, .35);
  border-radius: 14px;
  padding: 1rem .8rem .9rem;
  color: #ffd98a;
  font-family: var(--font-round);
  transition: background .3s ease, transform .35s var(--ease);
}

.incense-opt:hover { background: rgba(242, 166, 90, .2); transform: translateY(-3px); }

.incense-opt .stick { display: block; width: 4px; margin: 0 auto .6rem; background: linear-gradient(#caa878, #8a6a44); border-radius: 2px; }
.incense-opt .stick.short { height: 30px; }
.incense-opt .stick.long  { height: 52px; }
.incense-opt strong { display: block; font-size: 1rem; }
.incense-opt small { font-size: .66rem; color: #b8a888; }

/* ── the focus veil: the world dims around your desk ── */
.focus-veil {
  position: fixed;
  inset: 0;
  z-index: 940;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  background: radial-gradient(ellipse 62% 55% at 50% 46%,
              transparent 0%, rgba(16, 11, 5, .28) 55%, rgba(12, 8, 4, .82) 100%);
}

body.focusing .focus-veil { opacity: 1; }

body.breaking .focus-veil {
  background: radial-gradient(ellipse 70% 62% at 50% 46%,
              transparent 0%, rgba(58, 38, 14, .18) 60%, rgba(44, 28, 10, .55) 100%);
  opacity: 1;
}

.focus-hud {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 975; /* above rooms — the incense stays with you at your desk */
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: auto;
}

body.focusing .focus-hud, body.breaking .focus-hud { display: flex; }

.incense-holder { display: flex; align-items: flex-end; gap: .4rem; height: 74px; }

.incense-live {
  position: relative;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(#e8c66a, #9a7a4e);
  transition: height 1s linear;
}

.incense-live::before { /* the ember */
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff9a4a;
  box-shadow: 0 0 10px 3px rgba(255, 154, 74, .8);
  animation: ember 2.2s ease-in-out infinite;
}

@keyframes ember { 50% { box-shadow: 0 0 16px 5px rgba(255, 154, 74, .95); } }

.incense-live::after { /* the smoke */
  content: '〜';
  position: absolute;
  top: -30px; left: -6px;
  color: rgba(240, 230, 210, .5);
  font-size: 1rem;
  animation: smokeWisp 3.4s ease-in-out infinite;
}

@keyframes smokeWisp {
  0%   { transform: translateY(6px) rotate(0deg); opacity: 0; }
  40%  { opacity: .7; }
  100% { transform: translateY(-14px) rotate(50deg); opacity: 0; }
}

.stick-done {
  width: 5px; height: 12px;
  border-radius: 3px;
  background: #6a5a44;
  opacity: .75;
}

.focus-time {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.5rem;
  color: #ffe9c4;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.focus-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #cbb387;
}

.focus-actions { display: flex; gap: .5rem; margin-top: .2rem; }

.focus-btn {
  border: 1.5px solid rgba(255, 237, 196, .3);
  background: rgba(20, 14, 8, .55);
  color: #e8dcc0;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .1em;
  border-radius: 999px;
  padding: .45rem 1rem;
  transition: background .3s ease;
}

.focus-btn:hover { background: rgba(60, 42, 20, .75); }

/* the tea break spirit */
.break-spirit {
  display: none;
  align-items: center;
  gap: .7rem;
  color: #ffe9c4;
  font-size: .82rem;
  font-weight: 700;
}

body.breaking .break-spirit { display: flex; }
body.breaking .incense-holder, body.breaking .focus-label { display: none; }

.break-spirit svg { width: 44px; height: 44px; animation: spriteBounce 2.6s var(--ease-inout) infinite; }

/* ── the student notebook ── */
.notebook {
  width: min(760px, 94vw);
  background: linear-gradient(#f9f2dd, #efe3c4);
  border-radius: 12px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65), inset 0 0 0 3px rgba(138, 90, 59, .2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

.notebook::before { /* spine shadow */
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 40px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(90, 62, 30, .22), transparent);
  pointer-events: none;
}

.nb-page { padding: 2.1rem 1.9rem 1.8rem; }

.nb-kicker {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #a8895a;
  margin-bottom: .8rem;
}

.nb-id { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.nb-id svg { width: 46px; height: 46px; flex-shrink: 0; }

.nb-name { font-family: var(--font-title); font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1.3; }
.nb-name small { display: block; font-family: var(--font-round); font-weight: 700; font-size: .66rem; color: #a8895a; letter-spacing: .12em; }

.nb-row { font-size: .78rem; color: var(--ink-soft); padding: .3rem 0; border-bottom: 1.5px dashed rgba(138, 90, 59, .2); display: flex; justify-content: space-between; gap: 1rem; }
.nb-row strong { color: var(--ink); }

.nb-stamps { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; }

.nb-stamp {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2.5px solid #c9503a;
  color: #c9503a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .95rem;
  transform: rotate(-6deg);
  background: rgba(201, 80, 58, .06);
}

.nb-stamp:nth-child(2n) { transform: rotate(4deg); }

.nb-stamp.locked {
  border-style: dashed;
  border-color: #c3b18c;
  color: #c3b18c;
  background: none;
}

.nb-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin-top: .8rem; }

.nb-day {
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(138, 90, 59, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  font-weight: 700;
  color: #b3a184;
  position: relative;
}

.nb-day.blank { background: none; }
.nb-day.today { outline: 2px solid var(--leaf); outline-offset: 1px; }

.nb-day.bloom { background: rgba(127, 176, 105, .16); color: transparent; }
.nb-day.bloom::after { content: '🌸'; position: absolute; font-size: .85rem; }

.nb-totals { display: flex; gap: 1rem; margin-top: 1.1rem; }

.nb-total { flex: 1; text-align: center; background: rgba(138, 90, 59, .08); border-radius: 12px; padding: .7rem .4rem; }
.nb-total b { display: block; font-family: var(--font-title); font-size: 1.3rem; color: var(--ink); }
.nb-total span { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a8895a; }

@media (max-width: 640px) {
  .notebook { grid-template-columns: 1fr; }
  .notebook::before { display: none; }
}

/* ── your sky ── */
.sky-box {
  width: min(820px, 94vw);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
  background: #0b1531;
}

.sky-box svg { width: 100%; display: block; }

.sky-meta {
  padding: 1.1rem 1.5rem 1.3rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: #cdd6ec;
}

.sky-meta h2 { font-family: var(--font-title); font-weight: 700; font-size: 1.15rem; color: #f0ead2; }
.sky-meta p { font-size: .74rem; color: #8894b8; }

.my-star { fill: #ffe9a3; }
.my-star.newest { animation: starPulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes starPulse { 50% { transform: scale(1.7); opacity: .7; } }

.constellation-line { stroke: rgba(255, 233, 163, .28); stroke-width: 1; fill: none; }
.constellation-name { font-family: 'Zen Maru Gothic', sans-serif; font-size: 11px; fill: rgba(255, 233, 163, .55); }

/* 17. SMALL UI BITS
   ============================================================ */
.enrol-btn {
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  color: var(--leaf-deep);
  border-bottom: 2px dotted var(--leaf);
  transition: color .3s ease, border-color .3s ease;
}

.enrol-btn:hover { color: var(--ink); border-color: var(--leaf-deep); }

#spirit-note {
  margin-top: 1rem;
  background: linear-gradient(120deg, rgba(255, 233, 163, .55), rgba(255, 217, 138, .35));
  border: 2px dashed rgba(242, 166, 90, .55);
  border-radius: 14px;
  padding: 1rem 1.2rem;
}

/* 14. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  html { scroll-behavior: auto; }
  .cloud-a, .cloud-b, .cloud-c, .birds, .sway, .blade,
  .sign-bob, .gate-enter, .firefly { animation: none !important; }
  .scene-caption { opacity: 1; animation: none; }
}