/* Stone controls, dark inset panels and the existing pixel font carry the
   personal-world screens. Game HUD/inventory geometry stays untouched. */
#home{overflow-y:auto}
/* Menu dimensions are screen pixels. The inventory's --ui scale must not turn
   these controls into 60–80px buttons with oversized borders on desktop. */
#home .main-menu{width:360px;max-width:calc(100% - 48px);top:43%;transform:translate(-50%,-10%)}
#home .main-menu .pixel-button{box-sizing:border-box;height:44px;min-height:44px;border:4px solid transparent;border-image:url('/assets/vanilla-ui/button.png') 2 fill stretch;padding:0 10px;font-size:16px;line-height:20px;text-shadow:2px 2px #3f3f3f;white-space:nowrap;min-width:0;box-shadow:none;transition:none}
/* One texture pixel becomes two screen pixels: black outline, then bevel.
   Keep the original nine-slice sprite instead of shrinking its two-row edge. */
#home .main-menu .pixel-button:is(:hover,:focus-visible):not(:disabled){border-image-source:url('/assets/vanilla-ui/button_highlighted.png');color:#fff;filter:none;transform:none;outline:none}
#home .main-menu .pixel-button:active:not(:disabled){border-image-source:url('/assets/vanilla-ui/button_highlighted.png');text-shadow:2px 2px #3f3f3f;transform:none;box-shadow:none}
#home .main-menu .pixel-button:disabled{border-image-source:url('/assets/vanilla-ui/button_disabled.png');color:#a0a0a0;text-shadow:2px 2px #282828;opacity:1;cursor:default;filter:none;transform:none}
#home .main-menu>.pixel-button{margin:0 0 6px}
#play-world-name{margin:0 0 8px;text-align:center;color:#ddd;font-size:12px;line-height:16px;text-shadow:1px 1px #222;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#home .main-menu .button-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:6px;margin-top:10px}
#home .main-menu .button-row>.pixel-button{width:100%;padding:0 4px;font-size:16px}
#home #language-button{position:static;width:44px;height:44px;margin:0;padding:0}
#home #language-button img{width:20px;height:20px}
#home .profile-button{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.profile-menu-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;line-height:18px}
.profile-menu-provider{flex-shrink:0;color:#ddd;font-size:12px;line-height:16px;white-space:nowrap}
#home .menu-footer{left:10px;right:10px;bottom:8px;font-size:12px;line-height:16px;text-shadow:1px 1px #222}
#dialog:is([data-kind=worlds],[data-kind=create],[data-kind=world-settings],[data-kind=world-members],[data-kind=share],[data-kind=profile],[data-kind=world-error]){width:min(700px,calc(100vw - 32px));padding:20px;max-height:calc(100dvh - 32px);background:#211d18 url('/assets/vanilla-ui/menu_background.png') repeat;background-size:64px;border:2px solid #777;box-shadow:inset 2px 2px #ffffff20,inset -2px -2px #0008,0 12px 0 #0003;overflow-y:auto;color:#fff}
#dialog:is([data-kind=create],[data-kind=world-settings],[data-kind=share],[data-kind=profile],[data-kind=world-error]){width:min(500px,calc(100vw - 32px))}
#dialog:is([data-kind=worlds],[data-kind=create],[data-kind=world-settings],[data-kind=world-members],[data-kind=share],[data-kind=profile],[data-kind=world-error]) .panel-heading{margin:0 0 18px}
#dialog:is([data-kind=worlds],[data-kind=create],[data-kind=world-settings],[data-kind=world-members],[data-kind=share],[data-kind=profile],[data-kind=world-error]) .panel-heading h2{font-size:clamp(18px,calc(10 * var(--ui)),24px);line-height:1.3}
.world-screen{display:flex;flex-direction:column;gap:12px;font-size:clamp(14px,calc(8 * var(--ui)),18px);line-height:1.5}
.world-screen :is(.panel-copy,.panel-note,.form-error,.world-lead,.field,.world-empty){font-size:inherit;line-height:1.5;margin:0;color:#ddd}
.world-screen .form-error{color:#ff9292;overflow-wrap:anywhere}
.world-screen .panel-note{font-size:clamp(12px,calc(7 * var(--ui)),16px);color:#b4b4ae;text-align:left}
.world-screen .pixel-button{height:auto;min-height:44px;border-width:4px;padding:10px 12px;font-size:inherit;line-height:1.3;text-shadow:2px 2px #3f3f3f}
.world-screen .world-back{margin-top:6px;flex-shrink:0}
.world-screen .text-input{height:44px;min-height:44px;padding:8px 10px;font-size:16px;line-height:1.3;border-width:2px}
.world-screen select.text-input{appearance:auto;color-scheme:dark}
.world-screen .field{margin:0;display:flex;flex-direction:column;gap:6px}
.world-screen .field>span{font-size:inherit;line-height:1.3;margin:0;color:#c3c3bb}
.world-screen .world-form{display:flex;flex-direction:column;gap:14px}
.world-screen .world-mode{display:flex;flex-direction:column;gap:8px}
.world-screen .world-mode .panel-copy{font-size:14px;color:#c8c8c1}
.world-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex-shrink:0}
.world-tabs .pixel-button{padding:10px 4px;font-size:clamp(12px,calc(8 * var(--ui)),18px)}
.world-tabs [aria-selected=true]{border-image-source:url('/assets/vanilla-ui/button_highlighted.png');color:#d9f4ab}
.world-lead{color:#c4c4bb!important}
.world-catalog{display:flex;flex-direction:column;gap:10px;min-height:130px}
.world-entry{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:2px solid #62625b;background:#0a0b09a6}
.world-entry-icon{display:grid;place-items:center;width:44px;height:44px;font-size:28px;background:#4a5d39;border:2px solid #7c8c65;color:#d2e5b3}
.world-entry-title{display:block;color:#fff;font-size:inherit;line-height:1.4;overflow-wrap:anywhere}
.world-entry-detail{display:block;color:#b7b7ae;font-size:12px;line-height:1.5;margin-top:5px}
.world-badges{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:4px}
.world-badge{font-size:11px;line-height:1.4;color:#b7bdb0}
.world-badge.official,.world-badge.owner{color:#c5e694}
.world-entry-actions{display:flex;flex-direction:column;gap:6px;min-width:90px}
.world-entry-actions .pixel-button{font-size:13px;min-width:90px;padding:8px}
.world-empty{display:grid;place-items:center;min-height:130px;padding:20px;border:2px dashed #5e5e55;text-align:center;color:#c4c4b8!important}
.world-share-content{display:flex;flex-direction:column;gap:12px;min-width:0}
.world-screen .share-input{margin:0;font-size:14px}
.world-share-actions{display:flex;gap:8px}
.world-share-actions>*{flex:1}
.world-members{display:flex;flex-direction:column;gap:10px}
.world-member{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;background:#0006;border:2px solid #62625b}
.world-member .form-error{grid-column:1/-1}
.world-member-info{min-width:0;overflow-wrap:anywhere}
.world-member .pixel-button{font-size:13px;width:auto;min-width:120px}
.profile-emblem{text-align:center;color:#b3d786;font-size:48px;line-height:1.3}
.profile-provider{text-align:center;color:#c5e694;margin:0}
.profile-account{text-align:center;overflow-wrap:anywhere;color:#fff;margin:0 0 6px}
html[data-telegram=true] #dialog:is([data-kind=worlds],[data-kind=create],[data-kind=world-settings],[data-kind=world-members],[data-kind=share],[data-kind=profile],[data-kind=world-error]){max-height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 24px);max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px)}
/* Keep the extended pause actions in a scrollable reachable stack on phones. */
#dialog[data-kind=pause] .modal-buttons{max-height:65%;overflow-y:auto;grid-template-columns:1fr;top:24%;gap:8px}
#dialog[data-kind=pause] .modal-buttons>.pixel-button{min-height:44px;height:auto;padding:10px;font-size:clamp(14px,calc(8 * var(--ui)),20px);line-height:1.25;grid-column:1/-1}
@media(max-width:600px){
 #home .menu-heading{top:28px;width:min(310px,calc(100% - 48px));height:90px}
 #home .wordmark{background-position:center -20px}
 #home .main-menu{top:35%;transform:translateX(-50%)}
 #dialog:is([data-kind=worlds],[data-kind=create],[data-kind=world-settings],[data-kind=world-members],[data-kind=share],[data-kind=profile],[data-kind=world-error]){padding:14px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
 .world-entry{grid-template-columns:36px minmax(0,1fr);gap:8px;padding:10px}
 .world-entry-icon{width:36px;height:36px;font-size:24px}
 .world-entry-actions{grid-column:1/-1;flex-direction:row}
 .world-entry-actions .pixel-button{flex:1}
 .world-member{grid-template-columns:1fr}
 .world-member .pixel-button{width:100%}
 .world-screen .world-back{position:sticky;bottom:0;z-index:1}
}
@media(max-height:540px){#home .menu-heading{top:12px;width:240px;height:60px}#home .main-menu{top:34%}#home .menu-footer{display:none}}
/* Telegram can leave much less usable height than the physical viewport. This
   class follows its settled viewport minus both safe areas in resizeGui(). */
body.short-menu #home .menu-heading{position:relative;top:auto;left:auto;transform:none;width:240px;max-width:calc(100% - 48px);height:60px;margin:12px auto 0}
body.short-menu #home .main-menu{position:relative;top:auto;left:auto;transform:none;width:min(360px,calc(100% - 48px));margin:8px auto 24px}
body.short-menu #home .menu-footer{display:none}
body.short-menu #home .main-menu>.pixel-button{margin-bottom:6px}
body.short-menu #home .main-menu .button-row{margin-top:8px}
/* The world keeps running online; this gate only releases local held input. */
#orientation-prompt{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:max(24px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:#000b;touch-action:none;overscroll-behavior:none}
.orientation-card{box-sizing:border-box;width:min(340px,100%);max-height:100%;overflow-y:auto;padding:22px;border:2px solid #777;background:#252525 url('/assets/vanilla-ui/menu_background.png') repeat;background-size:64px;box-shadow:inset 2px 2px #ffffff16,inset -2px -2px #0008,4px 4px #0008;text-align:center;color:#fff}
.orientation-illustration{display:block;width:112px;height:88px;margin:0 auto 14px}
.orientation-card h2{margin:0 0 12px;font-size:20px;line-height:28px;font-weight:400;text-shadow:1px 1px #222}
.orientation-card p{margin:0 0 20px;font-size:14px;line-height:20px;color:#ccc;text-shadow:1px 1px #222}
#orientation-menu{height:44px;min-height:44px;border-width:2px;padding:0 8px;font-size:16px;line-height:20px;white-space:nowrap;text-shadow:1px 1px #373737}
body[data-rotate=true] :is(#touch-controls,.hud-actions,#capture-hint){visibility:hidden}
html[data-telegram=true] #orientation-prompt{bottom:auto;height:var(--app-viewport-height,100dvh);padding:calc(var(--app-safe-top) + 16px) calc(var(--app-safe-right) + 16px) calc(var(--app-safe-bottom) + 16px) calc(var(--app-safe-left) + 16px)}

/* Cover the menu from first paint, including before the game bundle is ready. */
#orientation-prompt{z-index:2000;background:linear-gradient(#0009,#0009),url('/assets/classic/dirt.png') repeat;background-size:auto,64px 64px;outline:none}
.orientation-card{border:0;background:none;box-shadow:none}
body[data-rotate=true] :is(#home,#hud,#modal-layer){visibility:hidden}
@media (pointer:coarse) and (orientation:portrait) and (max-width:600px){
 #orientation-prompt[hidden]{display:flex!important}
 :is(#home,#hud,#modal-layer){visibility:hidden}
}

html body.touch #joystick{width:104px;height:104px;left:calc(var(--app-safe-left,env(safe-area-inset-left,0px)) + 18px);bottom:calc(var(--app-safe-bottom,env(safe-area-inset-bottom,0px)) + 22px);background:#10182055;border:2px solid #ffffff55;box-shadow:inset 0 0 0 3px #0003;touch-action:none}
body.touch #joystick-knob{width:40px;height:40px;left:30px;top:30px;background:#ffffff66;border:2px solid #ffffff99}
html body.touch #touch-actions{right:calc(var(--app-safe-right,env(safe-area-inset-right,0px)) + 16px);bottom:calc(var(--app-safe-bottom,env(safe-area-inset-bottom,0px)) + 22px);display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:8px}
body.touch #touch-actions button{width:48px;height:48px;min-width:48px;min-height:48px;padding:0;font:24px Pixel,monospace;border:2px solid #ffffff70;background:#15202b88;box-shadow:inset 0 -3px #0005;border-radius:8px;touch-action:none;color:#fff;text-shadow:1px 2px #000}
body.touch #touch-actions button:active,body.touch #touch-actions button[aria-pressed=true]{background:#729b8cbb;border-color:#e4ffed}
body.touch [data-touch=jump]{grid-column:3;grid-row:2}
body.touch [data-touch=break]{grid-column:2;grid-row:1}
body.touch [data-touch=place]{grid-column:3;grid-row:1}
body.touch [data-touch=fly]{grid-column:1;grid-row:1}
body.touch [data-touch=sprint]{grid-column:1;grid-row:2}

html[data-telegram=true] body.touch #joystick{bottom:calc(var(--app-safe-bottom) + 22px);left:calc(var(--app-safe-left) + 18px)}
html[data-telegram=true] body.touch #touch-actions{bottom:calc(var(--app-safe-bottom) + 22px);right:calc(var(--app-safe-right) + 16px)}

#touch-actions svg{width:24px;height:24px;vertical-align:middle;pointer-events:none}

/* Game UI is not document text; editable fields retain native text handling. */
html,body{-webkit-text-size-adjust:100%;overscroll-behavior:none;touch-action:none}
body,button,canvas,img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable=true]{-webkit-user-select:text;user-select:text;touch-action:manipulation;font-size:16px}
#home,#modal-layer,.pixel-panel{touch-action:pan-y}
html body.touch #touch-actions{grid-template-columns:repeat(3,64px)}
body.touch #touch-actions button{width:64px;font-size:11px;line-height:16px;text-shadow:1px 1px #000}
/* Keep the familiar centered logo-over-buttons layout at every height. */
html body:is(.short-menu,:not(.short-menu)) #home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 16px;overflow-y:auto;box-sizing:border-box}
html body:is(.short-menu,:not(.short-menu)) #home .menu-heading{position:relative;inset:auto;transform:none;width:280px;max-width:90%;height:48px;margin:0;flex-shrink:0;zoom:var(--menu-fit,1)}
html body:is(.short-menu,:not(.short-menu)) #home .wordmark{background-position:center -20px}
html body:is(.short-menu,:not(.short-menu)) #home .main-menu{position:relative;inset:auto;transform:none;width:360px;max-width:calc(100% - 24px);margin:0;flex-shrink:0;zoom:var(--menu-fit,1)}
html body:is(.short-menu,:not(.short-menu)) #home .main-menu .button-row{margin-top:6px}
html body:is(.short-menu,:not(.short-menu)) #home .menu-footer{display:none}

/* The panorama reaches the viewport edge; only menu content respects safe areas. */
html[data-telegram=true] body #home{top:0;left:0;right:0;bottom:auto;height:var(--app-viewport-height,100dvh);padding:calc(var(--app-safe-top) + 12px) calc(var(--app-safe-right) + 16px) calc(var(--app-safe-bottom) + 12px) calc(var(--app-safe-left) + 16px)}
html body:is(.short-menu,:not(.short-menu)) #home .menu-heading,html body:is(.short-menu,:not(.short-menu)) #home .main-menu{max-width:none}
html body:is(.short-menu,:not(.short-menu)) #home .menu-footer{display:none}

#home .main-menu .button-row{grid-template-columns:minmax(0,1fr) 44px}
body[data-view=menu][data-modal] #home{visibility:hidden}
body[data-modal=settings] #modal-layer{background:linear-gradient(#0007,#0007),url('/assets/classic/dirt.png') repeat;background-size:auto,64px 64px}
html body #dialog[data-kind=settings]{position:relative;inset:auto;transform:none;box-sizing:border-box;width:100%;height:100%;max-height:none;max-width:none;padding:16px;display:flex;flex-direction:column;align-items:center;overflow-y:auto}
html body #dialog[data-kind=settings] .panel-heading{position:relative;inset:auto;margin:0 0 16px;width:100%;text-align:center;flex-shrink:0}
html body #dialog[data-kind=settings] #dialog-close{display:none}
html body #dialog[data-kind=settings] #dialog-body{position:relative;inset:auto;transform:none;width:min(620px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:auto 0;flex-shrink:0}
html body #dialog[data-kind=settings] #dialog-body>.pixel-button:last-child{position:relative;inset:auto;transform:none;grid-column:1/-1;width:min(360px,100%);justify-self:center;margin-top:8px}
html body #dialog[data-kind=settings] .setting-row{min-width:0}

/* Smaller menu controls over a slowly drifting panorama. */
html body:is(.short-menu,:not(.short-menu)) #home .main-menu{width:320px}
#home .main-menu .pixel-button{height:36px;min-height:36px;font-size:14px;line-height:18px}
#home .main-menu .button-row>.pixel-button{font-size:14px}
#home .main-menu .button-row{grid-template-columns:minmax(0,1fr) 36px}
#home #language-button{width:36px;height:36px}
#home .profile-menu-name{font-size:14px}
#home .profile-menu-provider{font-size:10px}
html body #home{background:none;isolation:isolate;overflow:hidden}
#home::before{content:'';position:absolute;inset:-6%;z-index:-1;background:linear-gradient(#0001,#0003),url('/assets/vanilla-ui/panorama-26.png') center/cover;transform:translateX(-3%) scale(1.06);animation:menu-panorama 40s ease-in-out infinite alternate;pointer-events:none;will-change:transform}
@keyframes menu-panorama{to{transform:translateX(3%) scale(1.1)}}
body[data-view=playing] #home::before,body[data-modal] #home::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#home::before{animation:none;transform:scale(1.06)}}

/* A larger title with breathing room above the slightly enlarged buttons. */
html body:is(.short-menu,:not(.short-menu)) #home{gap:calc(24px * var(--menu-fit,1))}
html body:is(.short-menu,:not(.short-menu)) #home .menu-heading{width:400px;height:64px}
html body:is(.short-menu,:not(.short-menu)) #home .wordmark{width:100%;background-position:center -30px}
html body:is(.short-menu,:not(.short-menu)) #home .main-menu{width:340px}
#home .main-menu .pixel-button{height:40px;min-height:40px;font-size:15px}
#home .main-menu .button-row>.pixel-button{font-size:15px}
#home .main-menu .button-row{grid-template-columns:minmax(0,1fr) 40px}
#home #language-button{width:40px;height:40px}

/* Fit the entire home screen; only dialogs may scroll. */
html,body{overflow:hidden;height:100%;width:100%}
html body:is(.short-menu,:not(.short-menu)) #home{overflow:hidden;touch-action:none;gap:calc(18px * var(--menu-fit,1))}
html body:is(.short-menu,:not(.short-menu)) #home .menu-heading{width:360px;height:58px}
html body:is(.short-menu,:not(.short-menu)) #home .wordmark{background-position:center -27px}
html body:is(.short-menu,:not(.short-menu)) #home .main-menu{width:320px}
#home .main-menu .pixel-button{height:36px;min-height:36px;font-size:14px}
#home .main-menu .button-row>.pixel-button{font-size:14px}
#home .main-menu .button-row{grid-template-columns:minmax(0,1fr) 36px}
#home #language-button{width:36px;height:36px}
html body.touch #touch-actions{grid-template-columns:repeat(3,48px)}
body.touch #touch-actions button{width:48px;height:48px}
body.touch #chat-entry{height:48px;z-index:45}
body.touch #chat-input{flex:1;min-width:0;width:0;font-size:16px}
body.touch #chat-form>button{display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:44px;padding:8px;background:#274b59;border:2px solid #83c7d1;touch-action:manipulation}
#chat-form svg{width:24px;height:24px;pointer-events:none}
body.touch[data-chat=true] #touch-controls{visibility:hidden}
body.touch .hud-actions :is(.hud-button,.square-button){width:40px;height:40px;min-width:40px;padding:6px;font-size:24px;line-height:24px}
body.touch .hud-actions small,body.touch #share-button span{display:none}

.hud-actions svg{width:24px;height:24px;pointer-events:none}

html body.touch #chat-entry{bottom:max(var(--chat-keyboard-bottom,0px),var(--app-safe-bottom,env(safe-area-inset-bottom,0px)))}