/* The look: quiet sepia, like paper on a table. --bg is the table, --paper the page lying on it, --rule is for decorative hairlines only
   (borders that mark a field or button use --border, which keeps 3:1 contrast). Dark mode is a cocoa brown with the same hue as the light one. */
@font-face { font-family: "Inconsolata"; font-weight: 200 900; font-display: swap; src: url("fonts/inconsolata.woff2") format("woff2"); }   /* OFL, see credits */
html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
:root {
  --bg: #f1eadb;
  --paper: #fbf7ee;
  --fg: #2e2a25;
  --heading: #443526;
  --link: #8f5024;
  --border: #948772;
  --rule: #ddd2bc;
  --card-bg: #ece4d4;
  --accent: #7a8a5a;
  --shadow: rgba(88, 62, 30, .16);
  --bar-h: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #2c231c; --paper: #493c31; --fg: #e8dfd3; --heading: #f6f1ea; --link: #e4ae7a; --border: #a69480; --rule: #6a5a4d;
                                    --card-bg: #493c31; --accent: #a9b985; --shadow: rgba(0, 0, 0, .3); }
}
:root[data-theme="dark"] { --bg: #2c231c; --paper: #493c31; --fg: #e8dfd3; --heading: #f6f1ea; --link: #e4ae7a; --border: #a69480; --rule: #6a5a4d;
                           --card-bg: #493c31; --accent: #a9b985; --shadow: rgba(0, 0, 0, .3); }
@media (max-width: 768px) { :root { --bar-h: 48px; } }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: Inconsolata, ui-monospace, monospace; line-height: 1.55; }
body { font-size: 1.15rem; }
body.page { font-size: 1rem; }       /* the game pages were laid out at this size */
/* a faint paper grain on the table; the game pages cover it with their own flat background */
:root[data-theme="light"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .14 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
}
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button.linkish, .card button.linkish { display: inline; width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; color: var(--link);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }   /* an action that reads as a link */
.board-end-ask { margin: .8rem 0 0; text-align: center; font-size: .95rem; }
.busy-clock { font-size: 1.15rem; }
.busy-clock b { font-variant-numeric: tabular-nums; }
a:hover { text-decoration-thickness: 2px; }

/* Top bar */
header { position: sticky; top: 0; z-index: 8; background: var(--bg); height: var(--bar-h); display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
         border-bottom: 3px double var(--rule); }
#title { margin: 0; font-size: 1.5rem; letter-spacing: .02em; flex: 1; display: flex; align-items: center; }
#home { font-weight: bold; color: var(--heading); text-decoration: none; display: inline-flex; align-items: center; gap: .9rem; }   /* SirMeo: room between cat and name, the name centred in the bar */
.brand-cat { height: calc(var(--bar-h) - 16px); width: auto; }     /* SirMeo's bark cat, sized to the bar (44 px, 32 px on phones) */
#home-name { line-height: 1; }
.notfound { text-align: center; }
.notfound img { height: 200px; width: auto; margin-right: 35px; }   /* the tail widens the picture on the left: this centres the cat's body */
/* header buttons: compact, one height, the language list opens under its button */
header button { height: 2rem; padding: 0 .55rem; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
header button + button, header .plain button { margin: 0; }
#lang { position: relative; }
.face { display: inline-flex; align-items: center; gap: .35rem; }
.face svg { width: 1.1rem; height: auto; display: block; }
#lang-list { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 7; min-width: 100%; padding: .25rem; background: var(--paper);
             border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px -4px var(--shadow); }
#lang-list[hidden] { display: none; }
#lang-list button { width: 100%; justify-content: flex-start; gap: .6rem; border-color: transparent; background: none; white-space: nowrap; }
#lang-list button:hover { border-color: var(--link); }

main { max-width: 36rem; margin: 0 auto; padding: 1rem; }
h2 { margin: 0 0 1rem; padding-bottom: .45rem; border-bottom: 1px solid var(--rule); color: var(--heading); font-size: 1rem; text-transform: uppercase; letter-spacing: .13em; }

