.hidden { display:none !important; }
#sheet.hidden { pointer-events:none; }

/* Hide the old global chat button (top-right bubble) */
#btnChat{
  display:none !important;
}

:root{
  --bg:#0c1b16;
  --panel:rgba(255,255,255,.08);
  --text:#f2f6f5;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#070e08;
  color:var(--text);
}
body.screen-table{
  overflow-y:hidden;
}
button,input{font:inherit}

.topbar{max-width:1100px;margin:0 auto;padding:12px 12px 0;}
#view{padding:12px 12px 18px; max-width: 1100px; margin: 0 auto;}
body.screen-table .topbar{
  display:none;
}
body.screen-table #view{
  padding-top:8px;
  padding-bottom:6px;
}

/* Table */
.tableWrap{
  position:relative;
  width:100%;
  aspect-ratio: 16/10;
  min-height: 560px;
  border-radius: 22px;
  background:
    radial-gradient(900px 420px at 50% 50%, rgba(255,255,255,08), rgba(255,255,255,02) 60%, rgba(0,0,0,05)),
    linear-gradient(180deg, rgba(0,0,0,10), rgba(0,0,0,24));
  border:1px solid rgba(255,255,255,10);
  overflow:hidden;
  box-shadow: var(--shadow);
}
/* Shorter windows: shave the table min-height to remove tiny scroll
   without touching fullscreen layout. */
@media (max-height: 900px){
  body.screen-table .tableWrap{
    min-height: 520px;
  }
}
.iconBtn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.10);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  box-shadow:var(--shadow);
  font-size:16px;
  transition:background .15s, transform .1s, box-shadow .15s;
}

.iconBtn:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(0,0,0,.35);
}

.iconBtn:active{
  background:rgba(255,255,255,.26);
  transform:translateY(0);
  box-shadow:0 8px 16px rgba(0,0,0,.30);
}

.panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
}

.row{display:flex; align-items:center; gap:10px}
.row .spacer{flex:1}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.85);
  font-size:13px;
}
.homeHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.homeLogo{
  display:flex;
  align-items:center;
  gap:10px;
}

.homeLogoIcon{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.32);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  box-shadow:var(--shadow);
  background:rgba(0,0,0,.35);
}

.homeLogoTitle{
  font-size:22px;
  font-weight:700;
}

.homeLogoSubtitle{
  font-size:13px;
  color:var(--muted2);
}

.homeMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.homeLogoContainer{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 14px 0 6px 0;
}

.homeLogoMain{
  width: 72%;
  max-width: 600px;
  height:auto;
  image-rendering: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

.btn{
  background:rgba(255,255,255,.10);
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}
.btn.primary{
  background:rgba(56,211,159,.18);
  border-color:rgba(56,211,159,.35);
}
.btn:disabled{opacity:.45; cursor:not-allowed}

.input{
  background:rgba(0,0,0,.25);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}


.settingsRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.settingsLabel{
  min-width:160px;
  color:rgba(255,255,255,.85);
  font-size:13px;
}
.rangeInput{
  width:min(420px, 100%);
}
.settingsValue{
  color:rgba(255,255,255,.85);
  font-size:13px;
}

#sheet{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
  z-index:9999;
}
.sheetPanel{
  position:absolute;
  left:12px;
  top:12px;
  bottom:12px;
  width:min(320px,92%);
  overflow:auto;
}

/* Table */
.tableWrap{
  position:relative;
  width:100%;
  aspect-ratio: 16/10;
  min-height: 560px;
  border-radius: 22px;
  background:
    radial-gradient(900px 420px at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,.02) 60%, rgba(0,0,0,.05)),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.24));
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  box-shadow: var(--shadow);
}

