/* Mobile layout for EYO'S WORLD. Desktop rules remain in style.css. */
@media (max-width: 760px),
       (min-width:761px) and (max-width:1366px) and (orientation:portrait),
       (max-width: 1280px) and (orientation: landscape) and (max-height: 600px){
  html, body, #app{
    width:100%;
    min-height:100%;
    min-height:100dvh;
    overflow:hidden;
  }

  html body{
    --feedback-dock-left:22px;
    --tool-control-width:36px;
    --tool-control-height:36px;
    --tool-control-gap:6px;
  }

  html body #topTools.top-tools{
    left:max(10px, env(safe-area-inset-left))!important;
    top:max(10px, env(safe-area-inset-top))!important;
    width:120px!important;
    grid-template-columns:repeat(3,36px)!important;
    gap:var(--tool-control-gap)!important;
  }

  html body #topTools > .tools-menu-toggle{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
    border:2px solid currentColor!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.82)!important;
    box-shadow:0 3px 0 rgba(0,0,0,.22), 0 7px 16px rgba(0,0,0,.10)!important;
    font-size:0!important;
    transition:transform .14s ease, box-shadow .14s ease, background-color .14s ease!important;
  }

  html body:not(.inverted) #topTools > .tools-menu-toggle{
    background:rgba(18,18,18,.86)!important;
  }

  html body #topTools > .tools-menu-toggle:active{
    transform:translate3d(0,2px,0) scale(.96)!important;
    box-shadow:0 1px 0 rgba(0,0,0,.24), 0 3px 8px rgba(0,0,0,.10)!important;
  }

  html body #homeBtn::before,
  html body #backBtn::before,
  html body #toolsMenuBtn::before{
    font-family:Arial, Helvetica, sans-serif!important;
    font-size:21px!important;
    line-height:1!important;
    font-weight:900!important;
    -webkit-text-stroke:.35px currentColor;
  }

  html body #homeBtn::before{content:"\2302";}
  html body #backBtn::before{content:"\2190";}
  html body #toolsMenuBtn::before{content:"\2630";}
  html body #topTools.open #toolsMenuBtn::before{content:"\00D7";}

  html body #topTools.top-tools #toolsMenu.tools-menu{
    grid-column:1 / -1!important;
    width:108px!important;
    margin-top:2px!important;
  }

  html body #topTools .invert-toggle,
  html body #topTools .calibrate-toggle,
  html body #topTools .refresh-toggle,
  html body #topTools .layer-toggle,
  html body #topTools .share-shot-toggle{
    width:108px!important;
    min-width:108px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 6px!important;
    font-size:8px!important;
  }

  html body .language-toggle{
    top:max(10px, env(safe-area-inset-top))!important;
    right:max(10px, env(safe-area-inset-right))!important;
    min-width:64px!important;
    min-height:40px!important;
    padding:0 14px!important;
  }

  html body .quiet-links{
    left:50%!important;
    bottom:max(4px, env(safe-area-inset-bottom))!important;
    gap:12px!important;
    transform:translateX(-50%)!important;
    white-space:nowrap!important;
  }

  html body .quiet-links button{
    min-height:32px!important;
    font-size:8px!important;
  }

  html body .minimal-composer{
    position:fixed!important;
    left:50%!important;
    top:48%!important;
    width:calc(100vw - 24px)!important;
    max-width:520px!important;
    max-height:calc(100dvh - 132px)!important;
    padding:16px 14px 11px!important;
    border-radius:20px!important;
    transform:translate3d(-50%,-50%,0)!important;
  }

  html body .minimal-composer h1{
    margin:0 20px 8px!important;
    font-size:clamp(30px, 8.8vw, 38px)!important;
    line-height:1!important;
    text-align:center!important;
    white-space:normal!important;
    text-wrap:wrap!important;
  }

  html body .minimal-composer h1 span{
    display:block!important;
    white-space:nowrap!important;
  }

  html body .minimal-composer h1 span:first-child::after{
    content:""!important;
  }

  html body .minimal-composer .brand-wordmark{
    width:58px!important;
    height:8px!important;
    margin:0 auto 7px!important;
  }

  html body .minimal-composer .input-shell{
    grid-template-columns:minmax(0,1fr) 88px!important;
    gap:7px!important;
    padding:4px!important;
    border-radius:16px!important;
  }

  html body .minimal-composer textarea{
    height:46px!important;
    min-height:46px!important;
    padding:11px 10px!important;
    font-size:18px!important;
    line-height:1.25!important;
  }

  html body .minimal-composer .send{
    width:88px!important;
    min-width:88px!important;
    min-height:46px!important;
    border-radius:12px!important;
  }

  html body .minimal-composer .composer-footer{
    min-height:14px!important;
    margin-top:3px!important;
  }

  html body .composer-country-control{
    margin-top:3px!important;
  }

  html body .manual-country-link{
    min-height:28px!important;
    height:28px!important;
    padding:0 12px!important;
    font-size:8px!important;
  }

  html body .preflight{
    padding:calc(64px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom))!important;
    align-items:center!important;
    z-index:40!important;
  }

  html body .preflight-card{
    width:100%!important;
    max-width:520px!important;
    max-height:calc(100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    padding:20px 14px 14px!important;
    border-radius:22px!important;
    overflow-y:auto!important;
    scrollbar-width:none!important;
  }

  html body .preflight-card::-webkit-scrollbar{
    display:none!important;
  }

  html body .preflight h2{
    font-size:clamp(27px, 8vw, 36px)!important;
    line-height:1!important;
  }

  html body .preflight-country-control{
    width:100%!important;
    margin:10px auto 12px!important;
    padding:0!important;
  }

  html body .preflight-country-control .manual-country-link{
    width:auto!important;
    min-width:172px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 18px!important;
    border:1px solid rgba(255,255,255,.24)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.08)!important;
    color:var(--text)!important;
    font-size:15px!important;
    line-height:1!important;
    letter-spacing:.025em!important;
    text-transform:uppercase!important;
  }

  html body .preflight-country-control .manual-country-link.has-country{
    font-size:13px!important;
  }

  html body .preflight-preview{
    margin-top:8px!important;
    font-size:clamp(20px, 6vw, 28px)!important;
    line-height:1.08!important;
  }

  html body .preflight-emotions .emotion-line{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }

  html body .preflight-emotions .emotion{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:0 6px!important;
    font-size:10px!important;
  }

  html body .preflight-actions{
    gap:8px!important;
  }

  html body .preflight-actions button{
    min-height:48px!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked,
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked,
  html body #starMessage.star-message.own-star-card.card-minimized.show,
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show{
    left:50%!important;
    top:calc(100dvh - 80px - env(safe-area-inset-bottom))!important;
    bottom:auto!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    border-radius:18px!important;
    transform:translate3d(-50%,0,0) scale(1)!important;
    z-index:24!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state),
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state),
  html body #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel),
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel){
    width:min(286px, calc(100vw - 44px))!important;
    min-width:min(286px, calc(100vw - 44px))!important;
    max-width:min(286px, calc(100vw - 44px))!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding:0!important;
    border-radius:18px!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel,
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel{
    width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
    min-width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
    max-width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    text-align:center!important;
    padding:0 14px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  html body #starMessage.star-message.own-star-card.card-minimized.show .star-message-mini-content{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    text-align:center!important;
    width:100%!important;
    position:absolute!important;
    inset:0!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    padding:0 14px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked span,
  html body #starMessage.star-message.own-star-card.card-minimized.show .star-message-mini-content span{
    display:none!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked.empty-state span,
  html body #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel .star-message-mini-content span{
    display:block!important;
    width:auto!important;
    flex:0 0 auto!important;
    color:inherit!important;
    font-size:14px!important;
    line-height:16px!important;
    text-align:center!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked.empty-state strong,
  html body #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel .star-message-mini-content strong{
    display:none!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state) strong,
  html body #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel) .star-message-mini-content strong{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    font-size:16px!important;
    line-height:1!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body #starMessage.star-message.own-star-card:not(.card-minimized),
  html body.post-send-mode #starMessage.star-message.own-star-card:not(.card-minimized){
    left:50%!important;
    top:59%!important;
    width:calc(100vw - 48px)!important;
    max-width:390px!important;
    height:min(500px, calc(100dvh - 300px))!important;
    min-height:0!important;
    max-height:calc(100dvh - 300px)!important;
    padding:14px 16px 14px!important;
    border-radius:22px!important;
    transform:translate3d(-50%,-50%,0)!important;
    overflow-y:auto!important;
    scrollbar-width:none!important;
  }

  html body #starMessage.star-message.own-star-card:not(.card-minimized)::-webkit-scrollbar{
    display:none!important;
  }

  html body #starMessage.star-message.own-star-card:not(.card-minimized) .star-message-text{
    font-size:clamp(29px, 9vw, 46px)!important;
    line-height:1.02!important;
  }

  html body #starMessage.star-message.show:not(.own-star-card):not(.card-minimized),
  html body #starView.star-view.show{
    left:50%!important;
    top:59%!important;
    width:calc(100vw - 48px)!important;
    max-width:390px!important;
    max-height:calc(100dvh - 300px)!important;
    height:min(500px, calc(100dvh - 300px))!important;
    transform:translate3d(-50%,-50%,0)!important;
    overflow-y:auto!important;
    scrollbar-width:none!important;
  }

  html body #starMessage.star-message.show:not(.own-star-card):not(.card-minimized)::-webkit-scrollbar,
  html body #starView.star-view.show::-webkit-scrollbar{
    display:none!important;
  }

  html body .star-message-close,
  html body .star-view-close,
  html body .site-overlay-close,
  html body .info-close,
  html body .send-success-close,
  html body .panel-shrink,
  html body .layer-island-close,
  html body .result-minimize,
  html body .composer-minimize{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    font-size:13px!important;
  }

  html body .site-overlay{
    padding:8px!important;
  }

  html body .site-overlay-window{
    width:100%!important;
    height:calc(100dvh - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:18px!important;
  }

  html body .site-overlay-head{
    height:30px!important;
    min-height:30px!important;
    padding:5px 7px 0!important;
    justify-content:flex-end!important;
  }

  html body .site-overlay-head h2{
    display:none!important;
  }

  html body .site-overlay-body{
    padding:0 8px 10px!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden]) .world-stat-grid{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr)!important;
    gap:0!important;
    height:calc(100dvh - 116px)!important;
    overflow:hidden!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden]) #worldStatLeft.world-stat-left{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow-y:auto!important;
    scrollbar-width:none!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden]) #liveSkyPanel.live-sky-panel{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden]) #liveSkyPanel .live-sky-list{
    scroll-behavior:auto!important;
    overscroll-behavior:contain!important;
    contain:layout paint!important;
    transform:translateZ(0)!important;
    backface-visibility:hidden!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden]) #liveSkyPanel .live-sky-item{
    contain:layout paint style!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden])[data-mobile-mode="stats"] .world-stat-grid > #liveSkyPanel.live-sky-panel,
  html body #siteOverlay.show #overlayStatsPanel:not([hidden])[data-mobile-mode="live"] .world-stat-grid > #worldStatLeft.world-stat-left{
    display:none!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden])[data-mobile-mode="stats"] .world-stat-grid > #worldStatLeft.world-stat-left,
  html body #siteOverlay.show #overlayStatsPanel:not([hidden])[data-mobile-mode="live"] .world-stat-grid > #liveSkyPanel.live-sky-panel{
    display:flex!important;
  }

  html body .mobile-stats-mode{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
    min-height:36px!important;
    margin:0 0 8px!important;
    padding:3px!important;
    border-radius:999px!important;
    background:rgba(128,128,128,.22)!important;
    overflow:hidden!important;
  }

  html body .mobile-stats-mode::before{
    content:""!important;
    position:absolute!important;
    inset:3px auto 3px 3px!important;
    width:calc(50% - 3px)!important;
    border-radius:999px!important;
    background:var(--world-emotion, var(--emotion))!important;
    transform:translate3d(0,0,0)!important;
    transition:transform .28s cubic-bezier(.2,.82,.2,1)!important;
  }

  html body .mobile-stats-mode[data-mode="live"]::before{
    transform:translate3d(100%,0,0)!important;
  }

  html body .mobile-stats-mode-btn{
    position:relative!important;
    z-index:1!important;
    min-width:0!important;
    min-height:30px!important;
    padding:0 5px!important;
    border:0!important;
    background:transparent!important;
    color:inherit!important;
    font-size:9px!important;
    font-weight:950!important;
    white-space:nowrap!important;
  }

  html body .history-mode{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }

  html body #siteOverlay.show #overlayHistoryPanel .history-mode.live-sky-mode{
    height:42px!important;
    min-height:42px!important;
    margin-bottom:6px!important;
    padding:3px!important;
  }

  html body .history-mode .live-sky-mode-btn{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:0 5px!important;
    font-size:8px!important;
    letter-spacing:.01em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  html body #siteOverlay.show #historyMode.history-mode .live-sky-mode-btn{
    width:100%!important;
    min-width:0!important;
    padding:0 4px!important;
    height:36px!important;
    min-height:36px!important;
    font-size:10px!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  html[lang="zh-CN"] body #topTools .tools-menu-toggle,
  html[lang="zh-CN"] body #topTools .invert-toggle,
  html[lang="zh-CN"] body #topTools .calibrate-toggle,
  html[lang="zh-CN"] body #topTools .refresh-toggle,
  html[lang="zh-CN"] body #topTools .layer-toggle,
  html[lang="zh-CN"] body #topTools .share-shot-toggle{
    font-size:10.5px!important;
    letter-spacing:.02em!important;
  }

  html[lang="zh-CN"] body #topTools > .tools-menu-toggle{
    font-size:0!important;
    letter-spacing:0!important;
  }

  html body .layer-island{
    left:50%!important;
    right:auto!important;
    top:calc(52px + env(safe-area-inset-top))!important;
    bottom:auto!important;
    width:min(286px, calc(100vw - 44px))!important;
    min-height:34px!important;
    padding:2px 5px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto 28px!important;
    align-items:center!important;
    gap:5px!important;
    transform:translate3d(-50%,-12px,0)!important;
  }

  html body .layer-island.show{
    transform:translate3d(-50%,0,0)!important;
  }

  html body .layer-emotion-select,
  html body .layer-view-btn{
    min-height:28px!important;
    height:28px!important;
    padding:0 10px!important;
    font-size:9px!important;
    white-space:nowrap!important;
  }

  html body .layer-select-label{
    font-size:9px!important;
    white-space:nowrap!important;
    grid-column:auto!important;
  }

  html body .layer-emotion-select{
    grid-column:auto!important;
    min-width:0!important;
    width:100%!important;
  }

  html body .layer-island-close{
    width:28px!important;
    min-width:28px!important;
    height:28px!important;
    min-height:28px!important;
  }

  html body .layer-emotion-menu{
    top:calc(100% + 6px)!important;
    bottom:auto!important;
    max-height:min(330px, calc(100dvh - 120px))!important;
  }

  html body .layer-result-toast{
    left:50%!important;
    top:calc(94px + env(safe-area-inset-top))!important;
    bottom:auto!important;
    width:min(286px, calc(100vw - 44px))!important;
    min-height:32px!important;
    padding:5px 12px!important;
    border-radius:16px!important;
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  html body #sendSuccessPop.send-success-pop .send-success-card{
    left:var(--success-card-left, 50%)!important;
    top:var(--success-card-top, 50%)!important;
    width:calc(100vw - 24px)!important;
    padding:28px 20px 22px!important;
    border-radius:20px!important;
    max-height:calc(100dvh - 32px)!important;
    overflow-y:auto!important;
    transform:translate3d(-50%,-50%,0)!important;
  }

  html body #sendSuccessPop.send-success-pop .send-success-card strong{
    margin-right:34px!important;
    font-size:clamp(28px, 8.6vw, 40px)!important;
    white-space:normal!important;
  }

  html body #starMessage.star-message.own-star-card:not(.card-minimized) .ai-star-insight{
    width:calc(100% - 30px)!important;
    margin:0 30px 7px 0!important;
    padding:8px 9px!important;
  }

  html body #overlayHistoryList.overlay-list{
    gap:6px!important;
  }

  html body .overlay-history-summary{
    padding:8px 10px!important;
    border-radius:14px!important;
  }

  html body .overlay-history-summary strong{
    margin-bottom:2px!important;
    font-size:22px!important;
  }

  html body .overlay-history-summary span{
    font-size:9px!important;
    line-height:1.15!important;
  }

  html body .overlay-history-card{
    padding:7px 8px!important;
    border-radius:14px!important;
  }

  html body .overlay-history-main{
    display:grid!important;
    grid-template-rows:auto auto!important;
    gap:4px!important;
    min-width:0!important;
  }

  html body .overlay-history-message{
    margin:0!important;
    min-width:0!important;
    font-size:13px!important;
    line-height:1.08!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body .overlay-history-meta{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:2px!important;
    min-width:0!important;
    width:100%!important;
    overflow:hidden!important;
  }

  html body .overlay-history-meta .overlay-pill{
    flex:0 1 auto!important;
    min-width:0!important;
    min-height:16px!important;
    height:16px!important;
    gap:3px!important;
    padding:1px 4px!important;
    font-size:6.5px!important;
    line-height:1!important;
    letter-spacing:.01em!important;
    white-space:nowrap!important;
  }

  html body .overlay-history-meta .overlay-dot{
    width:4px!important;
    height:4px!important;
    flex-basis:4px!important;
  }

  html body .overlay-time-pill{
    display:none!important;
  }

  html body .overlay-star-id-pill{
    display:none!important;
  }

  html body .overlay-history-expanded-meta{
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:5px!important;
  }

  html body .overlay-history-expanded-meta span{
    display:inline-flex!important;
    align-items:center!important;
    min-height:18px!important;
    padding:2px 6px!important;
    border-radius:999px!important;
    background:rgba(127,127,127,.14)!important;
    font-size:7px!important;
    font-weight:850!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  html body #sendSuccessPop.send-success-pop .send-success-card p{
    font-size:16px!important;
  }

  html body .echo-inbox-pop{
    left:50%!important;
    top:calc(100dvh - 114px - env(safe-area-inset-bottom))!important;
    right:auto!important;
    bottom:auto!important;
    min-width:46px!important;
    width:auto!important;
    height:28px!important;
    min-height:28px!important;
    padding:0 7px!important;
    gap:5px!important;
    transform:translate3d(-50%,0,0) scale(.96)!important;
    border-radius:14px!important;
  }

  html body .echo-inbox-pop.show{
    transform:translate3d(-50%,0,0) scale(1)!important;
  }

  html body .echo-inbox-icon{
    width:17px!important;
    height:12px!important;
    border-width:1.5px!important;
  }

  html body .echo-inbox-icon::before,
  html body .echo-inbox-icon::after{
    top:1px!important;
    width:10px!important;
    height:1.5px!important;
  }

  html body #echoInboxCount{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:16px!important;
    height:16px!important;
    padding:0 4px!important;
    border-radius:999px!important;
    background:#ff2f3a!important;
    color:#fff!important;
    font-size:9px!important;
    line-height:1!important;
  }

  html body #earthCanvas{
    touch-action:none;
  }
}

