:root {
      --bg: #06110d;
      --panel: #10271f;
      --panel2: #173b30;
      --gold: #ffd56a;
      --cream: #f7f2df;
      --text: #f7f2df;
      --muted: #a9bbb0;
      --ok: #7df0a6;
      --bad: #ff7f83;
      --wood: #4b2615;
      --wood2: #251007;
      --cloth: #087c3c;
      --cloth2: #075f31;
    }

    * { box-sizing: border-box; }

    html, body { margin: 0; min-height: 100%; }

    body {
      min-height: 100dvh;
      font-family: Arial, Helvetica, sans-serif;
      background: radial-gradient(circle at top, #153d2f 0, var(--bg) 60%, #010504 100%);
      color: var(--cream);
      padding: 12px;
      overscroll-behavior: none;
      -webkit-text-size-adjust: 100%;
    }

    .app { width: min(1220px, 100%); margin: 0 auto; }

    .hud {
      background: rgba(3, 16, 12, .88);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 18px;
      padding: 12px;
      box-shadow: 0 12px 36px rgba(0,0,0,.35);
      margin-bottom: 10px;
    }

    .hud-row {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(270px, .9fr);
      align-items: center;
      gap: 12px;
    }

    h1 {
      margin: 0;
      font-size: clamp(26px, 4.1vw, 48px);
      letter-spacing: -.04em;
      line-height: .95;
    }

    .mini-help {
      color: var(--muted);
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.25;
    }

    .app-subtitle {
      margin: 8px 0 0;
      color: var(--gold);
      font-size: clamp(16px, 2.4vw, 23px);
      font-weight: 900;
      letter-spacing: .01em;
      line-height: 1.1;
      text-shadow: 0 2px 12px rgba(0,0,0,.35);
    }

    .app-subtitle .highlight {
      color: var(--cream);
    }


    .step-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .step-btn {
      min-height: 38px;
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: var(--muted);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: none;
    }

    .step-btn.active {
      background: rgba(255,213,106,.18);
      color: var(--gold);
      border-color: rgba(255,213,106,.65);
      box-shadow: 0 0 0 2px rgba(255,213,106,.10), 0 0 16px rgba(255,213,106,.15);
    }

    .step-btn.done:not(.active) {
      color: var(--cream);
      border-color: rgba(125,240,166,.32);
    }

    .scoreboard {
      display: grid;
      grid-template-columns: repeat(3, minmax(74px, 1fr)) minmax(82px, .82fr);
      gap: 8px;
    }

    .stat {
      background: linear-gradient(180deg, var(--panel2), var(--panel));
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 13px;
      padding: 9px 10px;
      text-align: center;
    }

    .stat .label {
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 800;
    }

    .stat .value {
      color: var(--gold);
      font-size: 26px;
      font-weight: 900;
      line-height: 1.05;
      margin-top: 2px;
    }



    .reset-score-btn {
      min-height: 100%;
      border-radius: 13px;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .03em;
      color: var(--cream);
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18);
      white-space: nowrap;
    }

    .reset-score-btn:hover,
    .reset-score-btn:focus-visible {
      color: #fff7d1;
      border-color: rgba(255,213,106,.44);
      box-shadow: 0 0 0 2px rgba(255,213,106,.12), 0 10px 24px rgba(0,0,0,.26);
    }

    .buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      position: relative;
      z-index: 8;
    }

    .buttons button {
      flex: 0 1 auto;
      white-space: nowrap;
    }

    .table-action-bar {
      margin: 12px 0 0;
      padding: 10px;
      border-radius: 16px;
      background: rgba(1, 12, 9, .58);
      border: 1px solid rgba(255,255,255,.08);
      justify-content: center;
      position: relative;
      z-index: 2;
      pointer-events: auto;
    }

    .video-practice-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;
      padding: 8px 0 0;
    }

    .video-practice-actions button {
      min-height: 44px;
      padding-inline: 18px;
    }

    button {
      border: 0;
      color: #1a1206;
      background: var(--gold);
      font-weight: 900;
      border-radius: 12px;
      padding: 11px 14px;
      min-height: 44px;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,.14);
    }

    button.secondary { background: #315d4e; color: var(--cream); }
    button.place-on { background: #e0a733; color: #1a1206; }
    button.danger { background: #703434; color: var(--cream); }
    button:active { transform: translateY(1px); }
    button:disabled { opacity: .52; cursor: not-allowed; }

    .guide {
      margin-top: 10px;
      border: 1px solid rgba(255,213,106,.25);
      background: rgba(0,0,0,.22);
      border-radius: 14px;
      padding: 10px 12px;
      color: var(--muted);
      line-height: 1.35;
      font-size: 14px;
      max-height: 96px;
      overflow: auto;
    }

    .guide strong { color: var(--cream); }
    .guide .route { color: var(--gold); font-weight: 900; }
    .guide .ok { color: var(--ok); font-weight: 900; }
    .guide .bad { color: var(--bad); font-weight: 900; }

    .practice-panel {
      display: none;
      margin-top: 10px;
      border: 1px solid rgba(125,240,166,.25);
      background: linear-gradient(180deg, rgba(23,59,48,.76), rgba(3,16,12,.65));
      border-radius: 16px;
      padding: 10px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .practice-panel.open { display: block; }
    .practice-top {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .practice-title {
      color: var(--cream);
      font-weight: 900;
      letter-spacing: -.01em;
    }
    .practice-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }
    .practice-controls select {
      min-height: 40px;
      border-radius: 11px;
      border: 1px solid rgba(255,213,106,.35);
      background: rgba(0,0,0,.25);
      color: var(--cream);
      font-weight: 800;
      padding: 0 10px;
      max-width: 290px;
    }
    .practice-controls button { min-height: 40px; padding: 8px 10px; }

    .practice-select-row,
    .practice-action-row,
    .practice-nav-row {
      width: 100%;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 8px;
    }
    .practice-select-row select { flex: 1 1 280px; max-width: 100%; }
    .compact-select-row {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) minmax(230px, 340px);
      align-items: stretch;
      gap: 8px;
    }
    .compact-select-row button { width: 100%; font-weight: 900; }
    @media (max-width: 720px) {
      .compact-select-row { grid-template-columns: 1fr; }
    }
    .practice-action-row button { flex: 1 1 145px; }
    .practice-nav-row button { flex: 1 1 120px; }

    .align-panel {
      display: none;
      margin-top: 12px;
      padding: 12px;
      border-radius: 18px;
      border: 1px solid rgba(255,213,106,.22);
      background: rgba(255,255,255,.055);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
    }
    .align-panel.open { display: none; }
    .align-title {
      font-weight: 900;
      color: var(--cream);
      margin-bottom: 8px;
    }
    .align-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .align-controls button {
      min-height: 38px;
      padding: 8px 10px;
      border-radius: 14px;
      font-size: 14px;
      white-space: nowrap;
    }
    .align-readout {
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }
    .align-readout .gold { color: var(--gold); font-weight: 900; }
    .practice-info {
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }
    .practice-info strong, .practice-info .gold { color: var(--gold); font-weight: 900; }


    /* Ocultar secciones informativas solicitadas */
    #guide,
    #practiceInfo {
      display: none !important;
      height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
    }
    .practice-on { background: #7df0a6 !important; color: #06110d !important; }

    .table-shell {
      background: linear-gradient(180deg, #5a321f, var(--wood2));
      border-radius: 30px;
      padding: 20px;
      box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 0 0 5px rgba(255,255,255,.045);
    }

    .table-shell {
      overflow: visible;
    }


    .table {
      position: relative;
      width: 100%;
      aspect-ratio: 1000 / 560;
      min-height: 260px;
      /* El taco debe poder sobresalir de la mesa cuando se hala para dar potencia. */
      overflow: visible;
      border-radius: 20px;
      background: linear-gradient(145deg, var(--wood), #291308);
      box-shadow: inset 0 0 34px rgba(0,0,0,.75);
      user-select: none;
      touch-action: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .cloth {
      position: absolute;
      left: 42px; right: 42px; top: 42px; bottom: 42px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.08), transparent 18%),
        linear-gradient(135deg, #0d8849, var(--cloth2));
      border: 2px solid rgba(255,255,255,.07);
      box-shadow: inset 0 0 58px rgba(0,0,0,.42);
    }

    .diamond {
      position: absolute;
      width: 10px; height: 10px;
      transform: translate(-50%, -50%) rotate(45deg);
      background: rgba(255,213,106,.88);
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(255,213,106,.35);
      pointer-events: none;
    }

    .ball {
      position: absolute;
      width: 24px; height: 24px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 5;
      border: 1.5px solid rgba(0,0,0,.46);
      box-shadow: 4px 7px 9px rgba(0,0,0,.30), inset -5px -6px 9px rgba(0,0,0,.24), inset 4px 4px 7px rgba(255,255,255,.72);
      pointer-events: none;
    }
    .ball.cue { background: #f8f7ed; border-color: #d7d2bd; }
    .ball.yellow { background: #ffd643; border-color: #a57900; }
    .ball.red { background: #dd1e30; border-color: #760711; }
    .ball::after {
      content: '';
      position: absolute;
      width: 6px; height: 6px;
      left: 5px; top: 4px;
      border-radius: 50%;
      background: rgba(255,255,255,.68);
    }

    .table.placing { cursor: grab; }
    .table.placing .cloth {
      box-shadow: inset 0 0 58px rgba(0,0,0,.42), inset 0 0 0 3px rgba(255,213,106,.35);
    }
    .table.placing .ball {
      outline: 2px dashed rgba(255,213,106,.85);
      outline-offset: 4px;
      box-shadow: 0 0 18px rgba(255,213,106,.30), 4px 7px 9px rgba(0,0,0,.30), inset -5px -6px 9px rgba(0,0,0,.24), inset 4px 4px 7px rgba(255,255,255,.72);
    }
    .ball.dragging-ball { transform: translate(-50%, -50%) scale(1.15); }

    .effect-control {
      position: absolute;
      z-index: 12;
      transform: translate(-50%, -50%);
      touch-action: none;
      pointer-events: none;
      transition: left .12s ease, top .12s ease, opacity .12s ease;
    }
    .effect-control.hidden { opacity: 0; pointer-events: none; }

    .effect-ball {
      position: relative;
      width: 64px; height: 64px;
      border-radius: 50%;
      cursor: default;
      background: radial-gradient(circle at 34% 28%, #fff, #eee9d8 58%, #c8c2aa 100%);
      border: 1px solid rgba(0,0,0,.38);
      box-shadow: inset -7px -8px 11px rgba(0,0,0,.22), inset 5px 5px 8px rgba(255,255,255,.76), 0 5px 18px rgba(0,0,0,.32);
      touch-action: none;
      pointer-events: none;
    }
    .effect-ball:active { cursor: default; }

    .effect-dot {
      position: absolute;
      width: 16px; height: 16px;
      border-radius: 50%;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      background: #d7192a;
      border: 2px solid #fff8dc;
      box-shadow: 0 0 16px rgba(215,25,42,.72);
      transition: left .06s linear, top .06s linear;
      z-index: 2;
      pointer-events: auto;
      cursor: grab;
      touch-action: none;
    }
    .effect-dot:active { cursor: grabbing; }
    .effect-dot::after {
      content: '';
      position: absolute;
      inset: -18px;
      border-radius: 50%;
      background: transparent;
    }

    .rail-mark {
      position: absolute;
      width: 14px; height: 14px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 14px rgba(255,213,106,.85);
      z-index: 9;
      animation: fadeMark 1.2s ease-out forwards;
      pointer-events: none;
    }

    .power-badge {
      position: absolute;
      z-index: 12;
      transform: translate(-50%, -50%);
      background: rgba(1,8,6,.75);
      border: 1px solid rgba(255,213,106,.42);
      color: var(--gold);
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 13px;
      font-weight: 900;
      pointer-events: none;
      box-shadow: 0 0 16px rgba(0,0,0,.30);
    }



    .power-badge.long-shot-power {
      background: rgba(61, 32, 0, .88);
      border-color: rgba(255, 213, 106, .92);
      color: #fff3bd;
      box-shadow: 0 0 20px rgba(255, 213, 106, .38), 0 0 34px rgba(255, 153, 0, .22);
    }

    .power-badge.long-shot-needed {
      animation: longShotPulse 1.05s ease-in-out infinite alternate;
    }

    @keyframes longShotPulse {
      from { transform: translate(-50%, -50%) scale(1); }
      to { transform: translate(-50%, -50%) scale(1.06); }
    }

    svg.overlay {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      /* Permite que el taco SVG no quede cortado por el viewBox cuando sale de la mesa. */
      overflow: visible;
    }

    #recommendationLine {
      stroke: url(#fantasyGradient);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 10 8;
      filter: url(#fantasyGlow);
      opacity: .95;
      animation: fantasyFlow 4s linear infinite;
    }

    #referenceGuideImage {
      pointer-events: none;
      mix-blend-mode: screen;
      filter: drop-shadow(0 0 7px rgba(154,248,255,.45));
    }


    #masterGuideLine {
      stroke: rgba(151, 255, 221, .34);
      stroke-width: 23;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 16px rgba(151,255,221,.55));
      opacity: .92;
    }

    #masterGuideLine.guide-main-active {
      animation: masterGuidePulse 1.9s ease-in-out infinite alternate;
    }

    @keyframes masterGuidePulse {
      from { stroke-width: 19; opacity: .62; }
      to { stroke-width: 26; opacity: .90; }
    }

    #aimPreview {
      stroke: rgba(255,237,160,.98);
      stroke-width: 5;
      stroke-dasharray: 12 7;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 10px rgba(255,213,106,.72));
    }
    #cueProjectionLine {
      stroke: rgba(154,248,255,.98);
      stroke-width: 6;
      stroke-linecap: round;
      filter: drop-shadow(0 0 9px rgba(104,235,255,.72));
    }
    #cueBallGuide {
      opacity: 0;
    }
    #cueGuideRing {
      fill: rgba(255,255,255,.08);
      stroke: rgba(154,248,255,.98);
      stroke-width: 3;
      filter: drop-shadow(0 0 8px rgba(104,235,255,.42));
    }
    #cueGuideAxis {
      stroke: rgba(255,213,106,.95);
      stroke-width: 3.5;
      stroke-linecap: round;
      filter: drop-shadow(0 0 6px rgba(255,213,106,.48));
    }
    #cueGuideCross {
      stroke: rgba(255,255,255,.95);
      stroke-width: 2.5;
      stroke-linecap: round;
      opacity: .9;
    }
    #cueGuideSpinDot {
      fill: rgba(74,147,255,.96);
      stroke: rgba(255,255,255,.98);
      stroke-width: 2;
      filter: drop-shadow(0 0 7px rgba(74,147,255,.55));
    }
    #pathLine {
      stroke: rgba(255,255,255,.92);
      stroke-width: 4.2;
      stroke-dasharray: 9 7;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 7px rgba(255,255,255,.55));
    }
    #cueStick {
      stroke: rgba(255,213,106,.98);
      stroke-width: 9;
      stroke-linecap: round;
      filter: drop-shadow(0 0 4px rgba(0,0,0,.35));
    }
    #cueTip {
      stroke: rgba(255,255,255,.95);
      stroke-width: 5;
      stroke-linecap: round;
    }
    #cueHandle {
      fill: rgba(255,213,106,.95);
      stroke: rgba(0,0,0,.65);
      stroke-width: 2;
      filter: drop-shadow(0 0 8px rgba(255,213,106,.30));
    }

    /* Ajuste taco fuera de mesa: las piezas del taco pueden dibujarse fuera del rectángulo de juego. */
    #cueStick, #cueTip, #cueHandle {
      pointer-events: none;
    }

    .rec-event circle {
      fill: rgba(255,231,125,.96);
      stroke: rgba(255,255,255,.96);
      stroke-width: 2;
      filter: url(#fantasyGlow);
    }
    .rec-event text {
      fill: #fff9ef;
      font-size: 14px;
      font-weight: 900;
      paint-order: stroke;
      stroke: rgba(27,18,49,.9);
      stroke-width: 3px;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    .practice-marker circle {
      fill: rgba(125,240,166,.18);
      stroke: rgba(125,240,166,.95);
      stroke-width: 3;
      filter: drop-shadow(0 0 6px rgba(125,240,166,.38));
    }
    .practice-marker.aim circle {
      fill: rgba(255,213,106,.20);
      stroke: rgba(255,213,106,.95);
    }
    .practice-marker text {
      fill: #fff9ef;
      font-size: 15px;
      font-weight: 900;
      paint-order: stroke;
      stroke: rgba(0,0,0,.88);
      stroke-width: 4px;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    @keyframes fadeMark {
      from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      to { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
    }
    @keyframes fantasyFlow {
      from { stroke-dashoffset: 0; }
      to { stroke-dashoffset: -144; }
    }


    .image-modal {
      position: fixed;
      inset: 0;
      z-index: 1001;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(0,0,0,.76);
      backdrop-filter: blur(6px);
    }
    .image-modal.open { display: flex; }
    .image-card {
      width: min(1100px, 100%);
      max-height: min(92dvh, 820px);
      overflow: auto;
      background: linear-gradient(180deg, #112b22, #06110d);
      border: 1px solid rgba(255,213,106,.32);
      border-radius: 22px;
      box-shadow: 0 24px 90px rgba(0,0,0,.72);
      padding: 16px;
    }
    .image-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 12px;
    }
    .image-item {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 16px;
      padding: 10px;
    }
    .image-item h3 {
      margin: 0 0 8px;
      color: var(--cream);
      font-size: 16px;
    }
    .image-item img {
      width: 100%;
      display: block;
      border-radius: 12px;
      background: #000;
      border: 1px solid rgba(255,255,255,.1);
      object-fit: contain;
    }
    .image-item p {
      display: none;
    }
    .image-note {
      display: none;
    }

    .ball-viewer-panel {
      margin-top: 12px;
      padding: 12px 14px;
      background: linear-gradient(180deg, rgba(13,43,34,.92), rgba(6,17,13,.92));
      border: 1px solid rgba(255,213,106,.20);
      border-radius: 18px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.18);
    }
    .ball-viewer-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .ball-viewer-title {
      color: var(--cream);
      font-size: clamp(18px, 2vw, 24px);
      font-weight: 900;
      line-height: 1.05;
    }
    .ball-viewer-subtitle {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
      max-width: 820px;
    }
    .ball-viewer-status {
      align-self: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,213,106,.12);
      border: 1px solid rgba(255,213,106,.28);
      color: var(--gold);
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }
    .ball-viewer-tools {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;
    }
    .ball-viewer-tools button {
      min-height: 34px;
      padding: 7px 10px;
      font-size: 13px;
      border-radius: 999px;
    }
    .contact-viewer-card {
      margin-top: 12px;
      padding: 12px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(9,19,17,.96), rgba(3,8,7,.96));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 28px rgba(0,0,0,.42);
    }
    .contact-viewer-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .contact-viewer-title {
      color: var(--cream);
      font-size: 16px;
      font-weight: 900;
      line-height: 1.1;
    }
    .contact-viewer-subtitle {
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      max-width: 780px;
    }
    .contact-viewer-legend {
      align-self: center;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255,213,106,.12);
      border: 1px solid rgba(255,213,106,.26);
      color: var(--gold);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .contact-viewer-stage {
      position: relative;
      width: 100%;
      min-height: 160px;
      aspect-ratio: 21 / 6;
      margin-top: 10px;
      overflow: hidden;
      border-radius: 18px;
      background:
        radial-gradient(circle at 36% 30%, rgba(255,255,255,.08), transparent 20%),
        radial-gradient(circle at 72% 34%, rgba(255,255,255,.07), transparent 22%),
        linear-gradient(180deg, #050a09 0%, #010303 100%);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 34px rgba(0,0,0,.5);
    }
    .contact-viewer-stage::after {
      content: '';
      position: absolute;
      inset: 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.04);
      pointer-events: none;
    }
    .contact-cue-stick,
    .contact-aim-line {
      position: absolute;
      transform-origin: 100% 50%;
      pointer-events: none;
    }
    .contact-cue-stick {
      height: 12px;
      border-radius: 999px;
      background: linear-gradient(90deg, #4a220d 0%, #b67a34 32%, #d59f59 60%, #efe1ad 100%);
      box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(0,0,0,.25);
      z-index: 1;
    }
    .contact-aim-line {
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(137,230,255,.20), rgba(137,230,255,.85));
      box-shadow: 0 0 10px rgba(137,230,255,.25);
      z-index: 2;
      opacity: .9;
    }
    .contact-ball {
      position: absolute;
      width: clamp(92px, 13vw, 132px);
      height: clamp(92px, 13vw, 132px);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 18px 30px rgba(0,0,0,.42), inset -16px -20px 26px rgba(0,0,0,.20), inset 12px 14px 20px rgba(255,255,255,.10);
      pointer-events: none;
    }
    .contact-ball.cue {
      z-index: 4;
      background: radial-gradient(circle at 38% 30%, #ffffff 0%, #fbf8eb 44%, #e8dfc3 75%, #b8b19d 100%);
    }
    .contact-ball.target.red {
      z-index: 3;
      background: radial-gradient(circle at 35% 28%, #ff9ca7 0%, #e42a3d 38%, #a90a19 75%, #6a020d 100%);
    }
    .contact-ball.target.yellow {
      z-index: 3;
      background: radial-gradient(circle at 35% 28%, #fff4b2 0%, #ffd633 38%, #d49f00 72%, #8a6200 100%);
    }
    .contact-dot {
      position: absolute;
      width: 15%;
      height: 15%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #6eb2ff 0%, #1f6bdf 62%, #0d46a7 100%);
      border: 1px solid rgba(255,255,255,.60);
      box-shadow: 0 0 12px rgba(31,107,223,.48);
      pointer-events: none;
    }
    .contact-viewer-caption {
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .ball-viewer-stage {
      position: relative;
      width: 100%;
      min-height: 180px;
      aspect-ratio: 21 / 8;
      margin-top: 12px;
      border-radius: 18px;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.06), transparent 28%),
        radial-gradient(circle at 82% 24%, rgba(255,255,255,.05), transparent 25%),
        linear-gradient(180deg, #040908 0%, #020404 100%);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 24px rgba(0,0,0,.55);
      touch-action: none;
      user-select: none;
    }
    .ball-viewer-stage::before {
      content: '';
      position: absolute;
      inset: 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.04);
      background:
        linear-gradient(90deg, transparent 24.5%, rgba(255,255,255,.035) 25%, transparent 25.5%, transparent 49.5%, rgba(255,255,255,.035) 50%, transparent 50.5%, transparent 74.5%, rgba(255,255,255,.035) 75%, transparent 75.5%),
        linear-gradient(transparent 24.5%, rgba(255,255,255,.03) 25%, transparent 25.5%, transparent 49.5%, rgba(255,255,255,.03) 50%, transparent 50.5%, transparent 74.5%, rgba(255,255,255,.03) 75%, transparent 75.5%);
      pointer-events: none;
    }
    .ball-viewer-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 4;
      pointer-events: none;
      overflow: visible;
    }
    .viewer-relation {
      stroke: rgba(255,255,255,.20);
      stroke-width: 2;
      stroke-dasharray: 6 7;
      stroke-linecap: round;
    }
    .viewer-relation.primary {
      stroke: rgba(255,213,106,.48);
      stroke-width: 3;
    }
    .viewer-guide-preview {
      stroke: rgba(123,240,166,.88);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      filter: drop-shadow(0 0 6px rgba(123,240,166,.35));
    }
    .viewer-guide-preview.off { opacity: 0; }
    .viewer-guide-dot {
      fill: rgba(255,213,106,.96);
      stroke: rgba(255,255,255,.92);
      stroke-width: 2;
      filter: drop-shadow(0 0 5px rgba(255,213,106,.45));
    }
    .viewer-guide-dot.off { opacity: 0; }
    .viewer-ball {
      position: absolute;
      width: clamp(52px, 7vw, 88px);
      height: clamp(52px, 7vw, 88px);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 2px solid rgba(255,255,255,.18);
      box-shadow: 0 16px 28px rgba(0,0,0,.34), inset -12px -16px 18px rgba(0,0,0,.16), inset 12px 14px 20px rgba(255,255,255,.08);
      cursor: pointer;
      transition: left .08s linear, top .08s linear, transform .16s ease, box-shadow .16s ease;
      appearance: none;
      -webkit-appearance: none;
      outline: none;
      padding: 0;
    }
    .viewer-ball:hover { transform: translate(-50%, -50%) scale(1.04); }
    .viewer-ball.active {
      transform: translate(-50%, -50%) scale(1.09);
      box-shadow: 0 0 0 2px rgba(255,213,106,.65), 0 18px 34px rgba(0,0,0,.44), inset -12px -16px 18px rgba(0,0,0,.16), inset 12px 14px 20px rgba(255,255,255,.08);
    }
    .viewer-ball:focus-visible {
      box-shadow: 0 0 0 3px rgba(255,213,106,.75), 0 18px 34px rgba(0,0,0,.44), inset -12px -16px 18px rgba(0,0,0,.16), inset 12px 14px 20px rgba(255,255,255,.08);
    }
    .viewer-ball.cue {
      background: radial-gradient(circle at 38% 32%, #ffffff 0%, #fbf8eb 44%, #e9e1c6 76%, #bab39d 100%);
    }
    .viewer-ball.red {
      background: radial-gradient(circle at 35% 30%, #ff9ca7 0%, #e42a3d 38%, #a90a19 75%, #6a020d 100%);
    }
    .viewer-ball.yellow {
      background: radial-gradient(circle at 35% 30%, #fff3ad 0%, #ffd633 38%, #d5a600 72%, #8a6200 100%);
    }
    .viewer-dot {
      position: absolute;
      width: 16%;
      height: 16%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #6eb2ff 0%, #1f6bdf 62%, #0d46a7 100%);
      border: 1px solid rgba(255,255,255,.55);
      box-shadow: 0 0 10px rgba(31,107,223,.45);
      pointer-events: none;
    }
    .ball-viewer-readout {
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    @media (max-width: 900px) {
      .ball-viewer-head {
        flex-direction: column;
        align-items: stretch;
      }
      .ball-viewer-status {
        align-self: flex-start;
      }
      .ball-viewer-stage {
        min-height: 160px;
        aspect-ratio: 16 / 8;
      }
    }

    @media (max-width: 640px) {
      .ball-viewer-panel { padding: 10px; }
      .ball-viewer-subtitle { font-size: 12px; }
      .contact-viewer-card { padding: 10px; }
      .contact-viewer-stage { min-height: 136px; aspect-ratio: 16 / 7; }
      .ball-viewer-stage { min-height: 145px; aspect-ratio: 16 / 9; }
    }

    @media (max-width: 800px) {
      .image-grid { grid-template-columns: 1fr; }
    }

    .video-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(0, 0, 0, .72);
      backdrop-filter: blur(6px);
    }

    .video-modal.open { display: flex; }

    .video-card {
      width: min(1560px, 100%);
      max-height: min(96dvh, 920px);
      overflow: auto;
      background: linear-gradient(180deg, #112b22, #06110d);
      border: 1px solid rgba(255,213,106,.32);
      border-radius: 22px;
      box-shadow: 0 24px 90px rgba(0,0,0,.72);
      padding: 14px;
    }

    .video-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .video-head h2 {
      margin: 0;
      color: var(--cream);
      font-size: clamp(20px, 3vw, 30px);
      line-height: 1.05;
    }

    .video-head p {
      margin: 6px 0 0;
      color: var(--muted);
      line-height: 1.35;
      font-size: 14px;
    }

    .close-video {
      min-width: 44px;
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 50%;
      font-size: 22px;
      line-height: 1;
      flex: 0 0 auto;
    }

    .video-frame-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 16px;
      overflow: hidden;
      background: #000;
      border: 1px solid rgba(255,255,255,.12);
    }

    .video-frame-wrap video,
    .video-frame-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .lightweight-guide-box {
      min-height: 132px;
      aspect-ratio: auto;
      display: grid;
      place-items: center;
      padding: 18px;
      background: linear-gradient(135deg, rgba(255,213,106,.12), rgba(255,255,255,.05));
    }
    .lightweight-guide-message {
      color: rgba(255,255,255,.86);
      line-height: 1.45;
      font-size: 14px;
      text-align: center;
      max-width: 520px;
    }


    .video-source-block {
      display: grid;
      gap: 8px;
      min-width: 0;
      align-content: start;
    }
    .video-credit {
      margin: 0;
      padding: 10px 12px;
      border: 1px solid rgba(255,213,106,.25);
      border-radius: 12px;
      background: rgba(0,0,0,.22);
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.35;
    }
    .video-credit strong {
      color: var(--gold);
    }
    .video-credit a {
      color: var(--cream);
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .video-study-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(460px, .92fr);
      gap: 14px;
      align-items: stretch;
    }
    .video-modal-controls {
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      margin: 0 0 12px;
      pointer-events: auto;
    }
    .video-modal-controls button {
      min-height: 42px;
      padding: 9px 14px;
    }
    .video-modal-controls #videoPrevShotBtn,
    .video-modal-controls #videoNextShotBtn {
      width: 100%;
    }
    .video-modal-controls #closeVideoBtn {
      min-width: 118px;
    }
    .video-modal-status {
      color: var(--gold);
      font-weight: 900;
      text-align: center;
      white-space: nowrap;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(255,213,106,.28);
      background: rgba(0,0,0,.18);
    }
    @media (max-width: 760px) {
      .video-modal-controls { grid-template-columns: 1fr 1fr; }
      .video-modal-controls #closeVideoBtn { grid-column: 1 / -1; }
      .video-modal-status { white-space: normal; }
    }

    .video-images-panel {
      border: 1px solid rgba(255,213,106,.28);
      border-radius: 16px;
      background: rgba(0,0,0,.20);
      padding: 12px;
      height: calc(96dvh - 92px);
      max-height: 820px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .video-images-panel h3 {
      margin: 0 0 10px;
      color: var(--gold);
      font-size: 18px;
      line-height: 1.15;
    }

    .video-images-grid {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 10px;
      flex: 1;
      min-height: 0;
    }

    .video-image-item {
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .video-image-item h4 {
      margin: 0 0 6px;
      color: var(--cream);
      font-size: 14px;
    }

    .video-image-item img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none;
      object-fit: contain;
      border-radius: 10px;
      background: #020504;
      border: 1px solid rgba(255,255,255,.08);
      flex: 1;
    }

    .video-image-item p {
      display: none;
    }

    .video-images-note {
      display: none;
    }

    .video-observation {
      display: block;
      margin: 12px 0 14px;
      border: 1px solid rgba(255,213,106,.30);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(255,213,106,.10), rgba(46,99,80,.16));
      padding: 14px 16px;
      color: var(--muted);
      line-height: 1.45;
      font-size: 15px;
    }
    .video-observation h3 {
      margin: 0 0 6px;
      color: var(--gold);
      font-size: 18px;
      line-height: 1.15;
    }
    .video-observation h4 {
      margin: 0 0 10px;
      color: var(--cream);
      font-size: 16px;
      line-height: 1.2;
    }
    .video-observation .shot-description {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .video-observation .module-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 8px;
      color: var(--cream);
      font-weight: 900;
    }
    .video-observation .module-pill {
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      border-radius: 999px;
      padding: 4px 9px;
      white-space: nowrap;
    }
    .video-observation p {
      margin: 6px 0 0;
    }
    .video-observation strong {
      color: var(--cream);
    }

    @media (max-width: 980px) {
      .video-study-layout { grid-template-columns: 1fr; }
      .video-images-panel { max-height: none; }
      .video-images-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 640px) {
      .video-images-grid { grid-template-columns: 1fr; }
    }

    .video-tips {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 10px;
    }

    .video-tip {
      background: rgba(255,255,255,.065);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 13px;
      padding: 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.3;
    }

    .video-tip strong { color: var(--gold); display: block; margin-bottom: 4px; }

    .deflection-guide-panel {
      margin-top: 12px;
      padding: 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,213,106,.22);
      background: linear-gradient(180deg, rgba(7,41,32,.88), rgba(5,20,15,.94));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .deflection-guide-head {
      display: flex;
      gap: 12px;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .deflection-guide-head h3 {
      margin: 0 0 6px;
      color: var(--cream);
      font-size: 18px;
    }
    .deflection-guide-head p,
    .deflection-guide-readout,
    .deflection-guide-status {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .deflection-guide-readout strong,
    .deflection-guide-status strong { color: var(--gold); }
    .deflection-guide-layout {
      display: grid;
      grid-template-columns: minmax(320px, 1.2fr) minmax(220px, .9fr);
      gap: 14px;
      align-items: stretch;
    }
    .deflection-guide-stage-wrap {
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.08), rgba(0,0,0,.10) 32%), linear-gradient(180deg, rgba(14,98,61,.88), rgba(5,54,33,.94));
      overflow: hidden;
      min-height: 208px;
      position: relative;
    }
    .deflection-guide-stage {
      width: 100%;
      height: 100%;
      display: block;
    }
    .deflection-guide-controls {
      display: grid;
      gap: 12px;
      align-content: start;
    }
    .deflection-guide-buttons {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .deflection-btn {
      min-height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(59,108,90,.92);
      color: var(--text);
      font-weight: 900;
      cursor: pointer;
      padding: 8px 10px;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
    }
    .deflection-btn.active {
      background: linear-gradient(180deg, #ffe07d, #f2c85b);
      color: #1c1406;
      border-color: rgba(255,255,255,.2);
    }
    .deflection-guide-legend {
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .deflection-guide-pill {
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      padding: 6px 8px;
      text-align: center;
      font-size: 12px;
      color: var(--muted);
    }
    .deflection-guide-pill strong { color: var(--cream); display: block; }
    @media (max-width: 920px) {
      .deflection-guide-layout { grid-template-columns: 1fr; }
      .deflection-guide-stage-wrap { min-height: 190px; }
    }

    /* Reemplazo visual de la guía dinámica: dos bolas superpuestas en tiempo real */
    .deflection-guide-panel {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,213,106,.22);
      background: linear-gradient(180deg, rgba(7,41,32,.88), rgba(5,20,15,.94));
    }
    .deflection-guide-head {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      flex-wrap: wrap;
    }
    .deflection-guide-layout {
      display: grid;
      grid-template-columns: minmax(240px, 270px) 1fr;
      gap: 14px;
      align-items: center;
    }
    .deflection-guide-stage-wrap {
      min-height: 128px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: radial-gradient(circle at 55% 32%, rgba(255,255,255,.06), rgba(0,0,0,.18) 34%), linear-gradient(180deg, rgba(3,7,7,.98), rgba(8,14,14,.98));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      overflow: hidden;
    }
    .deflection-guide-stage {
      display: block;
      width: 100%;
      max-width: 250px;
      height: 116px;
    }
    .deflection-guide-controls {
      display: grid;
      gap: 10px;
      align-content: center;
    }
    .deflection-guide-buttons {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    .deflection-guide-status {
      border-radius: 12px;
      padding: 8px 10px;
      background: rgba(0,0,0,.17);
      border: 1px solid rgba(255,255,255,.08);
    }
    @media (max-width: 920px) {
      .deflection-guide-layout { grid-template-columns: 1fr; }
      .deflection-guide-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .deflection-guide-stage { max-width: 260px; }
    }

    @media (max-width: 860px) {
      body { padding: 8px; }
      .hud { padding: 9px; border-radius: 14px; }
      .hud-row { grid-template-columns: 1fr; gap: 8px; }
      h1 { font-size: 27px; }
      .step-selector { gap: 6px; }
      .step-btn { flex: 1 1 30%; padding: 8px 7px; font-size: 13px; }
      .buttons { justify-content: stretch; }
      .table-action-bar { margin-top: 8px; padding: 8px; }
      button { flex: 1 1 45%; padding: 10px 8px; min-height: 44px; }
      .guide { font-size: 12.5px; max-height: 78px; padding: 8px 9px; }
      .table-shell { padding: 8px; border-radius: 18px; }
      .table { border-radius: 13px; min-height: 0; }
      .cloth { left: 18px; right: 18px; top: 18px; bottom: 18px; border-radius: 12px; }
      .diamond { width: 7px; height: 7px; }
      .ball { width: clamp(25px, 7vw, 34px); height: clamp(25px, 7vw, 34px); }
      .effect-ball { width: 52px; height: 52px; }
      #recommendationLine { stroke-width: 7; }
      #masterGuideLine { stroke-width: 21; }
      #aimPreview { stroke-width: 5; }
      #cueStick { stroke-width: 11; }
      #cueTip { stroke-width: 6; }
      .rec-event text { font-size: 22px; stroke-width: 5px; }
    }

    @media (max-width: 860px) and (orientation: landscape) {
      .app { width: 100%; }
      .hud-row { grid-template-columns: minmax(180px, .9fr) minmax(250px, 1fr); align-items: center; }
      h1 { font-size: 23px; }
      .mini-help { display: none; }
      .scoreboard { grid-template-columns: repeat(4, minmax(54px, 1fr)); }
      .stat { padding: 6px; }
      .stat .label { font-size: 9px; }
      .stat .value { font-size: 18px; }
      .reset-score-btn { min-height: 38px; padding: 6px 8px; font-size: 10px; }
      .guide { max-height: 54px; }
      .practice-panel { padding: 8px; }
      .practice-info { display: none; }
      .practice-controls select { max-width: 220px; min-height: 36px; }
      .practice-controls button { min-height: 36px; }
      button { flex: 0 0 auto; min-height: 38px; padding: 8px 10px; }
    }
    /* Botonera principal integrada: no se superpone a la mesa */
    .app { padding-bottom: 18px; }

    .table-action-dropdown {
      display: flex;
      align-items: stretch;
      gap: 10px;
      flex: 1 1 360px;
      min-width: 280px;
    }

    #tableActionSelect,
    #practiceActionSelect {
      flex: 1 1 210px;
      min-height: 44px;
      border-radius: 13px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(48, 99, 82, .95);
      color: var(--text);
      font-weight: 900;
      font-size: 14px;
      padding: 0 14px;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
      outline: none;
    }

    .dropdown-run {
      min-width: 118px;
      min-height: 44px;
      border-radius: 13px;
      font-size: 14px;
      padding: 0 16px;
      background: linear-gradient(180deg, #ffd96e, #f4c552);
      color: #16100a;
      border: 0;
      box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 3px 0 rgba(0,0,0,.18);
      font-weight: 900;
      cursor: pointer;
    }
    .dropdown-run:disabled {
      opacity: .48;
      cursor: not-allowed;
      filter: grayscale(.25);
    }

    .hidden-action-control {
      display: inline-flex;
    }

    /* Corrección final: controles simples y estables, sin desplegables problemáticos */
    .practice-action-row,
    .table-action-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }

    .practice-action-row button,
    .table-action-bar button {
      flex: 1 1 150px;
      min-width: 135px;
      min-height: 44px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 900;
      padding: 10px 12px;
    }

    .table-action-bar {
      padding: 12px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(9,42,33,.82), rgba(2,16,12,.86));
      border: 1px solid rgba(255,213,106,.22);
    }

    .table-action-bar #placeBtn.place-on {
      background: #7df0a6 !important;
      color: #06110d !important;
    }

    .hidden-action-control.keep-hidden {
      display: none !important;
    }

    .bottom-table-actions {
      margin: 14px 0 0;
      position: relative;
      z-index: 3;
      pointer-events: auto;
      clear: both;
    }
    .table-shell + .bottom-table-actions {
      margin-top: 14px;
    }


    #shootBtn,
    #replayBtn,
    #motionReplayBtn,
    #guideBtn,
    #placeBtn,
    #randomBtn {
      position: static !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      width: auto !important;
      min-height: 44px;
      border-radius: 13px;
      font-size: 14px;
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: inset 0 -2px 0 rgba(0,0,0,.14);
      z-index: auto;
      transform: none !important;
      animation: none !important;
    }

    #shootBtn { min-width: 96px; }
    #replayBtn { min-width: 132px; }
    #motionReplayBtn { min-width: 118px; }
    #guideBtn { min-width: 104px; }
    #guideBtn.guide-on {
      background: #7df0a6 !important;
      color: #06110d !important;
      border-color: rgba(125,240,166,.55);
    }
    #placeBtn { min-width: 148px; }
    #randomBtn { min-width: 136px; }

    #shootBtn:not(:disabled),
    #replayBtn:not(:disabled),
    #motionReplayBtn:not(:disabled),
    #guideBtn:not(:disabled) {
      filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
    }

    #shootBtn:disabled,
    #replayBtn:disabled,
    #motionReplayBtn:disabled,
    #guideBtn:disabled {
      opacity: .52;
      filter: grayscale(.18);
    }

    @media (max-width: 720px) {
      .buttons {
        justify-content: stretch;
      }
      #shootBtn,
      #replayBtn,
      #motionReplayBtn,
      #guideBtn,
      #placeBtn,
      #randomBtn,
      #tableActionSelect,
      #practiceActionSelect,
      #runTableActionBtn {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        min-height: 42px;
        font-size: 12.5px;
        padding: 8px 7px;
      }
      .table-action-dropdown { flex: 1 1 100%; min-width: 100%; }
      #tableActionSelect, #practiceActionSelect { min-width: 0; }
      #runTableActionBtn { flex: 0 0 110px; }
      .app { padding-bottom: 10px; }
    }


    /* Visor dinámico flotante en la parte inferior derecha */
    #ballViewerPanel {
      position: fixed;
      right: calc(18px + env(safe-area-inset-right));
      bottom: calc(18px + env(safe-area-inset-bottom));
      z-index: 1450;
      width: min(420px, 34vw);
      min-width: 330px;
      margin: 0 !important;
      padding: 10px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(7,20,16,.94), rgba(1,7,5,.96));
      border: 1px solid rgba(255,213,106,.26);
      box-shadow: 0 20px 54px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.04);
      backdrop-filter: blur(8px);
    }

    #ballViewerPanel .ball-viewer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    #ballViewerPanel .ball-viewer-title {
      font-size: 15px;
      line-height: 1;
    }

    #ballViewerPanel .ball-viewer-subtitle,
    #ballViewerPanel .contact-viewer-title,
    #ballViewerPanel .contact-viewer-subtitle {
      display: none !important;
    }

    #ballViewerPanel .ball-viewer-status,
    #ballViewerPanel .contact-viewer-legend {
      padding: 5px 9px;
      font-size: 11px;
      white-space: nowrap;
    }

    #ballViewerPanel .contact-viewer-card {
      margin-top: 6px;
      padding: 6px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(3,8,7,.98), rgba(0,2,2,.98));
    }

    #ballViewerPanel .contact-viewer-head {
      justify-content: flex-end;
      min-height: 0;
      margin: 0 0 4px;
    }

    #ballViewerPanel .contact-viewer-stage {
      min-height: 118px;
      aspect-ratio: 16 / 6;
      margin-top: 0;
      border-radius: 14px;
    }

    #ballViewerPanel .contact-ball {
      width: clamp(62px, 6.4vw, 92px);
      height: clamp(62px, 6.4vw, 92px);
    }

    #ballViewerPanel .contact-cue-stick {
      height: 8px;
    }

    #ballViewerPanel .contact-aim-line {
      height: 3px;
    }

    #ballViewerPanel .contact-viewer-caption {
      margin-top: 6px;
      font-size: 11px;
      line-height: 1.28;
      max-height: 44px;
      overflow: hidden;
    }

    @media (max-width: 1100px) {
      #ballViewerPanel {
        width: min(380px, 42vw);
        min-width: 300px;
      }
    }

    @media (max-width: 760px) {
      #ballViewerPanel {
        left: calc(10px + env(safe-area-inset-left));
        right: calc(10px + env(safe-area-inset-right));
        bottom: calc(84px + env(safe-area-inset-bottom));
        width: auto;
        min-width: 0;
      }
      #ballViewerPanel .contact-viewer-stage {
        min-height: 104px;
      }
      #ballViewerPanel .contact-viewer-caption {
        display: none;
      }
    }


    /* ==============================
       Optimización final móvil / PWA
       ============================== */
    html {
      width: 100%;
      min-height: 100%;
      background: #06110d;
    }
    body {
      padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    }
    .app {
      width: min(1180px, 100%);
    }
    #guide,
    #practiceInfo {
      display: block !important;
      height: auto !important;
      min-height: 0 !important;
      margin-top: 10px !important;
      padding: 10px 12px !important;
      border: 1px solid rgba(255,213,106,.20) !important;
      overflow: auto !important;
    }
    #practiceInfo {
      border-color: rgba(125,240,166,.18) !important;
      background: rgba(0,0,0,.13);
      border-radius: 12px;
    }
    .primary-action,
    #shootBtn.primary-action {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #ffdc75, #f2ba3d) !important;
      color: #1a1206 !important;
      border-color: rgba(255,255,255,.22) !important;
      font-size: 15px;
      letter-spacing: .02em;
      box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 -3px 0 rgba(0,0,0,.18) !important;
    }
    #demoBtn {
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #3f7764, #264d40);
      color: var(--cream);
    }
    .practice-controls select,
    .practice-controls button,
    .table-action-bar button {
      touch-action: manipulation;
    }
    .table-shell {
      contain: layout paint;
    }
    .table {
      isolation: isolate;
    }
    .video-card video,
    #videoFrame {
      width: 100%;
      max-height: min(58dvh, 620px);
      background: #000;
      border-radius: 14px;
    }

    .video-copyright {
      margin: 8px 2px 0;
      font-size: 12px;
      line-height: 1.35;
      color: rgba(247, 242, 223, .76);
    }
    .video-copyright strong {
      color: var(--gold);
    }

    .video-copyright a {
      color: var(--gold);
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    @media (max-width: 860px) {
      body {
        padding: 8px max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        background: linear-gradient(180deg, #082018 0, #030b08 100%);
      }
      .hud {
        margin-bottom: 8px;
      }
      .hud-row {
        grid-template-columns: 1fr;
      }
      .scoreboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .stat {
        padding: 7px 6px;
        border-radius: 12px;
      }
      .stat .value {
        font-size: 22px;
      }
      .practice-panel {
        padding: 8px;
      }
      .compact-select-row,
      .practice-controls {
        grid-template-columns: 1fr !important;
        display: grid;
        gap: 8px;
      }
      .practice-controls select,
      .practice-controls button {
        width: 100%;
        min-height: 44px;
      }
      .deflection-guide-panel {
        padding: 9px;
        border-radius: 16px;
      }
      .deflection-guide-head {
        gap: 8px;
      }
      .deflection-guide-head h3 {
        font-size: 15px;
      }
      .deflection-guide-head p:not(#deflectionGuideReadout) {
        display: none;
      }
      .deflection-guide-layout {
        gap: 8px;
      }
      .deflection-guide-stage-wrap {
        min-height: 128px;
      }
      .deflection-guide-stage {
        max-width: 230px;
      }
      .deflection-guide-buttons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
      }
      .deflection-guide-buttons button {
        min-width: 0;
        min-height: 38px;
        padding: 7px 5px;
        font-size: 12px;
      }
      .deflection-guide-status,
      #deflectionGuideReadout {
        font-size: 12px;
        line-height: 1.25;
      }
      .table-shell {
        padding: 7px;
        border-radius: 18px;
        box-shadow: 0 16px 42px rgba(0,0,0,.48), inset 0 0 0 3px rgba(255,255,255,.035);
      }
      .table {
        width: 100%;
        min-height: 0;
        max-height: 58dvh;
      }
      .bottom-table-actions {
        position: sticky;
        bottom: max(6px, env(safe-area-inset-bottom));
        z-index: 20;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        margin-top: 8px;
        backdrop-filter: blur(8px);
        background: linear-gradient(180deg, rgba(9,42,33,.94), rgba(2,16,12,.96));
      }
      .bottom-table-actions button {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 44px;
        font-size: 12.5px;
        padding: 8px 6px;
      }
      #shootBtn.primary-action {
        grid-column: span 2;
        min-height: 50px;
        font-size: 16px;
      }
      #guide {
        font-size: 12.5px;
        max-height: 96px;
      }
      .video-modal {
        padding: 8px;
        align-items: stretch;
      }
      .video-card {
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
        padding: 10px;
      }
      .video-head {
        align-items: flex-start;
      }
    }

    @media (max-width: 860px) and (orientation: landscape) {
      body {
        padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
      }
      .hud {
        padding: 7px;
      }
      .hud-row {
        grid-template-columns: minmax(130px, .65fr) minmax(260px, 1fr);
      }
      h1 { font-size: 21px; }
      .practice-panel { margin-top: 6px; }
      #guide, #practiceInfo { display: none !important; }
      .deflection-guide-panel {
        display: none;
      }
      .table-shell {
        padding: 6px;
      }
      .table {
        max-height: calc(100dvh - 142px);
      }
      .bottom-table-actions {
        position: sticky;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        padding: 7px;
      }
      #shootBtn.primary-action {
        grid-column: auto;
        min-height: 40px;
        font-size: 13px;
      }
      .bottom-table-actions button {
        min-height: 40px;
        font-size: 11.5px;
      }
    }

    @media (display-mode: standalone) {
      body { user-select: none; }
      .hud, .table-shell, .bottom-table-actions { -webkit-user-select: none; user-select: none; }
    }

  
    /* Ajuste final: se elimina la tarjeta informativa larga de la jugada. */
    #practiceInfo,
    .practice-info {
      display: none !important;
      height: 0 !important;
      max-height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
      visibility: hidden !important;
    }

  

    /* Ocultar definitivamente el estado/resumen de jugada solicitado por el usuario */
    #guide,
    #practiceInfo {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      max-height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      opacity: 0 !important;
      overflow: hidden !important;
      pointer-events: none !important;
    }


    /* Limpieza final solicitada: se ocultan descripciones y textos largos de ayuda,
       sin eliminar los elementos que usa JavaScript para mantener la app funcional. */
    #deflectionGuidePanel .deflection-guide-head p,
    #deflectionGuideReadout,
    #deflectionGuideStatus,
    #videoModal .video-head p,
    #videoImagesNote,
    #practiceImagesNote,
    .video-images-note,
    .image-note,
    .mini-help {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      max-height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      opacity: 0 !important;
      overflow: hidden !important;
      pointer-events: none !important;
    }

    /* El panel de guía queda más compacto al quitar los textos descriptivos. */
    .deflection-guide-head {
      grid-template-columns: 1fr !important;
      gap: 6px !important;
    }
    .deflection-guide-head h3 {
      margin-bottom: 0 !important;
    }


    /* =========================================
       v174 · móvil real: controles debajo de la mesa
       ========================================= */
    @media (max-width: 860px) {
      .app {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .hud {
        order: 1;
      }
      .table-shell {
        order: 2;
        margin: 0 !important;
        padding: 6px !important;
        overflow: visible !important;
      }
      .bottom-table-actions {
        order: 3;
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1 !important;
        margin: 8px 0 0 !important;
        padding: 8px !important;
        border-radius: 16px !important;
        transform: none !important;
        box-shadow: 0 10px 26px rgba(0,0,0,.34) !important;
      }
      .table {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 1000 / 560 !important;
        min-height: 0 !important;
        touch-action: none;
      }
      #ballViewerPanel {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 8px !important;
      }
      .deflection-guide-layout {
        grid-template-columns: 1fr !important;
      }
      .deflection-guide-controls {
        gap: 8px !important;
      }
      .deflection-guide-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 520px) {
      body {
        padding-left: max(6px, env(safe-area-inset-left)) !important;
        padding-right: max(6px, env(safe-area-inset-right)) !important;
      }
      .hud {
        padding: 8px !important;
        border-radius: 16px !important;
      }
      h1 {
        font-size: 20px !important;
      }
      .app-subtitle {
        font-size: 12px !important;
      }
      .scoreboard {
        gap: 6px !important;
      }
      .stat .value {
        font-size: 20px !important;
      }
      .bottom-table-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
      }
      .bottom-table-actions button {
        min-height: 42px !important;
        font-size: 11.5px !important;
        padding: 7px 5px !important;
      }
      #shootBtn.primary-action {
        grid-column: 1 / -1 !important;
        min-height: 48px !important;
        font-size: 15px !important;
      }
      .deflection-guide-panel {
        margin-top: 8px !important;
      }
      .deflection-guide-stage-wrap {
        min-height: 118px !important;
      }
      .deflection-guide-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

/* v181: botón y modal de instrucciones debajo del subtítulo principal */
.subtitle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.instructions-btn {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,213,106,.98), rgba(214,156,43,.98));
  color: #1a1206;
  border: 1px solid rgba(255,239,178,.65);
  box-shadow: 0 8px 22px rgba(255,213,106,.16), inset 0 -2px 0 rgba(0,0,0,.16);
}

.instructions-modal {
  z-index: 1003;
}

.instructions-card {
  width: min(820px, 100%);
}

.instructions-list {
  margin: 12px 0 0;
  padding-left: 24px;
  color: var(--cream);
  line-height: 1.55;
  font-size: clamp(15px, 1.8vw, 18px);
}

.instructions-list li {
  margin: 0 0 12px;
  padding-left: 4px;
}

.instructions-list strong {
  color: var(--gold);
}

.instructions-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.instructions-actions button {
  min-width: 132px;
}

@media (max-width: 720px) {
  .subtitle-actions {
    margin-top: 8px;
  }
  .instructions-btn {
    width: 100%;
  }
  .instructions-card {
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
    padding: 12px;
  }
  .instructions-list {
    padding-left: 20px;
    font-size: 15px;
  }
  .instructions-actions {
    justify-content: stretch;
  }
  .instructions-actions button {
    width: 100%;
  }
}


/* v184: imán inteligente entre guía principal y guía de tacada */
#aimPreview.magnet-active {
  stroke: rgba(255, 255, 255, .98);
  stroke-width: 7;
  stroke-dasharray: 6 6;
  filter: drop-shadow(0 0 14px rgba(255,255,255,.85)) drop-shadow(0 0 20px rgba(151,255,221,.75));
  animation: magnetGuideFlow 1.05s linear infinite;
}
#masterGuideLine.guide-magnet-active {
  stroke: rgba(127, 255, 212, .52);
  filter: drop-shadow(0 0 18px rgba(127,255,212,.85)) drop-shadow(0 0 30px rgba(255,255,255,.42));
}
@keyframes magnetGuideFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -24; }
}


.instructions-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 213, 106, .10);
  border: 1px solid rgba(255, 213, 106, .22);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.instructions-note strong { color: var(--gold); }


/* v189 · Control de calidad responsive, móvil, TV y Google Sites */
button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(255, 213, 106, .95);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 213, 106, .18), 0 0 22px rgba(255, 213, 106, .22);
}

#fullscreenTableBtn.fullscreen-on {
  background: linear-gradient(180deg, #7df0a6, #3fdc78) !important;
  color: #06110d !important;
  border-color: rgba(125, 240, 166, .62) !important;
}

