:root {
    --felt: #1a6b3c;
    --felt-dark: #114a28;
    --rail: #5a3a1a;
    --wood-hi: #8a5a30; --wood-mid: #5a3a1e; --wood-dark: #3a2410;
    --wood-deep: #45290f; --wood-frame2: #6b4526; --wood-lip: #9a6a3a;
    --wood-tray: #7a4e28; --wood-rail: #8a5a30;
    --tile-face: #f5f0e6;
    --tile-pip: #1a1a2e;
    --tile-edge: #d8d0c0;
    --gold: #f0b429;
    --accent: #e94560;
    --panel: #16213e;
    --panel-light: #1f2b4d;
    --text: #eaeaea;
  }
  * { margin:0; padding:0; box-sizing:border-box; user-select:none; }
  body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: #0d1321;
    color: var(--text);
    height: 100vh;
    display: flex;
    overflow: hidden;
  }

  /* ---------- SIDEBAR ---------- */
  #sidebar {
    width: 240px; min-width: 240px;
    background: var(--panel);
    padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
    border-right: 3px solid var(--gold);
    overflow-y: auto;
  }
  #sidebar h1 { font-size: 22px; color: var(--gold); letter-spacing: 1px; }
  #sidebar h1 span { color: var(--accent); }
  /* brand logo in the header + landing */
  #sidebar #brand { margin: 0 0 6px; }
  #sidebar #brand img { display: block; width: 100%; max-width: 150px; height: auto; margin: 0 auto; border-radius: 10px; }
  .lobby-logo { display: block; width: 140px; max-width: 90%; height: auto; margin: 0 auto 10px; border-radius: 14px;
    box-shadow: 0 10px 26px -10px rgba(0,0,0,.7); }
  .scorebox {
    background: var(--panel-light); border-radius: 10px; padding: 12px;
  }
  .scorebox .teams { display:flex; justify-content:space-between; align-items:center; }
  .scorebox .team { text-align:center; flex:1; }
  .scorebox .team .name { font-size:12px; opacity:.8; }
  .scorebox .team .pts { font-size: 32px; font-weight: 800; color: var(--gold); }
  .scorebox .vs { font-size: 12px; opacity:.5; padding: 0 6px;}
  .scorebox .target { text-align:center; font-size:11px; opacity:.7; margin-top:4px;}
  /* the anotación: one row per hand */
  #score-rows { margin-top: 8px; max-height: 180px; overflow-y: auto; font-size: 12px; }
  #score-rows .sr {
    display: grid; grid-template-columns: 1fr 54px 54px; gap: 4px;
    padding: 4px 6px; border-radius: 4px; align-items: center;
  }
  #score-rows .sr.head {
    font-weight: 800; opacity: .75; position: sticky; top: 0;
    background: var(--panel-light); text-transform: uppercase; font-size: 10px;
    letter-spacing: .5px;
  }
  #score-rows .sr:nth-child(even) { background: rgba(255,255,255,.05); }
  #score-rows .sr span:nth-child(2), #score-rows .sr span:nth-child(3) {
    text-align: right; font-weight: 700;
  }
  #score-rows .sr .win { color: var(--gold); }
  #log {
    flex: 1; background: var(--panel-light); border-radius: 10px;
    padding: 10px; font-size: 12px; overflow-y: auto; min-height: 80px;
  }
  #log p { margin-bottom: 5px; opacity:.9; border-left: 2px solid var(--gold); padding-left: 6px;}
  #log p.big { color: var(--gold); font-weight:700; }
  /* ---------- CHAT (bottom left) ---------- */
  #chat {
    background: var(--panel-light); border-radius: 10px; padding: 8px;
    display: flex; flex-direction: column; gap: 6px;
  }
  #chat-msgs {
    max-height: 150px; min-height: 60px; overflow-y: auto;
    font-size: 12px; display: flex; flex-direction: column; gap: 4px;
  }
  #chat-msgs .chat-m { line-height: 1.35; word-break: break-word; }
  #chat-msgs .chat-m b { color: var(--gold); }
  #chat-msgs .chat-m.mine b { color: var(--accent); }
  #chat-form { display: flex; gap: 5px; }
  #chat-input {
    flex: 1; min-width: 0; padding: 8px; border-radius: 6px; border: none;
    background: var(--panel); color: var(--text); font-size: 13px;
  }
  #chat-input::placeholder { color: #8a93b5; }
  #chat-form .btn { padding: 6px 10px; font-size: 14px; }

  .btn {
    background: var(--accent); border:none; color:#fff; font-weight:700;
    padding: 10px; border-radius: 8px; cursor:pointer; font-size: 14px;
    transition: transform .1s;
  }
  .btn:hover { transform: scale(1.03); }
  .btn.gold { background: var(--gold); color:#222; }
  label { font-size: 12px; opacity: .85; display:block; margin-bottom:3px;}
  select {
    width:100%; padding:7px; border-radius:6px; border:none;
    background:var(--panel-light); color:var(--text); font-size:13px;
  }

  /* ---------- TABLE AREA ---------- */
  #arena {
    flex:1; display:grid;
    /* proportional so the board keeps its share at ANY window size (not just
       fullscreen): side seats & top/bottom rows shrink with the viewport. */
    grid-template-rows: clamp(120px, 21vh, 235px) 1fr clamp(104px, 19vh, 215px);
    grid-template-columns: clamp(150px, 20vw, 310px) 1fr clamp(150px, 20vw, 310px);
    grid-template-areas:
      "tl top tr"
      "left board right"
      "bl bottom br";
    background: radial-gradient(circle at 50% 15%, #24334f 0%, #0d1321 78%);
    position: relative;
  }
  .seat { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; }
  #seat-top { grid-area: top; } #seat-left { grid-area: left; } #seat-right { grid-area: right; }
  /* square video nameplates (broadcast style) */
  .seat .cam {
    /* broadcast-style 16:9 video monitor — scales to its column so the board
       keeps room in windowed mode (max 272px on big screens). */
    width: min(272px, 94%); aspect-ratio: 272 / 153; height: auto; border-radius: 10px;
    background: #0a0f1e; border: 3px solid var(--gold);
    display:flex; align-items:center; justify-content:center; font-size: 48px;
    position: relative; overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,.55);
  }
  .seat .cam video {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit: cover; display:none; transform: scaleX(-1);
  }
  .seat.active .cam { border-color: var(--accent); box-shadow: 0 0 18px var(--accent); }
  /* seated body: shoulders + chair so a person is visibly sitting at the table */
  .seat .cam { position: relative; z-index: 2; }
  .seat .body {
    width: min(220px, 78%); height: 24px; margin-top: -9px;
    border-radius: 36px 36px 10px 10px;
    background: linear-gradient(180deg, #3d4d7d 0%, #232d4d 80%);
    box-shadow: 0 5px 10px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.15);
    position: relative; z-index: 1;
  }
  .seat .body::before { /* chair back peeking out */
    content:''; position:absolute; left:-9px; right:-9px; top: 6px; bottom: 0;
    border-radius: 14px; background: #1a2138; z-index:-1;
    box-shadow: 0 4px 8px rgba(0,0,0,.5);
  }
  .seat .pname {
    font-size: 14px; font-weight:700; text-shadow: 0 1px 3px #000;
    background: rgba(0,0,0,.6); padding: 3px 10px; border-radius: 3px;
    width: min(272px, 94%); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* rank badge: your rank worn on your video screen for the whole table to see */
  .rank-badge {
    position: absolute; top: -10px; left: -10px; z-index: 5;
    display: flex; align-items: center; gap: 4px;
    background: rgba(13,19,33,.95); border: 2px solid var(--gold);
    border-radius: 14px; padding: 3px 11px 3px 7px;
    font-size: 12px; font-weight: 800;
    box-shadow: 0 3px 8px rgba(0,0,0,.55);
    pointer-events: none; white-space: nowrap;
  }
  .rank-badge .g { font-size: 15px; }

  /* camera & mic buttons: stacked at the left side of your video screen */
  #me-info { position: relative; }
  .cam-controls {
    display:flex; flex-direction: column; gap: 8px;
    position: absolute; left: -50px; top: 8px;
  }
  .cam-controls button {
    background: var(--panel); border: 2px solid var(--gold); border-radius: 8px;
    font-size: 17px; padding: 6px 9px; cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,.4);
  }
  .cam-controls button.on { background: var(--accent); border-color: var(--accent); }
  .seat .tilecount { font-size: 11px; background: rgba(0,0,0,.4); padding: 2px 8px; border-radius: 10px; }
  /* domino holders mounted ON the table rails (they tilt with the table) */
  .backs {
    position: absolute; z-index: 6;
    display:flex; gap: 5px; padding: 7px 12px 5px; border-radius: 8px;
    background:
      repeating-linear-gradient(91deg, rgba(50,25,5,.14) 0 2px, rgba(255,215,150,.05) 2px 4px, transparent 4px 9px),
      linear-gradient(180deg, var(--wood-lip) 0%, var(--wood-mid) 55%, var(--wood-dark) 100%);
    border: 2px solid var(--wood-dark);
    box-shadow: inset 0 3px 8px rgba(0,0,0,.5), 0 6px 12px rgba(0,0,0,.5);
    justify-content: center; align-items: center;
  }
  #backs2 { /* top rail, partner: full tile backs, evenly spread like the sides */
    top: -6px; left: 50%; transform: translateX(-50%);
    min-width: 440px; min-height: 56px;
    justify-content: space-evenly; gap: 0;
  }
  #backs2 .back { width: 44px; height: 12px; background: linear-gradient(180deg,
      color-mix(in srgb, var(--tile-face) 70%, black) 0%,
      color-mix(in srgb, var(--tile-face) 92%, white) 45%,
      var(--tile-face) 60%,
      color-mix(in srgb, var(--tile-face) 72%, black) 100%); }
  #backs3 { /* left rail */
    left: -8px; top: 50%; transform: translateY(-50%);
    flex-direction: column; min-height: 420px; min-width: 58px;
    justify-content: space-evenly; gap: 0;
  }
  #backs1 { /* right rail */
    right: -8px; top: 50%; transform: translateY(-50%);
    flex-direction: column; min-height: 420px; min-width: 58px;
    justify-content: space-evenly; gap: 0;
  }
  .back {
    /* standing ficha seen from behind: skinny white edge, no markings */
    width: 12px; height: 44px; border-radius: 2px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--tile-face) 70%, black) 0%,
      color-mix(in srgb, var(--tile-face) 92%, white) 45%,
      var(--tile-face) 60%,
      color-mix(in srgb, var(--tile-face) 72%, black) 100%);
    border: 1px solid color-mix(in srgb, var(--tile-edge) 65%, black);
    box-shadow:
      0 3px 4px rgba(0,0,0,.5),
      inset 0 1px 1px rgba(255,255,255,.8);
    position: relative;
  }
  /* fichas stand vertical (portrait) in ALL holders — design rule #1 */

  /* ---------- THE TABLE (real first-person view) ---------- */
  #board-wrap {
    grid-area: board; display:flex; align-items:stretch; justify-content:center;
    /* side margins shrink with the window so the felt keeps its width when the
       table is played in a smaller/narrower window (no more portrait squeeze). */
    margin: 4px clamp(6px, 1.6vw, 26px) 20px; padding: clamp(10px, 1.4vw, 20px);
    border-radius: 30px;
    background:
      repeating-linear-gradient(92deg, rgba(50,25,5,.16) 0 3px, rgba(255,215,150,.06) 3px 5px, transparent 5px 12px),
      repeating-linear-gradient(88deg, rgba(0,0,0,.07) 0 20px, transparent 20px 44px),
      radial-gradient(circle at 28% 18%, rgba(255,255,255,.14), transparent 55%),
      linear-gradient(135deg, var(--wood-hi) 0%, var(--wood-mid) 45%, var(--wood-frame2) 100%);
    box-shadow:
      0 26px 55px rgba(0,0,0,.65),
      inset 0 2px 5px rgba(255,255,255,.3),
      inset 0 -4px 10px rgba(0,0,0,.45);
    /* angled toward the viewer so played tiles show their thickness */
    transform: perspective(1500px) rotateX(16deg);
    position: relative; /* holders mount onto the rails */
  }
  #felt {
    flex: 1;
    border-radius: 18px;
    background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
    box-shadow: inset 0 10px 26px rgba(0,0,0,.6), inset 0 0 70px rgba(0,0,0,.22);
    display:flex; align-items:center; justify-content:center;
    /* clip, never scroll — the domino snake wraps to fit the table, so a
       scrollbar here was only ever the scattered shake tiles overflowing. */
    padding: 14px; position:relative; overflow:hidden;
  }
  #felt::before {
    content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:130px; height:130px; border-radius:50%;
    border: 3px double rgba(255,255,255,.16);
    box-shadow: 0 0 0 10px rgba(0,0,0,.08), inset 0 0 24px rgba(0,0,0,.15);
    pointer-events:none;
  }
  #board {
    /* free canvas: the domino snake is positioned tile-by-tile.
       Big side margins keep the line clear of the rails & holders. */
    position: absolute; inset: 26px 78px;
  }
  #board .tile { position: absolute; }
  .tile {
    /* realistic ivory tile: glossy bevel + depth */
    background: linear-gradient(155deg,
      color-mix(in srgb, var(--tile-face) 88%, white) 0%,
      var(--tile-face) 45%,
      color-mix(in srgb, var(--tile-face) 78%, black) 100%);
    border: 1px solid color-mix(in srgb, var(--tile-edge) 70%, black);
    border-radius: 6px;
    display:flex;
    box-shadow:
      0 4px 7px rgba(0,0,0,.55),
      inset 0 1.5px 2px rgba(255,255,255,.85),
      inset 0 -2px 3px rgba(0,0,0,.22);
    position: relative;
  }
  /* played tiles on the felt show their side edge (thickness) */
  #board .tile::before {
    content:''; position:absolute; left:-1px; right:-1px; bottom:-7px; height:7px;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--tile-face) 60%, black),
      color-mix(in srgb, var(--tile-face) 38%, black));
    border-radius: 0 0 6px 6px;
    border: 1px solid color-mix(in srgb, var(--tile-edge) 50%, black);
    border-top: none;
    pointer-events: none;
  }
  .tile::after { /* brass center spinner */
    content:''; position:absolute; left:50%; top:50%;
    transform: translate(-50%,-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a0, #8a6d2f 75%);
    box-shadow: 0 1px 1.5px rgba(0,0,0,.6);
    pointer-events: none;
  }
  .tile.h { flex-direction: row; width: 58px; height: 30px; }
  .tile.h .half { width: 50%; height: 100%; }
  .tile.h .half:first-child {
    border-right: 1px solid rgba(0,0,0,.38);
    box-shadow: 1px 0 0 rgba(255,255,255,.55); /* engraved divider groove */
  }
  /* doubles sit crosswise on the board, like on a real table */
  .tile.v { flex-direction: column; width: 30px; height: 58px; }
  .tile.v .half { width: 100%; height: 50%; }
  .tile.v .half:first-child {
    border-bottom: 1px solid rgba(0,0,0,.38);
    box-shadow: 0 1px 0 rgba(255,255,255,.55);
  }
  .tile.double { outline: 2px solid var(--gold); }
  .half { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:3px; }
  .pip {
    width:5px; height:5px; border-radius:50%;
    align-self:center; justify-self:center;
    /* drilled, embossed pip */
    background: radial-gradient(circle at 35% 30%,
      color-mix(in srgb, var(--tile-pip) 55%, white),
      var(--tile-pip) 72%);
    box-shadow:
      inset 0 1px 1.5px rgba(0,0,0,.85),
      0 1px 1px rgba(255,255,255,.55);
  }

  /* ---------- HAND ---------- */
  /* table settings: gear button + popover, bottom right of the tray */
  #btn-settings {
    position: absolute; right: 22px; bottom: 12px; z-index: 9;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--panel); border: 2px solid var(--gold);
    font-size: 22px; cursor: pointer;
    box-shadow: 0 5px 12px rgba(0,0,0,.5);
    transition: transform .1s;
  }
  #btn-settings:hover { transform: rotate(30deg) scale(1.08); }
  #settings-pop {
    position: absolute; right: 22px; bottom: 70px; z-index: 15;
    width: 235px; background: rgba(13,19,33,.96);
    border: 2px solid var(--gold); border-radius: 12px; padding: 12px;
    display: none; box-shadow: 0 10px 24px rgba(0,0,0,.6);
  }
  #settings-pop.show { display: block; }
  #settings-pop label { font-size: 11px; opacity: .85; display: block; margin: 9px 0 3px; }
  #settings-pop label:first-child { margin-top: 0; }
  #settings-pop select {
    width: 100%; padding: 8px; border-radius: 6px; border: none;
    background: var(--panel-light); color: var(--text); font-size: 13px;
  }
  #btn-paso {
    position: absolute; right: 84px; top: 50%; transform: translateY(-50%);
    z-index: 8; font-size: 17px; padding: 14px 20px;
    box-shadow: 0 5px 12px rgba(0,0,0,.5);
  }
  #hand-wrap {
    position: relative;
    grid-area: bottom; grid-column: 1 / 4;
    display:flex; align-items:center; justify-content:center; gap:12px;
    background:
      repeating-linear-gradient(91deg, rgba(50,25,5,.15) 0 3px, rgba(255,215,150,.05) 3px 5px, transparent 5px 13px),
      linear-gradient(180deg, var(--wood-frame2) 0%, var(--wood-deep) 100%);
    border-top: 5px solid var(--wood-rail);
    box-shadow: 0 -12px 26px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.15);
  }
  /* domino stand: tiles standing upright in a wooden rack */
  #hand {
    display:flex; gap:8px; padding: 14px 22px 4px; border-radius: 8px 8px 4px 4px;
    background:
      repeating-linear-gradient(90deg, rgba(50,25,5,.14) 0 2px, rgba(255,215,150,.05) 2px 4px, transparent 4px 10px),
      linear-gradient(180deg, var(--wood-tray) 0%, var(--wood-mid) 55%, var(--wood-dark) 100%);
    box-shadow: inset 0 5px 12px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.45);
    perspective: 520px;
    position: relative;
    min-width: 720px; justify-content: center;
  }
  #hand::after { /* front lip of the stand — tiles stand BEHIND it */
    content:''; position:absolute; left:-5px; right:-5px; bottom:-8px; height:20px;
    background: linear-gradient(180deg, var(--wood-lip) 0%, var(--wood-mid) 60%, var(--wood-dark) 100%);
    border-radius: 6px;
    box-shadow: 0 6px 12px rgba(0,0,0,.55), inset 0 1.5px 2px rgba(255,255,255,.3);
    pointer-events: none;
    z-index: 5;
  }
  #hand .tile.v {
    /* STANDING domino: dead upright, face to you, top edge showing thickness */
    box-shadow: 0 10px 10px -4px rgba(0,0,0,.55),
      inset 0 1.5px 2px rgba(255,255,255,.85),
      inset 0 -2px 3px rgba(0,0,0,.22);
  }
  #hand .tile.v::before { /* visible top surface (tile thickness) */
    content:''; position:absolute; left:-1px; right:-1px; top:-8px; height:8px;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--tile-face) 96%, white) 0%,
      color-mix(in srgb, var(--tile-face) 75%, black) 100%);
    border-radius: 6px 6px 2px 2px;
    border: 1px solid color-mix(in srgb, var(--tile-edge) 70%, black);
    border-bottom: none;
  }
  #hand .tile.v { width: 46px; height: 88px; cursor:pointer; transition: transform .12s; }
  #hand .tile.v .pip { width:8px; height:8px; }
  #hand .tile.playable { outline: 3px solid var(--gold); }
  #hand .tile.sort-over { outline: 3px dashed var(--gold); transform: translateX(6px); }
  #hand .tile.playable:hover { transform: translateY(-14px) scale(1.07); }
  #hand .tile.dead { opacity: .45; }
  #me-info { display:flex; flex-direction:column; align-items:center; margin-right: 10px; gap:4px;}

  /* ---------- HANDS & DRAG ---------- */
  .table-hands { font-size: 24px; letter-spacing: 6px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
  #play-hand {
    position: fixed; font-size: 44px; z-index: 60; pointer-events: none; display: none;
    transition: left .5s cubic-bezier(.3,.7,.4,1), top .5s cubic-bezier(.3,.7,.4,1);
    filter: drop-shadow(0 5px 8px rgba(0,0,0,.6));
  }
  .dropzone {
    width: 58px; height: 44px; border: 3px dashed var(--gold); border-radius: 8px;
    display: none; align-items: center; justify-content: center;
    color: var(--gold); font-size: 20px; font-weight: 900;
    animation: pulse 1s infinite alternate;
    position: absolute; top: 50%; margin-top: -22px; z-index: 9;
  }
  #drop-left { left: 82px; }
  #drop-right { right: 82px; }
  .dropzone.show { display: flex; }
  .dropzone.over { background: rgba(240,180,41,.3); transform: scale(1.15); }
  @keyframes pulse { from { opacity:.55; } to { opacity:1; } }
  @keyframes slap { 0% { transform: scale(1.7) rotate(-6deg); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
  .tile.just-played { animation: slap .3s ease; outline: 3px solid var(--accent); }
  #hand .tile[draggable="true"] { cursor: grab; }
  #hand .tile[draggable="true"]:active { cursor: grabbing; }

  /* ---------- TABLE SKINS (bought with PhilCoins) ---------- */
  body.skin-caoba { --wood-hi:#6e3a1c; --wood-mid:#4a2410; --wood-dark:#2a1206; --wood-deep:#331808; --wood-frame2:#542b12; --wood-lip:#7a4322; --wood-tray:#603216; --wood-rail:#6e3a1c; }
  body.skin-roble { --wood-hi:#b98a55; --wood-mid:#96683a; --wood-dark:#6e4a24; --wood-deep:#7a5730; --wood-frame2:#a5754a; --wood-lip:#c99a63; --wood-tray:#ab7c48; --wood-rail:#b98a55; }
  body.skin-ebano { --wood-hi:#3a3a42; --wood-mid:#22222a; --wood-dark:#101014; --wood-deep:#17171d; --wood-frame2:#2c2c34; --wood-lip:#4a4a55; --wood-tray:#30303a; --wood-rail:#3a3a42; }
  body.skin-oro { --wood-hi:#c9920f; --wood-mid:#8a6508; --wood-dark:#5a4205; --wood-deep:#6b4e06; --wood-frame2:#a87c0a; --wood-lip:#e6a41d; --wood-tray:#b8860b; --wood-rail:#c9920f; }

  /* ---------- TABLE BLING ---------- */
  body.bling-gold #board-wrap {
    box-shadow: 0 26px 55px rgba(0,0,0,.65), 0 0 0 4px var(--gold),
      0 0 26px rgba(240,180,41,.55), inset 0 2px 5px rgba(255,255,255,.3);
  }
  body.bling-led #board-wrap { animation: ledglow 3.2s linear infinite; }
  @keyframes ledglow {
    0%   { box-shadow: 0 26px 55px rgba(0,0,0,.65), 0 0 36px 8px rgba(34,211,238,.6); }
    33%  { box-shadow: 0 26px 55px rgba(0,0,0,.65), 0 0 36px 8px rgba(167,139,250,.6); }
    66%  { box-shadow: 0 26px 55px rgba(0,0,0,.65), 0 0 36px 8px rgba(244,114,182,.6); }
    100% { box-shadow: 0 26px 55px rgba(0,0,0,.65), 0 0 36px 8px rgba(34,211,238,.6); }
  }
  #bling-gems { display: none; }
  body.bling-diamond #bling-gems { display: block; }
  #bling-gems span {
    position: absolute; font-size: 30px; z-index: 7;
    filter: drop-shadow(0 0 7px #7dd3fc);
    animation: gemtw 1.6s ease-in-out infinite alternate;
    pointer-events: none;
  }
  #bling-gems span:nth-child(1) { top: 2px; left: 14px; }
  #bling-gems span:nth-child(2) { top: 2px; right: 14px; animation-delay: .4s; }
  #bling-gems span:nth-child(3) { bottom: 2px; left: 14px; animation-delay: .8s; }
  #bling-gems span:nth-child(4) { bottom: 2px; right: 14px; animation-delay: 1.2s; }
  @keyframes gemtw { from { transform: scale(1); } to { transform: scale(1.3); } }
  body.bling-emblem #felt::before {
    content: 'P';
    display: flex; align-items: center; justify-content: center;
    font: 900 72px Georgia, serif;
    color: rgba(240,180,41,.4);
    border-color: rgba(240,180,41,.5);
    box-shadow: 0 0 0 10px rgba(240,180,41,.12), inset 0 0 30px rgba(240,180,41,.15);
  }

  /* ---------- FICHAS PREMIUM (tienda) ---------- */
  body.fich-oro { --tile-face:#e8c15a; --tile-pip:#4a3505; --tile-edge:#b8912f; }
  body.fich-esmeralda { --tile-face:#d9f2e4; --tile-pip:#0a5c3a; --tile-edge:#8fc9ab; }
  body.fich-rubi { --tile-face:#f9e0e4; --tile-pip:#8a1025; --tile-edge:#d9a0ab; }
  body.fich-ebano { --tile-face:#26262e; --tile-pip:#f0b429; --tile-edge:#4a4a58; }
  body.fich-zafiro { --tile-face:#2a4494; --tile-pip:#eaf2ff; --tile-edge:#1a2c66; }
  body.fich-rosa { --tile-face:#3a1030; --tile-pip:#f472b6; --tile-edge:#6b2455; }
  body.fich-neon { --tile-face:#0a0a12; --tile-pip:#22d3ee; --tile-edge:#26263a; }
  body.fich-madera { --tile-face:#c89a63; --tile-pip:#3a2410; --tile-edge:#97713f; }
  body.fich-marmol { --tile-face:#eceff1; --tile-pip:#607d8b; --tile-edge:#b0bec5; }
  body.fich-camo { --tile-face:#4a5d33; --tile-pip:#d9e8c4; --tile-edge:#33421f; }
  body.fich-fuego { --tile-face:#4a0e08; --tile-pip:#ff8c42; --tile-edge:#7a2a12; }
  body.fich-hielo { --tile-face:#d6ecf7; --tile-pip:#0c5a8a; --tile-edge:#9ec9de; }

  /* score panel lives on the table, under MI TIENDITA */
  #score-panel {
    position: absolute; top: 12px; right: 14px; z-index: 8; width: 235px;
    background: rgba(13,19,33,.9); border: 2px solid var(--gold);
    box-shadow: 0 6px 14px rgba(0,0,0,.5);
  }
  #score-panel #score-rows { max-height: 130px; }

  /* ---------- LA GALERÍA (guest viewers) ---------- */
  #galeria {
    position: absolute; top: 12px; left: 14px; z-index: 8; width: 235px;
    background: rgba(13,19,33,.88); border: 2px solid var(--gold);
    border-radius: 12px; padding: 8px;
    box-shadow: 0 6px 14px rgba(0,0,0,.5);
  }
  #galeria h3 {
    font-size: 12px; color: var(--gold); letter-spacing: 1.5px;
    margin-bottom: 6px; text-align: center;
  }
  #gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .gal-slot {
    aspect-ratio: 1; border-radius: 8px; background: var(--panel);
    border: 1px dashed #3a4a75;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; font-size: 24px; overflow: hidden; gap: 1px;
    transition: transform .1s;
  }
  .gal-slot:hover { transform: scale(1.06); }
  .gal-slot.filled { border-style: solid; border-color: #2a3558; }
  .gal-slot small {
    font-size: 9px; opacity: .75; max-width: 95%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gal-slot .plus { color: #3a4a75; font-size: 26px; font-weight: 800; }
  .gal-react {
    position: fixed; font-size: 28px; z-index: 60; pointer-events: none;
    animation: floatup 2.4s ease-out forwards;
  }
  @keyframes floatup {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-170px) scale(1.7); }
  }

  /* ---------- MI TIENDITA DOMINO ---------- */
  /* dashboard button lives in the sidebar stack */
  #tienda-page, #dash-page {
    position: fixed; inset: 0; z-index: 300; display: none; overflow-y: auto;
    background: linear-gradient(180deg, #141a30, #0d1321);
    padding: 22px 32px 70px;
  }
  #tienda-page.show, #dash-page.show { display: block; }
  .dash-bar { height: 14px; background: var(--panel); border-radius: 8px; overflow: hidden; margin: 6px 0; }
  .dash-bar div { height: 100%; background: linear-gradient(90deg, #f0b429, #e94560); border-radius: 8px; }
  .wl {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: 800; font-size: 12px; margin-right: 5px;
  }
  .wl.w { background: #1d9e75; color: #fff; }
  .wl.l { background: #e94560; color: #fff; }
  .inv-cell {
    background: var(--panel-light); border: 2px solid transparent; border-radius: 10px;
    padding: 6px; text-align: center; cursor: pointer; transition: transform .1s;
  }
  .inv-cell:hover { transform: scale(1.05); }
  .inv-cell.on { border-color: var(--gold); }
  .inv-cell.plus {
    border: 2px dashed #3a4a75; display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #3a4a75; min-height: 68px; font-weight: 800;
  }
  .inv-sw {
    height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; border: 1px solid rgba(255,255,255,.15);
  }
  .inv-cell small {
    font-size: 9px; opacity: .78; display: block; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tp-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
  .tp-head h1 { color: var(--gold); font-size: 26px; letter-spacing: 1px; flex: 1; }
  .tp-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
  .tp-tabs button {
    background: var(--panel); color: var(--text); border: 1px solid #2a3558;
    border-radius: 20px; padding: 9px 16px; font-weight: 700; font-size: 14px; cursor: pointer;
  }
  .tp-tabs button.active { background: var(--gold); color: #241a02; border-color: var(--gold); }
  .tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
  .tp-card {
    background: var(--panel); border: 1px solid #2a3558; border-radius: 12px;
    padding: 12px; text-align: center;
  }
  .tp-card .tp-swatch {
    height: 76px; border-radius: 8px; margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center; font-size: 40px;
  }
  .tp-card b { display: block; font-size: 14px; margin-bottom: 2px; }
  .tp-card small { opacity: .65; display: block; margin-bottom: 8px; min-height: 15px; }
  .tp-card .btn { width: 100%; margin: 0; padding: 8px; font-size: 13px; }
  .tp-metric { background: var(--panel-light); border-radius: 10px; padding: 14px; text-align: center; }
  .tp-metric .v { font-size: 26px; font-weight: 800; color: var(--gold); }
  .tp-metric .l { font-size: 11px; opacity: .7; margin-top: 2px; }
  .tp-form input, .tp-form select, .tp-form textarea {
    width: 100%; padding: 10px; border-radius: 6px; border: none;
    background: var(--panel-light); color: var(--text); font-size: 14px;
    margin: 5px 0 12px; font-family: inherit;
  }
  .tp-form label { font-size: 12px; opacity: .8; }

  /* ---------- MANUAL RITUALS ---------- */
  .wash-tile { /* face-down ficha being washed on the felt */
    position: absolute; width: 46px; height: 24px; border-radius: 4px;
    background: linear-gradient(155deg,
      color-mix(in srgb, var(--tile-face) 90%, white),
      var(--tile-face) 55%,
      color-mix(in srgb, var(--tile-face) 75%, black));
    border: 1px solid color-mix(in srgb, var(--tile-edge) 65%, black);
    box-shadow: 0 3px 5px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.7);
    transition: left .2s ease-out, top .2s ease-out, transform .2s ease-out, opacity .3s ease;
    cursor: pointer; z-index: 3;
  }
  .wash-tile:hover { box-shadow: 0 0 12px var(--gold), 0 3px 5px rgba(0,0,0,.45); }
  .wash-hand { /* the GIANT hands that shake the fichas */
    position: absolute; font-size: 96px; z-index: 15; pointer-events: none;
    display: none; filter: drop-shadow(0 10px 12px rgba(0,0,0,.55));
  }
  .count-tile { /* flipped ficha you tap to count */
    display:inline-block; padding: 7px 11px; margin: 3px; border-radius: 6px;
    background: #f5f0e6; color: #1a1a2e; font-weight: 800; font-size: 15px;
    border: 2px solid #b8b0a0; cursor: pointer; user-select: none;
  }
  .count-tile.counted {
    background: var(--gold); border-color: var(--gold);
    transform: scale(.94); cursor: default;
  }
  #modal-btn:disabled { cursor: not-allowed; }

  /* ---------- OVERLAYS ---------- */
  #banner {
    position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) scale(0);
    font-size: 54px; font-weight: 900; color: var(--gold);
    text-shadow: 0 0 30px var(--accent), 0 4px 8px #000;
    z-index: 50; pointer-events:none; white-space:nowrap;
    transition: transform .3s cubic-bezier(.17,.67,.5,1.5);
  }
  #banner.show { transform:translate(-50%,-50%) scale(1); }
  /* signature extras */
  @keyframes arenashake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-7px, 4px); }
    40% { transform: translate(6px, -4px); }
    60% { transform: translate(-5px, 3px); }
    80% { transform: translate(4px, -2px); }
  }
  #arena.shake { animation: arenashake .38s; }
  @keyframes fiestah {
    0% { filter: hue-rotate(0deg) saturate(1.4); }
    50% { filter: hue-rotate(180deg) saturate(1.8); }
    100% { filter: hue-rotate(360deg) saturate(1); }
  }
  #arena.fiesta { animation: fiestah 2.6s linear; }
  @keyframes marcoshine {
    0% { border-color: #f0b429; box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 18px #f0b429; }
    33% { border-color: #e94560; box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 18px #e94560; }
    66% { border-color: #60a5fa; box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 18px #60a5fa; }
    100% { border-color: #f0b429; box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 18px #f0b429; }
  }
  body.fx-marco #me-info .cam { animation: marcoshine 3s linear infinite; }
  #btn-corneta {
    position: absolute; right: 80px; bottom: 12px; z-index: 9;
    width: 48px; height: 48px; border-radius: 50%; display: none;
    background: var(--panel); border: 2px solid #e94560;
    font-size: 22px; cursor: pointer;
    box-shadow: 0 5px 12px rgba(0,0,0,.5);
    transition: transform .1s;
  }
  #btn-corneta:hover { transform: scale(1.12) rotate(-12deg); }

  #fx { /* fireworks overlay */
    position: fixed; inset: 0; z-index: 250;
    pointer-events: none; display: none;
  }
  .modal-bg {
    position: fixed; inset:0; background: rgba(0,0,0,.75);
    display:none; align-items:center; justify-content:center; z-index:100;
  }
  .modal-bg.show { display:flex; }
  /* #4 — the logo fills the entry/menu background (cover = never distorts on resize) */
  #lobby-bg {
    background:
      linear-gradient(rgba(8,12,26,.80), rgba(8,12,26,.9)),
      url('/logo.png') center center / cover no-repeat;
  }
  .modal {
    background: var(--panel); border: 3px solid var(--gold); border-radius: 14px;
    padding: 26px; max-width: 420px; text-align:center; position: relative;
  }
  #modal-x {
    position: absolute; top: 8px; right: 10px; width: 34px; height: 34px;
    border: none; border-radius: 50%; cursor: pointer; z-index: 2;
    background: rgba(255,255,255,.08); color: var(--text);
    font-size: 18px; line-height: 1; padding: 0;
  }
  #modal-x:hover { background: rgba(255,255,255,.18); color: var(--gold); }
  .modal h2 { color: var(--gold); margin-bottom: 12px; }
  .modal p { margin-bottom: 8px; font-size: 14px; }
  .modal .btn { margin-top: 12px; width: 100%; }
  .modal input {
    width: 100%; padding: 10px; border-radius: 6px; border: none;
    background: var(--panel-light); color: var(--text);
    margin: 6px 0; font-size: 15px; text-align: center;
  }
  .modal input::placeholder { color: #8a93b5; }
  #side-choice { display:none; gap:10px; justify-content:center; margin-top:8px; }
  #side-choice.show { display:flex; }

  /* tile skins */
  body.skin-midnight { --tile-face:#1c1c2e; --tile-pip:#f0b429; --tile-edge:#3a3a55; }
  body.skin-gold { --tile-face:#2b2113; --tile-pip:#ffd76e; --tile-edge:#8a6d2f; }
  body.skin-coral { --tile-face:#fff4ee; --tile-pip:#e94560; --tile-edge:#f0c4b0; }
  /* felts */
  body.felt-wine #felt { background: radial-gradient(ellipse at center, #7a1f2b 0%, #4a0f18 100%); }
  body.felt-ocean #felt { background: radial-gradient(ellipse at center, #1a4a6b 0%, #0e2a42 100%); }
  body.felt-royal #felt { background: radial-gradient(ellipse at center, #4a2a7a 0%, #2a1548 100%); }
  /* ============================================================
     MOBILE / TABLET — MI DOMINO en el bolsillo
     ============================================================ */
  #mob-bar { display: none; position: fixed; left: 10px; bottom: 12px; z-index: 960; gap: 10px; }
  #mob-bar button {
    width: 48px; height: 48px; border-radius: 50%; font-size: 21px;
    border: 2px solid var(--gold); background: var(--panel); color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.55); cursor: pointer;
  }
  #side-close { display: none; }
  @media (max-width: 900px) {
    /* the angled table's 3D transform can bleed a few px past the viewport;
       clip at the document level so phones never get a horizontal scroll */
    html { overflow-x: hidden; }
    body { overflow: hidden; }
    /* sidebar becomes a slide-in drawer */
    #sidebar {
      position: fixed; top: 0; left: 0; bottom: 0; z-index: 950;
      width: min(300px, 82vw);
      transform: translateX(-108%); transition: transform .25s ease;
      box-shadow: 10px 0 34px rgba(0,0,0,.65);
    }
    body.side-open #sidebar { transform: none; }
    #side-close {
      display: block; position: absolute; top: 8px; right: 8px;
      background: var(--panel-light); border: 1px solid var(--gold); color: #fff;
      border-radius: 8px; font-size: 16px; padding: 4px 10px; cursor: pointer;
    }
    #mob-bar { display: flex; }
    /* arena: seats row on top, table full width, hand at the bottom */
    #arena {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "left top right"
        "board board board"
        "bottom bottom bottom";
      width: 100vw; height: 100vh; height: 100dvh;
    }
    .seat { gap: 3px; padding: 6px 2px 2px; min-width: 0; }
    .seat .cam {
      width: 29vw; height: 16.5vw; max-width: 220px; max-height: 124px;
      font-size: clamp(20px, 7vw, 40px); border-width: 2px; border-radius: 8px;
    }
    .seat .body { display: none; }
    .seat .pname { width: 29vw; max-width: 220px; font-size: 11px; padding: 2px 6px; }
    .seat .hands-emo { font-size: 13px; }
    .rank-badge { transform: scale(.72); transform-origin: top left; top: -7px; left: -6px; }
    /* rails: keep only the partner's (top) — sides eat the board on a phone */
    #backs1, #backs3 { display: none; }
    #backs2 { min-width: 60vw; min-height: 34px; padding: 4px 8px 3px; }
    #backs2 .back { width: 26px; height: 8px; }
    #board-wrap { margin: 2px 6px 6px; padding: 10px; border-radius: 16px; }
    body.game-active #board-wrap { margin: 4px 26px 20px; padding: 20px; border-radius: 30px; }
    /* score + galería become toggled overlays */
    #score-panel {
      position: fixed; top: 6px; right: 6px; width: 200px;
      transform: scale(.86); transform-origin: top right;
      display: none;
    }
    body.score-open #score-panel { display: block; }
    #galeria {
      position: fixed; top: 6px; left: 6px; width: min(280px, 86vw);
      display: none; z-index: 940;
    }
    body.gal-open #galeria { display: block; }
    /* the tray */
    /* the HAND is king on a phone: hide your own big cam so the rack gets the
       full width (all 7 fichas fit), and move every floating control to the
       top so nothing ever covers your tiles. */
    #me-info .cam, #me-info .body, #me-info .pname, #me-info .rank-badge { display: none; }
    #me-info { margin: 0; min-width: 0; }
    #hand-wrap { gap: 0; padding: 4px 2px; flex-wrap: nowrap; }
    #hand {
      min-width: 0; width: 100%; max-width: 100%; gap: 4px; padding: 8px 6px 4px;
      overflow-x: auto; overflow-y: hidden; justify-content: center; -webkit-overflow-scrolling: touch;
    }
    #hand .tile { flex: 0 0 auto; }
    /* ¡NO VOY! floats ABOVE the rack so it never covers your fichas */
    #btn-paso { position: fixed; left: 50%; right: auto; top: auto; bottom: 150px;
      transform: translateX(-50%); z-index: 40;
      width: auto; height: auto; max-width: 70vw; white-space: nowrap;
      font-size: 15px; padding: 10px 18px; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
    /* controls → fixed top toolbar, clear of the board and the hand */
    .cam-controls { position: fixed; left: 8px; top: 8px; bottom: auto; flex-direction: row; gap: 6px; z-index: 965; }
    .cam-controls button { width: 38px; height: 38px; font-size: 15px; padding: 0; }
    #btn-corneta { position: fixed; right: 54px; top: 8px; bottom: auto; width: 40px; height: 40px; font-size: 16px; }
    #btn-settings { position: fixed; right: 8px; top: 8px; bottom: auto; width: 40px; height: 40px; font-size: 18px; }
    #settings-pop { position: fixed; right: 8px; top: 54px; bottom: auto; }
    #mob-bar { left: 50%; transform: translateX(-50%); top: 6px; bottom: auto; gap: 8px; }  /* menu/gal/score centered in the top strip */
    #mob-bar button { width: 40px; height: 40px; }
    /* reserve a top strip for the toolbar so it never covers the opponents */
    #arena { padding-top: 52px; }
    /* dashboard & store pages breathe on small screens */
    .tp-tabs { flex-wrap: wrap; }
    .tp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  }
  @media (max-width: 900px) and (orientation: landscape) {
    /* landscape phone: very little height — shrink the seats & chrome so the
       board doesn't get crushed. (Portrait is the recommended orientation.) */
    #arena { padding-top: 38px; }
    .seat { padding: 2px 2px 0; gap: 1px; }
    .seat .cam { width: 18vw; height: 42px; max-width: 150px; max-height: 42px; font-size: 18px; border-width: 2px; }
    .seat .pname { width: 18vw; max-width: 150px; font-size: 9px; padding: 1px 4px; }
    .seat .table-hands, .seat .hands-emo { display: none; }
    #backs2 { display: none; }   /* the partner rail eats board height */
    #hand { max-width: 100%; padding: 5px 8px 2px; }
    #btn-paso { bottom: 118px; }
    .cam-controls button, #mob-bar button, #btn-settings, #btn-corneta { width: 34px; height: 34px; font-size: 14px; }
    #mob-bar { top: 4px; }
    .cam-controls, #btn-settings, #btn-corneta { top: 4px; }
  }