/* Skin owns pigment, rim and texture only; gameplay geometry lives elsewhere.
   Future skins override these tokens, not seats/cards/hitboxes/motion. */
[data-table-skin="classic-ink"] {
  --stage-surface: #082e27;
  --table-surface: rgb(34 99 84 / 82%);
  --table-surface-mid: rgb(12 60 51 / 86%);
  --table-surface-deep: rgb(5 29 25 / 98%);
  --table-underlay-top: #0c4036;
  --table-underlay-bottom: #061e1a;
  --table-rim: rgb(229 190 103 / 25%);
  --table-pattern: rgb(232 205 146 / 2.5%);
  --table-glow: rgb(45 111 91 / 20%);
  --dock-surface: #031512;
  --dock-transition: rgb(5 25 21 / 92%);
  --table-secondary-gold: rgb(217 174 91 / 8%);
}
.game-stage { display: none; pointer-events: none; }
/* Wide environment is a body-level viewport sibling. The Gameplay host has
   transform/isolation and must NOT be a fixed-position containing block here.
   Native viewport units cover even the frame before the viewport observer runs. */
.viewport-game-stage[data-table-skin] {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, var(--table-glow), transparent 72%), var(--stage-surface);
  --table-surface-width: calc(min(100vw, 1280px) * .97);
  --table-surface-height: calc(100dvh * .82);
  --table-surface-center: 50%;
}
body:has(.game-screen[data-table-skin][data-layout-mode=WIDE]:not([hidden], [hidden] *)) > .viewport-game-stage {
  display: block;
}
/* Exact approved portrait colors/pattern; tokens make the skin boundary explicit. */
.game-screen[data-table-skin][data-layout-mode=PORTRAIT] {
  background: radial-gradient(ellipse at 50% 35%, var(--table-surface) 0, var(--table-surface-mid) 38%, var(--table-surface-deep) 73%),
    linear-gradient(var(--table-underlay-top), var(--table-underlay-bottom));
}
.game-screen[data-table-skin][data-layout-mode=PORTRAIT]::before {
  border-color: var(--table-rim);
  background: radial-gradient(ellipse at 49% 42%, transparent 0 31%, rgb(2 27 23 / 20%) 32% 54%, transparent 55%),
    repeating-radial-gradient(ellipse at 50% 10%, transparent 0 28px, var(--table-pattern) 29px 30px, transparent 31px 44px);
}
.game-screen[data-table-skin][data-layout-mode=PORTRAIT] .human-dock-inner {
  background: linear-gradient(180deg, transparent, var(--dock-transition) 19%, var(--dock-surface) 100%);
}
.game-screen[data-table-skin]:is([data-layout-mode=WIDE], [data-layout-mode=LANDSCAPE_COMPACT]) {
  overflow: visible; background: transparent; box-shadow: none;
}
.game-screen[data-table-skin]:is([data-layout-mode=WIDE], [data-layout-mode=LANDSCAPE_COMPACT])::before,
.game-screen[data-table-skin]:is([data-layout-mode=WIDE], [data-layout-mode=LANDSCAPE_COMPACT])::after { display: none; }
.game-screen[data-table-skin][data-layout-mode=LANDSCAPE_COMPACT] > .game-stage {
  display: block; position: absolute; z-index: -1; top: 0;
  left: calc(50% - var(--visible-width, 100vw) / 2);
  width: var(--visible-width, 100vw); height: 100%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, var(--table-glow), transparent 72%), var(--stage-surface);
  --table-surface-width: calc(min(var(--visible-width, 100vw), 1280px) * .97);
  --table-surface-height: calc(var(--visible-height, 100dvh) * .82);
  --table-surface-center: 50%;
}
.table-surface {
  position: absolute; width: var(--table-surface-width); height: var(--table-surface-height);
  left: var(--table-surface-center); top: 50%; transform: translate(-50%, -50%);
  border: 1px solid var(--table-rim); border-radius: 50%; overflow: hidden;
  background: radial-gradient(ellipse, var(--table-surface), var(--table-surface-deep));
  box-shadow: inset 0 0 45px rgb(0 0 0 / 10%), 0 0 28px var(--table-secondary-gold);
}
.table-surface::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Fixed-size circular tiles: no raster, aspect stretch or viewport scaling. */
  background: repeating-radial-gradient(circle at center, transparent 0 27px, var(--table-pattern) 28px 29px, transparent 30px 44px);
  background-size: 132px 132px;
}
.dock-surface { display: none; }
.viewport-game-stage .dock-surface {
  display: block; position: absolute; inset: auto 0 0; height: calc(234px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--dock-surface) 65%);
}
.game-screen[data-table-skin][data-layout-mode=WIDE] .human-dock-inner { background: transparent; border-top: 0; }
.viewport-game-stage .game-hud-surface {
  position: absolute; inset: 0 0 auto; height: calc(56px + env(safe-area-inset-top));
  background: linear-gradient(#041b17f2 0, #041b17a8 58%, transparent);
}
/* Pigment belongs to the viewport. Controls/Motion remain in the 1280px host. */
.game-screen[data-table-skin][data-layout-mode=WIDE] .mobile-hud { background: transparent; }
.game-screen[data-table-skin][data-layout-mode=LANDSCAPE_COMPACT] > .game-stage {
  --table-surface-width: calc(var(--adaptive-board-width) * .94);
  --table-surface-height: calc(var(--visible-height, 100dvh) * .84);
  --table-surface-center: calc((var(--visible-width, 100vw) - min(var(--visible-width, 100vw), 1280px)) / 2 + env(safe-area-inset-left) + var(--adaptive-board-width) / 2);
}
.game-screen[data-table-skin][data-layout-mode=LANDSCAPE_COMPACT] .human-dock-inner {
  background: linear-gradient(90deg, transparent, var(--dock-surface) 30%);
}