:root {
 --rack: #1f3a14; 
 --rack-bevel: #2f5420;
 --ivory: #f3ecd8;
 --hairline: #3a3526;
 --edge: #0c1a07;
 --disc-green: #34802a;
 --disc-gold: #ffc53d;
 --disc-tomato: #e0533d;
 --disc-sky: #3d9be0;
 --disc-violet: #8a5cd6;
}
.sheet--play { padding-top: clamp(.55rem, 2.2vw, 1.2rem); }
.turnline {
 display: flex; align-items: center; justify-content: center; gap: .5rem;
 min-height: 1.6rem; margin: 0 0 .35rem;
 font-family: var(--display); font-weight: 700; text-transform: uppercase;
 font-size: clamp(.9rem, 3.4vw, 1.1rem); letter-spacing: .1em; color: var(--ink);
}
.turnline__disc {
 position: relative;
 width: 1.1rem; height: 1.1rem; border-radius: 50%; flex: none;
 background: var(--disc, transparent);
 box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}
.turnline.is-thinking .turnline__text::after {
 content: ''; display: inline-block; width: 1.2em; text-align: left;
 animation: dots 1.1s steps(4, end) infinite;
}
@keyframes dots {
 0% { content: ''; }
 25% { content: '.'; }
 50% { content: '..'; }
 75% { content: '...'; }
}
.board {
 --sq: 18px;
 --pad: calc(var(--sq) * .3);
 position: relative;
 width: calc(var(--sq) * 19 + var(--pad) * 2);
 height: calc(var(--sq) * 19 + var(--pad) * 2);
 margin: 0 auto;
 touch-action: manipulation;
 user-select: none; -webkit-user-select: none;
}
.board__face {
 position: absolute; inset: 0;
 border-radius: calc(var(--sq) * .7);
 background: var(--rack);
 box-shadow: inset 0 0 0 calc(var(--pad) * .5) var(--rack-bevel), 0 .5rem .9rem rgba(0, 0, 0, .35);
}
.board__face > * {
 position: absolute;
 left: calc(var(--pad) + var(--x) * var(--sq)); top: calc(var(--pad) + var(--y) * var(--sq));
 width: calc(var(--sq) * var(--w, 1)); height: calc(var(--sq) * var(--h, 1));
}
.sq {
 background: var(--ivory);
 box-shadow: inset 0 0 0 max(1px, calc(var(--sq) * .04)) var(--hairline);
}
.sq--safe::after {
 content: ''; position: absolute; inset: 22%; border-radius: 50%;
 background: radial-gradient(circle, var(--hairline) 0 22%, transparent 24% 46%, var(--hairline) 48% 60%, transparent 62%);
}
.sq--entry-player { box-shadow: inset 0 0 0 max(2px, calc(var(--sq) * .12)) var(--player-disc, var(--disc-green)), inset 0 0 0 max(3px, calc(var(--sq) * .16)) var(--hairline); }
.sq--entry-computer { box-shadow: inset 0 0 0 max(2px, calc(var(--sq) * .12)) var(--computer-disc, var(--disc-gold)), inset 0 0 0 max(3px, calc(var(--sq) * .16)) var(--hairline); }
.sq--path-player { background: color-mix(in srgb, var(--player-disc, var(--disc-green)) 32%, var(--ivory)); }
.sq--path-computer { background: color-mix(in srgb, var(--computer-disc, var(--disc-gold)) 32%, var(--ivory)); }
.sq--idle { background: color-mix(in srgb, var(--ivory), var(--hairline) 10%); }
.nest {
 border-radius: calc(var(--sq) * 1.2);
 transform: scale(.86);
 box-shadow: inset 0 0 0 max(1px, calc(var(--sq) * .06)) var(--hairline), inset 0 calc(var(--sq) * .15) calc(var(--sq) * .5) rgba(0, 0, 0, .28);
}
.nest--player { background: color-mix(in srgb, var(--player-disc, var(--disc-green)) 38%, var(--ivory)); }
.nest--computer { background: color-mix(in srgb, var(--computer-disc, var(--disc-gold)) 38%, var(--ivory)); }
.home {
 background: var(--ivory);
 box-shadow: inset 0 0 0 max(1px, calc(var(--sq) * .06)) var(--hairline);
}
.home::before {
 content: 'Home'; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
 text-align: center; font-family: var(--display); font-weight: 700; text-transform: uppercase;
 letter-spacing: .08em; font-size: calc(var(--sq) * .5); color: color-mix(in srgb, var(--ink), transparent 55%);
}
.corner {
 position: absolute;
 left: calc(var(--pad) + var(--x) * var(--sq) + var(--sq) * .5); top: calc(var(--pad) + var(--y) * var(--sq) + var(--sq) * .5);
 width: calc(var(--sq) * 7); height: calc(var(--sq) * 7);
 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--sq) * .35);
 text-align: center; color: #fff;
}
.corner__name {
 margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
 letter-spacing: .08em; font-size: max(12px, calc(var(--sq) * .72)); line-height: 1;
 display: flex; align-items: center; gap: .35em;
}
.corner__mark {
 width: .7em; height: .7em; border-radius: 50%; flex: none;
 box-shadow: 0 0 0 .14em var(--computer-disc, var(--disc-gold));
}
.corner__count { margin: 0; font-size: max(10px, calc(var(--sq) * .5)); letter-spacing: .04em; opacity: .92; }
.board.is-thinking .corner--them .corner__count::after {
 content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.1s steps(4, end) infinite;
}
:root[data-board="cherry"] .corner--them, :root[data-board="oak"] .corner--them, :root[data-board="birch"] .corner--them,
:root[data-board="cherry"] .corner--tray .corner__count, :root[data-board="oak"] .corner--tray .corner__count, :root[data-board="birch"] .corner--tray .corner__count {
 background: color-mix(in srgb, var(--rack), transparent 12%);
 box-shadow: 0 0 0 2px var(--edge);
 border-radius: calc(var(--sq) * .5);
}
:root[data-board] .corner--them { height: auto; padding: calc(var(--sq) * .5) calc(var(--sq) * .3); top: calc(var(--pad) + var(--y) * var(--sq) + var(--sq) * 2); }
:root[data-board] .corner--tray .corner__count { padding: .2em .6em; }
:root:not([data-board]) .corner--them, :root[data-board="green"] .corner--them { background: none; box-shadow: none; }
.tray { --die: max(26px, calc(var(--sq) * 1.9)); }
.tray__dice { display: flex; gap: calc(var(--sq) * .45); }
.die {
 --die-colour: var(--player-disc, var(--disc-green));
 --pip: #fff;
 position: relative; flex: none; display: block;
 width: var(--die); height: var(--die);
 border-radius: 20%;
 background:
 radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 42%),
 radial-gradient(circle at 50% 55%, var(--die-colour) 60%, color-mix(in srgb, var(--die-colour), #000 28%) 100%);
 box-shadow: 0 0 0 2px var(--edge), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 3px 5px rgba(0, 0, 0, .35);
 transition: opacity .15s ease-out;
}
.tray--computer .die { --die-colour: var(--computer-disc, var(--disc-gold)); }
.tray--player[data-colour="gold"] .die, .tray--computer[data-partner="gold"] .die { --pip: #2e2306; }
.die__face { position: absolute; inset: 0; }
.die__face[data-face="0"] { opacity: .35; }
.pip {
 position: absolute; width: 19%; height: 19%; margin: -9.5% 0 0 -9.5%;
 border-radius: 50%; background: var(--pip);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25);
}
.pip--tl { left: 27%; top: 27%; } .pip--tr { left: 73%; top: 27%; }
.pip--ml { left: 27%; top: 50%; } .pip--c { left: 50%; top: 50%; } .pip--mr { left: 73%; top: 50%; }
.pip--bl { left: 27%; top: 73%; } .pip--br { left: 73%; top: 73%; }
.tray--player .die__face[data-face="1"] .pip--c {
 width: 42%; height: 42%; margin: -21% 0 0 -21%; border-radius: 0; box-shadow: none;
 -webkit-mask: url('../assets/globe.png') center / contain no-repeat;
 mask: url('../assets/globe.png') center / contain no-repeat;
}
.tray--computer .die__face[data-face="1"] .pip--c {
 width: 30%; height: 30%; margin: -15% 0 0 -15%;
 background: transparent; box-shadow: 0 0 0 .22em var(--pip);
}
.die.is-used { opacity: .38; }
.tray .tray__roll, .tray .tray__roll:hover {
 display: flex; align-items: center; justify-content: center;
 min-width: calc(var(--die) * 2.2); min-height: 44px; padding: .3rem .8rem; margin: 0;
 border: 0; border-radius: 10px;
 background: var(--paper); color: var(--ink);
 font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
 box-shadow: 0 0 0 2px var(--edge), 0 3px 0 rgba(0, 0, 0, .35);
 cursor: pointer; opacity: 1;
}
@media (hover: hover) { .tray .tray__roll:not(:disabled):hover { background: #fff; } }
.tray .tray__roll:disabled { background: color-mix(in srgb, var(--paper), var(--rack) 45%); color: var(--ink-soft); cursor: default; box-shadow: 0 0 0 2px var(--edge); }
.tray.is-ready .tray__roll { animation: ready 1.6s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 0 2px var(--edge), 0 0 0 6px rgba(255, 255, 255, .45), 0 3px 0 rgba(0, 0, 0, .35); } }
.tray__rollword { font-size: max(14px, calc(var(--sq) * .8)); line-height: 1; }
.tray__roll:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }
.board__pawns, .board__chips { position: absolute; inset: 0; pointer-events: none; }
.pawn {
 --pawn: var(--player-disc, var(--disc-green));
 position: absolute; left: 0; top: 0;
 width: calc(var(--sq) * .82); height: calc(var(--sq) * .82);
 margin: calc(var(--sq) * -.41) 0 0 calc(var(--sq) * -.41);
 padding: 0; border: 0; border-radius: 50%;
 appearance: none; font: inherit; color: inherit;
 background:
 radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 36%),
 radial-gradient(circle at 50% 55%, var(--pawn) 58%, color-mix(in srgb, var(--pawn), #000 32%) 100%);
 box-shadow: 0 0 0 max(1.5px, calc(var(--sq) * .07)) var(--edge), 0 2px 3px rgba(0, 0, 0, .45);
 transition: opacity .15s ease-out;
 will-change: transform;
 pointer-events: none;
 -webkit-tap-highlight-color: transparent;
}
.pawn--computer { --pawn: var(--computer-disc, var(--disc-gold)); }
.pawn::after { content: ''; position: absolute; }
.pawn--player::after {
 inset: 20%;
 background: color-mix(in srgb, var(--pawn), #000 38%);
 -webkit-mask: url('../assets/globe.png') center / contain no-repeat;
 mask: url('../assets/globe.png') center / contain no-repeat;
}
.pawn--computer::after {
 inset: 30%; border-radius: 50%;
 box-shadow: 0 0 0 max(1px, calc(var(--sq) * .07)) color-mix(in srgb, var(--pawn), #000 34%);
}
.board .pawn:hover {
 background:
 radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 36%),
 radial-gradient(circle at 50% 55%, var(--pawn) 58%, color-mix(in srgb, var(--pawn), #000 32%) 100%);
 color: inherit;
}
.pawn.is-home { opacity: .9; }
.board.is-choosing .pawn--player { opacity: .7; }
.board.is-choosing .pawn--player.is-movable {
 opacity: 1; z-index: 5;
 box-shadow: 0 0 0 max(1.5px, calc(var(--sq) * .07)) var(--edge), 0 0 0 max(3px, calc(var(--sq) * .16)) #fff, 0 3px 5px rgba(0, 0, 0, .5);
}
.board .pawn.is-lifted {
 z-index: 6;
 box-shadow: 0 0 0 max(1.5px, calc(var(--sq) * .07)) var(--edge), 0 0 0 max(4px, calc(var(--sq) * .22)) #fff,
 0 0 0 max(6px, calc(var(--sq) * .3)) var(--ink), 0 4px 6px rgba(0, 0, 0, .5);
}
.pawn:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 3px; }
.chip, .board .chip:hover {
 position: absolute; left: 0; top: 0;
 min-width: max(36px, calc(var(--sq) * 1.9)); height: max(36px, calc(var(--sq) * 1.9));
 margin: calc(max(36px, calc(var(--sq) * 1.9)) / -2) 0 0 calc(max(36px, calc(var(--sq) * 1.9)) / -2);
 padding: 0 .35em; border: 0; border-radius: 999px;
 display: flex; align-items: center; justify-content: center;
 font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
 font-size: max(14px, calc(var(--sq) * .78)); line-height: 1; white-space: nowrap;
 background: var(--paper); color: var(--ink);
 box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--paper), 0 4px 8px rgba(0, 0, 0, .45);
 cursor: pointer; pointer-events: auto; z-index: 8;
 -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .board .chip:hover { background: #fff; } }
.chip:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 3px; }
.stamp {
 position: absolute; left: 50%; top: 50%; z-index: 9; pointer-events: none;
 transform: translate(-50%, -50%) rotate(-8deg);
 padding: .15em .5em; border: 3px solid currentColor; border-radius: 4px;
 font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
 font-size: clamp(1.3rem, 7vw, 2.2rem); line-height: 1; white-space: nowrap;
 color: #fff; background: rgba(179, 36, 31, .88);
 box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .35);
 animation: stamp-out .3s ease-in 1.35s forwards;
}
.stamp--small { font-size: max(15px, calc(var(--sq) * 1.05)); border-width: 2px; }
.stamp--doubles, .stamp--blockade { background: rgba(29, 44, 18, .92); }
.stamp.is-dropping { animation: stamp-in .26s cubic-bezier(.2, 1.4, .4, 1) both, stamp-out .3s ease-in 1.35s forwards; }
@keyframes stamp-in { from { opacity: 0; transform: translate(-50%, -50%) rotate(-16deg) scale(1.8); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }
@keyframes stamp-out { to { opacity: 0; } }
.float {
 position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none;
 margin: calc(var(--sq) * -1.4) 0 0 calc(var(--sq) * -1);
 padding: .1em .35em; border-radius: 999px;
 font-family: var(--display); font-weight: 700; letter-spacing: .04em;
 font-size: max(15px, calc(var(--sq) * .95)); line-height: 1;
 color: var(--ink); background: var(--paper); box-shadow: 0 0 0 2px var(--ink);
 animation: stamp-out .25s ease-in .8s forwards;
}
.float.is-rising { animation: rise 1s ease-out forwards; }
@keyframes rise {
 0% { opacity: 0; translate: 0 6px; scale: .7; }
 20% { opacity: 1; translate: 0 0; scale: 1.1; }
 75% { opacity: 1; translate: 0 calc(var(--sq) * -1); scale: 1; }
 100% { opacity: 0; translate: 0 calc(var(--sq) * -1.4); }
}
.board__bars { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.bar {
 position: absolute; left: 0; top: 0;
 width: calc(var(--sq) * .9); height: max(2px, calc(var(--sq) * .12));
 margin: calc(max(2px, calc(var(--sq) * .12)) / -2) 0 0 calc(var(--sq) * -.45);
 border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 1px var(--paper);
}
.die.is-tumbling { animation: tumble .28s linear infinite; }
@keyframes tumble {
 0% { transform: translate(0, 0) rotate(0deg); }
 25% { transform: translate(-2px, -3px) rotate(-18deg); }
 50% { transform: translate(2px, -1px) rotate(12deg); }
 75% { transform: translate(-1px, -3px) rotate(-8deg); }
 100% { transform: translate(0, 0) rotate(0deg); }
}
.die.is-rolled { animation: settle .22s ease-out; }
@keyframes settle { 0% { transform: translateY(-4px) scale(1.08); } 60% { transform: translateY(1px) scale(.97); } 100% { transform: none; } }
.board.is-choosing .pawn--player.is-movable { pointer-events: auto; touch-action: none; cursor: grab; }
.board.is-choosing .pawn--player.is-movable::before { content: ''; position: absolute; inset: -60%; border-radius: 50%; }
.board .pawn.is-dragged { z-index: 10; cursor: grabbing; box-shadow: 0 0 0 max(1.5px, calc(var(--sq) * .07)) var(--edge), 0 8px 12px rgba(0, 0, 0, .45); }
.pawn.is-counted { animation: counted .36s ease-out; }
@keyframes counted { 50% { filter: brightness(1.5); box-shadow: 0 0 0 max(1.5px, calc(var(--sq) * .07)) var(--edge), 0 0 0 max(4px, calc(var(--sq) * .25)) #fff; } }
.disc--player { --disc: var(--player-disc, var(--disc-green)); }
.disc--computer { --disc: var(--computer-disc, var(--disc-gold)); }
.turnline__disc.disc--player::after {
 content: ''; position: absolute; inset: 18%;
 background: color-mix(in srgb, var(--disc), #000 34%);
 -webkit-mask: url('../assets/globe.png') center / contain no-repeat;
 mask: url('../assets/globe.png') center / contain no-repeat;
}
.turnline__disc.disc--computer::after {
 content: ''; position: absolute; inset: 27%; border-radius: 50%;
 box-shadow: 0 0 0 .15em color-mix(in srgb, var(--disc), #000 32%), 0 1px 0 .15em rgba(255, 255, 255, .25);
}
:root[data-board="cherry"] { --hole-rim: #120000; --edge: #120000; }
:root[data-board="oak"] { --hole-rim: #150c07; --edge: #150c07; }
:root[data-board="birch"] { --hole-rim: #2e1c0c; --edge: #2e1c0c; }
:root[data-board="cherry"] .board__face { background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,0) 45%, rgba(0,0,0,.22)), url('../assets/boards/cherry.jpg') center / cover, var(--rack); }
:root[data-board="oak"] .board__face { background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,0) 45%, rgba(0,0,0,.22)), url('../assets/boards/oak.jpg') center / cover, var(--rack); }
:root[data-board="birch"] .board__face { background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,0) 45%, rgba(0,0,0,.22)), url('../assets/boards/birch.jpg') center / cover, var(--rack); }
:root[data-board="cherry"] .board__face, :root[data-board="oak"] .board__face, :root[data-board="birch"] .board__face {
 box-shadow: inset 0 0 0 calc(var(--pad) * .5) var(--hole-rim), 0 .5rem .9rem rgba(0, 0, 0, .35);
}
.board.is-locked .pawn { cursor: default; }
@media (min-width: 760px) {
 #paper .masthead { margin-bottom: .45rem; }
 #paper .masthead__logo { width: min(17rem, 40%); }
 #paper .masthead__links { margin-top: .25rem; }
}
.statusbar { margin-top: .55rem; align-items: center; }
.statusbar__tools { display: flex; gap: .9rem; }
.statusbar__confirm {
 display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .3rem .8rem;
 font-size: .68rem; color: var(--ink);
}
.statusbar { flex-wrap: wrap; }
.statusbar__saved { flex: 1 0 100%; margin-top: .2rem; font-size: .68rem; color: var(--ink-soft); font-style: italic; }
.statusbar__saved[hidden] { display: none; }
.linky:disabled { background: none; color: var(--pencil); opacity: 1; text-decoration: none; cursor: default; }
.edition__state:empty { display: none; }
.edition__state--waiting { color: var(--stop, #b3241f); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
 * { scroll-behavior: auto !important; }
 .pawn { transition: none; }
 .die.is-tumbling, .die.is-rolled, .pawn.is-counted { animation: none; }
 .stamp, .stamp.is-dropping { animation: stamp-out .01s linear 1.5s forwards; }
 .float, .float.is-rising { animation: stamp-out .01s linear .9s forwards; }
 .tray.is-ready .tray__roll { animation: none; }
 .turnline.is-thinking .turnline__text::after { animation: none; content: '...'; }
}
.prefs {
 display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem;
 margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--rule);
}
.picker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.prefs__label {
 font-family: var(--display); font-weight: 700; text-transform: uppercase;
 letter-spacing: .14em; font-size: .72rem; color: var(--ink-soft);
}
.picker__swatches { display: flex; gap: .45rem; }
.swatch {
 appearance: none; margin: 0; padding: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%;
 background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.swatch:hover { background: transparent; }
.swatch::before {
 content: ''; display: block; width: 100%; height: 100%; border-radius: 50%;
 background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(255,255,255,0) 40%), var(--disc);
 box-shadow: inset 0 -2px 3px rgba(0,0,0,.25);
 transition: transform .12s ease-out;
}
.swatch[aria-checked="true"]::before { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink), inset 0 -2px 3px rgba(0,0,0,.25); }
.swatch:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 1px; }
@media (hover: hover) { .swatch:hover::before { transform: scale(1.08); } }
.swatch--board { border-radius: 10px; }
.swatch--board::before { border-radius: 6px; background: var(--wood, var(--rack)) center / cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.swatch--board[aria-checked="true"]::before { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink), inset 0 0 0 1px rgba(0,0,0,.25); }
.picker__vs { font-size: .82rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: .35rem; }
.picker__vs i { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; background: var(--disc); }
.soundtoggle, .soundtoggle:hover {
 display: inline-flex; align-items: center; gap: .45rem;
 padding: .7rem .9rem; min-height: 44px;
 background: transparent; color: var(--ink-soft);
 border: 2px solid var(--rule); border-radius: 2px;
 font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
}
.soundtoggle:hover { color: var(--ink); border-color: var(--ink); }
.soundtoggle__icon {
 width: 1rem; height: 1rem; background: currentColor;
 -webkit-mask: var(--speaker) center / contain no-repeat; mask: var(--speaker) center / contain no-repeat;
}
:root {
 --speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
 --speaker-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.soundtoggle[aria-pressed="false"] .soundtoggle__icon { -webkit-mask-image: var(--speaker-off); mask-image: var(--speaker-off); }
.sheet--play { position: relative; }
.quip {
 position: absolute; z-index: 3; right: clamp(.6rem, 3vw, 2rem); top: clamp(-.6rem, -1vw, 0rem);
 max-width: min(15rem, 62%); margin: 0; padding: .45rem .7rem;
 font-family: var(--grid-face); font-style: italic; font-size: .92rem; line-height: 1.25; color: var(--ink);
 background: #fff; border: 2px solid var(--ink); border-radius: 12px 12px 2px 12px;
 box-shadow: 0 .35rem .8rem rgba(0,0,0,.2);
 animation: quip-in .22s ease-out;
 pointer-events: none;
}
@keyframes quip-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 30; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
 .quip { animation: none; }
}
.howto__pic { margin: .2rem 0 .3rem; display: grid; justify-items: center; gap: .15rem; }
.howto__pic figcaption { font-size: .8rem; line-height: 1.35; color: var(--ink-soft); text-align: center; }
.howto__arrow { font-size: .8rem; line-height: 1; color: var(--ink-soft); }
.strip {
 --sq: 26px;
 display: flex; padding: 4px; border-radius: 8px;
 background: var(--rack); box-shadow: inset 0 0 0 2px var(--rack-bevel);
}
.strip__cell { position: relative; flex: none; width: var(--sq); height: var(--sq); }
.strip .nest, .strip__home { width: calc(var(--sq) * 1.4); margin: 0 2px; border-radius: 6px; transform: none; }
.strip__home::before { font-size: 8px; top: 18%; }
.strip .pawn { left: 50%; top: 50%; transform: none; transition: none; }
.strip .pawn.is-shared { transform: scale(.62); }
.strip .strip__pawn--0 { left: 26%; }
.strip .strip__pawn--1 { left: 74%; }
.strip .bar { left: 50%; top: 50%; }
.strip__cell--no::before {
 content: ''; position: absolute; inset: 18%; z-index: 2;
 background: linear-gradient(45deg, transparent 44%, var(--stop) 44% 56%, transparent 56%),
 linear-gradient(-45deg, transparent 44%, var(--stop) 44% 56%, transparent 56%);
}
.prefs__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }