/* All visual effects remain behind the room's existing text-protecting shade. */
#study .enchantment-layer,
#study .enchantment-scene,
#study .enchantment-scene i {
  position: absolute;
  pointer-events: none;
}
#study .enchantment-layer {
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 900ms ease;
  contain: layout paint;
}
#study[data-enchantment-enabled="true"] .enchantment-layer { opacity: 1; }
#study .enchantment-scene { overflow: hidden; }
#study .enchantment-scene i {
  display: block;
  transform: translate(-50%, -50%);
  animation-delay: var(--enchantment-delay, 0s);
}
#study .enchantment-window {
  border-radius: 48% 48% 25% 20%;
  background: radial-gradient(ellipse at 55% 35%, #d7c5ec13, #f9ccac09 42%, transparent 73%);
  animation: enchantment-window-light 17s ease-in-out infinite;
}
#study .enchantment-candle-glow {
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffbc4e26, #ffb14311 34%, transparent 70%);
  mix-blend-mode: screen;
  animation: enchantment-candlelight 4.9s ease-in-out infinite;
}
#study .enchantment-hearth {
  background: radial-gradient(ellipse, #ff8d2c24, #ffae4c0c 48%, transparent 72%);
  animation: enchantment-candlelight 6.3s ease-in-out infinite reverse;
}
#study .enchantment-flame {
  border-radius: 60% 35% 45% 55%;
  background: radial-gradient(ellipse at 50% 75%, #fff6ca99, #ffd46c66 45%, #ff9d381c 70%, transparent 80%);
  transform-origin: center 90%;
  opacity: .55;
  animation: enchantment-flame 3.1s ease-in-out infinite;
}
#study .enchantment-mote {
  border-radius: 50%;
  background: #f7d69c;
  box-shadow: 0 0 5px 1px #edc17530;
  opacity: 0;
  animation: enchantment-mote var(--enchantment-duration, 20s) linear infinite;
}
#study[data-enchantment-active="false"] .enchantment-scene i {
  animation-play-state: paused;
}

#study .study-back { z-index: 3; }
#study .enchantment-toggle {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top));
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 12px;
  font: 12px/1.2 system-ui, sans-serif;
  color: #ecdbc2;
  background: #21171cc7;
  border: 1px solid #d7bfa444;
  border-radius: 24px;
}
#study .enchantment-toggle-star { font: 22px/16px Georgia, serif; color: #e4c693; }
#study .enchantment-toggle-state { width: 4px; height: 4px; border-radius: 50%; background: #96877a; }
#study .enchantment-toggle[aria-pressed="true"] .enchantment-toggle-state {
  background: #eac990;
  box-shadow: 0 0 6px #eac99066;
}
#study .study-caption h2 { text-wrap: balance; }
#study .study-caption .eyebrow { font-size: 10px; letter-spacing: 2.4px; }
#study .study-actions { gap: 9px; }
#study .study-actions button {
  position: relative;
  min-height: 49px;
  padding: 12px 13px;
  font-size: 14px;
  color: #f1dec1;
  border-color: #d8bc8e55;
  background: #251b22ed;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
#study .study-actions #study-incense,
#study .study-actions #study-meditation { font-size: 13px; }
#study .study-actions #study-altar { color: #2a1924; background: linear-gradient(110deg, #b99a72, #ecd4af); }
#study .study-actions button:hover,
#study .study-actions button:focus-visible {
  border-color: #ead3a7aa;
  box-shadow: 0 0 18px #d8b47617, inset 0 1px 0 #f6dba52b;
}
#study .study-actions button:active { background-color: #49312f; }
#study .study-actions button::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff1cd, transparent);
  transform: scaleX(.4);
  opacity: 0;
  pointer-events: none;
}
#study[data-enchantment-active="true"] .study-actions button:hover::after,
#study[data-enchantment-active="true"] .study-actions button:focus-visible::after {
  animation: enchantment-glint 1.2s ease-out both;
}
#study #study-status { font: 12px/1.6 system-ui, sans-serif; color: #e2cdb2; }
#study #study-status:empty { display: none; }

@keyframes enchantment-candlelight {
  0%, 100% { opacity: .58; }
  27% { opacity: .83; }
  44% { opacity: .67; }
  71% { opacity: .92; }
}
@keyframes enchantment-window-light {
  0%, 100% { opacity: .48; }
  50% { opacity: 1; }
}
@keyframes enchantment-flame {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) scaleY(.97); opacity: .45; }
  37% { transform: translate(-50%, -50%) rotate(3deg) scaleY(1.04); opacity: .7; }
  67% { transform: translate(-50%, -50%) rotate(-1deg) scaleY(.94); opacity: .54; }
}
@keyframes enchantment-mote {
  0%, 100% { opacity: 0; transform: translate(0, 18px); }
  22% { opacity: .44; }
  73% { opacity: .27; }
  99% { opacity: 0; transform: translate(var(--enchantment-drift, 14px), -45px); }
}
@keyframes enchantment-glint {
  0% { opacity: 0; transform: scaleX(.3); }
  45% { opacity: .8; }
  100% { opacity: .3; transform: scaleX(1); }
}

@media (max-width: 600px) {
  #study .enchantment-mote:nth-of-type(n + 24) { display: none; }
  #study .enchantment-toggle { right: 14px; font-size: 11px; padding-inline: 10px; }
  #study .study-back { left: 14px; font-size: 12px; }
}
@media (max-height: 650px) {
  #study { gap: 9px; }
  #study .study-actions button { min-height: 44px; padding: 10px 12px; }
}
@media (max-height: 520px) {
  #study {
    overflow-y: auto;
    overscroll-behavior: contain;
    justify-content: flex-start;
    padding-top: calc(84px + env(safe-area-inset-top));
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
  #study .study-caption h2 { margin-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  #study .enchantment-scene i,
  #study .study-actions button::after { animation: none !important; }
  #study .enchantment-mote { display: none; }
  #study .enchantment-layer,
  #study .study-actions button { transition: none; }
}