/* ============================================================
   Dominó — mesa y fichas (templates/play_domino.html, domino_hub.html)

   Cinco estilos de ficha, todos con las mismas variables:
     --dm-face  cara (fondo)        --dm-pip / --dm-pip-hi  puntos
     --dm-line  filete interior     --dm-div  línea central
     --dm-edge  canto de la ficha   --dm-pin  remache central
     --dm-back  dorso
   El estilo activo va en <html data-dm-skin="…"> (static/js/domino.js);
   las vistas previas del selector llevan su propio data-skin.
   ============================================================ */
:root,
.dm-skin-prev[data-skin="marfil"] {
  --dm-face: linear-gradient(155deg, #FFFEFA 0%, #F8F2E6 52%, #EEE5D2 100%);
  --dm-line: rgba(120, 95, 55, .20);
  --dm-edge: 0 1px 0 #DCCFB6, 0 2px 0 #CDBD9F;
  --dm-drop: 0 3px 5px -2px rgba(60, 40, 20, .26), 0 10px 18px -12px rgba(60, 40, 20, .38);
  --dm-pip: #1D1915; --dm-pip-hi: #5B524A;
  --dm-div: rgba(70, 52, 32, .34);
  --dm-pin: #B08C4B; --dm-pin-op: 1;
  --dm-back: radial-gradient(circle at 50% 50%, #B08C4B 0 1.6px, transparent 2.2px),
             linear-gradient(155deg, #F4EDDF, #E2D5BC);
  --dm-pip-filter: none;
}
:root[data-dm-skin="ebano"],
.dm-skin-prev[data-skin="ebano"] {
  --dm-face: linear-gradient(155deg, #37322C 0%, #201D19 55%, #151311 100%);
  --dm-line: rgba(214, 180, 112, .22);
  --dm-edge: 0 1px 0 #0D0C0A, 0 2px 0 #080706;
  --dm-drop: 0 3px 6px -2px rgba(0, 0, 0, .45), 0 10px 18px -12px rgba(0, 0, 0, .5);
  --dm-pip: #F1E8D6; --dm-pip-hi: #FFFFFF;
  --dm-div: rgba(201, 165, 94, .75);
  --dm-pin: #C9A55E; --dm-pin-op: 1;
  --dm-back: linear-gradient(90deg, transparent 47%, rgba(201, 165, 94, .55) 47% 53%, transparent 53%) center / 100% 30% no-repeat,
             linear-gradient(155deg, #2E2A25, #161412);
}
:root[data-dm-skin="madera"],
.dm-skin-prev[data-skin="madera"] {
  --dm-face: repeating-linear-gradient(96deg, rgba(110, 66, 26, .075) 0 1px, transparent 1px 6px),
             repeating-linear-gradient(92deg, rgba(255, 238, 205, .09) 0 2px, transparent 2px 13px),
             radial-gradient(140% 70% at 30% 20%, rgba(255, 240, 210, .22), transparent 60%),
             linear-gradient(160deg, #DBBC93 0%, #CBA372 55%, #BA8E5B 100%);
  --dm-line: rgba(90, 55, 20, .24);
  --dm-edge: 0 1px 0 #A27849, 0 2px 0 #8B643A;
  --dm-drop: 0 3px 5px -2px rgba(60, 35, 10, .3), 0 10px 18px -12px rgba(60, 35, 10, .4);
  --dm-pip: #2A1A0E; --dm-pip-hi: #5E412A;
  --dm-div: rgba(74, 44, 18, .42);
  --dm-pin: #3D2816; --dm-pin-op: .55;
  --dm-back: repeating-linear-gradient(96deg, rgba(110, 66, 26, .08) 0 1px, transparent 1px 6px),
             linear-gradient(160deg, #C9A06D, #A97C4A);
}
:root[data-dm-skin="cristal"],
.dm-skin-prev[data-skin="cristal"] {
  --dm-face: linear-gradient(155deg, rgba(255, 255, 255, .88) 0%, rgba(228, 241, 247, .66) 48%, rgba(204, 226, 236, .6) 100%);
  --dm-line: rgba(255, 255, 255, .95);
  --dm-edge: 0 0 0 1px rgba(60, 110, 130, .16), 0 1px 0 rgba(120, 165, 180, .45);
  --dm-drop: 0 4px 10px -4px rgba(30, 70, 90, .25), 0 12px 22px -14px rgba(30, 70, 90, .3);
  --dm-pip: #24495D; --dm-pip-hi: #5B8CA4;
  --dm-div: rgba(36, 73, 93, .2);
  --dm-pin: #24495D; --dm-pin-op: 0;
  --dm-back: linear-gradient(135deg, rgba(255, 255, 255, .7) 0 30%, rgba(255, 255, 255, .25) 30% 55%, rgba(255, 255, 255, .55) 55%),
             linear-gradient(155deg, rgba(214, 232, 240, .9), rgba(186, 214, 226, .8));
}
:root[data-theme="dark"][data-dm-skin="cristal"] {
  --dm-face: linear-gradient(155deg, rgba(255, 255, 255, .16) 0%, rgba(210, 235, 245, .08) 60%, rgba(210, 235, 245, .05) 100%);
  --dm-line: rgba(255, 255, 255, .22);
  --dm-edge: 0 0 0 1px rgba(170, 215, 235, .12), 0 1px 0 rgba(0, 0, 0, .5);
  --dm-pip: #D4ECF6; --dm-pip-hi: #FFFFFF;
  --dm-div: rgba(212, 236, 246, .22);
  --dm-back: linear-gradient(135deg, rgba(255, 255, 255, .14) 0 30%, rgba(255, 255, 255, .04) 30% 55%, rgba(255, 255, 255, .1) 55%),
             linear-gradient(155deg, rgba(120, 160, 180, .35), rgba(80, 110, 130, .3));
}
:root[data-dm-skin="nocturno"],
.dm-skin-prev[data-skin="nocturno"] {
  --dm-face: linear-gradient(155deg, #2D323D 0%, #22262E 55%, #1B1E25 100%);
  --dm-line: rgba(170, 190, 230, .14);
  --dm-edge: 0 1px 0 #12141A, 0 2px 0 #0B0D11;
  --dm-drop: 0 3px 6px -2px rgba(0, 0, 0, .45), 0 10px 18px -12px rgba(5, 10, 25, .55);
  --dm-pip: #DCE4F1; --dm-pip-hi: #FFFFFF;
  --dm-div: rgba(150, 172, 212, .3);
  --dm-pin: #8FA3C8; --dm-pin-op: .45;
  --dm-back: radial-gradient(circle at 50% 50%, rgba(143, 163, 200, .6) 0 1.4px, transparent 2px),
             linear-gradient(155deg, #2A2F39, #191C22);
  --dm-pip-filter: drop-shadow(0 0 1.6px rgba(205, 220, 255, .35));
}

/* ---------- la mesa ---------- */
.dm-shell { --u: 30px; --hu: 40px; --tt-table: var(--surface-2); }
.dm-stage {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px;
  height: clamp(480px, calc(100dvh - 212px), 940px);
  padding: 10px clamp(8px, 1.6vw, 18px) 12px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background:
    radial-gradient(120% 85% at 50% 42%, color-mix(in srgb, var(--surface) 62%, var(--surface-2)) 0%, var(--surface-2) 62%, color-mix(in srgb, var(--surface-3) 55%, var(--surface-2)) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent), inset 0 -18px 40px -30px rgba(60, 40, 20, .25);
  overflow: hidden;
}
:root[data-theme="dark"] .dm-stage { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), inset 0 -18px 40px -30px rgba(0, 0, 0, .6); }

.dm-opp { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.dm-who, .dm-msg { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.dm-count { min-width: 1.6em; padding: 1px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 7%, transparent); font-size: .74rem; color: var(--ink-2); text-align: center; }
.dm-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background var(--dur), box-shadow var(--dur); }
.dm-dot.is-on { background: var(--sel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sel) 22%, transparent); }
.dm-opp-tiles { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; padding-left: 4px; }
.dm-back {
  flex: none; width: 15px; height: 30px; margin-left: -3px; border-radius: 3px;
  background: var(--dm-back); box-shadow: inset 0 0 0 1px var(--dm-line), var(--dm-edge), 0 2px 4px -2px rgba(0, 0, 0, .3);
}
.dm-pool { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--muted); white-space: nowrap; transition: opacity var(--dur); }
.dm-pool b { color: var(--ink-2); font-weight: 500; }
.dm-pool.is-empty { opacity: .55; }
.dm-pool-stack { position: relative; width: 22px; height: 18px; }
.dm-pool-stack::before, .dm-pool-stack::after {
  content: ""; position: absolute; width: 20px; height: 10px; border-radius: 2px;
  background: var(--dm-back); box-shadow: inset 0 0 0 1px var(--dm-line), var(--dm-edge);
}
.dm-pool-stack::before { left: 0; top: 8px; }
.dm-pool-stack::after { left: 2px; top: 2px; }
.dm-pool.is-empty .dm-pool-stack::after { display: none; }

.dm-table { position: relative; min-height: 0; border-radius: var(--r-md); }
.dm-board { position: absolute; inset: 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.dm-table.is-empty .dm-board::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 60px; transform: translate(-50%, -50%);
  border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--ink) 12%, transparent);
}

.dm-me { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--line-2) 60%, transparent); }
.dm-me-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.dm-msg { margin: 0; min-width: 0; white-space: normal; color: var(--ink); font-weight: 500; }
.dm-msg > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dm-actions { display: flex; gap: 6px; flex: none; }
.dm-act[hidden] { display: none; }
.dm-act:not(.btn-primary) { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); }
.dm-act.is-hint { animation: dm-hint 1.1s ease 2; }

.dm-hand {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px;
  min-height: calc(var(--hu) * 2 + 10px); padding-top: 8px;
}

/* ---------- una ficha ---------- */
.dm-tile {
  position: relative; display: block; padding: 0; border: 0; margin: 0; font: inherit;
  border-radius: max(3px, calc(var(--u) * .17));
  background: var(--dm-face);
  box-shadow: inset 0 0 0 1px var(--dm-line), var(--dm-edge), var(--dm-drop);
  -webkit-tap-highlight-color: transparent;
}
.dm-tile svg { display: block; width: 100%; height: 100%; overflow: visible; filter: var(--dm-pip-filter); }
.dm-pip { fill: url(#dm-pipg); }
.dm-pip-hi { stop-color: var(--dm-pip-hi); }
.dm-pip-lo { stop-color: var(--dm-pip); }
.dm-div { stroke: var(--dm-div); stroke-width: 2.4; stroke-linecap: round; }
.dm-pin { fill: var(--dm-pin); opacity: var(--dm-pin-op); }
:root[data-dm-skin="cristal"] .dm-tile:not(.dm-ghost) { -webkit-backdrop-filter: blur(5px) saturate(1.15); backdrop-filter: blur(5px) saturate(1.15); }
/* cristal: un reflejo diagonal muy suave, como el de un vidrio pulido */
:root[data-dm-skin="cristal"] .dm-tile:not(.dm-ghost)::before,
.dm-skin-prev[data-skin="cristal"] .dm-tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, .62) 27%, transparent 37%, transparent 60%, rgba(255, 255, 255, .32) 66%, transparent 72%);
}
:root[data-theme="dark"][data-dm-skin="cristal"] .dm-tile:not(.dm-ghost)::before { opacity: .35; }

