/* Uncle Apps · capa web común del panel y de los juegos (ver web.js) */
html.um-touch, html.um-touch body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
html.um-touch button, html.um-touch a, html.um-touch .chip { touch-action: manipulation; }
/* En los juegos (pantalla fija) nada puede salirse por los lados ni desplazar la página */
html.um-touch:not([data-um-home]), html.um-touch:not([data-um-home]) body { overflow: hidden; max-width: 100%; }

/* ── Aviso «Gira el móvil» (solo pantallas táctiles en vertical) ── */
.um-rotate { display: none; }
@media (orientation: portrait) {
  html.um-touch .um-rotate {
    position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 24px; text-align: center; color: #eef4ff; font-family: 'Fredoka', 'Nunito', 'Segoe UI', system-ui, sans-serif;
    background: radial-gradient(ellipse at 50% 20%, #14408a 0%, #0a2150 45%, #050f26 85%);
  }
  /* que nada más ancho que la pantalla obligue al navegador a alejar la vista */
  html.um-touch, html.um-touch body { overflow: hidden !important; max-width: 100vw; }
}
.um-rotate > * { max-width: 100%; text-wrap: balance; }
.um-rotate b { font-size: 2rem; font-weight: 700; color: #fff; -webkit-text-stroke: .05em #0b1e3f; paint-order: stroke fill; text-shadow: 0 .08em 0 #0b1e3f; }
.um-rotate p { margin: 0; font-size: 1.15rem; font-weight: 600; color: #cfe0ff; }
.um-rotate p strong { color: #ffd23f; }
.um-rotate small { margin-top: 8px; font-size: .95rem; color: #9fb6dd; font-weight: 500; }
.um-rot-art { position: relative; width: 170px; height: 170px; display: grid; place-items: center; margin-bottom: 10px; }
.um-phone {
  width: 86px; height: 150px; border-radius: 18px; border: 5px solid #eef4ff; background: #0b1e3f; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 3px #0b1e3f; animation: um-turn 2.4s ease-in-out infinite;
}
.um-phone svg { width: 46px; height: 58px; animation: um-counter 2.4s ease-in-out infinite; }
.um-arrow { position: absolute; right: -4px; top: 0; font-size: 2.4rem; color: #ffd23f; animation: um-pulse 2.4s ease-in-out infinite; }
@keyframes um-turn { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@keyframes um-counter { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
@keyframes um-pulse { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }

.um-rotate { cursor: pointer; }

/* ── Aviso «¡Juega a pantalla completa!» (móvil en horizontal) y consejo de instalar en iPhone ── */
.um-fs, .um-ios { display: none; }
html.um-ask-fs .um-fs, html.um-ask-ios .um-ios {
  position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(3, 10, 28, .72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); cursor: pointer;
  font-family: 'Fredoka', 'Nunito', 'Segoe UI', system-ui, sans-serif; animation: um-fade .3s ease-out;
}
@media (orientation: portrait) { html.um-ask-fs .um-fs, html.um-ask-ios .um-ios { display: none; } }
.um-fs-card {
  display: flex; align-items: center; gap: 22px; max-width: 620px; padding: 24px 28px; border-radius: 28px; color: #eef4ff; text-align: left;
  background: linear-gradient(180deg, #1c4084, #0c2250); border: 2px solid rgba(255, 255, 255, .2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 8px rgba(255, 255, 255, .05); animation: um-pop .45s cubic-bezier(.2, 1.4, .4, 1);
}
.um-fs-mascot { flex: none; width: 96px; height: 120px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); animation: um-bob 1.6s ease-in-out infinite; }
.um-fs-card b { display: block; font-size: 1.7rem; font-weight: 700; color: #fff; -webkit-text-stroke: .04em #0b1e3f; paint-order: stroke fill; }
.um-fs-card p { margin: 6px 0 16px; font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; color: #cfe0ff; line-height: 1.4; }
.um-fs-card strong { color: #ffd23f; }
.um-fs-go {
  display: inline-flex; align-items: center; gap: .4em; padding: .55em 1.3em; border-radius: 16px; font: inherit; font-weight: 700; font-size: 1.2rem; color: #0b1e3f;
  background: linear-gradient(180deg, #ffe066, #ffd23f 45%, #ff9f1c); border: 3px solid #0b1e3f; box-shadow: 0 5px 0 #b86a00; animation: um-pulse-btn 1.4s ease-in-out infinite;
}
.um-fs-no { margin-left: 14px; padding: .4em .6em; border: 0; background: none; font: inherit; font-weight: 600; font-size: 1rem; color: #9fb6dd; text-decoration: underline; cursor: pointer; }
.um-share { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #fff; color: #1f6feb; font-size: .85rem; vertical-align: middle; }
@keyframes um-fade { from { opacity: 0; } }
@keyframes um-pop { from { transform: scale(.7); opacity: 0; } }
@keyframes um-bob { 50% { transform: translateY(-8px); } }
@keyframes um-pulse-btn { 50% { transform: scale(1.06); } }

/* ── Botón «Inicio» (el «Salir» de escritorio en la web) ── */
.btn-quit.um-home {
  display: inline-flex !important; align-items: center; gap: .4em; color: #fff; background: rgba(13, 32, 72, .72);
  border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); text-decoration: none;
}
.btn-quit.um-home span { font-size: 1.15em; line-height: 1; }
.btn-quit.um-home:hover { background: rgba(40, 80, 150, .8); }

/* ── Pantallas bajas (móvil en horizontal): portada de los juegos más compacta ── */
@media (max-height: 660px) { #screen-title .title-left { zoom: .86; } }
@media (max-height: 580px) { #screen-title .title-left { zoom: .76; } }
@media (max-height: 500px) { #screen-title .title-left { zoom: .66; } }
@media (max-height: 430px) { #screen-title .title-left { zoom: .58; } }

/* ── Pantallas bajas: tarjeta de pregunta (juegos de mapas y cuerpo) más compacta, que no se salga por arriba ── */
/* (con «html» delante para ganar a los estilos del juego, que se cargan después) */
@media (max-height: 600px) {
  html .layer-card { padding-top: 70px; padding-bottom: 8px; }
  html .qcard { padding: 14px 24px 10px; }
  html .qflag-wrap { margin-top: -42px; margin-bottom: 4px; }
  html .qflag { width: 84px; height: 63px; border-width: 3px; border-radius: 12px; }
  html .qname { font-size: 2.1rem; }
  html .qname.long { font-size: 1.65rem; }
  html .qcard .hearts { margin: 4px 0 8px; }
  html .qcard .hearts svg { width: 28px; height: 28px; }
  html .layer-top { top: 76px; }
  /* el mapa o la lámina empiezan debajo del cartel «¿Dónde está…?», para que no tape lo que hay que encontrar */
  html .game-map { top: 132px; }
}

/* ── Teclado en pantalla abierto: la tarjeta de pregunta sube y se compacta ── */
html.um-kbd .layer-card { align-items: flex-start !important; padding-top: 6px !important; }
html.um-kbd .hud { visibility: hidden; }
html.um-kbd .qflag-wrap, html.um-kbd .qcont { display: none !important; }
html.um-kbd .qcard { padding-top: 14px !important; }