.tv-remote-hint {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 18;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(1, 12, 9, .74);
  border: 1px solid rgba(255, 213, 106, .30);
  color: var(--gold);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

body.table-fullscreen-mode {
  padding: 0 !important;
  overflow: hidden !important;
  background: #020604 !important;
}

body.table-fullscreen-mode .app {
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  margin: 0 !important;
}

body.table-fullscreen-mode .hud,
body.table-fullscreen-mode #ballViewerPanel,
body.table-fullscreen-mode .contact-viewer-panel,
body.table-fullscreen-mode .deflection-guide-panel {
  display: none !important;
}

body.table-fullscreen-mode .table-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9990 !important;
  margin: 0 !important;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(92px, calc(86px + env(safe-area-inset-bottom))) max(8px, env(safe-area-inset-left)) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: radial-gradient(circle at center, #174632 0, #04120d 62%, #010302 100%) !important;
  box-shadow: none !important;
  contain: strict;
}

body.table-fullscreen-mode .table {
  width: min(100vw, calc((100dvh - 112px) * 1.7857)) !important;
  max-width: 100vw !important;
  height: auto !important;
  max-height: calc(100dvh - 112px) !important;
  min-height: 0 !important;
  aspect-ratio: 1000 / 560 !important;
  overflow: visible !important;
  border-radius: clamp(12px, 2.2vw, 24px) !important;
  touch-action: none !important;
}

body.table-fullscreen-mode .bottom-table-actions {
  position: fixed !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  z-index: 10020 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 9px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(6, 33, 25, .94), rgba(1, 10, 7, .97)) !important;
  border: 1px solid rgba(255, 213, 106, .28) !important;
  box-shadow: 0 -10px 34px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(10px);
}

body.table-fullscreen-mode .bottom-table-actions button {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 8px 6px !important;
  font-size: clamp(11px, 1.9vw, 15px) !important;
}

body.table-fullscreen-mode #shootBtn.primary-action {
  grid-column: span 2 !important;
  min-height: 52px !important;
  font-size: clamp(15px, 2.2vw, 19px) !important;
}

body.table-fullscreen-mode .tv-remote-hint {
  opacity: .98;
}

@media (max-width: 620px) {
  body.table-fullscreen-mode .bottom-table-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.table-fullscreen-mode .bottom-table-actions button {
    min-height: 42px !important;
    font-size: 11px !important;
  }
  body.table-fullscreen-mode #shootBtn.primary-action {
    grid-column: 1 / -1 !important;
    order: 99;
  }
  body.table-fullscreen-mode .table-shell {
    padding-bottom: max(134px, calc(128px + env(safe-area-inset-bottom))) !important;
  }
  body.table-fullscreen-mode .table {
    width: min(100vw, calc((100dvh - 152px) * 1.7857)) !important;
    max-height: calc(100dvh - 152px) !important;
  }
}

@media (max-width: 940px) and (orientation: landscape) {
  body.table-fullscreen-mode .bottom-table-actions {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  body.table-fullscreen-mode #shootBtn.primary-action {
    grid-column: span 1 !important;
    min-height: 42px !important;
  }
  body.table-fullscreen-mode .table-shell {
    padding-bottom: max(66px, calc(58px + env(safe-area-inset-bottom))) !important;
  }
  body.table-fullscreen-mode .table {
    width: min(100vw, calc((100dvh - 78px) * 1.7857)) !important;
    max-height: calc(100dvh - 78px) !important;
  }
}

@media (min-width: 1280px) {
  .app { width: min(1600px, 100%); }
  .table-action-bar button { min-height: 50px; font-size: 16px; }
  .table-shell { padding: 24px; }
}

@media (min-width: 1500px) and (min-height: 760px) {
  .tv-remote-hint { opacity: .82; }
  .scoreboard .value { font-size: 34px; }
  button, select { font-size: 16px; }
}


/* v202: iluminación neón breve, limpia, con bola blanca resaltada e iluminación final por predicción */
#successLine {
  stroke: rgba(0, 245, 255, .96);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(0,245,255,.95)) drop-shadow(0 0 17px rgba(124,77,255,.62));
  stroke-dasharray: 14 12;
  pointer-events: none;
}
#successLine.success-active {
  animation: successRouteFlow .78s linear infinite, successRoutePulse .78s ease-in-out infinite alternate;
}
#successLine.success-base {
  stroke: rgba(0, 245, 255, .98);
}
#successLine.success-free {
  stroke: rgba(191, 64, 255, .98);
}
.table.carom-success-lit .cloth {
  box-shadow:
    inset 0 0 52px rgba(0,0,0,.34),
    inset 0 0 0 3px rgba(0,245,255,.22),
    0 0 22px rgba(0,245,255,.28);
}
.ball.carom-lit {
  animation: caromBallGlow .72s ease-in-out 0s 2 alternate;
  box-shadow:
    0 0 0 3px rgba(0,245,255,.32),
    0 0 20px rgba(0,245,255,.85),
    0 0 32px rgba(191,64,255,.38),
    4px 7px 9px rgba(0,0,0,.30),
    inset -5px -6px 9px rgba(0,0,0,.24),
    inset 4px 4px 7px rgba(255,255,255,.72);
}
.ball.cue.carom-lit,
.ball.cue.guide-match-lit {
  box-shadow:
    0 0 0 5px rgba(255,255,255,.58),
    0 0 24px rgba(0,245,255,.96),
    0 0 44px rgba(255,255,255,.62),
    4px 7px 9px rgba(0,0,0,.30),
    inset -5px -6px 9px rgba(0,0,0,.24),
    inset 4px 4px 9px rgba(255,255,255,.86);
}
.carom-flash {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translate(-50%, -50%) scale(.92);
  z-index: 35;
  padding: 10px 16px;
  border-radius: 999px;
  color: #f8ffff;
  background: linear-gradient(180deg, rgba(0,245,255,.92), rgba(111,56,255,.92));
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 0 16px rgba(0,245,255,.78), 0 8px 22px rgba(0,0,0,.28);
  font-weight: 1000;
  letter-spacing: .02em;
  opacity: 0;
  pointer-events: none;
}
.carom-flash.show {
  animation: caromFlashPop 1.18s ease-out both;
}
@keyframes successRouteFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -52; }
}
@keyframes successRoutePulse {
  from { stroke-width: 7; opacity: .72; }
  to { stroke-width: 11; opacity: 1; }
}
@keyframes caromBallGlow {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.13); }
}
@keyframes caromFlashPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.84); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.98); }
}


.table.guide-coincidence-lit .cloth {
  box-shadow:
    inset 0 0 52px rgba(0,0,0,.34),
    inset 0 0 0 3px rgba(0,245,255,.26),
    0 0 24px rgba(0,245,255,.36);
}
#successLine.guide-coincidence {
  stroke: rgba(0, 245, 255, .98);
  filter: drop-shadow(0 0 9px rgba(0,245,255,.96)) drop-shadow(0 0 18px rgba(191,64,255,.58));
}
.ball.guide-match-lit {
  animation: caromBallGlow .72s ease-in-out 0s 2 alternate;
  box-shadow:
    0 0 0 3px rgba(0,245,255,.32),
    0 0 20px rgba(0,245,255,.85),
    0 0 32px rgba(191,64,255,.38),
    4px 7px 9px rgba(0,0,0,.30),
    inset -5px -6px 9px rgba(0,0,0,.24),
    inset 4px 4px 7px rgba(255,255,255,.72);
}


/* v203 · móvil limpio y Mesa completa con botón Tirar visible en todas las pantallas */
/* El aviso de control remoto no se muestra en móvil; en producción se prioriza el botón Tirar. */
@media (max-width: 860px), (pointer: coarse) {
  .tv-remote-hint,
  body.table-fullscreen-mode .tv-remote-hint,
  body.tv-remote-active .tv-remote-hint {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* En escritorio/TV el aviso solo aparece dentro de Mesa completa, nunca en la vista normal. */
body:not(.table-fullscreen-mode) .tv-remote-hint {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
body.table-fullscreen-mode .tv-remote-hint {
  display: block;
}

/* La barra de acciones y Tirar deben permanecer dentro del fullscreen nativo y del fullscreen por CSS. */
body.table-fullscreen-mode .bottom-table-actions {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.table-fullscreen-mode #shootBtn.primary-action {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  order: -1 !important;
  grid-column: span 2 !important;
}

@media (max-width: 620px) {
  body.table-fullscreen-mode #shootBtn.primary-action {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 940px) and (orientation: landscape) {
  body.table-fullscreen-mode #shootBtn.primary-action {
    grid-column: span 2 !important;
  }
}



/* v204: video móvil optimizado para Android/iOS.
   En pantallas táctiles se prioriza el reproductor 16:9 y se evita que Google Drive quede recortado u oscuro. */
.video-frame-wrap[data-video-provider="youtube-mobile"] {
  background: #000;
}
.video-frame-wrap[data-video-provider="youtube-mobile"] iframe,
.video-frame-wrap[data-video-provider="drive-desktop"] iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  object-fit: contain;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

@media (max-width: 860px), (pointer: coarse) {
  #videoModal.video-modal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, .92) !important;
  }
  #videoModal .video-card {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #videoModal .video-head {
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    flex: 0 0 auto;
  }
  #videoModal .video-head h2 {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }
  #videoModal .close-video {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 26px !important;
  }
  #videoModal .video-study-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  #videoModal .video-source-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  #videoModal .video-frame-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 190px !important;
    max-height: min(42dvh, 360px) !important;
    flex: 0 0 auto !important;
    border-radius: 16px !important;
    background: #000 !important;
  }
  #videoModal #videoFrame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: #000 !important;
  }
  #videoModal .video-images-panel {
    display: none !important;
  }
  #videoModal .video-observation {
    margin: 6px 0 8px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    font-size: 13.5px !important;
    line-height: 1.34 !important;
    max-height: 24dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #videoModal .video-observation h3 {
    font-size: 17px !important;
  }
  #videoModal .video-observation h4 {
    font-size: 14px !important;
  }
  #videoModal .video-modal-controls {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: auto 0 0 !important;
    padding: 8px 0 0 !important;
    background: linear-gradient(180deg, rgba(6,17,13,0), rgba(6,17,13,.96) 18%, rgba(6,17,13,1)) !important;
  }
  #videoModal .video-modal-controls #closeVideoBtn {
    grid-column: 1 / -1 !important;
  }
  #videoModal .video-modal-controls button {
    min-height: 46px !important;
    font-size: 14px !important;
  }
  #videoModal .video-copyright {
    display: none !important;
  }
}

@media (max-width: 860px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  #videoModal .video-card {
    overflow: hidden !important;
  }
  #videoModal .video-study-layout {
    display: grid !important;
    grid-template-columns: minmax(300px, 1.35fr) minmax(220px, .65fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #videoModal .video-source-block {
    min-height: 0 !important;
  }
  #videoModal .video-frame-wrap {
    max-height: calc(100dvh - 94px) !important;
    min-height: 0 !important;
  }
  #videoModal .video-observation {
    max-height: calc(100dvh - 142px) !important;
    margin: 0 !important;
  }
  #videoModal .video-modal-controls {
    grid-column: 1 / -1 !important;
  }
}

/* v205 · Mesa completa con panel lateral compacto.
   En fullscreen se muestran al lado el selector de carambolas y los controles principales
   sin ocupar toda la parte inferior de la pantalla. */
body.table-fullscreen-mode {
  --fs-side: clamp(112px, 14vw, 184px);
  --fs-gap: max(8px, env(safe-area-inset-right));
  --fs-top: max(8px, env(safe-area-inset-top));
  --fs-bottom: max(8px, env(safe-area-inset-bottom));
}

body.table-fullscreen-mode .app {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: #020604 !important;
}

/* El HUD vuelve solo para alojar el selector compacto. */
body.table-fullscreen-mode .hud {
  display: block !important;
  position: fixed !important;
  top: var(--fs-top) !important;
  right: var(--fs-gap) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 10035 !important;
  width: var(--fs-side) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body.table-fullscreen-mode .hud-row,
body.table-fullscreen-mode .hud > #guide,
body.table-fullscreen-mode .deflection-guide-panel,
body.table-fullscreen-mode #ballViewerPanel,
body.table-fullscreen-mode .contact-viewer-panel,
body.table-fullscreen-mode .subtitle-actions {
  display: none !important;
}

body.table-fullscreen-mode #practicePanel {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px !important;
  border-radius: 13px !important;
  pointer-events: auto !important;
  background: linear-gradient(180deg, rgba(10, 45, 34, .92), rgba(1, 12, 8, .96)) !important;
  border: 1px solid rgba(255, 213, 106, .30) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px);
}

body.table-fullscreen-mode #practicePanel .practice-top,
body.table-fullscreen-mode #practicePanel .practice-controls {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  width: 100% !important;
}

body.table-fullscreen-mode #practiceSelect {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  font-size: clamp(10px, 1.05vw, 12px) !important;
  line-height: 1.05 !important;
  background: rgba(0,0,0,.44) !important;
}

body.table-fullscreen-mode #videoBtn {
  display: none !important;
}

/* Panel lateral de botones. */
body.table-fullscreen-mode .bottom-table-actions {
  position: fixed !important;
  top: calc(var(--fs-top) + 48px) !important;
  right: var(--fs-gap) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 10030 !important;
  width: var(--fs-side) !important;
  max-height: calc(100dvh - var(--fs-top) - var(--fs-bottom) - 56px) !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 6px !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(6, 33, 25, .92), rgba(1, 10, 7, .96)) !important;
  border: 1px solid rgba(255, 213, 106, .26) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(10px);
  pointer-events: auto !important;
}

body.table-fullscreen-mode .bottom-table-actions button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 33px !important;
  padding: 5px 5px !important;
  border-radius: 10px !important;
  font-size: clamp(10px, 1.05vw, 12px) !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  text-align: center !important;
  grid-column: auto !important;
}

body.table-fullscreen-mode #shootBtn.primary-action {
  order: -10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  font-size: clamp(13px, 1.35vw, 16px) !important;
  grid-column: auto !important;
}

body.table-fullscreen-mode #replayBtn { order: 1 !important; }
body.table-fullscreen-mode #motionReplayBtn { order: 2 !important; }
body.table-fullscreen-mode #guideBtn { order: 3 !important; }
body.table-fullscreen-mode #exitPracticeBtn { order: 4 !important; }
body.table-fullscreen-mode #placeBtn { order: 5 !important; }
body.table-fullscreen-mode #randomBtn { order: 6 !important; }
body.table-fullscreen-mode #fullscreenTableBtn { order: 20 !important; }

/* Demo se oculta en mesa completa para no ocupar espacio; la práctica sigue disponible desde la guía y el replay. */
body.table-fullscreen-mode #demoBtn {
  display: none !important;
}

/* La mesa conserva el máximo espacio posible; en pantallas anchas se reserva el lateral para que nada tape la jugada. */
body.table-fullscreen-mode .table-shell {
  padding: var(--fs-top) var(--fs-gap) var(--fs-bottom) max(8px, env(safe-area-inset-left)) !important;
}
body.table-fullscreen-mode .table {
  width: min(100vw, calc((100dvh - var(--fs-top) - var(--fs-bottom) - 8px) * 1.7857)) !important;
  max-width: 100vw !important;
  max-height: calc(100dvh - var(--fs-top) - var(--fs-bottom) - 8px) !important;
}

@media (min-width: 760px), (orientation: landscape) {
  body.table-fullscreen-mode .table-shell {
    padding-right: calc(var(--fs-side) + var(--fs-gap) + 10px) !important;
  }
  body.table-fullscreen-mode .table {
    width: min(calc(100vw - var(--fs-side) - 22px), calc((100dvh - var(--fs-top) - var(--fs-bottom) - 8px) * 1.7857)) !important;
    max-width: calc(100vw - var(--fs-side) - 22px) !important;
  }
}

@media (max-width: 620px) and (orientation: portrait) {
  body.table-fullscreen-mode {
    --fs-side: clamp(92px, 25vw, 104px);
  }
  body.table-fullscreen-mode .hud {
    top: calc(var(--fs-top) + 4px) !important;
  }
  body.table-fullscreen-mode .bottom-table-actions {
    top: calc(var(--fs-top) + 46px) !important;
    gap: 4px !important;
    padding: 5px !important;
    max-height: calc(100dvh - var(--fs-top) - var(--fs-bottom) - 56px) !important;
  }
  body.table-fullscreen-mode .bottom-table-actions button {
    min-height: 30px !important;
    padding: 4px 3px !important;
    font-size: 9.5px !important;
    border-radius: 9px !important;
  }
  body.table-fullscreen-mode #shootBtn.primary-action {
    min-height: 38px !important;
    font-size: 12px !important;
  }
  body.table-fullscreen-mode #practiceSelect {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 9.5px !important;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  body.table-fullscreen-mode {
    --fs-side: clamp(104px, 16vw, 136px);
  }
  body.table-fullscreen-mode .bottom-table-actions {
    gap: 3px !important;
    padding: 4px !important;
    top: calc(var(--fs-top) + 42px) !important;
  }
  body.table-fullscreen-mode .bottom-table-actions button {
    min-height: 26px !important;
    padding: 3px !important;
    font-size: 9.5px !important;
  }
  body.table-fullscreen-mode #practiceSelect {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 9.5px !important;
  }
  body.table-fullscreen-mode #shootBtn.primary-action {
    min-height: 32px !important;
  }
}


/* v206 · Mesa completa maximizada con controles laterales derechos mínimos.
   Se ocultan Ver replay, Demostración y Nueva posición solo en Mesa completa.
   La mesa usa todo el espacio posible; los controles flotan a la derecha sin reservar ancho. */
body.table-fullscreen-mode {
  --fs-side: clamp(76px, 10.5vw, 126px);
  --fs-gap: max(5px, env(safe-area-inset-right));
  --fs-top: max(5px, env(safe-area-inset-top));
  --fs-bottom: max(5px, env(safe-area-inset-bottom));
}

body.table-fullscreen-mode .table-shell {
  inset: 0 !important;
  padding: var(--fs-top) var(--fs-gap) var(--fs-bottom) max(5px, env(safe-area-inset-left)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #020604 !important;
}

body.table-fullscreen-mode .table {
  width: min(calc(100vw - 10px), calc((100dvh - var(--fs-top) - var(--fs-bottom) - 6px) * 1.7857)) !important;
  max-width: calc(100vw - 10px) !important;
  max-height: calc(100dvh - var(--fs-top) - var(--fs-bottom) - 6px) !important;
  height: auto !important;
  aspect-ratio: 1000 / 560 !important;
}

/* Selector compacto arriba a la derecha. */
body.table-fullscreen-mode .hud {
  top: var(--fs-top) !important;
  right: var(--fs-gap) !important;
  width: var(--fs-side) !important;
  max-width: var(--fs-side) !important;
}

body.table-fullscreen-mode #practicePanel {
  padding: 4px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(8, 38, 29, .74), rgba(1, 10, 7, .84)) !important;
  border: 1px solid rgba(255, 213, 106, .22) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.28) !important;
}

