/* =============================================================================
   GRAND SAGA TCG — THE GAME IN THE ARCANA'S FRAME  (R015, R016, R017)
   -----------------------------------------------------------------------------
   The game's own copy of the shell (shell/shell.css, beside index.html, not
   the repo's ../shell/) carries the tokens, the type, the controls, the
   table's surface and light, the options menu and the windows. This sheet
   lays the card game into that frame. Everything that changes the game's look
   is scoped to body.on-table, which 19-table.js sets at every width (R017).
   Below 900px wide it also sets body.compact: the phone layout, at the foot
   of this sheet (COMPACT).

   THE FRAME, as the Arcana's stage
     the head      the shell's .stage-head: a heading, a title, two verbs and
                   three icon buttons
     the drawers   the table (left) and the card (right), sliding over the
                   table with a tab on the inner edge of each
     the table     the shell's .table at 12 degrees, the bays marked on it by
                   fading hairlines (drawn in 19-table.js), no boxes
     the dock      hand, pool and deck, flat, in front of the table
     the field     the same table with three rows (FIELD, at the foot), while
                   no fight runs; the fight takes the screen as before

   ONE CARD SIZE. Every card on the table is --card-w wide at 5:7: acolytes,
   outposts, the reserve, the energy token and the sigils. The dock is 0.8 of
   it. The size is the smaller of two budgets:
     height  two rows on the table and the dock     (100vh - 18.5rem) / 3.92
     width   two staged, four outposts and the reserve   (100vw - 280px) / 7
   so the whole bench fits one screen from 1024 x 768. A bay holding more than
   it was sized for overlaps its cards, as a hand of cards fans, rather than
   growing (THE FAN, below).

   THE FACE. The art and nothing else: no name under it, no chip, no strip.
   The name and the numbers rise on a plate when the pointer rests on a card,
   a hairline along its foot shows harm taken, a spent or downed acolyte is
   dimmed, and everything else is in the right drawer.

   TYPE AND COLOUR are the shell's tokens (--font-*, --t-*, --text-*, --accent,
   --lore), so the menu's Type and Accent change the game as they change the
   Arcana. The game keeps three colours of its own for meaning: assault red,
   energy green and the tier colours of the outposts.
   ========================================================================== */

/* the pieces only the table uses stay out of the way until the table draws them */
.tc-caption, .tc-hover, .tc-hp, .tcg-card-plate em { display: none; }

/* ── THE BRIDGE (R018) ──────────────────────────────────────────────────────
   The game's own sheet (tcg.css) was drawn before the shell, with its own
   palette on the page: cyan, magenta and gold, the site's accent, gold and red,
   and its own darks, panels, lines and text greys. No look and no option
   reached them (the R017 review). On the table they are pointed at the look:

     cyan, the site accent    the accent           "you can act on this"
     gold, the site gold      lore                 value, the next thing
     magenta                  harm: magenta under Futura, the Blood red under Palisade
     the site red             assault: red under Futura, Blood under Palisade
     darks, panels, wells     the look's surfaces
     lines                    the look's strokes
     ink, bone, ash, grey     the look's text tiers
     the chrome face          the body face
     the mono face            Share Tech Mono under Futura, the body face
                              under Palisade (counts, costs, the log)
     the corner radius        6px under Palisade (the Arcana's card), 4px under Futura
     the corner cut           the Corners option (none under Palisade)

   R019: the look the game called the Arcana's is Palisade (data-skin="palisade"), drawn the
   same; Palisade is the look :root carries, so a rule for it alone is written :not(futura).

   The look's colours come as channels from the shell (--accent-rgb ...), so
   every see-through tint the game draws follows the look, the mode and the
   accent. A colour declared from another one is worked out where it is
   declared, so every token built from these is declared again here, on the
   body, beside them. KEPT, as colours of things in the game rather than of
   the look: the house colours, energy green (the orb's art), the tier colours
   of the outposts and the nine element colours. */
:root {
    --harm-rgb: 226, 105, 94;  --assault-rgb: 214, 77, 66;
    --font-num: var(--font-display); --radius-box: 6px;
}
:root[data-mode="day"] { --harm-rgb: 163, 38, 28; --assault-rgb: 163, 38, 28; }
:root[data-skin="futura"] {
    --harm-rgb: 255, 43, 214;  --assault-rgb: 255, 0, 64;
    --font-num: 'Share Tech Mono', ui-monospace, monospace; --radius-box: 4px;
}
:root[data-skin="futura"][data-mode="day"] { --harm-rgb: 176, 20, 140; --assault-rgb: 200, 0, 50; }
/* WHAT LIES ON A CARD'S ART keeps light ink by day: the art is the same picture in both modes.
   --art-ink is the look's night text, --art-shade the dark under it. The shade (shadows, the wells
   of bars) is black by night; by day it is the look's own dark, a brown or a violet. */
:root { --art-ink-rgb: 235, 226, 203; --art-shade-rgb: 7, 7, 12; --day-shade-rgb: 62, 44, 18; }
:root[data-skin="futura"] { --art-ink-rgb: 238, 234, 255; --art-shade-rgb: 6, 1, 18; --day-shade-rgb: 40, 20, 90; }
:root[data-mode="day"] body.on-table { --shade-rgb: var(--day-shade-rgb); }
/* house colours are written for a dark ground; by day, text in them is mixed toward the ink */
body.on-table { --hink: 100%; }
:root[data-mode="day"] body.on-table { --hink: 55%; }
/* the energy green as text: the orb's own green by night, a deeper green by day */
:root[data-mode="day"] body.on-table { --energy-text-rgb: 22, 120, 62; }
/* under Palisade the counts, costs and the log are set in its body face. Declared on the
   body, where Palisade's faces are restated (a face named on :root would be the game's own). */
:root:not([data-skin="futura"]) body.on-table { --font-num: var(--font-body); }
body.on-table {
    /* the channels */
    --ink-rgb: var(--text-1-rgb);
    --c-1-rgb: var(--accent-rgb);  --c-1-deep-rgb: var(--stroke-strong-rgb);
    --c-2-rgb: var(--harm-rgb);    --c-2-deep-rgb: var(--harm-rgb);
    --c-3-rgb: var(--lore-rgb);    --c-3-deep-rgb: var(--lore-rgb);
    --c-void-rgb: var(--surface-0-rgb); --c-abyss-rgb: var(--surface-0-rgb);
    --c-panel-rgb: var(--surface-1-rgb); --c-panel-2-rgb: var(--surface-2-rgb);
    --c-line-rgb: var(--stroke-strong-rgb); --c-grey-rgb: var(--text-3-rgb);
    --c-ash-rgb: var(--text-2-rgb); --c-bone-rgb: var(--text-1-rgb);
    --s-accent-rgb: var(--accent-rgb); --s-signal-rgb: var(--accent-hi-rgb); --s-gold-rgb: var(--lore-rgb);
    --s-red-rgb: var(--assault-rgb); --s-violet-rgb: var(--text-2-rgb);
    --s-void-rgb: var(--surface-0-rgb); --s-abyss-rgb: var(--surface-0-rgb);
    --s-panel-rgb: var(--surface-1-rgb); --s-panel-2-rgb: var(--surface-2-rgb);
    --s-line-rgb: var(--stroke-rgb); --s-ash-rgb: var(--text-2-rgb); --s-bone-rgb: var(--text-1-rgb);
    --on-bright-rgb: var(--surface-0-rgb);
    --art-well-rgb: var(--surface-1-rgb); --card-back-rgb: var(--surface-1-rgb); --card-well-rgb: var(--surface-1-rgb);
    --flag-well-rgb: var(--surface-1-rgb); --xtal-well-rgb: var(--surface-0-rgb); --chip-well-rgb: var(--surface-0-rgb);
    --toast-rgb: var(--surface-1-rgb); --coach-rgb: var(--surface-1-rgb); --sigil-charged-rgb: var(--surface-2-rgb);
    --spoils-rgb: var(--surface-2-rgb); --spoils-2-rgb: var(--surface-1-rgb);
    --arena-rgb: var(--surface-0-rgb); --arena-deep-rgb: var(--surface-0-rgb); --arena-plate-rgb: var(--surface-1-rgb);
    --arena-glow-rgb: var(--stroke-strong-rgb);
    --scroll-rgb: var(--accent-rgb); --scroll-hi-rgb: var(--accent-hi-rgb);
    /* everything built from them, declared again beside them */
    --ink: rgb(var(--ink-rgb)); --shade: rgb(var(--shade-rgb));
    --c-1: rgb(var(--c-1-rgb)); --c-2: rgb(var(--c-2-rgb)); --c-3: rgb(var(--c-3-rgb));
    --c-1-deep: rgb(var(--c-1-deep-rgb)); --c-2-deep: rgb(var(--c-2-deep-rgb)); --c-3-deep: rgb(var(--c-3-deep-rgb));
    --c-orb: var(--c-3);
    --c-void: rgb(var(--c-void-rgb)); --c-abyss: rgb(var(--c-abyss-rgb)); --c-panel: rgb(var(--c-panel-rgb));
    --c-panel-2: rgb(var(--c-panel-2-rgb)); --c-line: rgb(var(--c-line-rgb)); --c-grey: rgb(var(--c-grey-rgb));
    --c-ash: rgb(var(--c-ash-rgb)); --c-bone: rgb(var(--c-bone-rgb));
    --c-cyan: var(--c-1); --c-blue: var(--c-1);
    --c-magenta: var(--c-2); --c-violet: var(--c-2); --c-danger: var(--c-2);
    --c-gold: var(--c-3); --c-amber: var(--c-3); --c-acid: var(--c-3);
    --color-void: var(--c-void); --color-abyss: var(--c-abyss); --color-panel: var(--c-panel); --color-panel-2: var(--c-panel-2);
    --color-line: var(--c-line); --color-ash: var(--c-ash); --color-bone: var(--c-bone);
    --color-accent: var(--c-1); --color-accent-dim: var(--c-1-deep); --color-gold: var(--c-3);
    --color-danger: var(--c-2); --color-good: var(--c-3);
    --s-accent: rgb(var(--s-accent-rgb)); --s-signal: rgb(var(--s-signal-rgb)); --s-gold: rgb(var(--s-gold-rgb));
    --s-red: rgb(var(--s-red-rgb)); --s-violet: rgb(var(--s-violet-rgb));
    --s-void: rgb(var(--s-void-rgb)); --s-abyss: rgb(var(--s-abyss-rgb)); --s-panel: rgb(var(--s-panel-rgb));
    --s-panel-2: rgb(var(--s-panel-2-rgb)); --s-line: rgb(var(--s-line-rgb)); --s-ash: rgb(var(--s-ash-rgb));
    --s-bone: rgb(var(--s-bone-rgb));
    /* the faces, the corners */
    --font-chrome: var(--font-body);
    --font-mono: var(--font-num);
    --r: var(--radius-box); --r-in: var(--radius-box);
    --cut: var(--cut-m, 0px);
}
/* the scrollbars: the shell's fine rail in the accent, on everything that scrolls.
   Kept at no weight (:where), so a rule that hides a bar where it should not show still wins. */
:where(html:has(body.on-table), body.on-table, body.on-table *) { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
:where(body.on-table, body.on-table *, html:has(body.on-table))::-webkit-scrollbar { width: 6px; height: 6px; }
:where(body.on-table, body.on-table *, html:has(body.on-table))::-webkit-scrollbar-track { background: transparent; }
:where(body.on-table, body.on-table *, html:has(body.on-table))::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb); background-clip: padding-box; border: 1.5px solid transparent; border-radius: 3px;
}
:where(body.on-table, body.on-table *, html:has(body.on-table))::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }
:where(body.on-table, body.on-table *)::-webkit-scrollbar-corner { background: transparent; }

/* ── THE PAGE ────────────────────────────────────────────────────────────── */
body.on-table {
    --head-h: 4.25rem;
    --tw: clamp(104px, min((100vh - 18.5rem) / 3.92, (100vw - 280px) / 7), 232px);
    --card-w: var(--tw);
    --card-h: calc(var(--card-w) * 1.4);
    --outpost-w: var(--tw);
    --outpost-gap: 14px;
    --slot-gap: 14px;
    --bay-pad: 12px;
    --zone-pad: 12px;
    --gap: 1.5rem;
    --detail-w: 25rem;
    --zone: var(--tbl-line, var(--accent));
    --topbar-h: var(--head-h);   /* the arena starts under the head */
    background: var(--surface-0) !important;
    color: var(--text-1);
}
body.on-table::before { display: none; }
/* Palisade's type (Cinzel and Cormorant, the Arcana's). The game's own sheet names its faces on :root
   after the shell's, which only the Futura block (a stronger selector) overrides; under Palisade they
   are restated. */
