/* One physical table surface for Lab, Studio and live game views. The host
   supplies geometry; these rules own every material, shape and light value. */
.table-surface {
  isolation:isolate;
  --table-visual-width:1000px;
  --rail-inset-x:16px;
  --rail-inset-y:24px;
  --felt-inset-x:40px;
  --felt-inset-y:48px;
  --surface-outer-radius:9999px;
  --surface-inner-radius:9999px;
  --rail-image:url('/tabletop/assets/table/espresso-leather.png');
  --rail-overlay:linear-gradient(150deg,#fff3e10b,#0000 35%,#0006 88%);
  --rail-size:180px 180px;
  --rail-border:#281b15;
  --rail-rim:#4a3429;
  --felt-image:url('/tabletop/assets/table/green-felt-fine.png');
  --felt-color:#aec7ae;
  --felt-filter:none;
}
.table-surface > .rail,
.table-surface > .felt {
  position:absolute;
  z-index:0;
  pointer-events:none;
  transform:var(--surface-transform,translateX(-50%));
}
.table-surface > .rail {
  left:var(--surface-rail-left,50%);
  top:var(--surface-rail-top,var(--rail-inset-y));
  width:var(--surface-rail-width,calc(var(--table-visual-width) - 2 * var(--rail-inset-x)));
  height:var(--surface-rail-height,calc(100% - 2 * var(--rail-inset-y)));
  border-radius:var(--surface-outer-radius);
  background-color:#281b15;
  background-image:var(--rail-overlay),var(--rail-image);
  background-repeat:repeat;
  background-size:cover,var(--rail-size);
  box-shadow:inset 0 0 0 2px var(--rail-border),inset 0 0 0 5px var(--rail-rim),inset 0 2px 10px #0007,0 2px 9px #0009;
}
.table-surface > .felt {
  left:var(--surface-felt-left,50%);
  top:var(--surface-felt-top,var(--felt-inset-y));
  width:var(--surface-felt-width,calc(var(--table-visual-width) - 2 * var(--felt-inset-x)));
  height:var(--surface-felt-height,calc(100% - 2 * var(--felt-inset-y)));
  border-radius:var(--surface-inner-radius);
  background-color:var(--felt-color);
  background-image:var(--felt-image);
  background-position:center;
  background-repeat:repeat;
  background-size:18.75% 33.333%;
  background-blend-mode:multiply;
  box-shadow:inset 0 0 20px #0008,0 0 0 1px #0009;
  filter:var(--felt-filter);
}
.table-surface[data-felt="classic-green"] {
  --felt-image:url('/tabletop/assets/table/green-felt.png');
  --felt-color:#9fbaa1;
}
.table-surface[data-felt="midnight-blue"] {
  --felt-filter:hue-rotate(95deg) saturate(.9) brightness(.85);
}
.table-surface[data-felt="burgundy"] {
  --felt-filter:hue-rotate(225deg) saturate(.95) brightness(.75);
}
.table-surface[data-rail="walnut"] {
  --rail-image:url('/tabletop/assets/table/walnut-rail.png');
  --rail-overlay:linear-gradient(150deg,#f7dba222,#0003 40%,#0007);
  --rail-size:160px 160px;
  --rail-border:#3d2418;
  --rail-rim:#795032;
}
.table-surface[data-rail="oak"] {
  --rail-image:url('/tabletop/assets/table/oak-rail.png');
  --rail-overlay:linear-gradient(150deg,#fff6d822,#0002 48%,#0005);
  --rail-size:160px 160px;
  --rail-border:#76552f;
  --rail-rim:#be9658;
}
.table-surface[data-rail="chrome"] {
  --rail-image:linear-gradient(172deg,#1b292d 3%,#83989a 10%,#e4e9df 19%,#6d8589 27%,#1d3035 43%,#b4c4bd 58%,#202e32 77%,#849a9b 91%,#101b20);
  --rail-overlay:linear-gradient(135deg,#e5faf633,#0000 28%,#0008 82%);
  --rail-border:#526a6c;
  --rail-rim:#b7c5c0;
}
.table-surface[data-rail="brass"] {
  --rail-image:linear-gradient(171deg,#392d1c 2%,#a18447 10%,#f2dda2 18%,#917140 29%,#503b1f 43%,#d2af6b 57%,#3c2d1e 78%,#bea367 90%,#231b14);
  --rail-overlay:linear-gradient(135deg,#fff2c63d,#0000 28%,#0008 82%);
  --rail-border:#755727;
  --rail-rim:#c7a15d;
}
.table-surface[data-shape="oval"] {
  --surface-outer-radius:50% / 50%;
  --surface-inner-radius:50% / 50%;
}
.table-surface[data-shape="rounded-rectangle"] {
  --surface-outer-radius:120px;
  --surface-inner-radius:96px;
}
.table-surface[data-shape="round"] {
  --surface-outer-radius:50%;
  --surface-inner-radius:50%;
  --rail-inset-x:218px;
  --rail-inset-y:28px;
  --felt-inset-x:242px;
  --felt-inset-y:52px;
}