/* La Casa: salón rioplatense, cuero bordó y latón. La mesa no cambia. */
/* Pesos de lectura reales: no reutilizar el archivo negrita para texto normal. */
@font-face {
  font-family:'Alegreya';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fuentes/alegreya-400-600-latin-v1.woff2?v=1') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --ui-font: 'Alegreya', Georgia, serif;
  --ui-display: 'Trocchi', Georgia, serif;
  --ui-text: #fff3d7;
  --ui-muted: #d7c3a1;
  --ui-gold: #e4bd69;
  --ui-panel: #241408;
  --ui-raised: #42251b;
  --ui-line: #8c6538;
  --ui-space: 24px;
  --ui-radius: 18px;
}
#menu {
  inset: 0 !important;
  padding: 0 var(--ui-space) calc(32px + env(safe-area-inset-bottom)) !important;
  gap: 20px !important;
  color: var(--ui-text);
  font: 400 18px/1.45 var(--ui-font);
  background: linear-gradient(180deg,#14080515,#14080545 45%,#140805eb 100%),url('/tema/casa-del-15/salon-mobile.webp?v=1') center top / cover no-repeat,#160c09 !important;
  overscroll-behavior-y: contain;
  scroll-padding-top: 88px;
}
/* Cada fila reserva el alto completo del contenido, también al cargar imágenes o premios. */
#menu.show { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-template-rows: none !important; grid-auto-rows: max-content; align-content: start !important; align-items: start !important; }
#menu::before { content: none !important; }
#menu::after { background: linear-gradient(90deg,#14080550,transparent 18% 82%,#14080550) !important; box-shadow: inset 0 0 90px #14080542 !important; }
#menu .hudtop {
  position: sticky !important; top: 0 !important; left: auto !important; right: auto !important;
  z-index: 5; grid-column: 1 / -1; order: 0; box-sizing: border-box;
  width: calc(100% + var(--ui-space) * 2) !important;
  min-height: 80px;
  padding: calc(12px + env(safe-area-inset-top)) var(--ui-space) 12px !important;
  margin: 0 calc(var(--ui-space) * -1) !important;
  transform: none !important;
  background: linear-gradient(#170b03f5,#201713f0);
  border-bottom: 1px solid #bd945a7a;
  box-shadow: 0 5px 22px #0007,inset 0 -3px #09040255;
}
#menu .hudtop :is(.walletchip,.hbtn) { min-width: 44px; min-height: 44px; }
/* Cabecera: el retrato y los recursos mandan; las utilidades tienen una cara
   de 36 px dentro de un blanco táctil de 44 px. Sólo presentación del Hogar. */
#menu .hudtop {
  gap: 12px;
  padding-bottom: 16px !important;
  background: linear-gradient(180deg,#160c09f7,#160c09f5);
  border-bottom: 1px solid #b28a4d45;
  box-shadow: 0 4px 16px #09040250,inset 0 -1px #05020180;
}
#menu .hudtop .hudlado:first-child { flex: none; }
#menu .hudtop .hudlado:last-child {
  min-width: 0; max-width: calc(100% - 72px);
  flex-wrap: wrap; justify-content: flex-end; gap: 8px;
}
#menu .hudrecursos, #menu .hudutilidades {
  display: flex; align-items: center; gap: 6px;
}
#menu .hudtop .yochip { width: 60px; height: 60px; }
#menu .hudtop .yofoto {
  inset: 6px;
  border: 1px solid #e0c48a80;
  box-shadow: 0 0 0 2px #1b130f,0 0 0 3px #987344,0 3px 8px #0008 !important;
}
#menu .hudtop .yoaro .pista { stroke: #634529; stroke-width: 2; }
#menu .hudtop .yoaro .corre {
  stroke: #f3d297; stroke-width: 3;
  filter: drop-shadow(0 0 2px #e4bd6938);
}
#menu .hudtop .yonivel {
  min-width: 26px; bottom: -5px;
  color: #fff3c4 !important;
  border-color: #bd945a !important;
  background: linear-gradient(180deg,#503127,#28160f) !important;
  box-shadow: 0 2px 4px #0008,inset 0 1px #fff3c42b !important;
  text-shadow: 0 1px 1px #140805;
}
#menu .hudtop .walletchip {
  flex: none; height: 44px; gap: 5px; padding: 0 8px;
  border: 1px solid #bd945a66 !important; border-radius: 14px;
  background: linear-gradient(160deg,#503127db,#28160ff5 72%) !important;
  box-shadow: inset 0 1px #ffe6b32e,0 2px 5px #0005 !important;
}
#menu .hudtop .walletchip b {
  font: 600 17px var(--ui-font); font-variant-numeric: tabular-nums;
  color: #fff3d7 !important; letter-spacing: 0; white-space: nowrap;
  text-shadow: 0 1px 2px #130402;
}
#menu .hudtop :is(#walletIcon,#starIcon) { display: flex; align-items: center; flex: none; }
#menu .hudtop .walletchip .pieza-oro { width: 27px; height: 27px; }
#menu .hudtop .estrellas { background: linear-gradient(160deg,#34241bdb,#201713f5) !important; }
#menu .hudtop .estrellas .pieza-oro { width: 25px; height: 25px; }
#menu .hudtop .chipmas {
  position: relative; padding: 0; font-size: 0; line-height: 0;
  margin-left: 3px; margin-right: -2px;
  background: linear-gradient(145deg,#f3df9e,#c49b59) !important;
  border-color: #f3d79599 !important;
  box-shadow: inset 0 1px #fff8dc80,0 1px 3px #0006 !important;
}
/* Dos trazos centrados en la caja: el signo no depende del eje de la fuente. */
#menu .hudtop .chipmas::before, #menu .hudtop .chipmas::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 2px; border-radius: .5px;
  background: currentColor; transform: translate(-50%,-50%);
  pointer-events: none;
}
#menu .hudtop .chipmas::after { width: 2px; height: 10px; }
#menu .hudtop .hbtn {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0 !important; border-radius: 50%; opacity: 1;
  background: none !important; box-shadow: none !important;
}
#menu .hudtop .hbtn::before {
  content: ''; position: absolute; inset: 4px; border-radius: inherit;
  border: 1px solid #bd945a5c;
  background: linear-gradient(145deg,#34241bd9,#1b130ff2);
  box-shadow: inset 0 1px #ffe6b315,0 1px 3px #0004;
  pointer-events: none;
}
#menu .hudtop .hbtn svg {
  position: relative; width: 19px; height: 19px;
  stroke: #ddc596 !important; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
