/* Baize Quick games: one flat design system for every quick game, laid out as one game window that an operator can
   frame (GAME-FRAME.md). Felt green, cream cards, card red. Solid shapes, strong contrast, 44px+ targets, short motion.
   Each game's board styles live in games/<slug>.css, linked from quick.html (Find the Lady, the first game, keeps its
   .ftl block at the end of this file). Shared type, buttons, the stake control and the Quick play bolt come from
   baize-ui.css (linked first); the win card and loss note from baize-celebrate.css (linked last). */

:root{
  --felt:#1f4a39;--felt-deep:#163728;--felt-dark:#10291e;--felt-up:#285c47;
  --cream:#f2ead9;--cream-2:#cfc6b0;--red:#b3352b;--red-up:#c8433a;--red-text:#f08a7f;--ink:#1b1a17;--win:#2f7a57;
  --line:#f2ead926;--line-2:#f2ead955;
  --serif:var(--bz-serif);--mono:var(--bz-mono);--ui:var(--bz-sans);
  --bz-accent:var(--red);--bz-accent-up:var(--red-up);--bz-on-accent:var(--cream);
  --ease:cubic-bezier(.2,.7,.1,1);--pop:cubic-bezier(.3,1.5,.5,1);
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}

/* The game window (GAME-FRAME.md): the page is exactly its viewport (the operator's iframe or the browser tab) and
   never scrolls. The felt is the whole window, edge to edge, and every control is drawn on it: the HUD along the top,
   the cards in the middle, the control bar along the bottom. There are no bands, panels or page background around the
   game. Short landscape windows (phones on their side) put the HUD and the bar down the right side of the felt. */
