.game-fallback { position: fixed; z-index: 40; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 15px 20px; color: #f4efda; background: #183127f2; border: 1px solid #c6ae7c; border-radius: 3px; text-decoration: none; font-size: 13px; text-align: center; line-height: 1.6; }
.game-fallback[hidden], .study-transition[hidden] { display: none; }
.resonance-root .resonance-result-actions { gap: 14px 22px; }
.resonance-study { display: inline-flex; justify-content: space-between; align-items: center; gap: 35px; color: #f2ead1; padding: 12px 17px; border: 1px solid var(--res-gold); background: #16251fc9; text-decoration: none; font-size: 14px; border-radius: 2px; flex-basis: max-content; }
.resonance-study:hover { background: #344632; }
.resonance-study:focus-visible { outline: 2px solid #e6d49e; outline-offset: 5px; }
.resonance-root .resonance-replay, .resonance-root .resonance-exit { font-size: 11px; }
.study-transition { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #101f1c; overflow: hidden; animation: study-veil 2s both; }
.transition-window { position: absolute; width: min(31vw, 46.5vh); aspect-ratio: 1; border: 2px solid #baa06a; border-radius: 50%; top: calc(50% - min(10.66vw, 16vh)); left: calc(50% + min(5vw, 7.5vh)); transform: translate(-50%, -50%); background: radial-gradient(circle, #b5cc9160, #305b4b55 35%, transparent 70%); box-shadow: inset 0 0 0 10px #151e1766, 0 0 100px #b8cd9e33; animation: window-settle 2s both; }
.study-transition::before { content: ''; position: absolute; inset: 0; background: var(--study-image) center / contain no-repeat; animation: study-reveal 2s both; }
.transition-desk { position: absolute; top: calc(50% + min(18vw, 27vh)); width: min(78vw, 780px); height: 5%; border-radius: 50%; background: #8f7548; opacity: 0; animation: desk-settle 2s both; }
.transition-lamp { position: absolute; left: calc(50% - min(28vw, 42vh)); top: calc(50% + min(6vw, 9vh)); width: 30px; height: 30px; border-radius: 50%; background: #e9dda5; box-shadow: 0 0 45px 14px #c5c58b77; animation: lamp-settle 2s both; }
.study-transition > p { position: absolute; bottom: 12%; padding: 20px 30px; margin: 0; text-align: center; font: 400 clamp(20px, 3vw, 30px)/1.8 'Songti TC', 'PMingLiU', serif; color: #e6e3cd; background: #101f1cb0; border-radius: 50%; animation: welcome-in 2s both; }
@keyframes study-veil { from { opacity: 0; } 25%, to { opacity: 1; } }
@keyframes window-settle { from { transform: translate(-50%, -50%) scale(1.6) rotate(-15deg); opacity: .8; } 75%, to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes study-reveal { 0%, 25% { opacity: 0; transform: scale(1.04); } 80%, to { opacity: .8; transform: scale(1); } }
@keyframes desk-settle { 10% { opacity: .5; transform: scaleX(.4); } 80%, to { opacity: 0; transform: scaleX(1); } }
@keyframes lamp-settle { from { transform: translate(18vw, -15vh) scale(2); opacity: .7; } 75%, to { transform: none; opacity: 0; } }
@keyframes welcome-in { 0%, 45% { opacity: 0; transform: translateY(10px); } 80%, to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .resonance-root .resonance-result-actions { gap: 9px 18px; } .resonance-study { font-size: 13px; padding: 11px 14px; gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .study-transition { animation: study-veil .15s linear; } .study-transition::before { animation: none; opacity: .5; } .study-transition > p { animation: none; } .transition-window, .transition-desk, .transition-lamp { display: none; } }