#component{height:calc(100dvh - 150px);padding-bottom:40px}#component iframe{display:block;width:100%;height:calc(100% - 38px);border:0;background:#173b35}#component iframe[hidden]{display:none}.component-bar{height:38px;display:flex;align-items:center;gap:8px;padding:3px 7px}.component-bar button{font-size:10px;padding:6px;white-space:nowrap}.component-bar strong{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.component-bar #sync{font-size:8px;margin-left:auto}.hub-links{background:#173b35e8;backdrop-filter:blur(8px);z-index:50}body[data-in-world=true] .top{height:52px}body[data-in-world=true] .dev{display:none}body[data-in-world=true] #component{height:calc(100dvh - 94px);padding-bottom:0}.top{position:relative;z-index:1}#profile,#games{max-height:82dvh}#worldFrame{background:#d9d7c6}iframe{color-scheme:normal}

/* Keep account and language controls in separate measured header cells. */
.player-app{--player-header:104px;--player-dock:calc(58px + env(safe-area-inset-bottom,0px))}
.player-app .top,.player-app[data-in-world=true] .top{box-sizing:border-box;height:var(--player-header);padding:8px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 10px}
.player-app .top>a{grid-column:1;grid-row:1 / 3;min-width:0;font-size:18px;letter-spacing:-.5px}.player-app .top>a span{font-size:7px;letter-spacing:1px;max-width:170px}
.player-app .top #phone{grid-column:2;grid-row:1;justify-self:end;max-width:145px;min-height:44px;font-size:12px;padding:5px 10px;white-space:nowrap}
.player-app .top .language-switch{position:static;grid-column:2;grid-row:2;justify-self:end;z-index:2;margin:0;padding:2px;gap:2px;border-radius:8px;font-size:11px}
.player-app .top .language-switch button{min-width:39px;min-height:32px;padding:4px 8px}
.player-app #component{box-sizing:border-box;height:calc(100dvh - var(--player-header) - var(--player-dock) - 28px);padding:0}
.player-app[data-in-world=true] #component{height:calc(100dvh - var(--player-header) - var(--player-dock));padding:0}
.player-app #component .component-bar{box-sizing:border-box;height:44px}.player-app #component iframe{height:calc(100% - 44px)}
.player-app .hub-links{box-sizing:border-box;min-height:var(--player-dock);padding-bottom:env(safe-area-inset-bottom,0px)}

.player-app #balance:empty{display:none}
/* The map keeps the phone screen for the building. Extra areas open from My Hain. */
.player-app[data-in-world=true]{--player-header:54px;--player-dock:0px}.player-app[data-in-world=true] .top{height:54px;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:1fr;gap:6px;padding:5px 9px}.player-app[data-in-world=true] .top>a{grid-column:1;grid-row:1;font-size:14px}.player-app[data-in-world=true] .top>a span{display:none}.player-app[data-in-world=true] .top #phone{grid-column:2;grid-row:1;font-size:10px;min-height:34px;padding:3px 7px}.player-app[data-in-world=true] #balance{font-size:9px;margin-top:1px}.player-app[data-in-world=true] .top .language-switch{grid-column:3;grid-row:1;padding:1px}.player-app[data-in-world=true] .top .language-switch button{min-width:29px;min-height:29px;padding:3px 5px;font-size:10px}.player-app[data-in-world=true]>.hub-links{display:none}.player-app[data-in-world=true] #component .component-bar{height:26px;padding:0 5px;background:#30203d}.player-app[data-in-world=true] #component .component-bar button{padding:3px 7px;font-size:9px;min-height:22px}.player-app[data-in-world=true] #component #sync{display:none}.player-app[data-in-world=true] #component iframe{height:calc(100% - 26px)}.profile-links{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:16px 0}.profile-links button{font-size:12px}