body.table-fullscreen-mode #practiceSelect {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  font-size: clamp(8.5px, .85vw, 10.5px) !important;
}

/* Botonera derecha mínima. */
body.table-fullscreen-mode .bottom-table-actions {
  top: calc(var(--fs-top) + 36px) !important;
  right: var(--fs-gap) !important;
  width: var(--fs-side) !important;
  max-width: var(--fs-side) !important;
  max-height: calc(100dvh - var(--fs-top) - var(--fs-bottom) - 44px) !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 10px !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, rgba(6, 33, 25, .76), rgba(1, 10, 7, .86)) !important;
  border: 1px solid rgba(255, 213, 106, .20) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

body.table-fullscreen-mode .bottom-table-actions button {
  min-height: 28px !important;
  padding: 3px 3px !important;
  border-radius: 8px !important;
  font-size: clamp(8.5px, .85vw, 10.5px) !important;
  line-height: 1 !important;
  opacity: .92;
}

body.table-fullscreen-mode #shootBtn.primary-action {
  min-height: 38px !important;
  font-size: clamp(11px, 1.05vw, 14px) !important;
  order: -10 !important;
}

/* Ocultos únicamente dentro de Mesa completa por pedido del usuario. */
body.table-fullscreen-mode #motionReplayBtn,
body.table-fullscreen-mode #demoBtn,
body.table-fullscreen-mode #randomBtn {
  display: none !important;
}

body.table-fullscreen-mode #replayBtn { order: 1 !important; }
body.table-fullscreen-mode #guideBtn { order: 2 !important; }
body.table-fullscreen-mode #exitPracticeBtn { order: 3 !important; }
body.table-fullscreen-mode #placeBtn { order: 4 !important; }
body.table-fullscreen-mode #fullscreenTableBtn { order: 20 !important; }

/* En portrait móvil la botonera es aún más estrecha para que la mesa conserve prioridad. */
@media (max-width: 620px) and (orientation: portrait) {
  body.table-fullscreen-mode {
    --fs-side: clamp(66px, 18vw, 78px);
  }
  body.table-fullscreen-mode .bottom-table-actions {
    top: calc(var(--fs-top) + 32px) !important;
    gap: 3px !important;
    padding: 3px !important;
  }
  body.table-fullscreen-mode .bottom-table-actions button {
    min-height: 25px !important;
    padding: 2px !important;
    font-size: 8px !important;
    border-radius: 7px !important;
  }
  body.table-fullscreen-mode #shootBtn.primary-action {
    min-height: 33px !important;
    font-size: 10px !important;
  }
  body.table-fullscreen-mode #practicePanel {
    padding: 3px !important;
  }
  body.table-fullscreen-mode #practiceSelect {
    min-height: 25px !important;
    height: 25px !important;
    font-size: 8px !important;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  body.table-fullscreen-mode {
    --fs-side: clamp(72px, 10vw, 96px);
  }
  body.table-fullscreen-mode .bottom-table-actions {
    top: calc(var(--fs-top) + 32px) !important;
    gap: 2px !important;
    padding: 3px !important;
  }
  body.table-fullscreen-mode .bottom-table-actions button {
    min-height: 22px !important;
    padding: 2px !important;
    font-size: 8px !important;
  }
  body.table-fullscreen-mode #shootBtn.primary-action {
    min-height: 28px !important;
  }
  body.table-fullscreen-mode #practiceSelect {
    min-height: 25px !important;
    height: 25px !important;
    font-size: 8px !important;
  }
}


/* v207 · Mesa completa móvil: mesa al máximo, Tirar circular inferior derecho,
   controles superiores 3 a la izquierda y 3 a la derecha, e imágenes visibles en el modal móvil. */
@media (max-width: 860px), (pointer: coarse) {
  body.table-fullscreen-mode {
    --fs-control-w: clamp(78px, 21vw, 104px);
    --fs-control-h: clamp(34px, 8.4vw, 44px);
    --fs-control-gap: clamp(5px, 1.7vw, 8px);
    --fs-shoot-size: clamp(76px, 20vw, 96px);
    --fs-top-mobile: max(6px, env(safe-area-inset-top));
    --fs-left-mobile: max(6px, env(safe-area-inset-left));
    --fs-right-mobile: max(6px, env(safe-area-inset-right));
    --fs-bottom-mobile: max(8px, env(safe-area-inset-bottom));
    overflow: hidden !important;
  }

  body.table-fullscreen-mode .app {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body.table-fullscreen-mode .table-shell {
    position: fixed !important;
    inset: 0 !important;
    padding: 1px !important;
    z-index: 9990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #020604 !important;
    overflow: hidden !important;
  }

  body.table-fullscreen-mode .table {
    width: min(100vw, calc(100dvh * 1.7857)) !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 100dvh !important;
    aspect-ratio: 1000 / 560 !important;
    border-radius: clamp(6px, 1.7vw, 16px) !important;
  }

  /* La HUD se usa únicamente para el selector en el lateral superior izquierdo. */
  body.table-fullscreen-mode .hud {
    display: block !important;
    position: fixed !important;
    top: var(--fs-top-mobile) !important;
    left: var(--fs-left-mobile) !important;
    right: auto !important;
    width: var(--fs-control-w) !important;
    max-width: var(--fs-control-w) !important;
    z-index: 10070 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  body.table-fullscreen-mode #practicePanel {
    display: block !important;
    width: var(--fs-control-w) !important;
    max-width: var(--fs-control-w) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.table-fullscreen-mode #practiceSelect {
    width: var(--fs-control-w) !important;
    height: var(--fs-control-h) !important;
    min-height: var(--fs-control-h) !important;
    max-width: var(--fs-control-w) !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: clamp(8px, 2.5vw, 11px) !important;
    font-weight: 900 !important;
    background: linear-gradient(180deg, rgba(255, 213, 106, .98), rgba(220, 160, 42, .96)) !important;
    color: #06110d !important;
    border: 1px solid rgba(255,255,255,.50) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.38) !important;
  }

  /* La barra contenedora no ocupa espacio: los botones flotan individualmente. */
  body.table-fullscreen-mode .bottom-table-actions {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  body.table-fullscreen-mode .bottom-table-actions button {
    position: fixed !important;
    z-index: 10065 !important;
    width: var(--fs-control-w) !important;
    height: var(--fs-control-h) !important;
    min-width: var(--fs-control-w) !important;
    min-height: var(--fs-control-h) !important;
    max-width: var(--fs-control-w) !important;
    max-height: var(--fs-control-h) !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: clamp(8px, 2.5vw, 11px) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    white-space: normal !important;
    text-align: center !important;
    opacity: .96 !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Ocultos en mesa completa móvil para despejar la mesa. */
  body.table-fullscreen-mode #motionReplayBtn,
  body.table-fullscreen-mode #demoBtn,
  body.table-fullscreen-mode #randomBtn {
    display: none !important;
  }

  /* Columna superior izquierda: selector, repetir y guía. */
  body.table-fullscreen-mode #replayBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    left: var(--fs-left-mobile) !important;
    top: calc(var(--fs-top-mobile) + var(--fs-control-h) + var(--fs-control-gap)) !important;
  }
  body.table-fullscreen-mode #guideBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    left: var(--fs-left-mobile) !important;
    top: calc(var(--fs-top-mobile) + (var(--fs-control-h) * 2) + (var(--fs-control-gap) * 2)) !important;
  }

  /* Columna superior derecha: libre, ubicar y salir. */
  body.table-fullscreen-mode #exitPracticeBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    right: var(--fs-right-mobile) !important;
    top: var(--fs-top-mobile) !important;
  }
  body.table-fullscreen-mode #placeBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    right: var(--fs-right-mobile) !important;
    top: calc(var(--fs-top-mobile) + var(--fs-control-h) + var(--fs-control-gap)) !important;
  }
  body.table-fullscreen-mode #fullscreenTableBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    right: var(--fs-right-mobile) !important;
    top: calc(var(--fs-top-mobile) + (var(--fs-control-h) * 2) + (var(--fs-control-gap) * 2)) !important;
  }

  /* Tirar: botón grande, circular, inferior derecho. */
  body.table-fullscreen-mode #shootBtn.primary-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    right: calc(var(--fs-right-mobile) + 2px) !important;
    bottom: calc(var(--fs-bottom-mobile) + 2px) !important;
    top: auto !important;
    left: auto !important;
    width: var(--fs-shoot-size) !important;
    height: var(--fs-shoot-size) !important;
    min-width: var(--fs-shoot-size) !important;
    min-height: var(--fs-shoot-size) !important;
    max-width: var(--fs-shoot-size) !important;
    max-height: var(--fs-shoot-size) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: clamp(14px, 4vw, 20px) !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    z-index: 10080 !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 0 28px rgba(255,213,106,.42), 0 10px 28px rgba(0,0,0,.48) !important;
  }

  /* En móvil vertical, evitar que el control de efecto choque con el botón Tirar. */
  body.table-fullscreen-mode .effect-control {
    transform: scale(.88);
    transform-origin: center;
  }
}

@media (max-width: 860px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  body.table-fullscreen-mode {
    --fs-control-w: clamp(74px, 12.5vw, 96px);
    --fs-control-h: clamp(28px, 7.2vh, 38px);
    --fs-shoot-size: clamp(66px, 15vh, 86px);
  }

  body.table-fullscreen-mode .table {
    width: min(100vw, calc(100dvh * 1.7857)) !important;
    max-height: 100dvh !important;
  }
}

/* v207 · En móviles Android/iOS el modal muestra SIEMPRE las imágenes dentro del modal. */
@media (max-width: 860px), (pointer: coarse) {
  #videoModal .video-study-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }

  #videoModal .video-source-block {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }

  #videoModal .video-frame-wrap {
    min-height: clamp(170px, 45vw, 230px) !important;
    max-height: 34dvh !important;
  }

  #videoModal .video-observation {
    max-height: 16dvh !important;
    margin: 4px 0 6px !important;
  }

  #videoModal .video-images-panel {
    display: flex !important;
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: clamp(150px, 34vw, 210px) !important;
    max-height: 26dvh !important;
    overflow-y: auto !important;
    padding: 8px !important;
    border-radius: 14px !important;
    flex: 0 0 auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #videoModal .video-images-panel h3 {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  #videoModal .video-images-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  #videoModal .video-image-item {
    min-height: 0 !important;
    padding: 5px !important;
    border-radius: 10px !important;
  }

  #videoModal .video-image-item h4 {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }

  #videoModal .video-image-item img {
    min-height: 90px !important;
    height: auto !important;
    max-height: 17dvh !important;
    object-fit: contain !important;
  }

  #videoModal .video-modal-controls {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
    margin: 0 !important;
  }
}

@media (max-width: 860px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  #videoModal .video-study-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(190px, .82fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
  }
  #videoModal .video-source-block {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #videoModal .video-frame-wrap {
    min-height: 0 !important;
    max-height: 48dvh !important;
  }
  #videoModal .video-observation {
    max-height: 18dvh !important;
  }
  #videoModal .video-images-panel {
    display: flex !important;
    height: calc(100dvh - max(58px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - 70px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  #videoModal .video-images-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  }
  #videoModal .video-image-item img {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
  }
}

/* v208 · Corrección final de distribución móvil en Mesa completa.
   La mesa conserva el máximo tamaño; los controles flotan ordenados:
   izquierda = selector, Repetir, Guía; derecha = Libre, Ubicar, Salir;
   Tirar = circular grande inferior derecho. Se usa un contenedor fijo de pantalla completa
   para evitar que Android/iOS reacomoden los botones dentro de la mesa. */
@media (max-width: 920px), (pointer: coarse) {
  body.table-fullscreen-mode {
    --fs-pad-top: max(4px, env(safe-area-inset-top));
    --fs-pad-left: max(4px, env(safe-area-inset-left));
    --fs-pad-right: max(4px, env(safe-area-inset-right));
    --fs-pad-bottom: max(6px, env(safe-area-inset-bottom));
    --fs-btn-w: clamp(82px, 22vw, 118px);
    --fs-btn-h: clamp(36px, 9vw, 50px);
    --fs-btn-gap: clamp(4px, 1.4vw, 8px);
    --fs-shoot: clamp(90px, 24vw, 128px);
    overflow: hidden !important;
  }

  body.table-fullscreen-mode .app {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #020604 !important;
  }

  body.table-fullscreen-mode .table-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9990 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #020604 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    contain: none !important;
  }

  body.table-fullscreen-mode .table {
    width: min(100vw, calc(100dvh * 1.785714)) !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    aspect-ratio: 1000 / 560 !important;
    margin: 0 auto !important;
    border-radius: clamp(6px, 1.6vw, 16px) !important;
  }

  body.table-fullscreen-mode .hud {
    display: block !important;
    position: fixed !important;
    inset: var(--fs-pad-top) auto auto var(--fs-pad-left) !important;
    z-index: 10090 !important;
    width: var(--fs-btn-w) !important;
    max-width: var(--fs-btn-w) !important;
    min-width: var(--fs-btn-w) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body.table-fullscreen-mode #practicePanel {
    display: block !important;
    width: var(--fs-btn-w) !important;
    max-width: var(--fs-btn-w) !important;
    min-width: var(--fs-btn-w) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  body.table-fullscreen-mode #practiceSelect {
    width: var(--fs-btn-w) !important;
    min-width: var(--fs-btn-w) !important;
    max-width: var(--fs-btn-w) !important;
    height: var(--fs-btn-h) !important;
    min-height: var(--fs-btn-h) !important;
    max-height: var(--fs-btn-h) !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    font-size: clamp(10px, 2.7vw, 14px) !important;
    font-weight: 900 !important;
    color: #06110d !important;
    background: linear-gradient(180deg, rgba(255, 220, 116, .98), rgba(224, 169, 48, .98)) !important;
    border: 1px solid rgba(255,255,255,.50) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.45) !important;
  }

  body.table-fullscreen-mode .bottom-table-actions {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10080 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.table-fullscreen-mode .bottom-table-actions button {
    position: absolute !important;
    z-index: 10085 !important;
    width: var(--fs-btn-w) !important;
    height: var(--fs-btn-h) !important;
    min-width: var(--fs-btn-w) !important;
    min-height: var(--fs-btn-h) !important;
    max-width: var(--fs-btn-w) !important;
    max-height: var(--fs-btn-h) !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(10px, 2.7vw, 14px) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    white-space: normal !important;
    text-align: center !important;
    opacity: .97 !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  body.table-fullscreen-mode #motionReplayBtn,
  body.table-fullscreen-mode #demoBtn,
  body.table-fullscreen-mode #randomBtn {
    display: none !important;
  }

  /* Izquierda: selector, Repetir, Guía. */
  body.table-fullscreen-mode #replayBtn {
    inset: calc(var(--fs-pad-top) + var(--fs-btn-h) + var(--fs-btn-gap)) auto auto var(--fs-pad-left) !important;
  }
  body.table-fullscreen-mode #guideBtn {
    inset: calc(var(--fs-pad-top) + (var(--fs-btn-h) * 2) + (var(--fs-btn-gap) * 2)) auto auto var(--fs-pad-left) !important;
  }

  /* Derecha: Libre, Ubicar, Salir. */
  body.table-fullscreen-mode #exitPracticeBtn {
    inset: var(--fs-pad-top) var(--fs-pad-right) auto auto !important;
  }
  body.table-fullscreen-mode #placeBtn {
    inset: calc(var(--fs-pad-top) + var(--fs-btn-h) + var(--fs-btn-gap)) var(--fs-pad-right) auto auto !important;
  }
  body.table-fullscreen-mode #fullscreenTableBtn {
    inset: calc(var(--fs-pad-top) + (var(--fs-btn-h) * 2) + (var(--fs-btn-gap) * 2)) var(--fs-pad-right) auto auto !important;
  }

  /* Botón principal: inferior derecho, grande y circular. */
  body.table-fullscreen-mode #shootBtn {
    inset: auto var(--fs-pad-right) var(--fs-pad-bottom) auto !important;
    width: var(--fs-shoot) !important;
    height: var(--fs-shoot) !important;
    min-width: var(--fs-shoot) !important;
    min-height: var(--fs-shoot) !important;
    max-width: var(--fs-shoot) !important;
    max-height: var(--fs-shoot) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: clamp(18px, 5.2vw, 28px) !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    z-index: 10100 !important;
    box-shadow: 0 0 0 5px rgba(255,255,255,.16), 0 0 30px rgba(255,213,106,.48), 0 12px 30px rgba(0,0,0,.55) !important;
  }

  body.table-fullscreen-mode .tv-remote-hint {
    display: none !important;
    opacity: 0 !important;
  }
}

@media (max-width: 920px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  body.table-fullscreen-mode {
    --fs-btn-w: clamp(88px, 12.6vw, 122px);
    --fs-btn-h: clamp(38px, 10.6vh, 48px);
    --fs-btn-gap: clamp(4px, 1.2vw, 8px);
    --fs-shoot: clamp(82px, 23vh, 118px);
  }
  body.table-fullscreen-mode #shootBtn {
    font-size: clamp(18px, 4.8vh, 26px) !important;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  body.table-fullscreen-mode {
    --fs-btn-w: clamp(78px, 25vw, 104px);
    --fs-btn-h: clamp(34px, 11vw, 46px);
    --fs-shoot: clamp(86px, 27vw, 118px);
  }
}


/* v209 · Mesa completa móvil: bola de efecto externa, grande y táctil.
   En Android/iOS se retira el control de efecto de la mesa y se coloca
   abajo a la izquierda, del mismo tamaño visual que el botón Tirar. */