*{box-sizing:border-box}
html{height:100%;overflow:hidden;-webkit-text-size-adjust:100%;touch-action:manipulation;background:var(--felt-dark)}
body{--rail:clamp(280px,38vw,340px);
  margin:0;height:100%;height:100dvh;width:100%;overflow:hidden;position:relative;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hud" "board" "dock";
  background:radial-gradient(130% 90% at 50% 35%,#24543f,var(--felt) 55%,#173d2e);color:var(--cream);font:400 15px/1.4 var(--ui);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
.q-sr,.q-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.q-skip{position:absolute;z-index:50;top:8px;left:12px;background:var(--cream);color:var(--ink);padding:10px 14px;border-radius:8px;transform:translateY(-200%)}
.q-skip:focus{transform:none}

/* Top HUD: home chip and name on the left, recent results, then balance, sound and menu on the right */
.q-hud{grid-area:hud;position:relative;z-index:6;display:flex;align-items:center;gap:8px;min-width:0;padding:4px 10px}
.q-home{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent}
.q-home img{display:block;width:34px;height:34px;transition:transform .15s var(--ease)}
.q-home:hover img{transform:rotate(-20deg)}
.q-hud h1{flex:0 1 auto;min-width:0;margin:0;font:600 21px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* One line of recent results: chips that do not fit wrap onto a hidden second line, so none is ever cut in half. */
.q-history{list-style:none;flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:24px 6px;height:28px;margin:0;padding:2px 0;overflow:hidden}
.q-pill{position:relative;flex:none;font:500 13px/1 var(--mono);padding:6px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.q-pill.q-win{background:var(--cream);color:var(--felt-deep)}
.q-pill.q-push{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--cream-2)}
.q-pill.q-loss{background:var(--ink);color:var(--red-text)}
.q-pill.q-empty{font:400 13px/1 var(--ui);color:var(--cream-2);padding-left:0}
.q-pill:first-child:not(.q-empty){animation:q-pill-in .3s var(--pop)}
@keyframes q-pill-in{from{transform:scale(.6);opacity:0}}
.q-balance{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;margin-left:auto}
.q-history+.q-balance{margin-left:0}
.q-balance-label{font-size:12px;color:var(--cream-2)}
.q-balance strong{font:500 19px/1.2 var(--mono);font-variant-numeric:tabular-nums;border-radius:6px;padding:0 2px}
.q-icon-btn{flex:none;width:44px;height:44px;padding:0;border-radius:50%;background:transparent;border:1.5px solid var(--line-2);display:inline-grid;place-items:center}
.q-icon-btn:hover{background:#f2ead914}
.q-sound .q-sound-on,.q-sound[aria-pressed=true] .q-sound-off{display:none}
.q-sound[aria-pressed=true] .q-sound-on{display:inline}

/* Board: the hero. A size container, so games fit their cards with cqh/cqw units. */
.q-board{grid-area:board;position:relative;min-height:0;min-width:0;padding:6px 10px;container-type:size;overflow:hidden}
.q-board-inner{height:100%;max-width:1100px;margin:0 auto}
/* The result moment (win card, loss note) and the window ring are baize-celebrate's (.bz-cel*, .bz-flash-*). */
.q-board .bz-cel-layer{z-index:5}

/* Notes at the foot of the board: an error, or why auto play stopped. A tap puts one away. */
.q-notes{position:absolute;z-index:4;left:10px;right:10px;bottom:8px;display:grid;justify-items:center;gap:6px;pointer-events:none}
.q-notes p{margin:0;max-width:min(560px,100%);padding:8px 14px;border-radius:12px;background:#0d2219f2;box-shadow:0 6px 18px #0007;font-size:14px;line-height:1.3;text-align:center;pointer-events:auto;cursor:pointer}
.q-notes p:empty{display:none}
.q-error{color:var(--red-text);border:1.5px solid var(--red-text)}
.q-auto-note{color:var(--cream);border:1.5px solid var(--line-2)}

/* Bottom control bar: game options, stake, auto play and the big button, the same in every Quick game */
.q-dock{grid-area:dock;position:relative;z-index:6;display:grid;gap:6px;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "stake" "actions";
  padding:8px 12px calc(8px + var(--safe-b))}
.q-dock-top{grid-area:top;display:flex;align-items:center;gap:12px;min-width:0}
.q-options{flex:1 1 auto;min-width:0}
.q-options:empty{display:none}
.q-hint{flex:1 1 0;min-width:0;margin:0;font-size:14px;color:var(--cream-2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-options:empty+.q-hint{text-align:left}
.q-seg{display:grid;grid-template-columns:repeat(var(--seg-count,3),minmax(0,1fr));gap:4px}
.q-seg button{min-height:44px;border:0;border-radius:10px;background:var(--felt-dark);color:var(--cream-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px 6px;min-width:0}
.q-seg button span{font:600 15px/1.1 var(--ui);white-space:nowrap}
.q-seg button small{font:400 11.5px/1.1 var(--mono);opacity:.85;white-space:nowrap}
.q-seg button:hover:not(:disabled){background:#0b1f16;color:var(--cream)}
.q-seg button[aria-checked=true]{background:var(--cream);color:var(--felt-deep)}
.q-seg button:disabled:not([aria-checked=true]){opacity:.45;transition:opacity .14s .18s}
.q-options[data-busy]{pointer-events:none}
.q-stake{grid-area:stake;min-width:0}
.q-stake label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* The stake row is baize-ui's .bz-stake (Min, ½, box, 2×, Max). */
.q-actions{grid-area:actions;display:flex;gap:6px;min-width:0}
.q-primary,.q-secondary{flex:1 1 0;min-width:0;min-height:54px;border-radius:12px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 10px}
.q-primary{flex-grow:1.4}
.q-label{font:600 21px/1.1 var(--serif);white-space:nowrap}
.q-detail{max-width:100%;font:400 13px/1.2 var(--ui);opacity:.9;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-detail:empty{display:none}
.q-primary{background:var(--red);color:var(--cream)}
.q-primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--red-up)}
.q-primary[data-tone=stop]{background:var(--ink);box-shadow:inset 0 0 0 2px var(--cream-2);--bz-glow:#f2ead955}
.q-primary:disabled{background:#6d3a33;color:#f2ead9b0;opacity:1;filter:none}
.q-secondary{background:var(--cream);color:var(--felt-deep)}
.q-secondary:hover:not(:disabled):not([aria-disabled=true]){background:#fff8ea}
.q-secondary:disabled{background:transparent;color:var(--cream-2);box-shadow:inset 0 0 0 1.5px var(--line-2);opacity:1;filter:none}

/* Auto play: a toggle beside the big button (it gives way to Cash out during a round) and an in-window settings sheet */
.q-auto{flex:none;display:flex;gap:6px}
.q-round-open:not(.q-auto-running) .q-auto{display:none}
.q-toggle{min-width:64px;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:4px 8px;border:0;border-radius:12px;background:var(--felt-dark);font:600 14px/1 var(--ui);color:var(--cream-2)}
.q-toggle:hover:not(:disabled){color:var(--cream)}
.q-toggle[aria-pressed=true]{color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--cream-2)}
.q-toggle:disabled{opacity:.55;transition:opacity .14s .18s}
.q-switch{width:34px;height:20px;border-radius:999px;background:#0b1f16;box-shadow:inset 0 0 0 1.5px var(--line-2);position:relative;transition:background .2s}
.q-switch::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--cream-2);transition:transform .2s var(--ease)}
.q-toggle[aria-pressed=true] .q-switch{background:var(--win)}
.q-toggle[aria-pressed=true] .q-switch::after{transform:translateX(14px);background:var(--cream)}
.q-auto-edit{min-width:44px;max-width:150px;min-height:54px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line-2);background:transparent;font:500 13.5px/1.2 var(--ui);color:var(--cream);white-space:normal;text-align:center}
.q-auto-edit:hover:not(:disabled){background:#f2ead914}
.q-auto-edit:disabled{opacity:.5;transition:opacity .14s .18s}
/* Quick play bolt: beside Auto, always there (it does not change odds, so it stays live during a round). */
.q-actions .bz-turbo{flex:none;min-height:54px}
.q-auto-running .bz-turbo{display:none}
.q-auto-settings{position:absolute;z-index:20;right:12px;bottom:calc(100% + 8px);width:min(460px,calc(100% - 24px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding:12px 14px 14px;border-radius:16px;
  background:var(--felt-deep);border:1px solid var(--line-2);box-shadow:0 18px 44px #000a;font-size:14px;color:var(--cream-2)}
.q-auto-settings:not([data-open]){display:none}
.q-sheet-title{grid-column:1/-1;margin:0;font:600 18px/1.2 var(--serif);color:var(--cream)}
.q-auto-settings label{display:grid;gap:4px;align-content:end}
.q-auto-settings select,.q-auto-settings input:not([type]){width:100%;min-height:44px;border-radius:8px;border:1.5px solid var(--line-2);background:var(--felt-dark);padding:0 8px;font:500 15px var(--mono);font-variant-numeric:tabular-nums}
.q-auto-settings input:not([type])::placeholder{color:var(--cream-2);opacity:.7;font-family:var(--ui)}
.q-auto-settings input:not([type]):focus{border-color:var(--cream);outline:0}
.q-auto-settings input[aria-invalid]{border-color:var(--red-text)}
.q-auto-settings .q-check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;order:1}
.q-check input{width:22px;height:22px;margin:0;accent-color:var(--win)}
.q-auto-settings :disabled{opacity:.55}
/* A game's extra setting is a sentence with a select in it: it gets its own row. */
#q-auto-extra{grid-column:1/-1;order:2}
#q-auto-extra:empty{display:none}
#q-auto-extra label{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
#q-auto-extra select{width:auto;min-width:76px}
/* On a win / on a loss: back to base stake, or raise by a percent (the box shows only for Raise). */
.q-auto-adjust{display:flex;flex-wrap:wrap;align-content:flex-end;gap:4px 6px;order:2;min-width:0}
.q-auto-adjust .q-auto-label{flex:1 0 100%}
.q-auto-settings .q-auto-adjust select{flex:1 1 0;min-width:0;width:auto}
.q-auto-settings .q-auto-adjust input{flex:none;width:68px}
.q-auto-stop{order:3}
.q-auto-single{grid-column:1/-1}
.q-auto-settings .q-auto-done{grid-column:1/-1;order:4;min-height:46px;background:var(--cream);color:var(--felt-deep)}
.q-auto-settings .q-auto-done:hover:not(:disabled){background:#fff8ea}

/* Paused by the operator */
.q-paused{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:#0b1a13c4}
.q-paused p{margin:0;padding:14px 26px;border-radius:14px;background:var(--felt-deep);border:1px solid var(--line-2);font:600 24px/1.2 var(--serif)}

/* Menu: rules, history and settings in one in-window dialog */
.q-dialog{width:min(660px,calc(100% - 20px));max-width:none;max-height:calc(100dvh - 20px);padding:0;border:0;border-radius:16px;background:var(--cream);color:var(--ink);box-shadow:0 30px 80px #000a;overflow:auto;overscroll-behavior:contain}
.q-dialog::backdrop{background:#0b1a13b8}
.q-dialog-head{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:8px 10px 10px 18px;background:var(--cream);border-bottom:1px solid #1b1a171f}
.q-dialog h2{margin:0;font:600 24px/1.2 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-close{width:44px;height:44px;border-radius:50%;border:0;background:transparent;font:400 30px/1 var(--ui);color:var(--ink)}
.q-close:hover{background:#1b1a1712}
.q-tabs{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:3px;border-radius:12px;background:#1b1a1712}
.q-tabs button{min-height:44px;border:0;border-radius:9px;background:transparent;font:600 15px var(--ui);color:#1b1a17b8}
.q-tabs button:hover{color:var(--ink)}
.q-tabs button[aria-selected=true]{background:var(--felt);color:var(--cream)}
.q-dialog :focus-visible{outline-color:var(--red)}
.q-dialog-body{padding:2px 18px 20px;font:400 17px/1.5 var(--serif)}
.q-dialog-body h3{font:600 20px/1.25 var(--serif);margin:18px 0 6px}
.q-dialog-body h4{font:600 15px/1.3 var(--ui);margin:18px 0 6px}
.q-dialog-body p{margin:0 0 10px}
.q-table{width:100%;border-collapse:collapse;font:400 14px/1.3 var(--mono);font-variant-numeric:tabular-nums}
.q-table th{font:600 13px/1.2 var(--ui);text-align:right;padding:6px 8px;border-bottom:1.5px solid var(--ink)}
.q-table td{text-align:right;padding:5px 8px;border-bottom:1px solid #1b1a171a}
.q-table th:first-child,.q-table td:first-child{text-align:left}
.q-table tbody tr:nth-child(odd){background:#1b1a170a}
.q-history-table td:first-child{font:400 14px/1.3 var(--ui)}
.q-history-table tr[data-outcome=win] td:last-child{color:var(--win);font-weight:500}
.q-history-table tr[data-outcome=loss] td:last-child{color:var(--red)}
.q-btn{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--felt);color:var(--cream);font:600 15px var(--ui)}
.q-btn:hover:not(:disabled){background:var(--felt-up)}
.q-btn:disabled{opacity:.5}
.q-btn[aria-pressed=true]{background:var(--win)}
.q-dialog .bz-keys kbd{background:#fffaf0}
#q-pace{width:min(100%,360px)}

/* Wide windows (desktop, tablets, 800x600 iframes): one HUD row with the results inside it, and a two-row bar,
   game options and the hint above, stake on the left and auto play with the big button on the right. */
@media (min-width:760px){
  .q-hud{min-height:56px;padding:5px 14px}
  .q-hud h1{font-size:22px;margin-right:6px}
  .q-dock{grid-template-columns:minmax(300px,400px) minmax(0,1fr);grid-template-areas:"top top" "stake actions";gap:8px 14px;padding:8px max(14px,calc((100% - 1180px)/2)) calc(10px + var(--safe-b))}
  .q-dock-top{min-height:44px}
  .q-options{flex:0 1 auto}
  .q-options .q-seg{grid-template-columns:repeat(var(--seg-count,3),minmax(96px,auto))}
  .q-stake{align-self:center}
  .q-stake-row input{height:48px}
  .q-stake-row button{height:48px;min-width:48px}
  .q-primary,.q-secondary,.q-toggle,.q-auto-edit,.q-actions .bz-turbo{min-height:58px}
  .q-label{font-size:22px}
  .q-auto-settings{right:max(14px,calc((100% - 1180px)/2))}
}
@media (min-width:1200px) and (min-height:800px){
  .q-hud{min-height:64px}
  .q-home{width:52px;height:52px}.q-home img{width:40px;height:40px}
  .q-hud h1{font-size:25px}
  .q-balance strong{font-size:21px}
  .q-icon-btn{width:48px;height:48px}
  .q-dock{padding-top:12px;padding-bottom:calc(14px + var(--safe-b));gap:10px 18px}
  .q-primary,.q-secondary,.q-toggle,.q-auto-edit,.q-actions .bz-turbo{min-height:64px}
  .q-label{font-size:24px}.q-detail{font-size:14px}
  .q-seg button{min-height:48px}
  .q-seg button span{font-size:16px}
}

/* Narrow (phones held upright): the HUD gets a second line for the results; the bar stacks options, stake, actions. */
@media (max-width:759px){
  .q-hud{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"home title bal sound menu" "hist hist hist hist hist";gap:2px 6px;padding:3px 8px 4px}
  .q-home{grid-area:home}.q-hud h1{grid-area:title;font-size:18px}.q-balance{grid-area:bal}.q-sound{grid-area:sound}#q-menu-open{grid-area:menu}
  .q-history{grid-area:hist;column-gap:5px;height:24px;padding:1px 0}
  .q-pill{font-size:12px;padding:5px 8px}
  .q-pill.q-empty{font-size:12px;padding:5px 0}
  .q-balance strong{font-size:17px}
  .q-dock-top{flex-wrap:wrap;row-gap:4px}
  .q-hint{order:-1;flex:1 0 100%;font-size:12.5px;line-height:1.25;text-align:center}
  .q-options:empty+.q-hint{text-align:center}
  .q-board{padding:4px 8px}
  .q-dock{padding:6px 10px calc(8px + var(--safe-b))}
  .q-toggle{min-width:56px}
  .q-actions .bz-turbo{min-width:48px;padding:4px}
  .q-actions .bz-turbo span:not(.q-sr){font-size:11px}
  /* The auto settings button shows a gear here; its summary stays for screen readers. */
  .q-auto-edit{width:44px;min-width:44px;padding:0;font-size:0;color:transparent;background:center/22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2ead9' d='M19.4 13a7.5 7.5 0 0 0 0-2l2.1-1.6-2-3.5-2.5 1a7 7 0 0 0-1.7-1L15 3.3h-4l-.4 2.6a7 7 0 0 0-1.7 1l-2.5-1-2 3.5L6.6 11a7.5 7.5 0 0 0 0 2l-2.1 1.6 2 3.5 2.5-1a7 7 0 0 0 1.7 1l.3 2.6h4l.4-2.6a7 7 0 0 0 1.7-1l2.5 1 2-3.5zM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E")}
  .q-auto-settings{left:10px;right:10px;width:auto}
}
@media (max-width:759px) and (max-height:700px){.q-hint{display:none}}
@media (max-width:380px){
  .q-hud{column-gap:4px}
  .q-balance-label{font-size:11px}
  .q-balance strong{font-size:15.5px}
  .q-hud h1{font-size:16px}
  .q-stake-row button{min-width:44px;padding:0 4px}
  .q-label{font-size:19px}
}

/* Short landscape (phones on their side): the board takes the left, a rail on the right holds the HUD and the bar.
   Everything stays inside the window; the rail is part of the game, not a page column. */
@media (orientation:landscape) and (max-height:500px){
  body{grid-template-columns:minmax(0,1fr) var(--rail);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"board hud" "board ." "board dock"}
  .q-hud{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"home title sound menu" "bal bal bal bal" "hist hist hist hist";gap:4px 6px;min-height:0;padding:6px 8px 2px}
  .q-hud h1{margin:0}
  .q-home{grid-area:home}.q-hud h1{grid-area:title;font-size:18px}.q-sound{grid-area:sound}#q-menu-open{grid-area:menu}
  .q-history{grid-area:hist;align-self:center;column-gap:5px;height:24px;padding:1px 0}
  .q-balance{grid-area:bal;flex-direction:row;align-items:baseline;justify-content:space-between;gap:6px;margin:0;padding:0 4px}
  .q-balance strong{font-size:17px}
  .q-pill{font-size:12px;padding:5px 8px}
  .q-pill.q-empty{font-size:12px}
  .q-hint{display:none}
  .q-board{padding:4px 6px}
  .q-dock{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "stake" "actions";gap:6px;padding:6px 8px calc(6px + var(--safe-b))}
  .q-dock-top{min-height:0}
  .q-options{flex:1 1 auto}
  .q-options .q-seg{grid-template-columns:repeat(var(--seg-count,3),minmax(0,1fr))}
  .q-stake-row input,.q-stake-row button{height:44px;min-width:44px}
  .q-primary,.q-secondary,.q-toggle,.q-auto-edit,.q-actions .bz-turbo{min-height:52px}
  .q-toggle{min-width:58px}
  .q-actions .bz-turbo{min-width:46px}
  .q-actions .bz-turbo span:not(.q-sr){display:none}
  .q-auto-edit{width:44px;min-width:44px;padding:0;font-size:0;color:transparent;background:center/22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2ead9' d='M19.4 13a7.5 7.5 0 0 0 0-2l2.1-1.6-2-3.5-2.5 1a7 7 0 0 0-1.7-1L15 3.3h-4l-.4 2.6a7 7 0 0 0-1.7 1l-2.5-1-2 3.5L6.6 11a7.5 7.5 0 0 0 0 2l-2.1 1.6 2 3.5 2.5-1a7 7 0 0 0 1.7 1l.3 2.6h4l.4-2.6a7 7 0 0 0 1.7-1l2.5 1 2-3.5zM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E")}
  .q-label{font-size:19px}
  .q-seg button small{display:none}
  /* The settings sheet sits over the board, beside the rail. */
  .q-auto-settings{position:fixed;left:auto;right:calc(var(--rail) + 8px);bottom:8px;width:min(440px,calc(100vw - var(--rail) - 16px));max-height:calc(100dvh - 16px);overflow:auto;gap:8px 12px;padding:10px 12px 12px}
  .q-notes{bottom:6px}
}
/* Very short portrait windows: the option buttons drop their second line. */
@media (max-width:759px) and (max-height:700px){.q-seg button small{display:none}}

/* Shared card faces and motion */
/* Card motion follows Quick play: --pace is 1, 0.35 or 0 (baize-pace sets it on body). */
.q-flip{animation:q-flip calc(.3s*var(--pace,1)) calc(var(--delay,0ms)*var(--pace,1)) both linear}
.q-flip::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--red);animation:q-flip-cover calc(.3s*var(--pace,1)) calc(var(--delay,0ms)*var(--pace,1)) both steps(1,end)}
@keyframes q-flip{0%{transform:scaleX(1)}50%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes q-flip-cover{0%{opacity:1}50%,100%{opacity:0}}
@keyframes q-pop{0%{transform:scale(1)}50%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes q-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* Find the Lady */
.ftl{--gap:6px;--rowh:calc((100cqh - 7*var(--gap))/8);--rung:74px;height:100%;display:grid;grid-template-rows:repeat(8,minmax(0,1fr));gap:var(--gap);
  max-width:calc(var(--n,3)*var(--rowh)*1.75 + var(--n,3)*6px + var(--rung) + 14px);margin:0 auto}
.ftl-row{display:grid;grid-template-columns:minmax(0,1fr) var(--rung);gap:8px;border-radius:12px;transition:background .2s}
.ftl-row[data-state=active]{background:#f2ead914;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.ftl-cards{display:flex;gap:6px;justify-content:center;min-width:0;padding:3px}
.ftl-card{position:relative;flex:1 1 0;min-width:0;max-width:calc(var(--rowh)*1.75);height:100%;padding:0;border:0;border-radius:10px;background:var(--red);color:var(--ink);display:grid;place-items:center;overflow:hidden;transition:transform .15s var(--ease),background .15s}
.ftl-back{position:absolute;inset:5px;border-radius:6px;box-shadow:inset 0 0 0 2px #f2ead980;background:url('/assets/baize-mark-v5.svg') center/auto 46% no-repeat}
.ftl-row[data-state=ahead] .ftl-card{background:var(--felt-up)}
.ftl-row[data-state=ahead] .ftl-back{box-shadow:inset 0 0 0 2px #f2ead933;opacity:.45}
.ftl-row[data-state=active] .ftl-card:not(:disabled):hover{transform:translateY(-3px);background:var(--red-up)}
.ftl-card[data-face=queen]{background:var(--cream)}
.ftl-card[data-face=joker]{background:var(--ink);color:var(--red-text)}
.ftl-face{display:flex;align-items:center;justify-content:center;gap:4%;width:100%;height:100%}
.ftl-face b{font:600 calc(var(--rowh)*.5)/1 var(--serif)}
.ftl-face svg{width:calc(var(--rowh)*.36);height:auto;flex:none}
.ftl-card[data-face=queen] svg{color:var(--red)}
.ftl-face .ftl-joker-word{font:600 calc(var(--rowh)*.24)/1 var(--ui);color:var(--cream)}
.ftl-card[data-mark=other]{opacity:.42}
.ftl-row[data-state=unplayed] .ftl-card{opacity:.4}
.ftl-card[data-mark=picked]{box-shadow:inset 0 0 0 3px var(--win)}
.ftl-card[data-mark=picked].q-flip .ftl-face{animation:q-pop calc(.26s*var(--pace,1)) calc(.3s*var(--pace,1)) var(--ease)}
.ftl-card[data-mark=hit]{background:var(--red);color:var(--cream);opacity:1}
.ftl-card[data-mark=hit] .ftl-joker-word{color:var(--cream)}
.ftl-card[data-mark=hit].q-flip{animation:q-flip calc(.3s*var(--pace,1)) both linear,q-shake calc(.32s*var(--pace,1)) calc(.3s*var(--pace,1)) var(--ease)}
.ftl-card[data-mark=hit].q-flip::after{background:var(--red-up)}
.ftl-rung{position:relative;display:flex;align-items:center;justify-content:center;border-radius:10px;margin:3px 0;font:500 15px/1 var(--mono);transition:background .2s,color .2s;font-variant-numeric:tabular-nums;color:var(--cream-2);opacity:.75}
.ftl-rung[data-rung=next]{opacity:1;color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--cream)}
.ftl-rung[data-rung=reached]{opacity:1;background:var(--cream);color:var(--felt-deep)}
.ftl-row[data-lost] .ftl-rung{opacity:1;color:var(--red-text);box-shadow:inset 0 0 0 1.5px var(--red-text);text-decoration:line-through}
@container (max-width:420px){.ftl{--gap:5px;--rung:64px}.ftl-rung{font-size:13.5px}.ftl-cards{gap:5px}}
@container (min-width:560px){.ftl-rung{font-size:17px}.ftl{--rung:92px}}
/* Short boards (an 800x600 iframe, a phone): rows sit closer and the cards fill their row, so they stay 44px tall. */
@container (max-height:470px){.ftl{--gap:4px}.ftl-cards{padding:0 2px}.ftl-rung{margin:0}.ftl-row{border-radius:10px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}