button, select, input, textarea { font: inherit; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; transition: opacity .2s; }
button { background: var(--paper); padding: .3rem 1rem; }
input, textarea, select { background: color-mix(in srgb, var(--rule) 30%, var(--paper)); padding: .4rem .65rem; }
button, select { cursor: pointer; }
button:hover, select:hover, input:focus { border-color: var(--link); outline: none; }
input:focus, select:focus, textarea:focus { background: var(--paper); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--link); }
input[type="file"] { padding: .3rem 0; background: none; border: 0; width: 100%; }
input[type="file"]::file-selector-button { font: inherit; color: var(--fg); background: var(--paper); border: 1px solid var(--border); border-radius: 6px;
                                           padding: .3rem 1rem; margin-right: .7rem; cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--link); }
select option { background: var(--paper); color: var(--fg); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }   /* keyboard users must see where they are */
.skip { position: absolute; left: .5rem; top: -4rem; z-index: 10; background: var(--bg); padding: .4rem .8rem; border: 1px solid var(--link); border-radius: 6px; text-decoration: none; }
.skip:focus { top: .5rem; }
main:focus { outline: none; }
button:active { opacity: .8; }
button.primary { background: var(--fg); color: var(--paper); border-color: var(--fg); font-weight: bold; }
button:disabled { opacity: .45; cursor: default; }
button + button { margin-left: .5rem; }
input, textarea { width: 100%; }
.pinbox { position: relative; width: 8rem; max-width: 100%; }
.pinbox input { padding-right: 2.4rem; }
.pinbox .eye { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); display: flex; margin: 0; padding: .25rem; border: 0; background: none; }   /* margin 0: .card button would push it down */
.pinbox .eye:hover { color: var(--link); }
textarea { resize: vertical; }
label { display: block; margin: .7rem 0 .2rem; font-size: .95rem; letter-spacing: .03em; opacity: .85; }
.card button { margin-top: .9rem; }
/* buttons in a card are little tokens that press down; the popover and game buttons stay flat */
.card:not(.popover) button:not(.game), .dialog button { box-shadow: 0 1px 0 var(--rule), 0 2px 3px -1px var(--shadow); transition: transform .06s, box-shadow .06s, border-color .15s; }
.card:not(.popover) button:not(.game):active, .dialog button:active { transform: translateY(1px); box-shadow: none; opacity: 1; }

/* Cards are pages lying on the table: a hairline edge, soft shadow, 8 px corners. In dark mode a faint light edge on top lifts them off the table. */
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 1.2rem 1.5rem 1.4rem; margin: 0 0 1.2rem;
        box-shadow: 0 1px 2px var(--shadow), 0 6px 14px -8px var(--shadow); }
