/* ============================================================================
   MOON COMPANION — Luna, the letters, and Tokyo time.
   Loaded last, so every rule here can be switched off simply by not adding
   `.moon-addon` to #app. Nothing in this file styles anything the base game
   owns except through that class.
   ============================================================================ */

/* ---------------------------------------------------------------- layers */
.room-layer { position: absolute; inset: 0; pointer-events: none; }
.room-back  { z-index: 1; }
.room-front { z-index: 3; }
.room-layer > * { pointer-events: auto; }
.prop-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.prop-layer > * { pointer-events: auto; }

/* ══════════════════════════════════════════════════════════════ LUNA ══ */
.luna {
  position: absolute;
  width: 30%; max-width: 132px;
  transform-origin: 50% 100%;
  transform: translateX(-50%) scale(var(--d, 1));
  transition-property: left, bottom, transform;
  transition-duration: 0ms, 0ms, 0ms;
  transition-timing-function: cubic-bezier(.34,.02,.4,1), cubic-bezier(.34,.02,.4,1), ease;
  z-index: 5;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.55));
}
.luna.is-gone { opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.luna.is-dusty { filter: drop-shadow(0 5px 7px rgba(0,0,0,.55)) sepia(.5) brightness(.9); }
.luna-inner { transform-origin: 50% 50%; }
.luna.face-left .luna-inner { transform: scaleX(-1); }
.luna-svg { width: 100%; height: auto; overflow: visible; display: block; }
.luna-shadow {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  width: 62%; height: 9px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);
}

/* ---- poses: exactly one silhouette is ever drawn ---- */
.luna .lp { display: none; }
.luna.pose-stand  .lp-stand  { display: block }
.luna.pose-sit    .lp-sit    { display: block }
.luna.pose-loaf   .lp-loaf   { display: block }
.luna.pose-lie    .lp-lie    { display: block }
.luna.pose-curl   .lp-curl   { display: block }
.luna.pose-groom  .lp-groom  { display: block }
.luna.pose-crouch .lp-crouch { display: block }
.luna.pose-pounce .lp-pounce { display: block }
.luna.pose-reach  .lp-reach  { display: block }

/* ---- face ---- */
.luna .eyes > g, .luna .mouth > g { display: none; }
.luna .eyes > [data-x="open"], .luna .mouth > [data-x="neutral"] { display: block; }
.luna.x-closed .eyes > g { display: none } .luna.x-closed .eyes > [data-x="closed"] { display: block }
.luna.x-happy  .eyes > g { display: none } .luna.x-happy  .eyes > [data-x="happy"]  { display: block }
.luna.x-narrow .eyes > g { display: none } .luna.x-narrow .eyes > [data-x="narrow"] { display: block }
.luna.x-wide   .eyes > g { display: none } .luna.x-wide   .eyes > [data-x="wide"]   { display: block }
.luna.x-love   .eyes > g { display: none } .luna.x-love   .eyes > [data-x="love"]   { display: block }
.luna.x-sleep  .eyes > g { display: none } .luna.x-sleep  .eyes > [data-x="sleep"]  { display: block }
.luna.blink:not(.x-sleep):not(.x-closed):not(.x-happy) .eyes > g { display: none }
.luna.blink:not(.x-sleep):not(.x-closed):not(.x-happy) .eyes > [data-x="closed"] { display: block }

.luna.x-happy .mouth > g { display: none } .luna.x-happy .mouth > [data-x="grin"] { display: block }
.luna.x-love  .mouth > g { display: none } .luna.x-love  .mouth > [data-x="grin"] { display: block }
.luna.x-wide  .mouth > g { display: none } .luna.x-wide  .mouth > [data-x="open"] { display: block }

/* the crescent catches the light whatever else she is doing */
.luna .l-moon { animation: lnMoonGleam 3.6s ease-in-out infinite; }
@keyframes lnMoonGleam {
  0%,100% { opacity:.95; filter: drop-shadow(0 0 1.5px rgba(255,215,107,.8)) }
  50% { opacity:1; filter: brightness(1.3) drop-shadow(0 0 4px rgba(255,215,107,.95)) }
}

