/* Una voz discreta en cada etapa. Los adornos no reciben eventos ni desplazan controles. */
body .app-header{position:relative}
body:not(.salon-lobby) .app-header::after{
 content:"Compartir mesa, crear recuerdos ♡";
 position:absolute;left:53%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);
 max-width:225px;text-align:center;font:italic 20px/1.35 Georgia,serif;color:#985774;pointer-events:none;
}
body:has(#rooms:not([hidden])) .app-header::after{content:"Tu próxima buena compañía está aquí ♡"}
body.in-game .app-header::after{content:"Que los dados traigan buenos momentos ♡"}
/* Segunda rama de acceso y catálogo, tenue y fuera del contenido. */
body:not(.in-salon):not(.in-game){position:relative;isolation:isolate}
body:not(.in-salon):not(.in-game)::after{
 content:"";position:fixed;right:-62px;bottom:-32px;width:150px;height:390px;
 background:url('assets/salon-botanico.svg') center/contain no-repeat;
 transform:scaleX(-1);opacity:.32;pointer-events:none;z-index:-1;
}
/* En partida las hojas quedan en el borde de la cabecera, nunca sobre casillas. */
body.in-game .app-header{
 background-image:url('assets/salon-botanico.svg'),linear-gradient(100deg,#f8e5eaaa,#e9bbd1aa);
 background-size:85px 220px,cover;background-repeat:no-repeat;background-position:70% 38%,center;
}
/* Las modales reciben hojas tenues solo en la franja de título. */
body dialog.app-options .game-menu-heading,body dialog.game-dialog>header{
 background-image:linear-gradient(90deg,#f9e6ea 15%,#f9e6ea99 65%,#f3d8e3d9),url('assets/salon-botanico.svg');
 background-size:cover,76px 190px;background-position:center,right 60px center;background-repeat:no-repeat;
}
.app-options .panel-motto{margin:0 0 3px;padding:1px 8px 8px;text-align:center;font:italic 19px/1.4 Georgia,serif;color:#995775}
@media(max-width:1300px){body:not(.salon-lobby) .app-header::after{max-width:190px;font-size:17px}}
/* En pantallas pequeñas el espacio pertenece al juego y la conversación. */
@media(max-width:1150px){
 body:not(.salon-lobby) .app-header::after,body:not(.in-salon):not(.in-game)::after{display:none}
 body.in-game .app-header{background-image:linear-gradient(100deg,#f8e5eaaa,#e9bbd1aa);background-size:cover;background-position:center}
}
@media(max-width:600px){.app-options .panel-motto{font-size:16px;padding-bottom:3px}}
@media(max-height:500px) and (orientation:landscape){body .app-header::after,.app-options .panel-motto{display:none}}

/* Lema permanente como imagen de fondo: no ocupa espacio ni altera el scroll. */
.salon-lobby #chat-log{
 background-color:#fffafa;
 background-image:url('assets/chat-amistades.svg');
 background-position:center;background-size:min(90%,320px) auto;background-repeat:no-repeat;
}

/* Los mensajes propios dejan visible el lema permanente del fondo del chat. */
body.salon-lobby #chat-log .chat-line.mine{background:transparent}

/* Partida: hojas en el contenedor exterior, siempre detrás del tablero. */
.in-game .board-space{position:relative;isolation:isolate}
.in-game .board-space::before,.in-game .board-space::after{
 content:"";position:absolute;pointer-events:none;z-index:-1;
 width:95px;height:240px;opacity:.28;
 background:url('assets/salon-botanico.svg') center/contain no-repeat;
 left:0;bottom:12px;transform:rotate(-12deg);
}
.in-game .board-space::after{left:auto;right:0;bottom:auto;top:12px;transform:rotate(165deg);opacity:.22}
/* El lema solo aparece si hay margen lateral real alrededor del tablero cuadrado. */
@container (min-width: 850px) and (min-aspect-ratio: 1.65/1){
 .in-game .play-board::after{
  content:"Cada tirada,\a un buen momento ♡";
  position:absolute;left:calc(100% + 22px);bottom:12%;width:115px;
  font:italic 19px/1.5 'Segoe Print','Segoe Script',cursive;
  white-space:pre-line;text-align:center;color:#a25f80;opacity:.7;
  transform:rotate(-8deg);pointer-events:none;
 }
}
@media(max-width:760px),(max-height:500px){
 .in-game .board-space::before,.in-game .board-space::after,.in-game .play-board::after{display:none}
}

/* Registro y conversación comparten superficie clara; el registro conserva colores del servidor. */
body.in-game .game-chat-page>.game-log{background:#fffafa;color:#493441}
body.in-game .game-chat-page>.game-log .board-notice{background:#fae9f0;color:#743955;border-color:#e8bdcf;box-shadow:0 3px 10px #9b577520}
/* Lema permanente detrás del chat, sin intervenir en el contenido ni su desplazamiento. */
body.in-game .game-chat-log{
 background-color:#fffafa;background-image:url('assets/chat-partida.svg');
 background-position:center;background-size:min(90%,320px) auto;background-repeat:no-repeat;
}
body.in-game .game-chat-log .chat-line.mine{background:transparent}