/* ============================================================
   Reversi — mesa, tableros y fichas (templates/play_reversi.html,
   reversi_hub.html). GENERADO: se edita tools/reversi.src.css y se
   construye con tools/reversi_css.py. Sin imágenes: las texturas (vetas de nogal, mármol,
   jade, grano) son ruido SVG en línea (feTurbulence).

   Cuatro tableros, todos con las mismas variables:
     --rv-room     ambiente de la mesa (fondo de la sala)
     --rv-frame    marco del tablero  · --rv-frame-sh  su relieve
     --rv-surface  superficie de juego · --rv-cell-a/-b casillas alternas
     --rv-line     líneas de la cuadrícula · --rv-line-glow su brillo
     --rv-b-face / --rv-w-face  caras de las fichas · --rv-*-rim su canto
     --rv-hint     marca de jugada válida · --rv-accent detalles
     --rv-block    casilla bloqueada (Reversi Extremo)
   El tablero activo va en data-skin de #rv (static/js/reversi.js); las
   vistas previas del selector llevan su propio data-skin.
   ============================================================ */

.rv-shell, [data-rv-skin] {
  --rv-ink: #F4EBDD; --rv-ink-2: rgba(244, 235, 221, .72);
  --rv-ease: cubic-bezier(.22, .9, .25, 1);
  --rv-flip-ms: 520ms;
}