.suitIcon{font-size:16px; line-height:1; display:inline-block; transform:translateY(-1px);}
.suit-red{ color:#d22; }
.suit-black{ color:#111; }

.badge .suitIcon{
  font-size:22px;
}
/* Enlarge trump suit icon inside pill overlays */
.centerPanel.pillOverlayPanel .suitIcon{
  font-size:84px;
  line-height:1;
  transform:none;
}

/* WHITE glow for black suits */
.badge .suitIcon .suit-black{
  font-size:22px;
  text-shadow:
    /* crisp edge */
    -1px  0   0 rgba(255,255,255,1),
     1px  0   0 rgba(255,255,255,1),
     0   -1px 0 rgba(255,255,255,1),
     0    1px 0 rgba(255,255,255,1),

    /* glow ring */
    0 0 6px  rgba(255,255,255,.9),
    0 0 12px rgba(255,255,255,.75),
    0 0 20px rgba(255,255,255,.55);
}

/* BLACK glow for red suits */
.badge .suitIcon .suit-red{
  font-size:22px;
  text-shadow:
    /* crisp edge */
    -1px  0   0 rgba(0,0,0,1),
     1px  0   0 rgba(0,0,0,1),
     0   -1px 0 rgba(0,0,0,1),
     0    1px 0 rgba(0,0,0,1),

    /* glow ring */
    0 0 6px  rgba(0,0,0,.9),
    0 0 12px rgba(0,0,0,.75),
    0 0 20px rgba(0,0,0,.55);
}

/* Seats */
.seat{position:absolute; width:240px; max-width:30%;}
.seatBox{
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:10px;
}
.name{
  font-weight:800;
  font-size:14px;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sub{font-size:12px; color:var(--muted2); margin-top:2px}
.turnGlow{
  box-shadow: 0 0 0 3px rgba(255,255,255,.30), 0 0 34px rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28) !important;
  outline: 4px solid rgba(255,255,255,.95);
  outline-offset: 0;
}
.bossGlow{
  box-shadow: 0 0 0 3px rgba(56,211,159,.32), 0 0 38px rgba(56,211,159,.24);
  border-color: rgba(56,211,159,.45) !important;
  outline: 4px solid rgba(56,211,159,.95);
  outline-offset: 0;
}

/* seat placement */
.sTop{left:50%; top:14px; transform:translateX(-50%);}
.l1{left:14px; top:17%;}
.l2{left:14px; top:42%;}
.l3{left:14px; top:67%;}
.r1{right:14px; top:17%;}
.r2{right:14px; top:42%;}
.r3{right:14px; top:67%;}

/* mini hands */
.seatHand{position:relative; height:48px; margin-top:10px;}
.cardBackMini{
position:absolute;
width:27px;
height:42px;
border-radius:2px;
background:
/* top highlight */
linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0)),
/* diagonal lattice pattern */
repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.18) 0 4px, rgba(255,255,255,0) 4px 6px),
repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.18) 0 4px, rgba(255,255,255,0) 4px 6px),
/* base red fill */
linear-gradient(180deg, rgba(180,0,40,1), rgba(120,0,26,1));
border: 1px solid rgba(255,255,255,.46);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.35),
0 8px 14px rgba(0,0,0,.22);
transform-origin: 50% 100%;
}

/* center panel */
.centerPanel{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  min-width:280px;
  max-width:88%;
  padding:14px 16px;
  background:rgba(0,0,0,.82);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  text-align:center;
  box-shadow: 0 18px 34px rgba(0,0,0,.48);
}
.centerTitle{font-weight:900; font-size:18px}
.centerSub{margin-top:6px; color:var(--muted); font-size:13px}
/* Pill overlay panel tweaks */
.pillOverlayPanel{
  text-align:left;
}
.pillOverlayPanel .centerTitle{
  font-size:18px;
}
.pillOverlayPanel .scoreLine span{
  min-width:120px;
}
/* MAKE PILL OVERLAYS MUCH BIGGER FOR READABILITY */
.pillOverlayPanel{
  font-size:24px;
  line-height:1.4;
  padding:20px 26px;
}

.pillOverlayPanel .centerTitle{
  font-size:32px;
  font-weight:900;
  margin-bottom:16px;
}

.pillOverlayPanel .centerSub{
  font-size:20px;
  color:var(--muted);
  margin-bottom:20px;
}

.pillOverlayPanel .scoreSection{
  margin-bottom:26px;
}

.pillOverlayPanel .scoreLine{
  font-size:24px;
  margin:10px 0;
  align-items:center;      /* center children vertically in the row */
}

.pillOverlayPanel strong{
  font-size:28px;
  font-weight:900;
}

.pillOverlayPanel .scoreMuted{
  font-size:20px;
  opacity:.85;
}

