/* TERRABITS 1.9 — Experiencia móvil limpia (no altera el juego de escritorio).
   Integra el diseño aprobado con los gráficos y motores originales del bosque.
   Solo presentación; el estado terrabits_explora_v03 permanece intacto. */
@media (max-width:760px){
  html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  body{background:#11172f}
  .app{display:flex;flex-direction:column;height:100dvh;min-height:0;max-width:none;padding:0!important;overflow:hidden}
  .site-header{
    display:flex;flex:none;align-items:center;gap:8px;height:68px;min-height:68px;max-height:68px;
    padding:4px 9px!important;background:linear-gradient(118deg,#151a36,#212041 65%,#121b33);
    border-bottom:1px solid #5d5184;box-shadow:0 3px 12px #070b24;
    position:relative;z-index:9;flex-wrap:nowrap;
  }
  .site-header .logo{width:96px;height:58px;flex:none;overflow:visible}
  .site-header .logo img{width:100%;height:100%;max-height:58px;object-fit:contain;object-position:center}
  .header-name{display:flex;flex-direction:column;min-width:0;max-width:none;flex:1;gap:3px;overflow:hidden}
  .header-name strong{font-size:clamp(10px,3.25vw,14px);letter-spacing:.15px;line-height:1.2;
    white-space:nowrap!important;text-overflow:ellipsis;overflow:hidden;color:#fff8e8}
  .header-name small{display:none!important}
  .header-name .beta{display:block;width:max-content;max-width:100%;margin:4px 0 0;padding:4px 9px;
    font-size:10px;line-height:1.1;white-space:nowrap;border:1px solid #80d9a5;
    background:linear-gradient(110deg,#215f59,#346e64);color:#e7fff0;border-radius:25px}
  .header-right{display:flex;flex:none;width:auto!important;gap:5px;align-items:center;margin:0!important}
  .header-right .header-btn{min-width:37px!important;width:37px!important;max-width:37px;height:40px;
    padding:0!important;display:flex;align-items:center;justify-content:center;
    border:1px solid #7770b2;border-radius:12px!important;background:#242a4b;color:#eaf5fc;
    overflow:hidden;font-size:0!important;line-height:1}
  .header-right .header-btn::before{font-size:22px;line-height:1}
  #openStory::before{content:'☰'}
  #openAvatar::before{content:'👤';font-size:20px}
  .header-right .status,.header-right .header-btn.alt{display:none!important}

  .middle-col{display:flex!important;flex:1 1 auto;flex-direction:column;width:100%;min-height:0;gap:0;overflow:hidden}
  .game-frame{display:flex;position:relative;flex:1 1 auto;min-height:0;flex-direction:column;
    overflow:hidden;border:0;border-radius:0;box-shadow:none;background:#19243e}
  .frame-top{flex:none;display:flex;min-height:29px;max-height:29px;padding:6px 9px;gap:6px;
    background:#27294c;font-size:9px;line-height:1.3;color:#e6f6e3;white-space:nowrap}
  .frame-top>span{flex:1;max-width:67%;overflow:hidden;text-overflow:ellipsis}
  .frame-top>div{flex:none;gap:6px;font-size:9px}
  .frame-top #coords{font-size:9px}
  .party-hud{display:flex;flex:none;align-items:center;justify-content:flex-start;gap:6px!important;
    min-height:43px;max-height:43px;flex-wrap:nowrap!important;overflow-x:auto;
    padding:5px 8px!important;background:linear-gradient(105deg,#214447,#2c3156);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid #547875}
  .party-hud::-webkit-scrollbar{display:none}
  .party-hud #partyName,.party-hud #callParty{display:none!important}
  .party-hud #familyClock{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    min-width:106px;max-width:140px;height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    border:1px solid #7188a0;border-radius:19px;padding:5px 8px;background:#314361;
    color:#fff1b9;font-weight:800;font-size:9px}
  .party-hud button{flex:0 0 auto;min-width:68px;max-width:none;height:30px!important;min-height:30px!important;
    border-radius:12px!important;padding:4px 9px!important;font-size:10px!important;line-height:1.1;white-space:nowrap}
  .party-hud .life17-open{min-width:90px;background:linear-gradient(108deg,#4c3d81,#443474)!important;
    border:1px solid #d5a5f8!important;color:#fff7dc!important}
  .village-ticker{flex:none;min-height:26px;height:26px;max-height:26px;
    padding:5px 9px!important;border-block:1px solid #538a79;
    background:linear-gradient(99deg,#1b6555,#214e56);color:#e0ffdf;font-size:10px;letter-spacing:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
  .viewport{display:block;flex:1 1 auto;position:relative;min-height:0!important;background:#37a565;
    overflow:hidden;isolation:isolate;touch-action:none}
  .viewport #world{display:block;width:100%!important;height:100%!important;max-width:none;min-height:0!important;
    object-fit:fill!important;aspect-ratio:auto!important;image-rendering:pixelated;touch-action:none;
    filter:saturate(1.12) contrast(1.04) brightness(1.035)}
  .view-badge,.view-hint,.story-strip{display:none!important}
  .frame-bottom{display:none!important}

  /* Menú compacto a la derecha del mapa, como en el diseño aprobado. */
  .map19-controls{position:absolute!important;z-index:7;top:13px!important;right:8px!important;left:auto!important;
    width:47px!important;max-width:47px!important;display:flex!important;flex-direction:column;align-items:stretch;
    gap:6px!important;flex-wrap:nowrap!important;pointer-events:auto;padding:0}
  .map19-controls button{width:46px!important;min-width:46px!important;max-width:46px!important;height:42px!important;
    min-height:42px!important;padding:4px 1px!important;background:#172847ed!important;
    border:1px solid #aad1da!important;border-radius:13px!important;box-shadow:0 3px 0 #0c1530,0 4px 10px #0005;
    color:#f8fbeb!important;font-size:0!important;font-weight:900;white-space:normal;text-align:center;
    display:flex;align-items:center;justify-content:center;line-height:1!important}
  .map19-controls button::before{font-size:22px;line-height:1}
  #map19Atlas{height:53px!important;min-height:53px!important;background:linear-gradient(135deg,#2a385a,#162541)!important}
  #map19Atlas::before{content:'🗺️';display:block;font-size:24px}
  #map19Atlas::after{content:'Mapa';position:absolute;top:37px;font-size:9px;letter-spacing:.2px}
  #map19In::before{content:'+';font-size:32px;font-weight:700}
  #map19Out::before{content:'−';font-size:32px;font-weight:700}
  #map19Free::before{content:'✋';font-size:21px}
  #map19Center::before{content:'🎯';font-size:20px}
  .map19-controls #map19Free[aria-pressed='true']{background:linear-gradient(140deg,#256e63,#1e6954)!important;
    border-color:#ccffb5!important}
  .map19-controls #map19Zoom{display:none!important}
  .map19-hint{top:12px!important;right:65px!important;left:auto;max-width:min(210px,calc(100% - 120px));
    padding:6px 8px;font-size:9px;line-height:1.3;border-radius:8px}

  /* Joystick grande y separado de las notificaciones. */
  .viewport .touch-pad{display:grid!important;z-index:5;bottom:145px!important;left:9px!important;
    opacity:1!important;pointer-events:none!important;transform:scale(.87)!important;transform-origin:bottom left;
    filter:drop-shadow(0 3px 8px #07142777)}
  .viewport .touch-arrow{pointer-events:auto!important;border:2px solid #cef3db!important;
    background:#18294cdd!important;color:#fff3be!important;border-radius:13px!important;
    box-shadow:0 3px 0 #081729,0 0 10px #0007}

  /* Mensaje del amigo en una tarjeta, NO dos ventanas flotantes. */
  .game-frame .mobile-voice{position:absolute!important;z-index:8;left:10px!important;right:10px!important;
    bottom:12px!important;top:auto!important;width:auto!important;max-width:none!important;min-height:0!important;
    margin:0!important;display:grid!important;grid-template-columns:55px minmax(0,1fr);grid-template-rows:auto auto;
    gap:7px 10px;padding:11px 12px!important;
    background:linear-gradient(145deg,#272a54f5,#262449f6 63%,#1b2844f6)!important;
    border:1px solid #b5c1f9!important;border-radius:18px!important;
    box-shadow:0 7px 27px #07132baa, inset 0 1px 0 #ffffff1e;backdrop-filter:blur(5px)}
  .game-frame .mobile-voice[hidden]{display:none!important}
  .mobile-voice-icon{grid-column:1;grid-row:1;align-self:center;display:grid!important;
    width:55px!important;height:55px!important;min-width:55px;max-width:55px;
    padding:2px!important;place-items:center;background:#384c5f!important;border:1px solid #8fcca4!important;
    border-radius:13px!important;overflow:hidden}
  .mobile-voice-icon img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
  .mobile-voice-copy{grid-column:2;grid-row:1;align-self:center;display:grid!important;gap:4px;min-width:0}
  .mobile-voice-copy strong{font-size:12px!important;font-weight:900;color:#ffe7a0!important;line-height:1.22;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-voice-copy>span{font-size:11px!important;line-height:1.35!important;color:#f7f8ff!important;
    display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .mobile-voice.has-nudge #mobileVoiceName,.mobile-voice.has-nudge #mobileVoiceText{display:none!important}
  .mobile-voice.has-nudge #mobileCompanionName,.mobile-voice.has-nudge #mobileCompanionText{display:block!important}
  .mobile-voice .voice-ctas{grid-column:1/-1;grid-row:2;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px!important;width:100%!important;max-width:none!important;min-width:0}
  .mobile-voice .voice-ctas button{display:flex!important;align-items:center;justify-content:center;
    min-width:0!important;height:37px;min-height:37px!important;max-height:37px;
    margin:0!important;padding:6px 4px!important;border-radius:11px!important;
    border:1px solid #6d9a88;background:linear-gradient(120deg,#bcf68a,#8ae9b2);
    color:#193c40;font-size:11px!important;font-weight:900!important;white-space:nowrap}
  #mobileRespondCTA{background:linear-gradient(115deg,#ac89ed,#8356bf)!important;color:#fff!important;
    border-color:#e0b2f7!important}
  #mobileVoiceClose{background:#3a3a5f!important;color:#e8e5f4!important;border-color:#79769f!important}
  #mobileVoiceClose::after{content:' CERRAR';font-size:10px;white-space:pre}
  .mobile-voice #openMemory15Mobile{display:none!important}
  .mobile-voice .voice-ctas #mobileFeed[hidden]{display:none!important}
  .mobile-voice:has(#mobileFeed:not([hidden])) #mobileRespondCTA{display:none!important}
  .mobile-voice:has(#mobileFeed:not([hidden])) .voice-ctas{grid-template-columns:repeat(3,minmax(0,1fr))}
  #mobileVoiceRestore{position:absolute;z-index:8;bottom:10px;left:11px;border-radius:20px;
    border:1px solid #b3e6be;background:#263a56ef;color:#fff5ba;padding:8px 13px;
    font:800 11px system-ui,sans-serif;box-shadow:0 3px 14px #0006}
  #mobileVoiceRestore[hidden]{display:none!important}
  .companion-nudge{display:none!important}
  body.pet161-open .mobile-voice{display:none!important}

  /* Una barra principal de CINCO acciones, con herramientas extra plegables. */
  .mobile-hud{position:relative;flex:none!important;z-index:8;max-height:none!important;height:auto!important;
    min-height:0!important;padding:7px 7px calc(6px + env(safe-area-inset-bottom,0px))!important;
    border-top:2px solid #6972a7;background:linear-gradient(180deg,#191f41,#11182e)!important;
    box-shadow:0 -5px 18px #041026ba;overflow:visible!important}
  #mobileMoreTools{position:absolute;top:-26px;right:8px;z-index:9;height:25px;min-height:25px;
    padding:4px 10px;background:#212e4dde;color:#e2f8eb;border:1px solid #8fbaac;
    border-radius:9px 9px 0 0;font:800 10px system-ui,sans-serif;letter-spacing:.1px}
  #mobileToolsDrawer{display:block;max-height:none}
  .mobile-hud .mobile-tabs{display:none!important}
  .mobile-hud .mobile-panel-wrap{padding:0!important;max-height:none!important}
  .mobile-hud .mobile-panel{display:none!important;margin:0;padding:0!important;max-height:none!important;
    overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important}
  .mobile-hud:not(.is-advanced) #mobile-tools,.mobile-hud.is-advanced .mobile-panel.active{display:block!important}
  .mobile-hud:not(.is-advanced) #mobile-tools{max-height:114px!important}
  .mobile-hud .mobile-tool-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px!important;padding:0!important;overflow:visible!important;max-height:none!important}
  .mobile-hud:not(.is-advanced) .mobile-tool-grid .tool:nth-child(n+6){display:none!important}
  .mobile-hud .mobile-tool-grid .tool{display:flex!important;flex:initial!important;width:auto!important;min-width:0!important;
    height:70px!important;min-height:70px!important;padding:7px 2px 5px!important;
    align-items:center;justify-content:center;flex-direction:column;gap:5px!important;
    font:900 clamp(8px,2.5vw,10px)/1.05 system-ui,sans-serif!important;
    text-overflow:clip;white-space:nowrap;letter-spacing:-.15px;
    background:linear-gradient(130deg,#34375c,#29284e)!important;border:1px solid #655c9d!important;
    border-radius:13px!important;box-shadow:inset 0 1px 0 #f4eaff12!important;color:#f1edff!important}
  .mobile-hud .mobile-tool-grid .tool>span{display:block!important;font-size:27px!important;line-height:1!important;
    filter:drop-shadow(0 1px 1px #0004)}
  .mobile-hud .mobile-tool-grid .tool.active{background:linear-gradient(125deg,#28685b,#255b58)!important;
    border-color:#c7f8aa!important;box-shadow:inset 0 0 0 1px #e4f7b8,0 0 10px #9fe7913f!important;color:#fffac7!important}
  .mobile-hud .mobile-choice-row{display:none!important;align-items:center;gap:5px;margin:5px 0 0;padding:0}
  .mobile-hud.has-choice #mobile-tools.active .mobile-choice-row{display:flex!important}
  .mobile-hud .mobile-choice-row>label{display:none!important}
  .mobile-hud .mobile-choice-row>select{width:100%;min-height:31px;max-height:37px;margin:0;
    border-radius:8px;background:#293751;color:#e9f5df;border:1px solid #8cbfac;padding:6px 10px;font-size:11px}
  .mobile-hud .mobile-desc{display:none!important}
  .mobile-hud.is-advanced{max-height:48dvh!important;overflow:hidden!important}
  .mobile-hud.is-advanced .mobile-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));
    padding:0 0 7px!important;gap:5px!important}
  .mobile-hud.is-advanced .mobile-tab{min-width:0;min-height:33px;padding:6px 1px;
    font-size:9px;white-space:nowrap}
  .mobile-hud.is-advanced .mobile-panel{max-height:calc(42dvh - 46px)!important;overflow:auto!important;
    padding:4px!important;background:#1d2644!important;border:1px solid #526183!important;border-radius:10px!important}
  .mobile-hud.is-advanced .mobile-tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mobile-hud.is-advanced .mobile-tool-grid .tool:nth-child(n+6){display:flex!important}
  .mobile-hud.is-advanced .mobile-tool-grid .tool{min-height:59px!important;height:59px!important}
  .mobile-hud.is-advanced .mobile-tool-grid .tool>span{font-size:23px!important}
  .mobile-hud.is-advanced .mobile-choice-row{margin-top:6px}

  .map19-waypoint{bottom:145px!important;right:7px!important;max-width:calc(100% - 136px)!important;
    padding:6px 8px!important;z-index:6}
  .map19-waypoint-copy strong{font-size:9px!important}
  .map19-waypoint-copy small{font-size:8px!important}
  .notice{z-index:10;top:15%!important;max-width:80%;font-size:11px!important}
  .map19-dialog{max-height:91dvh}
}
/* Teléfonos compactos; voz y joystick no tapan los controles críticos. */
@media (max-width:375px){
 .site-header .logo{width:84px}
 .header-name strong{font-size:10px}
 .header-right .header-btn{width:34px!important;min-width:34px!important;max-width:34px;height:38px}
 .party-hud #familyClock{min-width:100px;max-width:118px}
 .game-frame .mobile-voice{left:6px!important;right:6px!important;padding:9px!important;gap:6px 8px}
 .mobile-voice .voice-ctas button{font-size:9px!important}
 .viewport .touch-pad{left:5px!important;transform:scale(.78)!important}
 .mobile-hud .mobile-tool-grid{gap:4px!important}
 .mobile-hud .mobile-tool-grid .tool{height:63px!important;min-height:63px!important;font-size:8px!important}
 .mobile-hud .mobile-tool-grid .tool>span{font-size:24px!important}
}
@media(max-width:760px) and (max-height:690px){
 .site-header{height:58px;min-height:58px;max-height:58px}
 .site-header .logo{height:50px}
 .frame-top{min-height:26px;max-height:26px}
 .party-hud{min-height:37px;max-height:37px}
 .party-hud button{height:27px!important;min-height:27px!important}
 .village-ticker{height:23px;max-height:23px;min-height:23px}
 .game-frame .mobile-voice{grid-template-columns:45px minmax(0,1fr);padding:7px 9px!important;gap:4px 7px}
 .mobile-voice-icon{width:45px!important;height:45px!important;min-width:45px}
 .mobile-voice .voice-ctas button{height:30px;min-height:30px!important;max-height:30px}
 .viewport .touch-pad{bottom:118px!important;transform:scale(.73)!important}
 .mobile-hud .mobile-tool-grid .tool{height:58px!important;min-height:58px!important}
 .mobile-hud .mobile-tool-grid .tool>span{font-size:22px!important}
 .map19-controls button{height:37px!important;min-height:37px!important}
 #map19Atlas{height:47px!important;min-height:47px!important}
}
@media(min-width:761px){
 #mobileMoreTools,#mobileVoiceRestore,#mobileVoiceClose,#mobileRespondCTA{display:none!important}
}
/* Ajustes de calidad tras la prueba visual a 390px */
@media(max-width:760px){
 .map19-controls #map19Atlas{order:0;position:relative}
 .map19-controls #map19In{order:1}
 .map19-controls #map19Out{order:2}
 .map19-controls #map19Free{order:3}
 .map19-controls #map19Center{order:4}
 .map19-controls #map19Zoom{order:5}
 #map19Atlas::after{top:auto;bottom:4px;left:0;right:0;text-align:center}
 #map19Atlas::before{transform:translateY(-7px)}
 .viewport .touch-pad{bottom:190px!important}
 .mobile-hud{padding-top:24px!important;z-index:20!important}
 #mobileMoreTools{top:1px!important;right:9px!important;border:0!important;background:transparent!important;
  height:19px!important;min-height:19px!important;padding:1px 6px!important;color:#d4f4d6!important}
 .mobile-hud.is-advanced{overflow:visible!important}
 .mobile-voice .voice-ctas #mobileFeed{grid-column:auto!important;grid-row:auto!important;width:auto!important;
  max-width:none!important;padding:4px!important;font-size:9px!important}
 .mobile-voice .voice-ctas #mobileTalkCTA,.mobile-voice .voice-ctas #mobileVoiceClose{grid-column:auto!important;grid-row:auto!important}
 .mobile-voice:has(#mobileFeed:not([hidden])) .voice-ctas{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px) and (max-height:690px){
 .viewport .touch-pad{bottom:153px!important}
}

@media(max-width:760px){
 .mobile-voice .voice-ctas #mobileFeed{font-size:0!important;color:transparent!important;position:relative}
 .mobile-voice .voice-ctas #mobileFeed::after{content:attr(data-short-label);font-size:10px!important;color:#173b3a;
  font-weight:900;line-height:1;white-space:nowrap}
}