/* Device-class fallback: tablet browsers may report desktop-sized CSS pixels. */
html body.mobile-layout .mobile-stats-mode,
html body.tablet-layout .mobile-stats-mode{
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  width:100%!important;
  min-height:36px!important;
  padding:3px!important;
  margin:0 0 10px!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(128,128,128,.22)!important;
  box-shadow:none!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
html body.mobile-layout .mobile-stats-mode::before,
html body.tablet-layout .mobile-stats-mode::before{
  content:""!important;
  position:absolute!important;
  inset:3px auto 3px 3px!important;
  width:calc(50% - 3px)!important;
  border-radius:999px!important;
  background:var(--world-emotion,var(--emotion))!important;
  transform:translate3d(0,0,0)!important;
  transition:transform .28s cubic-bezier(.2,.82,.2,1)!important;
  will-change:transform!important;
}
html body.mobile-layout .mobile-stats-mode[data-mode="live"]::before,
html body.tablet-layout .mobile-stats-mode[data-mode="live"]::before{
  transform:translate3d(100%,0,0)!important;
}
html body.mobile-layout .mobile-stats-mode-btn,
html body.tablet-layout .mobile-stats-mode-btn{
  appearance:none!important;
  -webkit-appearance:none!important;
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  min-width:0!important;
  min-height:30px!important;
  margin:0!important;
  padding:0 6px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:color-mix(in srgb,var(--text) 62%,transparent)!important;
  font:950 10px/1 var(--ui-font)!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
html body.mobile-layout .mobile-stats-mode-btn.active,
html body.tablet-layout .mobile-stats-mode-btn.active{
  color:var(--world-tab-ink,#fff)!important;
}
html body.mobile-layout #overlayStatsPanel[data-mobile-mode="stats"] #worldStatLeft,
html body.tablet-layout #overlayStatsPanel[data-mobile-mode="stats"] #worldStatLeft,
html body.mobile-layout #overlayStatsPanel[data-mobile-mode="live"] #liveSkyPanel,
html body.tablet-layout #overlayStatsPanel[data-mobile-mode="live"] #liveSkyPanel{
  display:flex!important;
}
html body.mobile-layout #overlayStatsPanel[data-mobile-mode="stats"] #liveSkyPanel,
html body.tablet-layout #overlayStatsPanel[data-mobile-mode="stats"] #liveSkyPanel,
html body.mobile-layout #overlayStatsPanel[data-mobile-mode="live"] #worldStatLeft,
html body.tablet-layout #overlayStatsPanel[data-mobile-mode="live"] #worldStatLeft{
  display:none!important;
}

@media (max-width: 1280px) and (orientation: landscape) and (max-height: 600px){
  html body{
    --tool-control-width:126px;
    --tool-control-height:32px;
    --tool-control-gap:8px;
  }

  html body .minimal-composer{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    width:calc(100vw - 24px)!important;
    max-width:640px!important;
    padding:14px 16px 12px!important;
    transform:translate3d(-50%,-50%,0)!important;
  }

  html body .minimal-composer h1{
    margin-bottom:6px!important;
    font-size:30px!important;
    white-space:normal!important;
    text-wrap:wrap!important;
  }

  html body .minimal-composer .brand-wordmark{
    margin-bottom:7px!important;
  }

  html body .preflight{
    padding:8px 12px!important;
  }

  html body .preflight-card{
    max-width:680px!important;
    max-height:calc(100dvh - 16px)!important;
    padding:14px!important;
  }

  html body .preflight-emotions .emotion-line{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }

  html body #starMessage.star-message.own-star-card:not(.card-minimized),
  html body #starMessage.star-message.show:not(.own-star-card):not(.card-minimized),
  html body #starView.star-view.show{
    max-width:520px!important;
    max-height:calc(100dvh - 20px)!important;
    height:calc(100dvh - 20px)!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked,
  html body #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked,
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body #starMessage.star-message.own-star-card.card-minimized.show,
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show{
    left:50%!important;
    top:calc(100dvh - 80px - env(safe-area-inset-bottom))!important;
    bottom:auto!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    transform:translate3d(-50%,0,0)!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state),
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state),
  html body #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel),
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel){
    width:min(286px, calc(100vw - 44px))!important;
    min-width:min(286px, calc(100vw - 44px))!important;
    max-width:min(286px, calc(100vw - 44px))!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel,
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel{
    width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
    min-width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
    max-width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
    padding:0 15px!important;
  }
}