:root[data-theme="dark"] .card { box-shadow: inset 0 1px 0 rgba(255, 236, 214, .07), 0 1px 2px var(--shadow), 0 8px 18px -8px rgba(0, 0, 0, .55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .card { box-shadow: inset 0 1px 0 rgba(255, 236, 214, .07), 0 1px 2px var(--shadow), 0 8px 18px -8px rgba(0, 0, 0, .55); }
}

.secret { font-weight: bold; word-break: break-all; user-select: all; }
.share { display: flex; gap: .5rem; align-items: stretch; }
.card h3 { margin: 1rem 0 .3rem; font-size: .95rem; letter-spacing: .03em; color: var(--heading); }
.card h2 + h3 { margin-top: 0; }
.card .note { margin: .3rem 0 0; font-size: .85rem; font-style: italic; opacity: .7; }
.card button.both { margin-top: 1rem; }
.byhand { margin-top: 1rem; }
.byhand summary { cursor: pointer; opacity: .85; }
.byhand[open] summary { margin-bottom: .2rem; }
.byhand h3 { margin-top: .6rem; }
.share .secret { flex: 1; min-width: 0; padding: .4rem .6rem; border: 1px dashed var(--border); border-radius: 6px; }
.share button { flex: none; margin: 0; }
button.both { margin-left: 0; }
ul.plain { list-style: none; margin: 0; padding: 0; }
.turn { font-weight: bold; }
.me { color: var(--link); font-weight: bold; }
#log { max-height: 14rem; overflow: auto; }
#log li { opacity: .7; }
#log li:first-child { opacity: 1; }
#log .t { opacity: .6; font-size: .85em; margin-right: .5em; font-variant-numeric: tabular-nums; }

#toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); max-width: 90vw; padding: .5rem 1rem;
         background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid #e0a030; border-radius: 6px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, .12); z-index: 6; }
#toast[hidden] { display: none; }
body.page #toast { bottom: 180px; }     /* clear of the hand strip and the turn pill on the game pages */

/* Puzzle: a page of its own, like the LAN version. A slim toolbar, the board filling the rest, a floating panel */
.hint { margin: .4rem 0 0; font-size: .95rem; opacity: .8; }
/* the ready-made pictures: an even grid of square crops, three or more to a row on a phone */
.pz-presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; max-width: 30rem; }   /* the six presets on one row */
.pz-preset { padding: 0; margin: 0; aspect-ratio: 1; overflow: hidden; line-height: 0; border: 2px solid var(--border); background: var(--paper); }
.pz-preset img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pz-preset[aria-pressed="true"] { border-color: var(--link); box-shadow: 0 0 0 2px var(--link); }
/* the preview of an own picture sits beside the piece choice, so Create stays in reach */
.pz-opts { display: flex; align-items: flex-start; gap: 1rem; margin-top: .7rem; }
.pz-opts > div { flex: 1; min-width: 0; }
.pz-preview { flex: none; width: 7rem; height: 7rem; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; }
.pz-preview[hidden] { display: none; }
@media (max-width: 400px) { .pz-preview { width: 5rem; height: 5rem; } }
.chips { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips legend { padding: 0; margin: 0 0 .2rem; width: 100%; font-size: .95rem; letter-spacing: .03em; opacity: .85; }
.chips + .chips, .chips + label.check { margin-top: 1.1rem; }
.chips .note { width: 100%; margin: .1rem 0 0; font-size: .85rem; font-style: italic; opacity: .7; }
.chip { position: relative; display: inline-block; margin: 0; min-width: 3.2rem; padding: .3rem .7rem; text-align: center; opacity: 1; font-size: 1rem;
        background: var(--paper); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip:hover { border-color: var(--link); }
.chip:has(input:checked) { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); font-weight: bold; }
.chip:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
body.page { overflow: hidden; }
body.page main { max-width: none; margin: 0; padding: 0; }
.board-page { position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
      background: var(--bg); touch-action: none; }
/* Full screen: the page chrome (site header, toast spot) is hidden and the puzzle takes the whole window */
body.board-full header { display: none; }
.theme-tool { display: none; }     /* the header has the toggle; the toolbar one is for full screen, where the header is hidden */
body.board-full .theme-tool { display: inline-flex; }
body.board-full .board-page { top: 0; z-index: 5; }
.board-tools { flex: none; display: flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-bottom: 1px solid var(--border);
            overflow-x: auto; white-space: nowrap; }
.board-tools .spacer { flex: 1; }
.board-tools label.check { margin: 0; font-size: .9rem; white-space: nowrap; }
.board-tools button + button { margin-left: 0; }
.board-tools button { line-height: 18px; }
.board-tools button.icon { display: inline-flex; align-items: center; padding: .3rem .5rem; }
.board-tools button.icon svg { display: block; }
.board-tools .group { display: flex; align-items: center; gap: .5rem; }
.board-tools button.icon.danger { color: #a03a2c; }
.board-tools button.icon.danger:hover { border-color: currentColor; }
:root[data-theme="dark"] .board-tools button.icon.danger { color: #e08a7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .board-tools button.icon.danger { color: #e08a7a; } }
.board-tools button.icon[aria-expanded="true"] { border-color: var(--link); }
.board-stage { position: relative; flex: 1; min-height: 0; background: var(--card-bg); }
.board-board { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; }
.board-loading { margin: 1rem; opacity: .7; }

.board-panel { position: absolute; right: 10px; top: 10px; z-index: 4; width: 260px; margin: 0; font-size: .9rem;
            padding: .55rem .75rem; pointer-events: none; }
.board-panel.off { display: none; }
.board-panel[data-corner="top-left"] { left: 10px; right: auto; }
.board-panel[data-corner="bottom-right"] { top: auto; bottom: 10px; }
.board-panel[data-corner="bottom-left"] { left: 10px; right: auto; top: auto; bottom: 10px; }
.board-panel button { pointer-events: auto; background: none; border: 0; padding: 0; color: var(--link); font-size: .85rem; }
.board-panel button:hover { text-decoration: underline; }
.board-me { font-weight: bold; }
.pz-progress { position: relative; height: 10px; margin-top: .3rem; border-radius: 5px; overflow: hidden;
               background: rgba(128, 128, 128, .15); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .5); }
.pz-progress i { position: absolute; top: 0; bottom: 0; }
.pz-progress i.rest { background: rgba(128, 128, 128, .3); }
.pz-legend { display: flex; flex-wrap: wrap; gap: .1rem .7rem; margin-top: .35rem; font-size: .8rem; }
.pz-legend span.me { font-weight: bold; }
.pz-legend b { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; }
.board-panel #log { border-top: 1px solid var(--border); margin-top: .4rem; padding-top: .3rem; max-height: 9rem; font-size: .85rem;
                  pointer-events: auto; touch-action: pan-y; overscroll-behavior: contain; overflow-y: auto; }
.board-banner { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; margin: 0;
             padding: .5rem 1.2rem; font-weight: bold; border-left: 4px solid var(--accent); }
.board-banner[hidden] { display: none; }

/* The popovers behind the toolbar icons */
.popover { position: fixed; z-index: 6; margin: 0; padding: .6rem .8rem; min-width: 13rem; max-width: calc(100vw - 20px); font-size: .9rem; }
.popover[hidden] { display: none; }
.popover .pop-title { font-weight: bold; margin-bottom: .35rem; }
.popover button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; margin: .25rem 0; }
.popover button + button { margin-left: 0; }
.popover button span, .popover label span { opacity: .65; font-size: .8rem; }
.popover fieldset { border: 0; margin: 0 0 .5rem; padding: 0; }
.popover legend { font-weight: bold; padding: 0; margin-bottom: .2rem; }
.popover label { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .2rem 0; cursor: pointer; font-size: .9rem; opacity: 1; }
.popover input { width: auto; }
.popover .corner-pick { display: grid; grid-template-columns: 1fr 1fr; column-gap: .9rem; }
.popover.organize { width: 13.5rem; min-width: 0; }     /* the top note used to set the width (about 16rem); this trims the empty strip beside the dial */
.popover.organize > button, .popover.organize > .wind-pad { width: 90%; }     /* the dial is as wide as the two layout buttons */
.popover .wind-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin: .1rem 0 .3rem; }
.popover .wind-pad button { align-items: center; justify-content: center; margin: 0; padding: 0; aspect-ratio: 1; font-size: 1.15rem; }
.popover .pop-title + button { margin-top: 0; }
.popover button + .pop-title { margin-top: .6rem; }
.popover .pop-note.top { margin: 0 0 .6rem; }
.popover .pop-note { opacity: .65; font-size: .8rem; margin-top: .3rem; max-width: 14rem; }
@media (max-width: 768px) { .board-panel { width: 210px; font-size: .8rem; } }