:root[data-skin="palisade"] body.on-table {
    --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
    --font-body: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
}
body.on-table .backdrop { z-index: -1; }

/* ── THE HEAD: the Arcana's bar ──────────────────────────────────────────── */
body.on-table #tcg-topbar.tcg-head {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--head-h);
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0 1.5rem; overflow: visible;
    background: var(--plate); border-bottom: 1px solid var(--stroke);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-family: var(--font-body); font-weight: 400; font-size: var(--t-body);
    text-transform: none; letter-spacing: normal;
}
body.on-table .tcg-head .stage-titles { align-items: center; flex-wrap: nowrap; gap: 1.15rem; min-width: 0; }
body.on-table .tcg-head .stage-titles > * { white-space: nowrap; }
body.on-table .tcg-head h2 { font-size: 1rem; }
body.on-table .tcg-turn { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-2); }
body.on-table .tcg-turn i { width: .45rem; height: .45rem; transform: rotate(45deg); background: var(--house); box-shadow: 0 0 .5rem var(--house); }
body.on-table .tcg-turn.mine { color: var(--accent-hi); }
body.on-table .tcg-head-energy { color: var(--text-2); cursor: help; }
body.on-table .tcg-head-energy b { margin-left: .4em; font-weight: 700; color: var(--lore); }
body.on-table .tcg-head-energy i { margin-left: .6em; font-style: normal; color: rgb(var(--energy-text-rgb, var(--energy-rgb))); }
body.on-table .tcg-head-energy i.bad { color: var(--s-red); }
body.on-table:not(.compact) .tcg-head .stage-actions { display: flex; gap: .5rem; }
body.on-table .tcg-head .btn.blocked { color: var(--lore); }

/* ── THE SCREEN: the table, then the dock ────────────────────────────────── */
body.on-table #screen-bench.active {
    display: flex; flex-direction: column; min-height: 100vh;
    padding: var(--head-h) 0 0;
}
body.on-table #screen-field.active,
body.on-table #screen-results.active { padding-top: calc(var(--head-h) + 1.5rem); }

/* ── THE TABLE ───────────────────────────────────────────────────────────
   The shell's .spread sizes itself as a cell of the Arcana's stage; here it
   is a plain block that holds the perspective, clear of the drawer tabs. The
   near edge stays put and the far edge leans away, so the table meets the
   dock. It sits above the off-table drop layer (#tcg-offmat, z-index 1). */
body.on-table #tcgSpread {
    position: relative; z-index: 2; grid-area: auto; container-type: normal; overflow: visible;
    display: flex; justify-content: center; align-items: flex-start; flex: 1 0 auto; min-width: 0;
    padding: .75rem calc(1.9rem + 14px) .6rem;
    perspective: 1700px; perspective-origin: 50% 0%;
}
body.on-table #tcgTable {
    --tilt: 12deg;
    width: min(100%, 1880px);
    padding: .85rem 1.5rem 1rem;
    transform-origin: 50% 100%;
}
body.on-table #tcgTable > .tcg-board { position: relative; z-index: 1; width: 100%; margin: 0; gap: 1.1rem; }
body.on-table #tcgTable > .table-lines { z-index: 0; }

