/* Yacht on the table (web/yacht.js): the dice tray, the paper score sheet under it, the
   receipt a box opens (rolled, or written in before a roll), the face picker for real dice, the podium at the finish, the
   paper dice in flight on their stage, and the display's kitchen table. Everything is
   scoped under .table-yacht, which the board's root and the dice stage both carry,
   except the font and the last block, which puts the page around a display on the
   table's wood. The phone's views are drawn in the page's own colours and fonts, so dark
   mode follows the page. A die in flight takes the tray face's rules exactly (size,
   padding, pips), so a landed die and its tray face match and the swap between them
   cannot be seen. The sheets are the page's only tables, so their rules are all here;
   the page's button rules are restated where the dice and boxes need them otherwise. */

/* The display's pencil: Caveat, self-hosted like the page's other faces
   (scripts/fetch-fonts.sh), one variable file for its 500 and 700. A phone never asks for it. */
@font-face{font-family:Caveat;src:url(/fonts/caveat-v23.woff2) format("woff2");font-weight:400 700;font-display:swap}

.table-root.table-yacht{display:block}

/* A die face: pips on a three by three grid, the same in the tray and in flight. */
.table-yacht .yacht-face{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;aspect-ratio:1;width:100%;padding:7px;border:1.5px solid var(--ink);border-radius:6px;background:var(--plate);transform-origin:50% 50%}
.table-yacht .yacht-pip{display:block;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.table-yacht .p1{grid-area:1/1}.table-yacht .p3{grid-area:1/3}.table-yacht .p4{grid-area:2/1}.table-yacht .p5{grid-area:2/2}
.table-yacht .p6{grid-area:2/3}.table-yacht .p7{grid-area:3/1}.table-yacht .p9{grid-area:3/3}
.table-yacht .unrolled::after{content:"";width:14px;height:2px;background:var(--rule);grid-area:2/2}

/* The stage over the page: rolling dice as flat paper dice seen from above. Each face is
   darker while tilted away from above. */
.table-yacht.yacht-stage{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.table-yacht .yacht-flying{position:absolute;left:0;top:0;margin:0;will-change:transform}
.table-yacht .yacht-roll-face{position:absolute;inset:0;width:100%;height:100%;margin:0;box-shadow:0 3px 8px rgb(0 0 0 / .14);transition:box-shadow .12s ease-out}
.table-yacht .yacht-roll-face::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:var(--shade,0);pointer-events:none}
.table-yacht .yacht-flying.landed .yacht-roll-face{box-shadow:none}

/* The tray: Roll and the count, five dice, and the shake switch, on one row at every width. */
.table-yacht .yacht-tray{position:relative;z-index:3;display:grid;grid-template-columns:58px minmax(0,296px);gap:12px;align-items:start;margin:2px 0 5px;padding:0 0 4px}
.table-yacht .yacht-tray.has-shake{grid-template-columns:58px minmax(0,296px) minmax(44px,1fr)}
.table-yacht .yacht-roll{display:grid;gap:2px;justify-items:center;min-width:0;padding-top:2px}
.table-yacht .yacht-roll button{width:100%;min-height:44px;padding:4px 8px;font-size:14px}
.table-yacht .yacht-note{font-size:11px;line-height:14px;white-space:nowrap;color:var(--muted)}
.table-yacht .yacht-note.armed{color:var(--accent);font-weight:700}
.table-yacht .yacht-whose{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;line-height:44px}
.table-yacht .yacht-dice{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;width:100%;min-width:0;padding-top:2px}
.table-yacht .yacht-die{display:block;width:100%;max-width:48px;height:61px;min-height:61px;margin:0;padding:0;border:0;background:transparent;font-size:1rem;line-height:1.2;text-align:center;overflow:visible}
.table-yacht button.yacht-die:hover:not(:disabled){border:0;background:transparent}
.table-yacht button.yacht-die:hover:not(:disabled) .yacht-face{background:var(--tint)}
.table-yacht .yacht-die.kept .yacht-face{background:var(--tint);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.table-yacht .yacht-die small{display:block;min-height:12px;margin-top:3px;font-size:10px;line-height:12px;color:var(--muted)}
.table-yacht .yacht-die.kept small{color:var(--accent);font-weight:700}
/* While a die is out rolling, its spot in the tray is an empty outline. */
.table-yacht .yacht-die.in-flight .yacht-face{border-style:dashed;border-color:var(--rule);background:transparent;box-shadow:none}
.table-yacht .yacht-die.in-flight .yacht-face>*,.table-yacht .yacht-die.in-flight .yacht-face::after{visibility:hidden}
/* Dice read off real dice are set down in the tray, never thrown. */
.table-yacht .yacht-die.set-down .yacht-face{animation:yacht-set var(--yacht-set,260ms) ease-out both;animation-delay:var(--yacht-mark-at,0ms)}
@keyframes yacht-set{from{opacity:0;transform:translateY(-10px) scale(1.08)}to{opacity:1;transform:none}}

/* Shake to roll: a real checkbox switch, so iPhone Safari plays its system tick when it is
   toggled. The input is hidden but keeps focus and state; its label is drawn as the button,
   and reads as on like a kept die. */
.table-yacht .yacht-shake{position:relative;display:grid;gap:2px;justify-items:center;justify-self:end;width:44px;padding-top:2px}
.table-yacht #yacht-shake{position:absolute;top:0;left:0;width:1px;height:1px;min-height:0;margin:0;padding:0;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.table-yacht .yacht-shake-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule);background:var(--plate);color:var(--muted);cursor:pointer}
.table-yacht .yacht-shake-button:hover{border-color:var(--ink);background:var(--tint)}
.table-yacht .yacht-shake-button svg{width:22px;height:22px}
.table-yacht #yacht-shake:checked+.yacht-shake-button{border-color:var(--accent);background:var(--tint);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.table-yacht #yacht-shake:focus-visible+.yacht-shake-button{outline:3px solid var(--accent);outline-offset:3px}
.table-yacht #yacht-shake:checked~.yacht-note{color:var(--accent);font-weight:700}
.table-yacht .yacht-tip{position:absolute;right:0;top:calc(100% + 2px);z-index:6;margin:0;padding:6px 10px;font-size:13px;line-height:1.3;white-space:nowrap;background:var(--plate);border:2px solid var(--ink)}

/* Own dice: the tray fills as faces are tapped, the six faces under it. */
.table-yacht .yacht-tray.yacht-picking{grid-template-columns:minmax(0,320px);gap:8px}
.table-yacht .yacht-ask{margin:0;font-size:14px;font-weight:700}
.table-yacht .yacht-picking .yacht-die{height:auto;min-height:0}
.table-yacht .yacht-picking .yacht-die small{display:none}
.table-yacht .yacht-die.empty .yacht-face{border-style:dashed;border-color:var(--rule);background:transparent}
.table-yacht .yacht-faces{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.table-yacht .yacht-faces button{display:grid;place-items:center;min-height:44px;padding:0;border:1px solid var(--rule);background:var(--plate)}
.table-yacht .yacht-faces .yacht-mface{width:28px;height:28px}
.table-yacht .yacht-picked{display:flex;flex-wrap:wrap;gap:8px}
.table-yacht .yacht-picked button{min-height:44px;padding:4px 12px;font-size:14px}

/* The sheet: every player stays on it, and extra columns scroll within the paper. The
   current player's column is a wash of the tint, with the name in bold. */
.table-yacht .yacht-sheet{overflow:auto;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--plate)}
.table-yacht .yacht-sheet table{table-layout:fixed;width:100%;min-width:calc(122px + var(--yacht-columns,1) * 44px);border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.table-yacht .yacht-sheet th,.table-yacht .yacht-sheet td{min-width:44px;padding:0;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);text-align:center;font-size:16px;line-height:1.15}
.table-yacht .yacht-sheet th:last-child,.table-yacht .yacht-sheet td:last-child{border-right:0}
.table-yacht .yacht-sheet tr:last-child>*{border-bottom:0}
.table-yacht .yacht-sheet thead th{height:36px;padding:2px 3px;vertical-align:middle;font-size:12px;font-weight:500;overflow:hidden}
.table-yacht .yacht-sheet th[scope=row],.table-yacht .yacht-sheet thead th:first-child{position:sticky;left:0;z-index:1;width:122px;min-width:122px;padding:0 8px;background:var(--plate);text-align:left;font-size:14px;font-weight:400}
.table-yacht .yacht-sheet thead th:first-child{z-index:2}
.table-yacht .yacht-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.1;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.table-yacht .yacht-sheet .yacht-turn{background:color-mix(in srgb,var(--tint) 78%,var(--plate))}
.table-yacht .yacht-sheet thead th.yacht-turn{font-weight:800}
.table-yacht .yacht-lower>*{border-top:2px solid var(--rule)}
.table-yacht .yacht-score{display:flex;align-items:center;justify-content:center;width:100%;height:38px;min-height:38px;margin:0;padding:0 1px;border:0;background:transparent;font-size:1.18rem;line-height:1.1;font-variant-numeric:tabular-nums}
.table-yacht .yacht-score.blank{color:var(--muted)}
.table-yacht .yacht-score.filled,.table-yacht .yacht-score.scratch{font-weight:700}
.table-yacht button.yacht-score:hover:not(:disabled){border:0;background:var(--tint)}
.table-yacht button.yacht-score:disabled{opacity:1}
.table-yacht .yacht-score.editing{box-shadow:inset 0 0 0 2px var(--accent)}
/* A hint is what Legal says a box would score: smaller, italic and light, so it never
   reads as a score written in. */
.table-yacht .yacht-hint{font-size:.95rem;font-style:italic;font-weight:400;color:var(--muted)}
/* A box just written is pencilled in. */
.table-yacht .yacht-score.scored{animation:yacht-scored var(--yacht-scored,900ms) ease-out both;animation-delay:var(--yacht-mark-at,0ms)}
@keyframes yacht-scored{from{background:var(--tint);color:var(--accent)}to{background:transparent}}
.table-yacht .yacht-sheet .yacht-bonus>*{height:34px;font-size:12px;overflow:hidden}
.table-yacht .yacht-rowhint{display:block;font-size:10px;color:var(--muted)}
.table-yacht .yacht-total>*{height:36px;padding:6px 8px;border-top:2px solid var(--ink);background:var(--tint);font-size:1.18rem;font-weight:700}
.table-yacht .yacht-sheet .yacht-total th{background:var(--tint)}
.table-yacht .yacht-total td{padding-inline:1px}
.table-yacht .yacht-total td.yacht-turn{background:var(--tint);color:var(--accent)}
/* Bonus Yachts: a crossed square each under the 50, from the second Yacht on. Once anyone
   has squares, the other Yacht boxes keep their numbers on the same line. */
.table-yacht .yacht-score.has-squares{flex-direction:column;gap:4px}
.table-yacht .yacht-value{line-height:1}
.table-yacht .yacht-squares-mark{display:flex;gap:3px}
.table-yacht .yacht-square{width:9px;height:9px;fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linecap:round}
.table-yacht .yacht-squares .yacht-score:not(.has-squares){padding-bottom:13px;line-height:1}
.table-yacht .yacht-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The receipt floats over the sheet beside its box without moving any row or column: the
   dice that count, the total, one action. */
.table-yacht .yacht-receipt{position:fixed;z-index:10;left:8px;top:8px;width:264px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);background:var(--plate);border:2px solid var(--ink);font-size:14px;line-height:1.3}
.table-yacht .yacht-receipt-body{max-height:inherit;overflow:auto;overscroll-behavior:contain;padding:12px 14px 4px}
.table-yacht .yacht-who{margin:0;font-size:13px;color:var(--muted)}
.table-yacht .yacht-what{margin:0 0 10px;font-family:Archivo,"Arial Narrow",Impact,sans-serif;font-stretch:85%;font-weight:800;font-size:25px;line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere}
.table-yacht .yacht-line{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:62px;margin-bottom:8px;padding:8px 0;border-block:1px solid var(--rule)}
.table-yacht .yacht-minis{display:flex}
.table-yacht .yacht-mini{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 4px 4px}
.table-yacht .yacht-mini.pattern::after{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:var(--accent)}
.table-yacht .yacht-mvalue{position:relative;align-self:stretch;margin-top:8px;font-size:13px;line-height:1;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.table-yacht .yacht-mini.counted~.yacht-mini.counted .yacht-mvalue::before{content:"+";position:absolute;left:-4px;transform:translateX(-50%)}
.table-yacht .yacht-mini.unused .yacht-mface{opacity:.28}
.table-yacht .yacht-mface{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;width:24px;height:24px;padding:3px;border:1.25px solid var(--ink);border-radius:4px;background:var(--plate)}
.table-yacht .yacht-mface .yacht-pip{width:4px;height:4px}
.table-yacht .yacht-sum{display:flex;align-items:center;font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.table-yacht .yacht-sum>span{margin-right:5px;font-size:20px;font-weight:400;color:var(--muted)}
.table-yacht .yacht-extra{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--rule);font-size:13px}
.table-yacht .yacht-extra b{font-size:18px;font-variant-numeric:tabular-nums}
.table-yacht .yacht-rule{margin:0 0 10px;font-size:13px;color:var(--muted)}
.table-yacht .yacht-controls{display:grid;gap:6px}
.table-yacht .yacht-receipt button{width:100%;min-height:44px;padding:5px;font-size:14px}
.table-yacht .yacht-receipt .primary{font-size:15px;font-weight:700}
.table-yacht .yacht-links{display:flex;justify-content:flex-end}
.table-yacht .yacht-receipt .yacht-links button{width:auto;padding:0 2px;border:0;background:transparent;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.table-yacht .yacht-receipt .yacht-links button:hover:not(:disabled){background:transparent;text-decoration-color:currentColor}
/* style.css draws the pointer from the receipt to its box, from data-side. */
/* The receipt written in before a roll, after the old sheet's editor: chips for the quick
   options (the number large, the count under it), a pair for a box with one score, the
   field for any other total on the receipt's own line, the rules' refusal, and the six
   faces of a Yacht written in. */
.table-yacht .yacht-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:6px}
.table-yacht .yacht-receipt .yacht-chips button{display:grid;place-items:center;align-content:center;gap:2px;min-height:52px;padding:4px}
.table-yacht .yacht-chips b{font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.table-yacht .yacht-chips span{font-size:11px;color:var(--muted)}
.table-yacht .yacht-pair{grid-template-columns:1fr 1fr;margin-bottom:6px}
.table-yacht .yacht-typed{min-height:0;margin:6px 0 8px}
.table-yacht .yacht-typed label{font-size:13px;color:var(--muted)}
.table-yacht .yacht-typed input{width:2.4em;min-height:44px;padding:2px 6px;font:inherit;text-align:right;-moz-appearance:textfield;appearance:textfield}
.table-yacht .yacht-typed input::-webkit-inner-spin-button,.table-yacht .yacht-typed input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}
.table-yacht .yacht-typed input[aria-invalid=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.table-yacht .yacht-written .yacht-controls{margin-bottom:6px}
.table-yacht .yacht-refusal{margin:4px 0 10px;font-size:13px;font-weight:700}
.table-yacht .yacht-refusal:empty{display:none}
.table-yacht .yacht-rule.yacht-now{margin:-6px 0 8px}
.table-yacht .yacht-fives{margin-bottom:6px}
.table-yacht .yacht-receipt .yacht-fives button{padding:0}

/* The finish: a podium of dice under the client's card. Third place lands first, the
   winner's stack last. */
.table-yacht .yacht-podium{margin:6px 0 10px;padding:16px 16px 14px;background:var(--plate);border:2px solid var(--ink);text-align:center}
.table-yacht .yacht-podium ol{display:flex;justify-content:center;align-items:flex-end;gap:16px;margin:0;padding:0;list-style:none}
.table-yacht .yacht-place{display:grid;justify-items:center;gap:4px;min-width:68px;max-width:30%}
.table-yacht .yacht-place.pos-0{order:2}.table-yacht .yacht-place.pos-1{order:1}.table-yacht .yacht-place.pos-2{order:3}
.table-yacht .yacht-stack{display:flex;flex-direction:column-reverse;align-items:center;gap:3px;width:100%;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.table-yacht .yacht-pdie{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;width:30px;height:30px;padding:5px;border:1.5px solid var(--ink);border-radius:5px;background:var(--plate)}
.table-yacht .yacht-pdie .yacht-pip{width:5px;height:5px}
.table-yacht .yacht-place.first .yacht-pdie{background:var(--tint);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.table-yacht .yacht-pname{max-width:100%;font-size:14px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.table-yacht .yacht-ptotal{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.table-yacht .yacht-rest{margin:12px auto 0;font-size:13px;color:var(--muted)}
.table-yacht .yacht-podium.arriving .yacht-pdie{animation:yacht-drop 420ms cubic-bezier(.3,.6,.4,1) both;animation-delay:var(--yacht-arrival-at,0ms)}
.table-yacht .yacht-podium.arriving .pos-1 .yacht-pdie:nth-child(1){animation-delay:calc(280ms + var(--yacht-arrival-at,0ms))}
.table-yacht .yacht-podium.arriving .pos-1 .yacht-pdie:nth-child(2){animation-delay:calc(370ms + var(--yacht-arrival-at,0ms))}
.table-yacht .yacht-podium.arriving .pos-0 .yacht-pdie:nth-child(1){animation-delay:calc(560ms + var(--yacht-arrival-at,0ms))}
.table-yacht .yacht-podium.arriving .pos-0 .yacht-pdie:nth-child(2){animation-delay:calc(650ms + var(--yacht-arrival-at,0ms))}
.table-yacht .yacht-podium.arriving .pos-0 .yacht-pdie:nth-child(3){animation-delay:calc(740ms + var(--yacht-arrival-at,0ms))}
@keyframes yacht-drop{from{opacity:0;transform:translateY(-48px)}55%{opacity:1}75%{transform:translateY(0) scale(1.06,.92)}to{opacity:1;transform:none}}

/* The display (ctx.display): Yacht on a kitchen table, after design/yacht/Display.dc.html
   and Finish.dc.html, the visual spec. The client gives a display's board the screen;
   the page is the table's wood (the last block), with a spiral pad at the left holding
   the sheet in pencil, a felt dice tray at the right with this roll above its stitching
   and the kept dice ringed below, and under the tray a scrap tallying the faces rolled,
   a coffee ring and a sticky note for a rare roll, clear of the table's QR, which the
   client keeps in the corner and the last block burns into the wood. The mockups are
   1920 by 1080; --px is one of their pixels at any screen size, so the tray and the
   scraps keep their proportions, while the pad takes the height and what width the
   tray leaves. The pad is a size container: the sheet's rows and pencil are fractions
   of it, so every sheet fits its pad with no scroll, and each column's pencil shrinks
   with its width (--col), from seven players on and for long names. Every cell clips.
   The dice stage carries yacht-tv too, so a die in flight is the face it lands on. */
.table-yacht.yacht-tv{--px:min(.09259vh,.05208vw);--pencil:Caveat,"Noteworthy","Bradley Hand","Segoe Print",cursive;--graphite:#3a3a40;--paper:#f3ead6;--print:#4a3f30;--ink-dark:#2b2318;--pencil-grey:#8e8c86;--sheet-rule:rgb(43 35 24 / .14)}
.table-root.table-yacht.yacht-tv{position:relative;min-height:0;padding:0;overflow:hidden;color:var(--ink-dark);font-family:Karla,"Segoe UI",system-ui,sans-serif}
.table-yacht .yacht-display{position:absolute;inset:0}
.table-yacht .yacht-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The pad: warm paper on a spiral binding, tilted a touch on the table. */
.table-yacht .yacht-pad{position:absolute;left:calc(46 * var(--px));right:calc(634 * var(--px));top:3.15vh;bottom:3.15vh;container-type:size;background:var(--paper);border-radius:4px 4px 6px 6px;box-shadow:0 calc(18 * var(--px)) calc(40 * var(--px)) rgb(0 0 0 / .45);transform:rotate(-.5deg)}
.table-yacht .yacht-pad::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(30 * var(--px));border-radius:4px 4px 0 0;background:#2f2a24 radial-gradient(circle at 50% 50%,var(--paper) 0 calc(5 * var(--px)),transparent calc(6 * var(--px))) 0 0/calc(40 * var(--px)) calc(30 * var(--px))}
.table-yacht .yacht-sheet-tv{--sheet:95.16cqw;--label-f:.28;--col:calc(var(--sheet) * (1 - var(--label-f)) / var(--yacht-columns,1));position:absolute;left:2.42cqw;right:2.42cqw;top:4.55cqh}
/* The highlighter wash over the turn's column, the name underlined. */
.table-yacht .yacht-wash{position:absolute;top:-.3cqh;bottom:-.6cqh;left:calc(var(--label-f) * 100% + var(--yacht-at,0) * (1 - var(--label-f)) * 100% / var(--yacht-columns,1));width:calc((1 - var(--label-f)) * 100% / var(--yacht-columns,1));background:rgb(250 214 60 / .5);mix-blend-mode:multiply;transform:rotate(.3deg);border-radius:6px 10px 8px 12px;pointer-events:none}
.table-yacht .yacht-pad table{position:relative;width:100%;table-layout:fixed;border-collapse:collapse;font-variant-numeric:tabular-nums}
.table-yacht .yacht-pad col.yacht-boxes{width:calc(var(--label-f) * 100%)}
.table-yacht .yacht-pad th,.table-yacht .yacht-pad td{position:relative;height:5.6cqh;padding:0 min(1.13cqw,calc(var(--col) * .1));border:0;border-bottom:1px solid var(--sheet-rule);text-align:left;vertical-align:middle;line-height:1;white-space:nowrap;overflow:hidden}
.table-yacht .yacht-pad tbody th{font-size:2.87cqh;font-weight:700;color:var(--print);text-overflow:ellipsis}
.table-yacht .yacht-pad thead th{height:6.4cqh;border-bottom:2px solid var(--ink-dark);text-align:center;font-family:var(--pencil);font-size:min(4.94cqh,calc(var(--col) * .3));font-weight:700;color:var(--ink-dark)}
.table-yacht .yacht-pad thead th:first-child{text-align:left;font-family:Karla,"Segoe UI",system-ui,sans-serif;font-size:2.37cqh;letter-spacing:.24em;text-transform:uppercase;color:var(--print)}
.table-yacht .yacht-pad thead th:first-child .yacht-hand{display:block;margin-top:.4cqh;font-family:var(--pencil);font-size:2.6cqh;font-weight:500;letter-spacing:0;text-transform:none;color:var(--graphite)}
.table-yacht .yacht-pad .yacht-name{display:block;padding:0 .12em .22em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-yacht .yacht-pad thead .yacht-turn .yacht-name{text-decoration:underline;text-decoration-thickness:max(2px,.08em);text-underline-offset:.16em}
.table-yacht .yacht-pad td{text-align:center;font-family:var(--pencil);font-size:min(4.55cqh,calc(var(--col) * .36));color:var(--graphite)}
.table-yacht .yacht-pad .yacht-rowhint{display:block;margin-top:.3cqh;font-size:1.78cqh;font-weight:400;color:var(--pencil-grey)}
.table-yacht .yacht-pad .yacht-bonus th{white-space:normal}
.table-yacht .yacht-chase{font-family:var(--pencil);font-size:min(3.36cqh,calc(var(--col) * .22));color:#5a5a62}
.table-yacht .yacht-pad .yacht-total>*,.table-yacht .yacht-pad .yacht-total td.yacht-turn{height:7.1cqh;border-top:3px double var(--ink-dark);border-bottom:0;background:transparent;color:var(--graphite)}
.table-yacht .yacht-pad .yacht-total th{color:var(--print)}
.table-yacht .yacht-pad .yacht-total td{font-size:min(5.73cqh,calc(var(--col) * .4));font-weight:700}
.table-yacht .yacht-pad .yacht-total .yacht-pencil{font-weight:700}
.table-yacht .is-crowded .yacht-pad td,.table-yacht .is-crowded .yacht-pad thead th:not(:first-child){padding-inline:.4cqw}
/* Pencil: a graphite grain through the numbers. */
.table-yacht.yacht-tv .yacht-pencil{position:relative;display:inline-block;padding:0 .08em;font-family:var(--pencil);font-weight:500;line-height:1;color:var(--graphite)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .table-yacht.yacht-tv .yacht-pencil{background:var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.26 0 0 0 .1 .26 0 0 0 .1 .26 0 0 0 .12 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
/* A ghost is what the dice showing would score: small italic print in grey at the box's
   right, never pencil, so it never reads as a number written in. */
.table-yacht.yacht-tv .yacht-ghost{position:absolute;right:min(2.26cqw,calc(var(--col) * .14));top:50%;transform:translateY(-50%);font-family:Karla,"Segoe UI",system-ui,sans-serif;font-size:min(2.37cqh,calc(var(--col) * .19));font-style:italic;font-weight:400;line-height:1;color:var(--pencil-grey)}
.table-yacht.yacht-tv .yacht-yachtbox{display:inline-flex;align-items:center;gap:.2em;max-width:100%}
.table-yacht.yacht-tv .yacht-squares-mark{display:flex;flex-direction:column;justify-content:center;gap:.3cqh}
.table-yacht.yacht-tv .yacht-square{width:1.5cqh;height:1.5cqh;stroke:var(--graphite);stroke-width:1.1}
/* A scratch is a stroke through the box; the winner is ringed. Both stay inside their
   cell and draw left to right. */
.table-yacht.yacht-tv .yacht-scratch{position:absolute;inset:36% 18%;display:block}
.table-yacht.yacht-tv .yacht-stroke,.table-yacht.yacht-tv .yacht-ring{display:block;overflow:visible;pointer-events:none}
.table-yacht.yacht-tv .yacht-stroke{width:100%;height:100%}
.table-yacht.yacht-tv .yacht-ring{position:absolute;left:12%;top:7%;width:76%;height:86%}
.table-yacht.yacht-tv .yacht-stroke path,.table-yacht.yacht-tv .yacht-ring path{fill:none;stroke:var(--graphite);stroke-width:max(2px,.32cqh);stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.9}
.table-yacht.yacht-tv .yacht-scratch.yacht-writing path{stroke-dasharray:1;stroke-dashoffset:1;animation:yacht-stroke var(--yacht-write,650ms) ease-out both;animation-delay:var(--yacht-mark-at,0ms)}
.table-yacht.yacht-tv .yacht-ringing .yacht-ring path{stroke-dasharray:1;stroke-dashoffset:1;animation:yacht-stroke 900ms ease-in-out both;animation-delay:var(--yacht-arrival-at,0ms)}
/* A number pencilled in from the left as it lands; a note and the date the same, slower. */
.table-yacht.yacht-tv .yacht-pencil.yacht-writing{animation:yacht-write var(--yacht-write,650ms) cubic-bezier(.45,.05,.55,.95) both;animation-delay:var(--yacht-mark-at,0ms)}
.table-yacht.yacht-tv .yacht-square.yacht-writing{animation:yacht-write var(--yacht-write,650ms) ease-out both;animation-delay:calc(var(--yacht-mark-at,0ms) + 300ms)}
.table-yacht.yacht-tv .yacht-rare.yacht-writing{animation:yacht-write calc(var(--yacht-write,650ms) * 2) ease-out both;animation-delay:var(--yacht-rare-at,0ms)}
.table-yacht.yacht-tv .yacht-date.yacht-writing{animation:yacht-write 900ms ease-out both;animation-delay:calc(var(--yacht-arrival-at,0ms) + 300ms)}
/* An undone score is rubbed out: it smears, blurs and fades before the sheet redraws. */
.table-yacht.yacht-tv .yacht-smudge{animation:yacht-smudge var(--yacht-smudge,700ms) ease-in both;animation-delay:var(--yacht-smudge-at,0ms)}
.table-yacht.yacht-tv .yacht-pencil.yacht-smudge::after{content:"";position:absolute;inset:-25% -40%;border-radius:50%;background:radial-gradient(closest-side,rgb(70 70 76 / .3),transparent)}
/* A crowded sheet turns between its halves with one sweep of paper across the columns. */
.table-yacht.yacht-tv .yacht-sweep{position:absolute;top:0;bottom:0;left:calc(var(--label-f) * 100%);right:0;overflow:hidden;pointer-events:none}
.table-yacht.yacht-tv .yacht-sweep::before{content:"";position:absolute;inset:0;border-right:.3cqh solid rgb(56 56 61 / .45);background:linear-gradient(90deg,transparent,var(--paper) 20%);transform:translateX(-100%);animation:yacht-sweep var(--yacht-sweep,600ms) ease-in-out both;animation-delay:var(--yacht-page-at,0ms)}

/* The felt tray: green felt in a leather rim. This roll above the stitching, its loose
   dice as large as their count allows on one row (five sit three and two); the kept dice
   below, ringed in gold. The tumble is clipped to the throw. */
.table-yacht .yacht-felt{position:absolute;right:calc(46 * var(--px));top:calc(34 * var(--px));width:calc(544 * var(--px));height:calc(560 * var(--px));display:flex;flex-direction:column;padding:calc(30 * var(--px)) calc(34 * var(--px));border-radius:calc(22 * var(--px));background:#2f5a3f;box-shadow:0 0 0 calc(14 * var(--px)) #3b2a1f,0 0 0 calc(16 * var(--px)) #231812,0 calc(22 * var(--px)) calc(44 * var(--px)) rgb(0 0 0 / .55),inset 0 calc(30 * var(--px)) calc(40 * var(--px)) rgb(0 0 0 / .45);color:#e8e3cf}
.table-yacht .yacht-felt::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(45deg,rgb(255 255 255 / .035) 0 2px,transparent 2px 6px);pointer-events:none}
.table-yacht .yacht-felt h2{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:calc(16 * var(--px));margin:0 0 calc(16 * var(--px));font-family:Karla,"Segoe UI",system-ui,sans-serif;font-size:calc(20 * var(--px));font-weight:700;line-height:1.2;letter-spacing:.3em;text-transform:uppercase;color:#cfe3d3}
.table-yacht .yacht-felt h2 .yacht-hand{min-width:0;padding-right:.15em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--pencil);font-size:calc(36 * var(--px));font-weight:500;letter-spacing:0;text-transform:none;color:var(--paper)}
.table-yacht .yacht-throw{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.table-yacht .yacht-loose{--die:calc(140 * var(--px));flex:1;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:calc(14 * var(--px)) calc(22 * var(--px));margin:0 auto}
.table-yacht .yacht-loose[data-n="4"]{--die:calc(100 * var(--px))}
.table-yacht .yacht-loose[data-n="5"]{--die:calc(104 * var(--px));max-width:calc(356 * var(--px))}
.table-yacht .yacht-stitch{position:relative;flex:none;margin:calc(28 * var(--px)) 0 calc(22 * var(--px));border-top:calc(3 * var(--px)) dashed rgb(232 227 207 / .45)}
.table-yacht .yacht-keep{position:relative;flex:none}
.table-yacht .yacht-kept{--die:calc(118 * var(--px));display:flex;align-items:center;gap:calc(22 * var(--px));height:calc(128 * var(--px));padding:0 calc(5 * var(--px))}
.table-yacht .yacht-kept[data-n="4"]{--die:calc(98 * var(--px));gap:calc(18 * var(--px))}
.table-yacht .yacht-kept[data-n="5"]{--die:calc(78 * var(--px));gap:calc(18 * var(--px))}
/* A paper die, the same on the felt and in flight: its padding and pips are fractions of
   its side, so a die in flight lands as the face it rests on at any size. */
.table-yacht.yacht-tv .yacht-face{padding:14.3%;border:0;border-radius:17%;background:linear-gradient(160deg,#fbf7ec,#e9e1cf);box-shadow:0 calc(12 * var(--px)) calc(20 * var(--px)) rgb(0 0 0 / .5),inset 0 1px 0 #fff}
.table-yacht.yacht-tv .yacht-face .yacht-pip{width:84%;height:84%;background:#23201c}
.table-yacht.yacht-tv .yacht-face.unrolled{background:rgb(251 247 236 / .16);box-shadow:none}
.table-yacht.yacht-tv .yacht-face.unrolled::after{width:30%;height:4%;background:rgb(232 227 207 / .4)}
.table-yacht .yacht-felt .yacht-die{display:block;width:var(--die);height:auto;min-height:0;max-width:none;margin:0;padding:0;border:0;background:none}
.table-yacht .yacht-felt .yacht-face{width:var(--die);height:var(--die)}
.table-yacht .yacht-felt .yacht-die small{display:none}
.table-yacht .yacht-felt .yacht-kept .yacht-face{background:linear-gradient(160deg,#fbf7ec,#e9e1cf);border:0;box-shadow:0 0 0 calc(5 * var(--px)) #ffd77a,0 calc(12 * var(--px)) calc(20 * var(--px)) rgb(0 0 0 / .5)}
.table-yacht .yacht-felt .yacht-die.in-flight .yacht-face{border:calc(2 * var(--px)) dashed rgb(232 227 207 / .3);background:transparent;box-shadow:none}
.table-yacht.yacht-tv .yacht-roll-face,.table-yacht.yacht-tv .yacht-flying.landed .yacht-roll-face{box-shadow:0 calc(12 * var(--px)) calc(20 * var(--px)) rgb(0 0 0 / .5),inset 0 1px 0 #fff}

/* Under the tray: the tally scrap with a coffee ring, and a sticky note for a rare roll. */
.table-yacht .yacht-margin{position:absolute;right:0;top:calc(630 * var(--px));width:calc(590 * var(--px));height:calc(450 * var(--px));color:var(--graphite);pointer-events:none}
.table-yacht .yacht-tally{position:absolute;left:0;top:calc(10 * var(--px));width:calc(280 * var(--px));padding:calc(16 * var(--px)) calc(22 * var(--px));background:#fbf4e4;box-shadow:0 calc(10 * var(--px)) calc(24 * var(--px)) rgb(0 0 0 / .4);transform:rotate(-2deg)}
.table-yacht .yacht-tally p{margin:0 0 calc(4 * var(--px));font-family:Karla,"Segoe UI",system-ui,sans-serif;font-size:calc(20 * var(--px));letter-spacing:.2em;text-transform:uppercase;color:#7a7067}
.table-yacht .yacht-tally ol{display:grid;gap:calc(4 * var(--px));margin:0;padding:0;list-style:none}
.table-yacht .yacht-tally li{display:grid;grid-template-columns:calc(26 * var(--px)) minmax(0,1fr) auto;gap:calc(8 * var(--px));align-items:center;min-height:calc(34 * var(--px))}
.table-yacht .yacht-tally b{font-family:Karla,"Segoe UI",system-ui,sans-serif;font-size:calc(22 * var(--px));font-weight:700;color:#7a7067}
.table-yacht .yacht-gates{display:block;width:100%;height:auto;max-height:calc(40 * var(--px));overflow:visible}
.table-yacht .yacht-gates path{fill:none;stroke:var(--graphite);stroke-width:2;stroke-linecap:round}
.table-yacht .yacht-count{min-width:1.6em;font-family:var(--pencil);font-size:calc(28 * var(--px));font-weight:700;line-height:1;text-align:right}
.table-yacht .yacht-stain{position:absolute;left:calc(150 * var(--px));top:calc(230 * var(--px));width:calc(120 * var(--px));height:calc(120 * var(--px));border:calc(6 * var(--px)) solid rgb(120 70 30 / .28);border-radius:50%;box-shadow:inset 0 0 0 calc(3 * var(--px)) rgb(120 70 30 / .12);mix-blend-mode:multiply}
.table-yacht .yacht-rare{position:absolute;left:calc(340 * var(--px));top:calc(20 * var(--px));width:calc(180 * var(--px));margin:0;padding:calc(20 * var(--px)) calc(20 * var(--px));background:#fff3a6;box-shadow:0 calc(10 * var(--px)) calc(24 * var(--px)) rgb(0 0 0 / .4);transform:rotate(4deg);font-family:var(--pencil);font-size:calc(27 * var(--px));font-weight:500;line-height:1.15;color:var(--graphite)}

/* The finish: the result large in pencil on the wood with its line of fact and the podium
   at the left, the finished sheet on the pad at the right with the winner ringed and the
   date; the client's band below takes the bottom quarter. */
.table-yacht .is-finished .yacht-result{position:absolute;left:calc(60 * var(--px));top:4%;bottom:4%;width:calc(420 * var(--px));display:flex;flex-direction:column;justify-content:safe center;gap:calc(20 * var(--px));min-width:0;overflow:hidden;color:var(--paper)}
/* At most three lines: the names on two, cut with an ellipsis and broken inside a long
   word if need be, and the verb on its own line under them. */
.table-yacht .yacht-headline{flex:none;max-width:100%;margin:0;font-family:var(--pencil);font-size:calc(140 * var(--px));font-weight:700;line-height:.95;text-shadow:0 calc(6 * var(--px)) 0 rgb(0 0 0 / .35)}
.table-yacht .yacht-headline .yacht-names{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;max-height:2.1em;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;padding-bottom:.08em}
.table-yacht .yacht-headline .yacht-verb{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.table-yacht .yacht-headline.is-long{font-size:calc(100 * var(--px))}
.table-yacht .yacht-headline.is-longer{font-size:calc(72 * var(--px))}
.table-yacht .yacht-headline.is-longest{font-size:calc(56 * var(--px))}
.table-yacht .yacht-fact{flex:none;max-width:100%;margin:0;font-family:var(--pencil);font-size:calc(40 * var(--px));font-weight:500;line-height:1.15;opacity:.9;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.table-yacht .yacht-fact:empty{display:none}
.table-yacht .is-finished .yacht-podium{margin:calc(30 * var(--px)) 0 0;padding:0;background:none;border:0;text-align:left}
.table-yacht .is-finished .yacht-podium ol{justify-content:flex-start;gap:calc(24 * var(--px))}
.table-yacht .is-finished .yacht-place{gap:0;min-width:0;max-width:calc(124 * var(--px))}
.table-yacht .is-finished .yacht-stack{gap:0;padding:0;border:0}
.table-yacht .is-finished .yacht-pdie,.table-yacht .is-finished .yacht-place.first .yacht-pdie{width:calc(72 * var(--px));height:calc(72 * var(--px));margin-top:calc(-8 * var(--px));padding:calc(10 * var(--px));border:0;border-radius:calc(14 * var(--px));background:linear-gradient(160deg,#fbf7ec,#e9e1cf);box-shadow:0 calc(10 * var(--px)) calc(16 * var(--px)) rgb(0 0 0 / .45),inset 0 1px 0 #fff}
.table-yacht .is-finished .yacht-pdie .yacht-pip{width:calc(14 * var(--px));height:calc(14 * var(--px));background:#23201c}
.table-yacht .is-finished .yacht-pname{max-width:100%;margin-top:calc(10 * var(--px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--pencil);font-size:calc(28 * var(--px));font-weight:500;color:var(--paper)}
.table-yacht .is-finished .yacht-pad{left:calc(520 * var(--px));right:calc(60 * var(--px));top:4.8%;bottom:auto;height:89.2%;border-radius:4px;transform:rotate(.6deg)}
.table-yacht .is-finished .yacht-pad::before{height:calc(28 * var(--px));background-size:calc(40 * var(--px)) calc(28 * var(--px))}
.table-yacht .is-finished .yacht-sheet-tv{--sheet:94.6cqw;--label-f:.22;left:2.7cqw;right:2.7cqw;top:5.95cqh}
.table-yacht .is-finished .yacht-pad th,.table-yacht .is-finished .yacht-pad td{height:5.35cqh;border-bottom-color:rgb(43 35 24 / .12)}
.table-yacht .is-finished .yacht-pad tbody th{font-size:3.1cqh}
.table-yacht .is-finished .yacht-pad thead th{height:5.35cqh;font-size:min(5cqh,calc(var(--col) * .3))}
.table-yacht .is-finished .yacht-pad thead th:first-child{font-size:2.97cqh;letter-spacing:.2em}
.table-yacht .is-finished .yacht-pad td{font-size:min(4.7cqh,calc(var(--col) * .34))}
.table-yacht .is-finished .yacht-chase{font-size:min(3.2cqh,calc(var(--col) * .2));color:var(--pencil-grey)}
.table-yacht .is-finished .yacht-pad .yacht-total>*,.table-yacht .is-finished .yacht-pad .yacht-total td.yacht-turn{height:5.6cqh}
.table-yacht .is-finished .yacht-pad .yacht-total td{font-size:min(5.6cqh,calc(var(--col) * .38))}
.table-yacht .is-finished .yacht-pad .yacht-rowhint{margin:0;font-size:1.9cqh}
.table-yacht .is-finished .yacht-square{width:2cqh;height:2cqh}
.table-yacht .is-finished .yacht-pad .yacht-bonus th{font-size:2.8cqh}
.table-yacht .yacht-date{position:absolute;right:3cqw;bottom:1.4cqh;margin:0;font-family:var(--pencil);font-size:3.8cqh;font-weight:500;line-height:1;color:#5a5a62}
@keyframes yacht-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes yacht-stroke{to{stroke-dashoffset:0}}
@keyframes yacht-smudge{0%{opacity:1;filter:none;transform:none}40%{opacity:.75;filter:blur(.15vh);transform:translateX(.06em) rotate(-2deg)}100%{opacity:0;filter:blur(.8vh);transform:translateX(-.1em) scaleX(1.35)}}
@keyframes yacht-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* A display opened on an upright screen (a phone, an iPad held tall): the pad on top,
   the tray and the scraps under it, and the page may scroll. */
@media(max-aspect-ratio:1/1){
  .table-yacht.yacht-tv{--px:calc(100vw / 1180)}
  .table-root.table-yacht.yacht-tv{overflow:visible}
  .table-yacht .yacht-display{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:calc(40 * var(--px));padding:calc(40 * var(--px))}
  .table-yacht .yacht-pad,.table-yacht .is-finished .yacht-pad{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:calc(100vw * .9);transform:none}
  .table-yacht .yacht-felt,.table-yacht .yacht-margin,.table-yacht .is-finished .yacht-result{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .table-yacht .yacht-margin{width:calc(560 * var(--px))}
}

@media(min-width:700px){.table-yacht .yacht-die{height:64px}}
@media(max-width:680px){
  .table-yacht .yacht-tray{grid-template-columns:44px minmax(0,244px);gap:6px}
  .table-yacht .yacht-tray.has-shake{grid-template-columns:44px minmax(0,244px) minmax(40px,1fr)}
  .table-yacht .yacht-dice{gap:4px}
}
@media(max-width:480px){
  .table-yacht .yacht-face{padding:5px}
  .table-yacht .yacht-die{max-width:44px}
  .table-yacht .yacht-roll button{padding-inline:4px}
}
@media(max-height:820px){
  .table-yacht .yacht-die{height:44px;min-height:44px}
  .table-yacht .yacht-die small{display:none}
  .table-yacht .yacht-score{height:36px;min-height:36px}
  .table-yacht .yacht-sheet thead th{height:30px;padding-block:2px}
  .table-yacht .yacht-total>*{height:30px;padding-block:4px}
  .table-yacht .yacht-sheet .yacht-bonus>*{height:28px}
}
/* Reduced motion: every mark at its end state, each override as specific as the rule it
   stops, so turning it on mid-animation stops it too. */
@media(prefers-reduced-motion:reduce){
  .table-yacht .yacht-die.set-down .yacht-face,.table-yacht .yacht-score.scored,.table-yacht .yacht-podium.arriving .yacht-pdie{animation:none}
  .table-yacht.yacht-tv .yacht-pencil.yacht-writing,.table-yacht.yacht-tv .yacht-square.yacht-writing,.table-yacht.yacht-tv .yacht-rare.yacht-writing,.table-yacht.yacht-tv .yacht-date.yacht-writing{animation:none;clip-path:none}
  .table-yacht.yacht-tv .yacht-scratch.yacht-writing path,.table-yacht.yacht-tv .yacht-ringing .yacht-ring path{animation:none;stroke-dashoffset:0}
  .table-yacht.yacht-tv .yacht-smudge{animation:none;opacity:0}
  .table-yacht.yacht-tv .yacht-sweep::before{animation:none;transform:translateX(100%)}
}

/* The page around the display's board: the kitchen table. yacht.js puts yacht-wood on the
   body while a display is drawn, so the wood runs under everything, shaded toward the
   edges; the client's header, which the tray says again, is hidden but for screen
   readers, its status line still a live region; the client's corner QR is burnt into the
   wood, near-black modules straight on a patch of the table's own brown lifted 30% toward
   cream (--qr-patch), about as dark as zbarimg still reads it through a simulated camera
   with a step to spare, its edge feathered into the grain so it reads as worn wood rather
   than a tile, with no paper touching it; and the
   band at the finish is walnut through the page's colour variables, its QR on the same
   patch. The board above names the result in pencil, so the band's winner line is for
   screen readers here. The wood is wood in dark mode too. A phone keeps the page's own
   colours. */
html:has(body.yacht-wood),body.yacht-wood{background:radial-gradient(ellipse at 35% 45%,transparent 50%,rgb(0 0 0 / .45) 100%) fixed,repeating-linear-gradient(92deg,rgb(0 0 0 / .06) 0 2px,transparent 2px 9px,rgb(255 255 255 / .04) 9px 11px,transparent 11px 23px) fixed,linear-gradient(180deg,#7a5536 0%,#6a4830 45%,#5e3f2a 100%) fixed;background-color:#5e3f2a}
html:has(body.yacht-wood .yacht-display.is-finished),body.yacht-wood:has(.yacht-display.is-finished){background:radial-gradient(ellipse at 50% 35%,transparent 45%,rgb(0 0 0 / .45) 100%) fixed,repeating-linear-gradient(92deg,rgb(0 0 0 / .06) 0 2px,transparent 2px 9px,rgb(255 255 255 / .04) 9px 11px,transparent 11px 23px) fixed,linear-gradient(180deg,#7a5536 0%,#6a4830 45%,#5e3f2a 100%) fixed;background-color:#5e3f2a}
body.yacht-wood{--px:min(.09259vh,.05208vw);--qr-patch:color-mix(in srgb,#6a4830,#f3ead6 30%);--qr-ink:#120a05;color:#2b2318;color-scheme:light}
body.yacht-wood main:has(>.table-display){padding:0;overflow:hidden}
body.yacht-wood .table-top{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.yacht-wood .table-corner{right:calc(56 * var(--px));bottom:calc(40 * var(--px));width:calc(172 * var(--px));height:calc(172 * var(--px));padding:calc(14 * var(--px))}
body.yacht-wood .table-corner::before{--feather:calc(24 * var(--px));content:"";position:absolute;inset:calc(-1 * var(--feather));z-index:-1;background:repeating-linear-gradient(92deg,rgb(0 0 0 / .05) 0 2px,transparent 2px 9px,rgb(255 255 255 / .04) 9px 11px,transparent 11px 23px) var(--qr-patch);-webkit-mask:linear-gradient(90deg,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent),linear-gradient(transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent),linear-gradient(transparent,#000 var(--feather),#000 calc(100% - var(--feather)),transparent);mask-composite:intersect}
body.yacht-wood .table-corner img,body.yacht-wood .table-corner svg{width:100%;height:100%}
body.yacht-wood .table-corner img{mix-blend-mode:multiply}
body.yacht-wood .table-corner svg>rect[stroke]{fill:none;stroke:none}
body.yacht-wood .table-corner svg g{fill:var(--qr-ink)}
body.yacht-wood .table-corner svg circle[stroke]{stroke:var(--qr-ink)}
body.yacht-wood .table-band{--qr-patch:inherit;--qr-ink:inherit;--plate:#2a2320;--ink:#f3ead6;--muted:#c9b595;--ground:#3b2f28;--accent:#ffd77a;border-top:0;box-shadow:0 -14px 30px rgb(0 0 0 / .4);font-family:Karla,"Segoe UI",system-ui,sans-serif}
body.yacht-wood .table-band-person{border-radius:10px}
body.yacht-wood .table-band-winner{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-aspect-ratio:1/1){body.yacht-wood main:has(>.table-display){overflow:visible}}