:root { --fg:#fff; --muted:rgba(255,255,255,.75); --chip:rgba(0,0,0,.35); }
body { font-family: system-ui, -apple-system, Arial; margin:0; background:#0b1020; color:var(--fg); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 18px; }
header h1 { margin:0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.big { font-size: 22px; font-weight: 800; margin-top: 8px; }

.panel { border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px; background: rgba(255,255,255,.04); }
.row { display:flex; gap:10px; flex-wrap: wrap; align-items:center; }
.grow { flex: 1; min-width: 260px; }
.gap { gap:14px; }

input { padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color:#fff; }
button { padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color:#fff; cursor:pointer; }

.tabletop{
  margin-top:16px;
  background: radial-gradient(circle at top, rgba(255,255,255,0.08), rgba(0,0,0,0.2)),
              linear-gradient(135deg, #0b4d2a, #06351d);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.hud { display:flex; gap:12px; flex-wrap: wrap; align-items:stretch; }
.chip{
  background: var(--chip);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 10px 12px;
  border-radius: 12px;
  min-width: 180px;
}
.money { font-weight: 800; }
.pot { font-weight: 900; font-size: 22px; }

.dropzone{
  margin-top:8px;
  padding:14px;
  border-radius:12px;
  border:2px dashed rgba(255,255,255,0.35);
  text-align:center;
}
.cards{ display:flex; gap:8px; flex-wrap: wrap; margin-top:10px; }
.card{
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  padding:8px 10px;
  background: rgba(0,0,0,.25);
  user-select:none;
  cursor:pointer;
}
.card.sel{ outline: 3px solid rgba(255,255,255,.7); }
hr { border: none; border-top:1px solid rgba(255,255,255,.15); margin:10px 0; }


/* Playing card look */
.cards { align-items: flex-start; }

.pcard{
  width: 64px;
  height: 92px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,245,245,0.95));
  color: #111;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 2px;
}

.pcard.red { color:#b4002a; }
.pcard.black { color:#111; }

.pcard .corner{
  position:absolute;
  top:6px;
  left:6px;
  font-weight: 900;
  font-size: 13px;
  line-height: 12px;
  text-align:left;
}
.pcard .corner.bottom{
  top:auto;
  left:auto;
  bottom:6px;
  right:6px;
  transform: rotate(180deg);
}
.pcard .center{
  font-size: 26px;
  font-weight: 900;
  opacity: 0.95;
}
.pcard .joker{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pcard.sel{
  transform: translateY(-6px);
  outline: 3px solid rgba(255,255,255,0.75);
}

.planner .planned{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.meldRow{
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 8px;
  background: rgba(0,0,0,0.20);
}
.meldRow .meldHdr{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.meldRow .meldCards{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.meldRow button{
  padding:6px 10px;
}


/* Square 4-player table layout */
.tablegrid{
  position: relative;
  min-height: 640px;
}
.seat{
  position:absolute;
  width: 240px;
  min-height: 90px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 10px 12px;
}
.seat .name{ font-weight: 900; }
.seat .meta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.seat .badge{ font-size: 12px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.2); }
.badge.turn{ background: rgba(255,255,255,0.12); }
.badge.down{ background: rgba(0,255,160,0.10); }

.seat-top{ left: 50%; transform: translateX(-50%); top: 10px; }
.seat-left{ left: 10px; top: 50%; transform: translateY(-50%); }
.seat-right{ right: 10px; top: 50%; transform: translateY(-50%); }
.seat-bottom{ left: 50%; transform: translateX(-50%); bottom: 170px; }

.center{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-55%);
  width: min(720px, 92%);
}
.centerRow{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.pile{
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 170px;
  text-align:center;
}
.pile .label{ color: rgba(255,255,255,0.75); font-size: 12px; }
.deckBack{
  width: 64px; height: 92px; border-radius: 10px;
  margin: 8px auto;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.15), rgba(0,0,0,0.2)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 6px, rgba(0,0,0,0.0) 6px 12px),
    #b40433;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.btnSmall{ padding:8px 10px; border-radius:10px; }

.burnCard{ margin: 8px auto; }
.tableMelds{ margin-top: 10px; }

.bottomPanels{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display:grid;
  grid-template-columns: 2fr 1.6fr 1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .tablegrid{ min-height: 920px; }
  .seat-bottom{ bottom: 310px; }
  .bottomPanels{ grid-template-columns: 1fr; }
  .center{ transform: translate(-50%,-35%); }
}

/* Lock cards that are already in the plan */
.pcard.used{
  opacity: 0.55;
  filter: grayscale(0.35);
  cursor: not-allowed;
}


/* ===== Major UI v5 ===== */
.tablegrid3{
  display:grid;
  grid-template-columns: 260px 1fr 260px;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 14px;
  min-height: 860px;
}

.seat{
  position: static !important;
  transform: none !important;
  width: auto !important;
  min-height: 90px;
}

.seat-top{ grid-column: 1 / 4; }
.seat-left{ grid-column: 1 / 2; grid-row: 2; }
.center3{ grid-column: 2 / 3; grid-row: 2; }
.seat-right{ grid-column: 3 / 4; grid-row: 2; }

.center3 .centerRow{
  display:flex;
  gap: 14px;
  justify-content:center;
  flex-wrap:wrap;
}

.bottomWrap3{
  grid-column: 1 / 4;
  grid-row: 3;
  display:grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  align-items:start;
}

.handArea{ min-width: 0; } /* allow overflow scroll */
.uploadPanel{ height: fit-content; }

.meldStrip{
  display:flex;
  gap: 12px;
  overflow-x:auto;
  padding: 10px 2px;
}
.meldGroup{
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 10px;
}
.meldGroup .hdr{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.meldCardsFan{
  display:flex;
  align-items:center;
  gap:0;
}
.meldCardsFan .pcard{
  width: 48px;
  height: 70px;
  border-radius: 9px;
  margin-left: -18px;
}
.meldCardsFan .pcard:first-child{ margin-left: 0; }

.handFanWrap{
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
  border-radius: 16px;
  padding: 12px;
}

.handFan{
  display:flex;
  align-items:flex-end;
  overflow-x:auto;
  padding: 8px 6px 14px;
  min-height: 116px;
}
.handFan .pcard{
  width: 74px;
  height: 110px;
  margin-left: -22px;
}
.handFan .pcard:first-child{ margin-left: 0; }
.handFan .pcard.sel{ transform: translateY(-10px); }
.handFan .pcard.dragging{ opacity: 0.35; }

.actionBar{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap:wrap;
}
.actionBar button{ min-width: 140px; }
button.primary{ background: rgba(255,255,255,0.14); }
button.secondary{ background: rgba(0,0,0,0.22); }
button.ghost{ background: transparent; border: 1px solid rgba(255,255,255,0.18); }

@media (max-width: 1100px){
  .tablegrid3{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    min-height: 980px;
  }
  .seat-top{ grid-column: 1; }
  .seat-left{ grid-column: 1; grid-row: 2; }
  .center3{ grid-column: 1; grid-row: 3; }
  .seat-right{ grid-column: 1; grid-row: 4; }
  .bottomWrap3{
    grid-column: 1;
    grid-row: 5;
    grid-template-columns: 1fr;
  }
  .handFan .pcard{ margin-left: -18px; width: 70px; height: 104px; }
  .actionBar button{ min-width: 120px; }
}

/* v5 header */
.topbar{max-width:1100px;margin:22px auto 0;padding:0 14px;}
.topbar .title h1{margin:0 0 10px;font-size:34px;letter-spacing:0.2px;}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.18);}
.controls input{min-width:160px}
.status{max-width:1100px;margin:10px auto 0;padding:0 14px;color:rgba(255,255,255,0.85);}

/* v56: keep hand spread on large monitors */
.tabletop { max-width: 1400px; } /* allow more space */
.bottomWrap3 { display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; }
.bottomWrap3 .handArea { flex: 1 1 900px; min-width: 700px; }
.bottomWrap3 .uploadPanel { flex: 0 0 260px; }
@media (max-width: 980px){
  .bottomWrap3 .handArea { min-width: 0; flex: 1 1 100%; }
  .bottomWrap3 .uploadPanel { flex: 1 1 100%; }
}

/* Hand fan uses dynamic step set by JS */
.handFan { --fanStep: 42px; display:flex; justify-content:center; align-items:flex-end; flex-wrap:nowrap; overflow:visible; padding: 6px 12px 12px; }
.handFan .pcard { margin-left: calc(-1 * (var(--cardW, 78px) - var(--fanStep))); }
.handFan .pcard:first-child { margin-left: 0; }

/* v57: opponent card backs */
.seat{position:relative;}
.oppHandMini{margin-top:10px; display:flex; align-items:center; gap:10px;}
.oppHandMini .backs{position:relative; height:42px; width:140px;}
.cardBackMini{
  position:absolute;
  width:30px; height:42px;
  border-radius:6px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 3px, rgba(0,0,0,0.0) 3px 8px),
    linear-gradient(180deg, #b11b3a, #7f0f26);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  left: calc(var(--i) * 8px);
  top: 0;
  border: 1px solid rgba(255,255,255,0.15);
}
.countBadge{
  min-width:34px;
  text-align:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.92);
  font-size:12px;
  font-weight:700;
}
.oppHandMini .more{
  position:absolute;
  right:-10px;
  top: 10px;
  padding:2px 6px;
  border-radius:8px;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.14);
  font-size:11px;
}

/* v64: selectable table melds */
.meldGroup{cursor:pointer; user-select:none;}
.meldGroup.selected{outline:2px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.06);}
.meldGroup .owner{margin-bottom:6px;}

/* Burn UX */
.burnBanner{
  max-width:1100px;
  margin:10px auto;
  padding:10px 14px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(177,27,58,.28),rgba(127,15,38,.28));
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-weight:600;
  text-align:center;
}

.pcard.mustUseBurn{
  outline:3px solid rgba(255,200,200,.95);
  box-shadow:0 0 18px rgba(255,80,80,.75);
}