/* ---- the small constant motions ---- */
.l-rig { transform-origin: 56px 90px; animation: lnBreathe 3.9s ease-in-out infinite; }
@keyframes lnBreathe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.6px)} }
.luna.x-sleep .l-rig { animation: lnBreatheSlow 5.4s ease-in-out infinite; }
@keyframes lnBreatheSlow { 0%,100%{transform:translateY(.6px)} 50%{transform:translateY(-1.8px)} }

/* tails swing about their own base — origins are per pose, in user units,
   because these groups carry no SVG transform attribute of their own */
.luna .l-tail { animation: lnTail 3.1s ease-in-out infinite; }
@keyframes lnTail { 0%,100%{transform:rotate(-3.5deg)} 50%{transform:rotate(3.5deg)} }
.lp-stand  .l-tail { transform-origin: 24px 52px }
.lp-sit    .l-tail { transform-origin: 30px 83px }
.lp-loaf   .l-tail { transform-origin: 22px 80px }
.lp-lie    .l-tail { transform-origin: 18px 76px }
.lp-curl   .l-tail { transform-origin: 90px 76px }
.lp-groom  .l-tail { transform-origin: 28px 82px }
.lp-crouch .l-tail { transform-origin: 20px 68px; animation-duration: 1.5s }
.lp-pounce .l-tail { transform-origin: 16px 50px; animation-duration: 1.1s }
.lp-reach  .l-tail { transform-origin: 30px 82px }

/* ears twitch on their own clock — origins are inside the head's local space */
.luna .l-ear-l { transform-origin: -18px -9px; animation: lnEar 7s ease-in-out infinite; }
.luna .l-ear-r { transform-origin:  18px -9px; animation: lnEar 9s ease-in-out -3s infinite; }
@keyframes lnEar { 0%,88%,100%{transform:rotate(0)} 91%{transform:rotate(-7deg)} 94%{transform:rotate(4deg)} }
/* ears go flat when she is unimpressed — the twitch has to stand down for it */
.luna.x-narrow .l-ear-l, .luna.x-narrow .l-ear-r { animation: none; }
.luna.x-narrow .l-ear-l { transform: rotate(-15deg); }
.luna.x-narrow .l-ear-r { transform: rotate(15deg); }

/* ---- walking ---- */
.luna.is-walking .lp-stand { animation: lnWalkBob .34s ease-in-out infinite; }
@keyframes lnWalkBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2.4px)} }
.luna.is-walking .l-leg-fr { transform-origin: 66px 58px; animation: lnLeg .34s ease-in-out infinite; }
.luna.is-walking .l-leg-fl { transform-origin: 62px 58px; animation: lnLeg .34s ease-in-out -.17s infinite; }
.luna.is-walking .l-leg-br { transform-origin: 34px 58px; animation: lnLeg .34s ease-in-out -.17s infinite; }
.luna.is-walking .l-leg-bl { transform-origin: 28px 58px; animation: lnLeg .34s ease-in-out infinite; }
@keyframes lnLeg { 0%,100%{transform:rotate(-13deg)} 50%{transform:rotate(13deg)} }
.luna.is-walking .l-tail { animation-duration: 1.1s; }