#menu .hudtop #qVolumen .vcuerpo { fill: none; stroke: currentColor; }
#menu .hudtop #qVolumen { color: #ddc596; }
#menu .hudtop :is(.walletchip,.hbtn,.yochip):focus-visible {
  outline: 2px solid #ffe39a; outline-offset: 3px;
}
@media (hover:hover) and (pointer:fine) {
  #menu .hudtop .walletchip:hover { border-color: #e0b66c !important; filter: brightness(1.08); }
  #menu .hudtop .hbtn:hover::before { border-color: #e0b66c; background: #463124; }
}
@media (max-width:420px) {
  #menu .hudtop { padding-inline: 16px !important; gap: 8px; }
  #menu .hudtop .hudlado:last-child { max-width: calc(100% - 68px); gap: 6px; }
  #menu .hudrecursos, #menu .hudutilidades { gap: 4px; }
  #menu .hudtop .walletchip { padding-inline: 6px; }
}
@media (max-width:359px) {
  #menu .hudtop .walletchip b { font-size: 16px; }
  #menu .hudtop .walletchip { gap: 4px; }
  #menu .hudtop .walletchip .pieza-oro { width: 24px; height: 24px; }
}
@media (forced-colors:active) {
  #menu .hudtop .chipmas::before, #menu .hudtop .chipmas::after {
    forced-color-adjust: none; background: ButtonText;
  }
  #menu .hudtop :is(.walletchip,.yonivel), #menu .hudtop .hbtn::before {
    background: ButtonFace !important; border-color: ButtonText !important; box-shadow: none !important;
  }
  #menu .hudtop :is(.walletchip b,.yonivel,.hbtn svg), #menu .hudtop #qVolumen {
    color: ButtonText !important; stroke: ButtonText !important; text-shadow: none;
  }
}
#menu .logo15 {
  position: relative !important; inset: auto !important; order: 1; grid-column: 1 / -1; justify-self: center;
  width: calc(100% + var(--ui-space) * 2) !important; max-width: 620px !important;
  padding: 0 !important; margin: -10px 0 4px !important; transform: none !important;
}
/* (Dueño, 2026-09-14) «el icono principal se achicó, no tiene sentido que sea tan pequeño; debe ser más
   grande para impresionar al usuario con su belleza». Tenía DOS techos que lo apretaban: la caja a 480 y el
   clamp a 30rem. Los dos suben. Es lo primero que se ve y es lo mejor que tenemos. */
#menu .logo15 .crest {
  display: block; width: clamp(21rem,118vw,38rem) !important; max-width: none !important; height: auto !important;
  margin: 0 calc((100% - clamp(21rem,118vw,38rem)) / 2) -.55rem !important; object-fit: contain; transform: none !important;
  filter: drop-shadow(0 10px 14px #090402b3) !important;
  animation: none !important; translate: none !important;
}
#menu .logo15 .promesa { max-width: none !important; margin: 8px 0 0 !important; color: var(--ui-text) !important; font: 400 18px/1.45 var(--ui-font) !important; letter-spacing: .025em; text-shadow: 0 2px 4px #170b03 !important; }
#menu.show :is(.logo15,.menupanel) { animation: none !important; }

