.tmain{max-width:760px}
#board{background:url(/marca-pano.svg) center 44%/230px no-repeat,var(--felt);color:#fff;border:0;border-radius:16px;padding:16px;overflow:visible}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:#cfeee0;margin-bottom:10px}
.scores{display:flex;gap:8px}
.scores div{background:var(--felt-d);border-radius:8px;padding:4px 14px;text-align:center;color:#fff;min-width:64px}
.scores b{display:block;font-size:22px;font-weight:600;line-height:1.1}
.scores span{font-size:11px;color:#cfeee0}
.seatline{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:#cfeee0;margin:6px 0}
.av{width:30px;height:30px;border-radius:50%;background:var(--felt-d);border:2px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff}
.mano{background:#faeeda;color:#633806;font-size:11px;padding:1px 8px;border-radius:6px}
.mano:empty{display:none}
.hand{display:flex;gap:10px;justify-content:center;min-height:124px}
.hand.top{min-height:78px;gap:6px}
#youHand .card.playable{cursor:pointer;transition:transform .18s}
#youHand .card.playable:hover{transform:translateY(-14px) rotate(-2deg)}
#youHand .card.dim{opacity:.55}
.mid{position:relative;margin:12px 0;border:1.5px dashed rgba(255,255,255,.35);border-radius:14px;padding:12px 8px;display:flex;flex-direction:column;gap:10px;min-height:290px;justify-content:center}
.lane{display:grid;grid-template-columns:repeat(3,78px);gap:14px;justify-content:center;min-height:120px}
.slot{width:78px;height:120px;border:1px dashed rgba(255,255,255,.22);border-radius:8px;position:relative}
.slot .card.new{animation:drop .35s ease-out}
.slot.win .card{box-shadow:0 0 0 3px #f3c969,0 2px 0 rgba(0,0,0,.25)}
.slot.tie .card{opacity:.85}
@keyframes drop{from{transform:translateY(-70px) scale(1.25) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
.bubble{position:absolute;left:50%;transform:translateX(-50%);background:#faeeda;color:#633806;padding:6px 16px;border-radius:18px;font-weight:600;font-size:20px;display:none;z-index:4;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.bubble.bot{top:-14px}.bubble.you{bottom:-14px}
.bubble.on{display:block;animation:pop .3s ease-out}
@keyframes pop{from{transform:translateX(-50%) scale(.3);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0b2a1b;color:#fff;border:2px solid #f3c969;padding:12px 22px;border-radius:12px;text-align:center;z-index:5;display:none;font-size:15px;line-height:1.4;max-width:90%}
.banner.on{display:block;animation:pop2 .3s ease-out}
.banner b{color:#f3c969;font-size:18px}
@keyframes pop2{from{transform:translate(-50%,-50%) scale(.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.status{text-align:center;font-size:15px;margin:10px 0 6px;min-height:22px}
.acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:44px}
.acts button{border:0;border-radius:8px;padding:10px 16px;font:inherit;font-size:14px;cursor:pointer;background:#faeeda;color:#633806;font-weight:500}
.acts button:hover{filter:brightness(.93)}
.acts button.q{background:#d6f5e4;color:#0d5a30}
.acts button.nq{background:#fcebeb;color:#791f1f}
.acts button.mz{background:transparent;color:#ffc9c9;border:1px solid rgba(255,255,255,.3)}
.log{text-align:center;font-size:13px;color:#cfeee0;margin-top:10px;min-height:20px}
.endcard{text-align:center}
.endcard h2{margin-bottom:8px}
.endcard p{color:var(--mut);margin:0 0 14px}
@media(max-width:520px){.lane{grid-template-columns:repeat(3,60px);gap:8px}.slot,.card{width:60px;height:92px}.card.sm{width:44px;height:67px}.hand{gap:6px}}
#board{position:relative}
.endlay{position:absolute;inset:0;background:rgba(0,0,0,.6);border-radius:16px;display:flex;align-items:center;justify-content:center;z-index:8}
.endcard2{background:var(--card,#fff);color:var(--ink,#222);padding:22px 30px;border-radius:12px;text-align:center;max-width:90%}
.endcard2 h2{margin-bottom:6px;font-size:22px}
.endcard2 p{margin:0 0 14px;color:var(--mut,#666)}

/* ---- mesa para 1v1, 2v2 y 3v3 ---- */
.mid{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"top top top" "left center right" "bot bot bot";gap:10px 12px;min-height:0;padding:14px 10px;justify-content:stretch}
.rowtop{grid-area:top;display:flex;justify-content:center}
.colL{grid-area:left}
.colR{grid-area:right}
.rowbot{grid-area:bot;display:flex;justify-content:center}
.col{display:flex;flex-direction:column;gap:14px;justify-content:center;align-items:center}
.col:empty{display:none}
.pseat{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}
.pseat .seatline{margin:0;font-size:12px}
.pseat .backs{display:flex;gap:4px;min-height:40px;justify-content:center}
.pseat:not(.side):not(.me) .backs{min-height:76px}
.pseat .lane{margin:0}
.pseat .bubble{top:-18px;z-index:6}
.pseat.me .bubble{top:auto;bottom:-18px}
.pseat.side .lane{grid-template-columns:repeat(3,50px);gap:5px;min-height:76px}
.pseat.side .slot,.pseat.side .card{width:50px;height:76px}
.pseat.turn .av{border-color:#f3c969;box-shadow:0 0 0 2px rgba(243,201,105,.5)}
.pseat.mate .av{border-color:#9fe1cb}
.pseat.mate .nm::after{content:" · tu equipo";color:#9fe1cb;font-size:11px}
.mid.teams{min-height:330px}
@media(max-width:620px){.pseat.side .lane{grid-template-columns:repeat(3,36px)}.pseat.side .slot,.pseat.side .card{width:36px;height:55px}.pseat .backs .card.xs{width:20px;height:31px}.mid{gap:8px 6px}}

/* ---- celular: mesa más compacta ---- */
@media(max-width:520px){
  #board{padding:10px}
  .mid{padding:8px 4px;gap:6px}
  .mid.teams .rowtop .lane{grid-template-columns:repeat(3,44px);gap:5px;min-height:67px}
  .mid.teams .rowtop .slot,.mid.teams .rowtop .card{width:44px;height:67px}
  .mid.teams .pseat .backs .card.sm{width:34px;height:52px}
  .mid.teams .rowbot .lane{grid-template-columns:repeat(3,52px);gap:6px;min-height:80px}
  .mid.teams .rowbot .slot,.mid.teams .rowbot .card{width:52px;height:80px}
  .pseat .seatline{font-size:11px;gap:4px}
  .pseat .av{width:24px;height:24px;font-size:9px}
  .pseat.mate .nm::after{content:""}
  .hand{min-height:96px;gap:4px}
  #youHand .card{width:60px;height:92px}
  .acts{gap:6px}
  .acts button{padding:8px 12px;font-size:13px}
  .scores div{min-width:52px;padding:3px 8px}
  .scores b{font-size:18px}
  .banner{font-size:13px;padding:8px 12px}
}
.acts button.florbtn{background:#f3c969;color:#4a3405}

/* celular: que el Truco entre en una pantalla (mano y botones sin tener que bajar) */
@media(max-width:520px){
  .mid,.mid.teams{min-height:0;margin:6px 0;gap:4px 4px;padding:6px 4px}
  .mid.teams .rowtop .lane{grid-template-columns:repeat(3,38px);gap:4px;min-height:58px}
  .mid.teams .rowtop .slot,.mid.teams .rowtop .card{width:38px;height:58px}
  .mid.teams .rowbot .lane{grid-template-columns:repeat(3,44px);gap:5px;min-height:67px}
  .mid.teams .rowbot .slot,.mid.teams .rowbot .card{width:44px;height:67px}
  .pseat.side .lane{grid-template-columns:repeat(3,30px);gap:3px}
  .pseat.side .slot,.pseat.side .card{width:30px;height:46px}
  .pseat .backs .card.xs{width:16px;height:25px}
  .mid.teams .pseat .backs .card.sm{width:28px;height:43px}
  .hand{min-height:80px}
  #youHand .card{width:54px;height:83px}
  #board{padding:8px}
  .scores div{padding:2px 6px}
}