/* =========================================================
   DOMINÓ PUCARÁ 2
   MESA BASE
========================================================= */

* {
  box-sizing: border-box;
}


html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
}


body {
  overflow: hidden;

  background:
    #020805;

  color:
    #f5d77e;

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


button,
img {
  -webkit-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
}


/* =========================================================
   ESTRUCTURA GENERAL
========================================================= */

.domino-game {
  width: 100%;
  height: 100%;

  display: grid;

  grid-template-rows:
    58px
    42px
    minmax(0, 1fr)
    34px
    125px
    64px;

  background:
    radial-gradient(
      circle at center,
      #07502e 0%,
      #03301d 45%,
      #01180e 100%
    );
}


/* =========================================================
   HEADER
========================================================= */

.game-header {
  display: grid;

  grid-template-columns:
    1fr
    auto;

  align-items: center;

  padding:
    0
    20px;

  border-bottom:
    1px solid
    #8c6a22;

  background:
    rgba(
      1,
      12,
      7,
      0.92
    );
}


.game-header h1 {
  margin: 0;

  font-size: 20px;
}


.game-score {
  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 13px;
}


/* =========================================================
   JUGADOR CPU
========================================================= */

.opponent-zone {
  display: flex;

  justify-content: center;

  align-items: center;

  background:
    rgba(
      0,
      0,
      0,
      0.14
    );
}


/* =========================================================
   ETIQUETAS
========================================================= */

.player-label {
  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 13px;
}


/* =========================================================
   ZONA DE TABLERO
========================================================= */

.table-zone {
  min-height: 0;

  display: grid;

  grid-template-columns:
    54px
    minmax(0, 1fr)
    54px;

  align-items: center;

  padding:
    8px
    12px;
}


/* =========================================================
   EXTREMOS
========================================================= */

.table-end {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  justify-self: center;

  border-radius: 50%;

  background:
    #d2a23b;

  color:
    #171006;

  font-size: 19px;

  font-weight: 900;
}


/* =========================================================
   TABLERO MATEMÁTICO

   15 columnas × 12 filas

   La grilla existe pero no se dibuja.
========================================================= */

.domino-board {
  position: relative;

  width: min(
    720px,
    100%
  );

  aspect-ratio:
    15 / 12;

  justify-self: center;

  overflow: visible;
}


/* =========================================================
   FICHAS DEL TABLERO
========================================================= */

.table-domino-tile {
  position: absolute;

  left:
    calc(
      (
        var(--grid-column) +
        0.5
      ) *
      (100% / 15)
    );

  top:
    calc(
      (
        var(--grid-row) +
        0.5
      ) *
      (100% / 12)
    );


  /*
   * Ficha original horizontal.
   *
   * Ancho = 2 slots.
   */

  width:
    calc(
      (100% / 15) *
      2
    );

  height: auto;


  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      var(--tile-rotation)
    );


  transform-origin:
    center;


  pointer-events:
    none;


  filter:
    drop-shadow(
      0
      4px
      4px
      rgba(
        0,
        0,
        0,
        0.48
      )
    );
}


/* =========================================================
   MENSAJE
========================================================= */

.game-message {
  display: grid;

  place-items: center;

  color:
    #fff0b1;

  font-size: 14px;

  background:
    rgba(
      0,
      0,
      0,
      0.12
    );
}


/* =========================================================
   JUGADOR
========================================================= */

.player-zone {
  min-width: 0;

  padding:
    3px
    12px;

  background:
    rgba(
      0,
      0,
      0,
      0.28
    );
}


.player-zone .player-label {
  justify-content: center;

  height: 24px;
}


/* =========================================================
   MANO
========================================================= */

.player-hand {
  height: 94px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  overflow: hidden;
}


/* =========================================================
   BOTÓN DE FICHA
========================================================= */

.player-tile {
  padding: 0;

  border: 0;

  background:
    transparent;

  cursor: pointer;

  transition:
    transform
    0.15s ease,
    filter
    0.15s ease;
}


.player-tile img {
  display: block;

  width: 105px;

  height: auto;
}


