/* Shared gameplay safe zones: account above, movement left, travel below, map right. */
body{--hud-edge:20px;--hud-bottom:calc(16px + env(safe-area-inset-bottom,0px));--hud-transport-bottom:var(--hud-bottom)}
#explorer .topbar{padding:16px var(--hud-edge);min-height:64px;box-sizing:border-box;z-index:25;align-items:flex-start}
#explorer .brand{max-width:235px;gap:10px}
#explorer .brand strong{font-size:16px}
#explorer .brand small{font-size:9px;letter-spacing:1.5px}
#explorer .brand-icon{width:32px;height:32px;flex-shrink:0}
.top-actions:empty{display:none}
/* Keep every action in the upper-right rail on one visual baseline.  Some
   controls have text, while others are icon-only, so a minimum height alone
   lets their boxes grow to different sizes when the header wraps. */
#explorer .topbar{--header-control-height:44px;--header-control-gap:6px}
#explorer .topbar .top-actions{display:flex;align-items:center;align-content:flex-start;justify-content:flex-end;gap:var(--header-control-gap);min-height:var(--header-control-height)}
#explorer .topbar .top-actions>.button,#explorer .topbar .top-actions>button,#explorer .topbar .top-actions>a.button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:var(--header-control-height);min-height:var(--header-control-height);margin:0;line-height:1;white-space:nowrap}
#explorer .topbar .top-actions .pin-icon{flex:none}
#explorer .student-hud{z-index:30;left:auto;right:108px;top:16px;bottom:auto;display:flex;align-items:center;gap:7px;max-width:calc(100% - 390px)}
#explorer .student-hud .q-balance{min-width:0;max-width:100%;min-height:44px;padding:7px 12px;line-height:1.3;text-align:left;border-radius:14px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
.hud-wallet-values{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px}
.hud-student-context{display:block;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;margin-top:3px}
#explorer #student-profile{min-height:44px;white-space:nowrap;border-radius:14px}
#explorer #test-as-student{min-height:44px;white-space:nowrap;border-radius:14px;text-decoration:none;display:inline-flex;align-items:center}
#explorer #test-as-student[hidden]{display:none}
.game-music-control,.student-world .game-music-control{z-index:33;top:16px;right:20px;left:auto;bottom:auto}
.game-music-control summary{width:72px;height:44px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:9px 8px;font-size:12px;gap:3px}
.game-music-control .game-music-popover,.student-world .game-music-popover{top:52px;bottom:auto;left:auto;right:0}
/* In dialogs the sound control sits outside the dialog content, within the viewport. */
dialog .game-music-control{position:fixed}
#explorer .dpad,.student-world .dpad{z-index:30;left:var(--hud-edge);right:auto;bottom:var(--hud-bottom);width:140px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px}
.dpad button{min-width:44px;min-height:44px;touch-action:none}
.dpad-label{grid-column:1/4;text-align:center;font-size:10px}
.transport-dock{z-index:30}
#explorer .game-minimap{z-index:29;right:var(--hud-edge);bottom:var(--hud-bottom);width:200px}
#explorer .map-footer{left:190px;right:240px;bottom:var(--hud-bottom);min-height:68px;justify-content:center}
#explorer .map-footer .hint{display:none}
#explorer .zoom-controls{position:fixed;left:50%;bottom:calc(var(--hud-bottom) + 84px);transform:translateX(-50%);height:40px;background:#fff9efd9}
#explorer .compass{top:92px;left:30px}
#explorer .notice,.student-world .notice{z-index:45;bottom:calc(var(--hud-bottom) + 170px);max-width:min(420px,calc(100% - 32px));box-sizing:border-box;white-space:normal;text-align:center}
.seasonal-event-cta{z-index:30;top:90px;right:var(--hud-edge);bottom:auto;max-width:240px}
#explorer .place-card{z-index:31;bottom:calc(var(--hud-bottom) + 140px);left:var(--hud-edge)}