/* Tablet layout: touch-friendly controls without inheriting desktop panel density. */
@media (min-width:761px) and (max-width:1366px) and (orientation:landscape) and (min-height:601px),
       (pointer:coarse) and (hover:none) and (min-width:761px) and (min-height:601px) and (orientation:landscape){
  html body{
    --feedback-dock-left:22px;
    --tool-control-height:40px;
    --tool-control-gap:7px;
  }

  html body #topTools.top-tools{
    left:max(14px, env(safe-area-inset-left))!important;
    top:max(14px, env(safe-area-inset-top))!important;
    z-index:10050!important;
  }

  html body #topTools .tools-menu-toggle,
  html body #topTools .invert-toggle,
  html body #topTools .calibrate-toggle,
  html body #topTools .refresh-toggle,
  html body #topTools .layer-toggle,
  html body #topTools .share-shot-toggle{
    min-height:40px!important;
  }

  html body .minimal-composer{
    position:fixed!important;
    left:50%!important;
    top:var(--visual-viewport-center-y,50%)!important;
    width:min(760px, calc(100vw - 56px))!important;
    max-height:calc(var(--visual-viewport-height,100dvh) - 56px)!important;
    padding:24px 24px 18px!important;
    transform:translate3d(-50%,-50%,0)!important;
  }

  html body .minimal-composer h1{
    font-size:clamp(38px,5vw,52px)!important;
    line-height:.98!important;
    text-align:center!important;
  }

  html body .minimal-composer textarea{
    font-size:20px!important;
  }

  html body .preflight{
    padding:28px!important;
    align-items:center!important;
    z-index:60!important;
  }

  html body .preflight-card{
    width:min(920px, calc(100vw - 56px))!important;
    max-height:calc(100dvh - 56px)!important;
    padding:28px 24px 22px!important;
    overflow-y:auto!important;
    scrollbar-width:none!important;
  }

  html body .preflight-card::-webkit-scrollbar{
    display:none!important;
  }

  html body .preflight h2{
    font-size:clamp(31px,4vw,42px)!important;
  }

  html body .preflight-country-control .manual-country-link{
    min-width:190px!important;
    min-height:42px!important;
    padding:0 20px!important;
    border:1px solid rgba(255,255,255,.24)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.08)!important;
    font-size:17px!important;
    line-height:1!important;
    letter-spacing:.025em!important;
    text-transform:uppercase!important;
  }

  html body .preflight-country-control .manual-country-link.has-country{
    font-size:15px!important;
  }

  html body .preflight-emotions .emotion-line{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:9px!important;
  }

  html body .preflight-emotions .emotion{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked,
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked,
  html body #starMessage.star-message.own-star-card.card-minimized.show,
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show{
    left:max(22px, env(safe-area-inset-left))!important;
    top:50%!important;
    bottom:auto!important;
    border-radius:22px!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:45!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state),
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state),
  html body #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel),
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel){
    width:252px!important;
    min-width:252px!important;
    max-width:252px!important;
    height:76px!important;
    min-height:76px!important;
    max-height:76px!important;
    padding:14px 18px!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel,
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel{
    width:var(--feedback-empty-width,154px)!important;
    min-width:var(--feedback-empty-width,154px)!important;
    max-width:var(--feedback-empty-width,154px)!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding:0 15px!important;
    border-radius:999px!important;
  }

  html body .site-overlay-window{
    width:calc(100vw - 28px)!important;
    height:calc(100dvh - 28px)!important;
    max-height:calc(100dvh - 28px)!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden]) .world-stat-grid{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr)!important;
    height:calc(100dvh - 128px)!important;
    overflow:hidden!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden]) #worldStatLeft.world-stat-left,
  html body #siteOverlay.show #overlayStatsPanel:not([hidden]) #liveSkyPanel.live-sky-panel{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden])[data-mobile-mode="stats"] #liveSkyPanel.live-sky-panel,
  html body #siteOverlay.show #overlayStatsPanel:not([hidden])[data-mobile-mode="live"] #worldStatLeft.world-stat-left{
    display:none!important;
  }

  html body #siteOverlay.show #overlayStatsPanel:not([hidden])[data-mobile-mode="stats"] #worldStatLeft.world-stat-left,
  html body #siteOverlay.show #overlayStatsPanel:not([hidden])[data-mobile-mode="live"] #liveSkyPanel.live-sky-panel{
    display:flex!important;
  }

  html body .mobile-stats-mode{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
    min-height:40px!important;
    margin:0 0 9px!important;
    padding:3px!important;
    border-radius:999px!important;
    background:rgba(128,128,128,.22)!important;
    overflow:hidden!important;
  }

  html body .mobile-stats-mode::before{
    content:""!important;
    position:absolute!important;
    inset:3px auto 3px 3px!important;
    width:calc(50% - 3px)!important;
    border-radius:999px!important;
    background:var(--world-emotion,var(--emotion))!important;
    transform:translate3d(0,0,0)!important;
    transition:transform .28s cubic-bezier(.2,.82,.2,1)!important;
  }

  html body .mobile-stats-mode[data-mode="live"]::before{
    transform:translate3d(100%,0,0)!important;
  }

  html body .mobile-stats-mode-btn{
    position:relative!important;
    z-index:1!important;
    min-height:34px!important;
  }

  html body #liveSkyPanel .live-sky-list{
    scroll-behavior:auto!important;
    overscroll-behavior:contain!important;
    contain:layout paint!important;
    transform:translateZ(0)!important;
  }
}

