:root{
  color-scheme: dark;
  --bg:#120a2e; --ink:#f4f0ff; --muted:#a99fd6;
  --a1:#ff2bd6; --a2:#18e7ff; --a3:#b8ff3c; --a4:#ff8a1f;
  --felt: radial-gradient(120% 90% at 50% 40%, rgba(49,26,120,.82), rgba(20,11,51,.88));
  --felt-border: 1px solid rgba(24,231,255,.35);
  --felt-shadow: 0 0 0 1px rgba(255,43,214,.15), 0 0 40px rgba(24,231,255,.18), inset 0 0 60px rgba(0,0,0,.35);
  --felt-radius: 28px;
  --card-bg:#fbf8ff; --card-ink:#1a1033; --card-radius:8px;
  --card-border: 1px solid rgba(255,255,255,.6);
  --card-shadow: 0 6px 16px rgba(0,0,0,.45);
  --s-h:#ff2b6e; --s-d:#1f7bff; --s-c:#11a85a; --s-s:#1a1033;
  --jk:#b01fd0;
  --back-a: repeating-linear-gradient(45deg,#ff2bd6 0 5px,#9c1a86 5px 10px);
  --back-b: radial-gradient(circle at 50% 50%,#b6f7ff 0 2px,transparent 2.5px) 0 0/8px 8px, #0fb4cc;
  --back-c: linear-gradient(135deg,#b8ff3c 25%,transparent 25%) -5px 0/10px 10px, linear-gradient(225deg,#b8ff3c 25%,transparent 25%) -5px 0/10px 10px, linear-gradient(315deg,#b8ff3c 25%,transparent 25%) 0 0/10px 10px, linear-gradient(45deg,#b8ff3c 25%,#5d8f12 25%) 0 0/10px 10px;
  --back-border: 1.5px solid rgba(255,255,255,.8);
  --panel-bg: rgba(255,255,255,.06); --panel-border: 1px solid rgba(255,255,255,.14); --panel-radius:16px; --panel-blur: 10px;
  --btn-bg: rgba(255,255,255,.08); --btn-ink:#f4f0ff; --btn-border:1px solid rgba(255,255,255,.22); --btn-radius:999px; --btn-shadow:none;
  --btn-on-bg: #ff2bd6; --btn-on-ink:#120a2e;
  --f-display:"Bungee", "Arial Black", system-ui, sans-serif;
  --f-body:"Outfit", system-ui, sans-serif;
  --f-card:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --glow: 0 0 0 2px #18e7ff, 0 0 26px #18e7ff;
  --tag-bg: rgba(0,0,0,.35); --tag-ink:#f4f0ff;
}
body[data-style="papel"]{
  color-scheme: light;
  --bg:#fbe7c8; --ink:#2b1d14; --muted:#7a5a44;
  --a1:#e8412c; --a2:#11a39a; --a3:#f2b31b; --a4:#e6307a;
  --felt: radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1px, transparent 1.5px) 0 0/7px 7px, #129e95;
  --felt-border: 3px solid #2b1d14;
  --felt-shadow: 6px 6px 0 #e6307a;
  --felt-radius: 18px;
  --card-bg:#fffaf0; --card-ink:#2b1d14; --card-radius:6px;
  --card-border: 2px solid #2b1d14;
  --card-shadow: 2px 2px 0 rgba(230,48,122,.85);
  --s-h:#e8412c; --s-d:#2466d8; --s-c:#11875f; --s-s:#2b1d14;
  --jk:#e6307a;
  --back-a: radial-gradient(circle,#fbe7c8 0 2px,transparent 2.5px) 0 0/9px 9px, linear-gradient(#e8412c,#e8412c);
  --back-b: repeating-linear-gradient(90deg,#11a39a 0 4px,#0b746d 4px 8px);
  --back-c: repeating-linear-gradient(-45deg,#f2b31b 0 3px,#fbe7c8 3px 5px,#f2b31b 5px 8px);
  --back-border: 2px solid #2b1d14;
  --panel-bg: #fff6e6; --panel-border: 2px solid #2b1d14; --panel-radius:10px; --panel-blur: 0px;
  --btn-bg:#fff6e6; --btn-ink:#2b1d14; --btn-border:2px solid #2b1d14; --btn-radius:8px; --btn-shadow: 3px 3px 0 #2b1d14;
  --btn-on-bg:#e8412c; --btn-on-ink:#fff6e6;
  --f-display:"Chango", "Arial Black", system-ui, sans-serif;
  --f-body:"Karla", system-ui, sans-serif;
  --f-card:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --glow: 0 0 0 3px #f2b31b, 6px 6px 0 #2b1d14;
  --tag-bg:#2b1d14; --tag-ink:#fbe7c8;
}
body[data-style="memphis"]{
  color-scheme: light;
  --bg:#ffe1ec; --ink:#111; --muted:#4d4d4d;
  --a1:#ff4f79; --a2:#2ec4f1; --a3:#ffd23f; --a4:#7b5cff;
  --felt: #ffd23f;
  --felt-border: 3px solid #111;
  --felt-shadow: 9px 9px 0 #111;
  --felt-radius: 6px;
  --card-bg:#fff; --card-ink:#111; --card-radius:8px;
  --card-border: 2.5px solid #111;
  --card-shadow: 3px 3px 0 #111;
  --s-h:#ff2d55; --s-d:#1f7ae0; --s-c:#00a870; --s-s:#111;
  --jk:#7b5cff;
  --back-a: linear-gradient(135deg,#111 25%,transparent 25%) -6px 0/12px 12px, linear-gradient(225deg,#111 25%,transparent 25%) -6px 0/12px 12px, #ff4f79;
  --back-b: radial-gradient(circle,#111 0 2px,transparent 2.5px) 0 0/9px 9px, #2ec4f1;
  --back-c: conic-gradient(#111 25%,#7b5cff 0 50%,#111 0 75%,#7b5cff 0) 0 0/12px 12px;
  --back-border: 2.5px solid #111;
  --panel-bg:#fff; --panel-border:3px solid #111; --panel-radius:6px; --panel-blur:0px;
  --btn-bg:#fff; --btn-ink:#111; --btn-border:2.5px solid #111; --btn-radius:4px; --btn-shadow:3px 3px 0 #111;
  --btn-on-bg:#2ec4f1; --btn-on-ink:#111;
  --f-display:"Rubik Mono One", "Arial Black", system-ui, sans-serif;
  --f-body:"DM Sans", system-ui, sans-serif;
  --f-card:"Rubik", "Arial Black", system-ui, sans-serif;
  --glow: 0 0 0 4px #2ec4f1, 7px 7px 0 #111;
  --tag-bg:#111; --tag-ink:#fff;
}
body[data-style="aurora"]{
  color-scheme: dark;
  --bg:#0b1026; --ink:#eef3ff; --muted:#aeb8d8;
  --a1:#1fd1c1; --a2:#7a5cff; --a3:#ff7a8a; --a4:#58a6ff;
  --felt: rgba(255,255,255,.07);
  --felt-border: 1px solid rgba(255,255,255,.2);
  --felt-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  --felt-radius: 26px;
  --card-bg:#fdfdff; --card-ink:#1b2140; --card-radius:10px;
  --card-border: 1px solid rgba(255,255,255,.9);
  --card-shadow: 0 8px 22px rgba(10,14,40,.35);
  --s-h:#e8435a; --s-d:#2f6bff; --s-c:#0f9f8a; --s-s:#1b2140;
  --jk:#7a5cff;
  --back-a: repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 5px), linear-gradient(160deg,#1fd1c1,#0c7f86);
  --back-b: radial-gradient(circle,rgba(255,255,255,.45) 0 1.5px,transparent 2px) 0 0/7px 7px, linear-gradient(160deg,#8f74ff,#4a2fc0);
  --back-c: repeating-linear-gradient(60deg,rgba(255,255,255,.28) 0 2px,transparent 2px 7px), linear-gradient(160deg,#ff9aa6,#d9486a);
  --back-border: 1px solid rgba(255,255,255,.7);
  --panel-bg: rgba(255,255,255,.08); --panel-border: 1px solid rgba(255,255,255,.18); --panel-radius:20px; --panel-blur: 18px;
  --btn-bg: rgba(255,255,255,.1); --btn-ink:#eef3ff; --btn-border:1px solid rgba(255,255,255,.22); --btn-radius:14px; --btn-shadow:none;
  --btn-on-bg: #eef3ff; --btn-on-ink:#0b1026;
  --f-display:"Syne", system-ui, sans-serif;
  --f-body:"Manrope", system-ui, sans-serif;
  --f-card:"Manrope", system-ui, sans-serif;
  --glow: 0 0 0 1.5px rgba(31,209,193,.9), 0 0 34px rgba(31,209,193,.55);
  --tag-bg: rgba(255,255,255,.12); --tag-ink:#eef3ff;
}
body[data-style="toy"]{
  color-scheme: light;
  --bg:#d6f0ff; --ink:#3a2c5c; --muted:#6f6391;
  --a1:#ff5f8f; --a2:#3fd6a8; --a3:#ffd84d; --a4:#8f6bff;
  --felt: radial-gradient(circle at 30% 20%, #9debd4, #6fd9ba);
  --felt-border: 4px dashed rgba(255,255,255,.75);
  --felt-shadow: 0 0 0 10px #6fd9ba, 0 14px 0 10px #45b995, 0 26px 40px 10px rgba(58,44,92,.18);
  --felt-radius: 34px;
  --card-bg:#fff; --card-ink:#3a2c5c; --card-radius:14px;
  --card-border: 0;
  --card-shadow: inset -2px -3px 0 rgba(58,44,92,.08), 0 5px 0 #d8cfee, 0 9px 14px rgba(58,44,92,.16);
  --s-h:#ff4f7e; --s-d:#3c7dff; --s-c:#16a877; --s-s:#3a2c5c;
  --jk:#8f6bff;
  --back-a: radial-gradient(circle,rgba(255,255,255,.7) 0 2.5px,transparent 3px) 0 0/10px 10px, #ff5f8f;
  --back-b: repeating-linear-gradient(90deg,#3fd6a8 0 5px,#2bb58c 5px 10px);
  --back-c: repeating-linear-gradient(45deg,#8f6bff 0 5px,#ffd84d 5px 10px);
  --back-border: 3px solid #fff;
  --panel-bg:#fff; --panel-border:0; --panel-radius:24px; --panel-blur:0px;
  --btn-bg:#fff; --btn-ink:#3a2c5c; --btn-border:0; --btn-radius:16px; --btn-shadow: inset 0 -3px 0 rgba(58,44,92,.1), 0 4px 0 #c9bfe6;
  --btn-on-bg:#ff5f8f; --btn-on-ink:#fff;
  --f-display:"Fredoka", system-ui, sans-serif;
  --f-body:"Fredoka", system-ui, sans-serif;
  --f-card:"Fredoka", system-ui, sans-serif;
  --glow: 0 0 0 5px #ffd84d, 0 10px 0 5px #e8b92a;
  --tag-bg:#fff; --tag-ink:#3a2c5c;
}
body[data-colors="2"]{ --s-d: var(--s-h); --s-c: var(--s-s); }

/* Estilos del juego. Base: design/mockups.src.html (F2 aprobado). */
/* Superficies: --surface para capas encimadas (modales, menús, chat) y --surface-2 para
   controles (botones de estilo, campos, marcadores). Opacas siempre, con texto --ink. */
:root{ --surface:#fff6e6; --surface-2:#fffaf0; --lift:8px 8px 0 var(--ink); }
body[data-style="papel"]{ --surface:#fff6e6; --surface-2:#fffaf0; }
body[data-style="memphis"]{ --surface:#ffffff; --surface-2:#ffffff; }
body[data-style="toy"]{ --surface:#ffffff; --surface-2:#efeaff; }
/* Juguetería no tiene borde en controles: el campo se hunde para verse sobre el panel blanco. */
body[data-style="toy"] .field input, body[data-style="toy"] .chat input{ box-shadow:inset 0 3px 0 rgba(58,44,92,.1); }
body[data-style="neon"]{ --surface:#221352; --surface-2:#2e1a6b; --lift:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(24,231,255,.35); }
body[data-style="aurora"]{ --surface:#161d42; --surface-2:#232c5c; --lift:0 18px 50px rgba(0,0,0,.5); }
/* Cartas de 2 colores: fijo para todos. */
body{ --s-d: var(--s-h); --s-c: var(--s-s); }

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 var(--f-body); overflow-x:hidden; }
button{ font:inherit; color:inherit; cursor:pointer; }
input{ font:inherit; }


*{ box-sizing:border-box; }
html, body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 var(--f-body); overflow:hidden; }
button{ font:inherit; color:inherit; cursor:pointer; }
input{ font:inherit; }
:root{ --k:1; }
canvas.bgc, canvas.fxc{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; }
canvas.bgc{ z-index:0; } canvas.fxc{ z-index:70; }
#app{ position:fixed; inset:0; z-index:1; }
.app{ position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; min-height:42px;
  background:var(--btn-bg); color:var(--btn-ink); border:var(--btn-border); border-radius:var(--btn-radius); box-shadow:var(--btn-shadow);
  font-weight:700; font-size:15px; line-height:1.1; transition:transform .12s; }
.btn:hover{ transform:translateY(-1px); } .btn:active{ transform:translateY(1px); box-shadow:none; }
.btn.primary{ background:var(--btn-on-bg); color:var(--btn-on-ink); }
.btn.ghost{ box-shadow:none; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.icon{ width:18px; height:18px; flex:none; }

.topbar{ display:flex; align-items:center; gap:14px; padding:10px 18px; background:var(--surface); border-bottom:var(--panel-border); position:relative; z-index:5; }
.logo{ font:700 22px/1 var(--f-display); }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; background:var(--tag-bg); color:var(--tag-ink); font-size:13px; font-weight:600; white-space:nowrap; }
.chip b{ font-variant-numeric:tabular-nums; }
.scores{ display:flex; gap:8px; flex:1; justify-content:center; }
.score{ display:grid; grid-template-columns:auto auto; gap:1px 10px; align-items:center; padding:5px 12px; border:var(--panel-border); border-radius:10px; background:var(--surface-2); color:var(--ink); min-width:170px; }
.score .nm{ font-size:12.5px; font-weight:600; display:flex; gap:6px; align-items:center; }
.score b{ font:700 20px/1 var(--f-card); font-variant-numeric:tabular-nums; text-align:right; }
.score .bar{ grid-column:1/-1; height:5px; border-radius:3px; background:rgba(127,127,127,.2); overflow:hidden; }
.score .bar i{ display:block; height:100%; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; }
.t0{ --tc:var(--a2); } .t1{ --tc:var(--a1); } .t2{ --tc:var(--a4); }
.dot.tc, .tcbg{ background:var(--tc); }
.meta{ font-size:12.5px; color:var(--muted); white-space:nowrap; text-align:right; line-height:1.25; }
.iconbtn{ position:relative; width:42px; height:42px; display:grid; place-items:center; border:var(--btn-border); border-radius:var(--btn-radius); background:var(--btn-bg); box-shadow:var(--btn-shadow); }
.iconbtn .badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; border-radius:10px; background:var(--a1); color:#fff; font:700 11px/20px var(--f-body); text-align:center; padding:0 5px; }

/* ---------- Mesa ---------- */
.main{ position:relative; display:grid; grid-template-columns:1fr auto; min-height:0; }
:root{
  --cw: calc(74px * var(--k)); --ch: calc(var(--cw) * 1.42);
  --mw: calc(46px * var(--k)); --mh: calc(var(--mw) * 1.42);
  --bw: calc(23px * var(--k)); --bh: calc(var(--bw) * 1.42);
  --pw: calc(70px * var(--k)); --ph: calc(var(--pw) * 1.42);
}
.table{
  position:relative; margin:calc(14px * var(--k)); border-radius:var(--felt-radius); background:var(--felt); border:var(--felt-border); box-shadow:var(--felt-shadow);
  display:grid; grid-template-columns: calc(150px * var(--k)) 1fr calc(150px * var(--k)); grid-template-rows: auto 1fr auto;
  grid-template-areas: "tl top tr" "left center right" "hand hand hand";
  padding:calc(12px * var(--k)); gap:calc(8px * var(--k)); min-height:0;
}
.side{ display:flex; flex-direction:column; justify-content:space-around; align-items:center; gap:10px; }
.side.left{ grid-area:left; } .side.right{ grid-area:right; }
.topseat{ grid-area:top; display:flex; justify-content:center; gap:40px; }
.center{ grid-area:center; display:flex; flex-direction:column; gap:calc(10px * var(--k)); min-height:0; justify-content:center; }
.zones{ display:flex; gap:calc(10px * var(--k)); }
.zones > *{ flex:1; min-width:0; }

.seat{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 8px; border-radius:14px; position:relative; transition:box-shadow .3s; }
.seat .who{ display:flex; align-items:center; gap:7px; background:var(--tag-bg); color:var(--tag-ink); border-radius:999px; padding:3px 11px 3px 3px; font-weight:700; font-size:13.5px; white-space:nowrap; }
.av{ width:26px; height:26px; border-radius:50%; background:var(--tc); color:#fff; display:grid; place-items:center; font:700 13px/1 var(--f-body); border:2px solid var(--tag-ink); }
.seat .n{ font-variant-numeric:tabular-nums; opacity:.85; font-weight:600; }
.seat.turn{ box-shadow:0 0 0 3px var(--a3); background:rgba(255,255,255,.12); animation:turnpulse 1.6s ease-in-out infinite; }
@keyframes turnpulse{ 0%,100%{ box-shadow:0 0 0 3px var(--a3), 0 0 0 0 rgba(242,179,27,.55); } 50%{ box-shadow:0 0 0 3px var(--a3), 0 0 0 12px rgba(242,179,27,0); } }
.me .seat.turn{ animation:none; }
.think{ display:inline-flex; gap:3px; margin-left:2px; }
.think i{ width:5px; height:5px; border-radius:50%; background:var(--a3); animation:think 1s ease-in-out infinite; }
.think i:nth-child(2){ animation-delay:.15s; } .think i:nth-child(3){ animation-delay:.3s; }
@keyframes think{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }
.seat.turn::after{ content:"Jugando"; position:absolute; bottom:-10px; font:700 10.5px/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; background:var(--a3); color:#2b1d14; padding:3px 7px; border-radius:6px; }
.seat.off{ opacity:.55; }
.seat.off::after{ content:"Desconectado"; position:absolute; bottom:-10px; font:700 10.5px/1 var(--f-body); background:var(--tag-bg); color:var(--tag-ink); padding:3px 7px; border-radius:6px; }
.fan{ display:flex; max-width:calc(140px * var(--k)); }
.fan .back + .back{ margin-left:calc(var(--bw) * -.55); }
.seat.v .fan{ flex-direction:column; align-items:center; }
.seat.v .fan .back{ transform:rotate(90deg); }
.seat.v .fan .back + .back{ margin-left:0; margin-top:calc(var(--bh) * -.78); }

.back{ width:var(--bw); height:var(--bh); border-radius:4px; border:var(--back-border); flex:none; }
.back.pile{ width:var(--pw); height:var(--ph); border-radius:var(--card-radius); }
.b0{ background:var(--back-a); } .b1{ background:var(--back-b); } .b2{ background:var(--back-c); }

.card{ position:relative; flex:none; width:var(--cw); height:var(--ch); background:var(--card-bg); color:var(--card-ink); border:var(--card-border); border-radius:var(--card-radius); box-shadow:var(--card-shadow); font-family:var(--f-card); font-weight:700; user-select:none; -webkit-user-select:none; touch-action:none; }
.card .ix{ position:absolute; left:calc(var(--w) * .07); top:1px; display:flex; flex-direction:column; align-items:center; line-height:.95; font-size:calc(var(--w) * .37); }
.card .ix i{ font-style:normal; font-size:.8em; }
.card .pip{ position:absolute; right:9%; bottom:5%; font-size:calc(var(--w) * .55); line-height:1; }
.card{ --w: var(--cw); }
.card.sm{ --w: var(--mw); width:var(--mw); height:var(--mh); }
.card.pl{ --w: var(--pw); width:var(--pw); height:var(--ph); }
.card.h, .card.d{ color:var(--s-h); } .card.c, .card.s{ color:var(--s-s); }
.card.jk{ color:var(--jk); }
.card .jkix{ font-size:calc(var(--w) * .16); line-height:.92; letter-spacing:0; top:4px; }
.card .jester{ position:absolute; right:6%; bottom:5%; width:66%; height:auto; color:#2b1d14; }
.card.sm .jester{ width:70%; }
.card .as{ position:absolute; z-index:3; left:50%; bottom:-8px; transform:translateX(-50%); font:700 10px/1 var(--f-body); padding:2px 5px; border-radius:5px; background:var(--jk); color:#fff; white-space:nowrap; }

.piles{ display:flex; justify-content:center; align-items:flex-end; gap:calc(34px * var(--k)); }
.pilebox{ display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.pilebox .lbl{ display:flex; gap:6px; align-items:center; }
.stack{ position:relative; width:var(--pw); height:var(--ph); border-radius:var(--card-radius); }
.stack > *{ position:absolute; inset:0; }
.stack > :nth-last-child(3){ transform:translate(-4px,4px); } .stack > :nth-last-child(2){ transform:translate(-2px,2px); }
.target{ cursor:pointer; transition: box-shadow .2s, transform .15s; }
.target.hot{ box-shadow:0 0 0 4px var(--a3), 0 0 0 7px var(--ink); border-radius:var(--card-radius); animation:hot 1.4s infinite; }
@keyframes hot{ 50%{ transform:translateY(-3px); } }
.target.dim{ opacity:.45; }
.buracos{ display:flex; gap:10px; }
.third{ position:absolute; top:-12px; right:-26px; background:var(--a3); color:#2b1d14; font:700 10.5px/1 var(--f-body); padding:4px 7px; border-radius:6px; transform:rotate(6deg); white-space:nowrap; border:2px solid var(--ink); }

.zone{ border-radius:calc(var(--felt-radius) * .6); padding:8px 10px 12px; background:rgba(255,255,255,.22); display:grid; gap:8px; align-content:start; min-height:calc(var(--mh) + 44px); }
.zone.mine{ background:rgba(255,255,255,.32); }
.zone h4{ margin:0; display:flex; gap:7px; align-items:center; font:700 12px/1 var(--f-body); letter-spacing:.07em; text-transform:uppercase; color:#fff; }
.zone h4 .ok.alert{ display:inline-flex; align-items:center; gap:6px; background:var(--a1); color:#fff; font-weight:700; font-size:12px; padding:3px 9px 3px 3px; border:1.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); animation:alert 2.4s ease-in-out infinite; }
.zone h4 .ok.alert b{ width:18px; height:18px; border-radius:50%; background:var(--a3); color:#2b1d14; display:grid; place-items:center; font:800 13px/1 var(--f-body); }
@keyframes alert{ 0%,70%,100%{ transform:none; } 80%{ transform:rotate(-4deg) scale(1.06); } 90%{ transform:rotate(3deg) scale(1.06); } }
.zone h4 .ok{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:600; font-size:11.5px; background:rgba(0,0,0,.25); padding:3px 7px; border-radius:6px; }
.melds{ display:flex; flex-wrap:wrap; gap:18px 16px; align-items:flex-end; padding-top:8px; }
.meld{ position:relative; display:flex; padding:4px; border-radius:10px; }
.meld > .card + .card{ margin-left:calc(var(--mw) * -.55); }
.meld.can > .card + .card{ margin-left:calc(var(--mw) * -.78); }
.meld .tagc{ position:absolute; left:2px; top:-11px; z-index:4; font:700 10px/1 var(--f-body); padding:3px 7px; border-radius:999px; background:var(--a3); color:#2b1d14; white-space:nowrap; border:1.5px solid var(--ink); }
.meld .tagc.sucia{ background:var(--a4); color:#fff; }
.newmeld{ width:calc(var(--mw) * 2.2); height:var(--mh); border:2.5px dashed rgba(255,255,255,.85); border-radius:10px; display:grid; place-items:center; color:#fff; font:700 12px/1.2 var(--f-body); text-align:center; padding:4px; }

.handrow{ grid-area:hand; display:grid; grid-template-columns: calc(150px * var(--k)) 1fr calc(150px * var(--k)); align-items:end; gap:10px; }
.me{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.hint{ justify-self:center; display:flex; align-items:center; gap:10px; background:var(--tag-bg); color:var(--tag-ink); border-radius:999px; padding:6px 14px; font-weight:600; font-size:14px; margin-bottom:8px; }
.hint .step{ background:var(--a3); color:#2b1d14; border-radius:999px; padding:2px 9px; font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.handwrap{ display:flex; flex-direction:column; align-items:center; }
.hand{ display:flex; justify-content:center; padding-top:18px; min-height:calc(var(--ch) + 22px); }
.hand > .card + .card{ margin-left:calc(var(--cw) * -.22); }
.hand > .card{ cursor:pointer; transition:transform .15s; }
.hand > .card:hover{ transform:translateY(-6px); }
.hand > .card.sel{ transform:translateY(-18px); box-shadow:0 0 0 3px var(--a3), var(--card-shadow); }
.hand > .card.drag{ z-index:30; transition:none; box-shadow:0 14px 26px rgba(0,0,0,.3); }
.hand > .card.gap{ margin-left:calc(var(--cw) * .5) !important; }
kbd{ font:700 11px/1 var(--f-body); border:1.5px solid currentColor; border-radius:5px; padding:2px 5px; margin-left:4px; opacity:.8; }
.selbar{ display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; justify-self:end; margin-bottom:10px; }

.banner{ position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:20; background:var(--a1); color:#fff; border:2px solid var(--ink); border-radius:12px; padding:8px 16px; font-weight:700; box-shadow:4px 4px 0 var(--ink); white-space:nowrap; }

.chat{ width:calc(310px * var(--k)); border-left:var(--panel-border); background:var(--surface); color:var(--ink); display:flex; flex-direction:column; min-height:0; }
.chat header{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:var(--panel-border); font-weight:700; }
.msgs{ flex:1; overflow:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.msg{ display:grid; gap:2px; }
.msg b{ font-size:12.5px; display:flex; gap:6px; align-items:center; }
.msg span{ background:var(--surface-2); border:var(--panel-border); border-radius:10px; padding:6px 10px; justify-self:start; max-width:100%; }
.msg.mine{ justify-items:end; } .msg.mine span{ background:var(--a2); color:#fff; }
.chat form{ display:flex; gap:8px; padding:10px 12px; border-top:var(--panel-border); }
.chat input{ flex:1; min-width:0; border:var(--btn-border); border-radius:10px; padding:8px 10px; background:var(--surface-2); color:var(--ink); }

/* ---------- Capas ---------- */
.scrim{ position:absolute; inset:0; z-index:40; background:rgba(43,29,20,.45); display:grid; place-items:center; padding:20px; }
.modal{ background:var(--surface); color:var(--ink); border:var(--panel-border); border-radius:var(--panel-radius); box-shadow:var(--lift); padding:22px 24px; max-width:720px; width:100%; display:grid; gap:14px; }
.modal h2{ margin:0; font:700 28px/1.1 var(--f-display); text-wrap:balance; }
.modal p{ margin:0; }
.modal .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.muted{ color:var(--muted); }
.toast{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); z-index:60; background:var(--tag-bg); color:var(--tag-ink); border-radius:12px; padding:12px 20px; font-weight:700; font-size:16px; box-shadow:5px 5px 0 var(--a4); pointer-events:none; opacity:0; transition:opacity .25s; text-align:center; max-width:70%; }
.toast.show{ opacity:1; }
.toast.big{ background:transparent; box-shadow:none; color:var(--ink); font:700 54px/1 var(--f-display); text-shadow:4px 4px 0 var(--a4); }
.pop{ position:absolute; z-index:50; background:var(--surface); color:var(--ink); border:var(--panel-border); border-radius:14px; box-shadow:6px 6px 0 var(--ink); padding:12px 14px; display:grid; gap:10px; width:max-content; }
.pop h5{ margin:0; font:700 15px/1.2 var(--f-body); }
.pop .opt{ display:flex; align-items:center; gap:10px; border:var(--btn-border); border-radius:10px; background:var(--surface-2); color:var(--ink); padding:10px 12px 14px; box-shadow:var(--btn-shadow); }
.pop .opt:hover{ transform:translateY(-1px); }
.pop .opt .meld{ padding:0; }
.pop .opt small{ font-weight:700; font-size:13px; min-width:110px; text-align:left; }

/* La copa flota; los brillos quedan quietos en su lugar y titilan a su propio ritmo. */
.trophy{ position:relative; width:120px; height:120px; }
.trophy .cup{ width:100%; height:100%; animation:trophy 2.4s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes trophy{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-6px) rotate(2deg); } }
.spark{ position:absolute; width:14px; height:14px; left:calc(50% + cos(calc(var(--i) * 45deg)) * 70px - 7px); top:calc(45% + sin(calc(var(--i) * 45deg)) * 62px - 7px);
  background:var(--a3); clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); animation:spark calc(1.1s + var(--i) * .17s) ease-in-out infinite; animation-delay:calc(var(--i) * -.37s); }
.spark:nth-child(even){ background:var(--a4); width:10px; height:10px; }
@keyframes spark{ 0%,100%{ transform:scale(.2) rotate(0); opacity:0; } 50%{ transform:scale(1.2) rotate(45deg); opacity:1; } }
table.sc{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
table.sc th, table.sc td{ padding:7px 10px; text-align:right; border-bottom:1px solid rgba(43,29,20,.15); }
table.sc th:first-child, table.sc td:first-child{ text-align:left; }
table.sc thead th{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
table.sc tr.sub td{ font-weight:700; }
table.sc tr.tot td{ font:700 22px/1 var(--f-card); border-bottom:0; }
table.sc .neg{ color:var(--a1); }

/* ---------- Portada y sala de espera ---------- */
.front{ position:absolute; inset:0; z-index:1; display:grid; grid-template-rows:auto 1fr auto; padding:calc(34px * var(--k)) calc(48px * var(--k)); gap:18px; }
.hero{ text-align:center; display:grid; gap:6px; justify-items:center; }
.hero h1{ margin:0; font:700 calc(96px * var(--k))/1 var(--f-display); letter-spacing:.01em; text-shadow:6px 6px 0 var(--a4); }
.hero p{ margin:0; font-size:18px; color:var(--muted); }
.cards2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; max-width:1000px; width:100%; margin:0 auto; }
.panelc{ background:var(--surface); color:var(--ink); border:var(--panel-border); border-radius:var(--panel-radius); box-shadow:6px 6px 0 var(--ink); padding:20px 22px; display:grid; gap:14px; }
.panelc h2{ margin:0; font:700 26px/1 var(--f-display); }
.field{ display:grid; gap:5px; font-weight:600; font-size:13.5px; }
.field input{ border:var(--btn-border); border-radius:10px; padding:10px 12px; background:var(--surface-2); color:var(--ink); font-size:16px; }
.field input.code{ font:700 26px/1 var(--f-card); letter-spacing:.3em; text-transform:uppercase; }
.modes{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.modes button{ border:var(--btn-border); color:var(--ink); border-radius:10px; background:var(--surface-2); box-shadow:var(--btn-shadow); padding:10px 6px; display:grid; gap:6px; justify-items:center; font-weight:700; font-size:13px; }
.modes button[aria-pressed="true"]{ background:var(--a3); color:#1a1033; }
.mini{ display:flex; gap:3px; }
.mini i{ width:12px; height:12px; border-radius:50%; background:var(--tc); border:1.5px solid var(--ink); }
.stylepick{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; align-items:center; }
.thumb{ border:var(--btn-border); color:var(--ink); border-radius:12px; background:var(--surface-2); box-shadow:var(--btn-shadow); padding:6px; display:grid; gap:5px; justify-items:center; font-weight:700; font-size:12px; width:112px; }
.thumb[aria-pressed="true"]{ outline:3px solid var(--a3); outline-offset:2px; }
.thumb .pv{ width:100%; height:54px; border-radius:8px; position:relative; overflow:hidden; }
.thumb .pv .felt{ position:absolute; inset:8px 10px; border-radius:6px; }
.thumb .pv .c1, .thumb .pv .c2{ position:absolute; width:20px; height:28px; border-radius:4px; bottom:10px; box-shadow:0 2px 4px rgba(0,0,0,.25); }
.thumb .pv .c1{ left:30%; transform:rotate(-6deg); } .thumb .pv .c2{ left:50%; transform:rotate(8deg); }
.wait{ display:grid; gap:18px; justify-items:center; align-content:center; text-align:center; }
.bigcode{ font:700 calc(88px * var(--k))/1 var(--f-card); letter-spacing:.18em; background:var(--surface-2); color:var(--ink); border:var(--panel-border); border-radius:18px; padding:14px 28px 10px; box-shadow:8px 8px 0 var(--a4); }
.seats{ display:grid; grid-template-columns:repeat(3, 190px); gap:12px; justify-content:center; }
.slot{ border:var(--panel-border); border-radius:14px; background:var(--surface-2); color:var(--ink); padding:12px; display:flex; gap:10px; align-items:center; font-weight:700; }
.slot.empty{ border-style:dashed; background:transparent; color:var(--muted); font-weight:600; }
.slot .av{ --tc:var(--a2); }

/* ---------- Juego real (F5): lo que el prototipo no necesitaba ---------- */
#tablewrap{ display:contents; }
.chat[hidden]{ display:none; }
.front.scroll{ overflow-y:auto; }
.center{ overflow-y:auto; justify-content:safe center; }
.hand{ --ov: calc(var(--cw) * -.22); }
.hand > .card + .card{ margin-left:var(--ov); }
.card.blank{ box-shadow:none; }
.card.empty, .back.empty{ background:transparent; border:2.5px dashed rgba(255,255,255,.7); box-shadow:none; }
.back.empty{ width:var(--pw); height:var(--ph); border-radius:var(--card-radius); }
.nomelds{ color:#fff; opacity:.75; font-size:13px; font-weight:600; }
.meld.movable{ cursor:pointer; }
.meld.movable:hover{ box-shadow:0 0 0 2px var(--a3); }
.toast{ position:fixed; }
.modal{ max-height:calc(100vh - 40px); overflow-y:auto; }
.scwrap{ overflow-x:auto; }
body.chat-open .scrim.soft{ right:calc(310px * var(--k)); }
.h3{ margin:0 0 8px; font:600 12px/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.reclink{ flex:1; min-width:0; overflow-wrap:anywhere; font:700 16px var(--f-card); background:var(--surface-2); border:var(--btn-border); border-radius:10px; padding:10px 12px; }
.warn{ background:var(--a1); color:#fff; border-radius:10px; padding:10px 12px; font-weight:700; }
.tie{ background:var(--a3); color:#2b1d14; border-radius:10px; padding:10px 12px; font-weight:700; }
.bpick{ border:0; background:none; padding:0; display:grid; gap:8px; justify-items:center; }
.stack.big{ --pw:92px; --ph:130px; }
.netc{ background:var(--a1); color:#fff; }
.slot.off{ opacity:.55; }
.ferr{ margin:0 auto; max-width:1000px; width:100%; background:var(--a1); color:#fff; border-radius:10px; padding:10px 14px; font-weight:700; text-align:center; }
.btn b{ font-family:var(--f-card); letter-spacing:.12em; }
@media (max-width: 760px){ .cards2{ grid-template-columns:1fr; } .modes{ grid-template-columns:repeat(2,1fr); } .front{ padding:20px 16px; } .seats{ grid-template-columns:repeat(2, minmax(0,190px)) !important; } }
.msg b .dot{ padding:0; border:0; border-radius:50%; background:var(--tc); }
.newmeld{ background:transparent; }
.selbar{ white-space:nowrap; }

/* ==========================================================================
   Celular (F8). Base: design/movil.src.html (mockups aprobados, versión 4).
   Todo va bajo body.phone: escritorio y tablet no cambian. body.land = teléfono
   horizontal (la orientación sigue al teléfono); body.small = pantallas ≤ 379 px.
   ========================================================================== */
body.phone{
  --cw:50px; --ch:calc(var(--cw) * 1.42); --mw:30px; --mh:calc(var(--mw) * 1.42);
  --rw:22px; --rh:calc(var(--rw) * 1.42); --pw:46px; --ph:calc(var(--pw) * 1.42);
  --bw:var(--rw); --bh:var(--rh);
  --sat:env(safe-area-inset-top, 0px); --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px); --sar:env(safe-area-inset-right, 0px);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
body.phone.small{ --cw:44px; --mw:27px; --pw:42px; }
body.phone .btn{ min-height:44px; padding:9px 14px; gap:7px; }
body.phone .btn:hover{ transform:none; }
body.phone .btn.sm{ min-height:36px; padding:6px 11px; font-size:14px; }
body.phone .btn.dim{ opacity:.4; }
body.phone .iconbtn{ width:40px; height:40px; flex:none; }
body.phone .iconbtn .badge{ min-width:19px; height:19px; font-size:11px; line-height:19px; }
body.phone .chip{ padding:4px 10px; font-size:12.5px; gap:6px; }
body.phone .dot{ width:9px; height:9px; }
body.phone .card .ix{ top:0; }
body.phone .card.sm .as{ bottom:-7px; font-size:9px; padding:1px 4px; }
body.phone .card.rv{ --w:var(--rw); width:var(--rw); height:var(--rh); border-width:1.5px; box-shadow:none; }
body.phone .card.rv .pip{ display:none; }
body.phone .card.rv .ix{ font-size:calc(var(--w) * .42); left:2px; }
body.phone .card.rv .jester{ width:80%; }
body.phone .card.rv .as{ display:none; }

/* ---------- Mesa: vertical ---------- */
body.phone .mapp{ display:grid; padding:calc(var(--sat) + 6px) var(--sar) calc(var(--sab) + 6px) var(--sal);
  grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;
  grid-template-areas:"top" "seats" "rivals" "piles" "mine" "act" "hand"; }
.mtop{ grid-area:top; display:flex; align-items:center; gap:8px; padding:4px 12px 6px; min-width:0; }
.mtop .mcode{ font:700 13px/1 var(--f-card); letter-spacing:.12em; background:var(--tag-bg); color:var(--tag-ink); padding:6px 8px; border-radius:8px; flex:none; }
.mscores{ flex:1; display:flex; gap:5px; min-width:0; }
.msc{ flex:1; min-width:0; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 5px; background:var(--surface-2); color:var(--ink); border:var(--panel-border); border-radius:9px; padding:3px 7px; }
.msc small{ grid-column:2; font-size:10.5px; font-weight:700; overflow:hidden; white-space:nowrap; line-height:1.1; }
.msc .ini{ display:none; gap:2px; }
.msc .ini i{ width:16px; height:16px; border-radius:50%; background:var(--tc); color:#fff; font:700 9px/16px var(--f-body); font-style:normal; text-align:center; }
.msc .ini i.yo{ width:auto; padding:0 4px; border-radius:8px; }
/* Si algún nombre no cabe, todo el marcador pasa a iniciales (nunca «…»). */
.mscores.compact .msc .full{ display:none; } .mscores.compact .msc .ini{ display:inline-flex; }
.mscores.compact .msc{ grid-template-columns:1fr; } .mscores.compact .msc .dot{ display:none; } .mscores.compact .msc small{ grid-column:1; overflow:visible; }
.msc b{ grid-column:1/-1; font:700 16px/1 var(--f-card); font-variant-numeric:tabular-nums; }
.msc .dot{ grid-row:1; }

.mseats{ grid-area:seats; display:flex; justify-content:center; gap:6px; padding:2px 10px 6px; min-width:0; }
.mseat{ flex:0 1 70px; min-width:0; display:grid; justify-items:center; gap:3px; padding:4px 3px 5px; border-radius:12px; position:relative; }
.mseat .av{ position:relative; width:34px; height:34px; border-radius:50%; background:var(--tc); color:#fff; display:grid; place-items:center; font:700 15px/1 var(--f-body); border:2.5px solid var(--tag-bg); }
.mseat .cnt{ position:absolute; right:-9px; bottom:-5px; min-width:20px; height:18px; padding:0 4px; border-radius:9px; background:var(--tag-bg); color:var(--tag-ink); font:700 11px/18px var(--f-body); font-style:normal; text-align:center; font-variant-numeric:tabular-nums; }
.mseat .nm{ font-size:12px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; padding:1px 6px; border-radius:999px; }
.mseat.turn .nm{ background:var(--a3); color:#2b1d14; box-shadow:0 0 0 2px var(--ink); }
.mseat.turn .think i{ background:#2b1d14; }
.mseat .pal{ position:absolute; top:0; left:2px; font:700 9px/1 var(--f-body); background:var(--tc); color:#fff; padding:2px 4px; border-radius:5px; }
.strip{ display:flex; height:9px; width:100%; max-width:62px; border-radius:3px; overflow:hidden; border:1.5px solid var(--ink); }
.strip i{ flex:1; }
.strip .b0{ background:var(--back-a); } .strip .b1{ background:var(--back-b); } .strip .b2{ background:var(--back-c); }
.mseat.turn{ background:var(--surface-2); box-shadow:0 0 0 2.5px var(--a3); animation:mturnpulse 1.6s ease-in-out infinite; }
@keyframes mturnpulse{ 0%,100%{ box-shadow:0 0 0 2.5px var(--a3), 0 0 0 0 rgba(242,179,27,.55); } 50%{ box-shadow:0 0 0 2.5px var(--a3), 0 0 0 9px rgba(242,179,27,0); } }
body.phone .think{ gap:2px; margin-left:0; flex:none; }
body.phone .think i{ width:4px; height:4px; }
.mseat.off{ opacity:.5; }
.mseat.off .nm::after{ content:" · fuera"; font-weight:600; }

/* Juegos rivales: una franja por equipo; bajan de línea, nunca se desplazan de lado. */
.rivals{ grid-area:rivals; display:grid; gap:5px; padding:0 10px 6px; min-width:0; }
.rz{ min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px; background:var(--felt); border:var(--felt-border); border-radius:12px; padding:5px 6px 5px 8px; min-height:48px; cursor:pointer; }
.rz .who{ display:grid; justify-items:start; gap:2px; font:700 11px/1.1 var(--f-body); color:#fff; max-width:62px; overflow-wrap:anywhere; }
.rz .who .alert{ display:inline-flex; align-items:center; gap:3px; background:var(--a1); color:#fff; font-size:9.5px; padding:2px 5px 2px 2px; border-radius:6px; border:1.5px solid var(--ink); white-space:nowrap; }
.rz .who .alert b{ width:12px; height:12px; border-radius:50%; background:var(--a3); color:#2b1d14; display:grid; place-items:center; font-size:9px; }
.rstrip{ display:flex; flex-wrap:wrap; gap:10px 7px; padding:9px 2px 2px; min-width:0; }
body.phone .rstrip .meld{ padding:3px; }
body.phone .rstrip .meld > .card + .card{ margin-left:calc(var(--rw) * -.52); }
body.phone .rstrip .meld.can > .card + .card{ margin-left:calc(var(--rw) * -.74); }
body.phone .rstrip .tagc{ font-size:8.5px; top:-9px; padding:1px 5px; }
.rstrip .empty{ color:#fff; opacity:.8; font-size:12px; font-weight:600; }

.mpiles{ grid-area:piles; display:flex; justify-content:center; align-items:flex-end; gap:22px; padding:4px 10px 8px; }
body.phone .pilebox{ display:grid; justify-items:center; gap:4px; }
body.phone .stack > :nth-last-child(3){ transform:translate(-3px,3px); } body.phone .stack > :nth-last-child(2){ transform:translate(-1.5px,1.5px); }
body.phone .buracos{ display:flex; gap:0; }
body.phone .buracos .back + .back{ margin-left:calc(var(--pw) * -.55); }
body.phone .third{ top:-9px; right:-18px; font-size:9.5px; padding:3px 6px; z-index:2; }
body.phone .target.hot{ box-shadow:0 0 0 3px var(--a3), 0 0 0 5.5px var(--ink); }
body.phone .target.dim{ opacity:.4; }

.mmine{ grid-area:mine; margin:0 10px; background:var(--felt); border:var(--felt-border); border-radius:14px; box-shadow:var(--felt-shadow); display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; overflow:hidden; }
.mmine h4{ margin:0; padding:8px 10px 0; display:flex; gap:6px; align-items:center; font:700 11.5px/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:#fff; min-width:0; }
.mmine h4 .n{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:600; font-size:11px; background:rgba(0,0,0,.25); padding:3px 7px; border-radius:6px; white-space:nowrap; }
body.phone .mmine .melds{ display:flex; flex-wrap:wrap; gap:16px 12px; align-content:flex-start; align-items:flex-end; padding:16px 10px 12px; overflow-y:auto; min-height:0; }
body.phone .meld{ padding:3px; border-radius:9px; }
body.phone .meld > .card + .card{ margin-left:calc(var(--mw) * -.5); }
body.phone .meld.can > .card + .card{ margin-left:calc(var(--mw) * -.74); }
body.phone .meld .tagc{ left:0; top:-11px; font-size:9.5px; padding:2px 6px; }
body.phone .meld.movable:hover{ box-shadow:none; }
body.phone .newmeld{ width:calc(var(--mw) * 2.3); height:var(--mh); border-radius:9px; font-size:11px; line-height:1.15; padding:3px; }

.act{ grid-area:act; display:flex; gap:6px; align-items:center; justify-content:center; padding:8px 10px 4px; min-height:52px; flex-wrap:wrap; min-width:0; }
body.phone .act .hint{ display:flex; align-items:center; gap:7px; border-radius:999px; padding:5px 11px 5px 5px; font-size:12.5px; line-height:1.2; max-width:100%; margin:0; min-width:0; }
body.phone .act .hint .step{ flex:none; padding:3px 8px; font-size:10.5px; }
.mme{ flex:none; display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; background:var(--tag-bg); color:var(--tag-ink); border-radius:999px; padding:2px 9px 2px 2px; white-space:nowrap; }
.mme .av{ width:22px; height:22px; border-radius:50%; background:var(--tc); color:#fff; display:grid; place-items:center; font-size:11px; }
.mme.turn{ box-shadow:0 0 0 2.5px var(--a3); }

.mhand{ grid-area:hand; display:grid; justify-items:center; padding:14px 6px 4px; position:relative; min-width:0; }
.hrow{ display:flex; justify-content:center; min-height:calc(var(--ch) + 6px); max-width:100%; }
.hrow + .hrow{ margin-top:calc(var(--ch) * -.42); }
.hrow > .card{ cursor:pointer; transition:transform .15s; }
.hrow > .card + .card{ margin-left:var(--ov, calc(var(--cw) * -.36)); }
.hrow > .card.sel{ transform:translateY(-15px); box-shadow:0 0 0 3px var(--a3), var(--card-shadow); z-index:5; }
.hrow > .card.drag{ z-index:30; transition:none; box-shadow:0 14px 26px rgba(0,0,0,.3); }
body.phone .banner{ left:10px; right:10px; top:calc(var(--sat) + 52px); transform:none; font-size:13.5px; padding:8px 12px; box-shadow:3px 3px 0 var(--ink); text-align:center; white-space:normal; }
body.phone .netc{ flex:none; }

/* ---------- Mesa: horizontal ---------- */
body.phone.land .mapp{ padding:calc(var(--sat) + 4px) calc(var(--sar) + 10px) calc(var(--sab) + 6px) calc(var(--sal) + 10px);
  grid-template-columns:180px minmax(0,1fr) 170px; grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"top top top" "rivals seats piles" "rivals mine piles" "hand hand act"; }
body.phone.land .mtop{ padding:2px 0 4px; }
body.phone.land .mseats{ padding:0 8px 4px; }
body.phone.land .mseat{ padding:2px 3px 4px; }
body.phone.land .mseat .av{ width:28px; height:28px; font-size:13px; }
body.phone.land .rivals{ padding:0 0 6px; align-content:start; overflow-y:auto; min-height:0; }
body.phone.land .rz .who{ max-width:52px; }
body.phone.land .mpiles{ flex-wrap:wrap; align-content:start; align-items:flex-start; gap:10px 12px; padding:6px 0 0; min-height:0; }
body.phone.land .mpiles .chip{ font-size:11.5px; padding:3px 7px; gap:4px; }
body.phone.land .third{ right:-8px; }
body.phone.land .mmine{ margin:0 8px 6px; }
body.phone.land .act{ display:grid; grid-template-columns:1fr 1fr; align-content:end; justify-items:stretch; gap:5px; padding:0 0 4px; min-height:0; }
body.phone.land .act .mme{ grid-column:1/-1; justify-self:start; }
body.phone.land .act .hint{ grid-column:1/-1; font-size:11px; border-radius:12px; }
body.phone.land .act #actNew{ grid-column:1/-1; }
body.phone.land .act .btn.sm{ padding:5px 6px; font-size:13px; }
body.phone.land .mhand{ padding:12px 0 0; }
body.phone.land .banner{ top:auto; bottom:calc(var(--sab) + 108px); left:240px; right:200px; }

/* ---------- Ventanas: hojas que suben desde abajo ---------- */
body.phone .scrim{ background:rgba(20,12,8,.45); display:flex; align-items:flex-end; justify-content:stretch; padding:0; }
body.phone .modal{ width:100%; max-width:none !important; max-height:90%; overflow-y:auto; overflow-x:hidden; border:0; border-top:var(--panel-border); border-radius:20px 20px 0 0;
  padding:10px 16px calc(var(--sab) + 26px); gap:12px; box-shadow:0 -10px 30px rgba(0,0,0,.25); }
body.phone .modal::before{ content:""; justify-self:center; width:44px; height:5px; border-radius:3px; background:var(--muted); opacity:.5; }
body.phone .modal h2{ font-size:22px !important; line-height:1.15; }
body.phone .modal .row{ gap:8px; }
body.phone .modal .row > .btn{ flex:1 1 auto; }
body.phone .modal .reclink{ flex:1 1 100%; font-size:15px; }
body.phone .modal .stylepick{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
body.phone .modal input[type=range]{ flex:1; width:auto !important; }
body.phone .modal .bpick .stack.big{ --pw:70px; --ph:100px; }
body.phone .modal .trophy{ width:104px; height:104px; }
body.phone .modal .opt{ width:100%; padding:10px 12px 14px; border-radius:12px; }
body.phone .modal .opt small{ font-size:14px; min-width:92px; }
body.phone .modal .opt .meld{ padding:0; }
body.phone.chat-open .scrim.soft{ right:0; }
body.phone.land .scrim{ align-items:center; justify-content:center; padding:8px; }
body.phone.land .modal{ width:min(560px, 80%); max-height:92%; border:var(--panel-border); border-radius:18px; padding-bottom:18px; }
.mrow-end{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.rzbig{ display:grid; gap:6px; }
.rzbig h4{ margin:0; display:flex; gap:6px; align-items:center; font:700 13px/1 var(--f-body); }
body.phone .rzbig .melds{ display:flex; flex-wrap:wrap; gap:16px 12px; background:var(--felt); border-radius:12px; padding:18px 10px 10px; }
body.phone .rzbig .nomelds{ color:#fff; }
body.phone .toast{ top:40%; padding:10px 16px; font-size:14.5px; box-shadow:4px 4px 0 var(--a4); width:max-content; max-width:84%; }
body.phone .toast.big{ font:700 34px/1.05 var(--f-display); text-shadow:3px 3px 0 var(--a4); box-shadow:none; }
body.phone table.sc{ font-size:13px; }
body.phone table.sc th, body.phone table.sc td{ padding:6px 5px; }
body.phone table.sc thead th{ font-size:11px; letter-spacing:.03em; text-transform:none; vertical-align:bottom; }
body.phone table.sc tr.tot td{ font-size:19px; }
body.phone .modal .warn, body.phone .modal .tie{ font-size:14px; }

/* Chat a pantalla completa (el teclado no deja lugar para la mesa). */
body.phone .chat{ position:fixed; left:0; right:0; top:var(--vvt, 0px); height:var(--vvh, 100%); width:auto; z-index:45; border:0;
  padding:var(--sat) var(--sar) var(--sab) var(--sal); }
body.phone .chat header{ font:700 19px/1.15 var(--f-display); padding:10px 14px; }
body.phone .msgs .msg > span{ max-width:85%; border-radius:12px; }
body.phone .chat form{ padding:10px 12px 12px; }
body.phone .chat input{ font-size:16px; padding:10px 12px; }
body.phone.land .chat{ left:auto; width:min(420px, 60%); border-left:var(--panel-border); }

/* ---------- Portada y sala de espera ---------- */
body.phone .front{ overflow-x:hidden; overflow-y:auto; padding:calc(var(--sat) + 22px) calc(var(--sar) + 18px) calc(var(--sab) + 24px) calc(var(--sal) + 18px); display:grid; grid-template-rows:none; gap:12px; align-content:start; }
body.phone .hero{ gap:4px; }
body.phone .hero h1{ font-size:44px; text-shadow:4px 4px 0 var(--a4); }
body.phone .hero p{ font-size:14.5px; }
body.phone .panelc{ box-shadow:5px 5px 0 var(--ink); padding:14px 14px 16px; gap:11px; }
.tabs2{ display:grid; grid-template-columns:1fr 1fr; border:var(--btn-border); border-radius:var(--btn-radius); overflow:hidden; }
.tabs2 button{ border:0; padding:9px; font-weight:700; background:var(--surface-2); color:var(--ink); }
.tabs2 button[aria-pressed="true"]{ background:var(--btn-on-bg); color:var(--btn-on-ink); }
body.phone .field{ font-size:13px; }
body.phone .field input.code{ font-size:24px; }
body.phone .modes{ grid-template-columns:1fr 1fr; gap:7px; }
body.phone .modes button{ padding:9px 6px; gap:5px; }
body.phone .stylepick{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; padding:2px 0 4px; }
body.phone .thumb{ width:auto; min-width:0; border-radius:10px; padding:4px 3px; gap:3px; font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.phone .thumb .pv{ height:36px; }
body.phone .thumb .pv .felt{ inset:5px 5px; }
body.phone .thumb .pv .c1, body.phone .thumb .pv .c2{ width:13px; height:19px; border-radius:3px; bottom:7px; box-shadow:none; }
body.phone .thumb .pv .c1{ left:22%; }
body.phone .styles .h3{ text-align:center; }
body.phone .ferr{ font-size:14px; }
body.phone .wait{ gap:14px; }
body.phone .bigcode{ font-size:56px; letter-spacing:.14em; border-radius:16px; padding:12px 18px 8px; box-shadow:6px 6px 0 var(--a4); }
body.phone .wait .row{ flex-direction:column; width:100%; }
body.phone .wait .row .btn{ width:100%; }
body.phone .wait .row .chip{ display:none; }
body.phone .seats{ grid-template-columns:1fr 1fr !important; gap:8px; width:100%; }
body.phone .slot{ padding:9px 10px; gap:8px; font-size:14px; border-radius:12px; min-width:0; overflow-wrap:anywhere; }
body.phone.land .front{ padding:calc(var(--sat) + 14px) calc(var(--sar) + 20px) calc(var(--sab) + 14px) calc(var(--sal) + 20px); }
body.phone.land .front.mfront{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"hero form" "last form" "styles form"; column-gap:18px; align-content:center; }
body.phone.land .mfront .hero{ grid-area:hero; align-self:end; }
body.phone.land .mfront .panelc{ grid-area:form; align-self:center; gap:8px; padding:12px; }
body.phone.land .mfront .golast{ grid-area:last; }
body.phone.land .mfront .ferr{ grid-column:1/-1; }
body.phone.land .mfront .styles{ grid-area:styles; }
body.phone.land .modes button{ padding:6px; }