/* These are travel shortcuts, not passive category labels. */
#explorer .demo-shortcuts{top:90px;right:var(--hud-edge);left:370px;max-width:none;z-index:30;display:block;padding:10px 12px;border:1px solid #e8bd7d;border-radius:17px;background:#fff9eff2;box-shadow:0 5px 20px #54260024}
.demo-shortcuts-label{display:block;font:800 11px var(--brand-body);color:#88420e;margin:0 2px 7px}
.demo-shortcuts-list{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#e8bd7d transparent;padding:4px 2px 6px}
#explorer .demo-shortcuts button{flex:1 0 auto;min-height:44px;border:1px solid #e5b36b;border-radius:12px;padding:8px 10px;color:#78380e;background:#fff2d4;font:750 12px var(--brand-body);white-space:nowrap;cursor:pointer;transition:background .18s,transform .18s}
#explorer .demo-shortcuts button:hover:not(:disabled){background:#ffe39a;transform:translateY(-2px)}
#explorer .demo-shortcuts button:focus-visible{outline:3px solid #ed8116;outline-offset:2px}
#explorer .demo-shortcuts button.is-next{background:#ffe293;border-color:#f28a12;animation:demoDestinationPulse 2s ease-in-out infinite}
#explorer .demo-shortcuts button:disabled{opacity:.55;cursor:default;animation:none}
.demo-shortcut-arrow{display:inline-block;margin-left:5px;color:#ce5e00;font-weight:900}
@keyframes demoDestinationPulse{0%,100%{box-shadow:0 0 0 0 #f88c2640}50%{box-shadow:0 0 0 4px #f88c261a;background:#ffd166}}
body .demo-guide{z-index:31;top:90px;left:var(--hud-edge);width:320px;box-sizing:border-box;max-height:calc(100dvh - 260px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#e8bd7d transparent}
body .demo-guide-art img,body .demo-guide-art video{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
body .demo-guide.is-minimized{width:300px}
body .demo-guide button.demo-guide-toggle{height:44px;width:44px;min-height:44px;min-width:44px}
body .demo-guide-action{min-height:44px}

/* Personal island uses the same bottom controls; building actions have their own top row. */
.student-world .island-header{top:16px;left:20px;right:auto;max-width:calc(100% - 128px);min-height:48px;padding:8px 12px;box-sizing:border-box}
.student-world .island-brand{min-width:0;max-width:100%}
.student-world .island-header .island-brand small{display:block;max-width:min(280px,100%);margin-left:0;overflow:hidden;text-overflow:ellipsis}
.student-world .island-lot-actions{top:84px;bottom:auto;left:20px;right:20px;max-width:none;min-height:44px;padding:8px 10px;gap:7px;flex-wrap:nowrap;width:max-content;max-width:calc(100% - 40px);box-sizing:border-box;background:#fff9eff2;border:1px solid #e8bd7d;border-radius:16px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#e8bd7d transparent}
.student-world .island-lot-actions>*{flex-shrink:0}
.student-world .island-lot-actions button{min-height:44px}
.student-world .island-footer{left:auto;right:20px;bottom:var(--hud-bottom);z-index:30}
.student-world .island-footer button{min-width:44px;min-height:44px}
.student-world .island-shop,.student-world .island-plots{top:160px;bottom:100px;right:20px;max-height:none}
.student-world .build-banner{bottom:110px;left:calc((100% - 410px)/2);max-width:calc(100% - 460px);box-sizing:border-box}
.student-world .lot-art-status{top:154px}
.student-world .demo-guide{top:160px}
.student-world .seasonal-event-cta{top:158px;right:20px;bottom:auto;max-width:230px}
.student-world:has(#shop:not([hidden])) .transport-dock,.student-world:has(#shop:not([hidden])) .dpad{visibility:hidden}
.student-world:has(#shop:not([hidden])) .demo-guide{display:none}
.student-world:has(#shop:not([hidden]),#plots-panel:not([hidden])) .seasonal-event-cta{display:none}

@media(max-width:1100px){
 #explorer .demo-shortcuts{left:20px;top:90px}
 body .demo-guide{top:202px;width:295px;max-height:calc(100dvh - 380px)}
 body .demo-guide.is-minimized{width:280px}
 .student-world .demo-guide{top:160px}
}
@media(max-width:760px){
 body{--hud-edge:12px;--hud-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 #explorer .topbar{padding:12px;min-height:52px}
 #explorer .brand strong{font-size:14px}
 #explorer .brand small{font-size:8px;letter-spacing:1px}
 #explorer .brand-icon{width:27px;height:27px}
 #explorer .student-hud{top:64px;left:12px;right:12px;bottom:auto;max-width:none;display:flex;gap:6px}
 #explorer .student-hud .q-balance{flex:1;max-width:none;min-height:44px;padding:6px 10px}
 .hud-student-context{max-width:calc(100vw - 145px);font-size:10px}
 .hud-wallet-values{font-size:12px}
 #explorer #student-profile{padding:8px 10px;font-size:12px}
 #explorer #test-as-student{padding:8px 10px;font-size:12px}
 #explorer .topbar{--header-control-height:40px;--header-control-gap:5px}
 #explorer .topbar .top-actions{min-height:var(--header-control-height)}
 #explorer .topbar .top-actions>.button,#explorer .topbar .top-actions>button,#explorer .topbar .top-actions>a.button{height:var(--header-control-height);min-height:var(--header-control-height);min-width:var(--header-control-height);padding-inline:10px}
 .game-music-control,.student-world .game-music-control{top:12px;right:12px;bottom:auto;left:auto}
 .game-music-control summary{width:40px;height:40px;min-height:40px;padding:8px;font-size:22px}
 .game-music-control summary span{display:none}
 #explorer .dpad{display:none!important}
 .student-world .dpad{bottom:calc(var(--hud-bottom) + 78px);left:12px;right:auto;width:140px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px)}
 #explorer .game-minimap{width:clamp(104px,calc(100vw - 176px),148px);padding:7px;right:12px;bottom:calc(var(--hud-bottom) + 78px);border-radius:14px}
 #explorer .game-minimap>strong{font-size:12px;margin-bottom:4px}
 #explorer .game-minimap canvas{aspect-ratio:auto;height:94px;max-height:none}
 #explorer .minimap-legend{font-size:10px;gap:3px 7px;margin:5px 0;justify-content:center;flex-wrap:wrap}
 #explorer .minimap-goal{font-size:10px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #explorer .zoom-controls{display:none}
 #explorer .map-footer{display:none}
 #explorer .compass{display:none}
 #explorer .demo-shortcuts{top:118px;left:12px;right:12px;padding:7px 8px;max-width:none;border-radius:13px}
 .demo-shortcuts-label{font-size:10px;margin-bottom:1px}
 .demo-shortcuts-list{gap:6px;padding-bottom:3px}
 #explorer .demo-shortcuts button{font-size:11px;padding:7px 10px;min-height:44px}
 body[data-demo] .demo-guide,body .demo-guide{top:212px;left:12px;width:calc(100% - 24px);max-height:calc(100dvh - 435px);min-height:64px;padding:9px 12px;border-radius:14px}
 body .demo-guide.is-minimized{width:calc(100% - 24px)}
 .demo-guide-heading{min-height:28px}
 .demo-guide-task{grid-template-columns:46px 1fr;gap:9px}
 .demo-guide-art{height:54px}
 .demo-guide-task h2{font-size:16px;margin:0 0 2px}
 .demo-guide-task p{font-size:11px;line-height:1.35}
 .demo-guide-progress{margin:7px 0}
 body .demo-guide-action{padding:7px 10px;font-size:11px}
 #explorer .notice,.student-world .notice{bottom:calc(var(--hud-bottom) + 215px)}
 .seasonal-event-cta{top:126px;right:12px;bottom:auto;max-width:calc(100% - 24px);font-size:12px;padding:8px 12px}
 .student-world .island-header{top:12px;left:12px;right:auto;max-width:calc(100% - 78px);min-height:44px;padding:6px 10px}
 .student-world .island-brand{font-size:12px;letter-spacing:.4px}
 .student-world .island-brand small{font-size:9px;max-width:230px;overflow:hidden;text-overflow:ellipsis}
 .student-world .island-lot-actions{left:12px;right:12px;top:70px;bottom:auto;width:auto;max-width:none;gap:5px;padding:6px;min-height:58px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
 .student-world #coin-count{grid-column:1;grid-row:1}
 .student-world #aura-count{grid-column:2;grid-row:1}
 .student-world .island-lot-actions #student-profile,.student-world .island-demo-return{grid-column:3;grid-row:1}
 .student-world #all-plots{grid-column:1;grid-row:2}
 .student-world #my-plot{grid-column:2;grid-row:2}
 .student-world #open-shop{grid-column:3;grid-row:2}
 .student-world .island-lot-actions button{font-size:11px;padding:7px 10px}
 .student-world .island-lot-actions .coin-pill,.student-world .island-lot-actions .aura-pill{font-size:11px;padding:7px}
 body.student-world .demo-guide{top:192px;max-height:calc(100dvh - 415px)}
 .student-world .island-footer{bottom:calc(var(--hud-bottom) + 78px);right:12px;left:auto}
 .student-world .island-footer>div{display:grid;grid-template-columns:44px 44px;gap:6px}
 .student-world #island-walk{grid-column:1/3}
 .student-world .island-footer button{padding:8px;font-size:11px}
 .student-world .island-plots{top:192px;bottom:90px;right:12px;width:calc(100% - 24px)}
 .student-world:has(#plots-panel:not([hidden])) .demo-guide{display:none}
 .student-world:has(#plots-panel:not([hidden])) .dpad,.student-world:has(#plots-panel:not([hidden])) .island-footer{visibility:hidden}
 .student-world .island-shop{left:0;right:0;top:auto;bottom:0;height:43dvh;width:100%;border-radius:18px 18px 0 0;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 .student-world .build-banner{bottom:calc(43dvh + 10px);left:50%;max-width:calc(100% - 24px);padding:8px 12px;gap:5px}
 .student-world .build-banner span{max-width:calc(100vw - 50px)}
 .student-world:has(#shop:not([hidden])) .island-footer{display:none}
 .student-world .island-shop .draft-summary{position:static}
 .student-world:has(#shop:not([hidden])) .notice{bottom:calc(43dvh + 90px)}
 .student-world .lot-art-status{top:190px;left:12px}
 .student-world .seasonal-event-cta{top:192px;right:12px}
 /* Nearby interactions get a dedicated row above the lower controls on phones. */
 body:not(.student-world) .q-balloon{left:50%!important;top:auto!important;bottom:calc(var(--hud-bottom) + 178px);transform:translateX(-50%);max-width:calc(100% - 24px);box-sizing:border-box;white-space:normal;min-height:44px;font-size:12px;text-align:center}
 body:not(.student-world) .q-balloon:after{display:none}
}
@media(max-width:760px) and (max-height:740px){
 body[data-demo] .demo-guide{max-height:calc(100dvh - 512px)}
 body:has(.demo-guide:not(.is-minimized):not([hidden])):not(.student-world) .q-balloon{visibility:hidden}
}
/* Landscape phones reserve the center of the world instead of stacking the HUD. */
@media(max-height:520px) and (min-width:600px){
 body{--hud-edge:12px;--hud-bottom:10px}
 #explorer .topbar{padding:10px 12px}
 #explorer .student-hud{top:10px;left:240px;right:100px;max-width:none}
 .game-music-control,.student-world .game-music-control{top:10px;right:12px}
 #explorer .demo-shortcuts{top:72px;left:315px;right:12px;padding:5px 7px}
 #explorer .demo-shortcuts button{min-height:36px;font-size:10px;padding:5px 8px}
 body[data-demo] .demo-guide,body .demo-guide{top:72px;left:12px;width:285px;max-height:160px;min-height:0;padding:7px 10px}
 body .demo-guide.is-minimized{width:285px}
 .demo-guide-task p{display:none}
 .demo-guide-task{grid-template-columns:38px 1fr}
 .demo-guide-art{height:38px}
 .demo-guide-task h2{font-size:15px}
 .demo-guide-progress{margin:5px 0}
 body .demo-guide-action{min-height:36px;padding:6px 8px}
 #explorer .dpad{display:none!important}
 .student-world .dpad{bottom:18px;left:12px}
 #explorer .game-minimap{width:145px;bottom:10px;right:12px;padding:6px}
 #explorer .game-minimap canvas{max-height:90px}
 #explorer .minimap-goal{display:none}
 #explorer .zoom-controls{display:none}
 body:not(.student-world) .q-balloon{left:50%!important;top:auto!important;bottom:104px;transform:translateX(-50%);max-width:calc(100% - 340px);white-space:normal;box-sizing:border-box;min-height:44px;text-align:center}
 body:not(.student-world) .q-balloon:after{display:none}
 .student-world .island-lot-actions{top:66px;left:12px;right:12px;display:flex;overflow-x:auto}
 .student-world .island-header{top:10px;left:12px}
 body.student-world .demo-guide{top:135px;max-height:115px}
 .student-world .island-footer{bottom:18px}
 .student-world .island-plots{top:132px;bottom:10px;width:340px}
 .student-world .island-shop{top:132px;bottom:0;right:0;left:auto;width:350px;height:auto}
 .student-world .build-banner{left:calc((100% - 350px)/2);max-width:calc(100% - 375px);bottom:16px}
}
@media(prefers-reduced-motion:reduce){#explorer .demo-shortcuts button.is-next{animation:none;outline:2px solid #f28a12;outline-offset:2px}.demo-shortcuts button{transition:none}}

body[data-demo] .demo-guide:not(.is-centered){top:90px}
@media(max-width:760px){body[data-demo] .demo-guide:not(.is-centered){top:118px;max-height:calc(100dvh - 355px)}}
@media(max-height:520px) and (min-width:600px){body[data-demo] .demo-guide:not(.is-centered){top:72px;max-height:160px}}

/* One compact account control; balances and identity live inside the profile. */
#explorer #student-account[hidden]{display:none!important}
#explorer #student-profile.profile-avatar-button,body #student-profile.profile-avatar-button{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;padding:7px;margin:0;border:1px solid #ebba74;border-radius:50%;background:#fff4dcf2;box-shadow:0 3px 10px #6a361021;cursor:pointer}
body #student-profile.profile-avatar-button[hidden]{display:none}
.profile-avatar-button img{display:block;width:28px;height:28px;pointer-events:none}
.profile-avatar-button:hover{background:#ffe3a2!important}.profile-avatar-button:focus-visible{outline:3px solid #ffb52c;outline-offset:3px}
.student-world .island-profile{position:fixed;z-index:33;top:16px;right:108px}
.student-world .island-lot-actions{overflow:visible}
.student-world .shop-wallet{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 0 16px}
.student-world.is-decorating .island-profile{display:none!important}
dialog.student-profile-dialog>.game-music-control{position:absolute;top:-52px;right:64px;bottom:auto;left:auto}
@media(max-width:760px){
 #explorer .student-hud{left:auto;right:64px;top:12px;max-width:calc(100% - 76px)}
 #explorer .student-hud .q-balance{min-height:44px;max-width:calc(100vw - 170px);font-size:12px}
 #explorer .brand{max-width:calc(100vw - 136px)}
 .game-music-control summary{width:44px;height:44px;min-height:44px}
 .student-world .island-profile{top:12px;right:64px}
 .student-world .island-header{max-width:calc(100% - 132px)}
 .student-world .island-lot-actions{display:flex;align-items:center;gap:6px;min-height:56px;overflow-x:auto}
 .student-world .island-lot-actions>button{flex:1;white-space:nowrap}
}
@media(max-height:520px) and (min-width:600px){
 #explorer .student-hud{left:auto;top:10px;right:100px;max-width:calc(100% - 340px)}
 .student-world .island-profile{top:10px;right:100px}
}
@media(max-height:520px) and (max-width:760px){#explorer .student-hud,.student-world .island-profile{right:64px}}
@media(max-width:760px) and (min-height:521px){body:not(.student-world) .q-balloon{bottom:calc(var(--hud-bottom) + 280px)}}

/* Mobile actions share a compact rail; transport expands only on demand. */
@media(max-width:760px), (any-pointer:coarse){
 #explorer .student-hud{top:12px;right:64px;left:auto;max-width:calc(100% - 76px)}
 #explorer .brand{max-width:calc(100vw - 186px)}
 .student-world .island-header{max-width:calc(100% - 184px)}
 .student-world .island-profile{top:12px;right:64px}
 .game-music-control,.student-world .game-music-control{top:12px;right:12px;bottom:auto;left:auto}
 .game-music-control summary{width:44px;height:44px;min-height:44px;padding:8px;border-radius:50%;font-size:22px}
 .game-music-control summary span{display:none}
 .seasonal-event-cta,.student-world .seasonal-event-cta{position:fixed;z-index:33;top:12px;right:116px;bottom:auto;left:auto;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;max-width:none;box-sizing:border-box;padding:0;gap:0;border:1px solid #ca9bff;border-radius:50%;background:linear-gradient(145deg,#8951db,#6031a5);color:#fff4cf;box-shadow:0 3px 12px #4d237c40;cursor:pointer;touch-action:manipulation}
 .seasonal-event-cta,.student-world .seasonal-event-cta{grid-template:1fr / 1fr;animation:mobileEventGlow 2.8s ease-in-out infinite;transform:none}
 .seasonal-event-cta>span{grid-area:1 / 1;font-size:26px;line-height:1;pointer-events:none}
 .seasonal-event-cta>strong,.seasonal-event-cta>small{display:none}
 .seasonal-event-cta:focus-visible{outline:3px solid #ffcf53;outline-offset:3px}
 .transport-dock,.transport-dock.transport-dock-slotted{position:fixed;z-index:35;inset:auto 12px calc(16px + env(safe-area-inset-bottom,0px)) auto;transform:none;width:52px;height:52px;padding:0;gap:0;border-radius:50%;background:#fff4dceF;box-shadow:0 4px 16px #54260030;touch-action:manipulation}
 .transport-dock .transport-mobile-toggle{display:grid;place-items:center;position:relative;width:100%;height:100%;min-width:44px;min-height:44px;padding:10px;border:0;border-radius:50%;background:transparent;color:#88430e;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
 .transport-mobile-toggle svg{width:29px;height:29px;pointer-events:none}
 .transport-toggle-caret{position:absolute;left:3px;top:17px;font-size:19px;line-height:1;pointer-events:none}
 .transport-mobile-toggle:focus-visible{outline:3px solid #ed8c0d;outline-offset:3px}
 .transport-dock .transport-options{display:none;position:absolute;right:60px;bottom:0;gap:4px;padding:5px;width:max-content;max-width:calc(100vw - 88px);border:1px solid #e8bb74;border-radius:18px;background:#fff9edfA;box-shadow:0 6px 24px #54260030}
 .transport-dock.is-open .transport-options{display:flex}
 .transport-dock.is-open .transport-toggle-caret{transform:rotate(180deg)}
 .transport-dock .transport-choice{width:57px;min-height:56px;font-size:10px}
 .transport-dock .transport-choice svg{width:26px;height:26px}
}
@keyframes mobileEventGlow{50%{box-shadow:0 0 0 4px #b775f624,0 4px 16px #4d237c40}}
@media(prefers-reduced-motion:reduce){.seasonal-event-cta{animation:none!important}}
@media(max-height:520px) and (any-pointer:coarse), (max-height:520px) and (max-width:760px){
 #explorer .student-hud,.student-world .island-profile,.seasonal-event-cta,.student-world .seasonal-event-cta,.game-music-control,.student-world .game-music-control{top:10px}
 .transport-dock,.transport-dock.transport-dock-slotted{top:66px;bottom:auto}
 .transport-dock .transport-options{top:0;bottom:auto}
 .student-world .island-lot-actions{right:76px;max-width:calc(100% - 88px)}
}

/* The current homepage logo is the only brand element in gameplay. */
.game-home-logo{display:flex;align-items:center;justify-content:flex-start;flex:none;width:176px;max-width:calc(100vw - 190px);height:48px;pointer-events:auto;text-decoration:none;border-radius:10px;outline-offset:4px}
.game-home-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 2px 4px #442a1e25)}
.game-home-logo:focus-visible{outline:3px solid #ffd65c}
.game-logo-placeholder{width:110px;height:30px;max-width:100%;border-radius:8px;background:#fff3d71a}
.student-world .island-header:has(.game-home-logo){padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
@media(max-width:760px), (any-pointer:coarse){
 .game-home-logo{width:140px;height:44px;max-width:calc(100vw - 184px)}
 body:not(.student-world) .q-balloon.q-house-action{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;width:max-content;max-width:min(360px,calc(100vw - 32px));padding:9px 14px 9px 9px;border:2px solid #fff0bb;border-radius:18px;background:linear-gradient(135deg,#ffce4d,#ffad29);color:#4b260d;box-shadow:0 4px 0 #ac551c,0 8px 24px #442a1e45;text-align:left;font:800 14px/1.3 var(--brand-heading);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .15s}
 .house-action-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:11px;background:#fff9e8b3;color:#8c410d;pointer-events:none}
 .house-action-icon svg{width:24px;height:24px}
 .house-action-label{max-width:230px;pointer-events:none}
 .house-action-arrow{font:800 24px/1 var(--brand-body);margin-left:4px;pointer-events:none}
 body:not(.student-world) .q-balloon.q-house-action:active{transform:translateX(-50%) translateY(2px);box-shadow:0 2px 0 #ac551c,0 4px 12px #442a1e35}
 body:not(.student-world) .q-balloon.q-house-action:focus-visible{outline:3px solid #fff9df;outline-offset:4px}
}
@media(max-height:520px) and (any-pointer:coarse), (max-height:520px) and (max-width:760px){
 body:not(.student-world) .q-balloon.q-house-action{max-width:min(360px,calc(100vw - 340px));min-height:52px}
}