/* Jugar, explorar y progresar: flujo abierto, sin cajas anidadas. */
#menu .menupanel { display: contents !important; }
#menu .menupanel::before { content: none !important; }
#menu .menupanel > :is(button,details,.misioncard,#tileCofre,.mesaespera,.jugarfila,.modosfila) { position: relative; z-index: 1; grid-column: 1 / -1; min-width: 0; width: 100%; box-sizing: border-box; }
/* (Dueño, 2026-09-14) LA PUERTA GRANDE. «Configurar mesa» y «Cómo se juega» salen de la pantalla principal:
   la mesa se ajusta desde el engranaje pegado a JUGAR —misma pieza, mismo alto— y el tutorial aparece sólo
   para quien no jugó todavía. Quedan tres cosas para elegir, no seis para leer. */
#menu .menupanel > .jugarfila { display: flex; align-items: stretch; gap: 0; order: 3; }
#menu .menupanel > .jugarfila > #menuPlay { flex: 1; min-width: 0; order: 1 !important; border-radius: 10px 0 0 20px !important; }
#menu .menupanel > .jugarfila > #menuConfig.ajustarmesa {
  flex: none; order: 2 !important; width: 64px; min-height: 58px; padding: 0 !important; display: grid; place-items: center;
  margin: 0 !important; border: 1px solid #bd945a !important; border-left-color: #00000040 !important;
  border-radius: 0 20px 10px 0 !important;
  background: linear-gradient(155deg,#633200b3,#341600d9),var(--leather-tex),#341600 !important;
  box-shadow: inset 0 1px #ffe6b333,inset 0 -3px 8px #16060080,0 5px 10px #0005 !important;
}
#menu .menupanel > .jugarfila > #menuConfig.ajustarmesa svg { width: 24px !important; height: 24px !important;
  fill: none; stroke: var(--ui-gold) !important; stroke-width: 1.6; }
/* Las dos mesas con gente: placas con medallón, nombre y una línea que dice qué pasa al tocarlas. */
#menu .menupanel > .modosfila { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; order: 5; }
#menu .menupanel > .modosfila > button.modo {
  display: flex !important; flex-direction: row; align-items: center; gap: 12px; width: 100%;
  min-height: 92px; padding: 14px 15px !important; text-align: left; white-space: normal !important;
  border-radius: 14px 24px 14px 24px !important;
}
#menu .menupanel > .modosfila > button.modo .modo-arte {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; box-sizing: border-box;
  border: 1px solid #e4bd6999; border-radius: 50%;
  background: linear-gradient(145deg,#64401c,#241408);
  box-shadow: inset 0 1px #ffeac366, 0 3px 8px #0008;
}
#menu .menupanel > .modosfila > button.modo .modo-arte svg { width: 26px; height: 26px; fill: none;
  stroke: #ffe39a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#menu .menupanel > .modosfila > button.modo .modo-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#menu .menupanel > .modosfila > button.modo b { color: var(--ui-text); font: 400 19px/1.2 var(--ui-display); letter-spacing: 0; }
#menu .menupanel > .modosfila > button.modo small { color: var(--ui-muted); font: 400 15px/1.25 var(--ui-font); letter-spacing: 0; }
@media (max-width: 400px) {
  #menu .menupanel > .modosfila { grid-template-columns: 1fr; gap: 10px; }
  #menu .menupanel > .modosfila > button.modo { min-height: 74px; }
}
#menu .menupanel > button { min-height: 58px; padding: 16px !important; border-radius: 10px 20px 10px 20px !important; font: 400 18px/1.35 var(--ui-display) !important; letter-spacing: .015em !important; text-transform: none !important; white-space: normal; text-overflow: clip; }
#menu #menuResume { order: 2 !important; }
#menu #menuPlay { order: 3 !important; }
#menu .menupanel > button.aux { color: var(--ui-text) !important; border: 1px solid #bd945a !important; background: linear-gradient(155deg,#633200b3,#341600d9),var(--leather-tex),#341600 !important; box-shadow: inset 0 1px #ffe6b333,inset 0 -3px 8px #16060080,0 5px 10px #0005 !important; }
#menu #menuConfig:focus-visible { outline: 2px solid #ffe39a; outline-offset: 3px; }
#menu #menuAprender { order: 5 !important; }

