/* Last layout layer: all mobile HUD groups fit the visible browser viewport. */
:root{--app-height:100dvh;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
html{width:100%;height:100%;overflow:hidden}body{position:fixed;top:0;left:0;width:100%;height:var(--app-height);overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.authGate{height:var(--app-height);max-height:var(--app-height);padding-bottom:calc(22px + var(--safe-bottom))}dialog{max-height:calc(var(--app-height) - 24px - var(--safe-top) - var(--safe-bottom));overflow:auto;overscroll-behavior:contain}
@media(max-width:700px),(max-height:500px) and (max-width:1000px){
 header{top:calc(8px + var(--safe-top));left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
 .brand{display:none}.profile{min-width:0;max-width:190px;padding:6px;gap:7px}.profile>span:last-child{min-width:0}.profile b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.profile small{font-size:7px;letter-spacing:.6px;white-space:nowrap}.avatar{width:34px;height:34px;min-width:34px;font-size:24px}
 .wallet{min-width:0;max-width:125px;padding:10px 8px;font-size:12px;overflow:hidden;text-overflow:ellipsis}.wallet b{margin:0 3px}.wallet small{font-size:8px}
 body .leftHud,body.hub37 .leftHud,body.is-seated .leftHud{top:calc(70px + var(--safe-top));left:calc(8px + var(--safe-left));width:clamp(108px,34vw,136px);gap:6px}
 .leftHud>*{min-width:0;max-width:100%;padding:8px;border-radius:12px}.leftHud .place{min-width:0;gap:5px}.place>span{font-size:20px}.place b{font-size:11px}.place small{font-size:9px;overflow-wrap:anywhere}.leftHud .session b{font-size:18px;margin:3px 0}.leftHud .session small{font-size:8px}.strengthRow{margin-top:6px}.vitals>div:first-child{font-size:8px;letter-spacing:0}
 body .sceneTitle,body.hub37 .sceneTitle{display:none}
 body .tools,body.hub37 .tools{top:calc(122px + var(--safe-top));right:calc(8px + var(--safe-right));gap:5px;max-height:calc(var(--app-height) - 360px - var(--safe-top) - var(--safe-bottom));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
 .tools>button{width:48px;min-height:44px;padding:5px 2px;flex-shrink:0}.tools span{font-size:19px}.tools small{font-size:6px;letter-spacing:0}.tools>#floatBtn{position:static!important;min-height:44px;padding:5px 2px;font-size:8px}
 body #graphicsA0{top:calc(70px + var(--safe-top))!important;right:calc(66px + var(--safe-right))!important;bottom:auto!important;max-width:82px!important;padding:3px!important}#graphicsStatusA0{display:none}
 body .topBtn39,body.is-seated .topBtn39{position:absolute;top:calc(70px + var(--safe-top));right:calc(8px + var(--safe-right));left:auto;bottom:auto;width:48px;min-height:44px;padding:5px 2px;font-size:8px}
 body .bottom{position:absolute;bottom:calc(8px + var(--safe-bottom));left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:end}
 .bottom>.bottomLeft{grid-column:1;grid-row:2;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}.bottom>.bottomRight{grid-column:2;grid-row:2;min-width:0;max-width:none;display:flex;flex-direction:column;align-items:stretch;gap:4px}
 .bottomLeft>.ghost,.bottomRight>.ghost,.bottomRight>.primary{min-width:0;max-width:100%;width:100%;min-height:44px;padding:8px 4px!important;font-size:9px;letter-spacing:0;white-space:normal}.bottomLeft>#centerView{position:static!important;grid-column:1/-1;transform:none;min-width:0;width:100%;font-size:8px}
 body #basketPanel,body.is-seated #basketPanel{position:static;grid-column:2;grid-row:1;justify-self:end;transform:none;width:min(100%,150px);min-width:0;max-width:150px;padding:5px 8px}.catchCounter>b{font-size:19px}.catchCounter .catchLogBtn{min-width:0;width:100%;font-size:9px}.catchLogBtn em{font-size:8px}
 body #joystick,body.hub37 #joystick{left:calc(12px + var(--safe-left));bottom:calc(126px + var(--safe-bottom));width:100px;height:100px;border-radius:50%}#joystick #stick{width:42px;height:42px;left:28px;top:28px}#joystick:before{display:block;left:44px;top:5px}#joystick:after{left:7px;top:39px}#joystick small{font-size:7px;left:-8px;right:-8px;white-space:normal;bottom:-20px;letter-spacing:0}
 .prototype{display:none}#notice{bottom:calc(240px + var(--safe-bottom));max-width:85vw;font-size:11px}body.is-landing #notice{top:calc(70px + var(--safe-top));bottom:auto}
 .fightHud{top:calc(122px + var(--safe-top));width:min(220px,calc(100vw - 210px));left:calc(50% + 45px);padding:8px;background:rgba(249,247,238,.3)}.fightHud .forcePanel36 small{font-size:8px}
 #floatInset{left:50%;right:auto;transform:translateX(-50%);top:42%;width:145px;height:clamp(130px,26dvh,195px);max-width:45vw}#floatInset.compactFloat{left:50%;right:auto;top:45%;width:70px;height:100px;transform:translateX(-50%)}
 .inventoryMain{min-width:0}.inventoryTabs{max-width:100%;overflow-x:auto}.mixFields>*{min-width:0}
}
@media(max-height:500px) and (max-width:1000px) and (orientation:landscape){
 body .leftHud,body.hub37 .leftHud,body.is-seated .leftHud{width:132px;top:calc(60px + var(--safe-top))}.leftHud .session{display:none}.leftHud .place>span{display:none}
 body .tools,body.hub37 .tools{top:calc(60px + var(--safe-top));left:calc(152px + var(--safe-left));right:calc(8px + var(--safe-right));display:flex;flex-wrap:nowrap;max-width:none;max-height:48px;overflow-x:auto;overflow-y:hidden;gap:4px}
 body #graphicsA0{top:calc(8px + var(--safe-top))!important;right:calc(190px + var(--safe-right))!important}body .topBtn39,body.is-seated .topBtn39{top:calc(8px + var(--safe-top));right:calc(138px + var(--safe-right))}
 body .bottom{grid-template-columns:minmax(0,1fr) 132px minmax(0,1fr)}.bottom>.bottomLeft{grid-column:1;grid-row:1}.bottom>.bottomRight{grid-column:3;grid-row:1;flex-direction:row}body #basketPanel,body.is-seated #basketPanel{grid-column:2;grid-row:1;width:132px}.bottomLeft>#centerView{grid-column:auto}.bottom>.bottomLeft{grid-template-columns:repeat(3,minmax(0,1fr))}
 body #joystick,body.hub37 #joystick{bottom:calc(85px + var(--safe-bottom));width:88px;height:88px}#joystick #stick{left:22px;top:22px}#joystick:before{left:38px}#joystick:after{top:33px}
 #floatInset{top:44%;width:100px;height:138px}#floatInset.compactFloat{top:40%;width:58px;height:78px}.fightHud{top:calc(115px + var(--safe-top));left:55%;width:220px}#notice{bottom:calc(100px + var(--safe-bottom))}
}
/* Safari must not auto-zoom the login fields; retain user-controlled pinch zoom. */
@media(pointer:coarse){input,select,textarea,.authGate input,.authGate select{font-size:16px!important}}
#networkPing51{position:fixed;top:calc(2px + var(--safe-top));left:calc(8px + var(--safe-left));z-index:60;font:10px/14px Arial,sans-serif;color:#fff;text-shadow:0 1px 3px #173e32;pointer-events:none}
header{margin-top:14px}
@media(max-width:700px),(max-height:500px) and (max-width:1000px){body .leftHud,body.hub37 .leftHud,body.is-seated .leftHud{top:calc(84px + var(--safe-top))}}
@media(max-width:700px){input,select,textarea,.authGate input,.authGate select{font-size:16px!important}}
canvas,#joystick,#stick,.leftHud,header,.tools,.bottom,#floatInset{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{touch-action:auto;-webkit-user-select:text;user-select:text}
/* Update54: visible build identity and a larger, inward thumb target. */
#buildBadge54{position:fixed;top:calc(2px + var(--safe-top));left:calc(110px + var(--safe-left));max-width:calc(100vw - 130px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:60;font:10px/14px Arial,sans-serif;color:white;text-shadow:0 1px 3px #173e32;pointer-events:none}
@media(max-width:700px),(max-height:500px) and (max-width:1000px){
 body #joystick,body.hub37 #joystick{width:clamp(124px,34vw,140px);height:clamp(124px,34vw,140px);left:calc(clamp(24px,8vw,42px) + var(--safe-left));bottom:calc(152px + var(--safe-bottom))}
 #joystick #stick{width:52px;height:52px;left:calc(50% - 26px);top:calc(50% - 26px)}#joystick:before{left:calc(50% - 6px);top:6px}#joystick:after{left:8px;top:calc(50% - 12px)}#joystick small{font-size:8px;bottom:-20px}
}
@media(max-height:500px) and (max-width:1000px) and (orientation:landscape){body #joystick,body.hub37 #joystick{width:112px;height:112px;left:calc(34px + var(--safe-left));bottom:calc(92px + var(--safe-bottom))}}
/* Update55: landscape phone is the primary play layout. */
#rotate55{position:fixed;inset:0;z-index:9000;background:#173f3cf5;color:#f7f2df;display:grid;place-items:center;text-align:center;padding:28px}#rotate55>div{max-width:360px}#rotate55 b{font-size:24px}#rotate55 p{line-height:1.6;color:#d4e4d7}#rotate55 button{display:block;margin:22px auto;padding:16px;border-radius:16px;background:#f3e6ba;min-height:48px}#rotate55 small{display:block;line-height:1.6}
@media(orientation:landscape) and (max-height:600px) and (max-width:1600px){
 header{top:calc(8px + var(--safe-top));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right))}.profile{max-width:165px}.wallet{max-width:100px}
 body .leftHud,body.hub37 .leftHud,body.is-seated .leftHud{top:calc(76px + var(--safe-top));left:calc(12px + var(--safe-left));width:148px;gap:5px}.leftHud>*{padding:6px 8px}.leftHud .place b{font-size:10px}.leftHud .place small{font-size:9px}
 body .leftHud .session{display:block;position:fixed;top:calc(26px + var(--safe-top));left:50%;transform:translateX(-50%);width:118px;text-align:center;padding:6px}.leftHud .session span,.leftHud .session small{display:none}.leftHud .session b{font-size:18px;margin:0}
 body .tools,body.hub37 .tools{left:auto;top:calc(80px + var(--safe-top));right:calc(12px + var(--safe-right));display:flex;flex-direction:column;flex-wrap:nowrap;max-width:48px;max-height:calc(var(--app-height) - 158px - var(--safe-top) - var(--safe-bottom));overflow-y:auto;overflow-x:hidden}
 body #graphicsA0{top:calc(24px + var(--safe-top))!important;right:calc(170px + var(--safe-right))!important}body .topBtn39,body.is-seated .topBtn39{top:calc(24px + var(--safe-top));right:calc(116px + var(--safe-right))}
 body .bottom{left:calc(184px + var(--safe-left));right:calc(72px + var(--safe-right));bottom:calc(8px + var(--safe-bottom));grid-template-columns:minmax(0,1fr) 118px minmax(150px,1.3fr);gap:6px}
 body .bottom>.bottomLeft{grid-column:1;grid-row:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px}.bottomLeft>.ghost{width:auto;flex:1;min-height:36px}.bottomLeft>#centerView{width:100%;min-height:32px}
 body #basketPanel,body.is-seated #basketPanel{grid-column:2;grid-row:1;width:118px;padding:4px 6px}.catchCounter>b{font-size:17px}.catchLogBtn em{font-size:7px}
 body .bottom>.bottomRight{grid-column:3;grid-row:1;display:flex;flex-direction:row;gap:4px}.bottomRight>.primary{flex:1;min-height:48px}.bottomRight>.ghost{width:64px;min-height:48px}
 body #joystick,body.hub37 #joystick{width:128px;height:128px;left:calc(30px + var(--safe-left));bottom:calc(70px + var(--safe-bottom))}#joystick small{font-size:8px;bottom:-20px}
 #floatInset{left:52%;top:28%;width:142px;height:142px;max-width:24vw}#floatInset.compactFloat{left:52%;top:30%;width:68px;height:84px}.fightHud{top:calc(76px + var(--safe-top));left:52%;width:230px;max-width:34vw;background:#ffffff18}#notice{bottom:calc(95px + var(--safe-bottom));max-width:50vw}
}
@media(orientation:landscape) and (max-height:350px) and (max-width:1600px){body #joystick,body.hub37 #joystick{width:108px;height:108px;bottom:64px}body .leftHud,body.hub37 .leftHud,body.is-seated .leftHud{top:60px}.leftHud .place{position:fixed;left:190px;top:60px;width:145px;padding:4px}.leftHud .place small{font-size:8px}#floatInset{height:116px;top:25%}}
@media(orientation:landscape) and (max-height:600px) and (max-width:1600px){
 body #joystick,body.hub37 #joystick{bottom:calc(32px + var(--safe-bottom))}.leftHud .track{margin-top:5px}.leftHud .thin{margin-top:3px}.leftHud .strengthRow{margin-top:3px}.leftHud .place b{line-height:1.1}.leftHud .place small{line-height:1.2;margin-top:2px}
}
@media(orientation:landscape) and (max-height:350px) and (max-width:1600px){body #joystick,body.hub37 #joystick{bottom:calc(64px + var(--safe-bottom))}}
/* Update56: fine steering pad, explicit travel ring and command percentage. */
#joystick{background:radial-gradient(circle,rgba(236,242,214,.24) 0 22%,rgba(22,63,55,.18) 23% 25%,rgba(245,246,219,.12) 26% 49%,rgba(245,246,219,.32) 50% 51%,rgba(17,54,48,.3) 52%);border:2px solid #f1eed4a8;box-shadow:0 4px 18px #173c3540;transition:box-shadow .12s}#joystick.engaged56{box-shadow:0 0 0 3px #dfc37b77,0 4px 18px #173c3540}#joystick #stick{background:radial-gradient(circle at 35% 25%,#fffce8,#d8d9b6);border:2px solid #fff9d7;box-shadow:0 3px 9px #173c3550;transition:none}#grip56{position:absolute;inset:0;pointer-events:none;border-radius:50%}#grip56 span{position:absolute;top:48%;font:7px Arial;color:#e8edd7;left:6px}#grip56 span+span{left:auto;right:6px}#grip56 i{position:absolute;inset:20%;border:1px dashed #f3e8b24d;border-radius:50%}#joyAmount56{position:absolute;left:0;right:0;bottom:8px;font:9px Arial;text-align:center;color:#f8f4dd;pointer-events:none}#joystick:after{display:none}.rodFilters56{display:flex;gap:12px;margin:12px 0}.rodFilters56 label{display:flex;align-items:center;gap:8px}.rodFilters56 select{max-width:170px;padding:8px}
#grip56 b{position:absolute;left:50%;top:5px;transform:translateX(-50%);font:8px Arial;color:#f7edc9;white-space:nowrap}#grip56 b+b{top:auto;bottom:5px}#joystick:before{display:none}#joyAmount56{bottom:22px}

/* Update60: Safari tabs shrink the visible height; keep HUD cards in flow. */
@media(orientation:landscape) and (max-height:600px) and (max-width:1600px){
 body .leftHud,body.hub37 .leftHud,body.is-seated .leftHud{top:calc(76px + var(--safe-top));left:calc(12px + var(--safe-left));width:148px;gap:5px;display:flex;flex-direction:column;align-items:stretch}
 body .leftHud .vitals{position:static;width:100%;padding:6px 8px}
 body .leftHud .place{min-width:0;position:static;left:auto;top:auto;width:100%;padding:5px 8px;max-width:100%;flex-shrink:0}
 body .leftHud .place b{font-size:10px;line-height:1.1}body .leftHud .place small{font-size:9px;line-height:1.2;margin-top:2px}
}
@media(orientation:landscape) and (max-height:350px) and (max-width:1600px){
 body .leftHud,body.hub37 .leftHud,body.is-seated .leftHud{top:calc(68px + var(--safe-top));width:140px;gap:3px}
 body .leftHud .place{position:static;width:100%;padding:3px 6px}
 body .leftHud .vitals{padding:3px 6px}body .leftHud .track{height:5px;margin-top:3px}body .leftHud .thin{margin-top:2px}body .leftHud .strengthRow{margin-top:2px}
 body #joystick,body.hub37 #joystick{width:96px;height:96px;left:calc(30px + var(--safe-left));bottom:calc(24px + var(--safe-bottom))}
 body #joystick small{bottom:-16px}
}

/* Update61: one player/Zen card, equal compact status cards, controls on left. */
.playerCard61{background:var(--panel);border-radius:22px;display:flex;flex-direction:column;align-items:stretch;width:215px;pointer-events:auto;overflow:hidden}
.playerCard61 .profile{background:transparent;box-shadow:none;max-width:none;width:100%;padding:6px 10px;gap:8px;border-radius:0}
.playerCard61 .wallet{background:transparent;border-radius:0;max-width:none;width:100%;padding:0 10px 6px 50px;text-align:left;font-size:11px;overflow:visible}
.playerCard61 .wallet span{font-size:13px}.playerCard61 .wallet small{font-size:8px}.playerCard61 .wallet b{margin:0 3px}
@media(max-width:700px),(orientation:landscape) and (max-height:600px){
 body header{top:calc(16px + var(--safe-top));left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));margin-top:0;pointer-events:none;display:flex;justify-content:flex-start}
 header .brand{display:none}header .playerCard61{width:184px;border-radius:18px}.playerCard61 .profile{padding:5px 8px;gap:6px}.playerCard61 .avatar{width:30px;height:30px;min-width:30px;font-size:22px}.playerCard61 .profile b{font-size:11px}.playerCard61 .profile small{font-size:7px;letter-spacing:.3px}.playerCard61 .wallet{padding:0 8px 5px 44px;font-size:10px}
 body .leftHud,body.hub37 .leftHud,body.is-seated .leftHud{left:calc(8px + var(--safe-left));top:calc(92px + var(--safe-top));width:126px;display:flex;flex-direction:column;gap:4px}
 body .leftHud .vitals,body .leftHud .place,body .leftHud .session{position:static;transform:none;inset:auto;box-sizing:border-box;width:126px;min-width:0;max-width:126px;height:54px;min-height:54px;margin:0;padding:5px 7px;border-radius:11px;overflow:hidden}
 body .leftHud .place{display:flex;gap:4px}body .leftHud .place>span{font-size:17px}body .leftHud .place b{font-size:10px;line-height:1.1}body .leftHud .place small{font-size:8px;line-height:1.2;margin-top:2px}
 body .leftHud .vitals>div:first-child,body .leftHud .strengthRow{font-size:7px;letter-spacing:0}.leftHud .strengthRow{margin-top:3px}.leftHud .track{height:5px;margin-top:3px}.leftHud .thin{height:4px;margin-top:2px}
 body .leftHud .session{display:flex;flex-direction:column;justify-content:center;text-align:left}body .leftHud .session span{display:block;font-size:7px;letter-spacing:.5px}body .leftHud .session b{font-size:16px;line-height:1.1;margin:2px 0}body .leftHud .session small{display:none}
 body #mapButton37,body.hub37 #mapButton37,body.is-seated #mapButton37{position:fixed;top:calc(25px + var(--safe-top));right:calc(10px + var(--safe-right));left:auto;bottom:auto;transform:none;width:78px;min-height:34px;padding:5px;font-size:9px;border-radius:12px;z-index:31}
 body #graphicsA0{position:fixed!important;left:calc(8px + var(--safe-left))!important;right:auto!important;top:calc(270px + var(--safe-top))!important;bottom:auto!important;width:60px!important;max-width:60px!important;padding:2px!important;z-index:30}body #graphicsA0 button{font-size:7px!important;padding:5px 2px!important;min-height:30px}body #graphicsStatusA0{display:none}
 body #topBtn39,body.is-seated #topBtn39{position:fixed;left:calc(74px + var(--safe-left));right:auto;top:calc(270px + var(--safe-top));bottom:auto;width:60px;min-height:36px;padding:4px;font-size:8px;z-index:30}
}
@media(orientation:landscape) and (max-height:450px){
 body .leftHud,body.hub37 .leftHud,body.is-seated .leftHud{top:calc(84px + var(--safe-top));width:112px;gap:3px}
 body .leftHud .vitals,body .leftHud .place,body .leftHud .session{width:112px;max-width:112px;height:43px;min-height:43px;padding:3px 6px}
 body .leftHud .session b{font-size:14px}body .leftHud .place b{font-size:9px}body .leftHud .place small{font-size:7px}body .leftHud .track{height:4px;margin-top:2px}body .leftHud .strengthRow{margin-top:2px}
 body #graphicsA0{left:calc(140px + var(--safe-left))!important;top:calc(88px + var(--safe-top))!important}body #topBtn39,body.is-seated #topBtn39{left:calc(140px + var(--safe-left));top:calc(128px + var(--safe-top));width:60px}
 body #joystick,body.hub37 #joystick{width:96px;height:96px;left:calc(22px + var(--safe-left));bottom:calc(24px + var(--safe-bottom))}
}

@media(max-width:700px),(orientation:landscape) and (max-height:600px){body #mapButton37,body.hub37 #mapButton37{display:block}body .bottomLeft>#riverBtn{display:none}}
@media(orientation:landscape) and (max-height:350px){
 body .leftHud,body.hub37 .leftHud,body.is-seated .leftHud{top:calc(80px + var(--safe-top))}
 body .leftHud .vitals,body .leftHud .place,body .leftHud .session{height:30px;min-height:30px;padding:2px 4px;border-radius:8px}
 body .leftHud .track{height:3px;margin-top:1px}body .leftHud .strengthRow{margin-top:1px}body .leftHud .session b{font-size:12px;line-height:1;margin:1px 0}body .leftHud .session span{font-size:6px}body .leftHud .place>span{font-size:13px}
}

@media(orientation:portrait) and (max-width:700px) and (max-height:650px){body #joystick,body.hub37 #joystick{bottom:calc(110px + var(--safe-bottom))}}

.playerCard61 .wallet{min-height:0;line-height:14px}
@media(max-width:700px),(orientation:landscape) and (max-height:600px){body #mapButton37,body.hub37 #mapButton37{display:block!important}body .leftHud #sessionBox{display:flex;flex-direction:column}}