/* 8 ball pool (public/arcade/pool.js). The table is the one bold thing: red felt under a lamp, walnut rails with
   cream diamonds, standing on the lodge's zigzag floor turned down to almost black. Tokens from arcade.css. */
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) { --pl-wood: #1c0b06; --pl-edge: #1a2b3d; --pl-ivory: #fbf3e6; background: #04090e; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--ac-ink, #eef2fb); font-family: var(--font); }

/* each player's group over the table: name, then their seven balls (potted ones hollow) */
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-hud { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 12px; border-bottom: 2px solid var(--ac-line, #1a2b3d); background: #060e14; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-side { --pc: var(--ac-p0, #3b82ff); display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-bottom: 3px; border-bottom: 3px solid transparent; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-side.p1 { --pc: var(--ac-p1, #eceff4); align-items: flex-end; text-align: right; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-side.on { border-bottom-color: var(--pc); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pc); font: 400 20px/1 var(--ac-pixel, "Jersey 10"); letter-spacing: .03em; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-who em { font-style: normal; color: var(--ac-ink-2, #9eb0c6); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-row { display: flex; gap: 2px; min-height: 12px; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-mb { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; overflow: hidden; background: var(--bc);
  box-shadow: inset -2px -2px 3px rgba(0, 0, 0, .35); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-mb.st { background: linear-gradient(var(--pl-ivory) 22%, var(--bc) 22%, var(--bc) 78%, var(--pl-ivory) 78%); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-mb.gone { background: transparent; box-shadow: inset 0 0 0 1.5px #2a3f5a; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-mb.eight { box-shadow: inset 0 0 0 1.5px var(--pl-ivory); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-mid { color: var(--ac-ink-2, #9eb0c6); font: 400 20px/1 var(--ac-pixel, "Jersey 10"); letter-spacing: .03em; white-space: nowrap; }

/* the room: the lodge's zigzag floor, dimmed right down */
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-room { position: relative; flex: 1; min-height: 0; overflow: hidden; background-color: #04090e;
  background-image: linear-gradient(135deg, #08121b 25%, transparent 25%), linear-gradient(225deg, #08121b 25%, transparent 25%),
    linear-gradient(315deg, #08121b 25%, transparent 25%), linear-gradient(45deg, #08121b 25%, transparent 25%);
  background-position: -22px 0, -22px 0, 0 0, 0 0; background-size: 44px 44px; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-cv { position: absolute; inset: 0; display: block; touch-action: none; }

/* spin: a cue ball with a red dot where the tip will meet it */
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-spin { position: absolute; z-index: 2; display: grid; place-items: center; padding: 0; background: var(--pl-wood);
  color: #3b82ff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-cb { position: relative; display: block; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0, var(--pl-ivory) 30%, #d9cbb6 100%); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-cb b, .ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-pad-dot { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #1259d3; }

.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-pad { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(2, 5, 8, .6); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-pad[hidden] { display: none; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-pad-card { display: grid; justify-items: center; gap: 12px; width: min(86%, 280px); padding: 18px 16px 16px;
  background: var(--pl-wood); border: 2px solid var(--pl-edge); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-pad-ball { position: relative; width: 150px; height: 150px; border-radius: 50%; touch-action: none; cursor: ns-resize;
  background: radial-gradient(circle at 35% 30%, #fff 0, var(--pl-ivory) 30%, #cdbda6 100%); box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-pad-line { position: absolute; left: 50%; top: 12%; bottom: 12%; width: 0; border-left: 2px dashed rgba(11, 26, 46, .25); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-pad-dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-pad-say { margin: 0; min-height: 2.6em; text-align: center; color: var(--ac-ink, #eef2fb); font-size: 16px; line-height: 1.3; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-pad-mid { min-height: 40px; padding: 6px 16px; background: transparent; border: 2px solid var(--pl-edge); color: var(--ac-ink, #eef2fb);
  font: 700 16px/1 var(--font); cursor: pointer; }

/* what just happened: a felt slip that drops in over the table */
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-note { position: absolute; z-index: 3; left: 50%; top: 10px; max-width: calc(100% - 32px); padding: 8px 14px;
  background: #1150b8; color: #fff; font: 700 15px/1.25 var(--font); text-align: center; pointer-events: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35); opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s, transform .2s; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-note:empty { display: none; }
.ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-note.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ag-stage:is([data-kind="pool"], [data-kind="stripes"]) .pl-note { transition: none; } }

/* Stars and Stripes: each player's own four under their name (red or white, a star on each; hollow once sunk), the
   black bombs still on the table in the middle */
.ag-stage[data-kind="stripes"] .pl-mb.ss { width: 14px; height: 14px; }
.ag-stage[data-kind="stripes"] .pl-mb.red { --bc: #1259d3; }
.ag-stage[data-kind="stripes"] .pl-mb.white { --bc: #fdfcf9; }
.ag-stage[data-kind="stripes"] .pl-mb.bomb { width: 10px; height: 10px; background: radial-gradient(circle at 34% 30%, #8a7a7d 0, #21272a 22%, #050304 60%); box-shadow: none; }
.ag-stage[data-kind="stripes"] .pl-mb.red::after, .ag-stage[data-kind="stripes"] .pl-mb.white::after { content: ""; position: absolute; inset: 2px;
  background: var(--sc); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ag-stage[data-kind="stripes"] .pl-mb.red { --sc: #fdfcf9; }
.ag-stage[data-kind="stripes"] .pl-mb.white { --sc: #1259d3; }
.ag-stage[data-kind="stripes"] .pl-mb.gone::after { display: none; }
.ag-stage[data-kind="stripes"] .pl-mb.white.gone { box-shadow: inset 0 0 0 1.5px #2a3f5a; }
.ag-stage[data-kind="stripes"] .pl-bombs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 48px; }