.pillOverlayPanel button.btn{
  font-size:22px;
  padding:12px 0;
}
/* FIX: Make values big in pill overlays */
.pillOverlayPanel .scoreLine strong,
.pillOverlayPanel .scoreLine span strong,
.pillOverlayPanel .scoreLine span + strong,
.pillOverlayPanel strong {
  font-size:28px;
  font-weight:900;
}

.pillOverlayPanel .scoreLine span {
  font-size:24px;
  font-weight:700;
}

/* Scorecard polish */
.scoreCardPanel{ text-align:left; }
.scoreSection{ margin-top:12px; }
.scoreHeader{
  font-weight:900;
  font-size:15px;
  margin-bottom:8px;
  letter-spacing:.2px;
}
.scoreLine{
  display:flex;
  gap:10px;
  align-items:baseline;
  line-height:1.45;
  margin:2px 0;
}
.scoreLine span{ color: rgba(255,255,255,.80); min-width:110px; }
.scoreLine strong{ color: rgba(255,255,255,.96); font-weight:900; }
.scoreMuted{ color: rgba(255,255,255,.70); margin-left:6px; font-size:12.5px; }
.scoreBig strong{ font-size:15px; }

/* Make the trump suit icon big but let flex centering do the work */
.pillOverlayPanel .scoreLine strong .suit-red,
.pillOverlayPanel .scoreLine strong .suit-black{
  font-size:140px;
  line-height:1;
  display:inline-block;
  transform:none;
}

.pillOverlayPanel .scoreLine strong .suit-red,
.pillOverlayPanel .scoreLine strong .suit-black{
  vertical-align:baseline;
  line-height:0.9;
  transform:translateY(-2px);
}
/* Center the sleeping-hand cards in the Points Asleep section */
.pointsAsleepCards{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
  text-align:center;
}

/* bidding grid + PASS wide */
.bidGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;}
.bidBtn{
  padding:12px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.10);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
}
.bidBtn.passWide{
  grid-column:1 / 4;
  background:rgba(255,106,106,.16);
  border-color:rgba(255,106,106,.20);
}

/* Trump picker — mini playing cards */
.trumpPickRow{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
}
.trumpPickBtn{
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
}
.trumpPickBtn:disabled{opacity:.55; cursor:not-allowed}
.trumpCardFace{
  width:64px;
  height:82px;
  border-radius:14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 12px 22px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
}
.trumpSuit{
  font-weight:900;
  font-size:34px;
  line-height:1;
}

/* Trick zone (keep your “perfect” placement) */
.trickZoneCardy{
  position:absolute;
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  width:840px;
  height:395px;
  pointer-events:none;
}
.trickCardTile{ 
  position:absolute;
  width:100px;
  height:140px;
  border-radius:14px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 14px 24px rgba(0,0,0,.25);
  user-select:none;
  display:flex;
  overflow:hidden;
}

.trickCardTile.leadCard{
  outline: 4px solid rgba(255, 238, 0, 0.92);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 18px 28px rgba(0,0,0,.28);
}
.trickCardTile.bossCard{
  outline: 4px solid rgba(56,211,159,.95);
  box-shadow: 0 0 0 3px rgba(56,211,159,.22), 0 18px 28px rgba(0,0,0,.28);
}

/* trick slots */
.tBottom{ left:50%; top:71%; transform: translate(-50%,-50%) rotate(3deg); }
.tTop{ left:50%; top:25%; transform: translate(-50%,-50%) rotate(-4deg); }

.tLeftNear{ left:32%; top:64%; transform: translate(-50%,-50%) rotate(-10deg); }
.tLeftMid{ left:24%; top:50%; transform: translate(-50%,-50%) rotate(6deg); }
.tLeftFar{ left:32%; top:36%; transform: translate(-50%,-50%) rotate(-14deg); }

.tRightNear{ left:68%; top:64%; transform: translate(-50%,-50%) rotate(10deg); }
.tRightMid{ left:76%; top:50%; transform: translate(-50%,-50%) rotate(-6deg); }
.tRightFar{ left:68%; top:36%; transform: translate(-50%,-50%) rotate(14deg); }

