html,body{overscroll-behavior:none}body.mobile{height:100dvh;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.mobile #canvas{inset:0;height:100dvh}.mobile header{height:40px;padding:4px max(10px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left));flex-wrap:nowrap;justify-content:flex-end;gap:7px}.mobile header h1{font-size:12px;margin-right:auto}.mobile header #circuit,.mobile header #coast,.mobile header #shallow,.mobile header #vortex,.mobile header #reset,.mobile #controllerStatus,.mobile .badge,.mobile #controls,.mobile #note{display:none}.mobile header #status{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile header button{padding:7px 9px;font-size:12px;min-height:32px;background:#18233399}.mobile #minimap{left:calc(10px + env(safe-area-inset-left));top:45px;width:116px;height:100px;border-radius:11px;background:#10232688}.mobile #locationReadout{left:calc(10px + env(safe-area-inset-left));top:148px;font-size:9px;padding:3px 5px;max-width:135px;background:#10232666}.mobile #itemPanel{top:46px;bottom:auto;right:calc(10px + env(safe-area-inset-right));width:160px;grid-template-columns:82px 72px;gap:4px;pointer-events:none}.mobile #item{width:82px;min-height:78px;height:78px;border-width:1px;border-radius:13px;padding:3px;background:#35265399;pointer-events:auto;gap:0}.mobile #itemNext{height:72px;padding:3px;gap:0;background:#14233388;border-radius:11px}.mobile #itemIcon,.mobile #itemIcon2{width:36px;height:36px}.mobile #itemName,.mobile #itemName2,.mobile #itemKey,.mobile .slotOrder{font-size:9px;line-height:1.25}.mobile #itemHint{font-size:9px;margin:0;background:#10232666;border-radius:6px}.mobile .box{width:min(540px,95%);max-height:90dvh;padding:14px;overscroll-behavior:contain;touch-action:pan-y}.mobile .box h2{font-size:20px}.mobile .box p{font-size:12px}.mobile #desktopInstructions,.mobile #keyboardInstructions{display:none}.mobile #mobileInstructions{display:block!important}.mobile #pause .box{max-width:420px}.mobile .menuList{grid-template-columns:1fr 1fr;gap:6px}.mobile .menuList button{font-size:13px;padding:10px}.mobile #skipIntro{bottom:calc(14px + env(safe-area-inset-bottom));right:calc(14px + env(safe-area-inset-right));min-height:44px}.mobile #freezeHint{bottom:calc(14px + env(safe-area-inset-bottom));font-size:12px;white-space:nowrap}.mobile #touchResume{display:inline-block!important;padding:10px;margin-left:8px}.mobile #freezeText{display:none}
#touchDeck{position:absolute;inset:0;z-index:4;pointer-events:none;color:#fff}#touchDeck button,#touchSteer,#touchLook{pointer-events:auto;touch-action:none}#touchDeck button{background:#192e4690;border:1px solid #b9d9e78c;backdrop-filter:blur(2px);min-height:44px;text-shadow:0 1px 3px #082335}#touchDeck button:disabled{opacity:.4}#touchSteer{position:absolute;left:env(safe-area-inset-left);bottom:env(safe-area-inset-bottom);width:43%;height:calc(100% - 174px);min-height:112px;--stick-x:90px;--stick-y:calc(100% - 85px)}#touchLook{position:absolute;right:env(safe-area-inset-right);top:144px;bottom:calc(104px + env(safe-area-inset-bottom));width:40%;--stick-x:50%;--stick-y:50%;min-height:44px}.touchRing{position:absolute;left:var(--stick-x);top:var(--stick-y);width:112px;height:112px;border:1px solid #d8eeff70;background:#14324625;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.touchKnob{position:absolute;left:50%;top:50%;width:42px;height:42px;border-radius:50%;border:1px solid #d8eeffa0;background:#d8eeff28;transform:translate(-50%,-50%);pointer-events:none}.touchLabel{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);font-size:11px;white-space:nowrap;opacity:.85}.engaged .touchRing{background:#192e464d;border-color:#eefaffc9}#touchLook .touchRing{width:86px;height:64px;border-radius:24px;border-style:dashed}#touchLook .touchKnob{width:24px;height:24px}#touchLook .touchLabel{bottom:4px;font-size:10px}#touchJump,#touchItem,#touchBrake{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));width:65px;height:65px;border-radius:50%;padding:2px;font-size:12px}#touchJump{right:calc(12px + env(safe-area-inset-right));background:#62438580!important}#touchItem{right:calc(91px + env(safe-area-inset-right))}#touchBrake{right:calc(170px + env(safe-area-inset-right));font-size:10px}#touchForward{position:absolute;bottom:calc(90px + env(safe-area-inset-bottom));right:calc(88px + env(safe-area-inset-right));font-size:10px;min-height:32px!important;padding:5px 10px}#touchCameraReset{position:absolute;bottom:calc(92px + env(safe-area-inset-bottom));right:calc(12px + env(safe-area-inset-right));font-size:10px;min-height:32px!important;padding:5px 8px}#touchMode{position:absolute;left:calc(22px + env(safe-area-inset-left));bottom:calc(5px + env(safe-area-inset-bottom));font-size:10px;min-height:28px!important;padding:3px 10px;border:0!important;background:#1432464d!important}#rotateHint{position:absolute;inset:0;z-index:20;display:grid;place-content:center;gap:12px;text-align:center;padding:30px;background:#152238f5}#rotateHint strong{font-size:24px}#rotateHint p{margin:0;color:#d5e4f3;font-size:14px}#rotateHint span{font-size:46px}
@media(max-height:360px) and (orientation:landscape){.mobile #minimap{width:100px;height:86px}.mobile #locationReadout{top:134px}.mobile #touchSteer{height:calc(100% - 150px)}.mobile #touchLook{top:140px;bottom:102px}.mobile #itemPanel{top:43px}.mobile #touchJump,.mobile #touchItem,.mobile #touchBrake{width:60px;height:60px}}

#mobileReadout{position:absolute;top:47px;left:50%;transform:translateX(-50%);z-index:3;font:600 14px system-ui;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
/* All drag columns share the same safe-area content width. Auxiliary buttons live
   in its center column, above the three main actions, outside both drag regions. */
.mobile #touchDeck{left:env(safe-area-inset-left);right:env(safe-area-inset-right);top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom)}
#touchDeck #touchSteer{left:0;bottom:0}#touchDeck #touchLook{right:0;bottom:104px}
#touchDeck #touchJump{right:12px;bottom:18px}#touchDeck #touchItem{right:91px;bottom:18px}#touchDeck #touchBrake{right:170px;bottom:18px}
#touchDeck #touchForward,#touchDeck #touchCameraReset{left:calc(43% + 8px);right:auto;width:calc(17% - 16px);max-width:110px;height:40px;min-height:40px!important;padding:3px;white-space:normal;font-size:10px}
#touchDeck #touchForward{bottom:141px}#touchDeck #touchCameraReset{bottom:95px}#touchDeck #touchMode{left:22px;bottom:5px}
.mobile header{top:env(safe-area-inset-top)}.mobile #minimap{top:calc(45px + env(safe-area-inset-top))}.mobile #itemPanel{top:calc(46px + env(safe-area-inset-top))}.mobile #locationReadout{top:calc(148px + env(safe-area-inset-top))}.mobile #mobileReadout{top:calc(47px + env(safe-area-inset-top))}.mobile #controllerDetail{display:none}
@media(max-height:360px) and (orientation:landscape){.mobile #itemPanel{top:calc(43px + env(safe-area-inset-top))}.mobile #locationReadout{top:calc(134px + env(safe-area-inset-top))}}
#touchDeck #touchSteer{top:184px;height:auto;min-height:100px}#touchDeck #touchLook .touchRing{height:min(64px,calc(100% - 8px))}#touchDeck #touchLook .touchKnob{width:20px;height:20px}#touchDeck #touchLook .touchLabel{bottom:1px;font-size:9px}
@media(max-height:360px) and (orientation:landscape){#touchDeck #touchSteer{top:170px}}
#touchDeck #touchSteer,#touchDeck #touchLook{overflow:hidden}#touchDeck #touchSteer{--stick-y:clamp(56px,calc(100% - 85px),calc(100% - 56px))}

/* v29: two selectable held slots, with a separate use action. */
#itemPanel{width:316px;grid-template-columns:154px 154px;gap:8px;align-items:center;right:170px;bottom:108px}
#itemPanel #item,#itemPanel #itemNext{display:flex;flex-direction:column;align-items:center;justify-content:center;width:154px;height:160px;min-height:160px;padding:8px;gap:3px;border:2px solid #b9a1ec;border-radius:22px;background:linear-gradient(145deg,#533277f2,#13243bf2);box-shadow:0 5px 18px #050f2580;transform:scale(.92);transition:transform .12s ease,border-color .12s ease,background .12s ease;pointer-events:auto;opacity:1}
#itemPanel #itemIcon,#itemPanel #itemIcon2{width:84px;height:84px;filter:saturate(1.25) drop-shadow(0 2px 3px #0008);transition:width .12s ease,height .12s ease}
#itemPanel #itemIcon svg,#itemPanel #itemIcon2 svg{display:block;width:100%;height:100%}
#itemPanel #item.item-selected,#itemPanel #itemNext.item-selected{transform:scale(1);border:3px solid #fff36d;background:linear-gradient(145deg,#8841cbf7,#294b8ff2);box-shadow:0 0 0 2px #ffca3e75,0 0 20px #ffe75b4d}
#itemPanel .item-selected #itemIcon,#itemPanel .item-selected #itemIcon2{width:96px;height:96px;filter:saturate(1.45) brightness(1.12) drop-shadow(0 3px 4px #0008)}
#itemPanel #item.item-empty,#itemPanel #itemNext.item-empty{opacity:.56;background:#18253bea;border-color:#69788e}
#itemPanel #itemName,#itemPanel #itemName2{font-size:14px;line-height:1.2}
#itemPanel #itemKey,#itemPanel #itemKey2{font-size:12px;color:#e8d9ff}
#itemPanel .item-selected #itemKey,#itemPanel .item-selected #itemKey2{font-weight:800;color:#fff36d}
#itemUse{grid-column:1/3;min-height:42px;background:#552995f0;border:2px solid #d6b6ff;pointer-events:auto}
#itemUse:disabled{opacity:.55;cursor:default}
#itemPanel #itemHint{grid-column:1/3;margin-top:0;font-size:11px}
@media(max-width:700px){#itemPanel{right:14px;bottom:156px;width:244px;grid-template-columns:118px 118px}#itemPanel #item,#itemPanel #itemNext{width:118px;height:137px;min-height:137px}#itemPanel #itemIcon,#itemPanel #itemIcon2{width:68px;height:68px}#itemPanel .item-selected #itemIcon,#itemPanel .item-selected #itemIcon2{width:80px;height:80px}}
.mobile #itemPanel{width:212px;grid-template-columns:102px 102px;right:calc(10px + env(safe-area-inset-right));top:46px;bottom:auto;gap:5px;pointer-events:none}
.mobile #itemPanel #item,.mobile #itemPanel #itemNext{width:102px;height:112px;min-height:112px;border-radius:15px;padding:4px;gap:1px}
.mobile #itemPanel #itemIcon,.mobile #itemPanel #itemIcon2{width:54px;height:54px}
.mobile #itemPanel .item-selected #itemIcon,.mobile #itemPanel .item-selected #itemIcon2{width:64px;height:64px}
.mobile #itemPanel #itemName,.mobile #itemPanel #itemName2{font-size:11px}
.mobile #itemPanel #itemKey,.mobile #itemPanel #itemKey2,.mobile #itemPanel #itemHint{font-size:10px}
.mobile #itemUse{display:none}
@media(prefers-reduced-motion:reduce){#itemPanel #item,#itemPanel #itemNext,#itemPanel #itemIcon,#itemPanel #itemIcon2{transition:none}}