/* Touch layouts keep notices above every panel. The success overlay leaves a
   clear aperture around the real highlighted WebGL star. */
html body.mobile-layout .grain{
  display:none!important;
}

html body.mobile-layout #sendSuccessPop.send-success-pop,
html body.tablet-layout #sendSuccessPop.send-success-pop{
  z-index:10060!important;
}

html body.mobile-layout #sendSuccessPop.send-success-pop{
  --success-star-hole:88px!important;
}

html body.tablet-layout #sendSuccessPop.send-success-pop{
  --success-star-hole:110px!important;
}

html body.tablet-layout #sendSuccessPop.send-success-pop .send-success-card{
  width:min(720px, calc(100vw - 48px))!important;
  padding:30px 34px 26px!important;
  max-height:calc(var(--visual-viewport-height,100dvh) - 48px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:none!important;
}

html body.tablet-layout #sendSuccessPop.send-success-pop .send-success-card::-webkit-scrollbar{
  display:none!important;
}

html body.tablet-layout #sendSuccessPop.send-success-pop .send-success-card strong{
  max-width:calc(100% - 32px)!important;
  margin-right:32px!important;
  font-size:clamp(28px,3.2vw,42px)!important;
  line-height:1.02!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
}

html body.tablet-layout #topTools.top-tools.open{
  gap:5px!important;
}

