/* Petrichor: shared navigation, touch layouts and motion preferences. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video{max-width:100%}
button,a,input,textarea,select,summary{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #f4b2bd;outline-offset:4px}
.menu-btn{text-decoration:none}
.menu-item:focus-within .menu-label{opacity:1;transform:translateX(-50%) translateY(0)}
.login-btn{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.footer-nav{flex-wrap:wrap;justify-content:center;gap:8px 0}
.footer-copy{text-align:center;line-height:1.7}
.login-modal-overlay,.class-modal-overlay,.viewer-overlay,.rule-detail-overlay,.edit-overlay,.post-overlay{z-index:1000}
.login-modal-card{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.class-modal-card,.edit-panel,.post-form-card,.rule-detail-card{max-height:calc(100dvh - 32px);overscroll-behavior:contain}
.login-modal-close,.class-modal-close,.viewer-close{min-width:44px;min-height:44px}
.balance-note{max-width:560px;margin:14px auto;color:rgba(240,210,215,.8);font-size:14px;line-height:1.65;text-align:center}
.lore-guide-link{margin:0 0 18px;font-size:16px}.lore-guide-link a{color:#f4b2bd;text-underline-offset:4px}
.skip-link{position:fixed;top:-90px;left:16px;z-index:2000;background:#f0e4e6;color:#170709;padding:12px 18px;border-radius:6px;font:14px 'Open Sans',sans-serif}.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1100px){.float-menu-inner{gap:0}.menu-divider{margin-left:3px;margin-right:3px}}
@media(max-width:900px){
 html{height:auto!important;min-height:100%;overflow-x:clip!important;overflow-y:auto!important;scroll-padding-top:125px}
 body{height:auto!important;min-height:100svh;overflow-x:clip!important;overflow-y:visible!important;font-size:16px}
 body.site-modal-open{overflow:hidden!important}
 #rain-canvas,#grain,#sup-icons,#bg-logo{display:none!important}
 #bg-img{transform:none!important;transition:none!important;background-position:center top}
 .page{height:auto!important;min-height:100svh;overflow:visible!important;display:block!important;padding:0!important}
 .float-menu{position:sticky!important;top:0!important;left:auto!important;right:auto!important;transform:none!important;width:100%!important;max-width:none!important;margin:0!important;padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));display:flex!important;flex-wrap:wrap;align-items:center;justify-content:flex-end!important;gap:6px!important;background:rgba(9,3,5,.97);border-bottom:1px solid rgba(200,16,46,.22);backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:500}
 .float-menu-inner{order:1;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;padding:4px!important;gap:0!important;border-radius:12px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
 .float-menu .menu-divider{display:none!important}
 .float-menu .menu-item{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:48px;gap:2px;padding:2px 0}
 .float-menu .menu-btn{width:100%!important;height:28px!important;min-width:0;border-radius:7px!important;transform:none!important}
 .float-menu .menu-btn svg{width:19px!important;height:19px!important;flex-shrink:0}
 .float-menu .menu-label{position:static!important;display:block!important;transform:none!important;opacity:1!important;white-space:normal!important;pointer-events:none;font:9px/1.3 'Open Sans',sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#d5bcc2!important;background:none!important;border:0!important;padding:0 1px!important;box-shadow:none!important;text-align:center;overflow-wrap:anywhere}
 .float-menu .menu-label::before{display:none!important}
 .float-menu .is-active .menu-label{color:#ff9cad!important}
 .login-btn{order:2;min-height:34px;height:34px!important;max-width:min(240px,100%);padding:0 14px!important;border-radius:9px!important;font-size:12px!important;letter-spacing:.03em!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
 .snap-section,.snap-section[data-state]{position:relative!important;inset:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;transform:none!important;filter:none!important;opacity:1!important;pointer-events:auto!important;will-change:auto!important;transition:none!important;user-select:text}
 .snap-section .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
 .hero-visual{min-height:calc(80svh - 100px)!important;padding:44px 16px 70px!important}
 .hero-text{padding:50px 20px!important;min-height:0!important;justify-content:flex-start!important}
 .section-features{padding:45px 18px!important;min-height:0!important;justify-content:flex-start!important}
 .section-join{padding:45px 16px 24px!important;min-height:0!important;justify-content:flex-start!important}
 .hero-title{overflow-wrap:normal;font-size:clamp(30px,8vw,56px)!important}.hero-sub{font-size:17px!important;line-height:1.7}
 .hero-cta,.stats-strip{flex-wrap:wrap;justify-content:center;max-width:100%}
 .stats-strip{gap:18px!important;padding-left:8px!important;padding-right:8px!important}
 .features-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;width:100%}
 .tutorial-wrap,.tutorial-container,.tutorial-carousel{max-width:100%!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}
 .tutorial-card{padding:24px 20px!important;max-width:100%;min-width:0;overflow-wrap:break-word}
 .t-card-body{font-size:16px!important;line-height:1.7}.t-card-body a,.t-card-body code{overflow-wrap:anywhere}
 .lu-dock{display:none!important}
 .class-scroll,.updates-scroll,.dispatch-scroll{height:auto!important;min-height:0;overflow:visible!important;flex:none!important}
 .class-wrap,.updates-wrap,.dispatch-wrap{padding:28px 18px 28px!important;min-height:0!important}
 .class-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
 .creature-card{min-width:0}.creature-name{overflow-wrap:break-word}
 .class-modal-overlay,.login-modal-overlay,.viewer-overlay,.rule-detail-overlay,.edit-overlay,.post-overlay{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .class-modal-card,.login-modal-card,.edit-panel,.post-form-card,.viewer-card,.rule-detail-card{width:100%!important;max-height:calc(100dvh - 24px)!important;max-width:100%!important;border-radius:16px!important;overscroll-behavior:contain}
 .class-modal-body{padding:0 20px 25px!important}.class-modal-art-wrap{height:180px!important}.class-modal-art-wrap img{height:160px!important;max-width:90%;object-fit:contain}
 .class-modal-lore p,.class-ability-desc{font-size:16px!important;line-height:1.75}
 .class-modal-meta{gap:8px}.class-meta-pill{flex:1 1 110px;min-width:0;padding:9px 12px}
 .updates-grid{flex-direction:column!important;gap:16px!important}.updates-col{width:100%}.updates-header{align-items:flex-start!important}
 .updates-card{padding:20px 18px!important}.updates-card-title,.updates-card-body{overflow-wrap:anywhere}.updates-card-body{font-size:16px!important}
 .rules-shell{height:auto!important;min-height:0;display:flex!important;flex-direction:column!important;overflow:visible!important}
 .sidebar-fade-wrap{height:auto!important;min-height:0;flex:none!important}.sidebar-fade-wrap::after{display:none}
 .rules-sidebar{height:auto!important;max-height:none!important;overflow:visible!important;padding:22px 18px 18px!important;flex-direction:row!important;flex-wrap:wrap;gap:8px!important}
 .rules-sidebar .search-wrap{flex:1 1 100%;width:100%}.rules-sidebar .sidebar-divider{flex:1 1 100%}
 .rules-main{height:auto!important;min-height:0;overflow:visible!important;padding:22px 18px 28px!important}
 .rules-list,.updates-track{grid-template-columns:1fr!important}.rule-detail-body{max-height:calc(100dvh - 160px)!important;padding:18px!important;font-size:16px!important}
 .edit-panel,.post-form-card{padding:20px!important}.edit-panel input,.edit-panel textarea,.post-form-card input,.post-form-card textarea{font-size:16px!important}
 [data-site-page="profile"] .page{padding:24px 16px 32px!important;min-height:calc(100svh - 100px)}
 #profileContent,.profile-shell{height:auto!important;min-height:0;justify-content:flex-start!important}
 .profile-body{flex-direction:column!important;min-height:0;height:auto!important;overflow:visible!important}
 .char-panel{width:100%!important;flex:none!important;max-height:none!important;overflow:visible!important}
 .char-list{flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;flex:none!important;max-width:100%;scroll-snap-type:x proximity}
 .char-card{min-width:170px;scroll-snap-align:start}.detail-panel{height:auto!important;min-height:300px;overflow:visible!important;flex:none!important;width:100%}
 .detail-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important}.detail-field{min-width:0;overflow-wrap:anywhere}
 .gate-card{padding:30px 22px!important}.profile-topbar{flex-wrap:wrap!important;gap:12px}.user-info{min-width:0;overflow-wrap:anywhere}
 .dispatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.viewer-photo-area{touch-action:pan-y pinch-zoom}.viewer-headline{overflow-wrap:break-word}
 .site-footer{padding:24px 16px!important;margin-top:24px;max-width:100%}.footer-link{font-size:11px!important;letter-spacing:.06em!important;padding:5px 9px!important;min-height:32px;display:inline-flex;align-items:center}.footer-copy{font-size:10px!important;color:#a99198!important}.footer-copy strong{color:#dd8395!important}
 [data-site-page="404"] .page{display:flex!important;padding:32px 20px!important;min-height:100svh}
 .err-actions{flex-wrap:wrap;justify-content:center}.logo-wrap{margin-bottom:20px!important}
 input,textarea,select{max-width:100%;font-size:16px!important}
}
@media(max-width:580px){.class-grid,.features-grid,.dispatch-grid,.detail-fields{grid-template-columns:1fr!important}.rules-sidebar{gap:6px!important}.section-title{font-size:32px!important}.class-modal-name{font-size:28px!important}.viewer-header,.viewer-body{padding:20px!important}.viewer-headline{font-size:25px!important}.hero-cta{flex-direction:column;align-items:center}.hero-cta>*{max-width:100%}.tutorial-card{padding:22px 16px!important}.detail-empty{padding:30px 20px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}#rain-canvas,#sup-icons,#grain{display:none!important}.reveal{opacity:1!important;transform:none!important;filter:none!important}}
.login-modal-overlay:not(.open),.class-modal-overlay:not(.open),.viewer-overlay:not(.open),.rule-detail-overlay:not(.open),.edit-overlay:not(.open),.post-overlay:not(.open){visibility:hidden}

@media(max-width:900px){.profile-greeting-bar{flex-wrap:wrap;gap:12px;align-items:flex-start}.profile-greeting{min-width:0;max-width:100%;overflow-wrap:anywhere;line-height:1.5}.profile-greeting span{overflow-wrap:anywhere}.logout-btn{flex-shrink:0;min-height:44px}.profile-greeting-bar .logout-btn{margin-left:auto}.login-btn{color:#e8b6c1!important}.post-form-card{padding:20px!important}.close-overlay-btn,.rule-detail-close{min-width:44px;min-height:44px}}