/* Dominoes: tiles are SVG, light in both colour schemes like real ones */
label.check { display: flex; align-items: center; gap: .5rem; opacity: 1; font-size: 1rem; cursor: pointer; }
label.check input { width: auto; }
.dom-tile { display: block; }
.dom-face { fill: #fbf8ee; stroke: #555; stroke-width: 2; }
.dom-split { stroke: #999; stroke-width: 2; }
.dom-pip { fill: #1f1f1f; }
.dom-scores li { display: flex; justify-content: space-between; gap: 1rem; }
.dom-scores li.turn { color: var(--link); }
.dom-result { position: absolute; left: 10px; top: 84px; z-index: 5; margin: 0; max-width: min(24rem, 62vw); max-height: 70%; overflow: auto; }
.dom-result[hidden] { display: none; }
.dom-banner { top: 84px; }
.dom-turn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 138px; z-index: 3; padding: .3rem 1.1rem; border-radius: 999px;
            font-weight: bold; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 1px 2px var(--shadow); pointer-events: none; white-space: nowrap; }
.dom-activity { position: absolute; left: 50%; transform: translateX(-50%); bottom: 176px; z-index: 3; padding: .2rem .9rem; border-radius: 999px;
                font-size: .85rem; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 1px 2px var(--shadow); opacity: .9; pointer-events: none; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.dom-activity[hidden], .dom-turn[hidden] { display: none; }
.dom-turn.mine { background: var(--link); border-color: var(--link); color: var(--paper); }

.dom-opps { --back-w: clamp(13px, 1.3vw + 7px, 22px); position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 1.4rem; align-items: flex-end;
            max-width: 54vw; overflow: hidden; pointer-events: none; }
.dom-opp { display: flex; flex-direction: column; align-items: center; font-size: clamp(.85rem, .5vw + .65rem, 1.05rem); }
.dom-opp.turn .dom-oppname { color: var(--link); font-weight: bold; }
.dom-oppname { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dom-backs { display: flex; flex-wrap: wrap; gap: 3px 2px; min-height: calc(var(--back-w) * 2); }
/* One face-down tile, standing: its own outline, the centre line every domino has, an inner edge. Side by side, never overlapping, so each reads as a tile. */
.dom-back { display: block; box-sizing: border-box; width: var(--back-w); height: calc(var(--back-w) * 2); border-radius: 3px;
            border: 1px solid color-mix(in srgb, var(--link) 55%, var(--fg));
            background: linear-gradient(to bottom, transparent calc(50% - .5px), color-mix(in srgb, var(--paper) 70%, transparent) calc(50% - .5px),
                                        color-mix(in srgb, var(--paper) 70%, transparent) calc(50% + .5px), transparent calc(50% + .5px)), var(--link);
            box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paper) 35%, transparent); }
/* Dominoes: the end-of-match card, in the middle of the table */
.board-end { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 8; margin: 0; text-align: center; min-width: min(20rem, 86vw);
           box-shadow: 0 4px 16px var(--shadow); }
.board-end[hidden] { display: none; }
.board-end h2 { margin: .2rem 0 .8rem; padding: 0 1.8rem; }
.board-end { max-height: calc(100% - 2rem); overflow: auto; }
.board-end .pz-opts, .board-end fieldset, .board-end label { text-align: left; }
.board-past { margin: .4rem 0 0; text-align: left; }
.board-past li { display: flex; align-items: center; gap: .7rem; padding: .25rem 0; font-size: .9rem; }
.board-thumb { flex: none; width: 3.6rem; height: auto; min-height: 1.5rem; border: 1px solid var(--rule); border-radius: 4px; }
.dom-final li { display: flex; justify-content: space-between; gap: 2rem; padding: .2rem 0; }
.dom-final li.win { font-weight: bold; color: var(--link); }
.board-end-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.dom-ready { display: flex; flex-wrap: wrap; gap: .2rem 1rem; justify-content: center; margin: .6rem 0 0; opacity: .8; }
.dom-ready .yes { font-weight: bold; opacity: 1; }
.dom-again { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center; align-items: center; margin-top: .6rem; }
.dom-result summary { cursor: pointer; font-weight: bold; margin-bottom: .4rem; }
.dom-result button { margin-top: .6rem; }
.dom-shown { margin: .1rem 0; padding: .45rem 0 .45rem .5rem; border-top: 1px solid var(--border); border-left: 3px solid transparent; }
.dom-shown.win { border-left-color: var(--accent); }
.dom-who { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; font-size: .9rem; }
.dom-pips { opacity: .65; }
.dom-row { display: flex; flex-wrap: wrap; gap: 3px; }
.dom-row .dom-tile { height: 1.6rem; width: 3.2rem; }

/* Bark boats: two ponds of plain DOM. Everything is sized by --base (the width of a square), set by fit() in boats.js */
.boats-board { overflow: hidden; }
.boats-wrap { --base: 32px; position: absolute; inset: 0; overflow: auto; touch-action: none; padding: .6rem; }     /* panned and pinched in boats.js, for touch too */
.boats-wrap.pannable { cursor: grab; }
.boats-wrap.panning { cursor: grabbing; user-select: none; }
.boats-ponds { width: max-content; min-width: 100%; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; align-items: flex-start; }
.boats-wrap.wide .boats-ponds { flex-wrap: nowrap; }
.boats-wrap:not(.wide) .boats-ponds { flex-direction: column; align-items: center; }
.boats-wrap:not(.wide) .pond.theirs { order: -1; }
.pond { --cell: var(--base); }
.boats-wrap:not(.wide)[data-phase="play"] .pond.mine, .boats-wrap:not(.wide)[data-phase="done"] .pond.mine { --cell: calc(var(--base) * .6); }
.pond h3 { margin: 0 0 .2rem; font-size: 1rem; color: var(--heading); }
.pond-cols { display: grid; grid-template-columns: repeat(10, var(--cell)); margin-left: calc(var(--cell) * .6); font-size: calc(var(--cell) * .4); opacity: .6; text-align: center; }
.pond-body { display: flex; }
.pond-rows { display: grid; grid-template-rows: repeat(10, var(--cell)); width: calc(var(--cell) * .6); font-size: calc(var(--cell) * .4); opacity: .6; align-items: center; justify-items: start; }
.pond-area { position: relative; width: calc(var(--cell) * 10); height: calc(var(--cell) * 10); border: 2px solid color-mix(in srgb, var(--link) 40%, var(--rule)); border-radius: 6px;
             background: color-mix(in srgb, #7aa0a8 22%, var(--paper)); box-sizing: content-box; }
:root[data-theme="dark"] .pond-area { background: #385a6e; border-color: #6b8797; }     /* water stays water at night: the page's brown would turn it to mud */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pond-area { background: #385a6e; border-color: #6b8797; } }
.pond-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, var(--cell)); grid-template-rows: repeat(10, var(--cell)); }
.pond-grid .cell { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 0; background: none; box-shadow: none; }
.pond-grid button.cell { cursor: pointer; }
.boats-wrap.armed .pond.theirs button.cell:hover, .pond-grid .cell.aim { background: color-mix(in srgb, var(--accent) 45%, transparent); outline: 2px solid var(--accent); outline-offset: -2px; }
.pond-marks .mark.last { border-radius: 50%; outline: 3px solid #e8890c; outline-offset: -3px; }
.pond-boats, .pond-marks { position: absolute; inset: 0; pointer-events: none; }
.boat { position: absolute; left: calc(var(--cell) * var(--x)); top: calc(var(--cell) * var(--y)); width: calc(var(--cell) * var(--n)); height: var(--cell); display: flex; }
.boat.v { transform: rotate(90deg); transform-origin: 0 0; }
.boat img { flex: none; width: var(--cell); height: var(--cell); display: block; user-select: none; -webkit-user-drag: none; }
/* A boat that has been found is drawn from SirMeo's sunk pieces (uponnut_...), in either pond; nothing else is done to it. The marks sit on a layer above. */
.boat.edit { pointer-events: auto; cursor: grab; touch-action: none; }
.boat.edit.lifted { cursor: grabbing; z-index: 2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.pond-marks .mark { position: absolute; left: calc(var(--cell) * var(--x)); top: calc(var(--cell) * var(--y)); width: var(--cell); height: var(--cell); padding: calc(var(--cell) * .06); box-sizing: border-box; }
.boats-controls { max-width: 34rem; margin: 0 auto .6rem; text-align: center; }
.boats-controls p { margin: 0 0 .4rem; }
.boats-buttons { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.boats-status { display: flex; flex-wrap: wrap; gap: .4rem .6rem; justify-content: center; margin: 0 0 .7rem; }
.boats-pill { padding: .25rem 1rem; border-radius: 999px; font-weight: bold; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 1px 2px var(--shadow); }
.boats-pill.note { font-weight: normal; font-size: .9rem; opacity: .9; }
.boats-pill.mine { background: var(--link); border-color: var(--link); color: var(--paper); }
.pond-tray { display: flex; align-items: center; gap: .8rem; margin-top: .5rem; min-height: max(52px, calc(var(--cell) * 1.3)); }
.pond-tray .hint { margin: 0; font-size: .85rem; }
.pinecone { flex: none; width: max(44px, calc(var(--cell) * 1.1)); height: max(44px, calc(var(--cell) * 1.1)); touch-action: none; user-select: none; cursor: grab; transition: transform .12s; }
.pinecone img { display: block; width: 100%; height: 100%; pointer-events: none; }
.pinecone.idle { opacity: .4; cursor: default; }
.pinecone.armed { transform: translateY(-6px) scale(1.15); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35)); }
.pinecone.flying { position: relative; z-index: 6; transition: none; transform: scale(1.2); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); cursor: grabbing; }
.pinecone:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }

/* Dialogs over the page (report) */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); }
.overlay .dialog { width: min(92vw, 26rem); margin: 0; }
.overlay .dialog p { margin: 0 0 .5rem; font-size: .9rem; opacity: .8; }