@media (max-width: 860px), (pointer: coarse) {
  body.table-fullscreen-mode .effect-control:not(.hidden) {
    position: fixed !important;
    left: var(--fs-pad-left, max(4px, env(safe-area-inset-left))) !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--mobile-fs-effect-bottom, var(--fs-pad-bottom, max(6px, env(safe-area-inset-bottom)))) !important;
    width: var(--fs-shoot, var(--fs-shoot-size, 96px)) !important;
    height: var(--fs-shoot, var(--fs-shoot-size, 96px)) !important;
    min-width: var(--fs-shoot, var(--fs-shoot-size, 96px)) !important;
    min-height: var(--fs-shoot, var(--fs-shoot-size, 96px)) !important;
    max-width: var(--fs-shoot, var(--fs-shoot-size, 96px)) !important;
    max-height: var(--fs-shoot, var(--fs-shoot-size, 96px)) !important;
    transform: none !important;
    transform-origin: center !important;
    z-index: 10105 !important;
    opacity: .98 !important;
    pointer-events: auto !important;
    touch-action: none !important;
    transition: opacity .12s ease !important;
  }

  body.table-fullscreen-mode .effect-control.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.table-fullscreen-mode .effect-ball {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    border-radius: 50% !important;
    pointer-events: auto !important;
    touch-action: none !important;
    cursor: grab !important;
    border: 2px solid rgba(255,255,255,.82) !important;
    box-shadow:
      0 0 0 5px rgba(255,255,255,.16),
      0 0 28px rgba(255,255,255,.36),
      0 12px 30px rgba(0,0,0,.56),
      inset -12px -14px 18px rgba(0,0,0,.24),
      inset 8px 8px 13px rgba(255,255,255,.82) !important;
  }

  body.table-fullscreen-mode .effect-ball::before,
  body.table-fullscreen-mode .effect-ball::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    opacity: .28;
  }

  body.table-fullscreen-mode .effect-ball::before {
    left: 50%;
    top: 11%;
    bottom: 11%;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(0,0,0,.38);
  }

  body.table-fullscreen-mode .effect-ball::after {
    top: 50%;
    left: 11%;
    right: 11%;
    height: 2px;
    transform: translateY(-50%);
    background: rgba(0,0,0,.38);
  }

  body.table-fullscreen-mode .effect-dot {
    width: clamp(18px, 5vw, 28px) !important;
    height: clamp(18px, 5vw, 28px) !important;
    border-width: 3px !important;
    z-index: 3 !important;
    pointer-events: auto !important;
    touch-action: none !important;
    box-shadow: 0 0 18px rgba(215,25,42,.85), 0 3px 10px rgba(0,0,0,.42) !important;
  }

  body.table-fullscreen-mode .effect-dot::after {
    inset: -28px !important;
  }

  body.table-fullscreen-mode #shootBtn,
  body.table-fullscreen-mode #shootBtn.primary-action {
    right: var(--fs-pad-right, max(4px, env(safe-area-inset-right))) !important;
    bottom: var(--mobile-fs-shoot-bottom, var(--fs-pad-bottom, max(6px, env(safe-area-inset-bottom)))) !important;
  }
}

@media (max-width: 920px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  body.table-fullscreen-mode .effect-control:not(.hidden) {
    width: var(--fs-shoot, var(--fs-shoot-size, 86px)) !important;
    height: var(--fs-shoot, var(--fs-shoot-size, 86px)) !important;
    min-width: var(--fs-shoot, var(--fs-shoot-size, 86px)) !important;
    min-height: var(--fs-shoot, var(--fs-shoot-size, 86px)) !important;
    max-width: var(--fs-shoot, var(--fs-shoot-size, 86px)) !important;
    max-height: var(--fs-shoot, var(--fs-shoot-size, 86px)) !important;
  }
}

/* v210 · Mesa completa móvil equilibrada.
   Objetivo: que la mesa conserve el máximo tamaño y los controles queden
   ordenados en los laterales, sin heredar posiciones viejas de v207/v208/v209.
   - Izquierda: selector, Repetir, Guía.
   - Derecha: Libre, Ubicar, Salir.
   - Abajo izquierda: bola de efecto táctil.
   - Abajo derecha: Tirar grande circular.
*/
@media (max-width: 980px), (pointer: coarse) {
  html body.table-fullscreen-mode {
    --fs-safe-top: max(4px, env(safe-area-inset-top));
    --fs-safe-bottom: max(6px, env(safe-area-inset-bottom));
    --fs-safe-left: max(4px, env(safe-area-inset-left));
    --fs-safe-right: max(4px, env(safe-area-inset-right));
    --fs-table-w: min(100vw, calc(100dvh * 1.785714));
    --fs-gutter: max(0px, calc((100vw - var(--fs-table-w)) / 2));
    --fs-side-w: clamp(82px, calc(var(--fs-gutter) - 12px), 126px);
    --fs-side-h: clamp(34px, 8.6vw, 48px);
    --fs-gap-y: clamp(5px, 1.4vw, 9px);
    --fs-main: clamp(84px, 17vw, 122px);
    --fs-left-x: max(var(--fs-safe-left), calc(var(--fs-gutter) - var(--fs-side-w) - 6px));
    --fs-right-x: max(var(--fs-safe-right), calc(var(--fs-gutter) - var(--fs-side-w) - 6px));
    overflow: hidden !important;
    background: #020604 !important;
  }

  html body.table-fullscreen-mode .app {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    background: #020604 !important;
  }

  html body.table-fullscreen-mode .table-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9990 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #020604 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body.table-fullscreen-mode .table {
    width: var(--fs-table-w) !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    aspect-ratio: 1000 / 560 !important;
    margin: 0 auto !important;
    border-radius: clamp(6px, 1.5vw, 16px) !important;
  }

  html body.table-fullscreen-mode .hud,
  html body.table-fullscreen-mode #practicePanel {
    display: block !important;
    position: fixed !important;
    top: var(--fs-safe-top) !important;
    left: var(--fs-left-x) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--fs-side-w) !important;
    min-width: var(--fs-side-w) !important;
    max-width: var(--fs-side-w) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10120 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  html body.table-fullscreen-mode #practicePanel .practice-top,
  html body.table-fullscreen-mode #practicePanel .practice-controls {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.table-fullscreen-mode #practiceSelect {
    display: block !important;
    width: var(--fs-side-w) !important;
    min-width: var(--fs-side-w) !important;
    max-width: var(--fs-side-w) !important;
    height: var(--fs-side-h) !important;
    min-height: var(--fs-side-h) !important;
    max-height: var(--fs-side-h) !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    font-size: clamp(9px, 2.45vw, 13px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: #06110d !important;
    background: linear-gradient(180deg, rgba(255, 222, 116, .99), rgba(226, 169, 43, .98)) !important;
    border: 1px solid rgba(255,255,255,.58) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.46) !important;
    text-align: center !important;
  }

  html body.table-fullscreen-mode #videoBtn,
  html body.table-fullscreen-mode #motionReplayBtn,
  html body.table-fullscreen-mode #demoBtn,
  html body.table-fullscreen-mode #randomBtn {
    display: none !important;
  }

  html body.table-fullscreen-mode .bottom-table-actions {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10100 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.table-fullscreen-mode .bottom-table-actions button {
    position: fixed !important;
    width: var(--fs-side-w) !important;
    height: var(--fs-side-h) !important;
    min-width: var(--fs-side-w) !important;
    min-height: var(--fs-side-h) !important;
    max-width: var(--fs-side-w) !important;
    max-height: var(--fs-side-h) !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(9px, 2.45vw, 13px) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: normal !important;
    opacity: .96 !important;
    pointer-events: auto !important;
    z-index: 10110 !important;
    transform: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.46) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Limpiar posiciones heredadas: cada botón define top/left/right/bottom explícitamente. */
  html body.table-fullscreen-mode #replayBtn {
    left: var(--fs-left-x) !important;
    right: auto !important;
    top: calc(var(--fs-safe-top) + var(--fs-side-h) + var(--fs-gap-y)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #guideBtn {
    left: var(--fs-left-x) !important;
    right: auto !important;
    top: calc(var(--fs-safe-top) + (var(--fs-side-h) * 2) + (var(--fs-gap-y) * 2)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #exitPracticeBtn {
    left: auto !important;
    right: var(--fs-right-x) !important;
    top: var(--fs-safe-top) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #placeBtn {
    left: auto !important;
    right: var(--fs-right-x) !important;
    top: calc(var(--fs-safe-top) + var(--fs-side-h) + var(--fs-gap-y)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #fullscreenTableBtn {
    left: auto !important;
    right: var(--fs-right-x) !important;
    top: calc(var(--fs-safe-top) + (var(--fs-side-h) * 2) + (var(--fs-gap-y) * 2)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #shootBtn,
  html body.table-fullscreen-mode #shootBtn.primary-action {
    left: auto !important;
    right: var(--fs-right-x) !important;
    top: auto !important;
    bottom: max(8px, calc(var(--fs-safe-bottom) + 2px)) !important;
    width: var(--fs-main) !important;
    height: var(--fs-main) !important;
    min-width: var(--fs-main) !important;
    min-height: var(--fs-main) !important;
    max-width: var(--fs-main) !important;
    max-height: var(--fs-main) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: clamp(17px, 4.5vw, 28px) !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    z-index: 10130 !important;
    box-shadow: 0 0 0 5px rgba(255,255,255,.16), 0 0 28px rgba(255,213,106,.44), 0 13px 30px rgba(0,0,0,.58) !important;
  }

  html body.table-fullscreen-mode .effect-control:not(.hidden) {
    position: fixed !important;
    left: var(--fs-left-x) !important;
    right: auto !important;
    top: auto !important;
    bottom: max(8px, calc(var(--fs-safe-bottom) + 2px)) !important;
    width: var(--fs-main) !important;
    height: var(--fs-main) !important;
    min-width: var(--fs-main) !important;
    min-height: var(--fs-main) !important;
    max-width: var(--fs-main) !important;
    max-height: var(--fs-main) !important;
    transform: none !important;
    transform-origin: center !important;
    z-index: 10130 !important;
    opacity: .98 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  html body.table-fullscreen-mode .effect-ball {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  html body.table-fullscreen-mode .effect-dot {
    width: clamp(18px, 4.8vw, 28px) !important;
    height: clamp(18px, 4.8vw, 28px) !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }
}

@media (max-width: 980px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html body.table-fullscreen-mode {
    --fs-side-w: clamp(82px, calc(var(--fs-gutter) - 10px), 132px);
    --fs-side-h: clamp(32px, 7.4vh, 46px);
    --fs-main: clamp(78px, 17vh, 116px);
    --fs-gap-y: clamp(4px, 1.2vh, 7px);
  }
}

@media (max-width: 620px) and (orientation: portrait) {
  html body.table-fullscreen-mode {
    --fs-side-w: clamp(72px, 21vw, 94px);
    --fs-side-h: clamp(32px, 9vw, 44px);
    --fs-main: clamp(78px, 22vw, 106px);
    --fs-left-x: var(--fs-safe-left);
    --fs-right-x: var(--fs-safe-right);
  }

  html body.table-fullscreen-mode .table {
    width: min(100vw, calc(100dvh * 1.785714)) !important;
    max-height: 100dvh !important;
  }
}


/* v211 · Mesa completa móvil organizada y diamantes visibles.
   Diseño final para Android/iOS en horizontal: controles en columnas dentro de las zonas negras laterales,
   sin invadir el paño ni tapar los diamantes. */
@media (orientation: landscape) and (pointer: coarse), (orientation: landscape) and (hover: none), (orientation: landscape) and (max-width: 1180px) {
  html body.table-fullscreen-mode {
    --v211-safe-top: max(7px, env(safe-area-inset-top));
    --v211-safe-bottom: max(7px, env(safe-area-inset-bottom));
    --v211-safe-left: max(6px, env(safe-area-inset-left));
    --v211-safe-right: max(6px, env(safe-area-inset-right));
    --v211-table-w: min(calc(100vw - clamp(150px, 22vw, 230px)), calc(100dvh * 1.785714));
    --v211-gutter: max(72px, calc((100vw - var(--v211-table-w)) / 2));
    --v211-btn-w: clamp(66px, calc(var(--v211-gutter) - 26px), 118px);
    --v211-btn-h: clamp(31px, 7.2vh, 44px);
    --v211-gap: clamp(5px, 1.35vh, 9px);
    --v211-main: clamp(58px, min(15vh, calc(var(--v211-gutter) - 28px)), 88px);
    --v211-left-x: max(var(--v211-safe-left), calc((var(--v211-gutter) - var(--v211-btn-w)) / 2));
    --v211-right-x: max(var(--v211-safe-right), calc((var(--v211-gutter) - var(--v211-btn-w)) / 2));
    --v211-main-left-x: max(var(--v211-safe-left), calc((var(--v211-gutter) - var(--v211-main)) / 2));
    overflow: hidden !important;
    background: #020604 !important;
  }

  html body.table-fullscreen-mode .app,
  html body.table-fullscreen-mode .table-shell {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #020604 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body.table-fullscreen-mode .table-shell {
    z-index: 9990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body.table-fullscreen-mode .table {
    width: var(--v211-table-w) !important;
    height: auto !important;
    max-width: var(--v211-table-w) !important;
    max-height: 100dvh !important;
    aspect-ratio: 1000 / 560 !important;
    margin: 0 auto !important;
    border-radius: clamp(7px, 1.6vw, 17px) !important;
  }

  html body.table-fullscreen-mode .hud,
  html body.table-fullscreen-mode #practicePanel {
    display: block !important;
    position: fixed !important;
    top: var(--v211-safe-top) !important;
    left: var(--v211-left-x) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--v211-btn-w) !important;
    min-width: var(--v211-btn-w) !important;
    max-width: var(--v211-btn-w) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    z-index: 10240 !important;
    transform: none !important;
  }

  html body.table-fullscreen-mode #practicePanel .practice-top,
  html body.table-fullscreen-mode #practicePanel .practice-controls {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.table-fullscreen-mode #practiceSelect {
    display: block !important;
    position: fixed !important;
    top: var(--v211-safe-top) !important;
    left: var(--v211-left-x) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--v211-btn-w) !important;
    min-width: var(--v211-btn-w) !important;
    max-width: var(--v211-btn-w) !important;
    height: var(--v211-btn-h) !important;
    min-height: var(--v211-btn-h) !important;
    max-height: var(--v211-btn-h) !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: clamp(8.5px, 2.15vh, 13px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    color: #06110d !important;
    background: linear-gradient(180deg, rgba(255, 225, 128, .99), rgba(225, 168, 45, .99)) !important;
    border: 1px solid rgba(255,255,255,.58) !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.50), 0 0 14px rgba(255,213,106,.22) !important;
    z-index: 10260 !important;
    pointer-events: auto !important;
  }

  html body.table-fullscreen-mode #videoBtn,
  html body.table-fullscreen-mode #motionReplayBtn,
  html body.table-fullscreen-mode #demoBtn,
  html body.table-fullscreen-mode #randomBtn {
    display: none !important;
  }

  html body.table-fullscreen-mode .bottom-table-actions {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 10200 !important;
  }

  html body.table-fullscreen-mode .bottom-table-actions button {
    position: fixed !important;
    width: var(--v211-btn-w) !important;
    height: var(--v211-btn-h) !important;
    min-width: var(--v211-btn-w) !important;
    min-height: var(--v211-btn-h) !important;
    max-width: var(--v211-btn-w) !important;
    max-height: var(--v211-btn-h) !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(8.5px, 2.15vh, 13px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: normal !important;
    pointer-events: auto !important;
    opacity: .97 !important;
    z-index: 10250 !important;
    transform: none !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.50) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Columna superior izquierda: Jugada, Guía, Repetir. */
  html body.table-fullscreen-mode #guideBtn {
    left: var(--v211-left-x) !important;
    right: auto !important;
    top: calc(var(--v211-safe-top) + var(--v211-btn-h) + var(--v211-gap)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #replayBtn {
    left: var(--v211-left-x) !important;
    right: auto !important;
    top: calc(var(--v211-safe-top) + (var(--v211-btn-h) * 2) + (var(--v211-gap) * 2)) !important;
    bottom: auto !important;
  }

  /* Columna superior derecha: Libre, Ubicar, Salir. */
  html body.table-fullscreen-mode #exitPracticeBtn {
    left: auto !important;
    right: var(--v211-right-x) !important;
    top: var(--v211-safe-top) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #placeBtn {
    left: auto !important;
    right: var(--v211-right-x) !important;
    top: calc(var(--v211-safe-top) + var(--v211-btn-h) + var(--v211-gap)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #fullscreenTableBtn {
    left: auto !important;
    right: var(--v211-right-x) !important;
    top: calc(var(--v211-safe-top) + (var(--v211-btn-h) * 2) + (var(--v211-gap) * 2)) !important;
    bottom: auto !important;
  }

  /* Parte inferior izquierda: Tirar frente a la bola de efecto, sin tapar diamantes. */
  html body.table-fullscreen-mode .effect-control:not(.hidden) {
    position: fixed !important;
    left: var(--v211-main-left-x) !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--v211-safe-bottom) !important;
    width: var(--v211-main) !important;
    height: var(--v211-main) !important;
    min-width: var(--v211-main) !important;
    min-height: var(--v211-main) !important;
    max-width: var(--v211-main) !important;
    max-height: var(--v211-main) !important;
    transform: none !important;
    z-index: 10270 !important;
    opacity: .98 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  html body.table-fullscreen-mode #shootBtn,
  html body.table-fullscreen-mode #shootBtn.primary-action {
    position: fixed !important;
    left: var(--v211-main-left-x) !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(var(--v211-safe-bottom) + var(--v211-main) + var(--v211-gap)) !important;
    width: var(--v211-main) !important;
    height: var(--v211-main) !important;
    min-width: var(--v211-main) !important;
    min-height: var(--v211-main) !important;
    max-width: var(--v211-main) !important;
    max-height: var(--v211-main) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: clamp(14px, 4.0vh, 25px) !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    z-index: 10280 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 0 26px rgba(255,213,106,.45), 0 13px 30px rgba(0,0,0,.58) !important;
  }

  html body.table-fullscreen-mode .effect-ball {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  html body.table-fullscreen-mode .effect-dot {
    width: clamp(14px, 4.2vh, 24px) !important;
    height: clamp(14px, 4.2vh, 24px) !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }
}

/* Ajuste para móviles en vertical: se conserva la distribución lógica, pero más compacta para no tapar la mesa. */
@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (hover: none), (orientation: portrait) and (max-width: 760px) {
  html body.table-fullscreen-mode {
    --v211-safe-top: max(8px, env(safe-area-inset-top));
    --v211-safe-bottom: max(8px, env(safe-area-inset-bottom));
    --v211-safe-left: max(6px, env(safe-area-inset-left));
    --v211-safe-right: max(6px, env(safe-area-inset-right));
    --v211-btn-w: clamp(72px, 24vw, 106px);
    --v211-btn-h: clamp(31px, 8vw, 42px);
    --v211-main: clamp(70px, 23vw, 104px);
    --v211-gap: clamp(5px, 1.6vw, 9px);
  }

  html body.table-fullscreen-mode .table {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
  }

  html body.table-fullscreen-mode #practiceSelect,
  html body.table-fullscreen-mode #guideBtn,
  html body.table-fullscreen-mode #replayBtn,
  html body.table-fullscreen-mode #exitPracticeBtn,
  html body.table-fullscreen-mode #placeBtn,
  html body.table-fullscreen-mode #fullscreenTableBtn {
    width: var(--v211-btn-w) !important;
    min-width: var(--v211-btn-w) !important;
    max-width: var(--v211-btn-w) !important;
    height: var(--v211-btn-h) !important;
    min-height: var(--v211-btn-h) !important;
    max-height: var(--v211-btn-h) !important;
    font-size: clamp(9px, 2.8vw, 13px) !important;
  }

  html body.table-fullscreen-mode #practiceSelect {
    position: fixed !important;
    left: var(--v211-safe-left) !important;
    top: var(--v211-safe-top) !important;
    right: auto !important;
  }
  html body.table-fullscreen-mode #guideBtn {
    left: var(--v211-safe-left) !important;
    top: calc(var(--v211-safe-top) + var(--v211-btn-h) + var(--v211-gap)) !important;
  }
  html body.table-fullscreen-mode #replayBtn {
    left: var(--v211-safe-left) !important;
    top: calc(var(--v211-safe-top) + (var(--v211-btn-h) * 2) + (var(--v211-gap) * 2)) !important;
  }
  html body.table-fullscreen-mode #exitPracticeBtn {
    right: var(--v211-safe-right) !important;
    top: var(--v211-safe-top) !important;
  }
  html body.table-fullscreen-mode #placeBtn {
    right: var(--v211-safe-right) !important;
    top: calc(var(--v211-safe-top) + var(--v211-btn-h) + var(--v211-gap)) !important;
  }
  html body.table-fullscreen-mode #fullscreenTableBtn {
    right: var(--v211-safe-right) !important;
    top: calc(var(--v211-safe-top) + (var(--v211-btn-h) * 2) + (var(--v211-gap) * 2)) !important;
  }

  html body.table-fullscreen-mode .effect-control:not(.hidden) {
    left: var(--v211-safe-left) !important;
    bottom: var(--v211-safe-bottom) !important;
    width: var(--v211-main) !important;
    height: var(--v211-main) !important;
    min-width: var(--v211-main) !important;
    min-height: var(--v211-main) !important;
  }
  html body.table-fullscreen-mode #shootBtn,
  html body.table-fullscreen-mode #shootBtn.primary-action {
    left: calc(var(--v211-safe-left) + var(--v211-main) + var(--v211-gap)) !important;
    right: auto !important;
    bottom: var(--v211-safe-bottom) !important;
    top: auto !important;
    width: var(--v211-main) !important;
    height: var(--v211-main) !important;
    min-width: var(--v211-main) !important;
    min-height: var(--v211-main) !important;
    border-radius: 50% !important;
  }
}

