/*
 * Cambio v0.2.7.4: table v8 (mock-up mockup/table-v8, Abdul 2026-11-04 10:46 Dubai: "All 3 give the user setting up
 * the game to select their table style, default always go to classic"). Three table styles share the v8 layout
 * (js/table-v7.js): Classic+ (classic_plus, the default), Darbar (darbar) and Lounge (lounge). The style is set on
 * <body> as data-table-style by js/table-style.js (body[data-table-style="classic_plus" | "darbar" | "lounge"]); an unknown
 * or missing style is Classic+ (the base rules: they apply with any or no attribute). Only gradients and two small SVG tiles: no
 * filters and no animation here (the spread perf guard, tests/v0273-spread-perf.test.js). (v0.2.7.4 one stylesheet for the three styles: css/table-styles.css)
 */
:root.table-v7 body {
  --v8-bg: #16233f; --v8-felt1: #46a979; --v8-felt2: #2c7a54; --v8-rail1: #9a6436; --v8-rail2: #6b3f1d; --v8-rail3: #4a2a12;
  --v8-stitch: rgba(255, 230, 190, .35); --v8-accent: #f2c35b; --v8-plate: linear-gradient(#22345a, #16233f); --v8-plate-edge: #6f86b3;
  --v8-plate-ink: #fff; --v8-back1: #8a2232; --v8-back2: #5e1420; --v8-logo: rgba(255, 255, 255, .26);
}
:root.table-v7 body[data-table-style="darbar"] {
  --v8-bg: #2b1810; --v8-felt1: #23774b; --v8-felt2: #11472e; --v8-rail1: #8a5a2f; --v8-rail2: #5a3518; --v8-rail3: #3a2210;
  --v8-stitch: rgba(240, 205, 140, .55); --v8-accent: #e3b866; --v8-plate: linear-gradient(#4a2c16, #2d190b); --v8-plate-edge: #c99a4a;
  --v8-plate-ink: #f6dfae; --v8-back1: #7a1f2b; --v8-back2: #4f121b; --v8-logo: rgba(235, 200, 130, .34);
}
:root.table-v7 body[data-table-style="lounge"] {
  --v8-bg: #0b111c; --v8-felt1: #147f88; --v8-felt2: #08454e; --v8-rail1: #3b2a22; --v8-rail2: #231712; --v8-rail3: #140c09;
  --v8-stitch: rgba(214, 170, 120, .6); --v8-accent: #f0c27a; --v8-plate: linear-gradient(#2a2f3a, #161a22); --v8-plate-edge: #8fa3b8;
  --v8-plate-ink: #fff; --v8-back1: #23395c; --v8-back2: #142441; --v8-logo: rgba(200, 240, 240, .28);
}
:root.table-v7 body { --v7-glow: var(--v8-accent); --v7-back: var(--v8-back1); }

/* room backdrop */
:root.table-v7.in-game #room-bg { background:
  radial-gradient(ellipse 60% 55% at 50% 45%, rgba(110, 150, 230, .22), transparent 70%),
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 26px),
  repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 26px), var(--v8-bg); }