/* Home: one card per game, with a picture; the chosen one shows its own options below */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .8rem; margin: .3rem 0 .6rem; }
.card button.game { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: 0; padding: .9rem .7rem .8rem; text-align: center;
                    border: 1px solid var(--border); border-radius: 8px; background: var(--paper); box-shadow: 0 1px 2px var(--shadow); transition: transform .12s, box-shadow .12s; }
.card button.game:hover { border-color: var(--link); }
.card button.game[aria-pressed="true"] { border-color: var(--link); transform: translateY(-2px); box-shadow: 0 2px 3px var(--shadow), 0 8px 16px -8px var(--shadow), inset 0 0 0 1px var(--link); }
/* the picture sits on a mat, like a card in a game box */
.game .thumb { display: block; box-sizing: content-box; width: 6rem; height: 6rem; padding: .4rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; }
.game .thumb svg, .game .thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* pale pictures need an outline to stand out on a light page */
.game .thumb img { filter: drop-shadow(0 0 1px rgba(0,0,0,.75)) drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.game .thumb img.art { filter: none; }       /* painted, with its own outline */
.game .seats { padding: 0 .6rem; border: 1px solid var(--rule); border-radius: 1rem; background: var(--bg); font-size: .8rem; font-weight: bold; letter-spacing: .02em; }
.game b { color: var(--heading); font-size: 1.1rem; letter-spacing: .02em; }
.game .blurb { font-size: .95rem; line-height: 1.3; opacity: .85; }
/* a game's options open under the cards when one is picked */
.new-panel { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dotted var(--rule); }
.new-panel[hidden] { display: none; }
/* on a phone the cards stack, so the other games would sit between the chosen one and its options: hide them until it is closed */
@media (max-width: 560px) { .games:has(.game[aria-pressed="true"]) .game[aria-pressed="false"] { display: none; } }
.new-panel h3 { margin: 0; font-size: 1rem; color: var(--heading); text-transform: uppercase; letter-spacing: .1em; }

footer { max-width: 44rem; margin: 1rem auto 0; padding: 1rem 1rem 1.5rem; border-top: 3px double var(--rule); font-size: .9rem; opacity: .85; text-align: center; }
body.page footer { display: none; }

/* Home: one orderly column. The about box folds up for people who have read it (the heading is the button); paste-and-play is one slim line. */
main:has(.home) { max-width: 44rem; }
.intro summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; }
.intro summary::-webkit-details-marker { display: none; }
.intro summary h2 { flex: 1; margin: 0; border: 0; padding: 0; }
.intro summary::after { content: "[-]"; letter-spacing: .05em; opacity: .7; }
.intro:not([open]) summary::after { content: "[+]"; }
.intro[open] summary { border-bottom: 1px solid var(--rule); padding-bottom: .45rem; margin-bottom: 1rem; }
.intro:not([open]) { padding-top: .8rem; padding-bottom: .8rem; }
.intro-body { display: grid; grid-template-columns: 1fr auto; column-gap: 1.4rem; align-items: center; }
.intro-body p { grid-column: 1; margin: 0 0 .7rem; }
.intro-body p:last-of-type { margin-bottom: 0; }
.heart { color: var(--link); }
.intro-art { grid-column: 2; grid-row: 1 / span 2; width: 10rem; height: auto; }
@media (max-width: 560px) { .intro-body { display: block; } .intro-art { display: block; margin: .8rem auto 0; width: 8rem; } }
.join-strip { display: flex; align-items: center; gap: .8rem; padding-top: .8rem; padding-bottom: .8rem; }
.join-strip h2 { margin: 0; padding: 0; border: 0; white-space: nowrap; }
.join-strip input { flex: 1; min-width: 0; width: auto; }
.card.join-strip button { margin: 0; }
@media (max-width: 560px) { .join-strip { flex-wrap: wrap; } .join-strip h2 { flex: 1 0 100%; } }

