/* ------------------------------------------------------------------ */
/* Ilustraciones de escena                                            */
/* ------------------------------------------------------------------ */

.scene-art {
  isolation: isolate;
}

.scene-illustration {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  filter: brightness(1.18) saturate(1.06) contrast(1.03);
  animation: illustration-reveal 1.1s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.scene-art::before,
.scene-art::after {
  display: none;
}

.scene-vignette {
  z-index: 4;
}

.scene-vignette::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 38% 50% at 82% 12%, rgba(238, 210, 151, 0.1), transparent 70%),
    linear-gradient(90deg, rgba(5, 8, 11, 0.32), transparent 18%, transparent 82%, rgba(5, 8, 11, 0.32));
  pointer-events: none;
}

.scene-card.is-scene-enter {
  animation: scene-arrive 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.scene-card.is-scene-enter .scene-head > * {
  animation: text-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.scene-card.is-scene-enter .scene-head h1 { animation-delay: 0.08s; }
.scene-card.is-scene-enter .last-check { animation-delay: 0.16s; }

.scene-card.is-scene-enter .scene-text p {
  animation: text-rise 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.scene-card.is-scene-enter .scene-text p:nth-child(1) { animation-delay: 0.14s; }
.scene-card.is-scene-enter .scene-text p:nth-child(2) { animation-delay: 0.22s; }
.scene-card.is-scene-enter .scene-text p:nth-child(3) { animation-delay: 0.3s; }
.scene-card.is-scene-enter .scene-text p:nth-child(4) { animation-delay: 0.38s; }

.story-options.is-enter .story-option {
  animation: option-arrive 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.28s + var(--i, 0) * 0.07s);
}

.campaign-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.8;
  transform: scale(1.04);
  transition: transform 1.2s ease, opacity 0.8s ease;
  animation: illustration-reveal 1.4s ease both;
}
.campaign-card:hover .campaign-illustration {
  transform: scale(1.09);
  opacity: 0.95;
}

/* ------------------------------------------------------------------ */
/* Retratos ilustrados                                                */
/* ------------------------------------------------------------------ */

.portrait-illustrated {
  border-radius: 50%;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(201, 164, 92, 0.24),
    inset 0 0 24px rgba(0, 0, 0, 0.4);
}
.portrait-illustrated .hero-portrait-svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.hero-portrait-svg {
  overflow: visible;
}
.portrait-illustrated::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(201, 164, 92, 0.2);
  pointer-events: none;
}

