/* Touch layout is based on input capability, including narrow landscape WebViews. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;touch-action:none}
.aim-joystick,.release-grip{display:none}
body.touch{--edge-left:max(14px,env(safe-area-inset-left));--edge-right:max(14px,env(safe-area-inset-right));--edge-top:max(8px,env(safe-area-inset-top));--edge-bottom:max(14px,env(safe-area-inset-bottom))}
.touch #hud .hint,.touch #hint,.touch .controls-note,.touch #combat-hint,.touch #target-info,.touch #jump small{display:none!important}
.touch .player-hud{left:var(--edge-left);top:var(--edge-top);width:176px;padding:6px 9px;gap:6px;border-radius:16px;scale:1;transform:none;box-shadow:none}
.touch #avatar{width:32px;height:32px}.touch #profile-level{display:none}.touch #player-name{font-size:12px}.touch .progress-label{font-size:8px;gap:4px}.touch #next-name{display:none}.touch .player-hud .track{height:5px;margin-top:4px}.touch .player-hud>div{min-width:0;flex:1}
.touch .top-actions{top:var(--edge-top);right:var(--edge-right);gap:6px}.touch .top-actions .iconbutton{width:40px;height:40px;min-height:40px;font-size:20px;border-radius:14px;box-shadow:none}.touch .coins{height:34px;min-width:50px;padding:6px 9px;font-size:13px;border-radius:12px;box-shadow:none}
.touch .combat-status{left:var(--edge-left);top:calc(var(--edge-top) + 51px);gap:0}.touch #health{font-size:16px;letter-spacing:1px}
.touch .event-banner{top:calc(var(--edge-top) + 49px);left:50%;transform:translateX(-50%);max-width:55vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 8px;font-size:9px;min-height:0;border-width:1px;border-radius:10px;box-shadow:none}
.touch #ecology-banner{display:none}
.touch .joystick,.touch .aim-joystick{display:block;position:fixed;width:100px;height:100px;bottom:var(--edge-bottom);border:2px solid #4f745e80;border-radius:50%;background:#edf3d16b;touch-action:none;pointer-events:auto;z-index:12;user-select:none}
.touch .joystick{left:var(--edge-left)}.touch .aim-joystick{right:var(--edge-right);background:#f5d5df66;border-color:#9f617080}
.touch #stick,.touch #aim-stick{position:absolute;left:28px;top:28px;width:40px;height:40px;border:2px solid #70885d99;border-radius:50%;background:#f9f6dcbf;pointer-events:none}
.touch #aim-stick{background:#f3a3b9c9;border-color:#a66b7a}.touch #aim-stick-label{position:absolute;bottom:9px;left:0;width:100%;text-align:center;font-size:9px;pointer-events:none;color:#744857}
.touch .jump-button{right:calc(var(--edge-right) + 110px);bottom:calc(var(--edge-bottom) + 5px);width:49px;height:49px;gap:0;border-width:2px;box-shadow:0 2px 0 #47777a;z-index:12}.touch .jump-button span{font-size:21px}.touch .jump-button b{font-size:7px}
.touch .release-grip{display:block;position:fixed;right:calc(var(--edge-right) + 119px);bottom:calc(var(--edge-bottom) + 67px);width:36px;height:36px;border:2px solid #a68170;border-radius:50%;background:#fff1d8c9;font-size:23px;pointer-events:auto;z-index:12}
.touch .tug-panel{left:50%;bottom:calc(var(--edge-bottom) + 111px);width:270px;max-width:calc(100vw - 28px);padding:4px 8px 8px;border-radius:14px;border-width:1px;box-shadow:0 2px 0 #4c634733;pointer-events:auto}.touch #contest-art{max-height:63px;width:100%;object-fit:fill;margin:0 0 2px}.touch #timing{height:23px}
.touch .toast{top:calc(var(--edge-top) + 82px);bottom:auto;left:50%;transform:translateX(-50%);width:max-content;max-width:65vw;padding:6px 10px;font-size:11px;line-height:1.25;border-radius:12px;border-width:1px;pointer-events:none}
.touch #impact-caption{bottom:calc(var(--edge-bottom) + 213px);padding:5px 9px}.touch #impact-title{font-size:13px}.touch #impact-detail{font-size:10px}
.touch dialog[open]{display:flex;flex-direction:column;width:min(960px,calc(100vw - 20px));max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:12px;margin:auto;overflow:hidden;overscroll-behavior:none;border-radius:18px}
.touch .modal-head{flex-shrink:0;margin:0 0 8px;gap:10px}.touch .modal-head h2{font-size:20px}.touch .modal-head .eyebrow:empty{display:none}.touch #close-modal{width:38px;height:38px;min-height:38px;font-size:22px}
.touch #modal-body{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding:2px 3px 8px}
.touch #modal-body canvas{max-width:100%}.touch #modal-body input,.touch #modal-body button{touch-action:manipulation}
@media(orientation:landscape) and (max-height:600px){
 .touch .tug-panel{bottom:var(--edge-bottom);width:min(290px,calc(100vw - 360px));min-width:210px;left:47%}.touch #contest-art{max-height:54px}.touch #timing{height:22px}
 .touch .event-banner{top:var(--edge-top);max-width:36vw;font-size:8px;padding:4px 7px}.touch .toast{top:calc(var(--edge-top) + 43px);max-width:48vw;font-size:10px}.touch #impact-caption{bottom:120px}
 .touch .menu{padding:10px 24px}
 .touch .menu h1{font-size:clamp(35px,8.7vh,54px);letter-spacing:-2px;line-height:.96;margin:0 0 14px}
 .touch .modal-head h2{font-size:17px}.touch .modal-head .eyebrow{display:none}.touch .help-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.touch .help-step{padding:8px;font-size:11px}.touch .help-step h3{font-size:13px}.touch .help-step>b{display:none}
}
@media(orientation:landscape) and (max-height:340px){.touch .joystick,.touch .aim-joystick{width:86px;height:86px}.touch #stick,.touch #aim-stick{left:21px;top:21px}.touch .jump-button{right:calc(var(--edge-right) + 94px)}.touch .release-grip{right:calc(var(--edge-right) + 101px);bottom:calc(var(--edge-bottom) + 59px)}.touch .tug-panel{width:240px;min-width:190px}.touch .player-hud{width:151px}.touch .menu h1{margin-bottom:9px}}
.touch #player-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:16px}.touch .player-hud{height:49px}.touch .top-actions{display:flex;flex-direction:row;align-items:center}.touch .top-actions .coins{position:static}.touch .toast{font-size:10px;max-width:52vw}
.touch .account-card{padding:6px 9px;margin:0 0 8px;gap:8px;border-radius:12px}.touch .account-medal{min-width:32px;height:32px;font-size:16px;border-width:2px}.touch .account-card b{font-size:11px}.touch .account-card p{display:inline-block;margin:2px 9px 0 0;font-size:10px}.touch .account-card>div{line-height:1.2}
.profession-picker summary{cursor:pointer;font-weight:bold;padding:10px 0}.touch .profession-picker summary{padding:8px 2px;font-size:12px;min-height:34px}
.touch .wardrobe-tabs{display:flex;flex-wrap:wrap;overflow:visible;gap:4px;margin:6px 0}.touch .wardrobe-tabs button{padding:5px 8px;font-size:10px;min-height:32px;border-radius:10px;white-space:nowrap}
.touch .wardrobe-balance{font-size:13px;margin:0 0 5px}.touch #modal-body>.small{font-size:10px}.touch .expedition-note{padding:8px;margin:7px 0;border-radius:12px;font-size:11px}.touch .expedition-note p{margin:4px 0;font-size:10px}.touch #modal-body .primary,.touch #modal-body .secondary{min-height:36px;font-size:11px;padding:7px 12px;border-radius:12px;box-shadow:none}
@media(orientation:landscape) and (max-height:600px){
 .touch .account-card{padding:4px 8px;margin-bottom:5px;height:30px}.touch .account-medal{min-width:24px;height:24px;font-size:12px}.touch .account-card b{margin-right:8px}.touch .account-card p{font-size:9px}
 .touch .biome-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.touch .biome-card{display:grid;grid-template-columns:60px 1fr;grid-template-rows:auto auto;padding:0 4px 0 0;border-radius:12px;gap:2px;border-width:2px;min-height:64px}.touch .biome-picture{width:60px;height:64px;grid-row:1/3;object-fit:cover}.touch .biome-card b{font-size:10px;margin:7px 0 0;line-height:1.15}.touch .biome-card small{display:none}.touch .biome-card span{font-size:8px;margin:0;align-self:start}.touch .expedition-note>b,.touch .expedition-note p{display:none}.touch .expedition-note{display:flex;gap:6px;background:none;padding:0;margin:2px 0}.touch .expedition-note button{margin:0;flex:1}
 .touch .class-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:0 0 6px}.touch .class-card:first-child{grid-column:auto}.touch .class-card{padding:5px;gap:3px;min-width:0;border-radius:10px}.touch .profession-art{width:100%;height:42px;object-fit:contain}.touch .class-card b{font-size:9px}.touch .class-card small{font-size:8px;line-height:1.2}.touch .class-card span{font-size:8px}
 .touch .wardrobe-layout{display:grid;grid-template-columns:155px minmax(0,1fr);gap:10px}.touch .wardrobe-stage{position:sticky;top:0;align-self:start}.touch .wardrobe-stage>canvas{width:155px;height:98px;max-height:98px}.touch .nickname{display:grid;grid-template-columns:1fr;gap:3px;font-size:9px}.touch .nickname input{width:100%;min-width:0;height:27px;font-size:11px;padding:3px 6px}.touch .nickname button{font-size:9px!important;min-height:28px!important;padding:3px!important}
 .touch .wardrobe-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-height:calc(100dvh - 130px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}.touch .wardrobe-items .look-card{min-height:79px;padding:3px;gap:1px;border-radius:10px}.touch .wardrobe-items .look-swatch{height:40px}.touch .wardrobe-items .look-swatch canvas{height:40px;width:58px}.touch .look-card b{font-size:9px}.touch .look-card small{font-size:8px}.touch #look-apply{grid-column:1/-1;position:sticky;bottom:0;z-index:1}
 .touch .index4-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:6px 0}.touch .index4-card{min-height:95px;padding:4px;gap:3px}.touch .index4-card canvas{height:55px}.touch .index4-card b{font-size:10px}
}.touch .wardrobe-tabs{display:none}.touch .wardrobe-head{margin:0 0 5px;padding:0;min-height:0;gap:0}.touch .wardrobe-head b{font-size:12px;line-height:16px}.touch .wardrobe-layout{margin-top:0}
@media(orientation:landscape) and (max-height:600px){.touch .wardrobe-head{position:absolute;right:66px;top:22px}.touch .wardrobe-layout{gap:8px}.touch .wardrobe-items{max-height:calc(100dvh - 112px)}.touch .nickname{grid-template-columns:1fr;line-height:1}.touch .nickname button{min-height:24px!important}.touch .nickname input{height:24px}.touch .nickname{gap:1px}}
@media(orientation:landscape) and (max-height:600px){.touch .wardrobe-items{max-height:calc(100dvh - 139px)}}

/* Timing stays beside the action, with no opaque dialog over the arena. */
body .tug-panel,body.touch .tug-panel{position:absolute;bottom:auto;width:250px;min-width:0;max-width:calc(100vw - 16px);padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:translateX(-50%);pointer-events:auto}
body.touch .tug-panel{width:220px}
body #contest-art,body.touch #contest-art{display:block;width:100%;height:57px;max-height:none;margin:0;filter:drop-shadow(0 1px 0 #fff9e7)}
body .tug-panel #timing{height:20px;border-radius:10px;box-shadow:0 1px 4px #24482c55}
body .tug-panel #timing[data-result="perfect"]{box-shadow:0 0 0 3px #f5c645,0 0 15px #ffdf65}
body .tug-panel #timing[data-result="miss"]{box-shadow:0 0 0 2px #c95b64}
body .tug-panel .sweet span{display:none}
body .tug-panel{display:flex;flex-direction:column;gap:2px}body .tug-panel #timing{order:-1;flex-shrink:0}