/* ── THE ZONES: no box, no rail, no watermark ────────────────────────────── */
body.on-table :is(#screen-bench, #screen-field.field-table, #screen-setup) .mat-bay { background: none; box-shadow: none; border-radius: 0; min-height: 0; padding: 0 var(--zone-pad) var(--zone-pad); }
body.on-table :is(#screen-bench, #screen-field.field-table, #screen-setup) .mat-bay::before,
body.on-table :is(#screen-bench, #screen-field.field-table, #screen-setup) .mat-bay::after { display: none; }
body.on-table #screen-bench .mat-bay.coached::after { display: block; padding: 1px; inset: -6px; border-radius: 4px; }   /* the walkthrough's ring */
body.on-table .mat-bay.assault { --zone: var(--s-red); }
body.on-table .mat-bay.defence { --zone: var(--accent); }
body.on-table .mat-bay.sigils  { --zone: var(--lore); }
body.on-table .mat-bay.energy  { --zone: rgb(var(--energy-rgb)); }
body.on-table .mat-bay.bench, body.on-table .mat-bay.hand, body.on-table .mat-bay.pool, body.on-table .mat-bay.piles { --zone: var(--text-2); }

/* the zone's name, as the Arcana labels a place on its table */
body.on-table :is(#screen-bench, #screen-field.field-table, #screen-setup) .mat-bay > h4 {
    display: flex; align-items: center; gap: .55rem; min-height: 1.6rem; margin: 0 0 .35rem;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); line-height: 1.4;
    letter-spacing: var(--track-caps); text-transform: uppercase;
    color: var(--tbl-label, var(--text-2)); text-shadow: var(--tbl-text-shadow, none);
}
body.on-table :is(#screen-bench, #screen-field.field-table, #screen-setup) .mat-bay > h4::before {
    content: ''; flex: none; width: .4rem; height: .4rem; margin: 0; transform: rotate(45deg);
    background: var(--zone); box-shadow: 0 0 .55rem var(--zone);
}
body.on-table :is(#screen-bench, #screen-field.field-table, #screen-setup) .mat-bay > h4 em, body.on-table .tc-bay-word { display: none; }
body.on-table .mat-bay > h4 span { font-family: var(--font-display); font-weight: 500; letter-spacing: .08em; color: var(--text-3); }
body.on-table .mat-bay > h4 span.full { color: var(--lore); }
body.on-table .tcg-empty {
    padding: .4rem 0; opacity: 1;
    font-family: var(--font-body); font-style: italic; font-size: var(--t-small); line-height: 1.45; color: var(--text-3);
    text-shadow: var(--tbl-text-shadow, none);
}

/* the rows: the far row (assault, defence) and the near (bench, sigils, energy) */
body.on-table #tcgTable .mat-row { gap: var(--gap); }
/* the assault bay holds its three acolytes side by side; the defence bay takes
   the rest and fans when its outposts and the reserve need more */
body.on-table #tcgTable .mat-row.top {
    grid-template-columns: calc(3 * var(--card-w) + 2 * var(--slot-gap) + 2 * var(--zone-pad)) minmax(0, 1fr);
}
body.on-table #tcgTable .mat-row.mid {
    grid-template-columns: minmax(0, 1fr) calc(var(--card-w) * 1.32 + 2 * var(--zone-pad)) calc(var(--card-w) * 1.06 + 2 * var(--zone-pad));
}
body.on-table #tcgTable .mat-row.mid > .mat-bay.bench { grid-column: auto; }   /* the mat's narrow-screen rule spanned it */
body.on-table #tcgTable .mat-bay.energy, body.on-table #tcgTable .mat-bay.sigils { overflow: visible; }
/* FIXED ROWS. Every row of cards on a table keeps the height of one card (and
   the gear peeking under it) whether or not a card lies in it, so a table never
   shrinks when a bay is empty and nothing below it moves. */
body.on-table :is(#tcgTable, #screen-field.field-table, #tcgSetupTable) :is(.tcg-bay-body, .tcg-rack) { min-height: calc(var(--card-h) + 10px); }
body.on-table :is(#tcgTable, #screen-field.field-table) .tcg-bay-body > .tcg-empty { align-self: flex-start; }

/* THE FAN. A bay's row never wraps and never scrolls: when it holds more cards
   than it has room for, each card's place narrows and the card overlaps the
   next, the last one whole, as a hand of cards fans. The pointer brings a card
   to the front. */
body.on-table :is(#tcgTable, #screen-field.field-table, #tcgSetupTable) .tcg-bay-body { flex-wrap: nowrap; overflow: visible; }
body.on-table :is(#tcgTable, #screen-field.field-table, #tcgSetupTable) .tcg-bay-body > .tcg-unit { flex: 0 1 var(--card-w); min-width: calc(var(--card-w) * .28); }
body.on-table :is(#tcgTable, #screen-field.field-table, #tcgSetupTable) .tcg-bay-body > .tcg-unit:nth-last-child(1 of .tcg-unit) { flex-shrink: 0; }
body.on-table :is(#tcgTable, #screen-field.field-table) .tcg-unit .tcg-tablecard { width: var(--card-w); max-width: none; }
body.on-table :is(#tcgTable, #screen-field.field-table, #tcgSetupTable) .tcg-unit:hover { z-index: 5; }

/* THE RESERVE: a pile one card wide at the end of the defence bay. The next
   outpost is named on its face with its BUILD; tap it for the whole list. */
body.on-table .mat-bay.defence > #tcg-reserve { display: none; }
body.on-table .reserve-unit { position: relative; }
body.on-table .tcg-reserve-layer {
    position: absolute; top: 0; left: 0; width: var(--card-w); height: var(--card-h); border-radius: var(--r-in);
    background: var(--surface-2); box-shadow: 0 0 0 1px var(--stroke-strong), 0 6px 14px rgba(var(--shade-rgb), .5);
    transform: translate(calc(var(--n) * 4px), calc(var(--n) * 1.5px));
}
body.on-table .tcg-tablecard.reserve-pile { position: relative; z-index: 1; }
body.on-table .tcg-tablecard.reserve-pile::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(var(--veil-rgb), .55), rgba(var(--veil-rgb), .2) 38%, rgba(var(--veil-rgb), .92) 70%);
}
body.on-table .tcg-tablecard.reserve-pile.fresh { box-shadow: 0 12px 30px rgba(var(--shade-rgb), .72), 0 0 0 1px var(--lore); }
body.on-table .tc-reserve-head {
    position: absolute; top: .55rem; left: .7rem; right: .7rem; z-index: 2; display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); color: var(--text-2);
}
body.on-table .tc-reserve-head b { font-size: 1.2rem; letter-spacing: 0; color: var(--lore); }
body.on-table .tc-reserve-foot { position: absolute; inset: auto .6rem .6rem; z-index: 2; display: grid; gap: .2rem; justify-items: start; }
body.on-table .tc-reserve-foot b { font-family: var(--font-body); font-weight: 600; font-size: clamp(.8125rem, calc(var(--card-w) * .08), 1rem); line-height: 1.2; color: var(--text-1); }
body.on-table .tc-reserve-foot span { margin-bottom: .3rem; font-family: var(--font-display); font-size: var(--t-label); letter-spacing: .06em; color: var(--text-3); }

/* ── THE CARDS ON THE TABLE ──────────────────────────────────────────────── */
body.on-table #tcgTable .tcg-unit { position: relative; width: var(--card-w); }
/* the face: the art alone */
body.on-table :is(#tcgTable, #screen-field.field-table) :is(.tc-plate, .tc-status, .tc-rank, .tc-items, .tc-garrison, .tc-exposed),
body.on-table :is(#tcgTable, #screen-field.field-table) :is(.tcg-unitstats, .tcg-unitline) { display: none; }
/* the status as the card's own look: spent and down are dimmed, engaged glows gold */
body.on-table .tcg-tablecard.s-spent { filter: saturate(.55) brightness(.72); }
body.on-table .tcg-tablecard.s-down { filter: grayscale(.85) brightness(.55); }
body.on-table .tcg-tablecard.s-engaged { box-shadow: 0 12px 30px rgba(var(--shade-rgb), .72), 0 0 0 1px var(--lore), 0 0 1.4rem color-mix(in srgb, var(--lore) 35%, transparent); }
@media (prefers-reduced-motion: no-preference) {
    body.on-table :is(#tcgTable, #screen-field.field-table) .tcg-tablecard:not(.lifted):hover { transform: translateY(-6px) rotate(-.5deg); }
}
/* gear fitted under a card peeks out below it */
body.on-table :is(#tcgTable, #screen-field.field-table) .tc-edges { height: 9px; }
body.on-table :is(#tcgTable, #screen-field.field-table) .tc-edge { height: 9px; border-radius: 0 0 3px 3px; }

/* the numbers, on a plate that rises when the pointer rests on the card */
body.on-table .tc-hover {
    display: grid; gap: .1rem; position: absolute; inset: auto 0 0 0; z-index: 3; padding: 1.6rem .7rem .6rem;
    background: linear-gradient(180deg, transparent, rgba(var(--veil-rgb), .9) 42%);
    opacity: 0; transform: translateY(5px); pointer-events: none; transition: opacity .18s, transform .18s;
    text-align: left; line-height: 1.3;
}
body.on-table .tc-hover b { font-family: var(--font-body); font-weight: 600; font-size: clamp(.8125rem, calc(var(--card-w) * .08), 1rem); color: var(--text-1); }
body.on-table .tc-hover span { font-family: var(--font-display); font-weight: 500; font-size: var(--t-label); letter-spacing: .06em; color: var(--text-2); }
body.on-table .tc-hover em { font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); color: var(--lore); }
body.on-table .tc-hover em.s-down, body.on-table .tc-hover em.s-exposed { color: var(--s-red); }
body.on-table .tcg-tablecard:hover .tc-hover, body.on-table .tcg-tablecard:focus-visible .tc-hover { opacity: 1; transform: none; }
/* on a touch screen there is no pointer to rest: a tap opens the card in full instead */
@media (hover: none) { body.on-table .tc-hover { display: none; } }
/* harm taken, as a hairline along the foot of the card */
body.on-table .tc-hp {
    display: block; position: absolute; left: 9%; right: 9%; bottom: 7px; z-index: 2; height: 2px;
    background: linear-gradient(90deg, var(--s-red) var(--hp), rgba(var(--ink-rgb), .18) var(--hp));
    box-shadow: 0 0 6px rgba(var(--s-red-rgb), .6);
}
body.on-table .tcg-tablecard:hover .tc-hp { opacity: 0; }

/* the energy token and the sigils are table cards too, each centred in its bay */
body.on-table #tcg-energy-pile, body.on-table #tcg-sigil-rack { flex-direction: column; align-items: center; width: auto; margin-inline: auto; }
body.on-table #screen-bench .mat-bay.energy #tcg-energy-pile > *, body.on-table #screen-bench .mat-bay.sigils .tcg-rack { margin-inline: auto; }
body.on-table .tcg-energy-stack { margin-top: 0; }
/* the layers behind the token step right and down, so the pile never climbs over the zone's name */
body.on-table .tcg-energy-layer { transform: translate(calc(var(--n) * 4px), calc(var(--n) * 1.5px)); }
body.on-table .tc-tokenface { font-family: var(--font-display); font-size: calc(var(--card-w) * .15); }
/* the sigils: the front card centred, the ones behind it peeking out to its right */
body.on-table .tcg-sigil-stack { width: var(--card-w); height: var(--card-h); }
body.on-table .tcg-rack:hover .tcg-sigil-stack { height: var(--card-h); }
body.on-table .tcg-sigil-card { top: 0; left: calc(var(--n) * 10px); right: auto; width: var(--card-w); transition: left .24s ease, transform .24s cubic-bezier(.2, .9, .3, 1.3); }
body.on-table .tcg-rack:hover .tcg-sigil-card { top: 0; left: calc(var(--n) * 22px); }
body.on-table .tcg-sigil-next { display: none; }
body.on-table .tcg-sigil-card.next .tcg-card { box-shadow: 0 12px 30px rgba(var(--shade-rgb), .7), 0 0 0 1px var(--lore); }
/* the charge is the card's: the bay stays plain, the front card glows and the
   motes rise inside its face (sigilMotes fills #tcg-motes, laid over the card) */
body.on-table #screen-bench .mat-sigils.charged { background: none; box-shadow: none; }
body.on-table .mat-sigils.charged .tcg-sigil-card.next .tcg-card {
    box-shadow: 0 12px 30px rgba(var(--shade-rgb), .7), 0 0 0 1px var(--lore), 0 0 1.6rem color-mix(in srgb, var(--c-cyan) 45%, transparent);
}
body.on-table #screen-bench .mat-bay.sigils .tcg-motes {
    inset: auto; left: 50%; top: calc(1.6rem + .35rem); width: var(--card-w); height: var(--card-h);
    transform: translateX(-50%); border-radius: var(--r-in); z-index: 2;
}

/* the drop spaces that appear while a card is held: every one is one card, the
   same size as the cards it takes, and the line that says the bay is empty
   steps aside while they show */
body.on-table :is(#screen-bench, #screen-field.field-table) .tcg-drop,
body.on-table :is(#screen-bench, #screen-field.field-table) .tcg-drop:is(.tall, .slim) { flex: none; width: var(--card-w); height: var(--card-h); }
body.on-table.dragging #screen-bench .tcg-bay-body > .tcg-empty,
body.on-table.dragging #screen-bench .tcg-rack > .tcg-empty { display: none; }
/* with sigils racked, the space to rack one more lies over the front card */
body.on-table #screen-bench .tcg-rack > .tcg-sigil-stack ~ .tcg-drop { position: absolute; top: 0; left: 50%; z-index: 30; transform: translateX(-50%); }
body.on-table .tcg-drop {
    border-radius: 4px; background: color-mix(in srgb, var(--accent) 5%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.on-table .tcg-drop.legal { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 40px color-mix(in srgb, var(--accent) 25%, transparent); }
body.on-table .tcg-drop-label, body.on-table .tcg-drop-verb { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); }

/* ── THE DOCK: the cards you hold, flat, in front of the table ───────────── */
body.on-table .tcg-dock {
    --card-w: calc(var(--tw) * .8);
    --card-h: calc(var(--card-w) * 1.4);
    position: relative; z-index: 3; width: 100%; max-width: none; margin: 0;
    padding: .4rem 1.5rem .7rem calc(var(--tw) * .68 + 3rem);
    background: var(--plate); border-top: 1px solid var(--stroke);
    box-shadow: 0 -1.5rem 3rem -1.5rem var(--shadow);
}
body.on-table .tcg-dock .mat-row.dock { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.65fr) auto; gap: 2rem; }
body.on-table #screen-bench .tcg-dock .mat-bay { padding: 0; }
body.on-table #screen-bench .tcg-dock .mat-bay + .mat-bay { padding-left: 2rem; border-left: 1px solid var(--stroke); }
body.on-table #screen-bench .tcg-dock .mat-bay h4 { color: var(--text-2); text-shadow: none; margin-bottom: .25rem; }
body.on-table .tcg-dock .tcg-fan { padding: 0; min-height: var(--card-h); }
/* the hand lies against the pool, at the right of its space */
body.on-table #tcg-hand .tcg-fan { justify-content: flex-end; }
body.on-table #tcg-hand > .tcg-empty { text-align: right; }
body.on-table .tcg-dock .tcg-unitstats { display: none; }
body.on-table .tcg-dock .tc-plate { display: none; }
body.on-table #tcg-discard-hand, body.on-table #tcg-pool-tools .tcg-pool-tool { margin-left: .4rem; }
/* a hand card's plate: the name and its price */
body.on-table .tcg-card-plate em {
    display: block; margin-top: .15rem; font-style: normal; font-family: var(--font-display); font-weight: 600;
    font-size: var(--t-label); letter-spacing: .08em; color: var(--lore);
}
body.on-table .tcg-card-plate span { font-family: var(--font-body); font-weight: 600; font-size: clamp(.75rem, calc(var(--card-w) * .08), .9375rem); letter-spacing: 0; color: var(--text-1); }
body.on-table .tcg-card-plate { background: linear-gradient(180deg, transparent, rgba(var(--veil-rgb), .92) 46%); }
/* creature numbers and the charge of a crystal show with the plate, not before */
body.on-table .tcg-card-cstats { opacity: 0; transition: opacity .18s; }
body.on-table :is(.tcg-card:hover, .tcg-fan-card:hover) .tcg-card-cstats { opacity: 1; }

/* the discard pile, at the left end of the dock */
body.on-table #tcg-discard-pile { width: calc(var(--tw) * .68); left: 1.5rem; bottom: .8rem; }
body.on-table #tcg-discard-pile .tcg-tablecard { width: 100%; height: auto; aspect-ratio: 5 / 7; }
body.on-table .tcg-offmat-hint { font-family: var(--font-display); font-size: var(--t-label); letter-spacing: var(--track-caps); }

/* ── THE FIELD ON THE TABLE ──────────────────────────────────────────────
   While no fight runs, the field's board IS the table (19-table.js gives it
   the shell's .table class): their ground at the far edge, the exchange and
   the market across the middle, your acolytes at the near edge. Its cards are
   the bench's: one size, the art alone, the numbers on hover. When a fight
   starts the class comes off, and the arena takes the screen as it always has.
     card size  three rows; the near one, the acolytes you sent, at 0.8
       height   (100vh - 33rem) / 2.52       width   (100vw - 300px) / 8 */
body.on-table #screen-field.field-table.active {
    --fw: clamp(104px, min((100vh - 33rem) / 2.52, (100vw - 300px) / 8), 220px);
    --card-w: var(--fw);
    --card-h: calc(var(--card-w) * 1.4);
    display: flex; justify-content: center; align-items: flex-start; min-height: 100vh;
    padding: calc(var(--head-h) + .75rem) calc(1.9rem + 14px) 1.25rem;
    perspective: 1700px; perspective-origin: 50% 0%;
}
:root[data-skin="futura"] body.on-table #screen-field.field-table {
    filter: drop-shadow(0 .45rem 0 var(--tbl-thick, #050309)) drop-shadow(0 0 1.25rem var(--tbl-halo, transparent)) drop-shadow(0 2rem 1.5rem rgba(0, 0, 0, .55));
}
body.on-table #screen-field.field-table > .tcg-board.table {
    --tilt: 13deg;
    width: min(100%, 1880px); margin: 0; padding: .85rem 1.5rem 1rem; gap: 1.1rem;
    transform-origin: 50% 100%;
}
body.on-table #screen-field.field-table > .tcg-board > :not(.table-lines, .table-motion) { position: relative; z-index: 1; }   /* R020: the motion layer stays under the lines */
#screen-field:not(.field-table) #tcgFieldLines { display: none; }
body.on-table #screen-field.field-table .field-middle {
    gap: var(--gap); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); padding: 0; margin: 0;
    min-height: max(15.75rem, calc(var(--fw) * 1.4 + 3.5rem));   /* a fixed row: the exchange's ground, or the hint while none is chosen */
}
/* the market's listings lie in one row and fan, as every row on the table does */
body.on-table #screen-field.field-table .tcg-market-group { margin-bottom: .6rem; }
body.on-table #screen-field.field-table .tcg-market-rail { flex-wrap: nowrap; gap: 10px; }
body.on-table #screen-field.field-table .tcg-market-card { flex: 0 1 calc(var(--fw) * .62); width: auto; min-width: calc(var(--fw) * .18); position: relative; }
body.on-table #screen-field.field-table .tcg-market-card:last-child { flex-shrink: 0; }
body.on-table #screen-field.field-table .tcg-market-card .tcg-card { width: calc(var(--fw) * .62); height: auto; aspect-ratio: 5 / 7; }
body.on-table #screen-field.field-table .tcg-market-card:hover { z-index: 5; }
/* the price lies on the card's foot, so a fanned listing keeps its price in view; the chance is on hover */
body.on-table #screen-field.field-table .tcg-market-meta {
    position: absolute; left: 0; bottom: 0; width: calc(var(--fw) * .62); z-index: 2; margin: 0; padding: 1.1rem .45rem .35rem;
    display: flex; justify-content: space-between; align-items: baseline; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(var(--veil-rgb), .92) 55%); border-radius: 0 0 var(--r-in) var(--r-in);
}
body.on-table #screen-field.field-table .tcg-market-meta b { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--lore); }
body.on-table #screen-field.field-table .tcg-market-meta span { opacity: 0; transition: opacity .18s; font-family: var(--font-display); font-size: var(--t-label); }
body.on-table #screen-field.field-table .tcg-market-card:hover .tcg-market-meta span { opacity: 1; }
@media (hover: none) { body.on-table #screen-field.field-table .tcg-market-meta span { opacity: 1; } }
body.on-table #screen-field.field-table .mat-bay.exchange { min-height: 0; }
body.on-table #screen-field.field-table .mat-bay.ground   { --zone: var(--house, var(--text-2)); }
body.on-table #screen-field.field-table .mat-bay.exchange { --zone: var(--accent); }
body.on-table #screen-field.field-table .mat-bay.market   { --zone: var(--lore); }
body.on-table #screen-field.field-table .mat-bay.mine     { --zone: var(--text-2); }
body.on-table #screen-field.field-table .tcg-bay-body { gap: var(--slot-gap); }
body.on-table #screen-field.field-table .mat-bay.mine { --card-w: calc(var(--fw) * .8); --card-h: calc(var(--card-w) * 1.4); }

/* their ground's head: the arrows at its two ends, the house named as a zone is */
body.on-table #screen-field.field-table .tcg-ground-head { gap: .85rem; min-height: 1.9rem; margin: 0 0 .45rem; }
/* the arrows are the shell's icon buttons (round under Palisade, cut under Futura) */
body.on-table .tcg-arrow.icon-btn { width: 2.25rem; height: 2.25rem; font-size: inherit; background-color: var(--surface-1); color: var(--text-2); box-shadow: none; }
body.on-table .tcg-arrow.icon-btn:disabled { opacity: .35; }
body.on-table #screen-field.field-table .tcg-arrow:last-of-type { order: 9; margin-left: auto; }
body.on-table #screen-field.field-table .tcg-flag.chip { width: 1.6rem; height: 2.25rem; }
body.on-table #screen-field.field-table .tcg-ground-name { flex: 0 1 auto; display: flex; align-items: baseline; gap: .9rem; }
body.on-table #screen-field.field-table .tcg-ground-name b {
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase;
}
body.on-table #screen-field.field-table .tcg-ground-name span { display: inline; margin: 0; font-family: var(--font-body); font-size: var(--t-small); color: var(--text-2); }
/* THE EXPOSED MARKS, as the shell writes a chip: a small box in the label face, the
   house apart from its count, the assault colour on the count. The house you face is lit. */
body.on-table #screen-field.field-table .tcg-exposed-marks { margin-left: 0; align-items: center; gap: .4rem; }
body.on-table .tcg-exposed-lbl { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-3); margin-right: .2rem; }
body.on-table .tcg-exposed-pip {
    --cut: var(--cut-s, 0px);
    display: inline-flex; align-items: baseline; gap: .55em; padding: .3rem .6rem; cursor: pointer;
    border-radius: 2px; background: rgba(var(--s-red-rgb), .08); box-shadow: none;
    border: 1px solid rgba(var(--s-red-rgb), .45);
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase;
    color: var(--text-2); filter: none;
}
:root[data-skin="futura"] body.on-table .tcg-exposed-pip { border-radius: 0; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
body.on-table .tcg-exposed-pip b { font-size: var(--t-label); letter-spacing: 0; color: var(--s-red); }
body.on-table .tcg-exposed-pip:hover { color: var(--text-1); border-color: var(--s-red); filter: none; }
body.on-table .tcg-exposed-pip.here { color: var(--text-1); background: rgba(var(--s-red-rgb), .16); border-color: var(--s-red); box-shadow: none; }

/* the exchange and the market, in the drawer's voice */
body.on-table #screen-field.field-table .tcg-exchange-idle { padding: .4rem 0 0; text-align: left; }
body.on-table #screen-field.field-table .tcg-exchange-idle h4 {
    margin: 0 0 .4rem; font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); color: var(--accent);
}
body.on-table #screen-field.field-table .tcg-exchange-idle p { max-width: 52ch; margin: 0 0 .35rem; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; color: var(--text-2); }
body.on-table #screen-field.field-table .tcg-exchange-idle p.dim { color: var(--text-3); }
body.on-table #screen-field.field-table .tcg-insp-head { margin-bottom: .6rem; }
body.on-table #screen-field.field-table .tcg-insp-title h4 { margin: 0 0 .1rem; font-family: var(--font-body); font-weight: 600; font-size: var(--t-name); letter-spacing: 0; color: var(--text-1); }
body.on-table #screen-field.field-table .tcg-insp-title span { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-3); }
body.on-table #screen-field.field-table .tcg-insp-stats { gap: 0; margin-bottom: .7rem; }
body.on-table #screen-field.field-table .tcg-insp-stats div { padding: 0 1.1rem; border-left: 1px solid var(--stroke); }
body.on-table #screen-field.field-table .tcg-insp-stats div:first-child { padding-left: 0; border-left: 0; }
body.on-table #screen-field.field-table .tcg-insp-stats span { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); color: var(--text-3); }
body.on-table #screen-field.field-table .tcg-insp-stats b { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--text-1); }
body.on-table #screen-field.field-table .tcg-mystery-note {
    margin-bottom: .8rem; padding: .3rem 0 .35rem .9rem; border-radius: 0; background: none; border-left: 2px solid var(--lore);
    font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; color: var(--text-2);
}
body.on-table #screen-field.field-table .tcg-btn.wide { width: auto; min-width: 14rem; margin-top: 0; }
body.on-table #screen-field.field-table .tcg-market-group h5 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); }
body.on-table #screen-field.field-table .tcg-market-meta b { font-family: var(--font-display); color: var(--lore); }

/* the discard pile belongs to the bench and its dock, and nowhere else */
body.on-table:not(:has(#screen-bench.active)) #tcg-discard-pile { display: none !important; }

/* ── THE WALKTHROUGH'S NOTE ───────────────────────────────────────────────
   On the table the note floats over the far row, under the head, and the bay
   it points at keeps its ring. In the bay it would push the table taller than
   the screen. 18-tutorial.js puts it here when the table is on. */
#tcg-coach-host { display: none; }
body.on-table #tcg-coach-host {
    display: block; position: fixed; z-index: 57; top: calc(var(--head-h) + 1rem); left: 50%;
    width: min(34rem, calc(100vw - 6rem)); transform: translateX(-50%); pointer-events: none;
}
body.on-table #tcg-coach-host:empty { display: none; }
body.on-table #tcg-coach-host .tcg-coach {
    pointer-events: auto; max-width: none; margin: 0; padding: 1rem 1.25rem 1rem 1.35rem; border-radius: 0;
    background: var(--plate-solid); border: 1px solid var(--stroke-strong); border-left: 2px solid var(--accent);
    box-shadow: 0 1.5rem 3rem -1rem var(--shadow);
}
body.on-table .tcg-coach-step { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); color: var(--accent); opacity: 1; }
body.on-table .tcg-coach-title { margin: .2rem 0 .45rem; font-family: var(--font-body); font-weight: 600; font-size: var(--t-name); letter-spacing: 0; text-transform: none; color: var(--text-1); }
body.on-table .tcg-coach-body { margin: 0 0 .8rem; font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; color: var(--text-2); }
body.on-table .tcg-coach-body b { color: var(--lore); }

/* ── THE DRAWERS ─────────────────────────────────────────────────────────
   The Arcana's drawers, sliding OVER the table from each side: a plate with a
   hairline on its inner edge and a tab that opens and closes it. */
body.on-table .tcg-drawer {
    position: fixed; top: var(--head-h); bottom: 0; z-index: 55; width: var(--dw);
    transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}
/* only beside the table and the field: setup, loading and the results have no drawers */
body.on-table:not(:has(#screen-bench.active, #screen-field.active)) .tcg-drawer { display: none; }
body.on-table .tcg-drawer-left { left: 0; --dw: 21rem; transform: translateX(-100%); }
body.on-table .tcg-drawer-right { right: 0; --dw: var(--detail-w); transform: translateX(100%); }
body.on-table .tcg-drawer[data-state="open"] { transform: none; }
body.on-table .tcg-drawer > .drawer-inner {
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 1.1rem; padding: 1.5rem 1.6rem 2rem;
    background: var(--plate); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.on-table .tcg-drawer-left > .drawer-inner { border-right: 1px solid var(--stroke); box-shadow: 2rem 0 4rem -2rem var(--shadow); }
body.on-table .tcg-drawer-right > .drawer-inner { border-left: 1px solid var(--stroke); box-shadow: -2rem 0 4rem -2rem var(--shadow); }
body.on-table .tcg-drawer > .drawer-inner::-webkit-scrollbar { width: 6px; }
body.on-table .tcg-drawer > .drawer-inner::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }
body.on-table .tcg-drawer > .drawer-tab {
    position: absolute; top: 50%; z-index: 3; display: grid; justify-items: center; gap: .5rem;
    width: 1.9rem; padding: .9rem 0; transform: translateY(-50%); cursor: pointer;
    background: var(--plate-solid); border: 1px solid var(--stroke-strong); color: var(--text-2);
}
body.on-table .tcg-drawer > .drawer-tab:hover { color: var(--text-1); border-color: var(--accent); }
body.on-table .tcg-drawer > .drawer-tab .label { writing-mode: vertical-rl; color: inherit; }
body.on-table .tcg-drawer > .drawer-tab svg { width: .8rem; height: .8rem; transition: transform .3s ease; }
body.on-table .tcg-drawer-left > .drawer-tab { right: -1.9rem; border-left: 0; }
body.on-table .tcg-drawer-right > .drawer-tab { left: -1.9rem; border-right: 0; }
body.on-table .tcg-drawer-right > .drawer-tab .label { transform: rotate(180deg); }
body.on-table .tcg-drawer-left[data-state="open"] > .drawer-tab svg,
body.on-table .tcg-drawer-right[data-state="closed"] > .drawer-tab svg { transform: rotate(180deg); }
body.on-table .tcg-drawer .label-gold { margin: 0; }
.tcg-tray-head, .tcg-tray-btn { display: none; }
body.on-table .tcg-tray-part { display: flex; flex-direction: column; gap: 1.1rem; }
body.on-table #tcg-log { display: none; }
body.on-table #tcg-toasts { top: calc(var(--head-h) + 1rem); }
body.on-table.right-open #tcg-toasts { right: calc(var(--detail-w) + 1.25rem); }

/* the table (left): the houses, each with a rail of its colour, as the
   Arcana lists the cards of a reading */
body.on-table .tcg-houses { display: grid; gap: .6rem; }
body.on-table .tcg-house {
    display: grid; gap: .2rem; justify-items: start; padding: .7rem .9rem .75rem 1rem;
    border-left: 2px solid var(--c); border-radius: 0 3px 3px 0;
}
body.on-table .tcg-house.playing { background: var(--accent-wash); }
body.on-table .tcg-house.out { opacity: .5; }
body.on-table .tcg-house .label { color: var(--text-3); }
body.on-table .tcg-house h4 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--t-name); letter-spacing: 0; text-transform: none; color: var(--text-1); }
body.on-table .tcg-house-line { margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--text-2); }
body.on-table .tcg-house-line .num { margin-right: .3em; color: var(--lore); }
body.on-table .tcg-house .link-btn { margin-top: .25rem; }
body.on-table .tcg-income { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; margin: 0; font-size: var(--t-small); }
body.on-table .tcg-income dt { color: var(--text-2); }
body.on-table .tcg-income dd { margin: 0; text-align: right; font-family: var(--font-display); font-weight: 600; color: rgb(var(--energy-text-rgb, var(--energy-rgb))); }
body.on-table .tcg-income .bad { color: var(--s-red); }
body.on-table .tcg-income .sum { padding-top: .35rem; border-top: 1px solid var(--stroke); color: var(--text-1); font-weight: 600; }
/* THE LOG, as the combat log panel wrote it: the game's mono face, a hairline
   between entries, and the colour of what happened (damage, ground and loot,
   energy, a kill, a sigil). Newest first, with the chapter it happened in. */