/* v212 · Mesa completa móvil ordenada final.
   Distribución solicitada para Android/iOS:
   - Izquierda superior: Jugada, Repetir, Guía.
   - Derecha superior: Libre, Ubicar, Salir.
   - Inferior izquierda: bola de efecto grande.
   - Inferior derecha: Tirar grande, debajo visualmente de Salir.
   Los controles se alojan en las zonas laterales para dejar visibles los diamantes. */
@media (orientation: landscape) and (pointer: coarse), (orientation: landscape) and (hover: none), (orientation: landscape) and (max-width: 1180px) {
  html body.table-fullscreen-mode {
    --v212-safe-top: max(7px, env(safe-area-inset-top));
    --v212-safe-bottom: max(7px, env(safe-area-inset-bottom));
    --v212-safe-left: max(6px, env(safe-area-inset-left));
    --v212-safe-right: max(6px, env(safe-area-inset-right));
    --v212-table-w: min(calc(100vw - clamp(174px, 24vw, 260px)), calc(100dvh * 1.785714));
    --v212-gutter: max(84px, calc((100vw - var(--v212-table-w)) / 2));
    --v212-btn-w: clamp(76px, calc(var(--v212-gutter) - 26px), 126px);
    --v212-btn-h: clamp(32px, 7.2vh, 46px);
    --v212-gap: clamp(6px, 1.35vh, 10px);
    --v212-main: clamp(78px, min(19vh, calc(var(--v212-gutter) - 20px)), 124px);
    --v212-left-x: max(var(--v212-safe-left), calc((var(--v212-gutter) - var(--v212-btn-w)) / 2));
    --v212-right-x: max(var(--v212-safe-right), calc((var(--v212-gutter) - var(--v212-btn-w)) / 2));
    --v212-main-left-x: max(var(--v212-safe-left), calc((var(--v212-gutter) - var(--v212-main)) / 2));
    --v212-main-right-x: max(var(--v212-safe-right), calc((var(--v212-gutter) - var(--v212-main)) / 2));
    background: #020604 !important;
    overflow: hidden !important;
  }

  html body.table-fullscreen-mode .app,
  html body.table-fullscreen-mode .table-shell {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #020604 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body.table-fullscreen-mode .table-shell {
    z-index: 9990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body.table-fullscreen-mode .table {
    width: var(--v212-table-w) !important;
    max-width: var(--v212-table-w) !important;
    height: auto !important;
    max-height: 100dvh !important;
    aspect-ratio: 1000 / 560 !important;
    margin: 0 auto !important;
    border-radius: clamp(7px, 1.6vw, 17px) !important;
  }

  html body.table-fullscreen-mode .hud,
  html body.table-fullscreen-mode #practicePanel {
    display: block !important;
    position: fixed !important;
    top: var(--v212-safe-top) !important;
    left: var(--v212-left-x) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--v212-btn-w) !important;
    min-width: var(--v212-btn-w) !important;
    max-width: var(--v212-btn-w) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    z-index: 10340 !important;
    transform: none !important;
  }

  html body.table-fullscreen-mode #practicePanel .practice-top,
  html body.table-fullscreen-mode #practicePanel .practice-controls {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.table-fullscreen-mode #practiceSelect {
    display: block !important;
    position: fixed !important;
    top: var(--v212-safe-top) !important;
    left: var(--v212-left-x) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--v212-btn-w) !important;
    min-width: var(--v212-btn-w) !important;
    max-width: var(--v212-btn-w) !important;
    height: var(--v212-btn-h) !important;
    min-height: var(--v212-btn-h) !important;
    max-height: var(--v212-btn-h) !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: clamp(9px, 2.35vh, 14px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    color: #06110d !important;
    background: linear-gradient(180deg, rgba(255, 225, 128, .99), rgba(225, 168, 45, .99)) !important;
    border: 1px solid rgba(255,255,255,.58) !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.52), 0 0 14px rgba(255,213,106,.24) !important;
    z-index: 10360 !important;
    pointer-events: auto !important;
  }

  html body.table-fullscreen-mode .bottom-table-actions button {
    position: fixed !important;
    width: var(--v212-btn-w) !important;
    height: var(--v212-btn-h) !important;
    min-width: var(--v212-btn-w) !important;
    min-height: var(--v212-btn-h) !important;
    max-width: var(--v212-btn-w) !important;
    max-height: var(--v212-btn-h) !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(9px, 2.35vh, 14px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: normal !important;
    pointer-events: auto !important;
    opacity: .97 !important;
    z-index: 10350 !important;
    transform: none !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.52) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Izquierda: Jugada, Repetir, Guía. */
  html body.table-fullscreen-mode #replayBtn {
    left: var(--v212-left-x) !important;
    right: auto !important;
    top: calc(var(--v212-safe-top) + var(--v212-btn-h) + var(--v212-gap)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #guideBtn {
    left: var(--v212-left-x) !important;
    right: auto !important;
    top: calc(var(--v212-safe-top) + (var(--v212-btn-h) * 2) + (var(--v212-gap) * 2)) !important;
    bottom: auto !important;
  }

  /* Derecha: Libre, Ubicar, Salir. */
  html body.table-fullscreen-mode #exitPracticeBtn {
    left: auto !important;
    right: var(--v212-right-x) !important;
    top: var(--v212-safe-top) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #placeBtn {
    left: auto !important;
    right: var(--v212-right-x) !important;
    top: calc(var(--v212-safe-top) + var(--v212-btn-h) + var(--v212-gap)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #fullscreenTableBtn {
    left: auto !important;
    right: var(--v212-right-x) !important;
    top: calc(var(--v212-safe-top) + (var(--v212-btn-h) * 2) + (var(--v212-gap) * 2)) !important;
    bottom: auto !important;
  }

  /* Inferior izquierda: bola blanca de efecto grande, fuera de la mesa. */
  html body.table-fullscreen-mode .effect-control:not(.hidden) {
    position: fixed !important;
    left: var(--v212-main-left-x) !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--v212-safe-bottom) !important;
    width: var(--v212-main) !important;
    height: var(--v212-main) !important;
    min-width: var(--v212-main) !important;
    min-height: var(--v212-main) !important;
    max-width: var(--v212-main) !important;
    max-height: var(--v212-main) !important;
    transform: none !important;
    z-index: 10370 !important;
    opacity: .98 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  /* Inferior derecha: Tirar grande, alineado debajo de Salir. */
  html body.table-fullscreen-mode #shootBtn,
  html body.table-fullscreen-mode #shootBtn.primary-action {
    position: fixed !important;
    left: auto !important;
    right: var(--v212-main-right-x) !important;
    top: auto !important;
    bottom: var(--v212-safe-bottom) !important;
    width: var(--v212-main) !important;
    height: var(--v212-main) !important;
    min-width: var(--v212-main) !important;
    min-height: var(--v212-main) !important;
    max-width: var(--v212-main) !important;
    max-height: var(--v212-main) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: clamp(16px, 4.3vh, 28px) !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    z-index: 10380 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 0 30px rgba(255,213,106,.48), 0 13px 30px rgba(0,0,0,.60) !important;
  }

  html body.table-fullscreen-mode .effect-ball {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  html body.table-fullscreen-mode .effect-dot {
    width: clamp(17px, 4.8vh, 28px) !important;
    height: clamp(17px, 4.8vh, 28px) !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }
}

@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (hover: none), (orientation: portrait) and (max-width: 760px) {
  html body.table-fullscreen-mode {
    --v212-safe-top: max(8px, env(safe-area-inset-top));
    --v212-safe-bottom: max(8px, env(safe-area-inset-bottom));
    --v212-safe-left: max(6px, env(safe-area-inset-left));
    --v212-safe-right: max(6px, env(safe-area-inset-right));
    --v212-btn-w: clamp(78px, 25vw, 112px);
    --v212-btn-h: clamp(32px, 8.4vw, 44px);
    --v212-main: clamp(86px, 26vw, 122px);
    --v212-gap: clamp(5px, 1.6vw, 9px);
  }

  html body.table-fullscreen-mode #practiceSelect,
  html body.table-fullscreen-mode #replayBtn,
  html body.table-fullscreen-mode #guideBtn {
    left: var(--v212-safe-left) !important;
    right: auto !important;
  }

  html body.table-fullscreen-mode #practiceSelect {
    top: var(--v212-safe-top) !important;
  }

  html body.table-fullscreen-mode #replayBtn {
    top: calc(var(--v212-safe-top) + var(--v212-btn-h) + var(--v212-gap)) !important;
  }

  html body.table-fullscreen-mode #guideBtn {
    top: calc(var(--v212-safe-top) + (var(--v212-btn-h) * 2) + (var(--v212-gap) * 2)) !important;
  }

  html body.table-fullscreen-mode #exitPracticeBtn,
  html body.table-fullscreen-mode #placeBtn,
  html body.table-fullscreen-mode #fullscreenTableBtn {
    left: auto !important;
    right: var(--v212-safe-right) !important;
  }

  html body.table-fullscreen-mode #exitPracticeBtn { top: var(--v212-safe-top) !important; }
  html body.table-fullscreen-mode #placeBtn { top: calc(var(--v212-safe-top) + var(--v212-btn-h) + var(--v212-gap)) !important; }
  html body.table-fullscreen-mode #fullscreenTableBtn { top: calc(var(--v212-safe-top) + (var(--v212-btn-h) * 2) + (var(--v212-gap) * 2)) !important; }

  html body.table-fullscreen-mode .effect-control:not(.hidden) {
    left: var(--v212-safe-left) !important;
    bottom: var(--v212-safe-bottom) !important;
    width: var(--v212-main) !important;
    height: var(--v212-main) !important;
    min-width: var(--v212-main) !important;
    min-height: var(--v212-main) !important;
  }

  html body.table-fullscreen-mode #shootBtn,
  html body.table-fullscreen-mode #shootBtn.primary-action {
    left: auto !important;
    right: var(--v212-safe-right) !important;
    bottom: var(--v212-safe-bottom) !important;
    width: var(--v212-main) !important;
    height: var(--v212-main) !important;
    min-width: var(--v212-main) !important;
    min-height: var(--v212-main) !important;
  }
}

/* v213 · Mesa completa móvil: controles finales solicitados.
   - Izquierda: Guía encima de Seleccionar/Jugada.
   - Derecha: Libre, Ubicar, Repetir, Salir.
   - Tirar y bola de efecto permanecen grandes abajo, fuera del paño para no tapar la mesa ni diamantes. */
@media (orientation: landscape) and (pointer: coarse), (orientation: landscape) and (hover: none), (orientation: landscape) and (max-width: 1180px) {
  html body.table-fullscreen-mode {
    --v213-safe-top: max(7px, env(safe-area-inset-top));
    --v213-safe-bottom: max(7px, env(safe-area-inset-bottom));
    --v213-safe-left: max(6px, env(safe-area-inset-left));
    --v213-safe-right: max(6px, env(safe-area-inset-right));
    --v213-table-w: min(calc(100vw - clamp(178px, 24.5vw, 264px)), calc(100dvh * 1.785714));
    --v213-gutter: max(86px, calc((100vw - var(--v213-table-w)) / 2));
    --v213-btn-w: clamp(76px, calc(var(--v213-gutter) - 26px), 126px);
    --v213-btn-h: clamp(31px, 7.0vh, 45px);
    --v213-gap: clamp(5px, 1.22vh, 9px);
    --v213-main: clamp(80px, min(19vh, calc(var(--v213-gutter) - 18px)), 126px);
    --v213-left-x: max(var(--v213-safe-left), calc((var(--v213-gutter) - var(--v213-btn-w)) / 2));
    --v213-right-x: max(var(--v213-safe-right), calc((var(--v213-gutter) - var(--v213-btn-w)) / 2));
    --v213-main-left-x: max(var(--v213-safe-left), calc((var(--v213-gutter) - var(--v213-main)) / 2));
    --v213-main-right-x: max(var(--v213-safe-right), calc((var(--v213-gutter) - var(--v213-main)) / 2));
    background: #020604 !important;
    overflow: hidden !important;
  }

  html body.table-fullscreen-mode .table {
    width: var(--v213-table-w) !important;
    max-width: var(--v213-table-w) !important;
    height: auto !important;
    max-height: 100dvh !important;
    aspect-ratio: 1000 / 560 !important;
    margin: 0 auto !important;
  }

  html body.table-fullscreen-mode .hud,
  html body.table-fullscreen-mode #practicePanel {
    display: block !important;
    position: fixed !important;
    top: var(--v213-safe-top) !important;
    left: var(--v213-left-x) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--v213-btn-w) !important;
    min-width: var(--v213-btn-w) !important;
    max-width: var(--v213-btn-w) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    z-index: 10440 !important;
    transform: none !important;
  }

  html body.table-fullscreen-mode #practiceSelect,
  html body.table-fullscreen-mode .bottom-table-actions button {
    width: var(--v213-btn-w) !important;
    height: var(--v213-btn-h) !important;
    min-width: var(--v213-btn-w) !important;
    min-height: var(--v213-btn-h) !important;
    max-width: var(--v213-btn-w) !important;
    max-height: var(--v213-btn-h) !important;
    border-radius: 999px !important;
    font-size: clamp(9px, 2.28vh, 14px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    z-index: 10460 !important;
    pointer-events: auto !important;
  }

  /* Izquierda: Guía encima de Seleccionar/Jugada. */
  html body.table-fullscreen-mode #guideBtn {
    left: var(--v213-left-x) !important;
    right: auto !important;
    top: var(--v213-safe-top) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #practiceSelect {
    display: block !important;
    position: fixed !important;
    left: var(--v213-left-x) !important;
    right: auto !important;
    top: calc(var(--v213-safe-top) + var(--v213-btn-h) + var(--v213-gap)) !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 5px !important;
    color: #06110d !important;
    background: linear-gradient(180deg, rgba(255, 225, 128, .99), rgba(225, 168, 45, .99)) !important;
    border: 1px solid rgba(255,255,255,.58) !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.52), 0 0 14px rgba(255,213,106,.24) !important;
  }

  /* Derecha: Libre, Ubicar, Repetir, Salir. */
  html body.table-fullscreen-mode #exitPracticeBtn {
    left: auto !important;
    right: var(--v213-right-x) !important;
    top: var(--v213-safe-top) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #placeBtn {
    left: auto !important;
    right: var(--v213-right-x) !important;
    top: calc(var(--v213-safe-top) + var(--v213-btn-h) + var(--v213-gap)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #replayBtn {
    left: auto !important;
    right: var(--v213-right-x) !important;
    top: calc(var(--v213-safe-top) + (var(--v213-btn-h) * 2) + (var(--v213-gap) * 2)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #fullscreenTableBtn {
    left: auto !important;
    right: var(--v213-right-x) !important;
    top: calc(var(--v213-safe-top) + (var(--v213-btn-h) * 3) + (var(--v213-gap) * 3)) !important;
    bottom: auto !important;
  }

  /* Grandes abajo y fuera del área útil de la mesa. */
  html body.table-fullscreen-mode .effect-control:not(.hidden) {
    position: fixed !important;
    left: var(--v213-main-left-x) !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--v213-safe-bottom) !important;
    width: var(--v213-main) !important;
    height: var(--v213-main) !important;
    min-width: var(--v213-main) !important;
    min-height: var(--v213-main) !important;
    max-width: var(--v213-main) !important;
    max-height: var(--v213-main) !important;
    z-index: 10470 !important;
  }

  html body.table-fullscreen-mode #shootBtn,
  html body.table-fullscreen-mode #shootBtn.primary-action {
    position: fixed !important;
    left: auto !important;
    right: var(--v213-main-right-x) !important;
    top: auto !important;
    bottom: var(--v213-safe-bottom) !important;
    width: var(--v213-main) !important;
    height: var(--v213-main) !important;
    min-width: var(--v213-main) !important;
    min-height: var(--v213-main) !important;
    max-width: var(--v213-main) !important;
    max-height: var(--v213-main) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: clamp(16px, 4.3vh, 28px) !important;
    z-index: 10480 !important;
  }
}