/* ---- one-shot actions ---- */
.luna.a-stretch .l-rig { animation: lnStretch 1.3s ease-in-out; }
@keyframes lnStretch { 0%,100%{transform:scale(1)} 35%{transform:scale(1.16,.86) translate(-6px,4px)} 70%{transform:scale(.96,1.06)} }
.luna.a-rub .l-rig { animation: lnRub 1.5s ease-in-out; }
@keyframes lnRub { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(7px) rotate(4deg)} 55%{transform:translateX(-3px) rotate(-3deg)} 80%{transform:translateX(6px) rotate(3deg)} }
.luna.a-paw .l-reach-r, .luna.a-paw .l-reach-l { transform-origin: 64px 48px; animation: lnPaw .42s ease-in-out infinite; }
.luna.a-paw .l-rig { animation: lnPawLean 1.1s ease-in-out infinite; }
@keyframes lnPaw { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-22deg) translateY(-4px)} }
@keyframes lnPawLean { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
.luna.a-sniff .l-head-in { animation: lnSniff .3s ease-in-out infinite; }
@keyframes lnSniff { 0%,100%{transform:translate(0,0)} 50%{transform:translate(1.5px,1.5px)} }
.luna.a-wiggle .l-rig { animation: lnWiggle .22s ease-in-out infinite; }
@keyframes lnWiggle { 0%,100%{transform:translateX(-1.6px)} 50%{transform:translateX(1.6px)} }
.luna.a-pounce .l-rig { animation: lnPounce .42s cubic-bezier(.2,1.5,.4,1); }
@keyframes lnPounce { 0%{transform:translateY(0) scale(1)} 40%{transform:translateY(-26px) scale(1.06,.94)} 100%{transform:none} }
.luna.a-bolt .l-rig { animation: lnBolt .5s ease-out; }
@keyframes lnBolt { 0%{transform:none} 30%{transform:translate(-10px,-8px) scale(1.08,.92)} 100%{transform:none} }
.luna.a-strut .l-rig { animation: lnStrut 1.4s ease-in-out; }
@keyframes lnStrut { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-3deg) translateY(-3px)} 65%{transform:rotate(3deg) translateY(-3px)} }
.luna.a-circle .l-rig { animation: lnCircle 1.5s ease-in-out; }
@keyframes lnCircle { 0%{transform:rotate(0) scale(1)} 33%{transform:rotate(-9deg) translateX(-7px)} 66%{transform:rotate(9deg) translateX(7px)} 100%{transform:none} }
.luna.a-nom .l-head-in { animation: lnNom .28s ease-in-out infinite; }
@keyframes lnNom { 0%,100%{transform:translateY(0)} 50%{transform:translateY(2.4px)} }
.luna.a-shake .l-rig { animation: lnShake .5s ease-in-out; }
@keyframes lnShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px) rotate(-3deg)} 55%{transform:translateX(5px) rotate(3deg)} 80%{transform:translateX(-3px)} }
.luna.is-purring .l-rig { animation: lnPurr .1s linear infinite; }
@keyframes lnPurr { 0%,100%{transform:translate(0,0)} 25%{transform:translate(.6px,-.4px)} 75%{transform:translate(-.6px,.4px)} }

.luna .lz { animation: lnZzz 3.4s ease-out infinite; opacity: 0; }
.luna .lz2 { animation-delay: 1.2s }
@keyframes lnZzz { 0%{opacity:0; transform:translate(0,0) scale(.6)} 25%{opacity:1} 100%{opacity:0; transform:translate(10px,-26px) scale(1.2)} }

/* ---- her voice ---- */
.luna-bubble {
  position: absolute; left: 50%; bottom: 92%;
  transform: translateX(calc(-50% + var(--bx, 0px))) scale(.9);
  min-width: 60px; max-width: 210px; width: max-content;
  padding: 6px 10px; border-radius: 12px 12px 12px 4px;
  background: rgba(28,16,46,.95);
  border: 1px solid rgba(255,199,90,.5);
  color: #f3e9ff;
  font: 600 11.5px/1.35 'Zen Maru Gothic', sans-serif;
  text-align: center; white-space: pre-line;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.9);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,1.5,.4,1);
  z-index: 3;
}
.luna-bubble.show { opacity: 1; transform: translateX(calc(-50% + var(--bx, 0px))) scale(1); }
.luna-bubble::after {
  content: ''; position: absolute; bottom: -6px; left: 14px;
  border: 6px solid transparent; border-top-color: rgba(28,16,46,.95); border-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════ PROPS ══ */
/* Everything in here is a finger target on a phone, so each one carries an
   invisible pseudo-element that pads its hit area out to a comfortable size
   without changing how big the thing looks. */
.prop {
  position: absolute; transform: translateX(-50%);
  font-size: 19px; line-height: 1; cursor: pointer;
  touch-action: manipulation;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.65));
}
.prop::after { content: ''; position: absolute; inset: -13px; }
.prop.gift { animation: propIn 520ms cubic-bezier(.2,1.6,.4,1) both; }
@keyframes propIn { from{transform:translateX(-50%) scale(0) rotate(-40deg); opacity:0} to{transform:translateX(-50%) scale(1); opacity:1} }
.prop.knocked { animation: knockTip 700ms cubic-bezier(.3,1.2,.4,1) both; transform-origin: 50% 100%; }
@keyframes knockTip { 0%{transform:translateX(-50%) rotate(0)} 60%{transform:translateX(-50%) rotate(88deg) translateY(3px)} 100%{transform:translateX(-50%) rotate(78deg) translateY(3px)} }
.prop.knocked.settled { transform: translateX(-50%) rotate(78deg) translateY(3px); }
.prop.knocked.gone { opacity: 0; transition: opacity 700ms ease; }