/* your hand */
.handBar{
  position:absolute;
  left:50%;
  bottom:15px;
  transform:translateX(-50%);
  width: min(860px, 92%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.handFanBig{position:relative; width:100%; height:180px;}

/* ROOT FIX: center the button on its left: value */
.cardBtnBig{
  position:absolute;
  bottom:0;
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
  transform:translateX(-50%);
}
.cardBtnBig:disabled{opacity:1; filter:none; cursor:not-allowed;}
/* Container: table + side chat */
.tableLayout{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:16px;
  margin-top:12px;
}
body.screen-table .tableLayout{
  margin-top:8px;
}

/* Keep whatever other .tableWrap styles you already have.
   Just add these lines to that rule, don’t delete the existing ones. */
.tableWrap{
  flex:0 0 auto;   /* Table stays its natural width */
}

/* ---- Table chat panel ---- */
/* This is now just a side column, not overlaying the table */
.tableChatPanel{
  flex:0 0 260px;
  max-width: 28vw;
  background: rgba(4, 7, 15, 0.96);
  border-radius: 14px;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,0.06);
}

.tableChatHeader{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.tableChatTitle{
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:rgba(255,255,255,0.9);
}

.tableChatSub{
  font-size:11px;
  color:rgba(255,255,255,0.6);
}

.tableChatMessages{
  flex:1;
  overflow-y:auto;
  padding:4px 0;
  font-size:13px;
  line-height:1.35;
}

.tableChatMessages::-webkit-scrollbar{
  width:6px;
}
.tableChatMessages::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(255,255,255,0.2);
}

.chatEmptyHint{
  font-size:12px;
  color:rgba(255,255,255,0.55);
}

.tableChatInputRow{
  display:flex;
  gap:6px;
  margin-top:4px;
}

.tableChatInputRow .input{
  flex:1;
  min-width:0;
}
/* ---- Table viewport fit: keep table flush without vertical scroll ---- */
body.screen-table #view{
  /* Slightly tighter padding on the table screen so the table
     and chat can fit within the viewport height */
  padding-top: 8px;
  padding-bottom: 8px;
}

body.screen-table .tableLayout{
  /* Reduce the gap above the table+chat row */
  margin-top: 8px;
}

body.screen-table .tableWrap{
  /* Fill most of the viewport height, leaving room for header + padding */
  height: calc(100vh - 140px);
  min-height: 0;       /* override the base min-height so it can shrink */
}

/* Mobile: stack vertically (chat below table) */
@media (max-width: 900px){
  .tableLayout{
    flex-direction:column;
    align-items:stretch;
  }

  .tableChatPanel{
    max-width:none;
    width:auto;
  }
}

/* Mobile: turn chat into a bottom sheet instead of a side column */
@media (max-width: 768px){
  .tableChatPanel{
    left:4%;
    right:4%;
    width:auto;
    max-width:none;
    bottom:82px;    /* still leave space above your hand fan */
    top:auto;
  }
}
/* Desktop / large-screen table: let the game breathe without squishing chat */
@media (min-width: 1400px){
  /* Let the table+chat container get wider on the table screen only */
  body.screen-table #view{
    max-width: min(1500px, 100vw - 24px);
  }

  /* Let the table share space with chat instead of insisting on its "natural" width */
  body.screen-table .tableWrap{
    flex:1 1 auto;
    width:auto;
    max-height: calc(100vh - 140px);
  }


  /* Make sure the layout stretches both columns nicely */
  body.screen-table .tableLayout{
    align-items:stretch;
  }
}

/* Playing card face */
.cardFace{
  width:112px;
  height:160px;
  border-radius:14px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 14px 24px rgba(0,0,0,.25);
  user-select:none;
  transform-origin: 50% 100%;
  overflow:hidden;
}
.mySeatLabel{
  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.86);
  font-size:13px;
}
.myTurnGlow{
  box-shadow: 0 0 0 4px rgb(255, 255, 255), 0 0 30px rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22) !important;
}

/* pretty card */
.pc{
  position:relative;
  width:100%;
  height:100%;
  color:#111;
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(245,245,245,1));
}
.pcCorner{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-weight:900;
  line-height:1;
  letter-spacing:-0.5px;
}
.pcCorner .pcRank{font-size:16px}
.pcCorner .pcSuit{font-size:16px; margin-top:2px}
.pcCorner.tl{left:8px; top:8px}
.pcCorner.tr{right:8px; top:8px}
.pcCorner.bl{left:8px; bottom:8px; transform: rotate(180deg)}
.pcCorner.br{right:8px; bottom:8px; transform: rotate(180deg)}
.pcCenter{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-size:42px;
  font-weight:900;
  opacity:.85;
}