body.on-table .tcg-side-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
body.on-table .tcg-side-log .tcg-log-line {
    padding: .4rem 0; border-top: 1px solid var(--stroke);
    font-family: var(--font-mono); font-size: .78rem; line-height: 1.45; color: var(--text-2);
}
body.on-table .tcg-side-log .tcg-log-line.damage { color: var(--c-2); }
body.on-table .tcg-side-log .tcg-log-line:is(.capture, .victory, .loot) { color: var(--c-gold); }
body.on-table .tcg-side-log .tcg-log-line:is(.energy, .build) { color: var(--c-acid); }
body.on-table .tcg-side-log .tcg-log-line:is(.kill, .eliminated) { color: var(--c-danger); }
body.on-table .tcg-side-log .tcg-log-line.sigil { color: var(--c-violet); }
body.on-table .tcg-side-log .tcg-log-chapter { margin-top: .9rem; padding-bottom: .35rem; color: var(--text-3); }
body.on-table .tcg-side-log .tcg-log-chapter:first-child { margin-top: 0; }

/* the card (right): the detail panel in the Arcana's reading voice */
body.on-table #tcg-detail {
    position: static; inset: auto; width: auto; z-index: auto; padding: 0; overflow: visible;
    background: none; border: 0; transform: none; transition: none;
}
body.on-table .tcg-card-empty { display: grid; gap: .6rem; }
body.on-table .tcg-card-empty p { margin: 0; font-style: italic; font-size: var(--t-small); line-height: 1.5; color: var(--text-3); }
body.on-table .dt-head { align-items: center; gap: .75rem; margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--stroke); }
body.on-table .dt-title h3 { margin: 0 0 .15rem; font-family: var(--font-body); font-weight: 600; font-size: var(--t-name); line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--text-1); }
body.on-table .dt-title span { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-3); }
/* back and close are the shell's icon buttons */
body.on-table :is(.dt-back, .dt-close).icon-btn { flex: none; width: 2.25rem; height: 2.25rem; padding: 0; font-size: inherit; background-color: var(--surface-1); color: var(--text-2); }
body.on-table .dt-hero { gap: .9rem; margin-bottom: 1.1rem; }
/* THE PORTRAIT BESIDE ITS NUMBERS, and the slots four across, so every slot is
   on screen from 900 tall while a card is held over the drawer */