/* =========================================================
   FICHA LEGAL
========================================================= */

.player-tile--legal img {
  filter:
    drop-shadow(
      0
      0
      7px
      #ffd75c
    );
}


/* =========================================================
   FICHA SELECCIONADA
========================================================= */

.player-tile--selected {
  transform:
    translateY(
      -9px
    );
}


.player-tile--selected img {
  filter:
    drop-shadow(
      0
      0
      10px
      #fff1a0
    );
}


/* =========================================================
   FICHA DESACTIVADA
========================================================= */

.player-tile:disabled {
  opacity:
    0.55;

  cursor:
    default;
}


/* =========================================================
   ACCIONES
========================================================= */

.game-actions {
  display: grid;

  grid-template-columns:
    1fr
    100px
    1fr;

  align-items: center;

  gap: 12px;

  padding:
    7px
    18px;

  background:
    rgba(
      1,
      10,
      6,
      0.94
    );
}


/* =========================================================
   BOTONES TEMPORALES
========================================================= */

.game-action {
  justify-self: center;

  min-width: 130px;

  padding:
    10px
    18px;

  border:
    1px solid
    #b58a2c;

  border-radius:
    8px;

  background:
    #081109;

  color:
    #f6d77d;

  font:
    700
    13px
    Georgia,
    serif;

  cursor:
    pointer;
}


.game-action:disabled {
  opacity:
    0.28;

  cursor:
    default;
}


/* =========================================================
   POZO
========================================================= */

.stock-info {
  text-align: center;

  font-size: 11px;
}


.stock-info strong {
  display: block;

  margin-top: 2px;

  font-size: 17px;
}