.preview-portrait-stage {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
}
.preview-portrait-stage::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(201, 164, 92, 0.22), transparent 35%, transparent 65%, rgba(201, 164, 92, 0.16), transparent);
  filter: blur(8px);
  animation: slow-spin 18s linear infinite;
  opacity: 0.9;
}
.preview-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.preview-card > :not(.preview-art) {
  position: relative;
  z-index: 2;
}
.preview-art {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  height: 225px;
  z-index: 0;
  opacity: 0.82;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.7) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.7) 55%, transparent 100%);
  pointer-events: none;
}
.preview-art svg {
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: brightness(1.5) saturate(1.15) contrast(1.04);
  animation: illustration-pan 22s ease-in-out infinite alternate;
}
.preview-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 50% at 50% 0%, transparent 38%, rgba(13, 16, 23, 0.34) 100%);
}
.preview-identity {
  position: relative;
  z-index: 2;
}
.preview-stats {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(9, 12, 16, 0.18), rgba(9, 12, 16, 0.64));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.preview-identity-copy {
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Tarjetas de creación                                               */
/* ------------------------------------------------------------------ */

.choice-card {
  overflow: hidden;
  isolation: isolate;
}
.choice-watermark {
  position: absolute;
  right: -18px;
  bottom: -18px;
  z-index: 0;
  color: var(--gold);
  opacity: 0.075;
  transform: rotate(-12deg) scale(0.95);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s ease;
}
.choice-card:hover .choice-watermark {
  opacity: 0.13;
  transform: rotate(-6deg) scale(1.04);
}
.choice-card.is-selected .choice-watermark {
  opacity: 0.2;
  color: var(--gold-bright);
  transform: rotate(-2deg) scale(1.09);
}
.choice-card > *:not(.choice-watermark) {
  position: relative;
  z-index: 1;
}
.choice-card.is-selected {
  animation: selection-pulse 0.55s ease;
}

.creation-step.is-step-enter {
  animation: step-arrive 0.48s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.creation-progress li.is-current .progress-dot {
  animation: dot-pulse 2.6s ease-in-out infinite;
}
.roll-chip {
  animation: stat-pop 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.3) both;
}
.roll-chip:nth-child(2) { animation-delay: 0.05s; }
.roll-chip:nth-child(3) { animation-delay: 0.1s; }
.roll-chip:nth-child(4) { animation-delay: 0.15s; }
.roll-chip:nth-child(5) { animation-delay: 0.2s; }
.roll-chip:nth-child(6) { animation-delay: 0.25s; }

.ability-final strong {
  animation: number-glow 0.7s ease;
}

/* ------------------------------------------------------------------ */
/* Animaciones SVG                                                    */
/* ------------------------------------------------------------------ */

.anim-twinkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 4s ease-in-out infinite;
}
.anim-moon {
  transform-box: fill-box;
  transform-origin: center;
  animation: moon-breathe 9s ease-in-out infinite;
}
.anim-firefly {
  transform-box: fill-box;
  transform-origin: center;
  animation: firefly-drift 7s ease-in-out infinite;
}
.anim-fog {
  transform-box: fill-box;
  transform-origin: center;
  animation: fog-drift 22s ease-in-out infinite alternate;
}
.anim-ember {
  transform-box: fill-box;
  transform-origin: center;
  animation: ember-rise 6s linear infinite;
}
.anim-smoke {
  transform-box: fill-box;
  transform-origin: center;
  animation: smoke-rise 9s ease-in-out infinite;
}
.anim-flicker {
  transform-box: fill-box;
  transform-origin: center;
  animation: flame-flicker 1.8s ease-in-out infinite;
}
.anim-fire {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: fire-dance 1.4s ease-in-out infinite;
}
.anim-window {
  transform-box: fill-box;
  transform-origin: center;
  animation: window-flicker 5.5s ease-in-out infinite;
}
.anim-sway {
  animation: tree-sway 7s ease-in-out infinite alternate;
}
.anim-godrays {
  transform-box: fill-box;
  transform-origin: center top;
  animation: godrays 12s ease-in-out infinite;
}
.anim-aurora {
  transform-box: fill-box;
  transform-origin: center;
  animation: aurora-drift 14s ease-in-out infinite alternate;
}
.anim-snow {
  animation: snow-drift 11s linear infinite;
}
.anim-rain {
  animation: rain-fall 2.4s linear infinite;
}
.anim-shimmer {
  animation: water-shimmer 4.6s ease-in-out infinite;
}
.anim-cloud {
  animation: cloud-drift 34s ease-in-out infinite alternate;
}
.anim-chain {
  transform-box: fill-box;
  transform-origin: center top;
  animation: chain-sway 8s ease-in-out infinite alternate;
}
.anim-birds {
  animation: birds-drift 16s ease-in-out infinite alternate;
}
.anim-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: dragon-blink 7s ease-in-out infinite;
}
.anim-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: glow-pulse 3.4s ease-in-out infinite;
}
.anim-rune-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: slow-spin 24s linear infinite;
}
.anim-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: gentle-float 7s ease-in-out infinite;
}
.anim-falling-leaf {
  transform-box: fill-box;
  transform-origin: center;
  animation: leaf-fall 12s ease-in-out infinite;
}

/* ------------------------------------------------------------------ */
/* Combate: impactos y curación                                       */
/* ------------------------------------------------------------------ */