body.on-table #tcg-detail { display: grid; grid-template-columns: 42% minmax(0, 1fr); column-gap: 1.1rem; align-content: start; }
body.on-table #tcg-detail > * { grid-column: 1 / -1; }
body.on-table #tcg-detail > .dt-hero { grid-column: 1; grid-row: span 2; flex-direction: column; gap: .5rem; }
body.on-table #tcg-detail > .dt-stats { grid-column: 2; grid-template-columns: 1fr 1fr; row-gap: .9rem; align-self: start; }
body.on-table #tcg-detail > .dt-bars { grid-column: 2; align-self: end; }
body.on-table .dt-portrait { flex: 0 0 auto; width: 100%; border-radius: 4px; box-shadow: 0 1rem 2rem -1rem var(--shadow); }
body.on-table .dt-hero .tcg-flag.tall { width: 100%; height: 3rem; }
body.on-table .dt-hero .tcg-flag.tall .tcg-flag-name { inset: auto 0 .45rem 0; }
body.on-table #tcg-detail .dt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* a card read in full: its face beside its numbers and its verbs, so BUY, SELL
   and the rest are on screen without scrolling (in the drawer and the sheet) */
body.on-table #tcg-detail:has(> .dt-bigcard) { grid-auto-flow: row dense; }
body.on-table #tcg-detail > .dt-bigcard { grid-column: 1; grid-row: 2 / span 3; width: 100%; height: auto; aspect-ratio: 5 / 7; margin: 0 0 1.1rem; }
body.on-table #tcg-detail:has(> .dt-bigcard) > :is(.dt-stats, .dt-bars, .dt-actions) { grid-column: 2; }
body.on-table #tcg-detail:has(> .dt-bigcard) > .dt-actions { align-self: start; flex-wrap: wrap; }
body.on-table .dt-stats { gap: 0; margin-bottom: 1.1rem; }
body.on-table .dt-stats div { padding: .1rem .7rem; border-radius: 0; background: none; border-left: 1px solid var(--stroke); text-align: left; }
body.on-table .dt-stats div:first-child, body.on-table #tcg-detail > .dt-stats div:nth-child(odd) { border-left: 0; padding-left: 0; }
body.on-table .dt-stats span { margin-bottom: .15rem; font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); color: var(--text-3); }
body.on-table .dt-stats b { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--text-1); }
body.on-table .dt-bars .tcg-bar { height: 4px; border-radius: 0; background: rgba(var(--ink-rgb), .12); overflow: visible; margin-top: 1.1rem; }
body.on-table .dt-bars .tcg-bar span { inset: auto auto 7px 0; display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: .08em; color: var(--text-2); text-shadow: none; }
body.on-table :is(.dt-perk, .dt-merc) { padding: .55rem 0 .6rem 1rem; border-radius: 0 3px 3px 0; background: none; border-left: 2px solid var(--lore); }
body.on-table :is(.dt-perk, .dt-merc) b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); color: var(--text-3); }
body.on-table .dt-perk p { margin-top: .2rem; font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5; color: var(--text-1); }
body.on-table .dt-lock { border-radius: 0; background: none; border-left: 2px solid var(--lore); padding: .45rem 0 .45rem 1rem; font-family: var(--font-body); font-size: var(--t-small); }
body.on-table :is(.dt-hint, .dt-offer-note) { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; color: var(--text-2); }
body.on-table .dt-grid { gap: .6rem; }
/* THE SLOTS. Each is one card, 5:7, the same box whether it is empty or not,
   and a card in it fills it to the edge: the empty slot is the dashed outline
   of the card that will lie there. The slot's name sits at the top of the box;
   over a card it lies on a veil, and the card's own plate names the card. */
body.on-table .dt-slot {
    position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; height: auto; min-height: 0;
    padding: 0; border: 0; border-radius: 4px; background: none; box-shadow: none;
}
body.on-table .dt-slot:not(.filled) {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px dashed var(--stroke-strong); background: rgba(var(--veil-rgb), .18);
}
body.on-table .dt-slot-label {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3; margin: 0; padding: .55rem .3rem 0;
    text-align: center; pointer-events: none; opacity: 1;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: .12em; line-height: 1.2; color: var(--text-3);
}
body.on-table .dt-slot-hint { margin: 1rem 0 0; font-family: var(--font-body); font-style: italic; font-size: var(--t-small); opacity: .8; color: var(--text-3); }
body.on-table .dt-slot.filled > .tcg-card {
    position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 4px;
}
body.on-table .dt-slot.filled > .dt-slot-label {
    padding: .4rem .3rem 1.1rem; border-radius: 4px 4px 0 0; color: var(--text-2);
    background: linear-gradient(180deg, rgba(var(--veil-rgb), .82), rgba(var(--veil-rgb), 0));
}
/* the garrison: the acolyte's face fills the box, the name and health on its foot */
body.on-table .dt-slot.garrison-slot .dt-slot-art { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 4px; }
body.on-table .dt-slot.garrison-slot :is(.dt-slot-name, .dt-slot-sub) {
    position: absolute; left: .45rem; right: .3rem; z-index: 3; margin: 0; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.on-table .dt-slot.garrison-slot .dt-slot-name { bottom: 1.5rem; font-family: var(--font-body); font-weight: 600; font-size: var(--t-small); line-height: 1.2; color: var(--text-1); }
body.on-table .dt-slot.garrison-slot .dt-slot-sub { bottom: .5rem; font-family: var(--font-display); font-weight: 500; font-size: .6875rem; letter-spacing: .04em; line-height: 1.2; color: var(--text-2); }
body.on-table .dt-slot .tcg-card-plate { padding: 1rem .45rem .5rem; }
body.on-table .dt-slot .tcg-card-plate span { font-size: .75rem; line-height: 1.25; overflow-wrap: anywhere; }
/* a card with no art of its own shows its name without waiting for the pointer */
body.on-table .tcg-card:not([style*="background-image"]) .tcg-card-plate { opacity: 1; transform: none; }
body.on-table .dt-slot.garrison-slot::after {
    content: ''; position: absolute; inset: 45% 0 0; z-index: 2; border-radius: 0 0 4px 4px; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--veil-rgb), 0), rgba(var(--veil-rgb), .9) 60%);
}
body.on-table .tcg-detail h5, body.on-table .dt-ladder-kind { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); color: var(--text-3); }

/* ── THE GAME'S BUTTONS: the shell's ─────────────────────────────────────── */
body.on-table .tcg-btn {
    --cut: var(--cut-m, 0px);
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-button); letter-spacing: .16em;
    color: var(--text-1); background: var(--surface-1); border-color: var(--stroke-strong);
}
body.on-table .tcg-btn:hover:not(:disabled) {
    border-color: var(--accent-line);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 22px color-mix(in srgb, var(--accent) 10%, transparent);
}
body.on-table .tcg-btn.primary { background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); border-color: var(--accent-line); color: var(--accent-hi); }
body.on-table .tcg-btn.primary:hover:not(:disabled) { background: var(--accent); color: var(--surface-0); filter: none; }
body.on-table .tcg-btn.tiny { --cut: min(5px, var(--cut-m, 0px)); font-size: var(--t-label); letter-spacing: .12em; padding: .35rem .65rem; }
/* under Palisade a button is the shell's: no cut, a 2px corner */
:root:not([data-skin="futura"]) body.on-table .tcg-btn { clip-path: none; border-radius: 2px; }
:root:not([data-skin="futura"]) body.on-table .tcg-btn::before, :root:not([data-skin="futura"]) body.on-table .tcg-btn::after { display: none; }
body.on-table .tcg-btn:focus-visible { outline-color: var(--lore); }

/* ── THE GAME'S OWN PIECES, IN THE LOOK (R018) ─────────────────────────────
   What the R017 review found still drawn in the game's first design, redrawn
   in the shell's voice. The bridge above already turns their colours; these
   rules turn their type, sizes and corners. */

/* NOTHING ON THE TABLE UNDER THE LABEL SIZE. The game's sheet set small print at
   7 to 10.5px; on the table it is the look's label size or larger. */
body.on-table :is(.tcg-flag-name, .dt-shop .tcg-btn.tiny :is(em, i), .tcg-market-group h5 em, .tcg-insp-stats span,
    .tcg-extract-of, .tcg-dhead-role, .tcg-dsect > span, .tcg-plate-pt i, .tcg-bar span, .tcg-centre-head span,
    #tcg-dice-stage u, .tcg-die-vs span, .tcg-qcard span, .tcg-comms-head, .tcg-comms-head em,
    .tcg-podium-plate .who i, .tcg-ledger-row .lbl, .tcg-ledger-row i, .tcg-exposed-pip, .tcg-market-elsewhere-lbl) {
    font-size: var(--t-label);
}
body.on-table .tcg-extract-who :is(span, em) { font-size: var(--t-small); }
body.on-table #screen-field.fighting :is(.tcg-dhead-role, .tcg-dsect > span, .tcg-plate-pt i, .tcg-bar span, .tcg-centre-head span,
    #tcg-dice-stage u, .tcg-die-vs span, .tcg-qcard span) { font-size: var(--t-label); }
body.on-table #tcg-comms :is(.tcg-comms-head, .tcg-comms-head em) { font-size: var(--t-label); }
/* the crystal meter on a card's foot: tall enough for the label size; the bar says when it is empty */
body.on-table .tcg-xtal { height: 1.05rem; }
body.on-table .tcg-xtal b { font-family: var(--font-num); font-size: var(--t-label); letter-spacing: .02em; }
/* a soul crystal has no fill, so its word (SOUL or EMPTY) stays beside the count; a small card shows the count alone */
body.on-table .tcg-xtal span { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); margin-left: .4em; }
body.on-table .tcg-card.small .tcg-xtal { height: .95rem; }
body.on-table .tcg-card.small .tcg-xtal b { font-size: var(--t-label); }
/* the counts on a pile and on the energy token, in the look's display face */
body.on-table .tc-pilecount { font-family: var(--font-display); font-weight: 600; }
body.on-table .tc-name { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--track-caps); }
body.on-table .tcg-flag-name { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--track-caps); }

/* THE TOASTS: the shell's plate, a rail of meaning on the left (lore for a
   gain, assault for a refusal), the body face */
body.on-table .tcg-toast {
    padding: .75rem 1rem .8rem 1.05rem; border-radius: 2px;
    background: var(--plate-solid); border: 1px solid var(--stroke-strong); border-left: 2px solid var(--accent);
    box-shadow: 0 1rem 2.5rem -1rem var(--shadow);
    font-family: var(--font-body); font-size: var(--t-small); line-height: 1.45; color: var(--text-1);
}
body.on-table .tcg-toast.good { border-left-color: var(--lore); box-shadow: 0 1rem 2.5rem -1rem var(--shadow); color: var(--text-1); }
body.on-table .tcg-toast.bad { border-left-color: var(--s-red); box-shadow: 0 1rem 2.5rem -1rem var(--shadow); color: var(--text-1); }
:root[data-skin="futura"] body.on-table .tcg-toast { border-radius: 0; }

/* THE OFFER: the odds on the look's well, not black */
body.on-table .tcg-odds-bar { border-radius: 2px; background: rgba(var(--text-1-rgb), .08); }
body.on-table .tcg-odds-bar i { box-shadow: none; }

/* THE LAST PILLS: the looted badge, the spoils tags and line, the shield chip on a fighter, the
   numbers that rise on a card's face. The look's chip: label size, the look's corners. */
body.on-table :is(.tcg-loot-badge, .tcg-spoils-tag, .tcg-spoils-out, .tcg-shieldchip) { border-radius: 2px; }
:root[data-skin="futura"] body.on-table :is(.tcg-loot-badge, .tcg-spoils-tag, .tcg-spoils-out, .tcg-shieldchip) {
    border-radius: 0; clip-path: polygon(var(--cut-s, 0px) 0, 100% 0, 100% calc(100% - var(--cut-s, 0px)), calc(100% - var(--cut-s, 0px)) 100%, 0 100%, 0 var(--cut-s, 0px));
}
body.on-table .tcg-loot-badge {
    padding: .2rem .5rem; box-shadow: none;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps);
}
body.on-table .tcg-spoils-tag { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); padding: .4rem .8rem; box-shadow: inset 0 0 0 1px currentColor; }
body.on-table .tcg-spoils-out { font-family: var(--font-num); font-size: var(--t-small); }
body.on-table .tcg-offer-queue { font-family: var(--font-body); font-size: var(--t-small); color: var(--lore); }
body.on-table .tcg-shieldchip { font-family: var(--font-num); font-size: var(--t-label); padding: .2rem .5rem; box-shadow: inset 0 0 0 1px var(--el, var(--c-1)); }
body.on-table .tcg-elchip { font-family: var(--font-num); font-size: var(--t-label); text-shadow: none; }
body.on-table .tcg-card-cstats { font-family: var(--font-num); font-size: var(--t-label); gap: .2rem; }
body.on-table .tcg-card-cstats span { border-radius: 2px; padding: .15rem .35rem; gap: .25em; }
body.on-table .tcg-card-cstats i { font-size: var(--t-label); letter-spacing: 0; }
body.on-table .tcg-card.small .tcg-card-cstats { font-size: var(--t-label); }

