/* Experiencia 2026: composición y materia. Sin fuentes ni librerías adicionales.
   La barra superior del Hogar conserva exactamente su presentación aprobada. */
:root {
  --ep-ivory: #fff3d7;
  --ep-muted: #d7c3a1;
  --ep-gold: #e0b66c;
  --ep-line: #bd945a50;
  --ep-surface: #201713;
  --ep-raised: #2b1b16;
  --ep-leather: #582d00;
  --ep-shadow: 0 8px 22px #09040255;
  --ep-dialog-line: #c9ab7288;
  --ep-dialog-shadow: inset 0 1px #ffe6b333,0 22px 60px #0009;
}
#menu { gap: 16px !important; }
#menu .logo15 { margin-bottom: 8px !important; }
#menu .logo15 .promesa { color: #f1dfb7 !important; letter-spacing: .01em; }
#menu .menupanel :is(> button, > .jugarfila > button, > .modosfila > button):not(#homeCamino) {
  border-radius: 16px !important;
  transition: transform .14s ease, border-color .14s ease, filter .14s ease;
}
#menu .menupanel :is(> button, > .jugarfila > button).primary {
  min-height: 68px; font-size: 21px !important;
  border: 1px solid #f3df9e !important;
  color: #33200e !important;
  background: linear-gradient(180deg,#fff0ad,#e4bd69 70%,#c99c49) !important;
  box-shadow: inset 0 1px #fff3d7,inset 0 0 0 3px #f3df9e44,0 4px 0 #694921,0 8px 18px #09020160 !important;
  text-shadow: 0 1px #fff3c470 !important;
}
#menu .menupanel :is(> button, > .modosfila > button).aux {
  background: linear-gradient(155deg,#6e3e0cb3,#3a210aeb),var(--leather-tex),#3a210a !important;
  border-color: #c19b6466 !important;
  box-shadow: inset 0 1px #f1dfb726,0 3px 0 #1a0d0455,0 7px 15px #0904023d !important;
}
/* (Dueño, 2026-09-14) El engranaje que ajusta la mesa: pegado al botón grande, mismo alto, misma altura de
   bisel. Ya no es una placa con texto debajo de JUGAR: es parte del mismo mando. */
#menu .jugarfila { display: flex; align-items: stretch; gap: 0; }
#menu .jugarfila > .primary {
  flex: 1; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
}
#menu #menuConfig.ajustarmesa {
  flex: none; width: 62px; min-height: 68px; padding: 0 !important;
  border: 1px solid #f3df9e !important; border-left: 1px solid #00000038 !important;
  border-radius: 0 16px 16px 0 !important;
  background: linear-gradient(180deg,#fff0ad,#e4bd69 70%,#c99c49) !important;
  box-shadow: inset 0 1px #fff3d7, 0 4px 0 #694921, 0 8px 18px #09020160 !important;
}
#menu #menuConfig.ajustarmesa svg { stroke: #4a3200 !important; stroke-width: 1.7; }
/* (Dueño, 2026-09-27) «CÓMO SE JUEGA» ES LILA LAVANDA: en verde se confundía con el botón de jugar, que ya es verde.
   El brillo claro queda bajo los naipes de la izquierda y el texto crema va sobre el lila hondo (contraste AA). */
#menu #menuAprender {
  border-radius: 16px !important;
  background: linear-gradient(115deg,#9d86da 0%,#6a54a8 24%,#4a3a86 100%) !important;
  border: 1px solid #d9ccff73 !important;
  box-shadow: inset 0 1px #f0e9ff40,0 4px 12px #140a3059 !important;
}
/* (Dueño, 2026-09-14) «los botones jugar con un amigo y partida rápida online parecen que se hicieron con el
   paintbrush del windows 3.1». Eran dos rectángulos planos con una palabra. Ahora son placas de cuero con
   filete de oro, su medallón dibujado y dos renglones: qué es y qué pasa si la tocás. La pista la trae el
   marcado, así que el adaptador ya no la agrega por CSS. */