html body.tablet-layout #topTools.top-tools.open > button,
html body.tablet-layout #topTools.top-tools.open #toolsMenu button{
  min-height:32px!important;
  height:32px!important;
}

html body.tablet-layout #topTools.top-tools.open #toolsMenu{
  gap:5px!important;
}

html body.tablet-layout #sendSuccessPop.send-success-pop .send-success-card p,
html body.tablet-layout #sendSuccessPop.send-success-pop .send-success-star-id{
  max-width:100%!important;
  font-size:clamp(15px,2vw,20px)!important;
  line-height:1.18!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

html body.mobile-layout .info-modal.country-modal,
html body.tablet-layout .info-modal.country-modal{
  z-index:10070!important;
}

html body.mobile-layout .layer-tip,
html body.tablet-layout .layer-tip{
  z-index:10072!important;
}

html body.mobile-layout .layer-result-toast,
html body.tablet-layout .layer-result-toast{
  z-index:10080!important;
}

html body.mobile-layout .toast,
html body.tablet-layout .toast,
html body.mobile-layout .send-location-tooltip,
html body.tablet-layout .send-location-tooltip,
html body.mobile-layout .country-tooltip,
html body.tablet-layout .country-tooltip,
html body.mobile-layout .loading,
html body.tablet-layout .loading{
  z-index:10090!important;
}