/* THE FIGHT'S PLATE TAGS (die and damage on a fighter's foot): the look's corners */
body.on-table #screen-field.fighting .tcg-plate-pt { clip-path: none; border-radius: 2px; }
:root[data-skin="futura"] body.on-table #screen-field.fighting .tcg-plate-pt {
    border-radius: 0; clip-path: polygon(var(--cut-s, 0px) 0, 100% 0, 100% calc(100% - var(--cut-s, 0px)), calc(100% - var(--cut-s, 0px)) 100%, 0 100%, 0 var(--cut-s, 0px));
}

/* THE RESULTS, as the standings are drawn: the houses on rails of their colour,
   then one ledger in hairlines; the verdict in the brand's type */
body.on-table .tcg-finale { background: none; }
body.on-table .tcg-finale::before, body.on-table .tcg-finale::after { display: none; }
body.on-table .tcg-finale-kicker { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); color: var(--text-2); }
body.on-table .tcg-finale-title {
    font-family: var(--font-display); font-weight: 600; letter-spacing: var(--track-title); text-shadow: none; color: var(--accent);
}
:root[data-skin="futura"] body.on-table .tcg-finale-title { font-weight: 700; text-transform: uppercase; color: var(--text-1); }
body.on-table .tcg-finale.won .tcg-finale-title { color: var(--lore); text-shadow: none; }
body.on-table .tcg-finale-sub { font-family: var(--font-body); font-size: var(--t-body); color: var(--text-2); }
body.on-table .tcg-finale-sub em { color: var(--lore); }
body.on-table .tcg-podium-plate {
    border-radius: 0 3px 3px 0; padding: .8rem 1rem .85rem; gap: .2rem .9rem;
    background: rgba(var(--text-1-rgb), .03); box-shadow: none; border-left: 2px solid var(--house);
}
body.on-table .tcg-podium-plate.first { box-shadow: none; background: rgba(var(--lore-rgb), .07); }
body.on-table .tcg-podium-plate.mine { outline: 0; background: var(--accent-wash); }
body.on-table .tcg-podium-plate .rank { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--text-3); }
body.on-table .tcg-podium-plate .who b { font-family: var(--font-body); font-weight: 600; font-size: var(--t-name); letter-spacing: 0; color: var(--text-1); }
body.on-table .tcg-podium-plate .who i { font-family: var(--font-body); font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: var(--text-3); }
body.on-table .tcg-podium-plate .tally { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); color: var(--text-2); }
body.on-table .tcg-podium-plate .pts { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--text-1); }
body.on-table .tcg-podium-plate.first .pts { color: var(--lore); text-shadow: none; }
body.on-table .tcg-ledger { border-radius: 0; background: none; box-shadow: none; font-family: var(--font-body); }
body.on-table .tcg-ledger-row { border-top: 1px solid var(--stroke); padding: 0; }
body.on-table .tcg-ledger-row > span { padding: .55rem .6rem; }
body.on-table .tcg-ledger-row .lbl { font-family: var(--font-body); font-weight: 400; font-size: var(--t-small); color: var(--text-2); }
body.on-table .tcg-ledger-row .lbl i { font-family: var(--font-display); color: var(--text-3); }
body.on-table .tcg-ledger-row .col em { font-family: var(--font-display); font-weight: 600; color: var(--text-1); }
body.on-table .tcg-ledger-row .col i { font-family: var(--font-display); color: var(--text-3); }
body.on-table .tcg-ledger-row .col.best em { color: var(--lore); }
body.on-table .tcg-ledger-row .col.minus em { color: var(--s-red); }
body.on-table .tcg-ledger-row .col.mine { background: var(--accent-wash); }
body.on-table .tcg-ledger-row.head { background: none; border-top: 0; }
body.on-table .tcg-ledger-row.head > span { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); }
body.on-table .tcg-ledger-row.head .lbl { color: var(--text-3); }
body.on-table .tcg-ledger-row.total { background: none; border-top: 1px solid var(--stroke-strong); }
body.on-table .tcg-ledger-row.total .lbl { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase; }
body.on-table .tcg-ledger-row.total .col em { font-size: 1.3rem; }

/* BY DAY (R018). What lies on a card's art or a house's pennant (a pile's count, the rolled number
   on the orb, the numbers on a health bar, the name on a flag) keeps the night ink over a dark
   shadow, in both modes. */
:root { --art-lore-rgb: 212, 175, 55; }
:root[data-skin="futura"] { --art-lore-rgb: 255, 210, 63; }
body.on-table :is(.tc-pilecount, .tcg-orb-roll b, .tcg-bar span, .tcg-flag-name) {
    color: rgb(var(--art-ink-rgb));
    text-shadow: 0 0 .4rem rgba(var(--art-shade-rgb), .95), 0 1px 2px rgba(var(--art-shade-rgb), .9);
}
body.on-table .tcg-orb-roll.won b {
    color: rgb(var(--art-lore-rgb));
    text-shadow: 0 0 .4rem rgba(var(--art-shade-rgb), .95), 0 0 1.6rem rgba(var(--art-lore-rgb), .8);
}
body.on-table .tcg-bar { background: rgba(var(--shade-rgb), .55); }
/* Text in a house's colour or an element's colour: the colour itself by night; by day, mixed
   toward the ink (the colours were chosen for a dark ground). */
body.on-table .tcg-hname { color: var(--house); }
:root body.on-table :is(.tcg-hname, .su-house.picked .su-plate b, .tcg-standings-row.head .col, .tcg-comms-head,
    .tcg-comms-text b, .tcg-finale-sub b, .tcg-ledger-row.head .col) {
    color: color-mix(in oklab, var(--house, var(--accent)) var(--hink), rgb(var(--text-1-rgb)));
}
:root body.on-table :is(.tcg-dchip.el, .tcg-dchip.imm, .tcg-dchip.res, .tcg-dchip.weak, .tcg-dchip.vuln,
    .tcg-dchip.burn, .tcg-dchip.shield, .tcg-dchip.comp, .tcg-dchip.xtal, .tcg-shieldchip, .tcg-elchip) {
    color: color-mix(in oklab, var(--el, var(--text-2)) var(--hink), rgb(var(--text-1-rgb)));
}
:root body.on-table .tcg-xtal span { color: color-mix(in oklab, var(--xtal, var(--c-3)) var(--hink), rgb(var(--text-1-rgb))); }

/* ── THE NEW GAME (R017) ─────────────────────────────────────────────────────
   The Arcana's front page: the title centred at the top; then a table on the
   left and a reading on the right. The table's far row holds the six choices of
   house (SURPRISE ME first), its near row the five acolytes the chosen house
   brings, face down until a house is chosen. The reading names the house, lists
   the decks, says what table you will sit at, and ends in the button.
     card size  two rows on the table under the title, six cards across
       height   (100vh - 25rem) / 2.95      width   (100vw - 40rem) / 6.6 */
body.on-table #screen-setup.active { display: block; min-height: 100vh; padding: 1.1rem 0 2.5rem; }
body.on-table .tcg-su {
    --sw: clamp(84px, min((100vh - 25rem) / 2.95, (100vw - 40rem) / 6.6), 168px);
    width: min(100%, 92rem); margin: 0 auto; padding: 0 2rem; display: grid; gap: 1.1rem;
}
body.on-table .tcg-su-brand { display: grid; justify-items: center; gap: .45rem; text-align: center; }
body.on-table .tcg-su-brand h1 {
    margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem);
    letter-spacing: var(--track-title); line-height: 1.15; color: var(--accent);
}
:root[data-skin="futura"] body.on-table .tcg-su-brand h1 { font-weight: 700; text-transform: uppercase; color: var(--text-1); }
body.on-table .tcg-su-brand .saber-line { width: 9rem; margin: .15rem 0 0; }
:root:not([data-skin="futura"]) body.on-table .tcg-su-brand .saber-line { display: block; height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
body.on-table .tcg-su-sub { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-2); }
body.on-table .tcg-su-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); gap: 2.5rem; align-items: start; }

/* the table */
body.on-table .tcg-su-spread {
    position: relative; z-index: 2; grid-area: auto; container-type: normal; overflow: visible; min-width: 0;
    display: flex; justify-content: center; padding: .4rem .5rem 1rem;
    perspective: 1700px; perspective-origin: 50% 0%;
}
body.on-table #tcgSetupTable {
    --tilt: 10deg; --card-w: var(--sw); --card-h: calc(var(--sw) * 1.4);
    width: 100%; padding: .85rem 1.4rem 1.1rem; transform-origin: 50% 100%;
}
body.on-table #tcgSetupTable > .tcg-board { position: relative; z-index: 1; display: grid; gap: 1.1rem; width: 100%; margin: 0; }
body.on-table #tcgSetupTable > .table-lines { z-index: 0; }
body.on-table #screen-setup .mat-bay.su-houses { --zone: var(--accent); }
body.on-table #screen-setup .mat-bay.su-roster { --zone: var(--house-picked, var(--text-2)); }
body.on-table #tcgSetupTable .mat-bay > h4 span { margin-left: .4rem; font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: var(--text-3); }
body.on-table #tcgSetupTable .tcg-bay-body { gap: var(--slot-gap); }

