/* Mesas de salón: tablero original, casas centradas y controles de Titanium. */
.table-card{background:radial-gradient(ellipse at 100% 0,#a66d9633,transparent 70%),linear-gradient(140deg,#294b60,#30394f);border:1px solid #e2be8270;border-radius:16px;padding:12px 13px 10px;box-shadow:0 7px 18px #12263c35;color:#fff}
.table-card.own-table{border-color:#efcd8a;box-shadow:0 0 0 1px #efcd8a70,0 8px 22px #14283a40}
.table-card header strong{color:#ffe0a7;font-size:14px;letter-spacing:.2px}.table-card header small{color:#d9d3e0;font-size:11px}
.table-card .mini-board{position:relative;width:min(200px,100%);height:auto;aspect-ratio:1;margin:12px auto;border-radius:4px;box-shadow:0 3px 12px #05162455;isolation:isolate}
.table-card .classic-table{width:100%;height:100%;border-radius:4px;object-fit:fill}
.table-card .seat{position:absolute;display:flex;width:30%;height:30%;min-width:0;min-height:0;inset:auto;transform:translate(-50%,-50%);padding:0;gap:0;justify-content:center;align-items:center;z-index:2;border-radius:12%;cursor:pointer;background:transparent}
.table-card .seat-3{left:20%;top:20%}.table-card .seat-2{left:80%;top:20%}.table-card .seat-4{left:20%;top:80%}.table-card .seat-1{left:80%;top:80%}
.table-card .seat .avatar{display:block;width:80%;height:80%;border-radius:18%;border:1px solid #fff9;object-fit:cover;box-shadow:0 2px 6px #10162866;font-size:14px;text-align:center}
.table-card .seat.empty-seat .avatar{width:80%;height:80%;background:transparent;box-shadow:none;border:0;border-radius:0}
.table-card .seat .nick{position:absolute;top:90%;left:50%;transform:translateX(-50%);max-width:118%;padding:2px 4px;font-size:10px;line-height:1.1;white-space:nowrap;border-radius:3px;background:#182d43f2;color:#fff;box-shadow:0 1px 3px #0005}
.table-card .seat.sheriff .nick{background:#bd8628;color:white}.table-card .seat.sheriff .avatar{border-color:#ffe5a7}
.table-card .table-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #fff2;padding-top:8px;color:#e9d7df;min-height:42px}
.table-icons{display:flex;align-items:center;gap:9px}.table-icons img{width:44px;height:34px;object-fit:contain;filter:drop-shadow(0 1px 1px #0003)}.table-card .table-price{color:#ffe0a7;font-size:12px;font-weight:650;white-space:nowrap}
.table-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20%;height:20%;padding:3px;border-radius:50%;border:1px solid #fbe5b1;background:#243c50eb;box-shadow:0 0 0 3px #fff4,0 3px 8px #0007;z-index:5;display:grid;place-items:center}
.table-start img{width:100%;height:100%;object-fit:contain}.table-start:hover{background:#375471;border-color:#fff0c9}.table-start:focus-visible{outline-offset:4px}.table-start:disabled{opacity:.65}
.table-rolling{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:23%;height:23%;object-fit:contain;z-index:4;pointer-events:none}
@media(max-width:760px){.table-card{padding:10px 9px 8px}.table-card .mini-board{width:min(190px,100%);margin:9px auto}.table-card .seat .nick{font-size:9px}.table-icons{gap:5px}.table-icons img{width:34px;height:29px}.table-card header strong{font-size:13px}}
@media(max-height:500px) and (orientation:landscape){.table-card .mini-board{width:140px;margin:7px auto}.table-card{padding:8px}.table-card .seat .nick{font-size:8px}.table-card .table-meta{padding-top:5px;min-height:30px}.table-icons img{width:25px;height:23px}}

/* Solo se superpone la zona restaurada: fuera de ella la imagen original permanece intacta. */
.table-card .board-repair{position:absolute;inset:0;width:100%;height:100%;clip-path:polygon(0 92%,46% 92%,46% 100%,0 100%);pointer-events:none}


/* Salon: ciruela, rosa empolvado y champagne, conservando los colores del tablero. */
body.in-salon{background:radial-gradient(ellipse at 95% 0,#d5a4b65c,transparent 52%),radial-gradient(ellipse at 0 100%,#8b839944,transparent 55%),linear-gradient(135deg,#423647,#665064 65%,#846477)}
.in-salon .app-header{background:#32293880;border-bottom-color:#e9c9bc35}
.in-salon .salon-heading h1{color:#fff0e6}.in-salon .salon-heading>div{color:#f0dce3}
.in-salon .table-card{background:linear-gradient(145deg,#685062,#493e53);border-color:#e5c4af70;box-shadow:0 5px 15px #241c2b35}
.in-salon .table-card.own-table{border-color:#f8da9e;box-shadow:0 0 0 2px #e9bd7844,0 7px 18px #241c2b40}
.in-salon .table-card header strong{color:#ffe5cd}.in-salon .table-card header small{color:#eddae4}
.in-salon .conversation-page,.in-salon .players-page{background:#fffcfd;border:1px solid #dfc3d1;box-shadow:0 8px 22px #241c2b26}
.in-salon .pane-heading{background:linear-gradient(110deg,#f2e2e9,#fbf2ec);border-color:#e5d1dc;color:#5c3e58}
.in-salon .composer{background:#f5eaf0;border-color:#e1cad6}.in-salon .composer .send{background:#77506d;border-color:#b994ab;color:white}
.in-salon .mobile-tabs{background:#382d40;border-top:1px solid #d6b6c34d}.in-salon .mobile-tabs button{color:#eadbe5}.in-salon .mobile-tabs [aria-selected=true]{background:#806079;color:#fff}
.table-search{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:0 12px;background:#fffbfd;border:1px solid #dbc3d2;border-radius:12px;color:#88647d;box-shadow:0 3px 12px #30243318}.table-search svg{width:19px;height:19px;flex-shrink:0}.table-search input{width:100%;padding:10px 0;border:0;background:transparent;border-radius:0;font-size:13px;color:#493747}.table-search input::placeholder{color:#8a7485}
.chat-log .chat-line{display:flex;align-items:flex-start;gap:9px;margin:0 0 9px;padding:3px 0;font-size:var(--chat-size);line-height:1.25;text-align:left}
.chat-log .chat-line>.avatar{width:32px;height:32px;border-radius:8px;flex:0 0 32px;object-fit:cover;margin-top:2px}
.chat-log .chat-copy{min-width:0;flex:1}.chat-log .chat-author{display:block;margin:0 0 2px;color:#704964;font-size:max(12px,.85em);font-weight:650;line-height:1.2;overflow-wrap:anywhere}
.chat-log .chat-text{color:#35313c;white-space:pre-wrap;overflow-wrap:anywhere}.chat-log .chat-line.mine{background:#f3eaf0;padding:7px;border-radius:10px;margin-left:12px}
.chat-log .chat-line.system{display:block;color:#7a707c;font-size:.86em;padding:3px 0}
@media(max-width:760px){.table-search{margin:8px 0 10px}.in-salon .conversation-page,.in-salon .players-page{border-radius:0}}
@media(max-height:500px) and (orientation:landscape){.table-search{margin-bottom:6px}.table-search input{padding:6px 0}.chat-log .chat-line{margin-bottom:6px}}

.chat-log .chat-text{font-family:'Segoe UI',Arial,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}


/* El centro de cada casa pertenece al avatar, no al conjunto avatar + textos. */
.play-board .board-player{display:block}
.play-board .board-player>.avatar{position:absolute;left:24%;top:24%;width:52%;height:52%;margin:0}
.play-board .board-player>strong{position:absolute;top:78%;left:0;width:100%;max-width:100%;margin:0}
.play-board .board-player .speech-bubble,.play-board .board-player[data-seat] .speech-bubble{position:absolute;top:78%;left:0;bottom:auto;max-height:22%;height:auto;margin:0;z-index:3}
.play-board .board-player:has(.speech-bubble)>strong{visibility:hidden}
.player-level{position:absolute;left:23%;top:24%;width:14%;height:14%;border:1px solid white;border-radius:50%;box-shadow:0 1px 4px #0006;z-index:4;pointer-events:auto;cursor:pointer}
/* Mascota sobre el formulario, apoyada sin margen y centrada en todos los anchos. */
.login-stack{min-width:0;display:flex;flex-direction:column;align-items:center;width:100%}
.login-illustration>.hero-mascot{position:static;display:block;width:190px;height:auto;max-width:52%;object-fit:contain;filter:drop-shadow(0 6px 10px #30203722);margin:0 auto;flex-shrink:0}
.login-stack>.login-card{width:100%;margin:0;flex-shrink:0}
@media(max-width:760px){.login-illustration>.hero-mascot{width:145px}.login-stack{margin-top:12px}}
@media(max-height:500px) and (orientation:landscape){.login-illustration>.hero-mascot{width:110px}}

/* Buscador compacto: conserva el foco visible sin reservar una fila alta. */
.table-search{margin:0 0 6px;padding:0 9px;gap:7px;border-radius:8px;box-shadow:none}.table-search svg{width:16px;height:16px}.table-search input{padding:5px 0;font-size:12px;line-height:18px}
@media(max-width:760px){.table-search{margin:3px 0 6px}}
@media(max-height:500px) and (orientation:landscape){.table-search{margin:0 0 4px}.table-search input{padding:3px 0}}

/* Dados un 10% mayores, conservando el centro y el punto de llegada del vuelo. */
.play-board .game-dice{transform:scale(1.1);transform-origin:center}.play-board .flying-die{width:8.8%;height:8.8%;margin-left:-.4%;margin-top:-.4%}

/* El bloque avatar + nick se centra por su altura real, no por una altura estimada. */
.play-board .player-identity{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;display:flex;flex-direction:column;align-items:center;gap:3px}
/* Avatar un 10% menor; el contenedor centra conjuntamente imagen y nick. */
.play-board .player-identity>.avatar{position:static;width:46.8%;height:auto;aspect-ratio:1;margin:0;flex-shrink:0}
.play-board .player-identity>strong{position:static;width:100%;max-width:100%;text-align:center;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-board .player-level{left:25.6%;top:0;width:14%;height:auto;aspect-ratio:1}
.play-board .board-player:has(.speech-bubble) .player-identity>strong{visibility:hidden}
.game-caption{justify-content:flex-start}.game-caption .game-mode-icons{margin-left:auto;flex:0 0 auto}.game-caption .game-clock{margin-left:0;flex:0 0 30px}
body.in-game{background:radial-gradient(ellipse at 20% 0,#38203f 0,transparent 65%),linear-gradient(145deg,#24122e,#120b1b 60%,#050509)}
.in-game .app-header{background:#120b1be6;border-bottom-color:#d6b5c52b}
.play-board .game-dice{inset:0;width:100%;height:100%;transform:none;display:block}
.play-board .game-dice .die,.play-board .game-dice.one-die .die{position:absolute;width:8.8%;height:8.8%}
.play-board .flying-die{width:8.8%;height:8.8%;margin:0;filter:drop-shadow(0 2px 2px #0005);will-change:auto}

/* Tablero y bienvenida comparten fila; el texto ocupa el hueco de la antigua mascota. */
.hero-scene{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:center;gap:24px;margin:28px 0 18px}
.hero-scene .hero-board{width:100%;height:260px;margin:0}
.hero-message{min-width:0}.hero-message h2{font:normal 28px/1.16 Georgia,serif;letter-spacing:-.4px;color:#ffe0a7;margin:0 0 14px}
.welcome .hero-message p{font-size:15px;line-height:1.55;margin:0 0 12px;max-width:none}
.welcome .hero-message .hero-invitation{font-size:13px;color:#ffe9dc;margin-bottom:0}
@media(min-width:761px) and (max-width:1100px){.hero-scene{grid-template-columns:205px minmax(0,1fr);gap:14px}.hero-message h2{font-size:23px}.welcome .hero-message p{font-size:13px}}
@media(max-width:760px){.hero-scene{grid-template-columns:155px minmax(0,1fr);gap:15px;max-width:460px;margin:20px auto 12px}.hero-scene .hero-board{height:180px;max-width:none}.hero-scene .hero-classic-board{left:0;width:140px;height:140px}.hero-scene .hero-dice{left:97px;width:60px;height:60px;bottom:4px}.hero-message h2{font-size:23px;margin-bottom:10px}.welcome .hero-message p{font-size:13px;line-height:1.45}.welcome .hero-message .hero-invitation{font-size:12px}}
@media(max-width:360px){.hero-scene{grid-template-columns:125px minmax(0,1fr);gap:12px}.hero-scene .hero-classic-board{width:115px;height:115px;top:25px}.hero-scene .hero-dice{left:75px;width:52px;height:52px}.hero-message h2{font-size:21px}}

/* En estrecho, tablero y mascota forman una sola ilustración sobre el acceso. */
.login-illustration{display:flex;justify-content:center;align-items:flex-end;width:100%}
@media(max-width:900px){
 .access{display:block;padding:28px 26px}.welcome{min-height:0}
 .hero-scene{display:block;max-width:none;margin:20px 0}.hero-message{max-width:440px}
 .hero-message h2{font-size:25px}.hero-message h2 br{display:none}
 .welcome .hero-message p{font-size:14px}.signature{display:none}
 .login-stack{max-width:575px;margin:24px auto 0}
 .login-illustration{width:min(430px,100%);height:auto;aspect-ratio:2/1;gap:8px;margin-bottom:18px}
 .login-illustration>.hero-board{position:relative;display:block;flex:1;min-width:0;width:auto;max-width:none;height:100%;margin:0}
 .login-illustration .hero-classic-board{width:88%;height:auto;aspect-ratio:1;left:5%;top:5%;border-width:4px}
 .login-illustration .hero-dice{width:32%;height:auto;left:auto;right:0;bottom:5%}
 .login-illustration>.hero-mascot{width:48%;max-width:48%;height:auto;margin:0;flex-shrink:0}
 .login-stack>.login-card{max-width:none}
}
@media(max-width:480px){.access{padding:24px 20px}.login-stack{margin-top:18px}.login-illustration{margin-bottom:12px}.hero-message h2{font-size:23px}}

/* Distribución social: registro opcional y tablero cuadrado limitado por el espacio real. */
.game-view{max-width:none;padding:8px 12px 10px}
.game-pages{grid-template-columns:minmax(0,1fr) clamp(300px,30vw,500px);gap:14px}
.game-board-page{position:relative}
.game-chat-page>.game-log{flex:1;min-height:0;max-height:none;height:auto;margin:0;border:0;border-radius:0;overflow:auto;padding:12px;background:#21172b;color:#f4e9f3}
.game-chat-page>[hidden]{display:none!important}
.game-chat-tabs button{white-space:nowrap}
.game-board-page .board-space{min-height:0}
@media(max-width:900px) and (orientation:portrait){
 .game-view{padding:5px 8px 8px}
 .game-pages{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:min(calc(100vw + 62px),62dvh) minmax(0,1fr);gap:8px;overflow:hidden;scroll-snap-type:none}
 .game-pages>section{width:100%;min-height:0;min-width:0}
 .game-board-page{padding:0;gap:5px}
 .game-board-page .board-space{flex:1;min-height:0}
 .game-caption{min-height:25px}.game-caption strong{font-size:18px}
 .game-mode-icons img{height:24px;width:32px}
 .game-action-bar{min-height:34px;gap:8px}
 .game-action-bar .primary{min-height:32px;padding:5px 12px}
 .game-action-bar .icon-button{width:32px;height:32px;padding:5px}
 .game-action-hint{font-size:11px}
 .game-chat-page{border:1px solid #e3c69655;border-radius:12px;overflow:hidden}
 .game-chat-tabs{padding:4px;gap:4px}.game-chat-tabs button{padding:7px 10px;font-size:12px}
 .game-chat-tabs .return-board{display:none}
 .game-chat-page .composer{padding:5px 7px;flex-shrink:0}
}
@media(max-height:500px) and (orientation:landscape){
 .game-board-page{grid-template-columns:minmax(0,1fr) 130px;grid-template-rows:24px minmax(0,1fr)}
 .game-board-page .board-space{grid-row:2;grid-column:1}
 .game-action-bar{grid-column:2;grid-row:2;align-content:center;justify-content:center}
}

/* En horizontal ancho caben tablero y conversación simultáneamente. */
@media(min-width:680px) and (max-height:500px) and (orientation:landscape){
 .game-pages{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,42%);gap:10px;overflow:hidden;scroll-snap-type:none}
 .game-pages>section{width:100%;min-width:0}
 .game-board-page{display:flex;padding:0;gap:4px}
 .game-board-page .board-space{flex:1;min-height:0}
 .game-action-bar{min-height:30px;flex-wrap:nowrap}
 .game-chat-tabs .return-board{display:none}
 .game-chat-page{border-radius:10px;overflow:hidden}
}
@media(max-width:679px) and (orientation:landscape){.game-pages{gap:0}}

/* Scroll vertical y zoom nativos; el gesto horizontal cambia las pestañas. */
.game-chat-page{touch-action:pan-y pinch-zoom}
@media(max-width:760px){.salon-pages{touch-action:pan-y pinch-zoom}.salon-pages>section{overscroll-behavior-x:auto}}
@media(max-width:679px) and (orientation:landscape){.game-board-page{touch-action:pan-y pinch-zoom}}
@media(min-width:680px) and (max-width:900px) and (min-height:501px) and (orientation:landscape){.game-board-page{touch-action:pan-y pinch-zoom}}

.environment-switch{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:14px 0;border:1px solid #d9b67c;border-radius:10px;background:#fff5df;color:#624469;font-size:13px;cursor:pointer}.login-card .environment-switch input{width:17px;height:17px;margin:0;accent-color:#775787}.environment-switch small{display:block;margin-top:3px;font-size:11px;color:#786777}