#hint,#combat-hint,.controls-note,#action small,#jump small{display:none!important}
.location{font-size:17px;letter-spacing:.3px}
#health{display:block;width:108px;height:36px;filter:drop-shadow(0 2px 0 #fff4d6)}
.touch #health{width:78px;height:26px}
#impact-feedback[data-kind="buoy"] #impact-caption{display:none}

#timing .sweet,#timing #needle{visibility:hidden}#timing-zones{display:block!important}

body:not(.touch) #jump{display:none!important}.swim-badge{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;background:#c1edf0;color:#226c86;border:1px solid #68a6b3;font-size:22px;line-height:1;vertical-align:middle;margin-right:5px}

#health{width:126px;height:42px}.touch #health{width:90px;height:30px}

.player-hud .combat-status{top:calc(100% + 8px);left:0;transform:none}.player-hud>div{min-width:0}
/* Thumb-sized controls and a fixed rhythm gauge keep the arena visible. */
.touch .joystick,.touch .aim-joystick{width:124px;height:124px}
.touch #stick,.touch #aim-stick{left:40px;top:40px}
.touch #aim-stick-label{font-size:11px;bottom:12px}
.touch .jump-button{right:var(--edge-right);bottom:calc(var(--edge-bottom) + 140px);width:60px;height:60px}
.touch .jump-button b{font-size:9px}
.touch .release-grip{right:calc(var(--edge-right) + 74px);bottom:calc(var(--edge-bottom) + 143px);width:52px;height:52px}
body.touch .tug-panel{position:fixed;left:50%;top:auto;bottom:calc(var(--edge-bottom) + 218px);width:min(280px,calc(100vw - 48px));transform:translateX(-50%)}
body.touch .tug-panel #timing{height:30px}
@media(orientation:landscape){body.touch .tug-panel{bottom:calc(var(--edge-bottom) + 12px);width:clamp(160px,calc(100vw - 320px),280px)}}
#sink-meter{position:fixed;left:0;right:auto;top:0;transform:translateY(-50%);display:flex;align-items:center;flex-direction:column;gap:5px;pointer-events:none;color:#294735;text-shadow:0 1px #fff;font-size:11px;z-index:11}
#sink-meter[hidden]{display:none}#sink-label{font-size:9px}.sink-track{position:relative;height:64px;width:14px;border:2px solid #476c72;border-radius:12px;overflow:hidden;background:#fff7dfdc;box-shadow:0 1px 4px #254a4055}#sink-fill{position:absolute;inset:0;background:linear-gradient(#e77760,#e8b567);transform-origin:bottom;transform:scaleY(0)}
#revive-ad-note{display:block;text-align:center;max-width:280px;color:#526649;font-size:13px}
@media(max-height:450px){.touch .jump-button{bottom:calc(var(--edge-bottom) + 132px)}.touch .release-grip{bottom:calc(var(--edge-bottom) + 136px)}}