/* a house, and an acolyte: one card, the art and a plate at its foot */
body.on-table .su-house { display: block; padding: 0; margin: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
body.on-table .su-card {
    display: block; width: var(--card-w); height: var(--card-h); border-radius: var(--r-in); overflow: hidden;
    background-size: cover; background-position: center;
    box-shadow: 0 12px 28px rgba(var(--shade-rgb), .65), 0 0 0 1px rgba(var(--ink-rgb), .1);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
body.on-table .su-house:hover .su-card { transform: translateY(-6px); }
body.on-table .su-house:focus-visible { outline: none; }
body.on-table .su-house:focus-visible .su-card { box-shadow: 0 12px 28px rgba(var(--shade-rgb), .65), 0 0 0 2px var(--lore); }
body.on-table .su-house.picked .su-card {
    transform: translateY(-8px);
    box-shadow: 0 18px 34px rgba(var(--shade-rgb), .75), 0 0 0 2px var(--house, var(--accent)), 0 0 1.6rem color-mix(in srgb, var(--house, var(--accent)) 45%, transparent);
}
body.on-table .tcg-su:has(.su-house.picked:not(.surprise)) .su-house:not(.picked) .su-card { filter: saturate(.7) brightness(.78); }
body.on-table .su-house:not(.picked):hover .su-card { filter: none; }
body.on-table .su-plate {
    position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: .1rem; padding: 1.5rem .6rem .55rem;
    background: linear-gradient(180deg, transparent, rgba(var(--veil-rgb), .92) 50%); line-height: 1.25;
}
body.on-table .su-plate b { font-family: var(--font-body); font-weight: 600; font-size: clamp(.8125rem, calc(var(--card-w) * .085), 1rem); color: var(--text-1); }
body.on-table .su-plate i { font-style: normal; font-family: var(--font-display); font-weight: 500; font-size: var(--t-label); letter-spacing: .06em; color: var(--text-2); }
body.on-table .su-house.picked .su-plate b { color: var(--house, var(--accent-hi)); }
body.on-table .su-mark {
    position: absolute; inset: 0 0 18% 0; display: grid; place-items: center; z-index: 1;
    font-family: var(--font-display); font-weight: 600; font-size: calc(var(--card-w) * .38); color: var(--text-2);
    text-shadow: 0 0 1.2rem rgba(var(--veil-rgb), .9);
}
/* the acolytes: their stats on the plate when the pointer rests on one */
body.on-table .su-acolyte .su-plate i { opacity: 0; transition: opacity .18s; }
body.on-table .su-acolyte:hover .su-plate i, body.on-table .su-acolyte .su-card:focus-visible .su-plate i { opacity: 1; }
@media (hover: none) { body.on-table .su-acolyte .su-plate i { opacity: 1; } }
body.on-table .su-acolyte.hidden .su-card { filter: brightness(.55) saturate(.6); }

/* the reading, in the Arcana's voice */
body.on-table .tcg-su-read { display: grid; gap: 1.6rem; padding-top: .3rem; }
body.on-table .su-section > .label-gold { margin: 0 0 .7rem; }
body.on-table .su-house-read { padding-left: 1rem; border-left: 2px solid var(--house, var(--accent)); }
body.on-table .su-house-read .label-gold { margin-bottom: .35rem; }
body.on-table .su-name { margin: 0 0 .45rem; font-family: var(--font-body); font-weight: 600; font-size: clamp(1.35rem, 1.15rem + .5vw, 1.65rem); line-height: 1.2; color: var(--text-1); }
body.on-table .su-house-read p { margin: 0; font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; color: var(--text-2); }
body.on-table .su-decks { display: grid; gap: .45rem; }
body.on-table .su-deck {
    display: grid; gap: .25rem; width: 100%; padding: .7rem .9rem .75rem 1rem; text-align: left; cursor: pointer;
    background: rgba(var(--ink-rgb), .03); color: inherit; border: 0; border-left: 2px solid var(--stroke-strong); border-radius: 0 3px 3px 0;
    transition: background-color .2s, border-color .2s;
}
body.on-table .su-deck:hover:not(:disabled) { border-left-color: var(--accent-line); background: rgba(var(--ink-rgb), .06); }
body.on-table .su-deck.picked { border-left-color: var(--accent); background: var(--accent-wash); }
body.on-table .su-deck:disabled { cursor: default; opacity: .55; }
body.on-table .su-deck:focus-visible { outline: 1px solid var(--lore); outline-offset: 2px; }
body.on-table .su-deck-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
body.on-table .su-deck-head b { font-family: var(--font-body); font-weight: 600; font-size: var(--t-name); color: var(--text-1); }
body.on-table .su-deck.picked .su-deck-head b { color: var(--accent-hi); }
body.on-table .su-deck-blurb { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.45; color: var(--text-2); }
body.on-table .su-deck-lock { font-family: var(--font-body); font-style: italic; font-size: var(--t-small); line-height: 1.4; color: var(--lore); }
/* a deck shows its blurb once chosen; the locked one names why in a line */
body.on-table .su-deck:not(.picked) .su-deck-blurb { display: none; }
body.on-table .su-deck.locked { padding-block: .5rem .55rem; }
body.on-table .su-deck.locked .su-deck-head b { font-size: var(--t-body); color: var(--text-2); }
body.on-table .su-facts { margin: 0; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.55; color: var(--text-2); }
body.on-table .su-facts b { font-family: var(--font-display); font-weight: 600; color: var(--text-1); }
/* the head on the new game is the Arcana's front page: no bar, the tools at the corner */
body.on-table:has(#screen-setup.active) #tcg-topbar.tcg-head { background: none; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
body.on-table:has(#screen-setup.active) #tcg-topbar .stage-titles { visibility: hidden; }
body.on-table:has(#screen-setup.active) #tcg-topbar .stage-tools { pointer-events: auto; }
body.on-table .su-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; margin-top: .2rem; }

/* ── THE GAME'S WINDOWS: the shell's window ─────────────────────────────────
   Every window (TCG.ui.modal) is the shell's: a plate with the fine double
   frame inside its edge, the fans and the crest under Palisade, clipped
   corners with a stroke across each cut and brackets under Futura's. The head
   and the frame stay put; only the body scrolls, inside the frame. */
body.on-table .tcg-modal-back {
    z-index: 200; display: grid; place-items: center;
    padding: 16px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
body.on-table .tcg-modal {
    --frame-in: .55rem;
    position: relative; display: flex; flex-direction: column;
    width: min(100%, 44rem); max-height: min(100%, 60rem); overflow: hidden; padding: 0;
    background: var(--surface-1); border: 1px solid var(--stroke-strong); border-radius: 4px; clip-path: none;
    box-shadow: 0 30px 90px -30px var(--shadow); color: var(--text-1);
}
body.on-table .tcg-modal.wide { width: min(100%, 62rem); }
body.on-table .tcg-modal-head {
    position: relative; z-index: 1; flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    margin: 0 1.6rem; padding: 2.4rem 1rem 1rem; border-bottom: 1px solid var(--stroke);
}
body.on-table .tcg-modal-head .j-heading { min-width: 0; }
body.on-table .tcg-modal-head h3 {
    margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
    letter-spacing: var(--track-title); line-height: 1.2; text-transform: none; color: var(--accent);
}
:root[data-skin="futura"] body.on-table .tcg-modal-head h3 { font-weight: 700; text-transform: uppercase; color: var(--text-1); }
body.on-table .tcg-modal-x.icon-btn {
    width: 2.5rem; height: 2.5rem; padding: 0; font-size: 1rem; line-height: 1;
    background-color: var(--surface-1); border: 1px solid var(--stroke-strong); color: var(--text-2);
}
body.on-table .tcg-modal-x.icon-btn:hover { color: var(--text-1); border-color: var(--accent); }
:root[data-skin="futura"] body.on-table .tcg-modal-x.icon-btn { border-color: var(--edge); }
body.on-table .tcg-modal-body {
    position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 1.6rem 1.6rem; padding: 1.2rem 1rem 1.4rem;
    font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; color: var(--text-1);
}
body.on-table .tcg-modal-body h5 { margin: 1.4rem 0 .6rem; font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); color: var(--text-3); }
body.on-table .tcg-modal-body h5:first-child { margin-top: 0; }
body.on-table .tcg-modal .tcg-hint { margin: 0 0 .4rem; font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; color: var(--text-2); }
body.on-table .tcg-modal-actions { margin-top: 1.25rem; gap: .6rem; }
@media (min-width: 760px) {
    body.on-table .tcg-modal { --frame-in: .7rem; }
    body.on-table .tcg-modal .m-orn { width: 2.75rem; height: 2.75rem; }
}
@media (max-width: 559px) {
    body.on-table .tcg-modal-head { margin-inline: .9rem; padding: 2.1rem .5rem .8rem; }
    body.on-table .tcg-modal-body { margin: 0 .9rem 1.1rem; padding: 1rem .5rem 1.2rem; }
}
/* Futura: the corners clipped, and a stroke across each cut in the border's colour */
:root[data-skin="futura"] body.on-table .tcg-modal {
    --cut: var(--cut-l); --edge: var(--stroke-strong); border-radius: 0; box-shadow: none;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    background-image:
        linear-gradient(135deg, transparent calc(50% - .6px), var(--edge) calc(50% - .6px), var(--edge) calc(50% + .6px), transparent calc(50% + .6px)),
        linear-gradient(135deg, transparent calc(50% - .6px), var(--edge) calc(50% - .6px), var(--edge) calc(50% + .6px), transparent calc(50% + .6px));
    background-size: var(--cut) var(--cut), var(--cut) var(--cut);
    background-position: top left, bottom right;
    background-repeat: no-repeat;
}

/* THE STANDINGS: the houses in rank order, each on a rail of its colour, then
   one ledger with the houses across and the scored lines down */
body.on-table .tcg-standings-note { margin-bottom: 1.1rem; font-size: var(--t-small); }
body.on-table .tcg-standings-houses {
    list-style: none; margin: 0 0 1.6rem; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .6rem;
}
body.on-table .tcg-standings-house {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
    padding: .75rem 1rem .8rem; border-left: 2px solid var(--house); border-radius: 0 3px 3px 0;
    background: rgba(var(--ink-rgb), .03);
}
body.on-table .tcg-standings-house.mine { background: var(--accent-wash); }
body.on-table .tcg-standings-house.out { opacity: .5; }
body.on-table .tcg-standings-house .rank { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--text-3); }
body.on-table .tcg-standings-house .who { display: grid; gap: .1rem; min-width: 0; }
body.on-table .tcg-standings-house .who b { font-family: var(--font-body); font-weight: 600; font-size: var(--t-name); line-height: 1.2; color: var(--text-1); }
body.on-table .tcg-standings-house .who i { font-style: normal; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.3; color: var(--text-3); }
body.on-table .tcg-standings-house .pts { font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1; color: var(--lore); }
body.on-table .tcg-standings-row {
    display: grid; grid-template-columns: minmax(8.5rem, 1.7fr) repeat(var(--cols, 4), minmax(0, 1fr));
    align-items: baseline; border-top: 1px solid var(--stroke);
}
body.on-table .tcg-standings-row > span { min-width: 0; padding: .55rem .6rem; }
body.on-table .tcg-standings-row .lbl { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.35; color: var(--text-2); }
body.on-table .tcg-standings-row .lbl i { margin-left: .45em; font-style: normal; font-family: var(--font-display); font-size: var(--t-label); letter-spacing: .04em; color: var(--text-3); white-space: nowrap; }
body.on-table .tcg-standings-row .col { display: flex; justify-content: flex-end; align-items: baseline; gap: .4rem; text-align: right; }
body.on-table .tcg-standings-row .col b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--text-1); }
body.on-table .tcg-standings-row .col b.none { color: var(--text-3); }
body.on-table .tcg-standings-row .col i { font-style: normal; font-family: var(--font-display); font-size: var(--t-label); color: var(--text-3); font-variant-numeric: tabular-nums; }
body.on-table .tcg-standings-row .col.best b { color: var(--lore); }
body.on-table .tcg-standings-row .col.best b::before {
    content: ''; display: inline-block; width: .32rem; height: .32rem; margin-right: .4rem; vertical-align: .18em;
    background: var(--lore); transform: rotate(45deg);
}
body.on-table .tcg-standings-row .col.minus b { color: var(--s-red); }
body.on-table .tcg-standings-row .col.mine { background: var(--accent-wash); }
body.on-table .tcg-standings-row.head { border-top: 0; }
body.on-table .tcg-standings-row.head > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: .65rem;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-3);
}
body.on-table .tcg-standings-row.head .col { display: block; color: var(--house); }
body.on-table .tcg-standings-row.total { border-top: 1px solid var(--stroke-strong); }
body.on-table .tcg-standings-row.total .lbl { font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-2); }
body.on-table .tcg-standings-row.total .col b { font-size: 1.3rem; }
@media (max-width: 559px) {
    body.on-table .tcg-standings-row { grid-template-columns: minmax(6.5rem, 1.5fr) repeat(var(--cols, 4), minmax(0, 1fr)); }
    body.on-table .tcg-standings-row > span { padding-inline: .3rem; }
    body.on-table .tcg-standings-row .lbl i { display: block; margin: .1rem 0 0; }
    body.on-table .tcg-standings-row .col i { display: none; }
}

/* the menu's game section */
.tcg-menu-note { margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--text-3); }
.tcg-menu-note:empty { display: none; }

/* ── 900 TO 1099 WIDE (R017) ────────────────────────────────────────────────
   From 900px the frame is the desktop's, as the Arcana's stage is. A few of the
   game's own rules for narrow screens (written for the mat before R015, up to
   1080px) would pull the desktop frame apart, and are undone here. */
@media (max-width: 1080px) {
    body.on-table:not(.compact) .tcg-head .tcg-actions { position: static; flex-wrap: nowrap; padding: 0; background: none; border: 0; z-index: auto; }
    body.on-table:not(.compact) #tcg-discard-pile { display: block; }
    body.on-table:not(.compact) #tcg-toasts { top: calc(var(--head-h) + 1rem); bottom: auto; }
    body.on-table:not(.compact) :is(#tcgTable, #screen-field.field-table) .tcg-bay-body { padding-bottom: 0; }
    body.on-table:not(.compact) #screen-field.fighting .field-middle { bottom: 0; }
}
@media (max-width: 1099px) {
    body.on-table:not(.compact) .tcg-head .tcg-turn { display: none; }
}
/* THE ARENA BELOW 1080. The game's sheet lays the fight out in two columns here
   (you and them, the dice under, the two plates under that), but a later rule
   for very wide screens restated five columns for every width, so on a phone
   the fight spilled off the left of the screen. Restated here; and the fight
   starts at the top of its space and scrolls, instead of being centred past the
   top of it where it could not be reached. */
@media (max-width: 1080px) {
    body.on-table #screen-field.fighting .tcg-duel.hud {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "me them" "centre centre" "dme dthem";
        max-width: none; padding: 12px; gap: 10px;
    }
    body.on-table #screen-field.fighting #tcg-exchange > .tcg-duel.hud { flex: none; align-content: start; }
}
/* the new game below 1150: the reading goes under the table, two columns of it,
   and the two buttons lie in a bar at the foot of the screen, as on a phone */