/* ---- the letter, lying on the floor ---- */
.lt-letter {
  position: absolute; transform: translateX(-50%);
  width: 46px; height: 32px; cursor: pointer; z-index: 2;
  touch-action: manipulation;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.7));
}
.lt-letter::after { content: ''; position: absolute; inset: -12px -9px; }
.lt-env {
  position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(160deg, #fff8ee, #efe0cd);
  border: 1px solid rgba(120,90,70,.45);
  transform: rotate(-7deg);
}
.lt-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background: linear-gradient(180deg, #f7ead9, #e6d3bb);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: 1px solid rgba(120,90,70,.28);
}
.lt-seal {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
  font-size: 13px; line-height: 1;
}
.seal-rose .lt-env { box-shadow: 0 0 14px -2px rgba(255,90,130,.65); }
.seal-wax .lt-env  { box-shadow: 0 0 14px -3px rgba(180,140,255,.6); }
.lt-shine {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,235,210,.35), transparent 68%);
  animation: ltShine 3.4s ease-in-out infinite; pointer-events: none;
}
@keyframes ltShine { 0%,100%{opacity:.35; transform:scale(.9)} 50%{opacity:.75; transform:scale(1.08)} }
.lt-letter.arriving { animation: ltSlide 1.5s cubic-bezier(.2,.9,.3,1) both; }
@keyframes ltSlide {
  0% { transform: translateX(-50%) translate(-160px, 6px) rotate(-24deg); opacity: 0 }
  35% { opacity: 1 }
  100% { transform: translateX(-50%); opacity: 1 }
}
.lt-letter.nudged { animation: ltNudge 520ms ease-in-out; }
@keyframes ltNudge { 0%,100%{transform:translateX(-50%) rotate(0)} 30%{transform:translateX(-50%) translateX(7px) rotate(9deg)} 65%{transform:translateX(-50%) translateX(-3px) rotate(-5deg)} }
.lt-letter.opening { animation: ltOpen 760ms cubic-bezier(.3,1,.3,1) forwards; }
@keyframes ltOpen {
  0% { transform: translateX(-50%) scale(1); opacity: 1 }
  45% { transform: translateX(-50%) translateY(-46px) scale(1.7) rotate(6deg); opacity: 1 }
  100% { transform: translateX(-50%) translateY(-80px) scale(3.1); opacity: 0 }
}
.lt-petal {
  position: absolute; bottom: 88%; transform: translateX(-50%);
  font-size: 15px; color: #ff8fb8; pointer-events: none;
  animation: ltPetal 3.2s ease-in forwards;
}
@keyframes ltPetal {
  0% { opacity: 0; transform: translateX(-50%) translateY(-60px) rotate(0) }
  25% { opacity: 1 }
  100% { opacity: 0; transform: translateX(-50%) translateY(40px) rotate(220deg) }
}