.dm-btile { position: absolute; transition: left .28s var(--ease), top .28s var(--ease), width .28s var(--ease), height .28s var(--ease); }

.dm-htile {
  width: var(--hu); height: calc(var(--hu) * 2); border-radius: calc(var(--hu) * .17); cursor: default;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), opacity .2s ease, filter .2s ease;
}
.dm-htile.is-playable { cursor: pointer; }
.dm-htile.is-playable::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -7px; height: 2px; border-radius: 2px;
  background: var(--sel); opacity: .7;
}
@media (hover: hover) {
  .dm-htile.is-playable:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--dm-line), var(--dm-edge), 0 12px 20px -10px rgba(40, 30, 20, .45); }
}
.dm-htile.is-dim { opacity: .5; filter: saturate(.7); }
.dm-htile.is-sel { transform: translateY(-9px); box-shadow: inset 0 0 0 1px var(--dm-line), 0 0 0 2px var(--sel), 0 14px 22px -10px rgba(40, 30, 20, .45); }
.dm-htile:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.dm-htile.is-new { animation: dm-new .26s var(--ease) both; }
.dm-tile.is-hint { animation: dm-hint 1.1s ease 2; }
@keyframes dm-new { from { opacity: 0; transform: translateY(-14px); } }
@keyframes dm-hint {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--dm-line), var(--dm-edge), var(--dm-drop); }
  50% { box-shadow: inset 0 0 0 1px var(--dm-line), 0 0 0 3px color-mix(in srgb, var(--present) 70%, transparent), 0 0 18px 2px color-mix(in srgb, var(--present) 35%, transparent); }
}