/* Portadas ilustradas, filete interior y medallones de latón. */
#menu #homeDestinos {
  position: relative !important; z-index: 1; inset: auto !important; order: 6; grid-column: 1 / -1;
  display: grid !important; grid-template: auto / repeat(2,minmax(0,1fr)) !important; gap: 18px !important;
  width: 100% !important; height: auto !important; padding: 12px 0 8px; margin: 0; transform: none !important;
  border: 0; background: none !important; box-shadow: none;
}
#menu #homeDestinos > .menutile {
  display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important;
  grid-column: auto !important; grid-row: auto !important; gap: 5px; width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 186px !important; padding: 22px 18px !important; margin: 0 !important;
  border: 1px solid #b28a4d !important; border-radius: 14px 24px 14px 24px !important;
  background: linear-gradient(180deg,#170b0330,#170b0390 40%,#170b03f5 100%),var(--door-art) center 35% / cover no-repeat,#241408 !important;
  box-shadow: inset 0 1px #ffeac350,0 6px 15px #0006 !important;
  transform: none !important; color: var(--ui-text); text-align: left; cursor: pointer; overflow: hidden !important;
}
#menu #homeDestinos > .menutile::before { content: '' !important; inset: 6px !important; border: 1px solid #e4bd6942 !important; border-radius: 9px 19px 9px 19px !important; box-shadow: none !important; }
#menu #homeDestinos > .menutile::after { content: none !important; }
#menu #homeDestinos > .menutile svg { width: 44px !important; height: 44px !important; box-sizing: border-box; margin: 0 0 12px !important; padding: 9px !important; flex: none; border: 1px solid #e4bd6999 !important; border-radius: 50%; background: linear-gradient(145deg,#64401c,#241408) !important; box-shadow: inset 0 1px #ffeac366,0 3px 8px #0008 !important; color: #ffe39a !important; filter: none !important; }
#menu #homeDestinos > .menutile .tname { align-self: auto !important; color: var(--ui-text) !important; font: 400 20px/1.25 var(--ui-display) !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: 0 2px 4px #000 !important; }
#menu #homeDestinos > .menutile .tsub { display: block !important; align-self: auto !important; margin: 0 !important; max-width: 100%; color: var(--ui-muted) !important; font: 400 16px/1.3 var(--ui-font) !important; text-shadow: 0 2px 4px #000; }
#menu #homeDestinos #tileGira { --door-art: url('/tema/casa-del-15/gira/tucuman-desktop-v1.webp?v=1'); grid-column: 1 / -1 !important; order: -1; min-height: 170px !important; background-position: center,center 44% !important; }
#menu #homeDestinos #tileGira .tname { font-size: 26px !important; }
#menu #tileTienda { --door-art: url('/tema/casa-del-15/camaras/tienda-mobile-v1.webp?v=1'); }
#menu #tileAmigos { --door-art: url('/tema/casa-del-15/camaras/amigos-mobile-v1.webp?v=1'); }
#menu #tileRanking { --door-art: url('/tema/casa-del-15/camaras/misiones-mobile-v1.webp?v=1'); }
#menu #tilePerfil { --door-art: url('/tema/casa-del-15/camaras/anotador-pausa-mobile-v1.webp?v=1'); }
#menu #homeDestinos > .menutile:active { filter: brightness(1.15); }
#menu #homeDestinos > .menutile:focus-visible, #menu summary:focus-visible { outline: 2px solid #ffe39a; outline-offset: 4px; }
#menu #tileCofre {
  display: grid !important; grid-template: auto auto / minmax(100px,38%) minmax(0,1fr) !important; gap: 4px 18px; text-align: left !important;
  order: 7; grid-row: auto; min-height: 140px; padding: 16px 20px !important; border: 1px solid #bd945a !important;
  border-radius: 14px 24px 14px 24px !important;
  background: linear-gradient(90deg,#3a2410ee,#241408d9),url('/tema/casa-del-15/camaras/cofre-mobile-v1.webp?v=1') center / cover !important;
  box-shadow: inset 0 1px #ffe39a2b,0 5px 14px #0005 !important;
}
#menu #tileCofre::before, #menu #tileCofre::after { content: none !important; }
#menu #tileCofre .cofre-art { grid-column: 1; grid-row: 1 / 3; width: 100%; height: auto; max-width: 156px; justify-self: center; align-self: center; transform: translateY(-7%); pointer-events: none; }
#menu #tileCofre .tname { grid-column: 2 !important; grid-row: 1 !important; align-self: end; font: 400 23px var(--ui-display) !important; color: var(--ui-gold); letter-spacing: 0; }
#menu #tileCofre .tsub { grid-column: 2 !important; grid-row: 2 !important; align-self: start; font: 400 17px var(--ui-font) !important; color: var(--ui-text) !important; }
#menu #tileCofre:focus-visible { outline: 2px solid #ffe39a; outline-offset: 4px; }
/* overflow:hidden no debe reducir la fila de la grilla al borde y relleno de la tarjeta. */
#menu .menupanel .misioncard {
  order: 8; height: max-content; padding: 24px !important; border: 1px solid #ba904a !important; border-radius: 16px !important;
  background: linear-gradient(130deg,#633200f2,#361a00f7 65%,#271404f7),var(--leather-tex),#361a00 !important;
  box-shadow: inset 0 1px #f7e5a84d,inset 0 -3px 6px #11060080,0 6px 18px #0006 !important;
}
#menu .menupanel .misioncard::before { inset: 6px !important; border: 1px solid #e0b66c38 !important; border-radius: 10px !important; }
#menu .menupanel .misioncard::after { content: ''; position: absolute; top: 8px; right: 12px; width: 46px; height: 18px; background: url('/tema/casa-del-15/filete-flor.svg') center / contain no-repeat; opacity: .65; pointer-events: none; }
#menu .menupanel .misioncard :is(.mhead,.hf-tit) { letter-spacing: .01em !important; font: 400 21px/1.35 var(--ui-display) !important; text-transform: none; color: #f3d297 !important; -webkit-text-fill-color: currentColor !important; background: none !important; filter: none; text-shadow: 0 1px 2px #1a0d04 !important; }
#menu .misioncard :is(.mtxt,.hf-txt,.mananatxt,.pofino,.mname,.mreward) { font: 400 17px/1.5 var(--ui-font) !important; }
#menu .misioncard .mhead { display: flex; flex-wrap: wrap; gap: 6px 12px; }
#menu .misioncard .mhead span { font-size: 16px; }
.recompensa-arte { display: block; object-fit: contain; flex: none; pointer-events: none; }
.racha-medallon { display: grid; place-items: center; box-sizing: border-box; padding: 3px; border: 1px solid #b28a4d; border-radius: 50%; background: #e8d3a6; box-shadow: inset 0 0 0 1px #815a29,0 1px 3px #13040266; overflow: hidden; }
.racha-medallon > img { width: 100%; height: 100%; min-height: 0; mix-blend-mode: multiply; }
#menu .coleccion-head { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 14px; }
#menu .coleccion-head > .recompensa-arte { width: 32px; height: 32px; }
#menu .coleccion-head > div { flex: 1; min-width: 0; }
#menu .coleccion-head .mhead { margin: 0; }
#misionRacha { display: flex; align-items: center; gap: 5px; color: var(--ui-muted); font: 400 16px/1.3 var(--ui-font); margin-top: 6px; }
#misionRacha:empty { display: none; }
#misionRacha .recompensa-arte { width: 24px; height: 24px; }
#misionRacha .racha-medallon { padding: 3px; border-width: 1px; }
#misionRacha .racha-medallon > img { width: 100%; height: 100%; }
#menu #misionList .mision { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; padding: 15px 0; border-top: 1px solid #e4bd6929; }
#menu #misionList .mision:last-child { padding-bottom: 4px; }
#menu #misionList .mtxt { display: contents; }
#menu #misionList .mname { grid-column: 1 / -1; color: var(--ui-text); }
#menu #misionList .mreward { color: #f3d297; font-variant-numeric: tabular-nums; gap: 5px; }
#menu #misionList .mreward :is(svg,img) { width: 20px; height: 20px; }
#menu .misioncard :is(.mbar,.pasebarra,.obarra) { align-self: center; height: 10px; margin: 0; border: 1px solid #b28a4d !important; border-radius: 20px; overflow: hidden; background: #1a0d04 !important; box-shadow: inset 0 2px 4px #000a,0 1px #f3d29724; }
#menu .misioncard :is(.mbar,.pasebarra,.obarra) > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(0deg,#916123,#d8ad64 38%,#f3d795 67%,#b78740) !important; box-shadow: inset 0 1px #fff0ba78; transition: width .35s ease; }
#menu #misionList .mision.done { background: none; border-radius: 0; box-shadow: none; }
#menu #misionList .mision.done .mname { color: #c2dcb5 !important; }
#menu #misionList .mision.done .mbar > i { background: linear-gradient(0deg,#4c693e,#a4c391) !important; }
#menu #mananaCard { background: linear-gradient(130deg,#34241bf5,#201713f7),var(--leather-tex),#201713 !important; }
#menu #mananaCard .mhead { margin: 0 0 10px; }
#menu #mananaCard .mfila { min-height: 44px; gap: 10px; padding: 9px 0 !important; margin: 0; border: 0; border-bottom: 1px solid #d8ad6426; border-radius: 0; background: none; box-shadow: none; color: var(--ui-text); font: 400 18px/1.4 var(--ui-font); }
#menu #mananaCard .mfila:last-of-type { border-bottom: 0; }
#menu #mananaCard .mfila > .recompensa-arte { width: 28px; height: 28px; }
#menu #mananaCard .mfila > span:not(.recompensa-arte) { flex: 1; min-width: 0; }
#menu #mananaCard .mfila b { color: #efcf8c; font: 600 18px/1.4 var(--ui-font); white-space: nowrap; }
#menu #mananaCard .costura { margin: 0 0 8px; padding: 0 !important; background: none; font: 400 21px/1.35 var(--ui-display) !important; letter-spacing: .01em !important; text-transform: none; color: #f3d297 !important; text-shadow: none; }
#menu #mananaCard .recompensas-hoy + .recompensas-manana { margin-top: 20px; padding-top: 22px; border-top: 3px double #ba904a6b; }
#menu #mananaCard .riesgo { margin-top: 12px; padding: 12px; color: #f2c8b8; border-color: #cc857955; background: #5f360c3f; font: 400 16px/1.45 var(--ui-font); }
#menu #paseCard .coleccion-head { margin-bottom: 14px; gap: 10px; }
#menu #paseCard .recompensa-arte { width: 32px; height: 32px; }
#menu #paseCardTxt { display: block; margin-top: 8px; color: var(--ui-muted); font: 400 17px/1.4 var(--ui-font); }
#menu #paseCard .pasebarra { height: 14px; }
#menu #paseCard .coleccion-ir { flex: none; width: 12px; height: 24px; fill: none; stroke: #e6ca87; stroke-width: 1.5; }
#menu #paseCard:focus-visible { outline: 2px solid #ffe39a; outline-offset: 4px; }
#menu #paseCard:active { filter: brightness(1.1); }
#menu #objetivoCard .ojo { flex-wrap: wrap; margin: 16px 0 12px; }
#menu #objetivoCard :is(.ofalta,.opie) { color: var(--ui-muted); font: 400 17px/1.4 var(--ui-font); }
#menu #objetivoCard .opie { margin-top: 8px; }
#menu .mesaespera { order: 2 !important; }
#menu :is(.piedecasa,.instalar) { grid-column: 1 / -1; order: 10; margin: 4px 0 0; }
#menu .piedecasa { padding: 12px 0 0; }
#menu .piedecasa .pmail { font: 400 16px var(--ui-font); min-height: 44px; display: inline-flex; align-items: center; }
/* Primera visita móvil: conservar el emblema y dar lugar a jugar y progresar.
   El orden de lectura y tabulación sigue el DOM; el HUD y escritorio no cambian. */
@media (max-width:959px) {
  #menu.show { row-gap: 12px !important; }
  #menu .logo.logo15 { margin: -8px 0 0 !important; }
  /* (Dueño, 2026-09-14) el emblema era el hermano chico de su propia pantalla: 17rem en un teléfono de
     390 son 272 px y el resto era aire. Sube a 26rem con tope de 96vw.
     (2026-09-15) Y un tercer techo, en alto de pantalla: el dibujo es CUADRADO, así que crecer a lo ancho
     también le come el alto, y en un teléfono corto empujaba JUGAR fuera de la primera pantalla. Los 46vh
     no tocan nada en los teléfonos de hoy —en 360×800 manda el 96vw— y sólo entran a mandar en las
     pantallas bajas, que es donde tienen que mandar. */
  #menu .logo15 .crest {
    width: min(96vw,26rem,46vh) !important;
    margin: 0 auto -4px !important;
  }
  #menu .logo15 .promesa { margin-top: 4px !important; }
  #menu .menupanel > .modosfila > button.modo { min-height: 84px !important; padding: 13px 13px !important; }
  #menu .menupanel > #homeCamino {
    min-height: 96px; grid-template-columns: 54px minmax(0,1fr) 16px;
    gap: 10px; margin-top: 0; padding: 12px 14px !important;
  }
  #menu #homeCamino .ep-nivel { width: 54px; height: 60px; }
  #menu #homeCamino .ep-camino-copy { gap: 6px; }
  #menu #homeCamino .ep-camino-head { gap: 2px; }
  #menu #homeCamino .ep-rango { font-size: 20px; }
}
@media (min-width:60rem) {
  #menu { padding-inline: max(32px,calc((100vw - 1180px) / 2)) !important; gap: 24px !important; background-image: linear-gradient(90deg,#14080524,#14080570),url('/tema/casa-del-15/salon-desktop.webp?v=1') !important; }
  #menu.show { grid-template-columns: minmax(360px,480px) minmax(0,600px) !important; column-gap: 56px !important; }
  #menu .hudtop { grid-column: 1 / -1; width: 100% !important; margin: 0 !important; padding-inline: 4px !important; background: none; box-shadow: none; border: 0; }
  #menu .logo15 { grid-column: 1; grid-row: 2 / 7; align-self: start; margin: 8px auto 0 !important; width: 100% !important; }
  #menu .logo15 .crest { width: min(41vw,34rem) !important; margin: 0 auto !important; }
  #menu .logo15 .promesa { margin-top: 16px !important; }
  #menu .menupanel > :is(button,details,.misioncard,#tileCofre,.mesaespera) { grid-column: 2 !important; }
  #menu .menupanel > .modosfila { grid-column: 2 !important; }
  #menu .menupanel > .jugarfila { grid-column: 2 !important; }
  #menu .menupanel > .modosfila > button.modo { min-height: 86px; }
  #menu #homeDestinos { grid-column: 1; grid-row: 7 / 12; align-self: start; padding-top: 0; }
  #menu :is(.piedecasa,.instalar) { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width:420px) { :root { --ui-space: 20px; } }
@media (max-width:359px) {
  #menu { column-gap: 14px !important; }
  #menu .hudtop { padding-inline: 10px !important; }
  #menu .hudtop .hudlado { gap: 4px; }
  #menu #homeDestinos { gap: 14px !important; }
  #menu #homeDestinos > .menutile { padding: 20px 13px !important; }
  #menu #homeDestinos > .menutile .tname { font-size: 18px !important; }
  #menu .menupanel .misioncard { padding: 20px !important; }
  #menu .menupanel .misioncard .mhead { font-size: 19px !important; }
  #menu #mananaCard .mfila { gap: 10px; font-size: 17px; }
}
@media (hover:hover) and (pointer:fine) { #menu #homeDestinos > .menutile:hover { border-color: #f3d795 !important; filter: brightness(1.12); } }
@media (forced-colors:active) { #menu, #menu .hudtop, #menu #homeDestinos > .menutile, #menu #menuConfig, #menu #tileCofre { background: Canvas !important; color: CanvasText !important; border-color: CanvasText !important; } }
@media (forced-colors:active) {
  #menu .menupanel .misioncard, #menu #mananaCard { background: Canvas !important; color: CanvasText !important; border-color: CanvasText !important; box-shadow: none !important; }
  #menu .menupanel .misioncard::after { display: none; }
  #menu .menupanel .misioncard :is(.mhead,.costura,.mname,.mreward,.mfila,b) { color: CanvasText !important; text-shadow: none !important; }
  #menu .misioncard :is(.mbar,.pasebarra,.obarra) > i { background: Highlight !important; }
}

/* Viaje por las salas. La barra y las acciones existentes quedan fuera de la transición. */
#menu:has(.casa-viaje) { overflow-anchor: none; }
#menu .logo15.casa-viaje { position: relative !important; min-width: 0; touch-action: pan-y; }
#menu .casa-marco { position: relative; width: 100%; flex: none; --casa-alto: clamp(280px, 42vh, 390px); height: var(--casa-alto); isolation: isolate; }
#menu .logo15.casa-viaje .crest { position: absolute; inset: 0; width: min(calc(100% - 112px),var(--casa-alto)) !important; max-width: 440px !important; height: auto !important; aspect-ratio: 1; margin: auto !important; object-fit: contain; filter: none !important; pointer-events: none; user-select: none; }
#menu .casa-escenas, #menu .casa-escena { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; pointer-events: none; user-select: none; }
#menu .casa-escena picture, #menu .casa-escena img { display: block; width: 100%; height: 100%; }
#menu .casa-escena img { object-fit: contain; object-position: center; }
#menu .casa-escena { inset-inline: 56px; border-radius: 0; }
#menu .casa-flecha { position: absolute; z-index: 2; top: calc(50% - 30px); display: grid; place-items: center; width: 48px; height: 60px; min-width: 44px; padding: 8px; border: 1px solid #f1d797; border-radius: 18px 6px 18px 6px; color: #fff0bf; background: linear-gradient(130deg,#9f7641,#4f351b 48%,#271b10); box-shadow: inset 0 0 0 3px #492d18,inset 0 0 0 4px #bc955b,0 5px 14px #0008; }
#menu .casa-flecha svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#menu .casa-anterior { left: 4px; } #menu .casa-siguiente { right: 4px; }
#menu .casa-nombre { margin: 10px 0 0; color: #fff0d0; font: 400 24px/1.2 var(--ui-display); }
#menu .logo15.casa-viaje .promesa { min-height: 26px; margin-top: 4px !important; font-size: 16px !important; }
#menu .casa-paradas { display: flex; justify-content: center; gap: 0; }
#menu .casa-paradas button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; background: none; color: #dfc08a; box-shadow: none; }
#menu .casa-paradas .casa-punto { width: 9px; height: 9px; border: 1px solid #dfc08a; border-radius: 50%; background: #352719; }
#menu .casa-paradas [aria-current="true"] .casa-punto { background: #f6d99b; box-shadow: 0 0 0 4px #f6d99b30; }
#menu .casa-jugar { width: calc(100% - 24px); max-width: 400px; min-height: 55px; padding: 12px 18px; border-radius: 11px; border: 1px solid #ffe7ab; background: linear-gradient(#f1dda3,#c8a153); box-shadow: inset 0 0 0 3px #b49252,inset 0 0 0 4px #f8e7ba; color: #2d2111; font: 400 19px/1.3 var(--ui-display); }
#menu .casa-jugar:disabled { background: #483827; color: #efdab8; border-color: #ac8c5c; box-shadow: inset 0 0 0 3px #332518; opacity: 1 !important; cursor: default; }
#menu .casa-escoba-contexto { position: relative; z-index: 1; text-shadow: 0 2px 4px #000; background: #20150ee6; border-radius: 8px; padding: 3px 12px; justify-self: center; grid-column: 1 / -1; order: 1; margin: 0; color: #f1d9ab; font: 400 18px/1.4 var(--ui-display); text-align: center; }
#menu .casa-viaje [hidden], #menu .casa-escoba-contexto[hidden] { display: none !important; }
#menu .casa-viaje button:focus-visible { outline: 3px solid #fff0b8; outline-offset: 3px; }
#menu .casa-viaje button:active:not(:disabled) { transform: translateY(2px); }
@media (min-width:960px) {
  #menu .casa-marco { --casa-alto: clamp(310px,32vw,420px); }
  #menu .casa-flecha { width: 52px; height: 64px; }
  #menu .menupanel > .casa-escoba-contexto { grid-column: 2; }
}
@media (forced-colors:active) {
  #menu .casa-viaje button { border: 1px solid ButtonText; background: Canvas; color: CanvasText; }
}

/* Aviso aprobado: una salida clara mientras las cuatro mesas se construyen. */
#casaMesaPreparando > .casa-preparando-box { margin: auto; flex: none; width: min(400px,calc(100% - 48px)); max-height: calc(100svh - 48px); overflow-y: auto; padding: 28px 24px 14px; text-align: center; border: 1px solid #d9b575; border-radius: 16px; color: #fff0cd; background: linear-gradient(145deg,#473222,#21180f); box-shadow: inset 0 0 0 4px #291c10,inset 0 0 0 5px #8c693d,0 12px 35px #0008; font: 400 17px/1.5 var(--ui-font); }
#casaMesaPreparando { z-index: 180; background: #21170d80; }
#casaMesaPreparando .casa-preparando-sala { font: 400 12px/1.5 var(--ui-font); letter-spacing: .18em; text-transform: uppercase; color: #dfc08e; }
#casaMesaPreparando h2 { font: 400 28px/1.2 var(--ui-display); margin: 12px 0 18px; color: #fff0cd; }
#casaMesaPreparando button { display: block; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 10px; border-radius: 10px; border: 0; background: none; color: #efd09a; font: 400 17px/1.3 var(--ui-font); }
#casaMesaPreparando .casa-preparando-oro { background: linear-gradient(#f1dda3,#c8a153); border: 1px solid #ffe7ab; box-shadow: inset 0 0 0 3px #b49252; color: #2d2111; font: 400 19px/1.3 var(--ui-display); }
#casaMesaPreparando button:focus-visible { outline: 3px solid #fff3c0; outline-offset: 3px; }
@media (forced-colors:active) { #casaMesaPreparando, #casaMesaPreparando button { background: Canvas; color: CanvasText; border: 1px solid CanvasText; } }

/* El ambiente es parte del contenido desplazable, detrás del motor y los mandos. */
#menu[data-casa-sala]:not([data-casa-sala="escoba"]) { background: #20150e !important; }
#menu > #casaAmbientes { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0 !important; pointer-events: none; overflow: hidden; }
#casaAmbientes .casa-ambiente { position: absolute; inset: 0; }
#casaAmbientes picture, #casaAmbientes img { display: block; width: 100%; height: 100%; }
#casaAmbientes img { object-fit: cover; object-position: center top; }
#casaAmbientes .casa-ambiente::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,#20150e10,#20150e18 55%,#20150e); }

/* La portada corta conserva aire bajo Jugar, sin recortar el emblema. */
@media (max-width:959px) and (max-height:700px) {
  #menu .casa-marco { --casa-alto:252px; }
}