/* Volume VI. Desktop layout stays in style.css; these rules target narrow/touch screens. */
.mobile-nav{display:none}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:90px}textarea{font:inherit;max-width:100%}.save-text{width:100%;min-height:180px;resize:vertical;padding:12px;border:1px solid var(--line);border-radius:4px;background:#fbfaf5;color:var(--ink);font-size:16px;overflow-wrap:anywhere}dialog:not([open]){display:none}.dialog-backdrop{position:fixed;inset:0;background:#102a26cc}.dialog-fallback[open]{display:block;position:fixed;top:50%;left:50%;right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%)}.announcement.dialog-fallback{animation:none}body.dialog-open .mobile-nav{visibility:hidden}.mobile-nav button{touch-action:manipulation}button,input,select,a,textarea{-webkit-tap-highlight-color:rgba(177,138,73,.16)}#toast{max-width:calc(100vw - 32px);width:max-content;overflow-wrap:anywhere;z-index:1400}.grid>*{min-width:0}dialog h2,dialog p,dialog li,.place-label,.unit-row,.contact-row,.family-tree,.hero h2{overflow-wrap:anywhere}#life-main,#life-profile,#life-family,#life-career{scroll-margin-top:16px}textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(pointer:coarse){button,.smallbtn{min-height:44px;min-width:44px;touch-action:manipulation}input[type=range]{min-height:40px;touch-action:pan-y}input[type=checkbox]{width:22px;height:22px;vertical-align:middle}input[type=file]{min-height:44px}select,input[type=text],input[type=number],textarea{font-size:16px}a{touch-action:manipulation}button:active{transform:translateY(1px);filter:brightness(.94)}}
@media(max-width:760px){
 body{font-size:15px;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}header,main,footer{width:100%;max-width:100%}header{height:auto;min-height:0;flex-wrap:wrap;gap:8px;padding:12px max(14px,env(safe-area-inset-right,0px)) 12px max(14px,env(safe-area-inset-left,0px))}.brand{width:100%;margin:0 0 6px;gap:10px;font-size:23px}.seal{width:36px;height:40px;font-size:24px}.brand small{font-size:8px}.edition{display:none}header>button{flex:1;margin:0!important;min-height:44px;white-space:normal;font-size:12px;padding:8px 6px}main{padding:24px max(14px,env(safe-area-inset-right,0px)) 32px max(14px,env(safe-area-inset-left,0px))}footer{display:flex;flex-wrap:wrap;gap:12px;padding:20px 16px;font-size:12px}.intro{display:block;min-height:0}.intro-copy{padding-bottom:36px;margin-bottom:26px}.intro-copy h1{font-size:36px;line-height:1.45;letter-spacing:3px}.intro-copy p{max-width:none}.intro-copy .divider{margin:16px 0}.landscape{height:70px;bottom:-8px}.intro-copy .row{position:relative;z-index:1;gap:6px;font-size:10px}.card{padding:18px;min-width:0}.form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}label{font-size:13px}.form-grid label,.identity-picker>div{min-width:0}input[type=text],input[type=number],select,textarea{font-size:16px;min-height:44px}.identity-picker{grid-template-columns:74px minmax(0,1fr);gap:16px}.avatar-preview{width:70px}.stat-input{gap:10px}.stat-input input{min-width:0;min-height:40px}.stat-input output{width:32px}.stat-input label{flex:none}.title-row{display:block;margin-bottom:18px}.title-row h1{font-size:27px;line-height:1.55;letter-spacing:1px}.title-row .tools{margin-top:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.title-row .tools button{padding:7px 3px;font-size:12px}.eyebrow{letter-spacing:2px}.grid{display:flex;flex-direction:column;gap:20px}.grid>section{order:0}.grid>aside:first-child{order:1}.grid>.right{order:2;display:block;margin-top:0}.profile{margin:0}.profile .attribute{display:inline-block;width:45%;margin:10px 2%;vertical-align:top}.hero{padding:22px 18px}.hero h2{font-size:24px;line-height:1.65}.hero .row{flex-wrap:wrap;align-items:start;gap:6px}.hero p{max-width:100%}.section{margin-top:20px}.right .section{margin-top:20px}.section-head{gap:8px;align-items:start;flex-wrap:wrap}.actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.activity{font-size:13px;min-height:76px;padding:10px 5px}.activity b{font-size:23px;margin-bottom:3px}.speed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.speed button{min-height:46px;font-size:14px}.advance{min-height:52px;font-size:16px}.smallbtn,button{min-height:44px;min-width:44px;touch-action:manipulation}.smallbtn{font-size:12px;padding:8px 10px}.sub{font-size:13px;line-height:1.85}.tools{justify-content:start;gap:8px}.row{flex-wrap:wrap}.choice{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px}.choice>button:first-child{font-size:15px;line-height:1.85;white-space:normal;padding:10px}.choice .listen{min-height:44px;font-size:14px;border-color:#b8c4ad;background:#edf1e6}.event-card h2{font-size:22px;line-height:1.7}.choices button{white-space:normal;overflow-wrap:anywhere}.event-tag{display:inline-block;font-size:12px}.timeline{max-height:300px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.log{font-size:13px}.log time{font-size:11px}.rank-list{max-height:280px;-webkit-overflow-scrolling:touch}.partner-options{grid-template-columns:minmax(0,1fr);gap:12px}.partner-options article{display:grid;grid-template-columns:66px minmax(0,1fr);gap:8px;text-align:left;padding:14px}.candidate-avatar{grid-row:span 3;width:60px;margin:0}.partner-options h3{font-size:18px;margin:0}.partner-options p{font-size:13px;margin:0}.partner-options button{grid-column:2;font-size:14px;min-height:44px}.family-tree article{gap:9px;padding:14px 2px;font-size:13px;align-items:start}.family-tree article>div:last-child{min-width:0}.mini-avatar{width:38px}.national-rank{font-size:27px}.xian-card button{width:100%;margin-top:8px}dialog{width:calc(100% - 24px);max-width:640px;padding:20px 16px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}dialog h2{font-size:23px;line-height:1.65}dialog .row{gap:8px}dialog .row>button{flex:1}#close-dialog{position:sticky;bottom:0;width:100%;box-shadow:0 -8px 15px var(--paper)}.announcement{width:calc(100vw - 24px);padding:18px 14px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}.announcement h2{font-size:19px;line-height:1.8;margin:12px 0 16px}.event-illustration{max-height:165px;width:100%;margin-top:10px}.annual-recap{padding:14px;font-size:13px;line-height:1.9}.annual-recap h3{font-size:16px}.announcement .annual-recap{max-height:none;overflow:visible}.announcement .smallbtn{position:sticky;bottom:0;min-height:46px;width:100%;box-shadow:0 -8px 15px #f5f0e3}.history-note{padding:14px;font-size:13px}.sound-source{padding:12px}.sound-source .row{align-items:stretch}.sound-source .row label{min-width:0;flex-basis:100%}.file-label input{max-width:100%;font-size:13px}.unit-row .badge{margin:7px 0}.unit-row b{display:block;font-size:15px}.mobile-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;position:fixed;z-index:100;bottom:0;left:0;right:0;padding:8px max(10px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:#f5f2e9f5;border-top:1px solid #c4ccba;box-shadow:0 -4px 18px #203b3514}.mobile-nav button{background:#edf0e5;border-color:#cdd5c4;font-size:13px;padding:8px 3px;min-height:46px}.mobile-nav button:first-child{background:var(--green);color:white}.dialog-open #toast{bottom:calc(18px + env(safe-area-inset-bottom,0px))}#toast{bottom:calc(82px + env(safe-area-inset-bottom,0px));font-size:13px;padding:11px 14px}.tutorial-note{padding:14px;font-size:14px}.save-text{min-height:160px}.ended{padding:22px 14px}.ended h2{font-size:24px}h1,h2,h3{overflow-wrap:anywhere}
}
@media(max-width:359px){main{padding-left:10px;padding-right:10px}.card{padding:15px}.title-row h1{font-size:24px}.hero h2{font-size:22px}.form-grid{grid-template-columns:minmax(0,1fr)}.intro-copy h1{font-size:32px}dialog{padding:16px 12px}.mobile-nav button{font-size:12px}.title-row .tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){dialog,.announcement{max-height:calc(100vh - 18px);max-height:calc(100dvh - 18px)}.event-illustration{max-height:110px}.announcement h2{font-size:17px}.announcement{padding-top:12px}.announcement .annual-recap{max-height:none}header{padding-top:8px;padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}button:active{transform:none}}