html body.mobile-layout .toast{
  top:calc(var(--visual-viewport-top, 0px) + 108px)!important;
  right:auto!important;
  bottom:auto!important;
  max-width:calc(100vw - 32px)!important;
  text-align:center!important;
}

html body.tablet-layout .toast{
  top:calc(var(--visual-viewport-top, 0px) + 22px)!important;
  right:auto!important;
  bottom:auto!important;
  max-width:min(620px, calc(100vw - 180px))!important;
  text-align:center!important;
}

@media (pointer: coarse){
  button, select, input, textarea{
    -webkit-tap-highlight-color:transparent;
  }

  button, select{
    touch-action:manipulation;
  }
}

@media (max-width:760px){
  html body #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked.empty-state{
    width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
    min-width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
    max-width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
    padding:0 15px!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked.empty-state span{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:0 0 auto!important;
  }
}

/* Phone endpoint lock: the docked card must stay a single compact pill after
   either the initial render or an expanded-to-minimized morph. */
@media (max-width:760px),
       (min-width:761px) and (max-width:1366px) and (orientation:portrait),
       (max-width:1280px) and (orientation:landscape) and (max-height:600px),
       (pointer:coarse) and (max-width:1280px) and (max-height:600px){
  html body #myStarMini.my-star-mini.own-feedback-docked,
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked,
  html body #starMessage.star-message.own-star-card.card-minimized.show,
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show{
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    border-radius:18px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state),
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state),
  html body #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel),
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel){
    width:min(286px, calc(100vw - 44px))!important;
    min-width:min(286px, calc(100vw - 44px))!important;
    max-width:min(286px, calc(100vw - 44px))!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked.empty-state,
  html body #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel,
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel{
    width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
    min-width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
    max-width:min(var(--feedback-empty-width,154px), calc(100vw - 44px))!important;
  }

  html body #starMessage.star-message.own-star-card.feedback-morphing.card-minimized.show{
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    max-height:none!important;
  }

  html body #starMessage.star-message.own-star-card.card-minimized.show .star-message-mini-content,
  html body #myStarMini.my-star-mini.own-feedback-docked{
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    box-sizing:border-box!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state),
  html body.post-send-mode #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state){
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    text-align:center!important;
  }

  html body #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel) .star-message-mini-content,
  html body.post-send-mode #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel) .star-message-mini-content{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    text-align:center!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked:not(.empty-state) strong,
  html body #starMessage.star-message.own-star-card.card-minimized.show:not(.empty-feedback-panel) .star-message-mini-content strong{
    margin:0!important;
  }

  html body #myStarMini.my-star-mini.own-feedback-docked.empty-state span,
  html body #starMessage.star-message.own-star-card.card-minimized.show.empty-feedback-panel .star-message-mini-content span{
    max-width:none!important;
    flex:0 0 auto!important;
  }

  html body #liveSkyPanel .live-sky-list{
    scroll-behavior:auto!important;
    overscroll-behavior:contain!important;
    contain:layout paint style!important;
    transform:translate3d(0,0,0)!important;
    will-change:scroll-position!important;
  }
}