/* CAPA PREMIUM: no modifica la geometría del tablero */
.table-navy { background: radial-gradient(circle at center,#0c5271 0%,#072f44 48%,#02141f 100%); }
.table-burgundy { background: radial-gradient(circle at center,#772b2b 0%,#441818 48%,#180707 100%); }
.game-header { grid-template-columns:auto 1fr auto auto; gap:10px; }
.image-button { border:0; padding:0; background:transparent; cursor:pointer; }
.image-button img,.game-action img { display:block; width:100%; }
.header-back img { width:92px; }
.settings-button { width:40px;height:40px;border:1px solid #bd8a25;border-radius:9px;color:#f7d46d;background:#07140d;font-size:21px; }
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:7px}.restart-button{width:40px;height:40px;border:1px solid #bd8a25;border-radius:9px;color:#f7d46d;background:#07140d;font:700 27px/1 Georgia,serif;cursor:pointer}.restart-button:active{transform:scale(.94)}
.premium-label { min-width:210px;justify-content:center; }
.player-avatar { width:36px;height:36px;object-fit:cover;border:2px solid #d9a633;border-radius:50%;background:#06130d; }
.game-actions { grid-template-columns:1fr 100px 118px 72px 1fr; }
.game-action { width:120px;min-width:0;padding:0;background:transparent; }
.draw-action { position:relative;width:100px;justify-self:center; }
.draw-action span { position:absolute;right:4px;bottom:1px;min-width:25px;padding:3px;border-radius:50%;background:#c99b32;color:#120b02;font-weight:900; }
.pass-action { width:112px;justify-self:center; }
.image-button:disabled { opacity:.25;filter:grayscale(.5); }
.product-screen { width:100%;height:100%;display:grid;place-items:center;color:#f6d77e;background:radial-gradient(circle,#153827,#030a06 70%); }
.product-screen.table-navy { background:radial-gradient(circle,#174d68,#020a0f 70%); }
.product-screen.table-burgundy { background:radial-gradient(circle,#682828,#0c0303 70%); }
.start-card { position:relative;width:min(760px,90vw);min-height:min(470px,82vh);padding:45px 52px;border:1px solid #b98c2c;border-radius:26px;background:linear-gradient(135deg,rgba(3,18,11,.96),rgba(31,16,5,.93));box-shadow:0 24px 90px #000; }
.eyebrow,.subtitle { letter-spacing:.35em;color:#b8923d; }
.start-card h1 { margin:4px 0 -10px;font-size:clamp(62px,10vw,120px);line-height:.95; }
.start-card h2 { margin:0;letter-spacing:.55em;font-size:23px; }
.start-avatar { position:absolute;right:72px;top:64px;width:116px;height:116px;border:4px solid #d7a832;border-radius:50%;object-fit:cover; }
.rival-copy { position:absolute;right:42px;top:188px;width:180px;text-align:center;color:#b8923d; }
.rival-copy strong { color:#f4d477;font-size:20px; }
.start-actions { position:absolute;right:48px;bottom:42px;display:grid;gap:10px;width:250px; }
.start-actions button,.table-choices button,.legal-links button { min-height:46px;border:1px solid #b98c2c;border-radius:12px;background:#160f08;color:#f7d878;font:800 15px Georgia,serif; }
.start-actions button:first-child { color:#1b1002;background:linear-gradient(#f9da78,#c78b20); }
.modal-backdrop { position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.82); }
.premium-modal { position:relative;width:min(820px,94vw);max-height:90vh;overflow:auto;padding:34px;border:1px solid #bd8d29;border-radius:22px;background:#061b12;box-shadow:0 25px 100px #000; }
.premium-modal h2 { margin-top:0;font-size:30px; }
.modal-x { position:absolute;right:18px;top:16px;width:42px;height:42px;border:1px solid #b88a29;border-radius:10px;background:#171008;color:#f6d678;font-size:25px; }
.setting-row { min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(194,146,45,.22);font-weight:800; }
.setting-row input[type=range] { width:62%; }
.setting-group { padding:18px 0; }
.table-choices,.legal-links { display:flex;gap:10px;flex-wrap:wrap;margin-top:12px; }
.table-choices button,.legal-links button { padding:10px 18px; }
.legal-frame { width:100%;height:min(650px,75vh);border:0;background:#07120c; }
@media (max-height:500px) and (orientation:landscape) {
 .domino-game{grid-template-rows:48px 36px minmax(0,1fr) 26px 94px 50px}.game-header h1{font-size:16px}.header-back img{width:72px}.player-avatar{width:30px;height:30px}.player-hand{height:68px}.player-tile img{width:82px}.game-actions{padding:2px 16px}.game-action{width:92px}.draw-action{width:78px}.pass-action{width:88px}.start-card{min-height:88vh;padding:22px 36px}.start-card h1{font-size:68px}.start-avatar{top:25px;width:82px;height:82px}.rival-copy{top:105px}
}

/* EXPERIENCIA PREMIUM: presentacion aislada del motor */
.premium-start-card{display:grid;grid-template-columns:1.2fr .75fr;align-items:center;gap:28px;min-height:min(500px,86vh)}
.premium-start-card .start-rival{display:grid;justify-items:center;gap:12px}.premium-start-card .start-avatar{position:static;width:126px;height:126px}.premium-start-card .start-rival p{margin:0;text-align:center;letter-spacing:.18em;color:#b8923d}.premium-start-card .start-rival strong{display:block;margin-top:8px;color:#f8d97d;font-size:21px;letter-spacing:.03em}
.premium-start-card .start-actions{position:static;grid-column:2;width:100%;margin-top:-100px}.premium-start-card .start-brand{grid-row:1/3}.premium-start-card h1{font-size:clamp(68px,9vw,118px)}
.character-panel,.tournament-panel{position:relative;width:min(980px,94vw);max-height:90vh;overflow:auto;padding:34px;border:1px solid #b98c2c;border-radius:24px;background:linear-gradient(145deg,#061b12,#1e1006);box-shadow:0 30px 100px #000}.character-panel h2,.tournament-panel h2{text-align:center;font-size:32px}.character-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.character-card{display:grid;justify-items:center;gap:7px;padding:10px;border:1px solid rgba(195,147,45,.4);border-radius:13px;background:#07140d;color:#f4d477;font:700 13px Georgia,serif}.character-card img{width:62px;height:62px;object-fit:cover;border-radius:50%;border:2px solid #9d7424}.character-card.selected,.character-card:hover{border-color:#f0c65e;background:#2a1a08;transform:translateY(-2px)}
.tournament-track{display:flex;justify-content:center;gap:50px;margin:22px auto 34px}.tournament-track span{display:grid;place-items:center;width:43px;height:43px;border:2px solid #72541d;border-radius:50%;background:#07140d;color:#806527;font-weight:900}.tournament-track span.active{color:#171006;background:#e0ad3e;box-shadow:0 0 25px #d69d35}.tournament-track span.won{border-color:#53a66d;color:#8de3a4}.versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:34px;text-align:center}.versus article{display:grid;justify-items:center;gap:10px}.versus img{width:128px;height:128px;object-fit:cover;border:4px solid #c89a34;border-radius:50%}.versus b{font-size:38px}.tournament-actions{display:flex;justify-content:center;margin-top:30px}.tournament-actions button{min-width:260px;padding:15px;border:1px solid #e4bb59;border-radius:12px;background:linear-gradient(#f8d87b,#b87a18);color:#160e02;font:900 17px Georgia,serif}.trophy{text-align:center;font-size:120px;color:#f0c85f;text-shadow:0 0 40px #b57b10}
.settings-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.84);backdrop-filter:blur(5px)}.solitaire-settings,.legal-overlay{position:relative;width:min(900px,94vw);max-height:92vh;overflow:auto;padding:30px;border:1px solid #bd8d29;border-radius:22px;background:linear-gradient(145deg,#071d14,#08140e 55%,#251405);box-shadow:0 30px 110px #000;color:#f5d679}.solitaire-settings header{text-align:center;border-bottom:1px solid rgba(203,157,58,.35);margin-bottom:20px}.solitaire-settings h2{margin:3px 0 20px;font-size:35px}.settings-x{position:absolute;right:17px;top:15px;z-index:2;width:44px;height:44px;border:1px solid #b88a29;border-radius:11px;background:#171008;color:#f6d678;font-size:25px}.settings-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-card{padding:20px;border:1px solid rgba(192,143,40,.38);border-radius:17px;background:rgba(0,0,0,.2)}.settings-card h3{margin:3px 0 15px;font-size:14px;letter-spacing:.22em;color:#c99d42}.premium-toggle,.volume-control{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:55px;border-bottom:1px solid rgba(190,143,42,.22);font-weight:800}.premium-toggle input{position:absolute;opacity:0}.premium-toggle i{position:relative;width:57px;height:29px;border-radius:20px;background:#36250e;border:1px solid #8c6720}.premium-toggle i:after{content:"";position:absolute;top:3px;left:4px;width:21px;height:21px;border-radius:50%;background:#93702a;transition:.2s}.premium-toggle input:checked+i{background:#9f7119}.premium-toggle input:checked+i:after{left:30px;background:#ffe18a}.volume-control{display:grid;grid-template-columns:auto 1fr}.volume-control input{width:100%;accent-color:#dba63a}.table-options,.language-options,.legal-options{display:grid;gap:8px}.table-options button,.language-options button,.legal-options button{min-height:44px;border:1px solid #85631f;border-radius:10px;background:#0b1710;color:#e9c86f;font:800 13px Georgia,serif}.language-options{grid-template-columns:repeat(3,1fr)}.table-options button{display:flex;align-items:center;gap:12px;padding:7px 12px}.table-options button.active,.language-options button.active{outline:2px solid #edc65d;background:#2a1b08}.table-swatch{width:31px;height:31px;border:2px solid #d2a43f;border-radius:50%}.table-swatch.emerald{background:#07502f}.table-swatch.navy{background:#164d69}.table-swatch.burgundy{background:#672828}.solitaire-settings footer{display:flex;justify-content:center;padding-top:20px}.settings-save{min-width:250px;padding:14px;border:1px solid #edc75e;border-radius:11px;background:linear-gradient(#f5d373,#b77917);color:#1b1002;font:900 15px Georgia,serif}.legal-overlay{width:min(950px,95vw);height:min(720px,92vh);padding:58px 20px 20px}.legal-overlay .legal-frame{height:100%;border-radius:12px}
@media (max-height:520px) and (orientation:landscape){.premium-start-card{grid-template-columns:1.2fr .8fr;min-height:92vh;padding:20px 34px}.premium-start-card h1{font-size:64px}.premium-start-card .start-avatar{width:76px;height:76px}.premium-start-card .start-actions{margin-top:-45px;gap:6px}.premium-start-card .start-actions button{min-height:38px}.character-panel,.tournament-panel{padding:18px}.character-grid{grid-template-columns:repeat(10,1fr);gap:7px}.character-card{padding:5px;font-size:10px}.character-card img{width:42px;height:42px}.settings-columns{gap:10px}.solitaire-settings{padding:18px}.solitaire-settings h2{margin-bottom:8px;font-size:25px}.settings-card{padding:10px}.premium-toggle,.volume-control{min-height:38px}.table-options{grid-template-columns:repeat(3,1fr)}.legal-options{grid-template-columns:repeat(3,1fr)}}

/* START PREMIUM ORDENADO */
.premium-start-card{
  width:min(950px,92vw);
  min-height:min(580px,82vh);
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(230px,.58fr);
  grid-template-rows:245px 1fr;
  column-gap:48px;
  align-items:center;
  padding:58px 58px 50px 66px;
}
.premium-start-card .start-brand{grid-column:1;grid-row:1/3;min-width:0;align-self:center}
.premium-start-card .start-brand h1{margin:12px 0 -8px;font-size:clamp(74px,7vw,110px);line-height:.88;letter-spacing:-.045em;white-space:nowrap}
.premium-start-card .start-brand h2{margin:0;font-size:22px;letter-spacing:.5em}
.premium-start-card .start-rival{grid-column:2;grid-row:1;align-self:start;display:grid;justify-items:center;gap:8px;min-width:0}
.premium-start-card .start-avatar{position:static;width:132px;height:132px}
.premium-start-card .start-rival p{margin:0;line-height:1.15;text-align:center}
.premium-start-card .start-rival strong{display:block;margin-top:6px;max-width:210px;font-size:18px;line-height:1.1}
.premium-start-card .start-actions{position:static;grid-column:2;grid-row:2;align-self:start;width:100%;margin:4px 0 0;display:grid;gap:10px}
.premium-start-card .start-actions button{width:100%;min-height:52px;padding:6px 12px;line-height:1.05}
@media (max-height:700px) and (orientation:landscape){
  .premium-start-card{min-height:88vh;grid-template-rows:175px 1fr;padding:28px 42px 28px 52px;column-gap:38px}
  .premium-start-card .start-brand h1{font-size:72px}
  .premium-start-card .start-avatar{width:92px;height:92px}
  .premium-start-card .start-actions{gap:7px}
  .premium-start-card .start-actions button{min-height:40px}
}
.variant-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-bottom: 4px;
}

.start-actions .variant-list button {
  min-width: 0;
  padding-inline: 8px;
  font-size: clamp(11px, 1.05vw, 14px);
  background: rgba(5, 20, 13, 0.9);
  border-color: rgba(211, 162, 42, 0.58);
}

.start-actions .variant-list button.selected {
  color: #171006;
  background: linear-gradient(180deg, #ffe58d, #c98a19);
  border-color: #ffe58d;
  box-shadow: 0 0 18px rgba(226, 174, 48, 0.34);
}

/* CIERRE ANDROID HORIZONTAL: una sola geometria responsive para todas las pantallas. */
html, body, #app { width:100dvw; height:100dvh; min-height:100%; }
body { overscroll-behavior:none; touch-action:manipulation; -webkit-touch-callout:none; }

@media (orientation:landscape) and (max-height:600px) {
  body { display:grid; place-items:center; background:#010604; }
  .domino-game {
    width:96dvw;
    height:94dvh;
    border:1px solid rgba(203,157,58,.28);
    border-radius:18px;
    overflow:hidden;
    grid-template-rows:44px 34px minmax(0,1fr) 23px 72px 48px;
  }
  .game-header { min-width:0; padding:0 10px; gap:7px; }
  .game-header h1 { font-size:clamp(13px,2vw,18px); white-space:nowrap; }
  .header-back img { width:68px; }
  .game-score { gap:5px; font-size:11px; white-space:nowrap; }
  .header-tools { gap:5px; }
  .restart-button,.settings-button { width:34px; height:34px; font-size:19px; }
  .opponent-zone { min-height:0; }
  .premium-label { min-width:0; gap:7px; font-size:11px; }
  .player-avatar { width:28px; height:28px; }
  .table-zone { grid-template-columns:42px minmax(0,1fr) 42px; padding:2px 7px; }
  .table-end { width:32px; height:32px; font-size:16px; }
  .domino-board { width:min(720px,100%); height:100%; aspect-ratio:auto; }
  .game-message { font-size:11px; line-height:1; }
  .player-zone { padding:0 8px; }
  .player-zone .player-label { height:20px; gap:7px; font-size:11px; }
  .player-hand { height:51px; gap:4px; }
  .player-tile img { width:clamp(62px,8.3vw,86px); }
  .player-tile--selected { transform:translateY(-5px); }
  .game-actions { grid-template-columns:1fr 76px 88px 54px 1fr; gap:7px; padding:2px 10px; }
  .game-action { width:82px; }
  .draw-action { width:70px; }
  .pass-action { width:82px; }
  .stock-info { font-size:9px; }
  .stock-info strong { font-size:13px; }

  .product-screen { width:100dvw; height:100dvh; overflow:hidden; }
  .premium-start-card {
    width:min(820px,94vw); min-height:92vh; max-height:96vh;
    grid-template-columns:minmax(0,1.35fr) minmax(190px,.65fr);
    grid-template-rows:125px 1fr; column-gap:28px; padding:18px 30px 18px 38px;
  }
  .premium-start-card .start-brand h1 { margin:5px 0 -4px; font-size:clamp(50px,10vw,72px); }
  .premium-start-card .start-brand h2 { font-size:15px; }
  .premium-start-card .subtitle,.premium-start-card .eyebrow { font-size:10px; }
  .premium-start-card .start-avatar { width:70px; height:70px; }
  .premium-start-card .start-rival { gap:3px; }
  .premium-start-card .start-rival strong { font-size:14px; }
  .premium-start-card .start-actions { margin:0; gap:5px; }
  .premium-start-card .start-actions button { min-height:32px; font-size:11px; }
  .variant-list { gap:5px; }

  .character-panel,.tournament-panel { width:min(900px,96vw); max-height:96vh; padding:13px 18px; overflow:auto; }
  .character-panel h2,.tournament-panel h2 { margin:4px 0 8px; font-size:21px; }
  .character-grid { grid-template-columns:repeat(10,1fr); gap:5px; }
  .character-card { gap:3px; padding:4px; font-size:9px; }
  .character-card img { width:37px; height:37px; }
  .tournament-track { gap:30px; margin:8px auto 10px; }
  .tournament-track span { width:31px; height:31px; }
  .versus { gap:20px; }
  .versus img { width:70px; height:70px; }
  .versus b { font-size:25px; }
  .tournament-actions { margin-top:10px; }
  .tournament-actions button { min-width:190px; padding:9px; font-size:13px; }
  .trophy { font-size:58px; line-height:1; }
  .round-result h2 { margin:4px 0; font-size:25px; }
  .round-result .result-score { margin:5px; text-align:center; }

  .settings-overlay { padding:6px; }
  .solitaire-settings { width:min(880px,97vw); max-height:97vh; padding:12px 16px; }
  .solitaire-settings header { margin-bottom:7px; }
  .solitaire-settings h2 { margin:0 0 5px; font-size:21px; }
  .settings-x { right:9px; top:8px; width:34px; height:34px; }
  .settings-columns { gap:8px; }
  .settings-card { padding:7px 10px; }
  .settings-card h3 { margin:2px 0 5px; font-size:10px; }
  .premium-toggle,.volume-control { min-height:30px; font-size:11px; }
  .table-options,.language-options,.legal-options { gap:4px; }
  .table-options { grid-template-columns:repeat(3,1fr); }
  .table-options button,.language-options button,.legal-options button { min-height:29px; font-size:9px; }
  .table-swatch { width:20px; height:20px; }
  .solitaire-settings footer { padding-top:7px; }
  .settings-save { min-width:180px; padding:8px; font-size:11px; }
  .legal-overlay { width:98vw; height:97vh; padding:44px 10px 8px; }
}

/* =========================================================
   A1 — DOMINÓ PUCARÁ
   ANDROID LANDSCAPE — PAÑO LIBRE + CONTROLES FLOTANTES

   IMPORTANTE:
   - NO modifica motor.
   - NO modifica grilla 15x12.
   - NO modifica reglas.
   - NO modifica recorrido.
   - NO modifica JavaScript.
   - Para volver atrás: borrar solamente este bloque.
========================================================= */

@media (orientation: landscape) and (max-height: 600px) {

  /* =====================================================
     CONTENEDOR GENERAL
  ===================================================== */

  .domino-game {
    position: relative;

    display: block;

    width: 98dvw;
    height: 97dvh;

    overflow: hidden;

    border: 1px solid rgba(203, 157, 58, 0.28);
    border-radius: 18px;
  }


  /* =====================================================
     HEADER
     Ya no ocupa una fila.

     Solo quedan flotando:
     - VOLVER izquierda
     - REINICIAR derecha
     - AJUSTES derecha
  ===================================================== */

  .game-header {
    position: absolute;

    top: 5px;
    left: 7px;
    right: 7px;

    z-index: 30;

    height: 38px;

    display: flex;
    align-items: center;

    padding: 0;

    border: 0;

    background: transparent;

    pointer-events: none;
  }


  .game-header h1 {
    display: none;
  }


  .game-score {
    display: none;
  }


  .header-back {
    pointer-events: auto;
  }


  .header-back img {
    width: 66px;
  }


  .header-tools {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 5px;

    pointer-events: auto;
  }


  .restart-button,
  .settings-button {
    width: 34px;
    height: 34px;

    font-size: 19px;
  }


  /* =====================================================
     RIVAL
     Flotante en el borde superior.
     No empuja el tablero.
  ===================================================== */

  .opponent-zone {
    position: absolute;

    top: 5px;
    left: 50%;

    z-index: 25;

    width: auto;
    height: 36px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    background: rgba(0, 0, 0, 0.18);

    border-radius: 18px;

    pointer-events: none;
  }


  .opponent-zone .player-label {
    gap: 6px;

    font-size: 10px;
  }


  .opponent-zone .player-avatar {
    width: 26px;
    height: 26px;
  }


  /* =====================================================
     PAÑO

     Esta es ahora la zona principal.

     Dejamos solamente franjas de seguridad:
     arriba    = controles superiores
     abajo     = mano
     laterales = extremos + botones

     LAS FICHAS NO DEBEN ENTRAR EN ESAS FRANJAS.
  ===================================================== */

  .table-zone {
    position: absolute;

    top: 43px;
    right: 42px;
    bottom: 68px;
    left: 42px;

    z-index: 1;

    width: auto;
    height: auto;

    display: grid;

    grid-template-columns:
      30px
      minmax(0, 1fr)
      30px;

    align-items: center;

    padding: 0;

    background: transparent;
  }


  /* =====================================================
     EXTREMOS
  ===================================================== */

  .table-end {
    width: 28px;
    height: 28px;

    font-size: 14px;

    z-index: 5;
  }


  /* =====================================================
     TABLERO MATEMÁTICO

     NO CAMBIAMOS:
     - columnas
     - filas
     - posiciones
     - rotaciones
     - recorrido
  ===================================================== */

 /* A1 — MANTENER LA GEOMETRÍA 15 × 12 */
.domino-board {
  position: relative;

  width: auto;
  height: 100%;

  aspect-ratio: 15 / 12;

  max-width: 100%;

  justify-self: center;
  align-self: center;

  overflow: visible;
}

  /* =====================================================
     MENSAJE DE PARTIDA

     Flotante.
     No ocupa una fila.
  ===================================================== */

  .game-message {
    position: absolute;

    left: 50%;
    bottom: 65px;

    z-index: 20;

    width: auto;
    height: auto;

    transform: translateX(-50%);

    padding: 2px 9px;

    font-size: 10px;
    line-height: 1.1;

    white-space: nowrap;

    border-radius: 10px;

    background: rgba(0, 0, 0, 0.20);

    pointer-events: none;
  }


  /* =====================================================
     JUGADOR + MANO

     Flotante abajo.
     No ocupa una fila del tablero.
  ===================================================== */

  .player-zone {
    position: absolute;

    left: 115px;
    right: 115px;
    bottom: 4px;

    z-index: 20;

    height: 60px;

    padding: 0;

    background: transparent;

    pointer-events: none;
  }


  .player-zone .player-label {
    height: 18px;

    justify-content: center;

    gap: 5px;

    font-size: 10px;

    pointer-events: none;
  }


  .player-zone .player-avatar {
    width: 24px;
    height: 24px;
  }


  .player-hand {
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 3px;

    overflow: visible;

    pointer-events: auto;
  }


  .player-tile {
    pointer-events: auto;
  }


  .player-tile img {
    width: clamp(
      54px,
      7vw,
      72px
    );

    height: auto;
  }


  .player-tile--selected {
    transform: translateY(-5px);
  }


  /* =====================================================
     ACCIONES

     El contenedor cubre la pantalla,
     PERO NO ocupa espacio físico.

     Sus botones quedan flotantes.
  ===================================================== */

  .game-actions {
    position: absolute;

    inset: 0;

    z-index: 22;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    background: transparent;

    pointer-events: none;
  }


  .game-actions > * {
    pointer-events: auto;
  }


  /* =====================================================
     FLECHA IZQUIERDA
     Primer elemento de game-actions.
  ===================================================== */

  .game-actions > :first-child {
    position: absolute;

    left: 5px;
    top: 50%;

    transform: translateY(-50%);

    width: 72px;
  }


  /* =====================================================
     ROBAR
     Abajo izquierda.
  ===================================================== */

  .draw-action {
    position: absolute;

    left: 6px;
    bottom: 7px;

    width: 72px;

    justify-self: auto;
  }


  .draw-action span {
    right: 1px;
    bottom: 0;

    min-width: 21px;

    padding: 2px;

    font-size: 10px;
  }


  /* =====================================================
     PASAR
     Abajo derecha, pero elevado para dejar el POZO.
  ===================================================== */

  .pass-action {
    position: absolute;

    right: 6px;
    bottom: 46px;

    width: 76px;

    justify-self: auto;
  }


  /* =====================================================
     POZO
     Esquina inferior derecha.
  ===================================================== */

  .stock-info {
    position: absolute;

    right: 16px;
    bottom: 5px;

    width: 54px;

    text-align: center;

    font-size: 8px;

    line-height: 1;
  }


  .stock-info strong {
    margin-top: 1px;

    font-size: 13px;
  }


  /* =====================================================
     FLECHA DERECHA
     Último elemento de game-actions.
  ===================================================== */

  .game-actions > :last-child {
    position: absolute;

    right: 5px;
    top: 50%;

    transform: translateY(-50%);

    width: 72px;
  }


  /* =====================================================
     BOTONES IMAGEN
  ===================================================== */

  .game-action {
    min-width: 0;

    padding: 0;

    background: transparent;
  }

}
/* A1 — ZOOM DEL TABLERO COMPLETO */
.domino-board {
  position: relative;

  width: auto;
  height: 100%;

  aspect-ratio: 15 / 12;

  max-width: 100%;

  justify-self: center;
  align-self: center;

  overflow: visible;

  transform: scale(1.20);
  transform-origin: center center;
}