/* Joker polish */
.pcJoker .pcCenter{ display:none; }
.pcJokerCenter{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}
.pcJokerBadge{
  font-weight:900;
  font-size:20px;
  letter-spacing:.6px;
}
.pcJokerWord{
  margin-top:4px;
  font-weight:900;
  font-size:18px;
  letter-spacing:.4px;
  opacity:.90;
}

@media (max-width: 900px){
  .seat{width:220px;}
  .cardFace{width:104px; height:150px;}
  .trickZoneCardy{width:600px; height:420px;}
  .trumpCardFace{ width:60px; height:78px; }
  .trumpSuit{ font-size:32px; }
}
@media (max-width: 720px){
  .seat{width:200px;}
  .cardFace{width:96px; height:140px;}
  .trickZoneCardy{width:520px; height:380px;}
  .trumpCardFace{ width:56px; height:74px; }
  .trumpSuit{ font-size:30px; }
}


/* Rules (readability) */
.ruleText{ line-height:1.55; color:rgba(255,255,255,.88); }
.rulesDoc h3{
  margin:14px 0 8px 0;
  font-weight:900;
  font-size:16px;
  letter-spacing:.2px;
}
.rulesDoc h4{
  margin:12px 0 6px 0;
  font-weight:900;
  font-size:14px;
  color:rgba(255,255,255,.90);
}
.rulesP{
  margin:6px 0;
  color:rgba(255,255,255,.86);
}
.rulesDoc ul{
  margin:6px 0 10px 18px;
  padding:0;
}
.rulesDoc li{
  margin:4px 0;
}
.rulesSpacer{ height:8px; }


/* ===== 5.2C: Table Theme Presets (Color + Pattern) ===== */
.hr{
  height:1px;
  background: rgba(255,255,255,.10);
  border-radius: 1px;
}

.swatchGrid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.swatchBtn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding:6px;
  cursor:pointer;
}

.swatchBtn.isSelected{
  border-color: rgba(255,255,255,.34);
}

.swatchChip{
  display:block;
  width:34px;
  height:26px;
  border-radius: 8px;
  border:1px solid rgba(0,0,0,.25);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.tablePreview{
  width:100%;
  height:120px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
  margin-top:10px;
}

.tableWrap,
.tablePreview,
.swatchChip{
  --felt-base: #0b3a2a;
  --felt-pattern: none;
  --felt-pattern-size: auto;
  background:
    var(--felt-pattern),
    radial-gradient(900px 420px at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,.02) 60%, rgba(0,0,0,.05)),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.24)),
    linear-gradient(180deg, var(--felt-base), var(--felt-base));
  background-size: var(--felt-pattern-size), var(--felt-pattern-size), var(--felt-pattern-size), auto, auto, auto;
}