:root.table-v7.in-game body[data-table-style="darbar"] #room-bg { background:
  radial-gradient(ellipse 60% 55% at 50% 42%, rgba(255, 186, 96, .30), transparent 70%),
  linear-gradient(rgba(36, 18, 9, .38), rgba(36, 18, 9, .38)),
  url(../assets/table/v8-darbar.svg) 0 0 / 96px 96px,
  linear-gradient(#3b2114, #1e0f08); }
:root.table-v7.in-game body[data-table-style="lounge"] #room-bg { background:
  radial-gradient(ellipse 45% 70% at 50% -10%, rgba(255, 236, 200, .22), transparent 70%),
  radial-gradient(circle at 8% 22%, rgba(255, 190, 110, .30) 0 3.5%, transparent 5%),
  radial-gradient(circle at 18% 78%, rgba(120, 200, 255, .22) 0 4.5%, transparent 6.5%),
  radial-gradient(circle at 93% 15%, rgba(255, 170, 120, .26) 0 3%, transparent 4.5%),
  radial-gradient(circle at 4% 55%, rgba(150, 220, 255, .18) 0 6%, transparent 8.5%),
  radial-gradient(circle at 70% 96%, rgba(255, 210, 140, .24) 0 4%, transparent 6%),
  radial-gradient(circle at 40% 4%, rgba(160, 200, 255, .22) 0 3%, transparent 4.5%),
  linear-gradient(#141c2c, #070b12); }
/* a soft vignette (one gradient, no filter) */
:root.table-v7.in-game #room-bg::after { content: ''; display: block; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 55%, rgba(0, 0, 0, .55) 100%); }

/* rail + stitch line + felt */
:root.table-v7 #felt { filter: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .55); }
:root.table-v7 #felt-rim { background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 18%, transparent 80%, rgba(0, 0, 0, .35)),
    linear-gradient(90deg, var(--v8-rail2), var(--v8-rail1) 30%, var(--v8-rail2) 52%, var(--v8-rail1) 75%, var(--v8-rail2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 var(--v8-rail3); }
:root.table-v7 body[data-table-style="darbar"] #felt-rim { background:
    linear-gradient(180deg, rgba(255, 235, 200, .25), transparent 22%, transparent 78%, rgba(0, 0, 0, .4)),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 9px, rgba(255, 220, 170, .07) 9px 10px, transparent 10px 17px),
    linear-gradient(90deg, var(--v8-rail2), var(--v8-rail1) 35%, var(--v8-rail2) 55%, var(--v8-rail1) 80%, var(--v8-rail2));
  box-shadow: inset 0 0 0 1.5px #c99a4a, inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 230, 180, .3); }
:root.table-v7 body[data-table-style="lounge"] #felt-rim { background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255, 255, 255, .14), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 30%, transparent 70%, rgba(0, 0, 0, .5)),
    linear-gradient(var(--v8-rail1), var(--v8-rail2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(0, 0, 0, .6); }
:root.table-v7 #felt-rim::after { content: ''; display: block; position: absolute; inset: 3px; border-radius: 999px; pointer-events: none;
  border: 1px solid var(--v8-stitch); }
:root.table-v7 body[data-table-style="darbar"] #felt-rim::after, :root.table-v7 body[data-table-style="lounge"] #felt-rim::after { border: 1.5px dashed var(--v8-stitch); }
:root.table-v7 #felt-inner { background: radial-gradient(ellipse 70% 65% at 50% 45%, var(--v8-felt1), var(--v8-felt2));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), inset 0 6px 16px rgba(0, 0, 0, .35); }
:root.table-v7 body[data-table-style="darbar"] #felt-inner { box-shadow: inset 0 0 0 2px #c99a4a, inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 8px 22px rgba(0, 0, 0, .5); }
:root.table-v7 body[data-table-style="lounge"] #felt-inner { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 6px 18px rgba(0, 0, 0, .45); }
/* the wordmark moves from the felt to the pile box */
:root.table-v7 #felt-inner::after { display: none; }

/* the pile box (placed by js/table-v7.js v8Decor) with the CAMBIO wordmark set into its lower edge */
#v8-pilebox { display: none; }
:root.table-v7.in-game #v8-pilebox { display: block; position: absolute; border: 1px solid var(--v8-logo); border-radius: 12px; pointer-events: none; z-index: 0; }
:root.table-v7.in-game #v8-pilebox .v8-logo { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%); padding: 0 .5em;
  background: var(--v8-felt2); border-radius: 6px; color: var(--v8-logo); font: 700 11px/14px var(--font-display, Georgia, serif); letter-spacing: .16em; white-space: nowrap; }
:root.table-v7.in-game #v8-pilebox[data-logo="top"] .v8-logo { top: 0; }
:root.table-v7.in-game #v8-pilebox[data-logo="off"] .v8-logo { display: none; }

/* card backs */
:root.table-v7 .card.back { border-color: rgba(255, 255, 255, .75);
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2050%2070%27%3E%3Ctext%20x=%2725%27%20y=%2745%27%20text-anchor=%27middle%27%20font-family=%27Georgia,serif%27%20font-size=%2730%27%20font-weight=%27700%27%20fill=%27%23FFFFFF%27%20fill-opacity=%27.72%27%3EC%3C/text%3E%3C/svg%3E") center / 80% auto no-repeat,
    radial-gradient(circle at 50% 40%, var(--v8-back1), var(--v8-back2)); }

/* name plates under the avatars */
:root.table-v7 #seats .seat .name, :root.table-v7 #my-tag .name { background: var(--v8-plate) !important; border: 1px solid var(--v8-plate-edge) !important;
  color: var(--v8-plate-ink) !important; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5) !important; }
:root.table-v7 #seats .seat .avatar, :root.table-v7 #my-tag .avatar { box-shadow: 0 0 0 2px var(--v8-plate-edge), 0 2px 5px rgba(0, 0, 0, .5); }
/* (a top-row player's "Drew" / "Thinking…" tag goes under the plate: above it is the screen's edge) */
:root.table-v7 #seats .seat[data-place="2"] .act-label, :root.table-v7 #seats .seat[data-place="3"] .act-label,
:root.table-v7 #seats .seat[data-place="4"] .act-label { bottom: auto; top: calc(100% + 3px); }

/* a reaction in its player's fixed 28 px spot (app.js sendEmoji) */
.fly-emoji.v8-react { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1;
  background: rgba(255, 255, 255, .92); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); filter: none; }

/* v0.2.7.4 the host's table style picker (room setup; three labelled choices, 44 px taps) */
.style-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.style-opt { min-height: 44px; min-width: 88px; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 6px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
/* (equal widths left "Classic+" clipped at 375 px wide, 92 > 88: each choice takes its own width, wrapping if need be) */
#modal-box .style-opt { padding: 0 8px; flex: 1 1 auto; }
.style-opt[aria-checked="true"] { border: 2px solid #f2c35b; background: rgba(242, 195, 91, .16); }
.style-opt:focus-visible { outline: 2px solid #f2c35b; outline-offset: 2px; }
.style-sw { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #9a6436, inset 0 0 0 2px rgba(255, 255, 255, .18); background: radial-gradient(circle at 50% 45%, #46a979, #2c7a54); }
.style-sw[data-sw="darbar"] { box-shadow: 0 0 0 2px #c99a4a, inset 0 0 0 2px rgba(0, 0, 0, .3); background: radial-gradient(circle at 50% 45%, #1f6b45, #0f3f29); }
.style-sw[data-sw="lounge"] { box-shadow: 0 0 0 2px #3b2a22, inset 0 0 0 2px rgba(0, 0, 0, .35); background: radial-gradient(circle at 50% 45%, #11707a, #08414a); }
/* the picker sits after Step 2 (below the door, invite and seats; never ahead of a primary button) */
#modal-box.host-room .style-box { order: 4; }