:root{--hud-black:#070a08;--hud-line:#29332c;--hud-paper:#f2efe6;--hud-lime:#d7ff38;--hud-orange:#ff7425}

/* Gameplay should read as a city first, HUD second. */
.world-overlay-title,.world-tagline,.truth-line{display:none!important}
.notice-line{left:14px!important;right:auto!important;bottom:12px!important;max-width:420px!important;text-align:left!important;padding:5px 8px!important;background:rgba(5,8,6,.78)!important;border-left:2px solid rgba(215,255,56,.45)!important;color:#7f8d83!important}
.world-panel:after{background:linear-gradient(180deg,rgba(2,5,3,.07),transparent 18%,transparent 82%,rgba(2,5,3,.1))!important}

/* Compact game bar, closer to a real MMO chrome than a product header. */
.top-bar{height:58px!important;grid-template-columns:auto minmax(0,1fr) auto auto!important;background:rgba(5,9,7,.98)!important;box-shadow:0 5px 18px rgba(0,0,0,.38)!important}
.misfits-logo{font-size:25px!important;padding:0 18px!important;letter-spacing:-.025em!important}
.district-title{font-size:10px!important;letter-spacing:.08em!important;color:#bfc7c0!important}
.live-chip{min-width:106px!important}
.status-strip{min-width:315px!important}.status-strip>div{padding:6px 10px!important}.status-strip strong{font-size:12px!important}

/* The right HUD should feel like an actual phone carried by the player. */
.game-stage{grid-template-columns:minmax(0,1fr) 350px!important;min-height:calc(100dvh - 58px - 92px)!important;max-height:none!important;padding-right:10px!important;background:#050806!important}
.world-panel{border-right:0!important;box-shadow:inset -1px 0 0 #151b17!important}
.phone-panel{margin:10px 0 10px 10px!important;border:7px solid #242a26!important;border-radius:28px!important;background:#080b09!important;overflow:auto!important;box-shadow:0 22px 60px rgba(0,0,0,.5),inset 0 0 0 1px #424a43!important;max-height:calc(100dvh - 78px - 92px)!important}
.phone-panel:before{content:"";display:block;position:sticky;top:0;z-index:20;width:76px;height:13px;margin:0 auto -13px;border-radius:0 0 9px 9px;background:#151a17}
.phone-status{padding-top:8px!important;border-radius:20px 20px 0 0!important}.phone-head{height:38px!important}.phone-section{padding:11px 12px 12px!important}.quest-section h2{font-size:18px!important;margin:5px 0 7px!important}.quest-money strong{font-size:22px!important}.move-list{gap:4px!important}.move-list button{height:40px!important}.guide-card{grid-template-columns:82px minmax(0,1fr)!important;padding:8px!important}.robot-portrait{height:98px!important}.chat-feed p{font-size:9px!important}

/* Bottom bar = location + movement + chat. */
.bottom-bar{min-height:92px!important;height:92px!important;grid-template-columns:160px 270px minmax(280px,1fr) auto auto!important;background:rgba(5,8,6,.99)!important}.coords{padding:12px 16px!important}.coords span{font-size:9px!important}.bottom-actions button{min-height:90px!important}.bottom-chat{padding:8px 10px!important}.bottom-open-chat{margin:0 10px!important;background:var(--hud-orange)!important;color:#111!important;border-color:#ff955d!important;font-weight:900!important}

/* Desktop alpha gate should reveal the world, not replace it. */
@media(min-width:861px){.welcome-card{width:322px!important;left:18px!important;bottom:110px!important;padding:14px!important;background:rgba(7,11,8,.95)!important}.welcome-card h2{font-size:24px!important}.welcome-card>p{font-size:9px!important}.welcome-name input{height:32px!important}.enter-world{height:36px!important}}

/* Mobile: preserve a large world viewport before drawers. */
@media(max-width:860px){
  .top-bar{height:52px!important}.misfits-logo{font-size:18px!important;padding:0 11px!important}.district-title{font-size:6px!important;line-height:1.1!important}.live-chip{min-width:68px!important}.status-strip{display:none!important}
  .game-stage{padding-right:0!important;height:calc(100dvh - 52px - 62px)!important;min-height:calc(100dvh - 52px - 62px)!important;display:block!important}.world-panel{height:100%!important}.phone-panel{margin:0!important;border-width:1px!important;border-radius:0!important;max-height:none!important}.phone-panel:before{display:none!important}.bottom-bar{height:62px!important;min-height:62px!important}.bottom-actions button{min-height:62px!important;height:62px!important}.welcome-card{bottom:calc(72px + var(--safe-bottom))!important;max-height:56dvh!important}
}

/* Entry is a gate over the world, not a second app screen. Modern browsers support :has(). */
.misfits-app:has(.welcome-card) .game-stage{grid-template-columns:minmax(0,1fr)!important;padding-right:0!important;min-height:calc(100dvh - 58px)!important;height:calc(100dvh - 58px)!important}
.misfits-app:has(.welcome-card) .phone-panel,.misfits-app:has(.welcome-card) .device-preview,.misfits-app:has(.welcome-card) .bottom-bar,.misfits-app:has(.welcome-card) .phone-fab,.misfits-app:has(.welcome-card) .notice-line{display:none!important}
.misfits-app:has(.welcome-card) .world-panel{height:100%!important}
.misfits-app:has(.welcome-card) .world-panel:after{background:linear-gradient(180deg,rgba(2,5,3,.03),transparent 30%,transparent 64%,rgba(2,5,3,.14))!important}
.misfits-app:has(.welcome-card) .welcome-card{border-radius:18px!important;border-color:rgba(215,255,56,.24)!important;background:linear-gradient(180deg,rgba(8,12,9,.94),rgba(5,8,6,.98))!important;box-shadow:0 24px 80px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.025) inset!important}

@media(max-width:860px){
  .misfits-app:has(.welcome-card) .game-stage{height:calc(100dvh - 52px)!important;min-height:calc(100dvh - 52px)!important}
  .misfits-app:has(.welcome-card) .welcome-card{left:10px!important;right:10px!important;bottom:calc(10px + var(--safe-bottom))!important;width:auto!important;max-height:46dvh!important;padding:12px 13px!important;border-radius:18px!important;overflow:auto!important;backdrop-filter:blur(16px)!important}
  .misfits-app:has(.welcome-card) .welcome-card>p{display:none!important}
  .misfits-app:has(.welcome-card) .welcome-kicker{gap:7px!important}.misfits-app:has(.welcome-card) .welcome-kicker span{width:34px!important;height:24px!important;font-size:8px!important}.misfits-app:has(.welcome-card) .welcome-kicker b{font-size:6px!important;letter-spacing:.065em!important}
  .misfits-app:has(.welcome-card) .welcome-card h2{font-size:22px!important;margin:8px 0 6px!important}.misfits-app:has(.welcome-card) .welcome-name{margin:7px 0!important}.misfits-app:has(.welcome-card) .welcome-name input{height:32px!important}.misfits-app:has(.welcome-card) .welcome-check{padding:4px 0!important;font-size:7px!important}.misfits-app:has(.welcome-card) .enter-world{height:36px!important;margin-top:6px!important}.misfits-app:has(.welcome-card) .city-hook{padding:8px 0 0!important}
}