/* Color presets */
.tableColor-classicGreen{ --felt-base:#0b3a2a; }
.tableColor-darkGreen{ --felt-base:#062a1f; }
.tableColor-forest{ --felt-base:#073022; }
.tableColor-emerald{ --felt-base:#0a3b2a; }
.tableColor-blue{ --felt-base:#0a2f46; }
.tableColor-navy{ --felt-base:#061b2d; }
.tableColor-royalBlue{ --felt-base:#0a2a5a; }
.tableColor-burgundy{ --felt-base:#3a0f1a; }
.tableColor-oxblood{ --felt-base:#2a0a0f; }
.tableColor-maroon{ --felt-base:#2b0b14; }
.tableColor-charcoal{ --felt-base:#1a1c1f; }
.tableColor-slate{ --felt-base:#232a30; }
.tableColor-blackFelt{ --felt-base:#0f1113; }
.tableColor-teal{ --felt-base:#06373a; }
.tableColor-chocolate{ --felt-base:#2a1a11; }
.tableColor-olive{ --felt-base:#2a3313; }

/* Pattern presets */
.tablePattern-solid{ --felt-pattern:none; --felt-pattern-size:auto; }

.tablePattern-feltNoise{
  --felt-pattern:
    radial-gradient(rgba(255,255,255,.05) 1px, rgba(0,0,0,0) 1px);
  --felt-pattern-size: 18px 18px;
}

.tablePattern-microLinen{
  --felt-pattern:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,0) 1px 6px);
  --felt-pattern-size: 24px 24px;
}

.tablePattern-crosshatch{
  --felt-pattern:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 10px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1px, rgba(0,0,0,0) 1px 10px);
  --felt-pattern-size: 26px 26px;
}

.tablePattern-diamondGrid{
  --felt-pattern:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 14px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 14px);
  --felt-pattern-size: 34px 34px;
}

.tablePattern-pinstripe{
  --felt-pattern:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 14px);
  --felt-pattern-size: 32px 32px;
}

.tablePattern-dots{
  --felt-pattern:
    radial-gradient(rgba(255,255,255,.045) 1px, rgba(0,0,0,0) 1px);
  --felt-pattern-size: 22px 22px;
}

.tablePattern-hexGrid{
  --felt-pattern:
    linear-gradient(30deg, rgba(255,255,255,.028) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgba(255,255,255,.028) 87.5%, rgba(255,255,255,.028)),
    linear-gradient(150deg, rgba(255,255,255,.028) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgba(255,255,255,.028) 87.5%, rgba(255,255,255,.028)),
    linear-gradient(90deg, rgba(255,255,255,.02) 2px, rgba(0,0,0,0) 2px);
  --felt-pattern-size: 28px 28px;
}

.tablePattern-woolWeave{
  --felt-pattern:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, rgba(0,0,0,0) 1px 8px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, rgba(0,0,0,0) 1px 10px);
  --felt-pattern-size: 26px 26px;
}

.tablePattern-diagonalWeave{
  --felt-pattern:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,0) 2px 12px);
  --felt-pattern-size: 28px 28px;
}

.tablePattern-vintageFelt{
  --felt-pattern:
    radial-gradient(rgba(0,0,0,.10) 1px, rgba(0,0,0,0) 1px);
  --felt-pattern-size: 20px 20px;
}

.tablePattern-starfield{
  --felt-pattern:
    radial-gradient(rgba(255,255,255,.05) 1px, rgba(0,0,0,0) 1px);
  --felt-pattern-size: 34px 34px;
}


/* Lobby seats */
.lobbySeats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 720px){
  .lobbySeats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.seatBtn{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: #fff;
  padding:10px;
  border-radius:12px;
  text-align:left;
}
.seatBtn:disabled{
  opacity:.5;
}
.seatBtn.isOpen{
  border-color: rgba(255,255,255,.28);
}
.seatBtn.isTaken{
  opacity:.7;
}
.seatBtn.isMe{
  border-color: rgba(255,255,255,.65);
}
.seatNum{
  font-size:12px;
  opacity:.8;
}
.seatName{
  font-size:14px;
  font-weight:700;
  margin-top:2px;
}
.seatSub{
  font-size:12px;
  opacity:.75;
  margin-top:4px;
}
.lobbyMainRow{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:16px;
}

.lobbyLeftColumn{
  flex:0 0 220px;
  max-width:260px;
}

.lobbyRightColumn{
  flex:1 1 260px;
  min-width:0;
}

.lobbyPlayersList,
.lobbyChatBox{
  background:rgba(0,0,0,0.35);
  border-radius:18px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.08);
  max-height:220px;
  overflow-y:auto;
}

.lobbyPlayersListEmpty,
.lobbyChatEmpty{
  font-size:13px;
  color:rgba(255,255,255,0.7);
}

.lobbyPlayerChip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  margin:2px 0;
}

.lobbyPlayerName{
  font-weight:500;
}

.lobbyChatMessage{
  font-size:13px;
  margin:2px 0;
}

.lobbyChatName{
  font-weight:600;
  margin-right:6px;
}

.lobbyChatForm{
  display:flex;
  gap:8px;
  margin-top:8px;
}

.lobbyChatForm .input{
  flex:1;
  min-width:0;
}

.lobbyChatForm .btn{
  padding-inline:14px;
}
/* Friends & online list */
.friendsPanel{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.friendsBody{
  width:100%;
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.friendsInvitesCard,
.friendsTableCard{
  background:rgba(0,0,0,0.25);
  border-radius:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.04);
}

.friendsTabsCenter{
  justify-content:center;
}

.friendsInvitesBox{
  margin-top:6px;
  max-height:180px;
  overflow-y:auto;
}

.friendsHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
}

.friendsMeName{
  font-weight:600;
}

.friendsAuth{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.friendsAuthCol{
  flex:1 1 220px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.friendsAddRow{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.friendsAddRow .input{
  flex:1;
  min-width:0;
}
.friendsTabs{
  display:flex;
  gap:6px;
  margin:8px 0;
}

.friendsTab{
  border:none;
  border-radius:999px;
  padding:4px 10px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
}

.friendsTabActive{
  background:rgba(255,255,255,.16);
  color:var(--text);
}

.friendsList{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.friendRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(0,0,0,.18);
}

.friendMain{
  display:flex;
  align-items:center;
  gap:8px;
}

.friendName{
  font-weight:500;
}

.friendCode{
  font-size:12px;
  color:var(--muted2);
}

.friendActions{
  display:flex;
  align-items:center;
}

.friendStatus{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
}

.friendOnline{
  background:#19c37d;
}

.friendOffline{
  background:rgba(255,255,255,.25);
}

.friendsError{
  margin-top:8px;
  font-size:13px;
  color:#ff6b6b;
  display:none;
}
.friendsInvitesOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.82);
  border-radius:var(--radius);
  z-index:10;
}

.friendsInvitesOverlayInner{
  width:100%;
  max-width:420px;
  padding:14px 16px;
  background:rgba(5,5,10,.96);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow);
}
.mutedSmall{
  font-size:12px;
  color:var(--muted2);
}
/* Lobby/Table chat */
.chatPanel h3{
  margin:0 0 10px 0;
}

.chatLog{
  max-height:180px;
  overflow-y:auto;
  padding:8px;
  border-radius:6px;
  background:rgba(5,5,10,.6);
  font-size:13px;
}

.chatEmpty{
  color:rgba(255,255,255,.5);
  font-style:italic;
}

.chatMessage{
  margin-bottom:4px;
  word-wrap:break-word;
}

.chatMessageName{
  font-weight:900;
}

.chatMessageTime{
  font-size:11px;
  opacity:.6;
  margin-left:4px;
}

.chatInputRow{
  display:flex;
  gap:6px;
  margin-top:8px;
}

.chatInputRow .input{
  flex:1;
}

/* Room full / ghost badges */
.badgeWarning{
  background:rgba(240,153,0,.18);
  border-color:rgba(240,153,0,.6);
  color:#fed7aa;
}

.badgeGhost{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.28);
  color:rgba(255,255,255,.92);
}

/* Bot difficulty segmented control */
.segmented{
  display:inline-flex;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  padding:2px;
  margin-top:6px;
  gap:2px;
}

.segBtn{
  border:none;
  background:transparent;
  padding:4px 10px;
  border-radius:999px;
  font-size:13px;
  color:rgba(255,255,255,.75);
  cursor:pointer;
}

.segBtn.isSelected{
  background:rgba(255,255,255,.14);
  color:#fff;
}

.segBtn:hover{
  background:rgba(255,255,255,.08);
}
.lastTrickPanel{
  position:absolute;
  right:16px;
  bottom:16px;
  width:260px;
  max-height:260px;
  padding:10px 12px;
  border-radius:20px;
  background:rgba(0,0,0,0.88);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 18px 40px rgba(0,0,0,0.7);
  z-index:2500;
  font-size:13px;
}

.lastTrickTitle{
  font-weight:600;
  margin-bottom:6px;
}

.lastTrickRow{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:2px 0;
}

.lastTrickName{
  font-weight:500;
}

.lastTrickCard{
  font-variant-numeric:tabular-nums;
}

.lastTrickClose{
  margin-top:8px;
  width:100%;
}
/* Fullscreen table expansion */
body.screen-table #view,
body.screen-table .topbar{
  max-width:none;
  width:100%;
}

body.screen-table .tableWrap{
  width:95vw;
  height:90vh;
  max-width:none;
  max-height:none;
}