/* destino posible: ficha fantasma */
.dm-ghost {
  position: absolute; cursor: pointer; background: color-mix(in srgb, var(--sel) 9%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sel) 70%, transparent);
  animation: dm-breathe 1.6s ease-in-out infinite;
}
.dm-ghost svg { opacity: .28; filter: none; }
.dm-ghost .dm-pip { fill: var(--sel); }
.dm-ghost .dm-div { stroke: var(--sel); }
.dm-ghost .dm-pin { display: none; }
.dm-ghost:hover, .dm-ghost:focus-visible { background: color-mix(in srgb, var(--sel) 18%, transparent); outline: none; }
.dm-ghost:hover svg { opacity: .5; }
.dm-ghost.is-hint { cursor: default; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--present) 80%, transparent); background: color-mix(in srgb, var(--present) 10%, transparent); }
.dm-ghost.is-hint .dm-pip { fill: var(--present); }
@keyframes dm-breathe { 50% { background: color-mix(in srgb, var(--sel) 16%, transparent); } }

/* ---------- selector de estilo ---------- */
.dm-skin-prev { display: flex; gap: 4px; }
.dm-skin-prev .dm-tile { width: 26px; height: 52px; --u: 26px; }
.dm-skin-prev .dm-pip { fill: var(--dm-pip); }
.dm-skin-prev .dm-tile + .dm-tile { transform: rotate(8deg) translateY(2px); }
.tt-skin-opt[data-skin="cristal"] .dm-skin-prev,
.dm-hub-skins [data-skin="cristal"] .dm-skin-prev { padding: 4px; border-radius: 8px; background: linear-gradient(135deg, #cfe0e6, #e9e1d3); }

/* ---------- portada ---------- */
.dm-hub-art { display: flex; justify-content: center; align-items: center; gap: 0; padding: 26px 10px 22px; border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--surface) 60%, var(--surface-2)), var(--surface-2)); border: 1px solid var(--line); }
.dm-hub-art .dm-tile { --u: 26px; flex: none; }
.dm-hub-art .dm-tile[data-o="h"] { width: 64px; height: 32px; }
.dm-hub-art .dm-tile[data-o="v"] { width: 32px; height: 64px; }
.dm-hub-art .dm-tile + .dm-tile { margin-left: 2px; }
.dm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dm-hub-skins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dm-hub-skins .tt-skin-opt { min-width: 0; padding: 8px 2px 6px; gap: 6px; font-size: .66rem; }
.dm-hub-skins .tt-skin-name { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dm-hub-skins .dm-skin-prev .dm-tile { width: 18px; height: 36px; --u: 18px; }
.dm-hub-skins .dm-skin-prev .dm-tile + .dm-tile { display: none; }

@media (max-width: 640px) {
  .dm-stage { height: clamp(460px, calc(100dvh - 200px), 860px); padding: 8px 8px 10px; margin: 0 -4px; }
  .dm-opp { gap: 8px; min-height: 34px; }
  .dm-pool > span:last-child { font-size: .7rem; }
  .dm-back { width: 12px; height: 24px; margin-left: -4px; }
  .dm-msg { font-size: .82rem; }
  .dm-hand { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-btile, .dm-htile { transition: none; }
  .dm-ghost, .dm-tile.is-hint, .dm-act.is-hint, .dm-htile.is-new { animation: none; }
}