/* ---- the letter box ---- */
.lt-tin {
  position: absolute; left: 7%; bottom: 5%; transform: translateX(-50%);
  width: 40px; padding: 4px 0 3px; cursor: pointer; z-index: 2;
  touch-action: manipulation;
  border-radius: 4px; text-align: center;
  background: linear-gradient(180deg, #6a3f7a, #40234f);
  border: 1px solid rgba(255,199,90,.5);
  box-shadow: 0 4px 8px -2px rgba(0,0,0,.7);
  transition: transform 160ms ease;
}
.lt-tin:active { transform: translateX(-50%) scale(.93); }
.lt-tin::after { content: ''; position: absolute; inset: -11px -8px; }
.tin-lid { display: block; height: 4px; margin: 0 4px 3px; border-radius: 2px; background: rgba(255,199,90,.75); }
.tin-body { display: block; font: 700 9px/1 'Zen Maru Gothic', sans-serif; color: #ffe6b0; letter-spacing: .08em; }

/* ══════════════════════════════════════════════════════════ THE PUCK ══ */
.luna-puck {
  position: absolute; right: 10px; bottom: 10px; z-index: 8;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(24,14,40,.82);
  border: 1px solid rgba(255,199,90,.55);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  touch-action: manipulation;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.9);
  transition: transform 140ms ease, opacity 300ms ease;
}
.luna-puck:active { transform: scale(.9); }
.lp-face { font-size: 19px; line-height: 1; filter: drop-shadow(0 0 4px rgba(255,199,90,.5)); }
.lp-dot {
  position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%;
  background: #ffc75a; box-shadow: 0 0 7px #ffc75a; display: none;
}
.luna-puck.is-hungry .lp-dot { display: block; animation: pulse 1.2s infinite; }
.luna-puck.is-away { opacity: .45; }
.luna-puck.is-away .lp-face { filter: grayscale(1); }
.luna-puck.is-away::after {
  content: '···'; position: absolute; bottom: -1px; left: 0; right: 0; text-align: center;
  font: 700 10px/1 'DotGothic16', monospace; color: #ffc75a;
}

.luna-stats { display: grid; gap: 7px; margin-bottom: 12px; }
.lstat { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 9px; }
.lstat span { font: 400 8.5px/1 'DotGothic16', monospace; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.lstat-track { height: 7px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; }
.lstat-track i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #a78bfa, #ffc75a); transition: width 500ms ease; }

/* Luna nudging you towards a button you have been ignoring */
.act.luna-point { animation: lunaPoint 1.1s ease-in-out infinite; }
@keyframes lunaPoint {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,199,90,.5), 0 0 14px -6px #ffc75a; }
  50% { box-shadow: 0 0 0 2px #ffc75a, 0 0 26px -2px #ffc75a; }
}

/* the add-on toggle in the menu */
.row-toggle {
  margin-left: auto; width: 34px; height: 19px; border-radius: 12px; flex: none;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
  position: relative; transition: background 220ms ease;
}
.row-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: #cfc8e8; transition: transform 220ms cubic-bezier(.2,1.4,.4,1), background 220ms;
}
.row-toggle.on { background: var(--accentSoft, rgba(255,168,216,.3)); border-color: var(--accent); }
.row-toggle.on::after { transform: translateX(15px); background: var(--accent); }

/* ══════════════════════════════════════════════════════ THE LETTER SHEET */
.letter { animation: letterUnfold 620ms cubic-bezier(.2,.9,.3,1) both; transform-origin: 50% 0; }
@keyframes letterUnfold { from{transform:scaleY(.34) translateY(-14px); opacity:0} to{transform:none; opacity:1} }
.letter-paper {
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(120,90,70,.09) 25px 26px),
    linear-gradient(165deg, #fffaf1, #f2e5d3);
  color: #4a3527;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.8), inset 0 0 40px rgba(190,150,110,.18);
  border: 1px solid rgba(150,115,85,.3);
}
.letter-paper::after {
  content: ''; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  background: radial-gradient(120% 80% at 90% 0%, rgba(255,180,140,.18), transparent 60%);
}
.tone-romantic .letter-paper { background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(160,80,90,.08) 25px 26px), linear-gradient(165deg, #fff6f4, #f6e2e0); }
.tone-mysterious .letter-paper { background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(90,80,140,.09) 25px 26px), linear-gradient(165deg, #f6f3ff, #e4dff2); }
.letter-to { font: 400 9px/1 'DotGothic16', monospace; letter-spacing: .16em; color: #9a7a5e; margin-bottom: 11px; }
.letter-body {
  font: 500 13.5px/1.72 'Zen Maru Gothic', sans-serif;
  white-space: pre-line; min-height: 60px; cursor: pointer;
}
.letter-sign {
  margin-top: 14px; text-align: right;
  font: 600 14px/1 'Shippori Mincho B1', serif; color: #7a4a3a;
  transition: opacity 600ms ease;
}
.letter-foot { margin-top: 12px; }
.letter-reply {
  margin: 0 0 10px auto; max-width: 78%; padding: 9px 12px;
  border-radius: 16px 16px 4px 16px;
  background: var(--accentSoft, rgba(255,168,216,.22));
  border: 1px solid var(--accent);
  font: 600 12.5px/1.4 'Zen Maru Gothic', sans-serif; color: #f3eeff;
  animation: sheetUp 320ms cubic-bezier(.2,.9,.25,1) both;
}
.letter-result { font: 500 12px/1.55 'Zen Maru Gothic', sans-serif; color: #bdb4dd; margin-bottom: 10px; }
.letter-react {
  margin-top: 12px; padding: 11px 12px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  animation: sheetUp 340ms cubic-bezier(.2,.9,.25,1) both;
}
.lr-who { font: 400 8.5px/1 'DotGothic16', monospace; letter-spacing: .18em; color: var(--accent); margin-bottom: 6px; }
/* sheets are dark in every theme at every hour, so this must not follow --ink,
   which flips dark for the light-sky part of the day (see .ability-state) */
.lr-line { font: 600 13px/1.5 'Zen Maru Gothic', sans-serif; color: #f3eeff; }

/* ---- the archive ---- */
.arc-list { display: grid; gap: 8px; }
.arc {
  display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: transform 120ms ease, background 200ms;
}
.arc:active { transform: scale(.98); background: rgba(255,255,255,.09); }
.arc-seal { font-size: 17px; line-height: 1; flex: none; }
.arc-main { display: grid; gap: 3px; min-width: 0; }
.arc-tone { font: 400 8.5px/1 'DotGothic16', monospace; letter-spacing: .16em; color: var(--accent); }
.arc-snip { font: 500 12px/1.35 'Zen Maru Gothic', sans-serif; color: #ddd8f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-time { font: 400 9.5px/1 'DotGothic16', monospace; color: #8b83b0; }

/* ══════════════════════════════════════════════════════════ TOKYO TIME ══
   The same room, lit on a continuous clock. Every value comes from a CSS
   variable that tokyo.js interpolates; nothing here is time-of-day specific. */
.moon-addon .sc .tt-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--tt-s1) 0%, var(--tt-s2) 52%, var(--tt-s3) 100%);
}
.moon-addon .sc .tt-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 34% at var(--tt-glowX) var(--tt-glowY), var(--tt-glow), transparent 68%);
  opacity: .55; mix-blend-mode: screen;
}
.moon-addon .sc .tt-sun {
  position: absolute; left: var(--tt-sunX); top: var(--tt-sunY);
  width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fffdf2, #ffe9a8 52%, #ffbe5e);
  box-shadow: 0 0 60px 20px rgba(255,225,150,.4);
  opacity: var(--tt-sunA); pointer-events: none;
}
/* the moon now rises and sets instead of being pinned to one corner */
.moon-addon .sc .sc-moon {
  left: var(--tt-moonX); top: var(--tt-moonY); right: auto;
  margin: -37px 0 0 -37px;
  opacity: var(--tt-moonA);
  transition: opacity 1200ms ease;
}
.moon-addon .sc .sc-stars { opacity: var(--tt-dark); transition: opacity 1200ms ease; }
.moon-addon .sc .sc-city path { fill: var(--tt-city); transition: fill 1200ms ease; }
/* the hand-placed windows keep their blink (that animates `opacity`); this
   dims them through the daylight hours without fighting it */
.moon-addon .sc .sc-win { fill-opacity: calc(.12 + var(--tt-win) * .88); }

/* windows coming on across the skyline as the evening goes.
   NOTE the box: `.sc svg { inset: 0 }` in themes.css pins .sc-city to the TOP
   of the stage (top+height win over its own `bottom`), so every layer that has
   to line up with the skyline uses top:0 / height:40%, not bottom:18%. */
.moon-addon .sc .tt-win {
  position: absolute; left: 0; right: 0; top: 0; height: 40%;
  opacity: var(--tt-win); pointer-events: none;
  background-image:
    radial-gradient(1.6px 2.2px at 11% 62%, #ffe9a8, transparent),
    radial-gradient(1.6px 2.2px at 17% 48%, #ffd98a, transparent),
    radial-gradient(1.6px 2.2px at 24% 71%, #fff0c4, transparent),
    radial-gradient(1.6px 2.2px at 31% 39%, #ffe9a8, transparent),
    radial-gradient(1.6px 2.2px at 38% 66%, #ffd98a, transparent),
    radial-gradient(1.6px 2.2px at 44% 52%, #fff0c4, transparent),
    radial-gradient(1.6px 2.2px at 52% 74%, #ffe9a8, transparent),
    radial-gradient(1.6px 2.2px at 59% 44%, #ffdba0, transparent),
    radial-gradient(1.6px 2.2px at 66% 68%, #fff0c4, transparent),
    radial-gradient(1.6px 2.2px at 73% 55%, #ffe9a8, transparent),
    radial-gradient(1.6px 2.2px at 81% 72%, #ffd98a, transparent),
    radial-gradient(1.6px 2.2px at 88% 47%, #fff0c4, transparent),
    radial-gradient(1.6px 2.2px at 94% 64%, #ffe9a8, transparent);
  animation: ttWin 9s steps(1) infinite;
}
@keyframes ttWin { 0%,92%{filter:none} 94%{filter:brightness(.6)} 96%{filter:none} }

/* matches .sc-city's rendered box, so the signs sit on the skyline */
.moon-addon .sc .tt-neon {
  position: absolute; left: 0; right: 0; top: 0; height: 40%;
  pointer-events: none; opacity: var(--tt-neon);
}
.moon-addon .ttn {
  position: absolute; left: var(--x); top: var(--y);
  font: 900 var(--s)/1 'Zen Maru Gothic', sans-serif;
  writing-mode: vertical-rl; letter-spacing: .1em;
  color: var(--c);
  text-shadow: 0 0 5px var(--c), 0 0 16px var(--c);
  animation: ttFlick 6.5s infinite; animation-delay: var(--d);
}
@keyframes ttFlick { 0%,93%,100%{opacity:1} 94%{opacity:.25} 95%{opacity:.9} 96%{opacity:.3} 97%{opacity:1} }

.moon-addon .sc .tt-tower { position: absolute; inset: 0; pointer-events: none; }
.moon-addon .sc .tt-tower { inset: 0 0 auto 0; height: 40%; }
.moon-addon .tt-tower i {
  position: absolute; left: 47%; top: 2%; width: 4px; height: 4px; border-radius: 50%;
  background: #ff5a5a; box-shadow: 0 0 8px 2px rgba(255,90,90,.8);
  animation: ttBeacon 2.6s ease-in-out infinite;
}
@keyframes ttBeacon { 0%,70%,100%{opacity:.15} 82%{opacity:1} }

/* the city's own light, pooling along the base of the skyline */
.moon-addon .sc .tt-haze {
  position: absolute; left: -10%; right: -10%; top: 29%; height: 20%;
  pointer-events: none; opacity: var(--tt-haze); filter: blur(9px);
  background: linear-gradient(180deg, transparent, var(--tt-glow) 78%, transparent);
  mix-blend-mode: screen;
}

/* light lying across the floor — moonlight at night, a sunbeam in the morning */
.moon-addon .sc .tt-beam {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  pointer-events: none; opacity: var(--tt-beam); mix-blend-mode: screen;
  background: linear-gradient(102deg, transparent 12%, var(--tt-beamC) 34%, transparent 46%,
                                       transparent 58%, var(--tt-beamC) 74%, transparent 88%);
  filter: blur(4px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
}
.moon-addon .sc .tt-motes { position: absolute; inset: 0; pointer-events: none; opacity: calc(.25 + var(--tt-warm) * .5); }
.moon-addon .tt-motes i {
  position: absolute; left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--tt-beamC); opacity: var(--o);
  animation: ttMote var(--d) ease-in-out infinite alternate;
}
@keyframes ttMote { from { transform: translate(0,0) } to { transform: translate(14px,-22px) } }

/* the base game's own evening/night grade is doing enough on top of this */
.moon-addon.tod-evening .stage::after, .moon-addon.tod-morning .stage::after { opacity: .5; }
.moon-addon.tod-night .stage::after { opacity: .62; }

@media (prefers-reduced-motion: reduce) {
  .luna, .luna * , .lt-letter, .tt-motes i, .ttn { animation: none !important; transition-duration: 220ms !important; }
}