/* Table styles, shared by the TV and the phones. Pick one per room (lobby or
   the TABLE button). Each class paints a surface; the TV adds the table edge. */
.tbl-walnut {
  --tbl-edge: #1c0f07; --tbl-rim: #5a3a22; --tbl-glow: rgba(255,190,120,.16);
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255,196,128,.18), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 318px, rgba(0,0,0,.42) 318px 321px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px, rgba(0,0,0,.05) 9px 11px, transparent 11px 17px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, #4a2d1b 0%, #3b2314 55%, #2c190d 100%);
}
.tbl-rooftop {
  --tbl-edge: #0b0f18; --tbl-rim: #3a4356; --tbl-glow: rgba(255,214,140,.10);
  background:
    radial-gradient(circle at 3% 1.3%, rgba(255,214,140,.95) 0 4px, rgba(255,214,140,.25) 5px, transparent 11px),
    radial-gradient(circle at 9% 2.1%, rgba(255,170,110,.95) 0 4px, rgba(255,170,110,.25) 5px, transparent 11px),
    radial-gradient(circle at 15% 1.3%, rgba(255,232,170,.95) 0 4px, rgba(255,232,170,.25) 5px, transparent 11px),
    radial-gradient(circle at 21% 2.1%, rgba(255,190,120,.95) 0 4px, rgba(255,190,120,.25) 5px, transparent 11px),
    radial-gradient(circle at 27% 1.3%, rgba(255,214,140,.95) 0 4px, rgba(255,214,140,.25) 5px, transparent 11px),
    radial-gradient(circle at 33% 2.1%, rgba(255,170,110,.95) 0 4px, rgba(255,170,110,.25) 5px, transparent 11px),
    radial-gradient(circle at 39% 1.3%, rgba(255,232,170,.95) 0 4px, rgba(255,232,170,.25) 5px, transparent 11px),
    radial-gradient(circle at 45% 2.1%, rgba(255,190,120,.95) 0 4px, rgba(255,190,120,.25) 5px, transparent 11px),
    radial-gradient(circle at 51% 1.3%, rgba(255,214,140,.95) 0 4px, rgba(255,214,140,.25) 5px, transparent 11px),
    radial-gradient(circle at 57% 2.1%, rgba(255,170,110,.95) 0 4px, rgba(255,170,110,.25) 5px, transparent 11px),
    radial-gradient(circle at 63% 1.3%, rgba(255,232,170,.95) 0 4px, rgba(255,232,170,.25) 5px, transparent 11px),
    radial-gradient(circle at 69% 2.1%, rgba(255,190,120,.95) 0 4px, rgba(255,190,120,.25) 5px, transparent 11px),
    radial-gradient(circle at 75% 1.3%, rgba(255,214,140,.95) 0 4px, rgba(255,214,140,.25) 5px, transparent 11px),
    radial-gradient(circle at 81% 2.1%, rgba(255,170,110,.95) 0 4px, rgba(255,170,110,.25) 5px, transparent 11px),
    radial-gradient(circle at 87% 1.3%, rgba(255,232,170,.95) 0 4px, rgba(255,232,170,.25) 5px, transparent 11px),
    radial-gradient(circle at 93% 2.1%, rgba(255,190,120,.95) 0 4px, rgba(255,190,120,.25) 5px, transparent 11px),
    radial-gradient(circle at 97% 1.3%, rgba(255,214,140,.95) 0 4px, rgba(255,214,140,.25) 5px, transparent 11px),
    linear-gradient(180deg, rgba(255,200,130,.16) 0%, transparent 9%),
    radial-gradient(ellipse 90% 18% at 50% 100%, rgba(120,150,255,.22), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(255,255,255,.012) 2px 3px),
    repeating-radial-gradient(circle at 30% 60%, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #262c39 0%, #1b202b 60%, #141821 100%);
}
.tbl-arcade {
  --tbl-edge: #0a0614; --tbl-rim: #ff2bd6; --tbl-glow: rgba(255,43,214,.18);
  background:
    radial-gradient(ellipse 70% 50% at 50% 45%, rgba(120,60,255,.22), transparent 70%),
    repeating-linear-gradient(0deg, rgba(56,189,248,.10) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,43,214,.10) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #1a0e33 0%, #120a26 60%, #0c0719 100%);
}
.tbl-marble {
  --tbl-edge: #0c1110; --tbl-rim: #b08d48; --tbl-glow: rgba(255,240,210,.08);
  background:
    linear-gradient(118deg, transparent 0 22%, rgba(255,255,255,.07) 22.4%, transparent 23.4% 100%),
    linear-gradient(63deg, transparent 0 58%, rgba(255,255,255,.06) 58.3%, transparent 59.2% 100%),
    linear-gradient(141deg, transparent 0 71%, rgba(255,255,255,.05) 71.2%, transparent 72% 100%),
    linear-gradient(28deg, transparent 0 34%, rgba(255,255,255,.04) 34.2%, transparent 35% 100%),
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(ellipse at 75% 70%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(160deg, #1c2a26 0%, #13201c 50%, #0d1714 100%);
}
/* Game themes, used when the table is set to Game Theme ("auto"). */
.tbl-deal {
  --tbl-edge: #0d241d; --tbl-rim: #c9b78a; --tbl-glow: rgba(220,255,230,.06);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 64px),
    radial-gradient(ellipse 70% 60% at 50% 50%, #1d4a3d 0%, #163a30 60%, #11302740 100%),
    #13352b;
}
.nd-felt.tbl-deal::after {
  --seg: #8a5a33 0 9%, #0d241d 9% 10%, #93d0f0 10% 19%, #0d241d 19% 20%, #d9468f 20% 29%, #0d241d 29% 30%, #f08a24 30% 39%, #0d241d 39% 40%, #dc2626 40% 49%, #0d241d 49% 50%, #f5c518 50% 59%, #0d241d 59% 60%, #15803d 60% 69%, #0d241d 69% 70%, #1d4ed8 70% 79%, #0d241d 79% 80%, #2a2a33 80% 89%, #0d241d 89% 90%, #a3d9a5 90% 100%;
  content: ""; position: absolute; inset: 11px; border-radius: 26px; pointer-events: none; z-index: 0; opacity: .9;
  background:
    linear-gradient(90deg, var(--seg)) top left / 100% 12px no-repeat,
    linear-gradient(270deg, var(--seg)) bottom left / 100% 12px no-repeat,
    linear-gradient(180deg, var(--seg)) top left / 12px 100% no-repeat,
    linear-gradient(0deg, var(--seg)) top right / 12px 100% no-repeat;
}

/* ---- light theme: the game tables in daylight ---- */
/* Not Catan on a light oak table. */
.tbl-oak {
  --tbl-edge: #8a6a40; --tbl-rim: #f3e2bf; --tbl-glow: rgba(255,255,255,.22);
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255,245,225,.45), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 318px, rgba(120,80,30,.22) 318px 320px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9px, rgba(120,80,30,.05) 9px 11px, transparent 11px 17px),
    repeating-linear-gradient(0deg, rgba(120,80,30,.05) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, #dcbf8f 0%, #d2b07b 55%, #c49f69 100%);
}
/* Not Monopoly Deal on the pale mint of a classic property board. */
[data-theme="light"] .tbl-deal {
  --tbl-edge: #f6f1e1; --tbl-rim: #1f6b45; --tbl-glow: rgba(255,255,255,.35);
  background:
    repeating-linear-gradient(0deg, rgba(31,107,69,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(31,107,69,.05) 0 1px, transparent 1px 64px),
    radial-gradient(ellipse 70% 60% at 50% 50%, #e6f3e4 0%, #d8ebd6 60%, #cfe5cd 100%),
    #d5e9d3;
}
[data-theme="light"] .nd-felt.tbl-deal::after {
  --seg: #8a5a33 0 9%, #f6f1e1 9% 10%, #93d0f0 10% 19%, #f6f1e1 19% 20%, #d9468f 20% 29%, #f6f1e1 29% 30%, #f08a24 30% 39%, #f6f1e1 39% 40%, #dc2626 40% 49%, #f6f1e1 49% 50%, #f5c518 50% 59%, #f6f1e1 59% 60%, #15803d 60% 69%, #f6f1e1 69% 70%, #1d4ed8 70% 79%, #f6f1e1 79% 80%, #2a2a33 80% 89%, #f6f1e1 89% 90%, #a3d9a5 90% 100%;
}

/* Not Uno: a game-night card table, four colour glows under the cloth. */
.tbl-uno {
  --tbl-edge: #0e0c14; --tbl-rim: #3d3550; --tbl-glow: rgba(255,255,255,.05);
  background:
    radial-gradient(ellipse 45% 40% at 8% 10%, rgba(229,56,59,.22), transparent 70%),
    radial-gradient(ellipse 45% 40% at 92% 10%, rgba(246,201,14,.16), transparent 70%),
    radial-gradient(ellipse 45% 40% at 8% 92%, rgba(47,168,79,.18), transparent 70%),
    radial-gradient(ellipse 45% 40% at 92% 92%, rgba(31,111,229,.22), transparent 70%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #221b2c 0%, #1a1522 60%, #141019 100%);
}
[data-theme="light"] .tbl-uno {
  --tbl-edge: #ffffff; --tbl-rim: #e2dccf; --tbl-glow: rgba(255,255,255,.3);
  background:
    radial-gradient(ellipse 45% 40% at 8% 10%, rgba(229,56,59,.12), transparent 70%),
    radial-gradient(ellipse 45% 40% at 92% 10%, rgba(246,201,14,.14), transparent 70%),
    radial-gradient(ellipse 45% 40% at 8% 92%, rgba(47,168,79,.11), transparent 70%),
    radial-gradient(ellipse 45% 40% at 92% 92%, rgba(31,111,229,.12), transparent 70%),
    linear-gradient(180deg, #faf7f1 0%, #f4efe5 100%);
}