/* The outer viewport owns the iPhone safe areas; the map iframe starts below them. */
.mobile-header-logo,.mobile-phone-shortcut{display:none}
.player-app:not(.desktop-playground){--player-safe-top:env(safe-area-inset-top,0px);--player-safe-bottom:env(safe-area-inset-bottom,0px);--player-safe-left:env(safe-area-inset-left,0px);--player-safe-right:env(safe-area-inset-right,0px);--player-header:calc(104px + var(--player-safe-top))}
.player-app:not(.desktop-playground) .top{height:var(--player-header);padding-top:calc(8px + var(--player-safe-top));padding-left:max(14px,var(--player-safe-left));padding-right:max(14px,var(--player-safe-right))}
.player-app:not(.desktop-playground)[data-in-world=true]{--player-header:calc(54px + var(--player-safe-top))}
.player-app:not(.desktop-playground)[data-in-world=true] .top{height:var(--player-header);padding:calc(5px + var(--player-safe-top)) max(9px,var(--player-safe-right)) 5px max(9px,var(--player-safe-left));overflow:visible}
.player-app:not(.desktop-playground)[data-in-world=true] .top>a{font-size:0;transform:none;display:flex;align-items:center;min-height:44px}
.player-app:not(.desktop-playground)[data-in-world=true] .mobile-header-logo{display:block;flex:none;width:84px;height:44px;object-fit:contain}
.player-app:not(.desktop-playground)[data-in-world=true] .top #phone{min-height:44px;max-width:145px}
.player-app:not(.desktop-playground)[data-in-world=true] .top .language-switch button{min-height:36px}
.player-app:not(.desktop-playground)[data-in-world=true] #component{height:calc(100dvh - var(--player-header) - var(--player-safe-bottom))}
.player-app:not(.desktop-playground)[data-in-world=true] #component .component-bar{height:34px;padding-left:max(8px,var(--player-safe-left));padding-right:max(8px,var(--player-safe-right))}
.player-app:not(.desktop-playground)[data-in-world=true] #component .component-bar button{min-height:30px;padding:4px 9px;font-size:11px}
.player-app:not(.desktop-playground)[data-in-world=true] #component iframe{height:calc(100% - 34px)}
.player-app:not(.desktop-playground)[data-in-world=true] .mobile-phone-shortcut{position:fixed;right:calc(14px + var(--player-safe-right));bottom:calc(14px + var(--player-safe-bottom));z-index:60;display:grid;place-items:center;width:56px;height:56px;min-height:56px;padding:10px;background:#f5ce58;color:#30203d;border:2px solid #fff0c9;border-radius:50%;box-shadow:2px 3px 0 #30203d,0 3px 12px #21132966;transform:rotate(-7deg);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mobile-phone-shortcut>span{display:grid;place-items:center;width:100%;height:100%}.mobile-phone-shortcut svg{display:block;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.player-app .mobile-phone-shortcut:after{content:'';position:absolute;inset:4px;border:1px dashed #30203d66;border-radius:48% 52% 46% 54%;pointer-events:none}
.player-app .mobile-phone-shortcut:active{transform:rotate(-3deg) translateY(2px)}
.player-app:has(dialog[open]) .mobile-phone-shortcut{visibility:hidden}
.player-app:not(.desktop-playground) dialog{max-height:min(82dvh,calc(100dvh - var(--player-safe-top) - var(--player-safe-bottom) - 24px))}

/* The fitting room uses the space down to the phone's bottom safe area. */
@media(max-width:900px){
 .player-app:not(.desktop-playground):has(#frame[src^="/competition/avatar-lab/"]:not([hidden])) #component{height:calc(100dvh - var(--player-header) - var(--player-safe-bottom,0px));padding-bottom:0}
}
/* Minigames use the full space below the player header and back button. */
.player-app:not(.desktop-playground):has(#component:not([hidden]) #frame[src^="/games/"]) #component{
  height:calc(100dvh - var(--player-header) - var(--player-safe-bottom,0px));
  padding-bottom:0
}
.player-app:not(.desktop-playground):has(#component:not([hidden]) #frame[src^="/games/"]) .hub-links{display:none}

/* A running minigame takes the whole handset viewport; the child supplies its own exit control. */
@media(max-width:900px){
  .player-app[data-minigame-playing="true"]{height:100dvh!important;min-height:0!important;overflow:hidden!important;overscroll-behavior:none}
  .player-app[data-minigame-playing="true"] .top,
  .player-app[data-minigame-playing="true"] .dev,
  .player-app[data-minigame-playing="true"] .language-switch,
  .player-app[data-minigame-playing="true"] .hub-links,
  .player-app[data-minigame-playing="true"] .mobile-phone-shortcut,
  .player-app[data-minigame-playing="true"] #component .component-bar{display:none!important}
  .player-app[data-minigame-playing="true"] #component{position:fixed!important;inset:0!important;z-index:999!important;box-sizing:border-box!important;width:100vw!important;height:100dvh!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#171f2e}
  .player-app[data-minigame-playing="true"] #component #frame{display:block!important;width:100%!important;height:100%!important;min-height:0!important;border:0!important}
}
.minigame-rules{margin:12px 0;padding:12px;border:1px solid #a67db659;border-radius:9px;background:#352441}.minigame-rules summary{cursor:pointer;font-weight:700;color:#f5ce58}.minigame-rules p{font-size:13px;line-height:1.6}