/* La interfaz comparte tipografía, foco y contraste. Cada mesa conserva sus colores. */
:root{--mesa:#85d8c3;--metal:#e6c792;--sombra:#102027;--papel:#fff3d9}
[data-juego="damas-inglesas"]{--mesa:#e8ab86}
[data-juego="cuatro-en-linea"]{--mesa:#98c3ff}
[data-juego="trivia-tlapalera"]{--mesa:#cfb5fb}
[data-juego="conquista-azteca"]{--mesa:#f0cf92}
[data-juego="solitaria-mexicana"]{--mesa:#9ae6ae}
[data-juego="diableros-del-abasto"]{--mesa:#ffb492}
[data-juego="damas-chinas"]{--mesa:#dfa9e6}
[data-juego="poleana"]{--mesa:#e79664}
[data-juego] :is(a,button,input,select):focus-visible{outline:3px solid #ffc978;outline-offset:2px}
.rm-shell .rm-main{scrollbar-gutter:stable}
.rm-library-title{padding:clamp(16px,3vw,36px) 0 8px;text-align:left}
.rm-library-title h1{font:600 clamp(34px,5vw,66px)/1.06 Georgia,serif;color:var(--papel);letter-spacing:-.045em;margin:0}
.rm-filters{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 18px}
.rm-filters button{font:650 14px system-ui;padding:8px 15px;min-height:42px;color:#d7e8e1;background:#142c35;border:1px solid #4a6869;border-radius:50px;cursor:pointer}
.rm-filters button[aria-pressed=true]{color:#142c2a;background:#e3d1a4;border-color:#e3d1a4}
.rm-catalog .rm-tile{padding:0;display:flex;flex-direction:column;align-items:stretch;text-align:left;border:1px solid #789b8e65;border-radius:14px;overflow:hidden;min-height:0;background:linear-gradient(155deg,#1c363e,#112731);box-shadow:0 6px 16px #030e162b}
.rm-tile .rm-tile-preview{margin:0;width:100%;height:auto;aspect-ratio:32/15;border:0;border-radius:0;box-shadow:none}
.rm-tile-preview img,.rm-game-cover{display:block;width:100%;height:auto;object-fit:cover}
.rm-game-cover{border:1px solid #e9d3a24d;border-radius:14px}
.rm-catalog .rm-tile h2{font:600 clamp(17px,2vw,27px)/1.13 Georgia,serif;margin:14px 14px 6px;color:#fff3d8}
.rm-catalog .rm-tile p{margin:0 14px 14px;color:#c7d8d7;font-size:clamp(12px,1.1vw,15px);line-height:1.4}
.rm-catalog .rm-tile small{display:flex;justify-content:space-between;margin:auto 14px 0;padding:10px 0;background:none;border:0;border-top:1px solid #8faaa744;border-radius:0;color:#a9e9d9;font:650 13px system-ui}
.rm-catalog .rm-tile small span{font-size:17px}
.rm-arena,.rm-sidebar,.ra-card{border-radius:16px;border-color:#8ca8a45c}
.rm-arena-title{border-bottom:1px solid #b3d2c82c;padding-bottom:7px}
.rm-arena-title>span:first-child,.ra-card h2{color:var(--mesa)}
.rm-arena-title>span:first-child{font-family:Georgia,serif}
.rm-pill,.ra-score-num,.ra-timer{font-variant-numeric:tabular-nums}
.rm-board.rm-gato{grid-template:repeat(3,minmax(0,1fr))/repeat(3,minmax(0,1fr));aspect-ratio:1;box-sizing:border-box;background:#142f33;gap:clamp(3px,.7vmin,8px);padding:clamp(6px,1.3vmin,13px);border:2px solid #c5a06e}
.rm-gato .rm-square,.rm-gato .rm-square:hover:not(:disabled){margin:0;border:1px solid #65878066;transform:none;line-height:1;overflow:hidden;background:linear-gradient(150deg,#30595b,#203f44);border-radius:9%}
.rm-gato .rm-square:hover:not(:disabled){background:#3c6562;border-color:#8ad7bf}
.rm-gato .rm-square[data-last=true]{border-color:#dcb97b}
.rm-gato .rm-square[data-winning=true]{background:#386853;box-shadow:inset 0 0 0 3px #f6d58e}
.rm-mark{display:block;width:56%;aspect-ratio:1;position:relative;pointer-events:none}
.rm-mark-X:before,.rm-mark-X:after{content:'';position:absolute;left:44%;top:-5%;height:110%;width:12%;border-radius:8px;background:linear-gradient(#ffe6a8,#d9a858);transform:rotate(45deg)}
.rm-mark-X:after{transform:rotate(-45deg)}
.rm-mark-O{border-radius:50%;background:radial-gradient(circle closest-side,transparent 71%,#8ae1cd 73%,#58bca7 98%,transparent 100%)}
.rm-gato [data-last=true] .rm-mark{animation:ficha-aparece .2s ease-out}
@keyframes ficha-aparece{from{opacity:.4;scale:.84}to{opacity:1;scale:1}}
.rm-game-layout .rm-board.rm-four{background:linear-gradient(145deg,#345982,#183353);border-color:#92b2d2}
.rm-four .rm-square[data-owner]{animation:none}
.rm-four .rm-square.rm-last-drop{animation:rm-drop .24s ease-out}
.rm-checkers .rm-square.rm-target:after{background:#a6ffb6;outline:2px solid #233d38}
.rm-checkers .rm-square.rm-selected{box-shadow:inset 0 0 0 3px #ffdf84}
.rm-trivia-board .rm-trivia-option b{background:#d7bfe9;color:#302341}
.rm-trivia-board .rm-trivia-question{font-family:Georgia,serif;line-height:1.16}
.ra-header{border-bottom:2px solid var(--mesa)}
.ra-stage{border-color:var(--mesa)}
.ra-stage-label,.ra-home em{color:var(--mesa)}
.ra-sidebar .ra-score{border-radius:6px;padding:9px 10px;background:#172f39}
.ra-score-num{color:#fff2cb;font-size:20px}
.ra-card .ra-button.ra-gold{background:var(--mesa);color:#17282b;border-color:transparent}
[data-juego="conquista-azteca"] .ra-card{background:linear-gradient(145deg,#353e37,#172c32)}
[data-juego="solitaria-mexicana"] .ra-card{background:linear-gradient(145deg,#214638,#142e32)}
[data-juego="diableros-del-abasto"] .ra-card{background:linear-gradient(145deg,#4e3935,#24313a)}
[data-juego="islas-comerciales"] .turn-banner{background:linear-gradient(115deg,#123d38,#28564a);border-bottom:2px solid #d9b67e}
[data-juego="islas-comerciales"] .maya-stock .resource{background:linear-gradient(140deg,#294b43,#173d3b);border:1px solid #75998475;border-radius:8px}
[data-juego="islas-comerciales"] .action-bar{gap:8px;flex-wrap:wrap}
[data-juego="damas-chinas"] .game-heading,[data-juego="damas-chinas"] .side-title{border-bottom:1px solid #bd97bc66;padding-bottom:9px}
[data-juego="damas-chinas"] .board-panel.panel{border:1px solid #cba1cf88;box-shadow:0 12px 32px #120e2090}
[data-juego="poleana"] .board-heading{border-bottom:2px solid #b77647}
[data-juego="poleana"] .winner{border:2px solid #b97d43;border-radius:14px}
[data-juego="poleana"] .room-code{font-variant-numeric:tabular-nums;letter-spacing:.08em}
@media(max-width:410px){.rm-filters button{padding-inline:12px}.rm-catalog .rm-tile h2{margin:10px 9px 5px}.rm-catalog .rm-tile p,.rm-catalog .rm-tile small{margin-inline:9px}}
@media(prefers-reduced-motion:reduce){.rm-gato [data-last=true] .rm-mark,.rm-four .rm-square.rm-last-drop{animation:none}}
[data-juego="damas-chinas"] .entry-panel,[data-juego="damas-chinas"] .room-header.panel{background:linear-gradient(135deg,#302838ec,#162d34ed);border-color:#977d997a}
[data-juego="damas-chinas"] .roster-player.current{background:#573f5588;border-left:4px solid #e4b2db}
[data-juego="poleana"] .card.welcome:before{content:"";display:block;aspect-ratio:4.5;background:#813f30 url('/portadas/poleana.webp') center/cover;border-radius:9px;margin-bottom:12px}
[data-juego="poleana"] .room .turn-panel{border-left:4px solid #a06c43;padding-left:10px}
[data-juego="islas-comerciales"] .player-item.is-current{border-left:4px solid #f0c881;background:#254d41}
[data-juego="islas-comerciales"] .maya-stock .res-count{font:700 clamp(16px,2vw,22px)/1.1 Georgia,serif;color:#ffedc0}
.rm-trivia-meta{align-items:center;flex-wrap:wrap}
.rm-trivia-meter{height:5px;width:100%;display:block;accent-color:#c6a4e2}
.ra-score-num small{font:600 10px system-ui;display:block;text-align:right;color:#bed2d1}
[data-juego="islas-comerciales"] .build-row{display:grid;grid-template-columns:auto 1fr;gap:3px 6px}
.build-cost{text-align:right}
.maya-build-hint{grid-column:1/-1;color:#d5c8ac;font:12px/1.4 system-ui}
.maya-build-hint[data-ready="true"]{color:#a2e4ba}
.rm-library-title,.rm-filters{width:min(100%,1180px);margin-inline:auto}
.rm-tile small span[aria-hidden]{display:block;width:8px;height:8px;align-self:center;margin-right:3px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);font-size:0}
.rm-ai-label{display:grid;gap:.4rem;margin:10px 0 14px;font:650 14px/1.3 system-ui}
.rm-ai-label select,#maya-table{display:block;width:100%;min-height:44px;padding:8px 12px;color:#fff1d2;background:#163843;border:1px solid #75958e;border-radius:10px;font:inherit}
.rm-family-button{pointer-events:auto!important;cursor:pointer;color:inherit!important;font:inherit!important;letter-spacing:inherit;background:transparent!important;border:0!important;padding:1px 8px!important;min-height:0!important}
.rm-family{max-width:min(410px,90vw);box-sizing:border-box;padding:clamp(18px,4vw,32px);border:1px solid #bba67b;border-radius:18px;color:#fff3dd;background:#183d3a;box-shadow:0 18px 80px #001c}
.rm-family::backdrop{background:#061c24b8}
.rm-family h2{font:500 38px/1.05 Georgia,serif;margin:10px 0 16px;color:#ffe2a0}
.rm-family p{font:16px/1.5 system-ui;color:#f4edde}.rm-family .rm-family-team{font:650 13px/1.3 system-ui;color:#a9ddce}
.rm-family form>button,.rm-voice-demo{border-radius:9px;padding:9px 14px;min-height:40px;color:#142e2f;background:#f2d69c;border:0;cursor:pointer}

/* La leyenda flota sin recalcular las dimensiones de la mesa. */
html body #rm-carrilla,html.rm-hosted body #rm-carrilla{position:fixed;inset:auto auto calc(36px + env(safe-area-inset-bottom)) 50%;transform:translateX(-50%);margin:0;width:max-content;max-width:min(90vw,540px);pointer-events:none}
.rm-gato .rm-mark{filter:drop-shadow(0 2px 1px #091f24aa)}
.rm-board.rm-four .rm-last-drop{outline:2px solid #ffe9ad;outline-offset:-4px}
.rm-checkers .rm-piece{border:2px solid #f9e1a780;box-shadow:inset 0 2px 2px #fff6,inset 0 -4px 3px #0006,0 2px 3px #0007}
.rm-checkers .rm-piece:not(.rm-king):before{content:"";position:absolute;inset:12%;border-radius:50%;border:1px dashed #ffe7c488}
.rm-trivia-feedback.is-correct{border-inline-start:4px solid #80dcad}
.rm-trivia-feedback.is-wrong{border-inline-start:4px solid #e6b76f}
.rm-trivia-option:focus-visible,.rm-square:focus-visible{outline:3px solid #fff2b8;outline-offset:-3px}
[data-juego="damas-chinas"] #board{filter:drop-shadow(0 3px 3px #09222266)}
[data-juego="islas-comerciales"] .maya-stock .resource{border-top:2px solid #c2aa72}
[data-juego="poleana"] .turn-panel{border-radius:8px;background:linear-gradient(115deg,#ecbd701c,transparent)}
html.rm-hosted{overflow:hidden}
html.rm-hosted body{position:fixed;inset:0 0 calc(30px + env(safe-area-inset-bottom)) 0;height:auto!important;min-height:0!important;max-height:none!important;overflow-y:auto}
.rm-checkers .rm-piece{position:relative}
html.rm-hosted body{top:calc(51px + env(safe-area-inset-top))}
html.rm-hosted .app>header,html.rm-hosted .landing-head,html.rm-hosted .game-header{padding-top:10px!important;min-height:54px!important}
html.rm-hosted .topbar{padding-top:8px}