/* Guillotine: a 1793 broadsheet. Paper, red ink, tricolore accents, a woodcut feel. A light theme, deliberately
   unlike the other two. The theme block swaps the shared tokens; the rest is this game's own pieces, scoped under
   .gl-*, .ncard and .acard so nothing leaks into the other games' pages. */
html.theme-guillotine {
    color-scheme: light;
    --bg: #efe3c6;
    --panel: #f7edd6;
    --panel-2: #ecdfbf;
    --panel-3: #e2d2ab;
    --line: #c9b58a;
    --text: #2b1d12;
    --muted: #6d5a44;
    --accent: #b3202c;
    --accent-2: #8f1621;
    --accent-dark: #6f0f18;
    --accent-text: #fff6ea;
    --parch: #fbf3df;
    --parch-2: #e8dab6;
    --parch-ink: #2b1d12;
    --danger: #9c1b1b;
    --ok: #3f7d3a;
    --shadow: 0 10px 30px rgba(60, 30, 10, .25);
    --display: "Abril Fatface", "Playfair Display", Georgia, serif;
    --body: "EB Garamond", Garamond, Georgia, serif;
    --blue: #203b7a;
    --red: #b3202c;
    --ink: #2b1d12;
    --purple: #6a3fa0;
    --green: #3c7a3a;
    --gray: #6f6a63;
    /* this game's own tokens: the print's inks, the wax, the shadows, the accent's washes, one radius scale */
    --gl-skin: #f3dfc4;
    --gl-cream: #fbf3df;
    --gl-gold: #c9a24b;
    --gl-wax: #a3161f;
    --gl-wax-ring: #6f0f18;
    --gl-wax-grey: #7b766e;
    --gl-wax-grey-ring: #4f4b45;
    --gl-card-edge: #a88f66;
    --gl-turn-bg: #fff6e0;
    --gl-table-top: #e6d6ae;
    --gl-table-bottom: #d9c79b;
    --gl-shadow: rgba(60, 30, 10, .35);
    --gl-shadow-soft: rgba(60, 30, 10, .22);
    --gl-shadow-inset: rgba(90, 60, 20, .15);
    --gl-accent-8: color-mix(in srgb, var(--accent) 8%, transparent);
    --gl-accent-24: color-mix(in srgb, var(--accent) 24%, transparent);
    --gl-accent-45: color-mix(in srgb, var(--accent) 45%, transparent);
    --gl-bad-bg: color-mix(in srgb, var(--accent) 16%, var(--parch));
    --gl-r-s: 8px;
    --gl-r-m: 12px;
    --gl-r-l: 16px;
    /* laid paper: the fine laid lines, the wider chain lines, a little light and a little foxing */
    --gl-paper:
        repeating-linear-gradient(0deg, rgba(90, 60, 20, .05) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(90, 60, 20, .07) 0 1px, transparent 1px 21px),
        radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, .55), transparent 60%),
        radial-gradient(ellipse at 85% 92%, rgba(150, 105, 45, .2), transparent 55%),
        var(--parch);
}
html.theme-guillotine .btn.primary { color: var(--accent-text); }
html.theme-guillotine .pill.brewing { color: var(--accent-text); }
html.theme-guillotine .sheet-backdrop { background: rgba(60, 30, 10, .55); }
html.theme-guillotine .sheet-backdrop.dim { background: rgba(43, 29, 18, .88); }
/* A card to read over the line (the played card, a noble, an action) leaves the page undimmed: the line is the point. */
html.theme-guillotine .sheet-backdrop.see-through { background: transparent; }
/* The shared error colour is made for dark themes; on parchment a rejection is dark red. */
html.theme-guillotine .error { color: var(--danger); }
/* Seat colours on parchment: mixed towards the paper so the red seat, the accent red and the red estate stop fighting. */
html.theme-guillotine .gl-pile, html.theme-guillotine .gl-day-scores li, html.theme-guillotine .sheet.seat-tint { --gl-seat: color-mix(in srgb, var(--cauldron) 72%, var(--parch)); }
html.theme-guillotine .sheet.seat-tint { border-color: var(--gl-seat); }
html.theme-guillotine .sheet.seat-tint > header { background: linear-gradient(90deg, color-mix(in srgb, var(--gl-seat) 40%, var(--panel)), var(--panel) 85%); border-bottom-color: var(--gl-seat); }
html.theme-guillotine .setting .switch::after { background: var(--muted); }
html.theme-guillotine .setting[aria-checked="true"] .switch::after { background: var(--accent-text); }

