/* The night garden: engraved roses, moving candlelight, and falling petals. */
:root{--petal-light:#c37789;--petal-dark:#793248;--night-rose:#733047;--night-gold:#ad794b}
html[data-tone="midnight"]{--petal-light:#b69bbf;--petal-dark:#635272;--night-rose:#47405c;--night-gold:#797587}
#app{position:relative;z-index:1}
.night-atmosphere,.opening-ambience{pointer-events:none;user-select:none;overflow:hidden}
.night-atmosphere{position:fixed;inset:0;z-index:0;contain:strict}
.night-glow{position:absolute;width:min(70vw,950px);height:80vh;border-radius:50%;opacity:.27;animation:candle-breath 15s ease-in-out infinite alternate}
.night-glow-rose{right:-20%;top:-18%;background:radial-gradient(ellipse,var(--night-rose),transparent 68%)}
.night-glow-gold{left:12%;bottom:-48%;background:radial-gradient(ellipse,var(--night-gold),transparent 68%);animation-delay:-7s;opacity:.13}
.night-vine{position:absolute;right:-50px;top:6%;height:100%;width:240px;color:var(--rose);opacity:.19;transform:rotate(-8deg)}
.night-vine-left{left:230px;right:auto;top:30%;opacity:.1;transform:scaleX(-1) rotate(-12deg)}
.night-petals,.hero-petals{position:absolute;inset:0;overflow:hidden}
.petal-flight{position:absolute;left:var(--petal-x);top:-60px;width:var(--petal-size);height:calc(var(--petal-size) * 1.3);opacity:0;animation:petal-fall var(--fall) linear var(--delay) infinite}
.petal-flight svg{width:100%;height:100%;overflow:visible;fill:var(--petal-dark);stroke:var(--petal-light);stroke-width:.65;animation:petal-turn 9s ease-in-out var(--delay) infinite alternate;transform:rotate(var(--turn))}
.petal-fold{fill:none;stroke-opacity:.55}
.night-petals{opacity:.5}
body[data-scene="reading"] .night-atmosphere{opacity:.42}
body.focus-reading .night-atmosphere{display:none}
.opening{min-height:460px;border-color:#906373;box-shadow:0 22px 70px #09060b55,0 0 40px #6b304114}
.opening-copy{position:relative;z-index:1}
.opening-ambience{position:absolute;inset:0;z-index:-1}
.opening-candlelight{position:absolute;inset:-20%;background:radial-gradient(ellipse at 88% 65%,#d8994c30,transparent 44%),radial-gradient(ellipse at 56% 15%,#a9405938,transparent 53%);animation:candle-breath 11s ease-in-out infinite alternate;mix-blend-mode:screen}
.moon-seal{position:absolute;right:-48px;top:-48px;width:380px;max-width:46%;stroke:#eccfa0;stroke-width:.85;opacity:.45;animation:moon-breath 14s ease-in-out infinite alternate}
.seal-moon{fill:#efcc9a0d;stroke-width:1.2}
.opening-rose{position:absolute;bottom:14px;right:20px;width:105px;color:#d497a4;opacity:.66;transform:rotate(-18deg)}
.hero-petals{left:38%;opacity:.85}
.hero-petals .petal-flight{--travel:600px}
.statistics a{position:relative;transition:background .25s}
.statistics a:after{content:'↗';position:absolute;right:8px;top:50%;color:var(--gold);opacity:0;transform:translate(-4px,-50%);transition:opacity .2s,transform .2s}
.statistics a:hover,.statistics a:focus-visible{background:linear-gradient(0deg,#b9657c12,transparent)}
.statistics a:hover:after,.statistics a:focus-visible:after{opacity:1;transform:translate(0,-50%)}
.statistics a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.court-tile{transition:box-shadow .35s,border-color .35s,transform .35s}
.court-tile:hover{box-shadow:0 14px 36px #0005,0 0 24px #b9657c15;transform:translateY(-3px)}
@keyframes petal-fall{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.75}88%{opacity:.55}100%{transform:translate3d(var(--sway),var(--travel,calc(100vh + 100px)),0);opacity:0}}
@keyframes petal-turn{0%{transform:rotate(var(--turn)) scaleX(.65)}50%{transform:rotate(calc(var(--turn) + 85deg)) scaleX(1)}100%{transform:rotate(calc(var(--turn) + 170deg)) scaleX(.45)}}
@keyframes candle-breath{from{transform:translate3d(-2%,0,0) scale(.95);opacity:.2}to{transform:translate3d(2%,2%,0) scale(1.06);opacity:.42}}
@keyframes moon-breath{from{transform:rotate(-4deg);opacity:.34}to{transform:rotate(4deg);opacity:.53}}
html[data-page-visibility="hidden"] :is(.night-atmosphere,.opening-ambience) *,body.focus-reading .night-atmosphere *{animation-play-state:paused!important}
html[data-motion="reduced"] :is(.night-atmosphere,.opening-ambience) *{animation:none!important}
html[data-motion="reduced"] :is(.night-petals,.hero-petals){display:none}
@media(prefers-reduced-motion:reduce){.night-atmosphere *,.opening-ambience *{animation:none!important}.night-petals,.hero-petals{display:none}.court-tile:hover{transform:none}}
@media(max-width:1200px){.night-vine-left{left:220px}.opening{min-height:440px}.moon-seal{width:330px;right:-65px;top:-35px}.statistics a:after{right:3px;font-size:12px}}
@media(max-width:760px){
 .night-vine-left{display:none}.night-vine-right{right:-100px;opacity:.14}.night-glow{width:110vw}.night-glow-gold{left:-30%}
 .night-petals .petal-flight:nth-child(n+6),.hero-petals .petal-flight:nth-child(n+5){display:none}
 .opening{min-height:445px}.moon-seal{width:255px;max-width:65%;right:-65px;top:-30px;opacity:.35}.opening-rose{width:75px;right:4px;bottom:3px}.hero-petals{left:55%}
 .statistics a:after{display:none}
 .statistics{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 0 0;gap:0}
 .statistics a:nth-child(n){display:flex;min-height:74px;gap:12px;padding:12px 8px;border-bottom:1px solid var(--line-soft)}
 .statistics a:nth-child(2n){border-right:0}
 .statistics a:last-child{grid-column:1/-1;border:0;gap:18px}
 .statistics span{max-width:88px;font-size:12px}
 .statistics strong{font-size:32px;flex-shrink:0}
}
@media print{.night-atmosphere,.opening-ambience{display:none!important}}