/* ReyesMoon Games · edición visual mesoamericana / pantallas táctiles */
:root{--gold:#f5d08d;--jade:#50bb9d;--deep:#081a22;--panel:#112b36e8}
.rm-shell{isolation:isolate}
.rm-head{background:linear-gradient(105deg,#071b27ed,#102e3ae7 65%,#102734e7);border-bottom:1px solid #f6d89540;box-shadow:0 8px 30px #030d19a3}
.rm-brand-icon{filter:drop-shadow(0 0 15px #f0c575cc)}.rm-brand small{color:#d6e7dc}
.rm-hero{position:relative;padding:clamp(20px,4vh,48px) 4px clamp(12px,2.8vh,26px)}
.rm-hero:before{content:'◇ ─── ✦ ─── ◇';display:block;color:#e9c57f8f;font-size:13px;letter-spacing:.22em;margin-bottom:14px}
.rm-hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:-.045em;line-height:1.03;text-wrap:balance}
.rm-hero h1 em{font-style:normal;background:linear-gradient(110deg,#ffdc98,#b4d9b2,#f1ca81);background-clip:text;-webkit-background-clip:text;color:transparent}
.rm-hero p{line-height:1.6;max-width:710px}
.rm-catalog{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;gap:clamp(12px,1.8vw,24px);margin:10px auto 24px}
.rm-tile{padding:13px;border:1px solid #f7d59b49;border-radius:21px;box-shadow:0 13px 35px #020b13a8;gap:1px;min-height:270px;transition:transform .22s ease,box-shadow .22s ease}
.rm-tile:hover,.rm-tile:focus-visible{transform:translateY(-5px);box-shadow:0 20px 48px #020913dd,0 0 0 1px #f2ce9c99}
.rm-tile-preview{height:clamp(130px,19vw,210px);border-radius:15px;background:radial-gradient(ellipse at 35% 23%,#4e7b78 0%,#1b4551 45%,#0b293a 100%);isolation:isolate;border:1px solid #f2d7a42b;box-shadow:inset 0 1px 30px #0005;margin-bottom:12px}
.rm-tile-preview::before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 70% 30%,#f4c78a23,transparent 42%),repeating-linear-gradient(60deg,transparent 0 20px,#ffffff06 21px 22px,transparent 23px 48px)}
.rm-tile-preview:after{border:1px solid #f3d69d51;width:52%;border-radius:10%;transform:rotate(45deg)}
.rm-tile-preview>span{font-size:clamp(48px,7.5vw,100px);line-height:1.3;text-align:center;white-space:nowrap;filter:drop-shadow(0 9px 8px #0008);z-index:1}
.rm-tile-preview>i{position:absolute;font-size:14px;font-style:normal;bottom:10px;right:14px;color:#f5dfad;opacity:.8}
.rm-preview-poleana{background:radial-gradient(circle at 42% 24%,#ca914e,#744423 64%,#302521)}
.rm-preview-damas-chinas{background:radial-gradient(circle at 45% 34%,#5375a9,#263e77 66%,#101f43)}
.rm-preview-gato{background:radial-gradient(circle at 45% 25%,#548b88,#1b4849 66%,#102a38)}
.rm-preview-damas-inglesas{background:radial-gradient(circle at 48% 25%,#b58c63,#67422b 68%,#1e2833)}
.rm-preview-cuatro-en-linea{background:radial-gradient(circle at 45% 25%,#5b95b9,#173e73 65%,#131a46)}
.rm-preview-islas-comerciales{background:radial-gradient(circle at 45% 25%,#9da75c,#446649 58%,#183633)}
.rm-tile h2{font-family:Georgia,serif;font-size:clamp(18px,2.1vw,25px);color:#f9e7bd;letter-spacing:-.02em}
.rm-tile p{font-size:clamp(12px,1.1vw,14px);line-height:1.55;color:#d6e6e4}
.rm-tile small{margin-top:auto;background:#ebd09a17;padding:10px 12px;display:block;border-radius:10px;letter-spacing:.1em;color:#ffdc99}
.rm-home-end{margin:5px auto 15px;line-height:1.5}
.rm-main{max-width:1620px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.rm-game-layout{grid-template-columns:minmax(0,1fr) minmax(260px,315px);height:auto;align-items:start;gap:clamp(12px,1.7vw,24px)}
.rm-arena{min-width:0;background:linear-gradient(145deg,#102c36bd,#09222ab8);padding:clamp(12px,1.6vw,24px);border:1px solid #d6b77840;border-radius:24px;box-shadow:0 20px 50px #0005;min-height:calc(100dvh - var(--head-h) - var(--footer-h) - 46px)}
.rm-arena-title{color:#f6e1b8;min-height:36px}
.rm-game-stage{max-width:100%;width:100%;min-height:0;padding:4px 0}
.rm-board{box-shadow:0 18px 50px #020d16c7,0 0 0 4px #f1d49c72;max-width:100%!important;min-width:0!important}
.rm-board.rm-gato,.rm-board.rm-checkers{width:min(calc(100dvh - 190px),100%,850px)}
.rm-board.rm-gato{border-radius:20px;background:linear-gradient(145deg,#bd8d4c,#6e4733);padding:clamp(6px,1vmin,13px);gap:clamp(5px,1vmin,12px)}
.rm-gato .rm-square{border-radius:10px;background:radial-gradient(circle at 30% 20%,#32585e,#13313e 85%);font-family:Georgia,serif;font-size:clamp(46px,11vmin,150px);color:#eec988;transition:background .16s,transform .16s}
.rm-gato .rm-square[data-owner="1"]{color:#80dece;text-shadow:0 3px 13px #206a7788}
.rm-gato .rm-square[data-owner="0"]{text-shadow:0 3px 13px #f3b66a88}
.rm-gato .rm-square:hover:not(:disabled){transform:scale(.97);background:#2e6661}
.rm-board.rm-checkers{border-radius:11px;background:#d9b37e;border:6px solid #b48a5b}
.rm-checkers .rm-square{background:linear-gradient(135deg,#f6e2b2,#d8bd88)}
.rm-checkers .rm-square.rm-dark{background:linear-gradient(135deg,#325e59,#20423e)}
.rm-piece{width:79%;height:79%;border-width:3px;box-shadow:inset 0 5px 8px #fff5,inset 0 -9px 9px #0008,0 7px 7px #0008,0 0 0 1px #f9deb3a8}
.rm-piece.rm-a{background:radial-gradient(circle at 28% 20%,#ffcdbb,#d25156 62%,#76262c)}
.rm-piece.rm-b{background:radial-gradient(circle at 28% 20%,#fff7ce,#d7a858 62%,#7a5321)}
.rm-piece.rm-king:before{content:'♛';color:#fff0ae;text-shadow:0 2px 5px #000c;font-size:1.1em}
.rm-board.rm-four{width:min(calc((100dvh - 200px)*1.1667),100%,980px);border-radius:25px;box-shadow:0 20px 50px #020e25c9,0 0 0 4px #e4c99899;background:linear-gradient(130deg,#185b9c,#2b76a9 35%,#0a3666 85%);border:4px solid #3d9fce}
.rm-four .rm-square{box-shadow:inset 2px 5px 11px #000c,0 1px 4px #e0f4ff84;transition:transform .12s}
.rm-four .rm-square[data-owner="0"],.rm-four .rm-square[data-owner="1"],.rm-four .rm-square[data-owner="2"],.rm-four .rm-square[data-owner="3"]{animation:rm-drop .28s ease-out both}
@keyframes rm-drop{0%{transform:translateY(-50%);opacity:.3}100%{transform:translateY(0);opacity:1}}
.rm-sidebar{border-color:#e0c58d52;background:linear-gradient(160deg,#102c36ec,#0a202eea);max-height:none;overflow:visible;box-shadow:0 20px 50px #0005}
.rm-btn{white-space:normal;overflow-wrap:anywhere;min-width:0;line-height:1.35}
.rm-join{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
.rm-join .rm-btn{max-width:100%}.rm-player{align-items:center;min-width:0}.rm-pill{flex:none}
.rm-dialog{max-height:min(90dvh,750px);overflow-y:auto;padding:clamp(14px,2.5vw,24px)}
.rm-dialog form{gap:14px}.rm-dialog .rm-field{gap:6px}.rm-dialog select,.rm-dialog input{width:100%;max-width:100%}
.rm-rowcheck{line-height:1.4}.rm-rowcheck input{flex:none;width:20px!important}
.rm-footer{z-index:2147483640;min-height:var(--footer-h);font-size:clamp(10px,1.8vw,12px)}
/* Incrustados: reservar espacio real para el botón Volver y los controles de sonido */
html.rm-hosted body{padding-bottom:calc(43px + env(safe-area-inset-bottom,0px))!important}
html.rm-hosted #rm-from-hub{position:fixed;top:calc(7px + env(safe-area-inset-top,0px));left:9px;right:auto;min-height:39px;display:flex;align-items:center;max-width:115px;white-space:nowrap;z-index:2147483645;box-sizing:border-box}
html.rm-hosted #rm-external-tools{position:fixed;right:9px;left:auto;top:calc(7px + env(safe-area-inset-top,0px));z-index:2147483646}
html.rm-hosted .landing-head,html.rm-hosted .game-header{padding-top:62px!important;min-height:112px;height:auto!important}
html.rm-hosted .landing{padding-bottom:64px}
html.rm-hosted #rm-powered{font-weight:750!important;min-height:30px;box-sizing:border-box}
html.rm-hosted .app>header{padding-top:62px!important;min-height:110px!important;box-sizing:border-box}
html.rm-hosted .site-footer{padding-bottom:40px!important}
@media(max-width:1100px){.rm-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}.rm-tile-preview{height:155px}.rm-game-layout{grid-template-columns:minmax(0,1fr) 280px}}
@media(max-width:800px){.rm-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.rm-game-layout{display:flex;flex-direction:column;gap:12px}.rm-arena{order:0;min-height:0;padding:12px;width:100%}.rm-sidebar{order:1;width:100%;max-height:none;overflow:visible}.rm-board.rm-gato,.rm-board.rm-checkers{width:min(calc(100dvh - 175px),min(100%,700px))}.rm-board.rm-four{width:min(calc((100dvh - 180px)*1.1667),min(100%,820px))}.rm-tile{min-height:248px}.rm-game-stage{width:100%}}
@media(max-width:480px){.rm-main{padding:10px 9px 22px}.rm-hero{padding:15px 0}.rm-hero h1{font-size:clamp(29px,8vw,38px)}.rm-hero p{font-size:13px}.rm-catalog{gap:10px}.rm-tile{min-height:212px;padding:9px;border-radius:15px}.rm-tile-preview{height:clamp(84px,25vw,136px);margin-bottom:8px}.rm-tile-preview>span{font-size:clamp(36px,13vw,60px)}.rm-tile h2{font-size:clamp(15px,4.4vw,20px)}.rm-tile p{font-size:11px;margin-bottom:7px}.rm-tile small{font-size:10px;padding:8px}.rm-brand strong{font-size:clamp(14px,4vw,17px)}.rm-brand small{font-size:7px;letter-spacing:.12em}.rm-head{padding:8px}.rm-icon-btn{width:37px;height:37px;flex:none}.rm-arena{padding:10px;border-radius:15px}.rm-board.rm-gato,.rm-board.rm-checkers{width:min(calc(100dvh - 205px),100%)}.rm-board.rm-four{width:min(calc((100dvh - 210px)*1.1667),100%)}.rm-sidebar{padding:12px}.rm-sidebar .rm-button-stack{display:grid;grid-template-columns:1fr}.rm-sidebar .rm-button-stack .rm-btn{width:100%}.rm-arena-title{font-size:14px}.rm-chip{font-size:10px}}
@media(max-width:350px){.rm-catalog{grid-template-columns:1fr}.rm-tile{min-height:0}.rm-tile-preview{height:125px}.rm-hero h1{font-size:28px}.rm-brand-icon{font-size:19px}.rm-brand strong{font-size:12px}.rm-brand small{font-size:6px}.rm-icon-btn{width:33px;height:33px}}
@media(prefers-reduced-motion:reduce){.rm-tile,.rm-four .rm-square{animation:none!important;transition:none!important}}

/* Footer siempre visible sin tapar botones: el contenido scrollea en su propio panel.
   A diferencia de position:fixed superpuesto, el pie ocupa espacio real. */
html:not(.rm-hosted) body{height:100dvh;overflow:hidden}
html:not(.rm-hosted) .rm-shell{height:100dvh;min-height:0;padding-bottom:0;overflow:hidden}
html:not(.rm-hosted) .rm-shell>.rm-head{flex:0 0 auto}
html:not(.rm-hosted) .rm-shell>.rm-main{flex:1 1 0;min-height:0;margin:0 auto;overflow-x:hidden;overflow-y:auto;scroll-padding-bottom:24px;overscroll-behavior:contain}
html:not(.rm-hosted) .rm-shell>.rm-footer{position:relative;flex:0 0 auto;left:auto;right:auto;bottom:auto;width:100%;pointer-events:none}
/* Evitar que los paneles de juego se aplasten al desplazarse dentro de main. */
html:not(.rm-hosted) .rm-main>*{flex-shrink:0}