/* ---- the game page */
.gl-page { font-size: 1.02rem; }
.gl-page .topbar .round { color: var(--accent); }
/* The table the line stands on takes a little of the viewer's seat colour (--me on the phone's page; the table page has
   none and keeps the plain top) and its corners darken a little (the tile-look pass, 23 Oct 2026) */
.gl-line-card { background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(60, 30, 10, .16) 100%), linear-gradient(color-mix(in srgb, var(--gl-table-top) 85%, var(--me, var(--gl-table-top))), color-mix(in srgb, var(--gl-table-bottom) 85%, var(--me, var(--gl-table-bottom)))); border: 1px solid color-mix(in srgb, var(--line) 70%, var(--me, var(--line))); border-radius: var(--gl-r-m); padding: .4rem .5rem .5rem; margin-bottom: .5rem; box-shadow: inset 0 0 30px var(--gl-shadow-inset); }
.gl-line-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; color: var(--muted); font-size: .78rem; margin-bottom: .3rem; padding: 0 .2rem; }
.gl-flag { display: inline-flex; align-items: center; gap: .2rem; color: var(--accent); font-weight: 700; }
.gl-flag .ico { width: .9em; height: .9em; }
.gl-line { position: relative; display: flex; align-items: flex-end; gap: .3rem; overflow-x: auto; overflow-y: hidden; padding: .5rem .25rem .25rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; min-height: 7.2rem; }
.gl-line::-webkit-scrollbar { height: 4px; }
.gl-line::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.gl-end-label { font-size: .78rem; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; flex: none; }
.gl-empty { align-self: center; flex: 1; text-align: center; }
.gl-slot { display: flex; flex-direction: column; align-items: center; gap: .1rem; flex: none; scroll-snap-align: end; }
.gl-slot .place { font-size: .78rem; line-height: 1.1; color: var(--muted); }
.gl-slot.front .ncard { box-shadow: 0 0 0 2px var(--accent), 0 6px 14px var(--gl-shadow); transform: translateY(-3px); }
.gl-slot.front .place { color: var(--accent); font-weight: 700; }
.gl-line.big .gl-slot .ncard { font-size: 1.05rem; }

/* ---- the guillotine (GuillotineFrame): it stands at the front of the line as tall as the cards beside it (the svg is
   laid over its stretched box, so it never makes the line taller). On .drop (guillotine.chop) the blade falls the
   frame's full height onto the lunette with a hard ease-in, bounces, rests, and is hauled back up; the frame jolts. */