@media (max-width: 1149px) {
    body.on-table .tcg-su { --sw: clamp(78px, min((100vh - 22rem) / 2.95, (100vw - 4rem - 155px) / 6), 168px); }
    body.on-table #screen-setup.active { padding-bottom: calc(5.3rem + env(safe-area-inset-bottom, 0px) + 1rem); }
    body.on-table .tcg-su-main { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
    body.on-table .tcg-su-read { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.5rem; width: min(100%, 56rem); margin: 0 auto; }
    body.on-table .su-actions {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; margin: 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .5rem;
        padding: 1rem max(16px, calc((100vw - 56rem) / 2)) calc(.8rem + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to top, var(--surface-0) 72%, rgba(var(--veil-rgb), 0));
    }
}

/* ── COMPACT: BELOW 900 WIDE (R017) ─────────────────────────────────────────
   The Arcana's stage on a phone. The head scrolls with the page; the two verbs
   lie in a bar at the foot of the screen; the table takes the width, then the
   dock, then the houses and the log; the card opens as a sheet from the foot of
   the screen. Below 600px each bay has a row (sigils and energy share one);
   from 600px the bays lie in the desktop's two rows.
     card size   below 600   three across a bay      (100vw - 7rem) / 3
                 from 600    the desktop's rows       (100vw - 10.5rem) / 6.6 */
/* anything brought into view by the keyboard or a script stops short of the bars */
html:has(body.on-table) { scroll-padding-top: var(--head-h, 0px); }
html:has(body.on-table.compact) { scroll-padding: 0 0 calc(5.3rem + env(safe-area-inset-bottom, 0px)); }
body.on-table.compact {
    --head-h: 0px;
    --bar-h: calc(5.3rem + env(safe-area-inset-bottom, 0px));
    --tw: clamp(76px, (100vw - 7rem) / 3, 132px);
    --slot-gap: 10px; --zone-pad: 10px; --gap: .9rem;
}
@media (min-width: 600px) { body.on-table.compact { --tw: clamp(76px, (100vw - 10.5rem) / 6.6, 132px); } }

/* the head, in the page above the table */
body.on-table.compact #tcg-topbar.tcg-head {
    position: relative; height: auto; flex-wrap: nowrap; align-items: flex-start; gap: 1rem;
    padding: .85rem 16px .8rem; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--plate);
}
body.on-table.compact .tcg-head .stage-titles { flex: 1 1 0; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; }
body.on-table.compact .tcg-head .stage-titles > .label-gold { flex-basis: 100%; }
body.on-table.compact .tcg-head .stage-titles > * { white-space: nowrap; }
body.on-table.compact .tcg-head .stage-tools { flex: none; gap: .4rem; }
body.on-table.compact .tcg-head .icon-btn { width: 2.35rem; height: 2.35rem; }
/* the two verbs, in a bar at the foot of the screen */
body.on-table.compact .tcg-head .stage-tools .stage-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; flex-wrap: nowrap;
    padding: 1rem 16px calc(.8rem + env(safe-area-inset-bottom, 0px)); border: 0;
    background: linear-gradient(to top, var(--surface-0) 72%, rgba(var(--veil-rgb), 0));
}
body.on-table.compact .tcg-head .stage-actions .btn { white-space: normal; text-align: center; line-height: 1.3; padding: .85rem .6rem; letter-spacing: .14em; }
body.on-table.compact :is(#screen-bench, #screen-field, #screen-results).active { padding-bottom: var(--bar-h); }

/* the bench */
body.on-table.compact #screen-bench.active { min-height: 0; padding-top: 0; }
body.on-table.compact #tcgSpread { padding: .8rem 16px 1rem; }
body.on-table.compact #tcgTable { --tilt: 5deg; padding: .7rem .8rem .85rem; }
body.on-table.compact #tcgTable > .tcg-board { gap: .9rem; }
body.on-table.compact :is(#screen-bench, #screen-field.field-table, #screen-setup) .mat-bay > h4 { min-height: 1.4rem; margin-bottom: .3rem; }
@media (max-width: 599px) {
    body.on-table.compact #tcgTable .mat-row.top { grid-template-columns: minmax(0, 1fr); }
    body.on-table.compact #tcgTable .mat-row.mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body.on-table.compact #tcgTable .mat-row.mid > .mat-bay.bench { grid-column: 1 / -1; }
}
body.on-table.compact .tcg-dock { padding: 1rem 16px 1.25rem; box-shadow: none; }
body.on-table.compact .tcg-dock .mat-row.dock { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
body.on-table.compact #screen-bench .tcg-dock .mat-bay + .mat-bay { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--stroke); }
@media (max-width: 599px) {
    /* stacked, the hand reads from the left like the bays above it */
    body.on-table.compact #tcg-hand .tcg-fan { justify-content: flex-start; }
    body.on-table.compact #tcg-hand > .tcg-empty { text-align: left; }
}
@media (min-width: 600px) {
    body.on-table.compact .tcg-dock .mat-row.dock { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 1.2rem; }
    body.on-table.compact #screen-bench .tcg-dock .mat-bay + .mat-bay { padding: 0 0 0 1.2rem; border-top: 0; border-left: 1px solid var(--stroke); }
}

/* THE TABLE'S TRAY (R018): the houses, the income and the log rise from the foot
   of the screen, from the button at the left of the bar, in two tabs. A press on
   the dimmed table closes it. */
body.on-table.compact .tcg-drawer > .drawer-tab { display: none; }
body.on-table.compact .tcg-drawer-left {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 76; width: auto;
    transform: translateY(102%);
}
body.on-table.compact .tcg-drawer-left[data-state="open"] { transform: none; }
body.on-table.compact .tcg-drawer-left[data-state="closed"] { visibility: hidden; transition: transform .45s cubic-bezier(.3, .7, .2, 1), visibility 0s .45s; }
body.on-table.compact .tcg-drawer-left > .drawer-inner {
    height: auto; max-height: min(78vh, 46rem); padding: 0 16px calc(1.4rem + env(safe-area-inset-bottom, 0px));
    background: var(--plate-solid); backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; border-top: 1px solid var(--stroke-strong); box-shadow: 0 -2rem 4rem -1.5rem var(--shadow);
}
body.on-table.compact .tcg-tray-head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 0 -16px; padding: .5rem 16px 0; background: var(--plate-solid); border-bottom: 1px solid var(--stroke);
}
body.on-table.compact .tcg-tray-tabs { display: flex; gap: 1.6rem; }
body.on-table.compact .tcg-tray-part > .label-gold:first-child { display: none; }   /* the tab names the part */
body.on-table.compact .tcg-tray-part { padding-top: 1rem; }
body.on-table.compact .tcg-tray-x.icon-btn { width: 2.25rem; height: 2.25rem; margin-bottom: .35rem; }
body.on-table.compact #tcgHouses[data-part="houses"] > .tcg-tray-part[data-part="log"],
body.on-table.compact #tcgHouses[data-part="log"] > .tcg-tray-part[data-part="houses"] { display: none; }
.tcg-tray-scrim { display: none; }
body.on-table.compact .tcg-tray-scrim {
    display: block; position: fixed; inset: 0; z-index: 74; background: var(--scrim);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
body.on-table.compact.left-open .tcg-tray-scrim { opacity: 1; pointer-events: auto; }
/* its button, at the left of the bar */
body.on-table.compact .tcg-head .stage-tools .stage-actions { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
body.on-table.compact .tcg-tray-btn.icon-btn { display: grid; width: 3rem; height: auto; align-self: stretch; }
body.on-table.compact.left-open .tcg-tray-btn.icon-btn { color: var(--text-1); border-color: var(--accent); }

/* the card: a sheet that rises from the foot of the screen, over the bar */
body.on-table.compact .tcg-drawer-right {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 75; width: auto;
    transform: translateY(102%);
}
body.on-table.compact .tcg-drawer-right[data-state="open"] { transform: none; }
body.on-table.compact .tcg-drawer-right[data-state="closed"] { visibility: hidden; transition: transform .45s cubic-bezier(.3, .7, .2, 1), visibility 0s .45s; }
body.on-table.compact .tcg-drawer-right > .drawer-inner {
    height: auto; max-height: min(80vh, 48rem); padding: 1.1rem 16px calc(1.4rem + env(safe-area-inset-bottom, 0px));
    background: var(--plate-solid); border-left: 0; border-top: 1px solid var(--stroke-strong);
    box-shadow: 0 -2rem 4rem -1.5rem var(--shadow);
}
/* while a card is held (a tap lifts it as well as opening it) the sheet lowers
   to its top part, the card's name and verbs, and the table above can take it */
body.on-table.compact.dragging .tcg-drawer-right[data-state="open"] { transform: translateY(max(0px, calc(100% - 44vh))); }
body.on-table.compact.right-open #tcg-toasts { right: 12px; }

/* the field */
body.on-table.compact #screen-field.field-table.active { --fw: var(--tw); display: block; min-height: 0; padding: .8rem 16px calc(var(--bar-h) + .5rem); }
body.on-table.compact #screen-field.field-table > .tcg-board.table { --tilt: 5deg; padding: .7rem .8rem .85rem; gap: .9rem; }
body.on-table.compact #screen-field.field-table .field-middle { min-height: 0; }
body.on-table.compact #screen-field.field-table .mat-bay.exchange { min-height: 13.5rem; }
body.on-table.compact #screen-field.field-table .tcg-btn.wide { min-width: 0; width: 100%; }
@media (max-width: 599px) {
    body.on-table.compact #screen-field.field-table .field-middle { grid-template-columns: minmax(0, 1fr); }
    /* the house over its counts, and the ground's numbers two by two */
    body.on-table.compact #screen-field.field-table .tcg-ground-head { gap: .6rem; align-items: center; }
    body.on-table.compact #screen-field.field-table .tcg-ground-name { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: .1rem; }
    body.on-table.compact #screen-field.field-table .tcg-ground-name :is(b, span) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.on-table.compact #screen-field.field-table .tcg-insp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .7rem; }
    body.on-table.compact #screen-field.field-table .tcg-insp-stats div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
/* the fight: the head stays at the top of the screen and the arena lies between
   it and the bar (19-table.js keeps --head-live at the head's height) */
body.on-table.compact:has(#screen-field.fighting.active) #tcg-topbar.tcg-head { position: fixed; top: 0; left: 0; right: 0; z-index: 95; }
body.on-table.compact #screen-field.fighting .field-middle { top: var(--head-live, 0px); bottom: var(--bar-h); }
body.on-table.compact #screen-field.fighting.active { min-height: 100vh; }
/* the spoils and the banter lie under the head, so neither covers the fight's buttons */
body.on-table.compact #tcg-spoils-host { top: calc(var(--head-live, 0px) + .5rem); bottom: auto; left: 16px; right: 16px; width: auto; }
body.on-table.compact #tcg-comms { top: calc(var(--head-live, 0px) + .5rem); width: calc(100vw - 32px); }

/* the walkthrough's note, over the bar at the foot of the screen */
body.on-table.compact #tcg-coach-host { top: auto; bottom: calc(var(--bar-h) + .4rem); left: 16px; right: 16px; width: auto; transform: none; }
body.on-table.compact #tcg-toasts { top: auto; bottom: calc(var(--bar-h) + .5rem); left: 16px; right: 16px; width: auto; }

/* the new game */
body.on-table.compact:has(#screen-setup.active) #tcg-topbar.tcg-head { position: absolute; top: 0; left: 0; right: 0; z-index: 60; }
body.on-table.compact #screen-setup.active { padding: 3.4rem 0 calc(var(--bar-h) + 1rem); }
body.on-table.compact .tcg-su { --sw: clamp(76px, (100vw - 7rem) / 3, 150px); padding: 0 16px; gap: 1rem; }
@media (min-width: 600px) { body.on-table.compact .tcg-su { --sw: clamp(76px, (100vw - 9rem) / 6.3, 150px); } }
body.on-table.compact .tcg-su-spread { padding: .2rem 0 .6rem; }
body.on-table.compact #tcgSetupTable { --tilt: 5deg; padding: .7rem .8rem .85rem; }
body.on-table.compact .tcg-su-read { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
body.on-table.compact .su-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; margin: 0;
    grid-template-columns: 1fr 1fr; gap: .5rem;
    padding: 1rem 16px calc(.8rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--surface-0) 72%, rgba(var(--veil-rgb), 0));
}
body.on-table.compact .su-actions .btn { white-space: normal; text-align: center; line-height: 1.3; padding: .85rem .6rem; letter-spacing: .14em; }
@media (max-width: 599px) {
    /* the six houses three to a row; the five acolytes small, in one row */
    body.on-table.compact #tcgSetupTable #tcg-su-houses { flex-wrap: wrap; row-gap: .9rem; }
    body.on-table.compact #tcgSetupTable #tcg-su-houses > .tcg-unit { flex: none; min-width: 0; }
    body.on-table.compact #tcgSetupTable #tcg-su-roster { gap: 6px; }
    body.on-table.compact #tcgSetupTable #tcg-su-roster > .tcg-unit { flex: 1 1 0; min-width: 0; }
    body.on-table.compact #tcg-su-roster .su-card { width: 100%; height: auto; aspect-ratio: 5 / 7; }
    body.on-table.compact #tcg-su-roster .su-plate { display: none; }
    body.on-table.compact #tcgSetupTable .su-roster :is(.tcg-bay-body) { min-height: 0; }
}