@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (hover: none), (orientation: portrait) and (max-width: 760px) {
  html body.table-fullscreen-mode {
    --v213-safe-top: max(8px, env(safe-area-inset-top));
    --v213-safe-bottom: max(8px, env(safe-area-inset-bottom));
    --v213-safe-left: max(6px, env(safe-area-inset-left));
    --v213-safe-right: max(6px, env(safe-area-inset-right));
    --v213-btn-w: clamp(78px, 25vw, 112px);
    --v213-btn-h: clamp(32px, 8.4vw, 44px);
    --v213-main: clamp(88px, 27vw, 124px);
    --v213-gap: clamp(5px, 1.6vw, 9px);
  }

  html body.table-fullscreen-mode #guideBtn {
    left: var(--v213-safe-left) !important;
    right: auto !important;
    top: var(--v213-safe-top) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #practiceSelect {
    left: var(--v213-safe-left) !important;
    right: auto !important;
    top: calc(var(--v213-safe-top) + var(--v213-btn-h) + var(--v213-gap)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #exitPracticeBtn {
    left: auto !important;
    right: var(--v213-safe-right) !important;
    top: var(--v213-safe-top) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #placeBtn {
    left: auto !important;
    right: var(--v213-safe-right) !important;
    top: calc(var(--v213-safe-top) + var(--v213-btn-h) + var(--v213-gap)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #replayBtn {
    left: auto !important;
    right: var(--v213-safe-right) !important;
    top: calc(var(--v213-safe-top) + (var(--v213-btn-h) * 2) + (var(--v213-gap) * 2)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode #fullscreenTableBtn {
    left: auto !important;
    right: var(--v213-safe-right) !important;
    top: calc(var(--v213-safe-top) + (var(--v213-btn-h) * 3) + (var(--v213-gap) * 3)) !important;
    bottom: auto !important;
  }

  html body.table-fullscreen-mode .effect-control:not(.hidden) {
    left: var(--v213-safe-left) !important;
    right: auto !important;
    bottom: var(--v213-safe-bottom) !important;
    width: var(--v213-main) !important;
    height: var(--v213-main) !important;
    min-width: var(--v213-main) !important;
    min-height: var(--v213-main) !important;
  }

  html body.table-fullscreen-mode #shootBtn,
  html body.table-fullscreen-mode #shootBtn.primary-action {
    left: auto !important;
    right: var(--v213-safe-right) !important;
    bottom: var(--v213-safe-bottom) !important;
    width: var(--v213-main) !important;
    height: var(--v213-main) !important;
    min-width: var(--v213-main) !important;
    min-height: var(--v213-main) !important;
  }
}


/* v216 · Mesa completa móvil con menú modal.
   En Android/iOS solo quedan visibles la bola de efecto, Tirar y un botón pequeño de Opciones.
   El resto de controles se abren dentro de un modal para que la mesa conserve el máximo tamaño. */
.mobile-fs-menu-btn,
.mobile-fs-menu-modal {
  display: none;
}

@media (max-width: 980px), (pointer: coarse) {
  html body.table-fullscreen-mode {
    --v216-safe-top: max(8px, env(safe-area-inset-top));
    --v216-safe-bottom: max(8px, env(safe-area-inset-bottom));
    --v216-safe-left: max(7px, env(safe-area-inset-left));
    --v216-safe-right: max(7px, env(safe-area-inset-right));
    --v216-table-w: min(100vw, calc(100dvh * 1.785714));
    --v216-gutter: max(0px, calc((100vw - var(--v216-table-w)) / 2));
    --v216-main: clamp(78px, min(19.5vh, max(76px, calc(var(--v216-gutter) - 8px))), 120px);
    --v216-menu-w: clamp(78px, min(23vw, max(78px, calc(var(--v216-gutter) - 10px))), 112px);
    background: #020604 !important;
    overflow: hidden !important;
  }

  html body.table-fullscreen-mode .app,
  html body.table-fullscreen-mode .table-shell {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #020604 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body.table-fullscreen-mode .table-shell {
    z-index: 9990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body.table-fullscreen-mode .table {
    width: var(--v216-table-w) !important;
    max-width: var(--v216-table-w) !important;
    height: auto !important;
    max-height: 100dvh !important;
    aspect-ratio: 1000 / 560 !important;
    margin: 0 auto !important;
    border-radius: clamp(7px, 1.4vw, 16px) !important;
  }

  /* Ocultar los controles heredados dentro de mesa completa móvil. */
  html body.table-fullscreen-mode .hud,
  html body.table-fullscreen-mode #practicePanel,
  html body.table-fullscreen-mode #practiceSelect,
  html body.table-fullscreen-mode #videoBtn,
  html body.table-fullscreen-mode #replayBtn,
  html body.table-fullscreen-mode #motionReplayBtn,
  html body.table-fullscreen-mode #guideBtn,
  html body.table-fullscreen-mode #demoBtn,
  html body.table-fullscreen-mode #exitPracticeBtn,
  html body.table-fullscreen-mode #placeBtn,
  html body.table-fullscreen-mode #randomBtn,
  html body.table-fullscreen-mode #fullscreenTableBtn {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body.table-fullscreen-mode .bottom-table-actions {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 10400 !important;
  }

  html body.table-fullscreen-mode #shootBtn,
  html body.table-fullscreen-mode #shootBtn.primary-action {
    display: inline-flex !important;
    position: fixed !important;
    left: auto !important;
    right: max(var(--v216-safe-right), calc((var(--v216-gutter) - var(--v216-main)) / 2)) !important;
    top: auto !important;
    bottom: var(--mobile-fs-shoot-bottom, var(--v216-safe-bottom)) !important;
    width: var(--v216-main) !important;
    height: var(--v216-main) !important;
    min-width: var(--v216-main) !important;
    min-height: var(--v216-main) !important;
    max-width: var(--v216-main) !important;
    max-height: var(--v216-main) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: clamp(16px, 4.5vh, 28px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    z-index: 10520 !important;
    opacity: .98 !important;
    pointer-events: auto !important;
    box-shadow: 0 0 0 5px rgba(255,255,255,.16), 0 0 30px rgba(255,213,106,.48), 0 13px 30px rgba(0,0,0,.58) !important;
  }

  html body.table-fullscreen-mode .effect-control:not(.hidden) {
    display: block !important;
    position: fixed !important;
    left: max(var(--v216-safe-left), calc((var(--v216-gutter) - var(--v216-main)) / 2)) !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--mobile-fs-effect-bottom, var(--v216-safe-bottom)) !important;
    width: var(--v216-main) !important;
    height: var(--v216-main) !important;
    min-width: var(--v216-main) !important;
    min-height: var(--v216-main) !important;
    max-width: var(--v216-main) !important;
    max-height: var(--v216-main) !important;
    transform: none !important;
    opacity: .98 !important;
    z-index: 10525 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  html body.table-fullscreen-mode .effect-ball {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  html body.table-fullscreen-mode .effect-dot {
    width: clamp(17px, 4.2vh, 28px) !important;
    height: clamp(17px, 4.2vh, 28px) !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  html body.table-fullscreen-mode .mobile-fs-menu-btn {
    display: inline-flex !important;
    position: fixed !important;
    right: max(var(--v216-safe-right), calc((var(--v216-gutter) - var(--v216-menu-w)) / 2)) !important;
    top: var(--v216-safe-top) !important;
    width: var(--v216-menu-w) !important;
    min-width: var(--v216-menu-w) !important;
    max-width: var(--v216-menu-w) !important;
    height: clamp(34px, 8vh, 46px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.50) !important;
    color: #06110d !important;
    background: linear-gradient(180deg, rgba(255, 226, 124, .99), rgba(224, 166, 43, .98)) !important;
    box-shadow: 0 8px 21px rgba(0,0,0,.52), 0 0 18px rgba(255,213,106,.24) !important;
    font-weight: 950 !important;
    font-size: clamp(10px, 2.6vh, 14px) !important;
    line-height: 1 !important;
    z-index: 10610 !important;
    pointer-events: auto !important;
  }

  html body.table-fullscreen-mode .mobile-fs-menu-btn[hidden] {
    display: none !important;
  }

  .mobile-fs-menu-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: rgba(0, 0, 0, .54);
    z-index: 12000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .mobile-fs-menu-modal.open {
    display: flex !important;
  }

  .mobile-fs-menu-card {
    width: min(92vw, 560px);
    max-height: min(86dvh, 540px);
    overflow-y: auto;
    border-radius: 22px;
    padding: clamp(14px, 3.2vw, 20px);
    background: linear-gradient(180deg, rgba(8, 43, 34, .96), rgba(1, 12, 9, .98));
    border: 1px solid rgba(255, 220, 117, .35);
    box-shadow: 0 24px 70px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.10);
    color: var(--cream, #fff3d4);
    -webkit-overflow-scrolling: touch;
  }

  .mobile-fs-menu-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .mobile-fs-menu-head h2 {
    margin: 0;
    font-size: clamp(18px, 4.5vw, 24px);
    color: #ffe8a6;
  }

  .mobile-fs-menu-head p,
  .mobile-fs-menu-note {
    margin: 4px 0 0;
    font-size: clamp(12px, 3vw, 14px);
    opacity: .82;
  }

  .mobile-fs-menu-close {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 25px;
    line-height: 1;
    padding: 0;
  }

  .mobile-fs-menu-label {
    display: block;
    margin: 6px 0 6px;
    font-size: 12px;
    font-weight: 850;
    color: #ffe8a6;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .mobile-fs-select {
    width: 100%;
    min-height: 48px;
    border-radius: 16px;
    padding: 0 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,.45);
    background: linear-gradient(180deg, rgba(255, 226, 124, .99), rgba(224, 166, 43, .98));
    color: #06110d;
    font-size: 16px;
    font-weight: 900;
  }

  .mobile-fs-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mobile-fs-menu-grid button {
    min-height: 48px;
    border-radius: 16px;
    font-size: clamp(13px, 3.2vw, 16px);
    font-weight: 900;
    padding: 8px 10px;
  }

  .mobile-fs-menu-grid .mobile-fs-exit {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, rgba(255, 118, 118, .96), rgba(155, 23, 23, .96));
    color: #fff7f7;
  }

  .mobile-fs-menu-grid button:disabled {
    opacity: .48;
    filter: grayscale(.3);
  }
}

@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (hover: none), (orientation: portrait) and (max-width: 760px) {
  html body.table-fullscreen-mode {
    --v216-main: clamp(86px, 25vw, 122px);
    --v216-menu-w: clamp(98px, 28vw, 132px);
  }

  html body.table-fullscreen-mode .mobile-fs-menu-btn {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  html body.table-fullscreen-mode #shootBtn,
  html body.table-fullscreen-mode #shootBtn.primary-action {
    right: var(--v216-safe-right) !important;
  }

  html body.table-fullscreen-mode .effect-control:not(.hidden) {
    left: var(--v216-safe-left) !important;
  }
}

@media (orientation: landscape) and (pointer: coarse), (orientation: landscape) and (hover: none), (orientation: landscape) and (max-width: 1180px) {
  html body.table-fullscreen-mode {
    --v216-table-w: min(100vw, calc(100dvh * 1.785714));
    --v216-gutter: max(0px, calc((100vw - var(--v216-table-w)) / 2));
    --v216-main: clamp(62px, min(20vh, max(62px, calc(var(--v216-gutter) - 10px))), 108px);
    --v216-menu-w: clamp(68px, min(16vw, max(68px, calc(var(--v216-gutter) - 12px))), 106px);
  }
}


/* v217 · Ocultar la guía dinámica de contacto solo en móviles.
   En computadores, tablets grandes y TV se mantiene visible. */
@media (max-width: 860px), (max-height: 520px) and (pointer: coarse), (max-height: 520px) and (hover: none) {
  html body #deflectionGuidePanel,
  html body .deflection-guide-panel {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

@media (min-width: 861px) and (min-height: 521px) {
  html body:not(.table-fullscreen-mode) #deflectionGuidePanel,
  html body:not(.table-fullscreen-mode) .deflection-guide-panel {
    display: block;
    visibility: visible;
  }
}


/* v219 · Botón Salir directo en Mesa completa móvil.
   Mantiene la mesa despejada: Opciones queda arriba a la izquierda y Salir arriba a la derecha. */
.mobile-fs-quick-exit-btn {
  display: none;
}

@media (max-width: 980px), (pointer: coarse) {
  html body.table-fullscreen-mode .mobile-fs-quick-exit-btn:not([hidden]) {
    display: inline-flex !important;
    position: fixed !important;
    top: var(--v216-safe-top, max(8px, env(safe-area-inset-top))) !important;
    right: max(var(--v216-safe-right, 8px), calc((var(--v216-gutter, 0px) - var(--v216-menu-w, 92px)) / 2)) !important;
    left: auto !important;
    width: var(--v216-menu-w, 96px) !important;
    min-width: var(--v216-menu-w, 96px) !important;
    max-width: var(--v216-menu-w, 112px) !important;
    height: clamp(36px, 8.3vh, 48px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    color: #fff7f7 !important;
    background: linear-gradient(180deg, rgba(255, 120, 120, .98), rgba(157, 24, 24, .98)) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 18px rgba(255,94,94,.26) !important;
    font-weight: 950 !important;
    font-size: clamp(11px, 2.8vh, 15px) !important;
    line-height: 1 !important;
    z-index: 10620 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html body.table-fullscreen-mode .mobile-fs-menu-btn:not([hidden]) {
    left: max(var(--v216-safe-left, 8px), calc((var(--v216-gutter, 0px) - var(--v216-menu-w, 92px)) / 2)) !important;
    right: auto !important;
    top: var(--v216-safe-top, max(8px, env(safe-area-inset-top))) !important;
    transform: none !important;
  }
}

@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (hover: none), (orientation: portrait) and (max-width: 760px) {
  html body.table-fullscreen-mode .mobile-fs-menu-btn:not([hidden]) {
    left: var(--v216-safe-left, max(8px, env(safe-area-inset-left))) !important;
    right: auto !important;
    transform: none !important;
  }

  html body.table-fullscreen-mode .mobile-fs-quick-exit-btn:not([hidden]) {
    right: var(--v216-safe-right, max(8px, env(safe-area-inset-right))) !important;
  }
}


/* v220 · permitir desplazar verticalmente Tirar y la bola de efecto en móvil fullscreen. */
@media (max-width: 980px), (pointer: coarse) {
  body.table-fullscreen-mode #shootBtn.primary-action,
  body.table-fullscreen-mode .effect-control:not(.hidden) {
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
  body.table-fullscreen-mode #shootBtn.primary-action {
    cursor: grab !important;
  }
  body.table-fullscreen-mode #shootBtn.primary-action:active,
  body.table-fullscreen-mode .effect-ball:active {
    cursor: grabbing !important;
  }
}


/* v221 · Mesa completa móvil pulida: Salir siempre visible y controles desplazables efectivos. */
@media (max-width: 980px), (pointer: coarse) {
  html body.table-fullscreen-mode #shootBtn,
  html body.table-fullscreen-mode #shootBtn.primary-action {
    bottom: var(--mobile-fs-shoot-bottom, var(--v216-safe-bottom, max(8px, env(safe-area-inset-bottom)))) !important;
    touch-action: none !important;
  }

  html body.table-fullscreen-mode .effect-control:not(.hidden) {
    bottom: var(--mobile-fs-effect-bottom, var(--v216-safe-bottom, max(8px, env(safe-area-inset-bottom)))) !important;
    touch-action: none !important;
  }

  html body.table-fullscreen-mode .mobile-fs-quick-exit-btn:not([hidden]) {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 13050 !important;
  }
}


/* v222 · Salir siempre visible y controles móviles priorizados en Mesa completa. */
@media (max-width: 980px), (pointer: coarse) {
  body.table-fullscreen-mode #mobileFsQuickExitBtn:not([hidden]) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: .96 !important;
    z-index: 13000 !important;
  }
}


/* v224 · botón Salir garantizado en Mesa completa móvil */
@media (max-width: 980px), (pointer: coarse) {
  html body.table-fullscreen-mode #mobileFsQuickExitBtn:not([hidden]) {
    display: inline-flex !important;
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    left: auto !important;
    width: 96px !important;
    min-width: 96px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    z-index: 14000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* v229 · estado inicial visible para la guía dinámica en pantallas grandes */
@media (min-width: 861px) and (min-height: 521px) {
  #deflectionGuidePanel .deflection-guide-status:empty::before {
    content: 'Selecciona una jugada o apunta el taco para activar la guía dinámica.';
    color: rgba(255,255,255,.68);
  }
}

@media (max-width: 560px) {
  .scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reset-score-btn { min-height: 44px; grid-column: span 2; }
}


/* production-v231 · Estado visual del botón Modo libre */
#exitPracticeBtn.free-mode-on,
#mobileFsFreeBtn[aria-pressed="true"] {
  border-color: rgba(0, 245, 180, .75) !important;
  box-shadow: 0 0 0 1px rgba(0,245,180,.25), 0 0 18px rgba(0,245,180,.22) !important;
  background: linear-gradient(180deg, rgba(20, 130, 105, .95), rgba(8, 79, 71, .95)) !important;
}


/* production-v232 · Tirar bloqueado visualmente durante la animación del tiro. */
#shootBtn.shot-busy,
#shootBtn[aria-busy="true"],
#shootBtn.primary-action.shot-busy {
  opacity: .62 !important;
  filter: grayscale(.18) saturate(.78) !important;
  cursor: wait !important;
  pointer-events: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.28) !important;
}
#shootBtn.shot-busy::after,
#shootBtn[aria-busy="true"]::after {
  content: '';
  width: .8em;
  height: .8em;
  margin-left: .45em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: shootBusySpin .72s linear infinite;
}
@keyframes shootBusySpin { to { transform: rotate(360deg); } }


/* production-v235 · Permitir halar el taco fuera de las esquinas sin perder potencia. */
body.table-fullscreen-mode .table-shell,
body.table-fullscreen-mode .table,
body.table-fullscreen-mode #overlay {
  overflow: visible !important;
}
body.table-fullscreen-mode #cueStick,
body.table-fullscreen-mode #cueTip,
body.table-fullscreen-mode #cueHandle,
body.table-fullscreen-mode .power-badge {
  pointer-events: auto;
}