:root {
     --ink: #1a0e2e;
     --parchment: #f5edd8;
     --parchment-dark: #e8d9b8;
     --gold: #c9933a;
     --gold-light: #f0c060;
     --gold-glow: #ffd97055;
     --spine: #2a0a4e;
     --jewel: #7b2fff;
     --jewel-glow: #a855f740;
     --crimson: #8b1a1a;
     --emerald: #1a5c3a;
     --dust: #ffffff08;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     font-family: 'Crimson Pro', serif;
     background: radial-gradient(ellipse at 60% 40%, #1e0c3e 0%, #0d0517 60%, #000 100%);
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     position: relative;
 }

 body::before {
     content: '';
     position: fixed;
     inset: 0;
     background-image:
         radial-gradient(1px 1px at 10% 20%, #ffffff22, transparent),
         radial-gradient(1px 1px at 30% 80%, #c9933a33, transparent),
         radial-gradient(1px 1px at 70% 15%, #ffffff1a, transparent),
         radial-gradient(1px 1px at 85% 60%, #c9933a22, transparent),
         radial-gradient(2px 2px at 20% 55%, #7b2fff22, transparent),
         radial-gradient(1px 1px at 90% 35%, #ffffff18, transparent);
     pointer-events: none;
     z-index: 0;
     animation: twinkle 6s ease-in-out infinite alternate;
 }

 @keyframes twinkle {
     0% {
         opacity: 0.4;
         transform: scale(1);
     }

     100% {
         opacity: 1;
         transform: scale(1.02);
     }
 }

 .orb {
     position: fixed;
     border-radius: 50%;
     filter: blur(60px);
     pointer-events: none;
     z-index: 0;
     animation: float-orb 12s ease-in-out infinite alternate;
 }

 .orb-1 {
     width: 300px;
     height: 300px;
     background: #7b2fff18;
     top: -80px;
     left: -80px;
     animation-delay: 0s;
 }

 .orb-2 {
     width: 200px;
     height: 200px;
     background: #c9933a15;
     bottom: -50px;
     right: -50px;
     animation-delay: -4s;
 }

 .orb-3 {
     width: 150px;
     height: 150px;
     background: #2233ff12;
     top: 50%;
     right: 10%;
     animation-delay: -8s;
 }

 @keyframes float-orb {
     0% {
         transform: translate(0, 0) scale(1);
     }

     100% {
         transform: translate(30px, 30px) scale(1.15);
     }
 }

 #app {
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     padding: 12px;
 }

 .screen {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     animation: screen-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
 }

 @keyframes screen-in {
     from {
         opacity: 0;
         transform: translateY(24px) scale(0.97);
     }

     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 /* ====== COVER ====== */
 .scene {
     perspective: 1800px;
     width: min(320px, 90vw);
     height: min(430px, 70vh);
     position: relative;
 }

 .book-3d {
     width: 100%;
     height: 100%;
     position: relative;
     transform-style: preserve-3d;
     transform: rotateY(-25deg) rotateX(8deg);
     transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
     cursor: pointer;
     filter: drop-shadow(-20px 30px 60px rgba(0, 0, 0, 0.7));
 }

 .book-3d:hover {
     transform: rotateY(-10deg) rotateX(4deg) scale(1.04);
 }

 .book-3d.opening {
     transform: rotateY(10deg) rotateX(2deg) scale(1.06);
 }

 .book-face {
     position: absolute;
     inset: 0;
     background: linear-gradient(160deg, #3a1a7a 0%, #1e0840 50%, #0d0320 100%);
     border-radius: 4px 20px 20px 4px;
     backface-visibility: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border-right: 1px solid #c9933a33;
 }

 .book-face::before {
     content: '';
     position: absolute;
     inset: 14px;
     border: 1px solid #c9933a44;
     border-radius: 2px 16px 16px 2px;
     pointer-events: none;
 }

 .cover-shimmer {
     position: absolute;
     top: -50%;
     left: -60%;
     width: 60%;
     height: 200%;
     background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%);
     animation: shimmer 4s ease-in-out infinite;
     pointer-events: none;
 }

 @keyframes shimmer {

     0%,
     100% {
         transform: translateX(0);
     }

     50% {
         transform: translateX(500px);
     }
 }

 .cover-emblem {
     font-size: clamp(50px, 10vw, 70px);
     filter: drop-shadow(0 0 20px #c9933a88);
     animation: pulse-glow 3s ease-in-out infinite alternate;
     margin-bottom: 16px;
 }

 @keyframes pulse-glow {
     from {
         filter: drop-shadow(0 0 10px #c9933a55);
         transform: scale(1);
     }

     to {
         filter: drop-shadow(0 0 30px #c9933aaa);
         transform: scale(1.05);
     }
 }

 .cover-title {
     font-family: 'Cinzel Decorative', serif;
     font-weight: 700;
     font-size: clamp(18px, 5vw, 28px);
     color: var(--gold-light);
     text-align: center;
     letter-spacing: 3px;
     text-shadow: 0 0 20px #c9933a88, 0 2px 4px rgba(0, 0, 0, 0.8);
     line-height: 1.2;
     padding: 0 20px;
 }

 .cover-subtitle {
     font-family: 'Crimson Pro', serif;
     font-style: italic;
     color: #c9933a99;
     font-size: clamp(12px, 3vw, 15px);
     margin-top: 8px;
     letter-spacing: 2px;
 }

 .cover-divider {
     width: 80px;
     height: 1px;
     background: linear-gradient(90deg, transparent, #c9933a66, transparent);
     margin: 12px auto;
 }

 .cover-click-hint {
     font-family: 'Crimson Pro', serif;
     font-size: clamp(11px, 2.5vw, 13px);
     color: #c9933a66;
     margin-top: 12px;
     letter-spacing: 2px;
     animation: blink 2s ease-in-out infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 0.4;
     }

     50% {
         opacity: 1;
     }
 }

 .book-spine {
     position: absolute;
     top: 0;
     left: -28px;
     width: 28px;
     height: 100%;
     background: linear-gradient(180deg, #2a0a4e 0%, #1a0535 50%, #0d0220 100%);
     transform: rotateY(90deg) translateZ(-14px) translateX(-14px);
     border-radius: 4px 0 0 4px;
     border-left: 2px solid #c9933a44;
 }

 .book-back {
     position: absolute;
     inset: 0;
     background: linear-gradient(160deg, #1a0840, #0d0320);
     border-radius: 4px 20px 20px 4px;
     backface-visibility: hidden;
     transform: rotateY(180deg);
 }

 .book-pages-side {
     position: absolute;
     top: 3px;
     right: -18px;
     width: 18px;
     height: calc(100% - 6px);
     background: linear-gradient(90deg, #d4c9b0 0%, #e8dcc0 40%, #f0e4cc 100%);
     transform: rotateY(-90deg) translateZ(-9px) translateX(9px);
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     overflow: hidden;
 }

 .page-line {
     height: 1px;
     background: rgba(0, 0, 0, 0.08);
     width: 100%;
 }

 /* ====== SHARED SPREAD ====== */
 .book-spread-wrapper {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* --- Desktop: side-by-side --- */
 .book-spread {
     position: relative;
     display: flex;
     width: min(580px, 96vw);
     animation: book-open-anim 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
     filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
 }

 @keyframes book-open-anim {
     0% {
         transform: rotateX(50deg) rotateY(-15deg) scale(0.75);
         opacity: 0;
     }

     60% {
         transform: rotateX(6deg) rotateY(0deg) scale(1.01);
         opacity: 1;
     }

     100% {
         transform: rotateX(3deg) rotateY(0deg) scale(1);
         opacity: 1;
     }
 }

 .spine-crease {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 4px;
     height: 100%;
     background: linear-gradient(90deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.15));
     z-index: 5;
 }

 .page-left,
 .page-right {
     width: 50%;
     background: var(--parchment);
     padding: clamp(14px, 3vw, 28px) clamp(12px, 2.5vw, 24px);
     position: relative;
     overflow: hidden;
     min-height: clamp(340px, 55vh, 420px);
 }

 .page-left {
     border-radius: 16px 0 0 16px;
     background: linear-gradient(105deg, #f5edd8 0%, #ede0c0 100%);
     box-shadow: inset -8px 0 20px rgba(0, 0, 0, 0.12), inset 4px 0 8px rgba(255, 255, 255, 0.4);
 }

 .page-right {
     border-radius: 0 16px 16px 0;
     background: linear-gradient(255deg, #f0e6cc 0%, #ede0c0 100%);
     box-shadow: inset 8px 0 20px rgba(0, 0, 0, 0.1), inset -4px 0 8px rgba(255, 255, 255, 0.3);
 }

 .page-left::before,
 .page-right::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
     opacity: 0.5;
     pointer-events: none;
     border-radius: inherit;
 }

 /* ====== MOBILE: stack pages ====== */
 @media (max-width: 520px) {
     .book-spread {
         flex-direction: column;
         width: min(340px, 94vw);
         filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.6));
     }

     .spine-crease {
         top: 48%;
         left: 0;
         transform: translateY(-50%);
         width: 100%;
         height: 4px;
         background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.15));
     }

     .page-left {
         width: 100%;
         border-radius: 16px 16px 0 0;
         box-shadow: inset 0 -8px 20px rgba(0, 0, 0, 0.12);
         min-height: auto;
     }

     .page-right {
         width: 100%;
         border-radius: 0 0 16px 16px;
         box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.1);
         min-height: auto;
     }

     /* result spread mobile */
     .result-spread {
         flex-direction: column;
         width: min(340px, 94vw) !important;
     }

     .result-page-left,
     .result-page-right {
         width: 100% !important;
         border-radius: 0 !important;
     }

     .result-page-left {
         border-radius: 16px 16px 0 0 !important;
         min-height: 220px;
     }

     .result-page-right {
         border-radius: 0 0 16px 16px !important;
     }

     .result-spread .spine-crease {
         top: auto;
         left: 0;
         width: 100%;
         height: 4px;
         transform: none;
         background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.25));
     }

     .scene {
         width: min(280px, 85vw);
         height: min(380px, 65vh);
     }
 }

 /* ====== PAGE CONTENT ====== */
 .page-header {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(9px, 2vw, 13px);
     color: var(--gold);
     letter-spacing: 1.5px;
     text-align: center;
     margin-bottom: 4px;
     opacity: 0.8;
 }

 .page-question {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(11px, 2.2vw, 14px);
     color: var(--ink);
     text-align: center;
     margin-bottom: 10px;
     line-height: 1.4;
 }

 .divider-ornament {
     text-align: center;
     color: var(--gold);
     font-size: 14px;
     margin: 5px 0;
     opacity: 0.6;
 }

 .animals-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 6px;
 }

 .animal-tile {
     background: rgba(139, 103, 55, 0.08);
     border: 1px solid rgba(139, 103, 55, 0.2);
     border-radius: 8px;
     padding: clamp(5px, 1.5vw, 8px);
     text-align: center;
     animation: tile-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
 }

 .animal-tile:nth-child(1) {
     animation-delay: 0.05s;
 }

 .animal-tile:nth-child(2) {
     animation-delay: 0.10s;
 }

 .animal-tile:nth-child(3) {
     animation-delay: 0.15s;
 }

 .animal-tile:nth-child(4) {
     animation-delay: 0.20s;
 }

 .animal-tile:nth-child(5) {
     animation-delay: 0.25s;
 }

 @keyframes tile-in {
     from {
         opacity: 0;
         transform: translateY(8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .animal-icon {
     font-size: clamp(18px, 4vw, 24px);
     line-height: 1;
 }

 .animal-name {
     font-family: 'Crimson Pro', serif;
     font-size: clamp(9px, 2vw, 12px);
     color: var(--ink);
     font-weight: 600;
     margin-top: 2px;
 }

 /* right page decoration section — removed animals, just YES/NO */
 .right-page-inner {
     display: flex;
     flex-direction: column;
     height: 80%;
     justify-content: space-between;
 }

 .page-decorative-art {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     padding: 8px 0;
     opacity: 0.55;
     flex: 1;
 }

 .deco-rune {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(24px, 6vw, 38px);
     color: var(--gold);
     text-shadow: 0 0 12px #c9933a44;
     animation: rune-pulse 4s ease-in-out infinite alternate;
 }

 @keyframes rune-pulse {
     from {
         text-shadow: 0 0 6px #c9933a33;
         transform: scale(1);
     }

     to {
         text-shadow: 0 0 18px #c9933a77;
         transform: scale(1.04);
     }
 }

 .deco-lines {
     display: flex;
     flex-direction: column;
     gap: 5px;
     align-items: center;
     width: 100%;
     padding: 0 8px;
 }

 .deco-line {
     height: 1px;
     width: 100%;
     background: linear-gradient(90deg, transparent, #c9933a55, transparent);
 }

 .deco-verse {
     font-family: 'Crimson Pro', serif;
     font-style: italic;
     font-size: clamp(10px, 2.2vw, 13px);
     color: #8b7355;
     text-align: center;
     line-height: 1.5;
     padding: 0 4px;
 }

 .answer-buttons {
     display: flex;
     gap: 10px;
     justify-content: center;
     margin-top: 10px;
 }

 .btn-yes,
 .btn-no {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(9px, 2vw, 12px);
     padding: clamp(7px, 2vw, 10px) clamp(14px, 4vw, 22px);
     border: none;
     border-radius: 30px;
     cursor: pointer;
     letter-spacing: 1px;
     transition: all 0.2s ease;
     flex: 1;
 }

 .btn-yes {
     background: linear-gradient(135deg, #1a5c3a, #2a8a58);
     color: #d4f5e4;
     box-shadow: 0 4px 14px rgba(26, 92, 58, 0.5);
 }

 .btn-yes:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(26, 92, 58, 0.6);
 }

 .btn-no {
     background: linear-gradient(135deg, #8b1a1a, #c42e2e);
     color: #fde4e4;
     box-shadow: 0 4px 14px rgba(139, 26, 26, 0.5);
 }

 .btn-no:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(139, 26, 26, 0.6);
 }

 .page-progress {
     display: flex;
     gap: 6px;
     justify-content: center;
     margin-top: 10px;
 }

 .progress-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #c9933a44;
     border: 1px solid #c9933a66;
     transition: all 0.3s ease;
 }

 .progress-dot.active {
     background: var(--gold);
     box-shadow: 0 0 6px var(--gold);
 }

 .progress-dot.done {
     background: #c9933a66;
 }

 .page-number {
     position: absolute;
     bottom: 10px;
     font-family: 'Crimson Pro', serif;
     font-size: 12px;
     color: #8b7355;
     font-style: italic;
 }

 .page-left .page-number {
     left: 16px;
 }

 .page-right .page-number {
     right: 16px;
 }

 .corner-deco {
     position: absolute;
     width: 28px;
     height: 28px;
     opacity: 0.25;
 }

 .corner-deco svg {
     width: 100%;
     height: 100%;
 }

 /* ====== CHOOSE SCREEN ====== */
 .choose-spread {
     position: relative;
     display: flex;
     width: min(580px, 96vw);
     animation: book-open-anim 1s cubic-bezier(0.16, 1, 0.3, 1) both;
     filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
 }

 .choose-page {
     width: 50%;
     background: var(--parchment);
     padding: clamp(16px, 3vw, 24px) clamp(12px, 2.5vw, 20px) clamp(24px, 5vw, 36px);
     position: relative;
     overflow: hidden;
 }

 .choose-page-left {
     border-radius: 16px 0 0 16px;
     background: linear-gradient(105deg, #f5edd8 0%, #ede0c0 100%);
     box-shadow: inset -8px 0 20px rgba(0, 0, 0, 0.12);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .choose-page-right {
     border-radius: 0 16px 16px 0;
     background: linear-gradient(255deg, #f0e6cc 0%, #ede0c0 100%);
     box-shadow: inset 8px 0 20px rgba(0, 0, 0, 0.1);
 }

 .choose-page-left::before,
 .choose-page-right::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
     opacity: 0.5;
     pointer-events: none;
     border-radius: inherit;
 }

 .big-emote {
     font-size: clamp(40px, 10vw, 60px);
     filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
     animation: float-book 3s ease-in-out infinite alternate;
 }

 @keyframes float-book {
     from {
         transform: translateY(0);
     }

     to {
         transform: translateY(-8px);
     }
 }

 .left-title {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(11px, 2.5vw, 15px);
     color: var(--ink);
     text-align: center;
     margin-top: 12px;
     line-height: 1.4;
     font-weight: 700;
 }

 .left-subtitle {
     font-family: 'Crimson Pro', serif;
     font-style: italic;
     font-size: clamp(11px, 2.2vw, 13px);
     color: #7a6040;
     text-align: center;
     margin-top: 6px;
 }

 .right-title {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(8px, 1.8vw, 11px);
     color: var(--gold);
     text-align: center;
     letter-spacing: 1.5px;
     margin-bottom: 10px;
 }

 .animals-choose-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 4px;
 }

 .choose-animal {
     background: rgba(139, 103, 55, 0.1);
     border: 1px solid rgba(139, 103, 55, 0.22);
     border-radius: 8px;
     padding: 5px 3px;
     text-align: center;
     animation: tile-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
 }

 .choose-animal:nth-child(1) {
     animation-delay: 0.05s
 }

 .choose-animal:nth-child(2) {
     animation-delay: 0.1s
 }

 .choose-animal:nth-child(3) {
     animation-delay: 0.15s
 }

 .choose-animal:nth-child(4) {
     animation-delay: 0.2s
 }

 .choose-animal:nth-child(5) {
     animation-delay: 0.25s
 }

 .choose-animal:nth-child(6) {
     animation-delay: 0.3s
 }

 .choose-animal:nth-child(7) {
     animation-delay: 0.35s
 }

 .choose-animal:nth-child(8) {
     animation-delay: 0.4s
 }

 .choose-animal:nth-child(9) {
     animation-delay: 0.45s
 }

 .choose-animal:nth-child(10) {
     animation-delay: 0.5s
 }

 .choose-animal .icon {
     font-size: clamp(14px, 3.5vw, 20px);
 }

 .choose-animal .label {
     font-family: 'Crimson Pro', serif;
     font-size: clamp(8px, 1.8vw, 10px);
     color: var(--ink);
     font-weight: 600;
 }

 .btn-begin {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(9px, 2vw, 11px);
     letter-spacing: 1px;
     padding: 10px 16px;
     background: linear-gradient(135deg, #6a2fc0, #9255e8);
     color: #f0d898;
     border: 1px solid #c9933a55;
     border-radius: 30px;
     cursor: pointer;
     margin-top: 12px;
     width: 100%;
     box-shadow: 0 4px 18px rgba(106, 47, 192, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
     transition: all 0.2s;
 }

 .btn-begin:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(106, 47, 192, 0.65);
 }

 /* mobile choose */
 @media (max-width: 520px) {
     .choose-spread {
         flex-direction: column;
         width: min(340px, 94vw);
     }

     .choose-page {
         width: 100%;
     }

     .choose-page-left {
         border-radius: 16px 16px 0 0;
         padding: 16px 16px 20px;
         box-shadow: none;
     }

     .choose-page-right {
         border-radius: 0 0 16px 16px;
         box-shadow: none;
     }

     .animals-choose-grid {
         grid-template-columns: repeat(5, 1fr);
     }

     .choose-spread .spine-crease {
         top: auto;
         left: 0;
         width: 100%;
         height: 4px;
         transform: none;
         background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.15));
     }
 }

 /* ====== PAGE TURN ====== */
 .page-turn-overlay {
     position: fixed;
     inset: 0;
     z-index: 100;
     pointer-events: none;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .page-curl {
     width: min(400px, 80vw);
     height: min(500px, 80vh);
     background: linear-gradient(135deg, #f0e6cc, #e0d0a8, #f5edd8);
     animation: page-curl-anim 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
     transform-origin: left center;
     border-radius: 0 16px 16px 0;
     box-shadow: -20px 0 40px rgba(0, 0, 0, 0.3);
 }

 @keyframes page-curl-anim {
     0% {
         transform: rotateY(0deg) scaleX(1);
         opacity: 1;
     }

     50% {
         transform: rotateY(-90deg) scaleX(0.8);
         opacity: 0.8;
     }

     100% {
         transform: rotateY(-180deg) scaleX(0);
         opacity: 0;
     }
 }

 /* ====== RESULT ====== */
 .result-spread {
     display: flex;
     width: min(580px, 96vw);
     filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7));
     animation: book-open-anim 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
     position: relative;
 }

 .result-page-left,
 .result-page-right {
     width: 50%;
     padding: clamp(16px, 3vw, 26px) clamp(12px, 2.5vw, 22px);
     position: relative;
     overflow: hidden;
 }

 .result-page-left {
     border-radius: 16px 0 0 16px;
     background: linear-gradient(160deg, #1a0840 0%, #0d0320 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .result-page-right {
     border-radius: 0 16px 16px 0;
     background: linear-gradient(255deg, #f0e6cc 0%, #ede0c0 100%);
 }

 .result-page-right::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
     opacity: 0.5;
     pointer-events: none;
     border-radius: inherit;
 }

 .magic-reveal-label {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(8px, 2vw, 11px);
     color: #c9933a99;
     letter-spacing: 2px;
     margin-bottom: 10px;
     text-align: center;
 }

 .reveal-animal-icon {
     font-size: clamp(60px, 15vw, 90px);
     filter: drop-shadow(0 0 30px #c9933a88);
     animation: reveal-bounce 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
 }

 @keyframes reveal-bounce {
     0% {
         transform: scale(0) rotate(-20deg);
         opacity: 0;
         filter: drop-shadow(0 0 0px transparent);
     }

     60% {
         transform: scale(1.15) rotate(5deg);
     }

     80% {
         transform: scale(0.95) rotate(-2deg);
     }

     100% {
         transform: scale(1) rotate(0deg);
         opacity: 1;
         filter: drop-shadow(0 0 30px #c9933a88);
     }
 }

 .reveal-name {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(14px, 4vw, 22px);
     color: var(--gold-light);
     margin-top: 10px;
     text-shadow: 0 0 20px #c9933a66;
     animation: reveal-bounce 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
     text-align: center;
 }

 .reveal-stars {
     font-size: 18px;
     margin-top: 8px;
     animation: reveal-bounce 1s cubic-bezier(0.16, 1, 0.3, 1) 1.3s both;
 }

 .gates-label {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(8px, 1.8vw, 10px);
     color: var(--gold);
     letter-spacing: 2px;
     text-align: center;
     margin-bottom: 10px;
     opacity: 0.8;
 }

 .gates-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 5px;
     margin-bottom: 12px;
 }

 .gate-door {
     aspect-ratio: 2/3;
     background: linear-gradient(160deg, #2a0a4e, #1a0535);
     border: 1px solid #c9933a33;
     border-radius: 6px 6px 0 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     cursor: default;
     position: relative;
     overflow: hidden;
     transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .gate-door.is-result {
     background: linear-gradient(160deg, #3a1a7a, #1e0840);
     border-color: var(--gold);
     box-shadow: 0 0 16px #c9933a55;
 }

 .gate-door-num {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(7px, 1.5vw, 9px);
     color: #c9933a55;
 }

 .gate-door-icon {
     font-size: 0px;
     transition: font-size 0.5s cubic-bezier(0.16, 1, 0.3, 1);
     position: absolute;
 }

 .gate-door.open .gate-door-icon {
     font-size: clamp(14px, 3.5vw, 20px);
     filter: drop-shadow(0 0 6px #c9933a88);
 }

 .gate-door.open .gate-door-num {
     opacity: 0;
 }

 .gate-door.is-result.open::after {
     content: '';
     position: absolute;
     inset: -2px;
     border-radius: 7px 7px 1px 1px;
     background: transparent;
     border: 1.5px solid var(--gold-light);
     animation: gate-pulse 1.5s ease-in-out infinite alternate;
 }

 @keyframes gate-pulse {
     from {
         opacity: 0.5;
         box-shadow: none;
     }

     to {
         opacity: 1;
         box-shadow: 0 0 12px #c9933a77;
     }
 }

 .btn-restart {
     font-family: 'Cinzel Decorative', serif;
     font-size: clamp(8px, 2vw, 10px);
     padding: 10px 16px;
     background: linear-gradient(135deg, #1a0840, #2a105e);
     color: var(--gold-light);
     border: 1px solid #c9933a55;
     border-radius: 30px;
     cursor: pointer;
     letter-spacing: 1px;
     transition: all 0.2s;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
     margin-top: 8px;
     width: 100%;
 }

 .btn-restart:hover {
     transform: translateY(-2px);
     border-color: var(--gold);
 }

 .right-intro {
     font-family: 'Crimson Pro', serif;
     font-style: italic;
     font-size: clamp(11px, 2.5vw, 14px);
     color: #5c4020;
     text-align: center;
     margin-bottom: 12px;
     line-height: 1.5;
 }

 /* Sarcastic toast */
 .sarcasm-toast {
     position: fixed;
     top: 16px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 300;
     background: linear-gradient(135deg, #2a0a1e, #1a0535);
     border: 1px solid #c9933a77;
     border-radius: 12px;
     padding: 14px 20px;
     max-width: min(340px, 90vw);
     width: 90%;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 20px #c9933a22;
     animation: toast-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
     text-align: center;
 }

 @keyframes toast-in {
     from {
         transform: translateX(-50%) translateY(-30px) scale(0.9);
         opacity: 0;
     }

     to {
         transform: translateX(-50%) translateY(0) scale(1);
         opacity: 1;
     }
 }

 .toast-icon {
     font-size: 28px;
     margin-bottom: 6px;
 }

 .toast-comment {
     font-family: 'Crimson Pro', serif;
     font-style: italic;
     font-size: 14px;
     color: #f0d898;
     line-height: 1.5;
     margin-bottom: 6px;
 }

 .toast-sub {
     font-family: 'Cinzel Decorative', serif;
     font-size: 9px;
     color: #c9933a88;
     letter-spacing: 1px;
 }

 /* Sparkle */
 .sparkle {
     position: fixed;
     pointer-events: none;
     z-index: 200;
     font-size: 20px;
     animation: sparkle-fly 1.2s ease-out both;
 }

 @keyframes sparkle-fly {
     0% {
         transform: translate(0, 0) scale(0.5);
         opacity: 1;
     }

     100% {
         transform: translate(var(--tx), var(--ty)) scale(0);
         opacity: 0;
     }
 }