.gl-guillotine { flex: none; align-self: stretch; position: relative; width: 3.3rem; min-height: 5.5rem; margin-left: .2rem; color: var(--ink); }
.gl-line.big .gl-guillotine { width: 4.4rem; }
.gl-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; filter: drop-shadow(1px 2px 1.5px var(--gl-shadow-soft)); }
.gl-frame .gl-wood { fill: #7a4a22; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.gl-frame .gl-brace { fill: none; stroke: #6a3f1c; stroke-width: 2.6; stroke-linecap: round; }
.gl-frame .gl-grain { fill: none; stroke: #4e2f14; stroke-width: .6; stroke-linecap: round; opacity: .8; }
.gl-frame .gl-groove { fill: none; stroke: #3b2410; stroke-width: 1.1; }
.gl-frame .gl-iron { fill: #3d3a37; stroke: var(--ink); stroke-width: .6; }
.gl-frame .gl-rope { fill: none; stroke: #8b6b3d; stroke-width: 1.2; stroke-dasharray: 1.6 .7; }
.gl-frame .gl-weight { fill: #4a3a2c; stroke: var(--ink); stroke-width: .9; }
.gl-frame .gl-steel { fill: #a9b0b6; stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; }
.gl-frame .gl-edge { fill: none; stroke: #f1f4f6; stroke-width: 1.1; stroke-linecap: round; }
.gl-frame .gl-hole { fill: #1d130b; }
.gl-frame .gl-basket { fill: #b4874a; stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; }
.gl-frame .gl-weave { fill: none; stroke: #6d4a1f; stroke-width: .7; }
.gl-guillotine.drop .gl-blade { animation: gl-drop 1.5s both; }
.gl-guillotine.drop .gl-frame { animation: gl-jolt 1.5s both; }
/* 0-550 ms the fall (accelerating, no easing out), a 4-unit bounce off the lunette, rest, then ~400 ms back up. In an SVG
   a CSS translate is in the drawing's own units: 49 takes the blade's edge from rest down onto the lunette. */
@keyframes gl-drop {
    0% { transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, 1, .6); }
    36.7% { transform: translateY(49px); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    41.5% { transform: translateY(44.5px); animation-timing-function: cubic-bezier(.6, 0, 1, 1); }
    46% { transform: translateY(49px); }
    73% { transform: translateY(49px); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
    100% { transform: translateY(0); }
}
@keyframes gl-jolt { 0%, 36%, 46%, 100% { transform: none; } 38% { transform: translateY(1.5px) scaleY(.985); } 42% { transform: translateY(-.5px); } }

.gl-piles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .4rem; margin-bottom: .5rem; }
.gl-pile { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--gl-seat, var(--cauldron)); border-radius: var(--gl-r-s); padding: .4rem .55rem; text-align: left; color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.gl-pile.turn { background: var(--gl-turn-bg); box-shadow: 0 0 0 2px var(--accent); }
.gl-pile .name { font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gl-pile .name .ico { width: 1rem; height: 1rem; }
.gl-pile .pts { font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--accent); }
.gl-pile small { font-size: .78rem; color: var(--muted); }
.gl-pile .fronts { display: inline-flex; gap: .2rem; flex-wrap: wrap; margin-top: .15rem; }
.front-chip { display: inline-block; font-style: normal; font-size: .78rem; font-weight: 700; padding: 0 .3rem; border-radius: 4px; background: var(--panel-3); border: 1px solid var(--line); color: var(--ink); }
.front-chip.bad { background: var(--gl-bad-bg); border-color: var(--accent); color: var(--accent); }
.gl-pile .gl-flag { font-size: .78rem; }
.gl-piles.table .gl-pile { cursor: default; }
.gl-pile-cards { display: flex; flex-wrap: wrap; gap: .15rem; margin-top: .25rem; }

.gl-hand { padding-top: .2rem; }
.gl-hand-head { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .78rem; padding: 0 .2rem; margin-bottom: .25rem; }
.gl-cards { display: flex; gap: .4rem; overflow-x: auto; padding: .4rem .2rem .5rem; min-height: 7.6rem; -webkit-overflow-scrolling: touch; }
.gl-cards .acard { flex: none; }
.gl-cards .acard.playable { box-shadow: 0 0 0 2px var(--accent), 0 6px 14px var(--gl-shadow); transform: translateY(-3px); }
.gl-cards .acard.dim { opacity: .55; }
.gl-hand .waiting { padding: .3rem .25rem 0; margin: 0; font-size: .9rem; }
.gl-actions { align-items: center; }
.gl-actions .btn.wide { flex: 1; box-shadow: var(--shadow); }
.gl-execute .ico { width: 1.5rem; height: 1.5rem; }
.gl-actions .fab.pill { font-size: .85rem; }
.page.gl-page.with-fabs { padding-bottom: 6rem; }

/* ---- noble cards (NobleCardView): a broadsheet woodcut. The face is one SVG (100 x 140 units) laid on laid paper, so
   everything in it scales with the card; font sizes inside it are in its units (15 = 9 px at sm). */
.ncard { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 4.6em; aspect-ratio: 5 / 7; padding: 0; border: 1px solid var(--gl-card-edge); border-radius: .3em; background: var(--gl-paper); color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; overflow: hidden; box-shadow: 0 1px 2px var(--gl-shadow), 0 3px 8px var(--gl-shadow-soft); -webkit-tap-highlight-color: transparent; text-align: center; margin: 0; flex: none; }
.ncard:disabled { cursor: default; }
/* The finish every card wears, as the tiles of Carcassonne and Cascadia do (the tile-look pass, 23 Oct 2026): a sheen
   lit from the top left over the whole face and a bevelled edge, pale along the top and left, dark along the bottom
   and right, as one overlay above everything printed; the cards on the line and in the hand sit a little higher off
   the table */
.ncard::after, .acard::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 50%, rgba(40, 25, 5, .14) 100%); box-shadow: inset 1px 1px 0 rgba(255, 250, 225, .75), inset -1px -1px 0 rgba(40, 25, 5, .3); }
.gl-line .ncard, .gl-cards .acard { box-shadow: 0 2px 3px var(--gl-shadow), 0 5px 10px var(--gl-shadow-soft); }
.ncard .face { display: block; width: 100%; height: auto; aspect-ratio: 100 / 140; flex: none; overflow: visible; }
.ncard .rule { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.ncard .rule-in { fill: none; stroke: var(--ink); stroke-width: .7; }
/* the bust: heavy outlines, a hand-tinted wash in the estate's colour, hatched shadows */
.ncard .bust * { stroke-linejoin: round; }
.ncard .skin { fill: var(--gl-skin); stroke: var(--ink); stroke-width: 1.8; }
.ncard .wash { fill: color-mix(in srgb, var(--estate) 80%, var(--parch)); stroke: var(--ink); stroke-width: 1.8; }
.ncard .deep { fill: color-mix(in srgb, var(--estate) 82%, #000); stroke: var(--ink); stroke-width: 1.3; }
.ncard .cream { fill: var(--gl-cream); stroke: var(--ink); stroke-width: 1.3; }
.ncard .gold { fill: var(--gl-gold); stroke: var(--ink); stroke-width: 1; }
.ncard .sable { fill: #241a14; stroke: var(--ink); stroke-width: 1.3; }
.ncard .plume { fill: var(--red); stroke: var(--ink); stroke-width: 1; }
.ncard .shade { fill: url(#gl-hatch); stroke: none; opacity: .7; }
.ncard .ink { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }
.ncard .ink-thin { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.ncard .ink-fill { fill: var(--ink); }
.ncard .dots { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.ncard .trim { fill: none; stroke: var(--gl-gold); stroke-width: 1.6; stroke-linecap: round; }
.ncard .trim-gold { fill: none; stroke: var(--gl-gold); stroke-width: 2.2; stroke-linecap: round; }
/* the name on a ribbon in the estate's colour, the tails folded behind it */
.ncard .rib { fill: var(--estate); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.ncard .rib-tail { fill: color-mix(in srgb, var(--estate) 62%, #000); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.ncard .rib-line { fill: none; stroke: var(--gl-cream); stroke-width: .6; opacity: .5; }
.ncard .nm { font-family: var(--body); font-weight: 700; font-size: 15px; fill: var(--gl-cream); }
/* the points as a wax seal pressed over the corner of the rule; grey wax for the people */
.ncard .seal { fill: var(--gl-wax); stroke: var(--gl-wax-ring); stroke-width: 1; stroke-linejoin: round; }
.ncard .seal.grey { fill: var(--gl-wax-grey); stroke: var(--gl-wax-grey-ring); }
.ncard .seal-ring { fill: none; stroke: rgba(0, 0, 0, .3); stroke-width: 1.1; }
.ncard .seal-pts { font-family: var(--display); font-size: 15px; fill: var(--gl-cream); }
.ncard .pilcrow { font-family: var(--body); font-weight: 700; font-size: 18px; fill: var(--accent); }
/* the big size with the card's text: a printed notice under the face */
.ncard.with-text { aspect-ratio: auto; }
.ncard .txt { display: block; margin: 0 .3em .3em; padding: .5em .6em .55em; border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -4px; font-size: .5em; line-height: 1.25; font-style: italic; color: var(--ink); }
.ncard.purple { --estate: var(--purple); }
.ncard.blue { --estate: var(--blue); }
.ncard.green { --estate: var(--green); }
.ncard.red { --estate: var(--red); }
.ncard.gray { --estate: var(--gray); }
.ncard.xs { font-size: .5rem; box-shadow: 0 1px 2px var(--gl-shadow-soft); }
.ncard.sm { font-size: .82rem; }
.ncard.md { font-size: 1.1rem; }
.ncard.lg { font-size: 1.7rem; width: 5.2em; }
/* the back: a field of gold fleurs-de-lis, a cream cartouche with the lis in blue */
.ncard.back { background: #1f2f5c; border-color: #14203f; }
.ncard .nb-rule { fill: none; stroke: var(--gl-gold); stroke-width: 1.3; }
.ncard .nb-oval { fill: var(--gl-cream); stroke: var(--gl-gold); stroke-width: 2.6; }
.ncard .nb-oval-in { fill: none; stroke: #1f2f5c; stroke-width: .8; }
.ncard .nb-lis { color: #1f2f5c; }

/* ---- action cards (ActionCardView): laid paper, a double rule, a red title band and the family's woodcut roundel.
   xs and sm show the title and the roundel; md and lg the title (with the family's glyph) and the text. */
.acard { position: relative; display: flex; flex-direction: column; width: 6.2em; aspect-ratio: 5 / 7; padding: .5em .45em .45em; border: 1px solid var(--gl-card-edge); border-radius: .3em; background: var(--gl-paper); color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; overflow: hidden; box-shadow: 0 1px 2px var(--gl-shadow), 0 3px 8px var(--gl-shadow-soft); -webkit-tap-highlight-color: transparent; text-align: left; margin: 0; flex: none; }
.acard:disabled { cursor: default; }
/* the double rule: the outer rule as the border and the fainter inner one as an outline drawn .14em inside it (::after
   is the card's finish, above) */
.acard::before { content: ""; position: absolute; inset: .2em; border: max(1px, .08em) solid var(--ink); border-radius: .12em; outline: 1px solid rgba(43, 29, 18, .5); outline-offset: -.14em; pointer-events: none; }
.acard.fam-line { --fam: var(--accent); }
.acard.fam-front { --fam: var(--blue); }
.acard.fam-hands { --fam: var(--green); }
.acard.fam-pile { --fam: var(--ink); }
.acard .band { position: relative; z-index: 1; display: flex; align-items: center; gap: .3em; flex: none; font-family: var(--body); font-weight: 700; font-size: max(9px, .72em); line-height: 1.1; padding: .3em .4em; background: var(--accent); color: var(--gl-cream); border: 1px solid var(--accent-dark); box-shadow: inset 0 0 0 1px rgba(255, 246, 234, .3); }
.acard .band .fam { display: none; width: 1.25em; height: 1.25em; flex: none; vertical-align: 0; }
.acard .band .nm { min-width: 0; overflow-wrap: anywhere; }
.acard .art { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.acard .art::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(rgba(43, 29, 18, .16) 0 3deg, transparent 3deg 10deg); -webkit-mask-image: radial-gradient(circle closest-side, #000 25%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 25%, transparent 100%); }
.acard .art .ico { position: relative; box-sizing: border-box; width: 3.1em; height: 3.1em; padding: .55em; border-radius: 50%; color: var(--fam); background: radial-gradient(circle, var(--gl-cream) 58%, var(--parch-2)); border: .2em double var(--fam); box-shadow: 0 0 0 .1em var(--parch), 0 0 0 .17em var(--ink); vertical-align: 0; }
.acard .art .ico.glyph { width: 4.6em; height: 4.6em; padding: .38em; border-width: .24em; }
.acard .txt { display: none; position: relative; flex: 1; min-height: 0; padding: .4em .15em 0; font-size: .68em; line-height: 1.18; overflow: hidden; }
.acard .tag { display: none; position: relative; flex: none; font-size: .56em; text-transform: uppercase; letter-spacing: .08em; text-align: center; color: var(--fam); padding: .2em 0 .1em; }
.acard.xs { font-size: .5rem; box-shadow: 0 1px 2px var(--gl-shadow-soft); }
.acard.xs .band { font-size: .72em; }
.acard.sm { font-size: .8rem; }
.acard.md { font-size: 1rem; width: 7.4em; }
.acard.lg { font-size: 1.45rem; width: 7.4em; }
.acard.md .art, .acard.lg .art { display: none; }
.acard.md .txt, .acard.lg .txt, .acard.md .band .fam, .acard.lg .band .fam { display: block; }
.acard.lg .txt { font-size: .58em; line-height: 1.22; }
.acard.lg .tag { display: block; }
/* the back: a tricolore cockade with its pleats and ribbon tails on parchment */
.acard.back { padding: 0; }
.acard.back .face { display: block; width: 100%; height: 100%; }
.acard .ab-corner { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }

/* ---- sheets */
.gl-option-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; padding: .25rem 0; }
.gl-option-card { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.gl-option-card small { color: var(--muted); font-size: .78rem; }
/* The question sheet sits low and see-through so the line stays in view: its cards run in one row that scrolls sideways */
.sheet.gl-question > .body { padding-top: .5rem; padding-bottom: .5rem; }
.sheet.gl-question .gl-option-cards { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: .25rem .1rem .4rem; -webkit-overflow-scrolling: touch; }
.sheet.gl-question .gl-option-card { flex: none; scroll-snap-align: start; }
.sheet.gl-question .options { max-height: 40dvh; overflow-y: auto; }
.gl-detail-card { display: flex; justify-content: center; margin: .5rem 0 .75rem; }
.gl-day-note { text-align: center; font-size: 1.1rem; margin-bottom: .75rem; }
.gl-day-scores { list-style: none; padding: 0; margin: 0 auto; max-width: 20rem; }
.gl-day-scores li { display: flex; justify-content: space-between; align-items: center; padding: .35rem .5rem; border-bottom: 1px solid var(--line); border-left: 4px solid var(--gl-seat, var(--cauldron)); margin-bottom: .2rem; }
.gl-day-scores li b { font-family: var(--display); color: var(--accent); }
.gl-day-scores .ico { width: 1rem; height: 1rem; vertical-align: -.15em; }
.gl-pile-sheet h2 { font-size: 1.15rem; }
.gl-total { color: var(--accent); }
.gl-pile-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.gl-pile-item { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.gl-pile-item b { font-family: var(--display); }
.gl-pile-item b.neg { color: var(--accent); }
.gl-pile-item small { font-size: .78rem; color: var(--muted); }
.gl-table b.purple { color: var(--purple); }
.gl-table b.blue { color: var(--blue); }
.gl-table b.green { color: var(--green); }
.gl-table b.red { color: var(--red); }
.gl-table b.gray { color: var(--gray); }
.gl-table td small { color: var(--muted); }

/* ---- the table screen */
.gl-tablepage .gl-line-card, .gl-tablepage .gl-piles { max-width: 900px; margin-left: auto; margin-right: auto; }
.gl-tablepage .gl-line { min-height: 9.5rem; }

@media (max-height: 700px) {
    .gl-line { min-height: 6.2rem; }
    .gl-cards { min-height: 6.4rem; }
    .gl-cards .acard.sm { font-size: .7rem; }
}

/* ---- choosing in the line itself: the nobles a card may act on pulse and show where they would go; the others fade.
   For "how far" questions the noble in question is lifted and dashed markers stand in the gaps it could move to. */
.gl-ask { color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; line-height: 1.15; }
.gl-ask .ico { width: 1em; height: 1em; flex: none; }
.gl-line.picking .gl-slot:not(.pick):not(.subject) .ncard { opacity: .4; }
.gl-line.picking .gl-slot.front:not(.pick):not(.subject) .ncard { box-shadow: none; transform: none; }
.gl-slot.pick .ncard { opacity: 1; transform: translateY(-6px); box-shadow: 0 0 0 3px var(--accent), 0 8px 16px var(--gl-shadow); animation: gl-pick 1.1s ease-in-out infinite; cursor: pointer; }
/* The ring breathes; the card itself stays put (a moving target is hard to tap). */
@keyframes gl-pick { 0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 8px 16px var(--gl-shadow); } 50% { box-shadow: 0 0 0 6px var(--gl-accent-45), 0 8px 16px var(--gl-shadow); } }
.gl-slot .to { color: var(--accent); font-weight: 700; font-size: .78rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .1rem; }
.gl-slot .to .ico { width: .9em; height: .9em; }
.gl-slot.subject .ncard { opacity: 1; transform: translateY(-8px); box-shadow: 0 0 0 3px var(--blue), 0 8px 16px var(--gl-shadow); }
.gl-slot.subject .place { color: var(--blue); font-weight: 700; }
.gl-target { flex: none; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; width: 3.3rem; margin: .5rem 0 1.1rem; border: 2px dashed var(--accent); border-radius: var(--gl-r-s); background: var(--gl-accent-8); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; animation: gl-target 1.1s ease-in-out infinite; scroll-snap-align: center; -webkit-tap-highlight-color: transparent; }
.gl-target .ico { width: 1.4rem; height: 1.4rem; }
.gl-target small { font-size: .78rem; line-height: 1.1; text-align: center; }
/* a move being previewed: the noble lifts in blue, its ghost stands dashed where it would land, an arrow arcs between */
.gl-line.previewing { padding-top: 1.7rem; scroll-snap-type: none; }
.gl-line.previewing .gl-slot.pick:not(.moving) .ncard { animation: none; opacity: .7; transform: none; }
.gl-slot.moving .ncard { opacity: 1; animation: none; transform: translateY(-8px); box-shadow: 0 0 0 3px var(--blue), 0 8px 16px var(--gl-shadow); }
.gl-slot.moving .to { color: var(--blue); }
.gl-ghostslot { cursor: pointer; scroll-snap-align: center; -webkit-tap-highlight-color: transparent; }
.gl-ghostslot .ncard { opacity: .55; outline: 2px dashed var(--accent); outline-offset: 2px; filter: saturate(.6); animation: gl-ghost 1.2s ease-in-out infinite; }
.gl-ghostslot .to { color: var(--accent); }
@keyframes gl-ghost { 0%, 100% { opacity: .45; } 50% { opacity: .75; } }
.gl-movearrow { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 3; }
.gl-movearrow .halo { fill: none; stroke: var(--gl-paper); stroke-width: 7; stroke-linecap: round; opacity: .85; }
.gl-movearrow .flow { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 3; animation: gl-flow 1s linear infinite; }
.gl-movearrow .flow.draw { animation: gl-flow-in .45s ease-out, gl-flow 1s linear .45s infinite; }
.gl-movearrow .head { fill: var(--accent); }
.gl-movearrow .dot { fill: var(--blue); stroke: var(--gl-paper); stroke-width: 2; }
@keyframes gl-flow { to { stroke-dashoffset: -14; } }
@keyframes gl-flow-in { from { opacity: 0; } to { opacity: 1; } }
.gl-confirm { display: flex; gap: .5rem; width: 100%; }
.gl-confirm .gl-confirm-move { flex: 1; }
@keyframes gl-target { 0%, 100% { background: var(--gl-accent-8); } 50% { background: var(--gl-accent-24); } }

/* ---- the line moving: a noble that has just joined pops in; the rest slide and bounce (guillotine.lineFlip) */
.gl-slot.arrive { animation: gl-arrive .55s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes gl-arrive { from { opacity: 0; transform: translateY(-18px) scale(.85); } to { opacity: 1; transform: none; } }

/* ---- a card someone else has played, shown whole in their colour before the line moves: a short see-through sheet at
   the bottom, so the line above stays in view; a noble or a card to read is the same shape */
.sheet.gl-played .gl-played-note { font-size: .85rem; margin: .4rem 0 0; }
.gl-played-body, .gl-detail-row { display: flex; align-items: flex-start; gap: .8rem; }
.gl-played-body p, .gl-detail-row p { margin: 0 0 .4rem; font-size: 1rem; line-height: 1.35; }
.gl-played-body .acard, .gl-detail-row .acard, .gl-detail-row .ncard { flex: none; cursor: default; }

/* ---- the decks: the noble deck's back in the line's head (the deal flies from it), the action deck's in the hand's */
.gl-ndeck, .gl-deck { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.gl-ndeck .ncard.xs, .gl-deck .acard.xs { font-size: .3rem; cursor: default; flex: none; }
.gl-table-decks { display: inline-flex; align-items: center; gap: .8rem; }
.gl-table-decks .gl-deck .acard.xs { font-size: .38rem; }

/* ---- pile tiles: the newest heads stacked like a fanned pile, a row of mini backs for the cards in hand, what the
   player on turn has played */
.gl-heads { display: flex; align-items: flex-end; min-height: 1.75rem; margin-top: .2rem; padding-left: .5rem; }
.gl-head { flex: none; margin-left: -.5rem; transform: rotate(-4deg); }
.gl-head:nth-child(even) { transform: rotate(3deg) translateY(-1px); }
.gl-head .ncard.xs { font-size: .32rem; cursor: inherit; }
.gl-heads .more { flex: none; font-size: .78rem; color: var(--muted); margin-right: .7rem; align-self: center; }
.gl-piles.table .gl-heads { flex-wrap: wrap; padding-left: .6rem; }
.gl-piles.table .gl-head .ncard.xs { font-size: .4rem; }
.gl-piles.table .gl-head { margin-left: -.6rem; }
.gl-backs { display: flex; gap: 2px; min-height: .95rem; margin-top: .2rem; }
.gl-mback { display: block; width: .62rem; height: .9rem; border-radius: 2px; border: 1px solid var(--ink);
    background: radial-gradient(circle, var(--red) 0 22%, #f4efe2 23% 42%, var(--blue) 43% 66%, transparent 67%), var(--parch); }
.gl-piles.table .gl-mback { width: .8rem; height: 1.15rem; }
.gl-played-strip { font-size: .78rem; color: var(--accent); font-weight: 700; line-height: 1.2; }
.gl-pile .front-chip { font-size: .78rem; white-space: nowrap; }

/* ---- the hand: each card in a wrapper so a card still flying in from the deck can be hidden until it lands */
.gl-hcard { flex: none; display: flex; }

/* ---- things in flight: hidden where they will land until the ghost gets there (guillotine.js adds .gl-landed) */
.gl-incoming { visibility: hidden; }
.gl-incoming.gl-landed { visibility: visible; }
.gl-ghost { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.gl-gi { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.gl-gi > .gl-side { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; box-shadow: 0 10px 18px rgba(43, 29, 18, .4); }
.gl-gi > .gl-side.face, .gl-gi > .gl-side.back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gl-gi > .gl-side.back { transform: rotateY(180deg); }

/* ---- the table: the card being played, or the day beginning, as a panel over the line for one beat */
.gl-played-panel { display: flex; align-items: center; gap: 1rem; max-width: 900px; margin: 0 auto .6rem; padding: .7rem 1rem; background: var(--panel);
    border: 2px solid var(--gl-seat, var(--accent)); border-radius: var(--gl-r-m); box-shadow: var(--shadow); animation: gl-panel-in .3s ease-out; }
.gl-played-panel { --gl-seat: color-mix(in srgb, var(--cauldron) 72%, var(--parch)); }
.gl-played-panel.gl-day-panel { --gl-seat: var(--accent); justify-content: center; text-align: center; }
.gl-played-panel h2 { margin: .1rem 0 .3rem; font-family: var(--display); color: var(--accent); }
.gl-played-panel p { margin: 0; font-size: 1.1rem; }
.gl-played-panel .eyebrow { text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
@keyframes gl-panel-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---- reduced motion: the blade, the jolt, the pulses, the arrivals and the panels stand still (the rings stay lit) */
@media (prefers-reduced-motion: reduce) {
    .gl-guillotine.drop .gl-blade, .gl-guillotine.drop .gl-frame, .gl-slot.pick .ncard, .gl-target, .gl-slot.arrive, .gl-ghostslot .ncard, .gl-movearrow .flow, .gl-played-panel { animation: none !important; }
}