.combatant {
  overflow: hidden;
}
.combatant.combat-fx-damage {
  animation: hit-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.combatant.combat-fx-damage::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(220, 70, 56, 0.4), transparent 68%);
  animation: hit-flash 0.55s ease-out both;
  z-index: 4;
}
.combatant.combat-fx-heal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(121, 196, 139, 0.34), transparent 70%);
  animation: heal-flash 0.9s ease-out both;
  z-index: 4;
}
.floating-fx {
  position: absolute;
  top: 34%;
  left: 50%;
  z-index: 8;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  animation: fx-float 1.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.floating-fx.damage { color: #f09a8e; }
.floating-fx.heal { color: #a8e0b4; }
.floating-fx.critical {
  color: #ffd37d;
  font-size: 1.85rem;
  text-shadow: 0 0 18px rgba(240, 190, 90, 0.6), 0 2px 8px #000;
}

.combat-screen.is-critical .battlefield {
  animation: battlefield-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.order-chip.is-current {
  animation: current-chip 2.4s ease-in-out infinite;
}

/* ------------------------------------------------------------------ */
/* Dados: estallido y brillo                                          */
/* ------------------------------------------------------------------ */

.dice-panel {
  position: relative;
  overflow: hidden;
}
.dice-panel::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(201, 164, 92, 0.05), transparent 28%, transparent 72%, rgba(201, 164, 92, 0.04), transparent);
  animation: slow-spin 30s linear infinite;
  pointer-events: none;
}
.dice-panel > * {
  position: relative;
  z-index: 1;
}
.dice-panel > .dice-burst {
  position: absolute;
  z-index: 0;
}
.dice-panel .roll-verdict,
.dice-panel .roll-lines {
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.dice-panel:not(.is-settled) .roll-verdict,
.dice-panel:not(.is-settled) .roll-lines {
  opacity: 0;
  transform: translateY(4px);
}
.dice-panel:not(.is-settled) .roll-breakdown {
  opacity: 0.4;
}
.dice-face {
  animation: dice-tumble-3d 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.dice-panel.is-settled .dice-face {
  animation: dice-settle 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.dice-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.dice-panel.is-settled .dice-burst {
  animation: burst-ring 0.75s ease-out both;
}
.dice-burst::before,
.dice-burst::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
}
.dice-burst::after {
  inset: 18px;
  border-color: rgba(201, 164, 92, 0.45);
}
.roll-total .roll-number {
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.dice-panel:not(.is-settled) .roll-number {
  opacity: 0.12;
  transform: scale(0.92);
}
.roll-verdict {
  animation: verdict-in 0.45s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.roll-verdict.critical {
  animation: verdict-critical 0.7s ease both;
}

.roller-result.is-rolling .roller-total {
  animation: number-pop 0.5s cubic-bezier(0.2, 1.3, 0.3, 1) both;
}

/* ------------------------------------------------------------------ */
/* Transiciones de pantalla secundarias                               */
/* ------------------------------------------------------------------ */

.sheet-panel,
.settings-panel,
.save-slot,
.codex-card,
.journal-entry {
  animation: panel-arrive 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.codex-card:nth-child(2n), .journal-entry:nth-child(2n) { animation-delay: 0.04s; }
.codex-card:nth-child(3n), .journal-entry:nth-child(3n) { animation-delay: 0.08s; }

.ending-head h1,
.ending-card,
.ending-text,
.ending-stats,
.ending-actions {
  animation: text-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ending-card { animation-delay: 0.14s; }
.ending-text { animation-delay: 0.24s; }
.ending-stats { animation-delay: 0.32s; }
.ending-actions { animation-delay: 0.4s; }

/* ------------------------------------------------------------------ */
/* Keyframes                                                          */
/* ------------------------------------------------------------------ */

@keyframes illustration-reveal {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes illustration-pan {
  from { transform: scale(1.02) translateX(-1.4%); }
  to { transform: scale(1.08) translateX(1.4%); }
}
@keyframes scene-arrive {
  from { opacity: 0; transform: translateY(14px) scale(0.995); }
  to { opacity: 1; transform: none; }
}
@keyframes text-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes option-arrive {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes step-arrive {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes selection-pulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 164, 92, 0.3); }
  45% { box-shadow: 0 0 0 5px rgba(201, 164, 92, 0.08); }
  100% { box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.18); }
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 164, 92, 0.25); }
  50% { box-shadow: 0 0 0 5px rgba(201, 164, 92, 0); }
}
@keyframes stat-pop {
  from { opacity: 0; transform: scale(0.7) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}
@keyframes number-glow {
  0% { color: var(--gold-bright); text-shadow: 0 0 14px rgba(201, 164, 92, 0.4); }
  100% { text-shadow: none; }
}
@keyframes slow-spin {
  to { transform: rotate(360deg); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes moon-breathe {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.025); }
}
@keyframes firefly-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  35% { opacity: 0.9; }
  50% { transform: translate(22px, -26px); opacity: 0.7; }
  75% { transform: translate(-12px, -12px); opacity: 0.4; }
}
@keyframes fog-drift {
  from { transform: translateX(-18px); opacity: 0.55; }
  to { transform: translateX(28px); opacity: 1; }
}
@keyframes ember-rise {
  0% { transform: translateY(10px) scale(0.7); opacity: 0; }
  15% { opacity: 0.8; }
  70% { opacity: 0.55; }
  100% { transform: translateY(-170px) translateX(18px) scale(1.1); opacity: 0; }
}
@keyframes smoke-rise {
  0% { transform: translateY(14px) scale(0.9); opacity: 0; }
  30% { opacity: 0.5; }
  100% { transform: translateY(-76px) scale(1.2); opacity: 0; }
}
@keyframes flame-flicker {
  0%, 100% { opacity: 0.65; transform: scaleY(0.96) scaleX(1); }
  35% { opacity: 1; transform: scaleY(1.08) scaleX(0.96); }
  70% { opacity: 0.78; transform: scaleY(0.98) scaleX(1.03); }
}
@keyframes fire-dance {
  0%, 100% { transform: scaleY(0.94) scaleX(1.02) translateY(1px); }
  30% { transform: scaleY(1.08) scaleX(0.94) translateY(-1px); }
  60% { transform: scaleY(0.97) scaleX(1.04) translateY(0); }
}
@keyframes window-flicker {
  0%, 100% { opacity: 0.7; }
  12% { opacity: 0.9; }
  16% { opacity: 0.58; }
  22% { opacity: 0.86; }
  60% { opacity: 0.72; }
}
@keyframes tree-sway {
  from { transform: rotate(-0.7deg); }
  to { transform: rotate(0.8deg); }
}
@keyframes godrays {
  0%, 100% { opacity: 0.1; transform: translateX(-6px); }
  50% { opacity: 0.22; transform: translateX(6px); }
}
@keyframes aurora-drift {
  0% { transform: translateX(-30px) skewX(-3deg); opacity: 0.7; }
  100% { transform: translateX(30px) skewX(3deg); opacity: 1; }
}
@keyframes snow-drift {
  from { transform: translateY(-30px) translateX(0); opacity: 0.1; }
  30% { opacity: 0.45; }
  to { transform: translateY(220px) translateX(-30px); opacity: 0; }
}
@keyframes rain-fall {
  from { transform: translateY(-70px); opacity: 0.1; }
  30% { opacity: 0.4; }
  to { transform: translateY(160px); opacity: 0.05; }
}
@keyframes water-shimmer {
  0%, 100% { opacity: 0.12; transform: translateX(-8px); }
  50% { opacity: 0.45; transform: translateX(8px); }
}
@keyframes cloud-drift {
  from { transform: translateX(-22px); }
  to { transform: translateX(26px); }
}
@keyframes chain-sway {
  from { transform: rotate(-0.5deg); opacity: 0.4; }
  to { transform: rotate(0.6deg); opacity: 0.65; }
}
@keyframes birds-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(32px, -14px); }
}
@keyframes dragon-blink {
  0%, 93%, 100% { transform: scaleY(1); opacity: 1; }
  96% { transform: scaleY(0.08); opacity: 0.5; }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 4px rgba(240, 206, 126, 0.2)); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(240, 206, 126, 0.55)); }
}
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes leaf-fall {
  0% { transform: translate(0, -30px) rotate(0deg); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: translate(-50px, 180px) rotate(120deg); opacity: 0; }
}
@keyframes hit-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
@keyframes hit-flash {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes heal-flash {
  from { opacity: 1; transform: scale(0.85); }
  to { opacity: 0; transform: scale(1.15); }
}
@keyframes fx-float {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(0.75); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  70% { opacity: 1; transform: translate(-50%, -34px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(0.95); }
}
@keyframes battlefield-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(5px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, -1px); }
}
@keyframes current-chip {
  0%, 100% { box-shadow: 0 0 12px rgba(201, 164, 92, 0.08); }
  50% { box-shadow: 0 0 22px rgba(201, 164, 92, 0.2); }
}
@keyframes dice-tumble-3d {
  0% { transform: rotate(-28deg) scale(0.55); opacity: 0; }
  45% { transform: rotate(18deg) scale(1.1); opacity: 1; }
  72% { transform: rotate(-6deg) scale(0.97); }
  100% { transform: rotate(-8deg) scale(1); }
}
@keyframes dice-settle {
  0% { transform: rotate(-8deg) scale(1); }
  45% { transform: rotate(2deg) scale(1.08); }
  100% { transform: rotate(-8deg) scale(1); }
}
@keyframes burst-ring {
  0% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes verdict-in {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes verdict-critical {
  0% { opacity: 0; transform: scale(0.6); }
  45% { opacity: 1; transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes number-pop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes panel-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes dialog-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal[open] .modal-shell,
.tutorial-dialog[open] .tutorial-shell,
.roller-dialog[open] .roller-shell {
  animation: modal-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.modal::backdrop,
.tutorial-dialog::backdrop,
.roller-dialog::backdrop,
dialog.dice-overlay::backdrop {
  animation: dialog-backdrop-in 0.25s ease both;
}

@media (max-width: 760px) {
  .preview-art { height: 150px; }
  .choice-watermark { opacity: 0.05; }
  .scene-illustration { animation-duration: 0.8s; }
}