/* ---------- Nogal clásico ---------- */
.rv-shell[data-skin="nogal"], [data-rv-skin="nogal"] {
  --rv-room:
    radial-gradient(120% 70% at 22% -10%, rgba(255, 196, 120, .30), transparent 58%),
    radial-gradient(80% 60% at 100% 110%, rgba(120, 60, 20, .35), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.9 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(170deg, #2B1A10 0%, #1A0F09 55%, #0E0805 100%);
  --rv-frame:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.085' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.10  0 0 0 0 0.03  0 0 -1.6 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") center / 340px 340px,
    linear-gradient(160deg, #6B3E22 0%, #4A2614 45%, #351A0D 100%);
  --rv-frame-sh:
    inset 0 2px 0 rgba(255, 214, 160, .28), inset 0 -3px 0 rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(255, 210, 150, .10),
    0 2px 0 #24120A, 0 6px 0 #1A0D06, 0 26px 40px -12px rgba(0, 0, 0, .75), 0 60px 80px -40px rgba(0, 0, 0, .8);
  --rv-surface:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.085' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.10  0 0 0 0 0.03  0 0 -1.6 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 260px 260px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.6' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.07  0 0 0 0 0.02  0 0 -1.2 0 0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    linear-gradient(135deg, #9A6539 0%, #7D4B26 50%, #6A3C1D 100%);
  --rv-cell-a: rgba(255, 220, 170, .07);
  --rv-cell-b: rgba(40, 18, 6, .16);
  --rv-line: rgba(30, 14, 5, .70);
  --rv-line-glow: 0 1px 0 rgba(255, 210, 150, .16);
  --rv-inlay: rgba(212, 170, 100, .55);
  --rv-b-face: radial-gradient(circle at 50% 46%, #6A6461 0%, #2A2725 30%, #121110 62%, #050505 100%);
  --rv-w-face: radial-gradient(circle at 50% 46%, #FFFFFF 0%, #FBF6EC 32%, #EDE3D0 70%, #D8CAB0 100%);
  --rv-b-rim: #000; --rv-w-rim: #B9A684;
  --rv-hint: rgba(255, 226, 170, .62);
  --rv-accent: #E2B66E;
  --rv-block:
    radial-gradient(circle at 50% 50%, #C99A52 0 9%, #8A6328 10% 13%, transparent 14%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.085' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.10  0 0 0 0 0.03  0 0 -1.6 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 30% 40% / 120px 120px,
    radial-gradient(circle at 50% 45%, #4A2814, #2A150A);
  --rv-coord: rgba(255, 220, 170, .58);
}

/* ---------- Obsidiana y oro ---------- */
.rv-shell[data-skin="obsidiana"], [data-rv-skin="obsidiana"] {
  --rv-room:
    radial-gradient(90% 60% at 50% -12%, rgba(226, 182, 96, .26), transparent 62%),
    radial-gradient(60% 50% at 10% 100%, rgba(120, 90, 40, .18), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.9 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #121010 0%, #070606 100%);
  --rv-frame:
    linear-gradient(135deg, rgba(255, 236, 190, .55) 0%, rgba(201, 158, 74, .2) 18%, transparent 40%, rgba(255, 220, 150, .25) 70%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0045 0.007' numOctaves='5' seed='21'/%3E%3CfeColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.74  0 0 0 0 0.36  -9 0 0 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") center / 480px 480px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='5' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.55  0 0 0 0 0.6  0 0.75 0 0 -0.34'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") center / 420px 420px,
    linear-gradient(160deg, #1D1B1B, #0A0909);
  --rv-frame-sh:
    inset 0 0 0 2px #C9A257, inset 0 0 0 4px #1A1714, inset 0 0 0 5px rgba(232, 196, 120, .55),
    inset 0 2px 1px rgba(255, 240, 200, .35),
    0 2px 0 #000, 0 26px 44px -12px rgba(0, 0, 0, .85), 0 0 60px -20px rgba(226, 182, 96, .35);
  --rv-surface:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0045 0.007' numOctaves='5' seed='21'/%3E%3CfeColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.74  0 0 0 0 0.36  -9 0 0 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 520px 520px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='5' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.55  0 0 0 0 0.6  0 0.75 0 0 -0.34'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 360px 360px,
    radial-gradient(120% 90% at 30% 20%, #262323 0%, #121010 55%, #080707 100%);
  --rv-cell-a: rgba(255, 255, 255, .025);
  --rv-cell-b: rgba(0, 0, 0, .18);
  --rv-line: rgba(214, 172, 90, .78);
  --rv-line-glow: 0 0 6px rgba(232, 190, 100, .35);
  --rv-inlay: #D7B062;
  --rv-b-face: radial-gradient(circle at 50% 46%, #5B5550 0%, #1E1B19 32%, #0A0908 64%, #000 100%);
  --rv-w-face: radial-gradient(circle at 50% 46%, #FFFFFF 0%, #F6F1E8 30%, #E3DACB 68%, #C7BBA6 100%);
  --rv-b-rim: #C9A257; --rv-w-rim: #C9A257;
  --rv-hint: rgba(232, 196, 120, .7);
  --rv-accent: #E6C17A;
  --rv-block:
    linear-gradient(45deg, transparent 46%, #D7B062 46% 54%, transparent 54%) center / 46% 46% no-repeat,
    linear-gradient(-45deg, transparent 46%, #D7B062 46% 54%, transparent 54%) center / 46% 46% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0045 0.007' numOctaves='5' seed='21'/%3E%3CfeColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.74  0 0 0 0 0.36  -9 0 0 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 20% 30% / 200px 200px,
    radial-gradient(circle, #1A1716, #050404);
  --rv-coord: rgba(230, 193, 122, .72);
}

/* ---------- Jade imperial ---------- */
.rv-shell[data-skin="jade"], [data-rv-skin="jade"] {
  --rv-room:
    radial-gradient(90% 60% at 80% -10%, rgba(140, 220, 180, .16), transparent 60%),
    radial-gradient(50% 45% at 8% 92%, rgba(200, 40, 40, .16), transparent 70%),
    repeating-linear-gradient(45deg, rgba(212, 175, 95, .045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 95, .045) 0 1px, transparent 1px 22px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.9 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(170deg, #0D2622 0%, #071715 60%, #040D0C 100%);
  --rv-frame:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.085' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.10  0 0 0 0 0.03  0 0 -1.6 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") center / 300px 300px,
    linear-gradient(160deg, #5A1A14 0%, #3E100C 50%, #2A0907 100%);
  --rv-frame-sh:
    inset 0 0 0 2px #B88D3E, inset 0 0 0 3px rgba(0, 0, 0, .5), inset 0 0 0 5px rgba(212, 170, 90, .35),
    inset 0 2px 0 rgba(255, 200, 160, .25),
    0 2px 0 #1A0503, 0 6px 0 #120302, 0 28px 44px -12px rgba(0, 0, 0, .8), 0 0 70px -24px rgba(110, 220, 170, .35);
  --rv-surface:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.006 0.01' numOctaves='4' seed='14'/%3E%3CfeColorMatrix values='0 0 0 0 0.85  0 0 0 0 1  0 0 0 0 0.9  -7 0 0 0 0.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 420px 420px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='5' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.70  0 0 0 0 0.95  0 0 0 0 0.78  0 1.3 0 0 -0.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 320px 320px,
    radial-gradient(130% 100% at 30% 15%, #4FA582 0%, #2E7D5E 40%, #1B5A42 75%, #124232 100%);
  --rv-cell-a: rgba(220, 255, 235, .05);
  --rv-cell-b: rgba(0, 40, 25, .12);
  --rv-line: rgba(8, 48, 33, .62);
  --rv-line-glow: 0 1px 0 rgba(200, 255, 225, .2);
  --rv-inlay: #D2AA5A;
  --rv-b-face: radial-gradient(circle at 50% 46%, #5D6662 0%, #1F2523 32%, #0B0F0E 64%, #020303 100%);
  --rv-w-face: radial-gradient(circle at 50% 46%, #FFFFFF 0%, #F1F6F1 32%, #DCE8DF 70%, #BCCFC2 100%);
  --rv-b-rim: #000; --rv-w-rim: #93AE9E;
  --rv-hint: rgba(230, 255, 240, .6);
  --rv-accent: #D9B566;
  --rv-block:
    radial-gradient(circle at 50% 50%, transparent 0 22%, #C23B2C 23% 30%, transparent 31%),
    radial-gradient(circle at 50% 50%, #C23B2C 0 11%, transparent 12%),
    radial-gradient(circle at 50% 45%, #6E1810, #3A0905);
  --rv-coord: rgba(217, 181, 102, .7);
}

/* ---------- Neón futurista ---------- */
.rv-shell[data-skin="neon"], [data-rv-skin="neon"] {
  --rv-room:
    radial-gradient(70% 45% at 50% 108%, rgba(170, 70, 255, .45), transparent 70%),
    radial-gradient(60% 40% at 50% -8%, rgba(40, 170, 255, .30), transparent 70%),
    linear-gradient(transparent 62%, rgba(150, 80, 255, .10) 62%),
    repeating-linear-gradient(90deg, rgba(110, 120, 255, .07) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(110, 120, 255, .05) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #080A1E 0%, #05061A 60%, #0B0420 100%);
  --rv-frame: linear-gradient(160deg, #141734 0%, #0B0C22 60%, #090A1B 100%);
  --rv-frame-sh:
    inset 0 0 0 1px rgba(120, 200, 255, .55), inset 0 0 18px rgba(80, 160, 255, .25),
    0 0 0 1px rgba(170, 90, 255, .55), 0 0 22px rgba(120, 90, 255, .55), 0 0 60px -6px rgba(60, 160, 255, .45),
    0 30px 50px -16px rgba(0, 0, 0, .9);
  --rv-surface:
    radial-gradient(90% 70% at 50% 0%, rgba(60, 150, 255, .16), transparent 70%),
    radial-gradient(80% 70% at 50% 100%, rgba(170, 70, 255, .14), transparent 70%),
    linear-gradient(180deg, #0A0E2A 0%, #070921 100%);
  --rv-cell-a: rgba(80, 140, 255, .03);
  --rv-cell-b: rgba(0, 0, 0, .1);
  --rv-line: rgba(90, 190, 255, .85);
  --rv-line-glow: 0 0 6px rgba(70, 170, 255, .85), 0 0 14px rgba(120, 90, 255, .45);
  --rv-inlay: #6FD2FF;
  --rv-b-face: radial-gradient(circle at 50% 46%, #3A3F66 0%, #161A36 36%, #0A0C1E 70%, #04050E 100%);
  --rv-w-face: radial-gradient(circle at 50% 46%, #FFFFFF 0%, #F2EEFF 34%, #DCD3FF 72%, #B9A8FF 100%);
  --rv-b-rim: #39C2FF; --rv-w-rim: #B07CFF;
  --rv-hint: rgba(110, 215, 255, .85);
  --rv-accent: #7FD8FF;
  --rv-block:
    repeating-linear-gradient(45deg, rgba(255, 60, 170, .55) 0 3px, transparent 3px 8px),
    radial-gradient(circle, #1A0A26, #0B0614);
  --rv-coord: rgba(127, 216, 255, .75);
}

/* ============================================================
   La sala
   ============================================================ */
.rv-shell { max-width: 1180px; }
.rv-room {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 10px 0 0; padding: clamp(12px, 2.4vw, 26px) clamp(10px, 2.6vw, 30px) clamp(14px, 2.4vw, 26px);
  border-radius: var(--r-xl, 18px); background: var(--rv-room); color: var(--rv-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 18px 40px -26px rgba(0, 0, 0, .6);
  transition: background .6s ease;
}
/* viñeta: la luz cae sobre la mesa */
.rv-room::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 75% at 50% 46%, transparent 40%, rgba(0, 0, 0, .55) 100%);
}
.rv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: clamp(14px, 2.4vw, 28px); align-items: center; }

/* ---------- jugadores ---------- */
.rv-side { display: flex; flex-direction: column; gap: 12px; }
.rv-players { display: flex; flex-direction: column; gap: 10px; }
.rv-pl {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s var(--rv-ease), opacity .35s ease;
  opacity: .72;
}
.rv-pl.is-turn {
  opacity: 1; border-color: color-mix(in srgb, var(--rv-accent) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px color-mix(in srgb, var(--rv-accent) 30%, transparent), 0 10px 28px -14px color-mix(in srgb, var(--rv-accent) 80%, transparent);
  transform: translateX(-2px);
}
.rv-pl-disc { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, .5); }
.rv-pl[data-c="1"] .rv-pl-disc { background: var(--rv-b-face); box-shadow: 0 0 0 1.5px var(--rv-b-rim), 0 3px 6px rgba(0, 0, 0, .5); }
.rv-pl[data-c="2"] .rv-pl-disc { background: var(--rv-w-face); box-shadow: 0 0 0 1.5px var(--rv-w-rim), 0 3px 6px rgba(0, 0, 0, .5); }
.rv-pl-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rv-pl-name b { font-weight: 600; font-size: .98rem; color: var(--rv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-pl-name small { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rv-ink-2); }
.rv-pl-n { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--rv-ink); min-width: 2ch; text-align: right; }
.rv-pl-n.is-bump { animation: rv-bump .45s var(--rv-ease); }
.rv-think { display: none; gap: 3px; margin-top: 3px; }
.rv-pl.is-thinking .rv-think { display: inline-flex; }
.rv-think i { width: 5px; height: 5px; border-radius: 50%; background: var(--rv-accent); animation: rv-think 1.1s ease-in-out infinite; }
.rv-think i:nth-child(2) { animation-delay: .15s; }
.rv-think i:nth-child(3) { animation-delay: .3s; }
@keyframes rv-think { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes rv-bump { 40% { transform: scale(1.22); } }

/* barra de proporción negras/blancas */
.rv-meter { position: relative; height: 6px; border-radius: 6px; overflow: hidden; background: var(--rv-w-face); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.rv-meter i { position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--rv-b-face); box-shadow: 1px 0 0 var(--rv-accent); transition: width .6s var(--rv-ease); }

.rv-status {
  margin: 0; min-height: 2.6em; font-size: .92rem; line-height: 1.35; color: var(--rv-ink-2);
  display: flex; align-items: center; gap: 8px;
}
.rv-status b { color: var(--rv-ink); font-weight: 600; }
.rv-status .rv-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rv-accent); box-shadow: 0 0 10px var(--rv-accent); }
.rv-side-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font: inherit; font-size: .78rem;
  color: var(--rv-ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.rv-chip:hover { background: rgba(255, 255, 255, .12); border-color: color-mix(in srgb, var(--rv-accent) 50%, transparent); }
.rv-chip:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; }
.rv-chip svg { width: 15px; height: 15px; }
.rv-chip[disabled] { opacity: .4; cursor: default; }
.rv-puzzle-info { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .84rem; line-height: 1.4; color: var(--rv-ink-2); background: rgba(0, 0, 0, .25); border: 1px dashed color-mix(in srgb, var(--rv-accent) 45%, transparent); }
.rv-puzzle-info b { color: var(--rv-accent); }
.rv-puzzle-info[hidden] { display: none; }

/* ============================================================
   El tablero
   ============================================================ */
.rv-table {
  --rv-side: min(100%, 660px, calc(100svh - 290px));
  position: relative; display: grid; place-items: center; perspective: 1700px;
}
.rv-shell[data-n="10"] .rv-table { --rv-side: min(100%, 720px, calc(100svh - 280px)); }
.rv-shell[data-n="6"] .rv-table { --rv-side: min(100%, 580px, calc(100svh - 290px)); }
.rv-frame {
  position: relative; width: max(280px, var(--rv-side)); aspect-ratio: 1; padding: clamp(14px, 3.6%, 30px);
  border-radius: clamp(10px, 2.2%, 20px); background: var(--rv-frame); box-shadow: var(--rv-frame-sh);
  transform-style: preserve-3d; transform: rotateX(var(--rv-tilt, 0deg));
  transition: transform .8s var(--rv-ease), box-shadow .6s ease;
}
@media (min-width: 900px) and (min-height: 760px) {
  .rv-frame { --rv-tilt: 5deg; }
}
/* filete de incrustación alrededor de la superficie */
.rv-frame::before {
  content: ""; position: absolute; inset: calc(clamp(14px, 3.6%, 30px) - 6px); border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--rv-inlay), inset 0 0 0 1px rgba(0, 0, 0, .35);
  opacity: .9;
}
.rv-board {
  --n: 8;
  position: relative; display: grid; width: 100%; height: 100%;
  grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  background: var(--rv-surface); border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 8px 18px -8px rgba(0, 0, 0, .55), inset 0 -2px 8px -2px rgba(255, 255, 255, .06);
  transform-style: preserve-3d;
}
/* brillo de barniz que cruza la superficie */
.rv-board::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(118deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 28%, transparent 46%, rgba(255, 255, 255, .035) 70%, transparent 100%);
  mix-blend-mode: screen;
}
.rv-shell[data-skin="neon"] .rv-board::after { background: linear-gradient(transparent 50%, rgba(120, 180, 255, .03) 50%) 0 0 / 100% 4px; mix-blend-mode: normal; }

.rv-cell {
  position: relative; display: grid; place-items: center; min-width: 0; padding: 0; margin: 0;
  border: 0; border-radius: 0; font: inherit; color: inherit; cursor: default;
  background: var(--rv-cell-a);
  box-shadow: inset -1px -1px 0 var(--rv-line), var(--rv-line-glow);
  -webkit-tap-highlight-color: transparent; transform-style: preserve-3d;
}
.rv-cell.is-alt { background: var(--rv-cell-b); }
.rv-shell[data-skin="neon"] .rv-cell { box-shadow: inset -1px -1px 0 var(--rv-line); }
.rv-shell[data-skin="neon"] .rv-board { box-shadow: inset 0 0 0 1px var(--rv-line), inset 0 0 22px rgba(60, 150, 255, .25); }
.rv-shell[data-skin="neon"] .rv-board::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--n) - 1px), rgba(90, 190, 255, .55) calc(100% / var(--n) - 1px) calc(100% / var(--n))),
    repeating-linear-gradient(0deg, transparent 0 calc(100% / var(--n) - 1px), rgba(90, 190, 255, .55) calc(100% / var(--n) - 1px) calc(100% / var(--n)));
  filter: blur(3px); opacity: .9;
}
/* las cuatro estrellas de referencia del Othello (8×8) y sus equivalentes */
.rv-star { position: absolute; z-index: 2; width: 1.6%; aspect-ratio: 1; border-radius: 50%; background: var(--rv-line); transform: translate(-50%, -50%); pointer-events: none; box-shadow: var(--rv-line-glow); }

.rv-cell.is-legal { cursor: pointer; }
.rv-cell.is-legal::after {
  content: ""; width: 22%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background: var(--rv-hint); box-shadow: 0 0 0 0 transparent; opacity: .55;
  transition: width .18s var(--rv-ease), opacity .18s ease, background .18s ease;
}
.rv-shell[data-hints="off"] .rv-cell.is-legal::after { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  /* vista previa de la ficha bajo el cursor */
  .rv-cell.is-legal:hover::after { width: 76%; opacity: .42; background: var(--rv-ghost); box-shadow: 0 0 0 1.5px var(--rv-ghost-rim); }
}
.rv-board[data-turn="1"] { --rv-ghost: var(--rv-b-face); --rv-ghost-rim: var(--rv-b-rim); }
.rv-board[data-turn="2"] { --rv-ghost: var(--rv-w-face); --rv-ghost-rim: var(--rv-w-rim); }
.rv-cell:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: -3px; z-index: 4; }
.rv-cell.is-hint::before {
  content: ""; position: absolute; inset: 9%; border-radius: 50%; z-index: 2; pointer-events: none;
  border: 2px solid var(--rv-accent); box-shadow: 0 0 14px var(--rv-accent);
  animation: rv-hint 1.3s ease-in-out infinite;
}
@keyframes rv-hint { 50% { transform: scale(.86); opacity: .55; } }

/* casilla bloqueada (Reversi Extremo): incrustada, sin ficha posible */
.rv-cell.is-block { background: var(--rv-block); background-size: auto; box-shadow: inset -1px -1px 0 var(--rv-line), inset 0 3px 8px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(255, 255, 255, .08); }
.rv-cell.is-block::before { content: ""; position: absolute; inset: 10%; border-radius: 3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rv-inlay) 60%, transparent); pointer-events: none; }
.rv-shell[data-skin="neon"] .rv-cell.is-block::before { box-shadow: inset 0 0 0 1px rgba(255, 70, 180, .8), 0 0 10px rgba(255, 70, 180, .6); }

/* ---------- fichas ---------- */
.rv-disc {
  position: absolute; inset: 9%; z-index: 2; pointer-events: none; transform-style: preserve-3d;
}
/* sombra en la mesa: se encoge cuando la ficha se levanta al girar */
.rv-disc::before {
  content: ""; position: absolute; inset: 6% 2% -6% 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .25) 70%, transparent);
  filter: blur(1.5px); transform: translateZ(0); transition: transform .3s ease, opacity .3s ease;
}
.rv-shell[data-skin="neon"] .rv-disc[data-c="1"]::before { background: radial-gradient(closest-side, rgba(57, 194, 255, .55), transparent); filter: blur(5px); }
.rv-shell[data-skin="neon"] .rv-disc[data-c="2"]::before { background: radial-gradient(closest-side, rgba(176, 124, 255, .7), transparent); filter: blur(6px); }
.rv-coin {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotate3d(var(--ax, 1), var(--ay, 0), 0, var(--rot, 0deg));
  transition: transform var(--rv-flip-ms) var(--rv-ease);
}
.rv-face {
  position: absolute; inset: 0; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.rv-face.b {
  background: var(--rv-b-face);
  box-shadow: inset 0 0 0 1.5px var(--rv-b-rim), inset 0 -3px 5px rgba(0, 0, 0, .55), inset 0 2px 3px rgba(255, 255, 255, .14);
}
.rv-face.w {
  background: var(--rv-w-face); transform: rotateY(180deg);
  box-shadow: inset 0 0 0 1.5px var(--rv-w-rim), inset 0 -3px 5px rgba(90, 70, 40, .35), inset 0 2px 3px rgba(255, 255, 255, .9);
}
/* destello especular: capa fija (no gira), la luz de la sala siempre cae igual */
.rv-shine {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; transform: translateZ(1px);
  background:
    radial-gradient(38% 26% at 36% 26%, rgba(255, 255, 255, .42), transparent 100%),
    radial-gradient(70% 50% at 60% 92%, rgba(0, 0, 0, .18), transparent 100%);
  mix-blend-mode: screen; transition: opacity .2s ease;
}
.rv-disc[data-c="2"] .rv-shine { background: radial-gradient(40% 28% at 36% 26%, rgba(255, 255, 255, .95), transparent 100%), radial-gradient(70% 50% at 60% 92%, rgba(120, 100, 70, .16), transparent 100%); mix-blend-mode: normal; }
.rv-disc.is-flip .rv-shine { animation: rv-shine var(--rv-flip-ms) ease both; animation-delay: var(--d, 0ms); }
@keyframes rv-shine { 15%, 80% { opacity: 0; } }
.rv-shell[data-skin="obsidiana"] .rv-face::before,
.rv-shell[data-skin="jade"] .rv-face.b::before {
  content: ""; position: absolute; inset: 16%; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--rv-accent) 55%, transparent);
}
.rv-shell[data-skin="neon"] .rv-face.b { box-shadow: inset 0 0 0 2px var(--rv-b-rim), 0 0 12px rgba(57, 194, 255, .75), inset 0 0 10px rgba(57, 194, 255, .35); }
.rv-shell[data-skin="neon"] .rv-face.w { box-shadow: inset 0 0 0 2px var(--rv-w-rim), 0 0 14px rgba(176, 124, 255, .8), inset 0 -3px 6px rgba(120, 80, 220, .35); }

/* al girar: se levanta, gira y vuelve a asentarse */
.rv-disc.is-flip { animation: rv-lift var(--rv-flip-ms) var(--rv-ease) both; animation-delay: var(--d, 0ms); }
.rv-disc.is-flip .rv-coin { transition-delay: var(--d, 0ms); }
.rv-disc.is-flip::before { animation: rv-shadow var(--rv-flip-ms) var(--rv-ease) both; animation-delay: var(--d, 0ms); }
@keyframes rv-lift { 0% { transform: translateZ(0) scale(1); } 45% { transform: translateZ(26px) scale(1.14); } 100% { transform: translateZ(0) scale(1); } }
@keyframes rv-shadow { 45% { transform: translate(8%, 12%) scale(.78); opacity: .5; } }
/* ficha nueva: cae desde arriba con un pequeño asiento */
.rv-disc.is-drop { animation: rv-drop .42s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes rv-drop { 0% { transform: translateY(-34%) scale(1.3); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.rv-disc.is-drop::before { animation: rv-drop-sh .42s ease both; }
@keyframes rv-drop-sh { 0% { transform: translate(18%, 26%) scale(.6); opacity: 0; } }
/* última jugada */
.rv-cell.is-last .rv-disc::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16%; aspect-ratio: 1; border-radius: 50%; z-index: 3;
  transform: translate(-50%, -50%) translateZ(2px); background: var(--rv-accent); box-shadow: 0 0 8px var(--rv-accent);
  animation: rv-fade .5s ease .35s both;
}
@keyframes rv-fade { from { opacity: 0; } }

/* coordenadas en el marco */
.rv-coords { position: absolute; display: grid; pointer-events: none; font-family: var(--font-num); font-size: clamp(.55rem, 1.3vw, .72rem); color: var(--rv-coord); letter-spacing: .04em; text-transform: lowercase; }
.rv-coords.cols { left: clamp(14px, 3.6%, 30px); right: clamp(14px, 3.6%, 30px); top: 0; height: clamp(14px, 3.6%, 30px); grid-template-columns: repeat(var(--n), 1fr); }
.rv-coords.rows { top: clamp(14px, 3.6%, 30px); bottom: clamp(14px, 3.6%, 30px); left: 0; width: clamp(14px, 3.6%, 30px); grid-template-rows: repeat(var(--n), 1fr); }
.rv-coords span { display: grid; place-items: center; }

/* fin de partida: las fichas ganadoras brillan una vez */
.rv-board.is-over .rv-disc[data-c="1"] .rv-face.b,
.rv-board.is-over .rv-disc[data-c="2"] .rv-face.w { transition: filter .6s ease; }
.rv-board.is-over[data-win="1"] .rv-disc[data-c="1"],
.rv-board.is-over[data-win="2"] .rv-disc[data-c="2"] { animation: rv-glow 1.6s ease both; animation-delay: calc(var(--i, 0) * 12ms); }
@keyframes rv-glow { 40% { filter: drop-shadow(0 0 7px var(--rv-accent)); transform: translateZ(8px); } }

/* aviso de pase */
.rv-toast {
  position: absolute; left: 50%; top: 50%; z-index: 20; padding: 12px 20px; border-radius: 999px; pointer-events: none;
  font-weight: 600; letter-spacing: .02em; color: var(--rv-ink); white-space: nowrap;
  background: rgba(10, 8, 6, .78); border: 1px solid color-mix(in srgb, var(--rv-accent) 55%, transparent);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7);
  transform: translate(-50%, -50%); animation: rv-toast 2.1s ease both;
}
@keyframes rv-toast { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.96); } 12%, 82% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -56%); } }

/* el panel de resultado vive sobre el tablero */
.rv-table .tt-result { border-radius: 14px; --tt-table: #000; color: var(--ink); }
.rv-final { color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 4px; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
.rv-final .d { width: 22px; height: 22px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 6px; }
.rv-final .d.b { background: radial-gradient(circle at 34% 28%, #666, #111 60%, #000); }
.rv-final .d.w { background: radial-gradient(circle at 34% 28%, #fff, #EEE6D6 60%, #CDBFA5); box-shadow: inset 0 0 0 1px #B9A684; }
.rv-final .sep { color: var(--muted); font-size: 1.4rem; }

/* ============================================================
   Selector de partida, desafíos, guardadas
   ============================================================ */
.rv-setup { max-width: 640px; }
.rv-setup fieldset { border: 0; margin: 14px 0 0; padding: 0; min-width: 0; }
.rv-setup legend { margin-bottom: 8px; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rv-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.rv-mode-opt {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 10px; border-radius: var(--r-md, 10px);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left;
  transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.rv-mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rv-mode-opt strong { font-size: .95rem; }
.rv-mode-opt em { font-style: normal; font-family: var(--font-num); font-size: .72rem; color: var(--accent, #C8302A); }
.rv-mode-opt span { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.rv-mode-opt:hover { border-color: var(--line-2); }
.rv-mode-opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--surface-2); }
.rv-mode-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-seg label { position: relative; flex: 1 1 auto; }
.rv-seg input { position: absolute; opacity: 0; pointer-events: none; }
.rv-seg span {
  display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); background: var(--surface);
  cursor: pointer; white-space: nowrap; transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.rv-seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.rv-seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-setup [data-when][hidden] { display: none; }

/* vistas previas de tableros */
.rv-skins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rv-skin-opt {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 7px 7px 9px; font: inherit; font-size: var(--t-xs);
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 10px); cursor: pointer; text-align: center;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.rv-skin-opt:hover { transform: translateY(-1px); border-color: var(--line-2); }
.rv-skin-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); color: var(--ink); font-weight: 600; }
.rv-skin-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-prev {
  position: relative; display: block; aspect-ratio: 1; border-radius: 8px; padding: 9%; background: var(--rv-room);
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.rv-prev-board {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; padding: 8%; border-radius: 6px;
  background: var(--rv-frame); box-shadow: var(--rv-frame-sh);
}
.rv-prev-surface { position: absolute; inset: 8%; border-radius: 2px; background: var(--rv-surface);
  background-image: none, none; }
.rv-prev-surface { background: var(--rv-surface); }
.rv-prev-grid { position: absolute; inset: 8%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }
.rv-prev-grid i { box-shadow: inset -1px -1px 0 var(--rv-line), var(--rv-line-glow); position: relative; }
.rv-prev-grid i.b::after, .rv-prev-grid i.w::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; }
.rv-prev-grid i.b::after { background: var(--rv-b-face); box-shadow: inset 0 0 0 1px var(--rv-b-rim), 0 2px 3px rgba(0, 0, 0, .55); }
.rv-prev-grid i.w::after { background: var(--rv-w-face); box-shadow: inset 0 0 0 1px var(--rv-w-rim), 0 2px 3px rgba(0, 0, 0, .45); }
[data-rv-skin="neon"] .rv-prev-grid i.b::after { box-shadow: inset 0 0 0 1px var(--rv-b-rim), 0 0 6px rgba(57, 194, 255, .8); }
[data-rv-skin="neon"] .rv-prev-grid i.w::after { box-shadow: inset 0 0 0 1px var(--rv-w-rim), 0 0 6px rgba(176, 124, 255, .9); }
.rv-skin-name { display: block; line-height: 1.25; }
.rv-skin-name small { display: block; font-weight: 400; color: var(--muted); font-size: .68rem; }

/* lista de desafíos */
.rv-puzzles { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.rv-pz {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 7px; border-radius: 10px; font: inherit;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color var(--dur), background var(--dur);
}
.rv-pz b { font-family: var(--font-num); font-size: .95rem; font-weight: 500; }
.rv-pz small { font-size: .62rem; color: var(--muted); }
.rv-pz:hover { border-color: var(--line-2); }
.rv-pz[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.rv-pz.is-done::after { content: "✓"; position: absolute; top: 3px; right: 6px; font-size: .7rem; color: var(--present, #3A8F5C); font-weight: 700; }
.rv-pz-tier { grid-column: 1 / -1; margin: 6px 0 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.rv-saved { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; max-height: 50vh; overflow: auto; }
.rv-saved li { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 9px 10px; border-radius: 10px; background: var(--surface-2); }
.rv-saved li span { display: flex; flex-direction: column; min-width: 0; font-size: .86rem; }
.rv-saved li small { color: var(--muted); font-size: .72rem; }
.rv-saved-empty { color: var(--muted); font-size: var(--t-sm); }

/* estadísticas por modalidad */
.rv-stat-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .8rem; }
.rv-stat-table th, .rv-stat-table td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--line); }
.rv-stat-table th:first-child, .rv-stat-table td:first-child { text-align: left; }
.rv-stat-table th { font-weight: 500; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.rv-stat-table td { font-family: var(--font-num); }
.rv-stat-table td:first-child { font-family: inherit; }

/* ============================================================
   Portada del juego
   ============================================================ */
.rv-banner { display: block; margin: 4px 0 22px; border-radius: var(--r-xl, 18px); overflow: hidden; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .55); }
.rv-banner img { display: block; width: 100%; height: auto; }
.rv-hub-skins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rv-hub-skins .rv-skin-name small { display: none; }
.rv-hub-art { margin: 0 0 12px; border-radius: 14px; overflow: hidden; }
.rv-hub-art .rv-prev { aspect-ratio: 16 / 9; padding: 5% 22%; }
.rv-hub-art .rv-prev-board { aspect-ratio: 1; height: 100%; margin: 0 auto; }

/* ============================================================
   Pantallas
   ============================================================ */
@media (max-width: 900px) {
  .rv-layout { grid-template-columns: 1fr; }
  .rv-side { order: -1; }
  .rv-players { flex-direction: row; }
  .rv-pl { flex: 1 1 0; padding: 9px 10px; gap: 8px; min-width: 0; }
  .rv-pl.is-turn { transform: translateY(-1px); }
  .rv-pl-n { font-size: 1.5rem; }
  .rv-pl-disc { width: 24px; height: 24px; }
  .rv-status { min-height: 0; justify-content: center; text-align: center; }
  .rv-side .rv-side-actions { display: none; }
  .rv-side { gap: 8px; }
  .rv-status { font-size: .84rem; }
  .rv-table { --rv-side: min(100%, 640px, calc(100svh - 300px)); }
  .rv-shell[data-n="10"] .rv-table, .rv-shell[data-n="6"] .rv-table { --rv-side: min(100%, 640px, calc(100svh - 300px)); }
}
@media (max-width: 560px) {
  .rv-room { margin-left: -6px; margin-right: -6px; padding: 10px 8px 12px; border-radius: 14px; }
  .rv-pl-name small { font-size: .62rem; }
  .rv-pl-name b { font-size: .86rem; }
  .rv-frame { padding: 10px; }
  .rv-frame::before { inset: 5px; }
  .rv-coords { display: none; }
  .rv-table, .rv-shell[data-n="10"] .rv-table, .rv-shell[data-n="6"] .rv-table { --rv-side: 100%; }
  .rv-frame { width: 100%; }
  .rv-skins, .rv-hub-skins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-disc { inset: 7%; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-shell, [data-rv-skin] { --rv-flip-ms: 1ms; }
  .rv-disc.is-flip, .rv-disc.is-drop, .rv-disc.is-flip::before, .rv-disc.is-drop::before,
  .rv-board.is-over .rv-disc, .rv-cell.is-hint::before, .rv-think i, .rv-pl-n.is-bump { animation: none !important; }
  .rv-toast { animation-duration: 2.4s; }
  .rv-frame { --rv-tilt: 0deg !important; }
}