#menu .modosfila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#menu .menupanel > .modosfila > button.modo.aux {
  display: flex; flex-direction: row; align-items: center; gap: 11px;
  min-height: 84px; padding: 13px 14px !important; text-align: left;
  border-radius: 16px !important;
  background: linear-gradient(155deg,#764310b3,#3a210aeb),var(--leather-tex),#3a210a !important;
  border: 1px solid #d8b47a66 !important;
  box-shadow: inset 0 1px #f1dfb730, 0 3px 0 #1a0d0466, 0 8px 16px #09040240 !important;
}
#menu .menupanel > .modosfila > button.modo.aux:hover { border-color: #f0d48899 !important; }
#menu .ep-modo::after { content: none !important; }
#menu #homeCamino {
  position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr) 16px;
  align-items: center; gap: 14px; width: 100%; min-width: 0; min-height: 118px;
  grid-column: 1 / -1; order: 6; box-sizing: border-box;
  margin: 4px 0 0; padding: 18px 16px !important;
  text-align: left; white-space: normal; color: var(--ep-ivory);
  border: 1px solid #d1aa605c; border-radius: 20px !important;
  background: radial-gradient(ellipse at 0 0,#ac813d40,transparent 62%),linear-gradient(125deg,#38271b,#201713 70%);
  box-shadow: inset 0 1px #ffe6b329,var(--ep-shadow);
  font: 400 16px/1.35 var(--ui-font); cursor: pointer;
}
#menu #homeCamino[hidden] { display: none !important; }
.ep-nivel {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  width: 58px; height: 66px; box-sizing: border-box;
  border: 1px solid #e5bf78aa; border-radius: 18px 18px 24px 24px;
  background: linear-gradient(145deg,#754931,#30211a);
  box-shadow: inset 0 0 0 3px #241408,inset 0 0 0 4px #e4bd6938,0 4px 9px #0004;
}
.ep-nivel-label { font: 600 11px/1 var(--ui-font); color: #e6cf97; letter-spacing: .08em; }
.ep-nivel-numero { font: 400 23px/1.2 var(--ui-display); color: #fff0ba; font-variant-numeric: tabular-nums; }
.ep-camino-copy { display: grid; gap: 10px; min-width: 0; }
.ep-camino-head { display: grid; gap: 3px; }
.ep-overline { font: 600 11px/1.25 var(--ui-font); letter-spacing: .12em; color: #d2b879; }
.ep-rango { font: 400 22px/1.12 var(--ui-display); color: #fff3d7; }
.ep-camino-datos { display: flex; flex-wrap: wrap; gap: 3px 12px; justify-content: space-between; font: 400 13px/1.25 var(--ui-font); }
.ep-siguiente { color: #ddcfaa; }
.ep-xp { color: #edca80; font-variant-numeric: tabular-nums; }
.ep-progreso { display: block; height: 6px; padding: 2px; border: 1px solid #ba904a4d; border-radius: 10px; background: #100b09; overflow: hidden; }
.ep-progreso > i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg,#b38437,#f3d795); transition: width .25s ease; }
#homeCamino > svg { width: 16px; height: 22px; fill: none; stroke: #d7b56e; stroke-width: 1.6; }
#menu .ep-seccion {
  grid-column: 1 / -1; min-width: 0; margin: 22px 0 -2px;
  display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 5px 16px;
}
#menu .ep-seccion h2 { margin: 0; color: #fff3d7; font: 400 25px/1.2 var(--ui-display) !important; letter-spacing: -.015em; }
#menu .ep-seccion > span { color: #d0bda1; font: 400 15px/1.4 var(--ui-font); }
#menu #homeExplorarTitulo { order: 7; }
#menu #homeDestinos { order: 8; gap: 14px !important; padding: 8px 0 0; }
#menu #homeDestinos > .menutile {
  min-height: 180px !important; padding: 20px 16px !important; gap: 7px;
  border: 1px solid #c49b5966 !important; border-radius: 20px !important;
  box-shadow: inset 0 1px #ffe6b329,0 8px 20px #02020150 !important;
  background-image: linear-gradient(180deg,#14080500 15%,#1408053b 48%,#170b03e8 100%),var(--door-art) !important;
  background-position: center,center !important;
  background-size: cover,cover !important;
  transition: transform .16s ease,border-color .16s ease;
}
#menu #homeDestinos > .menutile::before { content: none !important; }
#menu #homeDestinos > .menutile svg {
  width: 34px !important; height: 34px !important; padding: 7px !important; margin-bottom: 6px !important;
  border-color: #f3d29770 !important; background: #241a0cbd !important;
  box-shadow: inset 0 1px #f7e5a836,0 2px 5px #0005 !important;
}
#menu #homeDestinos > .menutile .tname { font-size: 23px !important; color: #fff3d7 !important; }
#menu #homeDestinos > .menutile .tsub { font-size: 15px !important; color: #f0dabb !important; }
#menu #homeDestinos #tileGira {
  min-height: 210px !important;
  background-image: linear-gradient(90deg,#160c09d4,#160c0933 70%),var(--door-art) !important;
  justify-content: center !important; padding: 26px !important;
}
#menu #homeDestinos #tileGira .tname { font-size: 34px !important; }
#menu #tileRanking { --door-art: url('/tema/experiencia/ranking-v1.webp?v=1'); }
#menu #tilePerfil { --door-art: url('/tema/experiencia/perfil-v1.webp?v=1'); }
#menu #homeDestinos :is(#tileRanking,#tilePerfil) {
  min-height: 166px !important;
  background-image: linear-gradient(0deg,#140805d9,transparent 76%),var(--door-art) !important;
  background-position: center,65% center !important;
}
#menu #homePremiosTitulo { order: 9; }
#menu #tileCofre {
  order: 10; min-height: 168px; grid-template-columns: minmax(104px,42%) minmax(0,1fr) !important;
  border: 1px solid #d2a25880 !important; border-radius: 22px !important;
  background: radial-gradient(ellipse at 20% 50%,#c6944242,transparent 60%),linear-gradient(120deg,#402a17,#241408) !important;
  box-shadow: inset 0 1px #ffe39a32,var(--ep-shadow) !important;
}
#menu #tileCofre .cofre-art { max-width: 168px; transform: none; filter: drop-shadow(0 7px 6px #0006); }
#menu #tileCofre .tname { font-size: 28px !important; text-transform: none; color: #f7e5a8; }
#menu #tileCofre .tsub { font-size: 18px !important; color: #f1dfb7; }
#menu .menupanel .misioncard {
  border: 1px solid #bd945a66 !important; border-radius: 20px !important;
  padding: 22px !important; background: linear-gradient(145deg,#4c2c0f,#2b1c0f) !important;
  box-shadow: inset 0 1px #f1d9a023,var(--ep-shadow) !important;
}
#menu .menupanel .misioncard::before, #menu .menupanel .misioncard::after { content: none !important; }
#menu .coleccion-head { gap: 14px; margin-bottom: 20px; }
#menu .coleccion-head > .recompensa-arte { width: 46px; height: 46px; filter: drop-shadow(0 3px 3px #0005); }
#menu .menupanel .misioncard :is(.mhead,.hf-tit) { font-size: 24px !important; color: #fff3d7 !important; }
#menu #misionesCard { order: 11; }
#menu #maestriaCard { order: 11; }   /* (2026-09-14) después de las misiones del día, antes del objetivo */
#menu #maestriaCard .mpremio { font-size: 15px; }
#menu #maestriaCard .mision .mname { font-size: 18px; }
#menu #misionList .mision { gap: 9px 12px; padding: 17px 0; border-top-color: #e4bd6929; }
#menu #misionList .mname { font-size: 18px; }
#menu #misionList .mreward { font-size: 14px; }
#menu .misioncard :is(.mbar,.pasebarra,.obarra) { height: 7px; border-color: #b28a4d70 !important; }
#menu #objetivoCard { order: 12; background: linear-gradient(130deg,#213e33,#152720) !important; }
#menu #paseCard { order: 13; background: linear-gradient(130deg,#4a3018,#241a0c) !important; }
#menu #paseCard .recompensa-arte { width: 52px; height: 52px; }
#menu #paseCard .pasebarra { height: 10px; }
#menu #mananaCard { order: 14; background: #201713ed !important; }
#menu #mananaCard .mfila { border-bottom-color: #c2a57224; }
#menu #mananaCard .recompensas-hoy + .recompensas-manana { border-top: 1px solid #ba904a60; }
#menu :is(.piedecasa,.instalar) { order: 20; }

/* Las ventanas son superficies legibles, con una sola orla y luz consistente. */
body > .banner { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body > .banner > .box:is(.ornate,:not(.ornate)),
:is(#themeBanner,#perfilBanner,#settingsBanner,#amigosBanner,#rankingBanner,
  #cofreBanner,#paseBanner,#amigoBanner,#rapidaBanner,#cuentaBanner,
  #apuestaBanner,#giraBloqueada,#hablarBanner,#tutoBanner,#invitacionBanner) > .box {
  border: 1px solid var(--ep-dialog-line) !important; border-radius: 22px !important;
  box-shadow: var(--ep-dialog-shadow) !important;
}
body > .banner > .box.ornate::before, body > .banner > .box.ornate::after { content: none !important; }
body > .banner .screen-heading {
  border-bottom: 1px solid #d2b87955;
  background: linear-gradient(110deg,#5e340a,#311f10);
  box-shadow: 0 4px 14px #09020135,inset 0 1px #ffeac322;
}
body > .banner .screen-heading::before, body > .banner .screen-heading::after { content: none; }
body > .banner .screen-heading h3 { font-size: 24px !important; letter-spacing: .01em !important; }
body > .banner .screen-heading .screen-back { border-radius: 12px !important; box-shadow: inset 0 1px #f3d29722,0 2px 5px #14080544 !important; }
#settingsBanner .menurow, #partidaBanner .menurow { border-radius: 14px !important; border-color: #c4a05b45 !important; background: #34241b88 !important; }
#settingsBanner .seg, #partidaBanner .seg { border-color: #bd945a45 !important; }
body > .banner :is(button.primary,button.aux) { letter-spacing: .01em !important; border-radius: 12px !important; }
#pauseOverlay .box { border-radius: 22px !important; }

/* Mesa: mejor lectura de materiales y datos, preservando geometría de naipes,
   colores elegidos, turnos y todas las señales de captura existentes. */
.board .hudchip { border-color: #c2a57266 !important; box-shadow: inset 0 1px #e6d6b224,0 3px 9px #0004 !important; }
.board .hudchip::before { border-color: #d2b8792b !important; }
.board .hudchip .pname { letter-spacing: .01em; color: #fff3d7; }
.board .hudchip .ptitulo { color: #d7c3a1; }
.board .pscore b { border-color: #e5bf7860 !important; border-radius: 9px; }
.board .mesa { box-shadow: inset 0 0 0 1px #f3df9e32,inset 0 16px 36px #fff8dc08,inset 0 -22px 40px #0004,0 12px 28px #0007 !important; }
.board .cantobar { border-radius: 18px !important; background: linear-gradient(145deg,#4c2c0f,#251821) !important; box-shadow: inset 0 1px #f7dda82b,0 8px 24px #0007 !important; }
.board .cantobar button { border-radius: 12px !important; box-shadow: inset 0 1px #ffeac32e,0 3px 6px #0004 !important; }
#drawer { border-left: 1px solid #bd945a80; background: #201713fa !important; }
#toast { border-radius: 14px !important; background: #30211af5 !important; box-shadow: 0 5px 18px #0006 !important; }
#winBanner .winsaldo { border-radius: 18px !important; }
#winBanner .cscore { border-radius: 16px !important; }
#winBanner .winmedalla { filter: drop-shadow(0 9px 12px #0006); }

@media (min-width:960px) {
  #menu.show { grid-template-columns: minmax(360px,480px) minmax(0,600px) !important; gap: 20px 56px !important; }
  /* (2026-09-21, dueño: «que en escritorio se vea todo balanceado») El emblema se CENTRA contra la columna de jugar en
     vez de colgar de arriba, y «Tu camino» deja de ir forzado abajo del emblema (eso alargaba la columna izquierda y
     dejaba un hueco a la derecha): va donde ya está en el documento, debajo de los modos. Las dos columnas quedan
     parejas y «La Casa del 15» sube: asoma sin scroll en una notebook. Sólo cambia la posición; ningún componente. */
  #menu .logo15 { grid-row: 2 / 9; align-self: center; position: static !important; margin-top: 0 !important; }
  #menu .menupanel > .modosfila > button.modo.aux { min-height: 92px; padding-inline: 18px !important; }
  #menu .menupanel > #homeCamino { grid-column: 2 !important; grid-row: auto; align-self: start; margin-top: 0; }
  #menu #homeExplorarTitulo { grid-column: 1 / -1; grid-row: auto; margin-top: 34px; }
  #menu #homeDestinos { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  #menu #homeDestinos #tileGira { grid-column: 1 / -1 !important; min-height: 230px !important; background-position: center,center 44% !important; }
  #menu #homeDestinos > .menutile { min-height: 210px !important; }
  #menu #homeDestinos :is(#tileRanking,#tilePerfil) { min-height: 210px !important; }
  #menu #homePremiosTitulo { grid-column: 1 / -1; }
  #menu .menupanel > :is(#tileCofre,#misionesCard,#maestriaCard,#objetivoCard,#paseCard,#mananaCard) { grid-column: auto !important; grid-row: auto !important; }
  #menu .menupanel > #misionesCard { grid-column: 2 !important; grid-row: span 2 !important; }
  #menu #tileCofre { min-height: 180px; }
  #menu .menupanel > #mananaCard { grid-column: 1 / -1 !important; }
  #menu #mananaCard:has(.recompensas-hoy) { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  #menu #mananaCard .recompensas-hoy + .recompensas-manana { border-top: 0; border-left: 1px solid #ba904a60; margin: 0; padding: 0 0 0 32px; }
}
@media (max-width:359px) {
  #menu #homeCamino { gap: 10px; grid-template-columns: 48px minmax(0,1fr) 12px; padding: 16px 12px !important; }
  .ep-nivel { width: 48px; height: 60px; }
  .ep-rango { font-size: 20px; }
  #menu #homeDestinos { gap: 10px !important; }
  #menu #homeDestinos > .menutile { padding: 16px 12px !important; }
  #menu #homeDestinos > .menutile .tname { font-size: 21px !important; }
  #menu .ep-seccion h2 { font-size: 23px; }
  #menu .menupanel .misioncard { padding: 18px !important; }
}
@media (hover:hover) and (pointer:fine) {
  #menu #homeCamino:hover { border-color: #e6ca87; transform: translateY(-1px); }
  #menu #homeDestinos > .menutile:hover { transform: translateY(-2px) !important; border-color: #e8c482 !important; }
}
#menu #homeCamino:focus-visible { outline: 3px solid #ffe0a3; outline-offset: 4px; }
#menu #homeCamino:active, #menu .menupanel :is(> button, > .jugarfila > button, > .modosfila > button):active:not(:disabled) { transform: translateY(1px); }
@media (forced-colors:active) {
  :root { --ep-dialog-line: CanvasText; --ep-dialog-shadow: none; }
  #menu #homeCamino, .ep-nivel, #menu #tileCofre, #menu .menupanel .misioncard,
  body > .banner > .box:is(.ornate,:not(.ornate)), body > .banner .screen-heading {
    background: Canvas !important; border-color: CanvasText !important; color: CanvasText !important; box-shadow: none !important;
  }
  #homeCamino :is(b,span,small), #menu .ep-seccion :is(h2,span) { color: CanvasText !important; }
  .ep-progreso > i { background: Highlight !important; }
}