/* Escoba, Chinchón y Uno: tablero común */
.gboard{position:relative;background:url(/marca-pano.svg) center 44%/230px no-repeat,var(--felt);color:#fff;border-radius:16px;padding:16px;font-family:var(--font-sans,system-ui)}
.gboard .topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:#cfeee0;margin-bottom:10px}
.gboard .scorechips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--felt-d);border-radius:8px;padding:4px 12px;text-align:center;min-width:64px;color:#fff}
.chip b{display:block;font-size:20px;font-weight:600;line-height:1.1}
.chip span{font-size:11px;color:#cfeee0}
.chip.me{outline:2px solid rgba(243,201,105,.7)}
.chip.out{opacity:.5}
.oppRow{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:6px 0 10px}
.oseat{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 12px;border-radius:10px;border:2px solid transparent;position:relative}
.oseat.turn{border-color:#f3c969}
.oseat.mate .av{border-color:#9fe1cb}
.oseat.outseat{opacity:.45}
.oseat .seatline{margin:0;font-size:12px}
.oseat .backs{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;max-width:220px;min-height:40px}
.oseat .ocount{display:flex;align-items:center;gap:6px}
.oseat .ocount b{font-size:20px}
.tablezone{position:relative;margin:8px 0 14px;padding:14px 10px;border:1.5px dashed rgba(255,255,255,.35);border-radius:14px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.tmeta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:12px;color:#cfeee0}
.tcards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:124px;padding:6px 4px}
.tcards .card.new{animation:drop .35s ease-out}
.tcards .card.pick,.hand .card.playable,.chhand .card.playable{cursor:pointer}
.tcards .card.sel,.hand .card.sel,.chhand .card.sel{outline:3px solid #f3c969;outline-offset:2px;transform:translateY(-8px)}
.hand .card.playable:hover{transform:translateY(-10px)}
.piles{display:flex;gap:34px;justify-content:center;align-items:flex-end}
.pile{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:10px;padding:6px}
.pile.pick{cursor:pointer;outline:2px dashed #f3c969;outline-offset:2px}
.pile.pick:hover{background:rgba(255,255,255,.08)}
.plabel{font-size:12px;color:#cfeee0}
.pcount{font-size:12px;color:#cfeee0}
.handinfo{text-align:center;font-size:12px;color:#cfeee0;min-height:16px;margin-top:4px}

/* mano del Chinchón: agrupada por combinaciones */
.chhand{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;min-height:124px}
.chhand .grp{display:flex;padding:4px 6px;border-radius:10px}
.chhand .grp.meld{background:rgba(243,201,105,.18);outline:1px solid rgba(243,201,105,.55)}
.chhand .grp .card{margin-left:-6px}
.chhand .grp .card:first-child{margin-left:0}
.chhand .card.playable:hover{transform:translateY(-10px)}
.chhand .card.fresh{box-shadow:0 0 0 3px #9fe1cb}
.chhand .card.closer{outline:2px dashed #9fe1cb;outline-offset:1px}

/* recuentos */
.endcard2.wide{max-width:96%;width:640px;max-height:92%;overflow:auto}
.rtab{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:6px}
.rtab th,.rtab td{padding:5px 8px;text-align:center;border-bottom:1px solid var(--line,#ddd)}
.rtab td:first-child,.rtab th:first-child{text-align:left}
.rtab tr.rtot td{font-weight:600}
.pt{color:#0f5132}
.hint{font-size:12px;color:var(--mut,#777);margin:8px 0 0}
.rrow{display:grid;grid-template-columns:110px 1fr 70px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line,#ddd);text-align:left}
.rrow.closer{background:rgba(27,122,77,.1)}
.rname{display:flex;flex-direction:column;font-size:13px}
.rname span{color:var(--mut,#777);font-size:12px}
.rcards{display:flex;gap:8px;flex-wrap:wrap}
.rcards .grp{display:flex;padding:2px 3px;border-radius:6px}
.rcards .grp.meld{background:rgba(27,122,77,.18)}
.rcards .grp .card{margin-left:-8px}
.rcards .grp .card:first-child{margin-left:0}
.rpts{text-align:right;font-weight:600;font-size:18px}
.rpts small{display:block;font-weight:400;font-size:11px;color:var(--mut,#777)}

/* ===== Uno ===== */
.ucard{width:70px;height:104px;border-radius:10px;border:3px solid var(--u-edge,#fff);position:relative;flex:none;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.3);user-select:none}
.ucard.red{background:var(--u-red,#d63a2f)}.ucard.yellow{background:var(--u-yellow,#f0b81d)}.ucard.green{background:var(--u-green,#2f9e4f)}.ucard.blue{background:var(--u-blue,#2a6fd1)}
.ucard.wild{background:var(--u-wild,#1c1c1e)}
.ucard.back{background:var(--u-back,#222);border-color:var(--u-edge,rgba(255,255,255,.7))}
.ucard .uoval{position:absolute;left:50%;top:50%;width:84%;height:62%;transform:translate(-50%,-50%) rotate(-24deg);background:var(--u-oval,#fff);border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ucard .uoval b{transform:rotate(24deg);font-size:30px;font-weight:800;line-height:1}
.ucard.red .uoval b{color:var(--u-oval-text,var(--u-red,#d63a2f))}.ucard.yellow .uoval b{color:var(--u-oval-text,var(--u-yellow,#d99d00))}.ucard.green .uoval b{color:var(--u-oval-text,var(--u-green,#2f9e4f))}.ucard.blue .uoval b{color:var(--u-oval-text,var(--u-blue,#2a6fd1))}
.ucard.wild .uoval b.w4{position:absolute;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;font-size:26px;z-index:2}
.ucard.back .uoval{background:var(--u-backoval,#d63a2f)}
.ucard.back .uoval b{color:var(--u-backtext,#ffd23a);font-size:22px;letter-spacing:1px}
.ucard .uc{position:absolute;font-size:13px;font-weight:700;line-height:1}
.ucard .uc.a{top:5px;left:7px}
.ucard .uc.b{bottom:5px;right:7px;transform:rotate(180deg)}
.ucard.back .uc{display:none}
.ucard .quad{position:absolute;inset:0;transform:rotate(24deg);display:grid;grid-template:1fr 1fr/1fr 1fr}
.ucard .quad i:nth-child(1){background:var(--u-red,#d63a2f)}.ucard .quad i:nth-child(2){background:var(--u-blue,#2a6fd1)}.ucard .quad i:nth-child(3){background:var(--u-yellow,#f0b81d)}.ucard .quad i:nth-child(4){background:var(--u-green,#2f9e4f)}
.ucard.mini{width:26px;height:38px;border-width:2px;border-radius:5px}
.ucard.mini .uoval b{font-size:8px}
.uhand{display:flex;justify-content:center;flex-wrap:wrap;gap:0;min-height:110px;padding:6px 0}
.uhand .ucard{margin:0 -8px}
.uhand .ucard.playable{cursor:pointer;transition:transform .15s}
.uhand .ucard.playable:hover{transform:translateY(-14px);z-index:3}
.uhand .ucard.dim{opacity:.55}
.uhand .ucard.fresh{box-shadow:0 0 0 3px #9fe1cb}
.unotable .topwrap{min-height:104px}
.curcolor{font-size:12px;color:#cfeee0;display:flex;align-items:center;gap:6px}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #fff}
.dot.red{background:var(--u-red,#d63a2f)}.dot.yellow{background:var(--u-yellow,#f0b81d)}.dot.green{background:var(--u-green,#2f9e4f)}.dot.blue{background:var(--u-blue,#2a6fd1)}
.dirinfo{font-size:13px}
.acts button.colorbtn{color:#fff;font-weight:600}
.acts button.colorbtn.red{background:var(--u-red,#d63a2f)}.acts button.colorbtn.yellow{background:var(--u-yellow,#e0a800);color:#2a1c00}.acts button.colorbtn.green{background:var(--u-green,#2f9e4f)}.acts button.colorbtn.blue{background:var(--u-blue,#2a6fd1)}
.acts button:disabled{opacity:.45;cursor:not-allowed}

@media(max-width:620px){
  .gboard{padding:10px}
  .piles{gap:16px}
  .tcards{gap:6px}
  .gboard .card{width:60px;height:92px}
  .gboard .card.sm{width:44px;height:67px}
  .gboard .card.xs{width:20px;height:31px}
  .chhand .grp .card{margin-left:-30px}
  .ucard{width:56px;height:84px}
  .ucard .uoval b{font-size:24px}
  .uhand .ucard{margin:0 -10px}
  .rrow{grid-template-columns:80px 1fr 56px}
}

/* ---- celular: los rivales van en una sola fila ---- */
@media(max-width:520px){
  .oppRow{gap:4px;flex-wrap:nowrap;margin:4px 0 8px}
  .oseat{flex:1 1 0;min-width:0;padding:4px 3px}
  .oseat .seatline{flex-wrap:wrap;justify-content:center;gap:2px;font-size:11px}
  .oseat .av{display:none}
  .oseat .nm{text-align:center;line-height:1.2}
  .oseat .backs{max-width:100%}
  .oseat .mano{font-size:10px;padding:0 5px}
  .tcards{min-height:96px}
  .tmeta{flex-direction:column;gap:2px;align-items:center;text-align:center}
  .tablezone{padding:10px 4px}
  .scorechips{gap:4px}
  .chip{min-width:48px;padding:3px 6px}
}
@media(max-width:520px){.oseat .mt{display:none}}
.oseat .mt{color:#9fe1cb;font-size:11px}