/* Home: "Your games" */
.intro .note { margin: 0 0 .5rem; font-size: .85rem; font-style: italic; opacity: .7; }
.yours { margin: 0; max-height: 20rem; overflow-y: auto; }
.yours li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--rule); }
.yours li:first-child { border-top: 0; }
.yours a { flex: 1; min-width: 0; display: block; color: inherit; text-decoration: none; }
.yours a b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yours a small { display: block; opacity: .7; }
.yours a:hover b { color: var(--link); }
.yours .pill { flex: none; padding: .1rem .6rem; border-radius: 1rem; background: var(--link); color: var(--paper); font-size: .8rem; font-weight: bold; }
.yours button.quiet { flex: none; margin: 0; padding: .15rem .5rem; background: none; border-color: transparent; box-shadow: none; opacity: .55; }
.yours button.quiet:hover { opacity: 1; border-color: var(--border); }
.intro summary .pill { flex: none; margin-right: .6rem; padding: .1rem .6rem; border-radius: 1rem; background: var(--link); color: var(--paper); font-size: .8rem; font-weight: bold; }
.intro summary .pill[hidden] { display: none; }
.board-end-min { position: absolute; top: .45rem; right: .5rem; margin: 0; padding: .05rem .55rem; line-height: 1.2; font-size: 1.1rem; }
.board-end button.danger { color: #a03a2c; border-color: currentColor; }
:root[data-theme="dark"] .board-end button.danger { color: #e08a7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .board-end button.danger { color: #e08a7a; } }

/* ?debug: a small readout of what a board is waiting on; it never takes a tap */
.debug-readout { position: fixed; left: 4px; bottom: 4px; z-index: 50; padding: 2px 6px; font-size: 11px; line-height: 1.35; white-space: pre;
                 background: rgba(0, 0, 0, .72); color: #fff; border-radius: 4px; pointer-events: none; }