/* Phone play uses the edges for controls, leaving the centre for the game. */
.intro-screen{position:fixed;inset:0;z-index:60;overflow:auto;overscroll-behavior:contain;background:#091724f5;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));display:grid;place-items:center}
.intro-card{width:min(100%,620px);margin:auto;color:#edf4fa}
.intro-card .eyebrow{color:#ebcb91;margin:0 0 8px;font-size:12px}
.intro-card h2{font:700 26px/1.4 "Yu Gothic UI",Meiryo,sans-serif;margin:0 0 12px}
.intro-card p{font-size:16px;line-height:1.7;margin:10px 0}
.intro-card ol{padding:0;list-style:none;display:grid;gap:10px;margin:18px 0}
.intro-card li{background:#1a3043;border:1px solid #486074;border-radius:10px;padding:12px 16px;font-size:16px;line-height:1.6}
.intro-card li strong{color:#ffe1a7;display:block;font-size:18px}
.intro-card .primary,.intro-card .secondary{font-size:17px;min-height:50px;justify-content:center}
.intro-card .text-button{font-size:15px;min-height:44px;text-decoration:underline}
.touch-copy{display:none}
#pause-tools:empty{display:none}
#pause-guide{font-size:15px;min-height:44px}
@media(pointer:coarse),(max-width:900px){
 .touch-copy{display:inline}.keyboard-copy{display:none}
 #app{--pad-bottom:max(8px,env(safe-area-inset-bottom));--pad-left:max(8px,env(safe-area-inset-left));--pad-right:max(8px,env(safe-area-inset-right));--pad-top:max(4px,env(safe-area-inset-top))}
 .brand,body.playing .brand{display:none}
 .topbar,body.playing .topbar{padding:var(--pad-top) var(--pad-right) 4px var(--pad-left)!important;justify-content:flex-end;min-height:52px;background:#0d1e2ce8}
 .top-actions{gap:5px}.top-actions button,.top-actions #home-top,.story-film .top-actions #home-top{min-height:44px;padding:6px 10px;font-size:13px;white-space:nowrap}
 #menu{padding:76px 16px 50px;scroll-padding-top:70px}
 #hud-boss{top:calc(var(--pad-top) + 52px);left:var(--pad-left);right:var(--pad-right);width:auto;transform:none;gap:0}
 #hud-boss .enemy-card{padding:5px 8px;background:#102837d9;border:0;border-radius:4px}
 #hud-boss #chapter-label,#hud-boss #spell,#hud-boss #opening-status{display:none}
 #hud-boss .enemy-card p{margin:0 0 4px;line-height:14px}
 #hud-boss #enemy-name{font-size:12px}.enemy-meter{height:4px}
 #hud-sidebar{top:calc(var(--pad-top) + 88px);left:var(--pad-left);right:var(--pad-right);width:auto;gap:4px;pointer-events:none}
 #chapter-progress,#hud-player .player-card>p,#hud .score-card,#flight-readout,.desktop-guide{display:none!important}
 #hud-player{display:flex;gap:6px;align-items:center;background:#102837bb;border-radius:4px;padding:4px 8px}
 #hud-player .player-card{display:flex;gap:8px;align-items:center;padding:0;flex:1;width:auto;border:0;background:none}
 #hud-player #hearts{font-size:14px;line-height:20px;white-space:nowrap;letter-spacing:0}
 #hud-player .barrier-status{margin:0;gap:4px;flex:1;font-size:10px}
 #hud-player .barrier-status>.meter{display:none}
 #hud-player #spirit-panel{background:none;padding:0;border:0;width:92px;font-size:10px;gap:4px}
 #hud-player #spirit-panel b{min-width:0;font-size:10px}#hud-player #spirit-panel>.meter{display:none}
 #hud-messages{max-width:100%;gap:0}
 #hud-messages #boss-callout,#hud-messages #notice{padding:4px 8px;background:#102837bb;border:0;font-size:12px;line-height:1.4}
 #hud-messages #boss-callout strong{display:none}#hud-messages #boss-callout span{font-size:12px;margin:0}#hud-messages #boss-timer{display:none}
 #practice-panel{padding:5px 8px!important;background:#102837c9!important;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}
 #practice-panel>strong{font-size:12px}#practice-panel>p{font-size:12px;margin:0!important;grid-row:2}#practice-panel>small{display:none}
 #practice-panel #practice-start{grid-column:2;grid-row:1/3;min-height:44px;margin:0;padding:5px 9px;font-size:12px;pointer-events:auto;width:auto}
 #touch{display:block;position:absolute;inset:0;pointer-events:none}
 #stick{position:absolute;pointer-events:auto;border-radius:50%;width:108px;height:108px;left:var(--pad-left);bottom:calc(var(--pad-bottom) + 14px);background:#183447bb;border:2px solid #b5d3e28c;touch-action:none}
 #stick small{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:12px}#stick-knob{position:absolute;border-radius:50%;pointer-events:none;width:42px;height:42px;margin:-21px;left:50%;top:50%;background:#d9ebf2b3}
 .touch-right{position:absolute;bottom:var(--pad-bottom);right:var(--pad-right);text-align:center}
 .touch-right>span,.touch-right button span{display:none}
 .touch-right>div{display:grid;grid-template-columns:repeat(2,58px);gap:7px;margin:0}
 .touch-right button{pointer-events:auto;color:#fff6e8;border:1px solid #eeddbac0;width:58px;height:58px;min-height:48px;font-size:14px;border-radius:15px;background:#183447e8;touch-action:none}
 .touch-right #barrier{background:#ab455dee;border:2px solid #f4b8bc;font-weight:bold}
 #special{right:var(--pad-right);bottom:calc(var(--pad-bottom) + 131px);width:123px;height:44px;min-height:44px;padding:4px;font-size:13px;z-index:9}
 #special span{display:none}
 #rift-hud,.drawing-seal #rift-hud,.view-overhead:not(.drawing-seal) #rift-hud{left:var(--pad-left);right:auto;top:auto;bottom:calc(var(--pad-bottom) + 131px);transform:none;width:calc(100% - var(--pad-left) - var(--pad-right) - 131px);padding:0;background:none;border:0;box-shadow:none;z-index:8}
 #rift-hud .rift-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
 #rift-hud button{font-size:12px;min-height:44px;padding:4px 2px;background:#183447eb}
 #rift-hud #rift-ally{position:absolute;left:calc(108px + 8px);bottom:calc(-131px + 45px);width:52px;height:64px;overflow-wrap:anywhere}
 #rift-hud #rift-state{position:absolute;bottom:48px;left:0;margin:0;font-size:11px;white-space:nowrap;background:#102837ba;padding:4px 6px;border-radius:3px}
 #rift-guide,#rift-stats,#rift-message{display:none}
 #seal-guide{position:absolute;bottom:80px;left:0;width:160px;padding:6px;background:#102837e6;border:1px solid #b5d3e270;border-radius:6px;margin:0}
 #seal-guide svg{width:120px;height:78px}#seal-guide small{display:none}#seal-guide p{font-size:11px;line-height:1.4;margin:2px 0}
 #camera-views,#lock,#recenter{display:none}
 #paused{z-index:30;padding:calc(var(--pad-top) + 52px) 16px 20px;align-items:flex-start;backdrop-filter:none;background:#0a1726f5}
 #paused .dialog{width:min(100%,480px);margin:auto;padding:16px;text-align:left;background:#142637}
 #paused h2{font-size:24px;margin:0 0 6px}#paused .eyebrow,#paused .pause-controls{display:none}
 #paused .dialog>p{font-size:14px;margin:6px 0}
 #pause-tools{display:grid;gap:8px;margin:12px 0}
 #pause-tools #camera-views{display:block;position:static;inset:auto;transform:none;max-width:none;width:100%;padding:8px}
 #pause-tools #camera-views>div{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
 #pause-tools #camera-views button{min-width:0;min-height:44px;padding:4px;font-size:12px}
 #pause-tools #camera-views small{display:none}
 #pause-tools #lock,#pause-tools #recenter{display:block;position:static;width:100%;min-height:44px;font-size:14px;margin:0}
 #battle-dialogue{bottom:calc(var(--pad-bottom) + 205px)!important;max-width:90%;font-size:12px!important}
 #spell-banner{top:34%!important;font-size:17px!important;max-width:90%}
 .story-film #story{padding:60px 12px 10px}.story-film .story-controls{flex-wrap:wrap}
 .story-film .story-controls button{min-height:44px;font-size:12px}
}
@media(max-width:359px){.top-actions button,.top-actions #home-top{padding:5px 7px;font-size:12px}.touch-right>div{grid-template-columns:repeat(2,52px)}.touch-right button{width:52px;height:56px}#special{width:111px}#rift-hud,.drawing-seal #rift-hud{width:calc(100% - 135px)}#stick{width:96px;height:96px}#rift-hud #rift-ally{left:102px;width:46px}#rift-hud #rift-state{font-size:10px}}
@media(max-height:500px) and (orientation:landscape){
 .intro-screen{display:block;padding:16px 28px}.intro-card{max-width:700px}.intro-card ol{grid-template-columns:repeat(3,1fr);gap:8px}.intro-card li{font-size:13px;padding:9px}.intro-card li strong{font-size:15px}.intro-card h2{font-size:22px}
 #hud-boss{left:var(--pad-left);right:auto;top:var(--pad-top);width:calc(100% - 330px);max-width:340px}
 #hud-sidebar{top:calc(var(--pad-top) + 34px);width:calc(100% - 330px);max-width:340px;right:auto}
 .topbar{background:none!important}#hud-messages #boss-callout,#hud-messages #notice{font-size:11px}
 #stick{width:90px;height:90px;bottom:var(--pad-bottom)}
 .touch-right>div{grid-template-columns:repeat(2,50px);gap:5px}.touch-right button{width:50px;height:48px;font-size:12px}
 #special{width:105px;bottom:calc(var(--pad-bottom) + 106px)}
 #rift-hud,.drawing-seal #rift-hud,.view-overhead:not(.drawing-seal) #rift-hud{left:calc(var(--pad-left) + 100px);bottom:var(--pad-bottom);width:116px}
 #rift-hud #rift-state{bottom:48px;font-size:10px;white-space:normal;width:116px}
 #rift-hud #rift-ally{left:auto;right:calc(-100vw + 100px + 116px + var(--pad-left) + var(--pad-right) + 113px);bottom:0;width:54px;height:48px}
 #seal-guide{left:0;bottom:88px;width:144px}#seal-guide svg{height:58px;width:90px}
 #battle-dialogue{bottom:62px!important;max-width:40%}#practice-panel{max-width:340px}
 #paused{padding-top:12px}.story-film .story-controls button{min-height:44px}
}
@media(pointer:coarse),(max-width:900px){
 #touch,#rift-hud,#special{-webkit-user-select:none;user-select:none}
 body.final-rift #rift-message{display:block;position:fixed;top:calc(var(--pad-top) + 122px);left:var(--pad-left);right:var(--pad-right);min-height:0;margin:0;padding:4px 8px;background:#102837dd;font-size:12px}
}
/* Finger movement: reserve only one short row for techniques. */
@media(pointer:coarse),(max-width:900px){
 #stick,#jump,#descend,#boost{display:none!important}
 #rift-hud,.drawing-seal #rift-hud,.view-overhead:not(.drawing-seal) #rift-hud{left:var(--pad-left);bottom:var(--pad-bottom);width:calc((100% - var(--pad-left) - var(--pad-right) - 24px) * .6 + 12px)}
 #rift-hud .rift-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #rift-hud button{height:50px;min-height:50px;font-size:12px;border-radius:8px}
 #rift-hud #rift-ally{position:static;width:auto;height:50px;min-height:50px}
 #rift-hud #rift-state{bottom:56px;width:auto;white-space:nowrap;font-size:11px}
 .touch-right{bottom:var(--pad-bottom);right:calc(var(--pad-right) + (100% - var(--pad-left) - var(--pad-right) - 24px) * .2 + 6px)}
 .touch-right>div{display:block;margin:0}
 .touch-right #barrier{width:calc((100vw - var(--pad-left) - var(--pad-right) - 24px) * .2);height:50px;min-height:50px;border-radius:8px;font-size:13px}
 #special{right:var(--pad-right);bottom:var(--pad-bottom);width:calc((100% - var(--pad-left) - var(--pad-right) - 24px) * .2);height:50px;min-height:50px;font-size:12px;padding:3px;border-radius:8px}
 #seal-guide{bottom:86px;left:0;width:150px}#seal-guide svg{width:110px;height:72px}
 #battle-dialogue{bottom:calc(var(--pad-bottom) + 90px)!important;max-width:90%}
 .intro-more{display:block;margin:12px 0}.intro-more summary{font-size:14px;min-height:44px;padding:10px 0;color:#dfc99f;cursor:pointer}.intro-more p{font-size:14px}
}