:root{--ink:#253b2e;--muted:#59624f;--paper:#fff6df;--green:#28563d;--red:#a94128;--line:#8b805f;--wood:#d5b98a;--shadow:0 10px 28px #3c2d2226;color-scheme:light;font-family:system-ui,sans-serif;color:var(--ink);background:#e7d8b9}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{min-height:44px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:6px;padding:8px 14px;font-weight:650;cursor:pointer;touch-action:manipulation;transition:background .15s,transform .15s}button:hover:not(:disabled){background:#ead9b4}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:default;color:#69644e;background:#e0d6bc}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ab3c25;outline-offset:3px}button.primary{background:var(--green);color:#fff8e6;border-color:var(--green)}button.primary:hover:not(:disabled){background:#183f2b}button.confirm{background:#28673a;color:white;border:2px solid #194d28;font-size:1.05rem}button.quiet{background:transparent;border-color:transparent;font-weight:600}a{color:var(--green)}input,select{min-height:44px;border:1px solid var(--line);border-radius:5px;padding:8px 10px;background:#fffaf0;color:var(--ink);max-width:100%}input[type=range]{padding:0;accent-color:var(--green);width:100%;min-width:0}input[type=checkbox]{min-height:24px;width:24px;accent-color:var(--green)}label{font-size:.88rem;font-weight:650;display:block;margin:12px 0 5px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Georgia,serif}h1{font-size:2.2rem;line-height:1.04}h2{font-size:1.65rem;margin-bottom:14px}h3{font-size:1.2rem;margin-bottom:8px}p{line-height:1.5}small,.muted{color:var(--muted)}#app{min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 40% 20%,#f3e6c9 0,#e4d1ac 70%,#d5be98 100%)}header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 28px;z-index:2;flex-wrap:wrap}header nav{display:flex;align-items:center;gap:4px}.brand{font:700 1.8rem Georgia,serif;color:#9b3c24;text-decoration:none;white-space:nowrap}.brand>span:first-child{color:var(--green)}.brand-rule{display:block;font:500 .72rem system-ui,sans-serif;color:#675e45;text-align:center;letter-spacing:.06em;margin-top:1px}.flag{padding:7px;min-width:45px;border:2px solid transparent;background:transparent}.flag svg{width:29px;display:block;box-shadow:0 1px 3px #33271530;border-radius:2px}.flag[aria-pressed=true]{border-color:var(--green);background:#fff6df}#room-tools{display:flex;gap:8px;align-items:center;font-size:.85rem}#players{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:0 20px;min-height:0}.rider{display:flex;align-items:center;gap:8px;padding:5px 10px;background:#fff5df;border-radius:6px;box-shadow:0 2px 0 #9c865633;font-size:.86rem}.rider.mine{outline:2px solid var(--green)}.rider-name{font-weight:750}.rider small{font-size:.72rem;display:block}.silk{width:29px;height:29px;border:2px solid #ffffff;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:800;flex-shrink:0;box-shadow:0 0 0 1px #655138}.silk.light{color:#263421}.chosen-mark{font-size:1.1rem;font-weight:800}#stage{position:relative;flex:1;min-height:430px;isolation:isolate}#stage[data-mode=menu],#stage[data-mode=lobby]{min-height:650px}#board{position:absolute;inset:0;z-index:-1;touch-action:none}#stage[data-mode=menu] #board,#stage[data-mode=lobby] #board{left:300px}#board canvas{display:block;width:100%;height:100%;outline-offset:-4px}#table-panel{position:relative;z-index:1;width:330px;margin:28px 0 55px 35px}.menu-paper{background:var(--paper);padding:26px 25px;box-shadow:var(--shadow);border-radius:9px 9px 18px 5px;border-bottom:6px solid #b99d6d}.menu-paper p{font-size:.9rem}.menu-paper input{width:100%}.menu-tabs{display:flex;border-bottom:1px solid #c8b78e;padding-bottom:10px;gap:6px;margin-bottom:14px}.menu-tabs button{flex:1}.menu-tabs button[aria-pressed=true]{background:var(--green);color:#fff}.stack{display:grid;gap:10px}.row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.row>*{min-width:0}.row.spread{justify-content:space-between}.room-code{font:700 1.25rem system-ui;letter-spacing:.09em}.lobby-riders{list-style:none;margin:8px 0;padding:0}.lobby-riders li{display:flex;gap:7px;align-items:center;padding:7px 0;border-bottom:1px solid #d3c49d}.lobby-riders li .details{flex:1}.lobby-riders button{padding:5px 8px;min-width:44px}.lobby-riders small{display:block;font-size:.73rem}.check-label{display:flex;align-items:center;gap:9px;font-weight:500}.status-strip{text-align:center;position:relative;max-width:700px;margin:12px auto 0;background:var(--paper);border-radius:6px;padding:9px 20px;box-shadow:0 3px 10px #56482b18;font-size:.94rem}#stage[data-mode=play] #table-panel{width:100%;margin:0;pointer-events:none}#stage[data-mode=play] #table-panel>*{pointer-events:auto}.setup-controls{position:absolute;top:64px;left:20px;width:240px;padding:16px;background:var(--paper);border-radius:7px;box-shadow:var(--shadow)}.setup-controls select{width:100%}.setup-controls p{font-size:.85rem;margin-bottom:8px}.finish-paper{position:absolute;right:28px;top:70px;width:300px;max-width:calc(100vw - 40px);background:var(--paper);padding:22px;box-shadow:var(--shadow);border-radius:8px;border-bottom:5px solid #bc8d42}.finish-paper h2{margin-bottom:7px}.finish-paper ol{padding-left:20px;margin:10px 0}.finish-paper li{margin:7px 0}.rosette{display:block;width:56px;height:56px;line-height:52px;background:#ad5925;border:5px double #f6d27a;border-radius:50%;color:#fff6db;font:700 2rem Georgia;text-align:center;margin-bottom:12px}.finish-paper .muted{font-size:.8rem}#cue{position:absolute;bottom:74px;left:50%;transform:translateX(-50%);background:#fff9e9;color:#244733;border:2px solid #54714a;padding:12px 20px;border-radius:16px 16px 16px 2px;box-shadow:var(--shadow);font-family:Georgia,serif;cursor:pointer;max-width:90%;z-index:3}#camera{display:flex;gap:5px;position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:1;white-space:nowrap}#camera button{padding:6px 12px;box-shadow:0 2px 5px #624d2425;min-width:44px}#connection{position:absolute;right:20px;bottom:16px;font-size:.8rem;background:var(--paper);border-radius:4px;padding:5px 10px}#connection:empty{display:none}#hand{padding:5px 18px 12px;position:relative;z-index:1;min-height:0}.hand-top{display:flex;gap:14px;align-items:center;justify-content:center;min-height:46px;margin-bottom:6px}.hand-top h2{font:700 1rem system-ui;margin:0}.cards{display:flex;justify-content:center;align-items:flex-end;gap:9px;margin:auto;max-width:660px}.race-card{position:relative;flex:1;max-width:94px;min-width:0;height:132px;border:2px solid #796642;border-radius:8px;background:#fff6dd;padding:5px;box-shadow:0 4px 0 #baa275,0 6px 11px #4b3b2822;transform:rotate(var(--tilt,0deg));color:#28382d}.race-card .face{height:100%;border:2px solid var(--silk);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:#fffaef}.race-card .number{font:700 2.9rem Georgia;line-height:1.1}.race-card .mark{color:var(--silk);font:800 1.35rem Georgia;line-height:1}.race-card .corners{position:absolute;top:3px;left:5px;font-size:.75rem}.race-card .steps{font-size:.68rem;line-height:1.1;color:#566044;margin-top:5px}.race-card.selected{outline:4px solid var(--green);outline-offset:3px;transform:translateY(-8px);background:#e2efd6}.race-card:disabled{opacity:.52}.race-card.locked{opacity:1;outline:3px solid var(--green);transform:none}.hand-hint{text-align:center;font-size:.84rem;min-height:22px;margin:10px auto 0;color:#455241}.movement-list{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:10px}.reveal-card{background:var(--paper);padding:9px 14px;min-width:90px;text-align:center;border:1px solid #948363;border-radius:5px}.reveal-card.active{outline:3px solid #32643e}.reveal-card strong{display:block;font:700 1.7rem Georgia}.reveal-card small{display:block}footer{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;padding:0 26px 6px;color:#625941}footer button{font-size:.75rem;min-height:36px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:90%;padding:13px 20px;background:#263e2d;color:#fff5dd;border-radius:6px;z-index:20;box-shadow:var(--shadow)}dialog{border:1px solid #84734d;border-radius:12px;background:var(--paper);color:var(--ink);width:min(620px,calc(100vw - 24px));max-height:88dvh;padding:22px;box-shadow:0 30px 120px #182c2266}dialog::backdrop{background:#1b281c75}.dialog-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.dialog-head h2{margin-top:4px}.dialog-head button{font-size:1.5rem;min-width:44px;padding:1px 10px}#dialog-body p,#dialog-body li{font-size:.92rem;line-height:1.55}#dialog-body ul{padding-left:22px}.setting-row{display:grid;grid-template-columns:1fr auto;gap:8px 15px;align-items:center;margin:20px 0}.setting-row input[type=range]{grid-column:1/-1}.setting-row label{margin:0}.rule-demo{display:flex;gap:4px;align-items:center;margin:16px 0}.rule-demo span{padding:12px;min-width:40px;text-align:center;background:#e3c38e;border-bottom:4px solid #a47a42;font-weight:750}.rule-demo .water{background:#abd9d5;color:#1a4e53}.rule-demo .destination{outline:3px solid #336342}.history-entry{padding:9px 0;border-bottom:1px solid #cfbf98;font-size:.9rem}.inline-error{color:#943724;font-size:.85rem;min-height:20px;margin:8px 0}#fallback{padding:90px 35px;text-align:center}.fallback-track{display:flex;gap:4px;flex-wrap:wrap}.fallback-track button{min-width:44px}.danger{color:#95381e}#stage[data-mode=menu]+#hand,#stage[data-mode=lobby]+#hand{display:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.rider{border:1px solid transparent;text-align:left;min-height:44px}.rider:hover:not(:disabled){background:#fff8e8;border-color:#82734f}footer button{min-height:44px}
.space-stepper{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.space-stepper output{min-width:25px;text-align:center;font-weight:800}.space-stepper #place{flex:1;white-space:nowrap}.setup-controls{position:relative;top:auto;left:auto;width:fit-content;max-width:calc(100% - 24px);margin:7px auto 0;padding:8px 14px}.setup-controls h3{display:none}.setup-controls p{margin:0 0 6px;text-align:center;font-size:.8rem}#camera button[aria-pressed=true]{background:var(--green);color:var(--paper);border-color:var(--green)}
@media(min-width:1500px){#stage{min-height:550px}#stage[data-mode=menu],#stage[data-mode=lobby]{min-height:730px}.race-card{height:145px;max-width:102px}.cards{max-width:720px}}
@media(max-width:900px){header{padding:10px 16px;gap:8px}.brand{font-size:1.5rem}.brand-rule{font-size:.64rem}header nav{gap:0}header nav button{font-size:.8rem;padding:7px 8px}#room-tools{order:3;width:100%;justify-content:center}#room-tools:empty{display:none}#table-panel{width:290px;margin-left:18px}.menu-paper{padding:20px}#stage[data-mode=menu] #board,#stage[data-mode=lobby] #board{left:250px}#players{gap:7px}.rider{padding:4px 7px}.setup-controls{width:200px;left:12px}.finish-paper{width:260px;right:15px}}
@media(max-width:620px){header{padding:8px 10px;gap:4px}.brand{font-size:1.35rem}.brand-rule{font-size:.59rem;letter-spacing:0}header nav button{font-size:.73rem;padding:6px}.flag{min-width:40px}.flag svg{width:24px}header #settings{max-width:70px;line-height:1.15}#stage[data-mode=menu],#stage[data-mode=lobby]{display:flex;flex-direction:column;min-height:0}#stage[data-mode=menu] #board,#stage[data-mode=lobby] #board{position:relative;left:0;height:290px;order:2;width:100%;z-index:0;margin-top:-12px}#table-panel{width:calc(100% - 28px);max-width:420px;margin:8px auto 0;order:1}.menu-paper{padding:18px 22px}.menu-paper h1{font-size:1.7rem;margin-bottom:10px}.menu-paper p{margin-bottom:10px}#stage[data-mode=menu] #camera,#stage[data-mode=lobby] #camera{bottom:5px;z-index:2}#players{padding:3px 8px;gap:5px}.rider{font-size:.73rem;gap:4px}.rider small{font-size:.63rem}.silk{width:23px;height:23px;font-size:.72rem}#stage{min-height:340px}.status-strip{font-size:.8rem;padding:8px 10px;margin:9px 8px 0}.setup-controls{top:55px;left:8px;width:160px;padding:10px}.setup-controls h3{font-size:1rem}.setup-controls p{font-size:.74rem}.setup-controls label{font-size:.74rem}.setup-controls select{font-size:.8rem}.setup-controls button{padding:7px;font-size:.8rem}.finish-paper{top:56px;width:220px;right:8px;padding:14px}.finish-paper h2{font-size:1.25rem}.finish-paper li{font-size:.83rem}.rosette{width:39px;height:39px;font-size:1.3rem;border-width:3px;margin-bottom:6px}#hand{padding:5px 10px 10px}.hand-top{gap:8px;flex-wrap:wrap;margin-bottom:8px}.hand-top h2{font-size:.86rem}.hand-top button{font-size:.85rem;padding:7px 11px}.cards{gap:5px}.race-card{height:101px;padding:3px;border-radius:5px}.race-card .face{border-width:1px}.race-card .number{font-size:2.1rem}.race-card .mark{font-size:1.05rem}.race-card .corners{font-size:.64rem;left:3px}.race-card .steps{font-size:.57rem}.hand-hint{font-size:.75rem;margin-top:10px}#camera{gap:3px}#camera button{min-width:42px;min-height:42px;padding:5px 10px;font-size:.8rem}#connection{bottom:59px;right:8px;font-size:.68rem}#cue{bottom:65px;font-size:.86rem;padding:10px 14px}footer{padding:0 12px 5px;gap:12px;font-size:.6rem}footer #credit{max-width:220px}.reveal-card{padding:5px 8px;min-width:55px;font-size:.7rem}.reveal-card strong{font-size:1.35rem}.movement-list{gap:5px}}
@media(max-height:700px) and (min-width:700px){header{padding:5px 20px}.brand{font-size:1.45rem}.brand-rule{display:none}#stage{min-height:285px}#stage[data-mode=menu],#stage[data-mode=lobby]{min-height:570px}.race-card{height:98px;max-width:80px}.race-card .number{font-size:2rem}.race-card .mark{font-size:1.1rem}.hand-top{min-height:35px}.hand-hint{margin-top:5px}}
@media(max-width:900px){#players{flex-wrap:nowrap;gap:5px}.rider{flex:1;min-width:0;max-width:165px;justify-content:center}.rider>span:nth-child(2){min-width:0}.rider-name,.rider small{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chosen-mark:empty{display:none}}
@media(max-width:620px){#players{gap:4px;padding:3px 7px}.rider{flex-direction:column;gap:1px;padding:4px 3px;min-height:62px;border-radius:4px}.rider>span:nth-child(2){max-width:100%}.rider-name{font-size:.64rem}.rider small{font-size:.57rem}.rider .silk{height:21px;width:21px}.rider .chosen-mark{position:absolute;right:3px;top:3px;font-size:.8rem}.rider{position:relative}#stage{min-height:300px}footer button{font-size:.68rem}}
@media(max-height:700px) and (max-width:620px){header{padding:4px 7px;gap:2px}.brand-rule{display:none}.brand{font-size:1.2rem}header nav button{font-size:.68rem;min-height:42px}#room-tools{font-size:.7rem;gap:5px}#room-tools button{min-height:39px;font-size:.73rem;padding:5px 9px}.rider{min-height:53px;padding:2px}.rider .silk{width:18px;height:18px}.rider-name{font-size:.6rem}#stage{min-height:175px}#hand{padding:3px 7px 5px}.race-card{height:82px}.race-card .number{font-size:1.7rem}.race-card .mark svg{height:19px}.hand-top{min-height:40px;margin-bottom:6px;gap:6px}.hand-top button{min-height:40px;font-size:.77rem}.hand-top h2{font-size:.75rem}.hand-hint{font-size:.65rem;line-height:1.25;margin-top:8px;min-height:16px}footer{padding:0 8px;font-size:.53rem}footer button{min-height:32px;font-size:.6rem}#camera{bottom:5px}#camera button{min-height:38px;min-width:38px;padding:5px 8px}.status-strip{font-size:.7rem;padding:5px 8px;margin-top:4px}.setup-controls{top:36px;width:145px;padding:8px}.setup-controls p{font-size:.65rem}.setup-controls label{margin-top:5px}.setup-controls select,.setup-controls button{min-height:38px;font-size:.7rem}.finish-paper{top:35px;padding:10px;width:190px}.finish-paper p{font-size:.7rem!important}.finish-paper h2{font-size:1.1rem}.finish-paper button{min-height:38px;font-size:.7rem;padding:6px}.finish-paper li{font-size:.7rem;margin:4px 0}}
@media(max-height:500px) and (min-width:621px){#app{display:grid;grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:auto auto minmax(190px,1fr) auto;min-height:100dvh}header{grid-column:1/-1;flex-wrap:nowrap;padding:3px 10px;gap:6px}.brand{font-size:1.15rem}.brand-rule{display:none}header nav button{font-size:.67rem;padding:5px 6px;min-height:38px}.flag{min-width:34px}.flag svg{width:23px}#room-tools{width:auto;order:0;font-size:.65rem;gap:5px}#room-tools button{font-size:.65rem;min-height:36px;padding:5px 8px}#players{grid-column:1/-1;padding:2px 10px;gap:5px}.rider{min-height:35px;padding:2px 5px;font-size:.65rem}.rider small{font-size:.56rem}.rider .silk{width:22px;height:22px}#stage{grid-column:1;grid-row:3;min-height:190px}#hand{grid-column:2;grid-row:3;padding:5px 10px;align-self:center}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.race-card{height:65px;max-width:none;padding:3px}.race-card .face{border-width:1px}.race-card .number{font-size:1.4rem}.race-card .mark svg{width:15px;height:15px}.race-card .corners{font-size:.57rem}.race-card .steps{display:none}.hand-top{min-height:35px;gap:5px;flex-wrap:wrap;margin-bottom:6px}.hand-top h2{font-size:.7rem}.hand-top button{min-height:34px;font-size:.7rem;padding:5px 8px}.hand-hint{font-size:.62rem;line-height:1.2;margin-top:8px}footer{grid-column:1/-1;padding:0 10px;font-size:.55rem}footer button{min-height:28px;font-size:.6rem}.status-strip{font-size:.73rem;padding:5px 10px;margin:3px 8px 0}#camera{bottom:3px}#camera button{min-height:34px;font-size:.7rem;padding:4px 9px}.setup-controls{top:36px;left:8px;width:170px;padding:9px}.setup-controls p{font-size:.65rem}.setup-controls select,.setup-controls button{min-height:34px;font-size:.7rem}.setup-controls label{font-size:.7rem;margin-top:5px}.finish-paper{top:35px;right:8px;width:220px;padding:12px}.finish-paper h2{font-size:1.1rem}.finish-paper p{font-size:.7rem!important}.finish-paper li{font-size:.7rem;margin:4px 0}.finish-paper button{min-height:34px;font-size:.7rem;padding:5px}.rosette{width:30px;height:30px;font-size:1rem;margin-bottom:4px}#stage[data-mode=menu],#stage[data-mode=lobby]{grid-column:1/-1;min-height:500px}#stage[data-mode=menu]+#hand,#stage[data-mode=lobby]+#hand{display:none}}
@media(max-width:900px),(max-height:700px){button,header nav button,#room-tools button,.hand-top button,footer button,.setup-controls button,.finish-paper button{min-height:44px}#camera button,.flag{min-width:44px;min-height:44px}.setup-controls select{min-height:44px}}
@media(max-height:700px) and (max-width:620px){#cue{top:31px;bottom:auto;left:8px;right:8px;transform:none;max-width:none;padding:6px 10px;font-size:.7rem;min-height:44px;border-radius:6px}}
.setup-controls{position:relative;top:auto;left:auto;width:fit-content;max-width:calc(100% - 16px);margin:6px auto 0;padding:7px 12px}.setup-controls h3{display:none}.setup-controls p{font-size:.75rem;line-height:1.25;margin:0 0 6px}.space-stepper{flex-wrap:nowrap}.space-stepper button{min-width:44px}.space-stepper #place{font-size:.8rem}#floating-place{position:fixed;z-index:5;width:46px;height:46px;padding:0;border-radius:50%;box-shadow:0 4px 10px #24382444;font-size:1.4rem}
@media(max-width:620px){#rotate-left,#rotate-right{display:none}#camera{max-width:calc(100% - 12px)}#camera button{padding:5px 9px}.setup-controls{padding:6px 9px}.setup-controls p{max-width:280px;font-size:.7rem}.space-stepper{gap:5px}.space-stepper #place{font-size:.75rem;padding:5px 8px}}
.race-card{background:#fff5d8;border-color:#6c5735;padding:5px;box-shadow:0 4px 0 #a88b56,0 7px 14px #4634222b}.race-card .printed-card,.printed-card{position:relative;width:100%;height:100%;display:block;background:linear-gradient(115deg,#ffffff12,transparent 45%,#0000000c),var(--silk);border:1px solid #fff8d899;border-radius:4px;color:var(--card-ink);box-shadow:inset 0 0 0 3px var(--silk),inset 0 0 0 4px #fff8d85c}.card-corner{position:absolute;z-index:1;font:800 1.1rem Georgia,serif;display:flex;flex-direction:column;align-items:center;gap:0;line-height:1}.card-corner.top{top:5px;left:5px}.card-corner.bottom{bottom:5px;right:5px;transform:rotate(180deg)}.card-corner svg{display:block;margin-top:2px}.card-pips{position:absolute;inset:12px 8px}.pip{position:absolute;transform:translate(-50%,-50%) rotate(var(--pip-turn));filter:drop-shadow(0 1px 0 #00000012)}.pip svg{display:block;width:25px;height:25px}.race-card:hover:not(:disabled):not(.selected) .pip{animation:pip-prance .5s ease-out both;animation-delay:var(--pip-delay)}.race-card.selected .printed-card{box-shadow:inset 0 0 0 3px var(--silk),inset 0 0 0 4px #fff8d8d9}.race-card.selected,.race-card.locked{border-color:#184f2a}.race-card.selected .pip,.race-card.locked .pip{animation:none}.revealed-face{height:92px;width:66px;margin:auto auto 7px;box-shadow:0 3px 0 #a58b5c;border:3px solid #fff5d8;border-radius:5px}.reveal-card{padding:6px 8px;min-width:85px;perspective:500px}.reveal-card.active{background:#f2e3b9}.reveal-card .card-corner{font-size:.85rem}.reveal-card .card-corner svg{width:8px;height:8px}.reveal-card .pip svg{width:17px;height:17px}.reveal-card .card-pips{inset:11px 5px}.inline-finish{position:relative;top:auto;right:auto;width:100%;max-width:none;margin:0;padding:12px 16px;border-radius:8px}.inline-finish .rosette{float:left;margin:2px 12px 6px 0}.inline-finish h2{font-size:1.3rem;margin-bottom:5px}.inline-finish>p{margin-bottom:8px}.inline-finish details{clear:both;margin-bottom:8px}.inline-finish summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;font-size:.85rem}.inline-finish summary::before{content:'▸';margin-right:7px}.inline-finish details[open] summary::before{content:'▾'}.inline-finish .row{display:inline-flex;margin-right:7px}.inline-finish #rematch{margin-top:0!important}.inline-finish .row+button{vertical-align:top}@keyframes pip-prance{0%,100%{transform:translate(-50%,-50%) rotate(var(--pip-turn))}45%{transform:translate(-50%,-57%) rotate(calc(var(--pip-turn) + 7deg))}}
@media(max-width:620px){.race-card{padding:3px}.card-corner{font-size:.9rem}.card-corner.top{top:4px;left:4px}.card-corner.bottom{bottom:4px;right:4px}.card-corner svg{width:8px;height:8px}.card-pips{inset:13px 3px}.pip svg{width:17px;height:17px}.revealed-face{width:51px;height:73px}.reveal-card{min-width:60px;padding:4px}.reveal-card .pip svg{width:13px;height:13px}.reveal-card .card-pips{inset:10px 4px}.inline-finish{padding:10px 13px}.inline-finish h2{font-size:1.2rem}.inline-finish .rosette{height:35px;width:35px;font-size:1.2rem}.inline-finish p{font-size:.76rem!important}.inline-finish button{font-size:.75rem}.inline-finish .row{gap:5px}}
@media(max-height:700px) and (max-width:620px){.pip svg{width:14px;height:14px}.card-pips{inset:13px 3px}.card-corner{font-size:.77rem}.card-corner svg{display:none}}
@media(max-height:500px) and (min-width:621px){.card-corner{font-size:.75rem}.card-corner svg{display:none}.card-pips{inset:8px 8px}.pip svg{width:14px;height:14px}.revealed-face{height:64px;width:47px}.reveal-card .pip svg{width:11px;height:11px}.reveal-card{min-width:60px}.inline-finish{padding:8px}.inline-finish h2{font-size:1rem}.inline-finish .rosette{display:none}.inline-finish p{font-size:.63rem!important}.inline-finish button{font-size:.65rem;padding:5px}.inline-finish .row{gap:4px}.inline-finish summary{font-size:.7rem}.inline-finish #rematch{margin-top:5px!important}}
.race-card .printed-card,.revealed-face .printed-card{background:linear-gradient(115deg,#00000008,transparent 45%,#00000010),var(--silk)}
:root{--muted:#46513f}.brand-rule,footer{color:#4e4a36}summary:focus-visible{outline:3px solid #ab3c25;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html.calm *,html.calm *::before{animation:none!important;transition:none!important}

/* During a race, spend the screen on the course and keep supporting controls beside the hand. */
#app:has(> #stage[data-mode=play])>header{padding:4px 20px;gap:8px}
#app:has(> #stage[data-mode=play]) header nav button{min-width:44px}
#app:has(> #stage[data-mode=play]) .brand-rule{display:none}
#app:has(> #stage[data-mode=play])>#players{flex-wrap:nowrap;gap:6px;padding:0 12px 2px}
#app:has(> #stage[data-mode=play]) .rider{flex:1;min-width:0;max-width:240px;min-height:44px;justify-content:center;padding:3px 7px}
#app:has(> #stage[data-mode=play]) .rider>span:nth-child(2){min-width:0}
#app:has(> #stage[data-mode=play]) .rider-name,
#app:has(> #stage[data-mode=play]) .rider small{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#app:has(> #stage[data-mode=play])>#stage{min-height:240px}
#app:has(> #stage[data-mode=play]) .status-strip{margin-top:5px;padding:6px 14px}
#app:has(> #stage[data-mode=play])>#hand{padding:3px 12px 5px}
#app:has(> #stage[data-mode=play]) .hand-top{min-height:44px;margin-bottom:4px;gap:8px}
#app:has(> #stage[data-mode=play]) .hand-hint{margin-top:6px}
#app:has(> #stage[data-mode=play]) .movement-list{flex-wrap:nowrap;margin:4px 0;gap:9px}
#app:has(> #stage[data-mode=play]) .reveal-card{flex:1 1 0;min-width:0;max-width:120px}
#app:has(> #stage[data-mode=play]) .reveal-card small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#app:has(> #stage[data-mode=play]) .revealed-face{max-width:100%}
#app:has(> #stage[data-mode=play])>footer{padding:0 12px;font-size:.65rem;gap:8px}

@media(min-width:1000px) and (min-height:501px){
 #app:has(> #stage[data-mode=play]){display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,660px) minmax(170px,1fr);grid-template-rows:auto auto minmax(240px,1fr) auto}
 #app:has(> #stage[data-mode=play])>header,
 #app:has(> #stage[data-mode=play])>#players,
 #app:has(> #stage[data-mode=play])>#stage{grid-column:1/-1}
 #app:has(> #stage[data-mode=play])>#hand{grid-column:1/3;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto;padding:8px 0 10px}
 #app:has(> #stage[data-mode=play]) .hand-top{grid-column:1;grid-row:1;align-self:end;flex-direction:column;gap:7px;margin:0;padding:0 16px}
 #app:has(> #stage[data-mode=play]) .cards{grid-column:2;grid-row:1/3;width:100%;align-self:center}
 #app:has(> #stage[data-mode=play]) .hand-hint{grid-column:1;grid-row:2;align-self:start;margin:8px 16px 0;min-height:0;font-size:.77rem;line-height:1.35}
 #app:has(> #stage[data-mode=play])>footer{grid-column:3;grid-row:4;align-self:center;flex-direction:column;justify-content:center;text-align:center;padding:8px 20px;gap:5px}
 #app:has(> #stage[data-mode=play]) .movement-list{grid-column:2;grid-row:1/3;margin:0;align-self:center}
 #app:has(> #stage[data-mode=play])>#hand:empty{display:none}
 #app:has(> #stage[data-mode=play]):has(> #hand:empty)>footer{grid-column:1/-1;flex-direction:row;justify-content:space-between;padding:0 12px;text-align:left}
}
@media(min-width:1500px) and (min-height:501px){
 #app:has(> #stage[data-mode=play]){grid-template-columns:minmax(170px,1fr) minmax(0,720px) minmax(170px,1fr)}
}
@media(min-width:750px) and (max-width:999px) and (min-height:501px){
 #app:has(> #stage[data-mode=play])>header{flex-wrap:nowrap;padding:4px 10px;gap:5px}
 #app:has(> #stage[data-mode=play]) .brand{font-size:1.3rem}
 #app:has(> #stage[data-mode=play]) #room-tools{order:0;width:auto;gap:5px;font-size:.72rem}
 #app:has(> #stage[data-mode=play]) #room-tools button{font-size:.73rem;padding:6px 8px}
 #app:has(> #stage[data-mode=play]) header nav button{padding:6px;font-size:.75rem}
}
@media(max-width:620px){
 #app:has(> #stage[data-mode=play])>header{padding:3px 7px;gap:2px}
 #app:has(> #stage[data-mode=play]) .brand{font-size:1.15rem}
 #app:has(> #stage[data-mode=play]) #room-tools{gap:6px;font-size:.7rem}
 #app:has(> #stage[data-mode=play]) #room-tools button{font-size:.73rem;padding:5px 9px}
 #app:has(> #stage[data-mode=play])>#players{padding:2px 7px;gap:4px}
 #app:has(> #stage[data-mode=play]) .rider{min-height:54px;padding:2px 3px;gap:1px}
 #app:has(> #stage[data-mode=play])>#stage{min-height:175px}
 #app:has(> #stage[data-mode=play])>#hand{padding:3px 9px 4px}
 #app:has(> #stage[data-mode=play]) .hand-top{gap:6px;margin-bottom:4px}
 #app:has(> #stage[data-mode=play]) .hand-hint{margin-top:5px}
 #app:has(> #stage[data-mode=play]) .movement-list{gap:5px}
 #app:has(> #stage[data-mode=play]) .reveal-card{padding:2px}
 #app:has(> #stage[data-mode=play])>footer{padding:0 9px;font-size:.58rem}
}
@media(max-width:360px){
 #app:has(> #stage[data-mode=play]) .brand{font-size:.9rem}
 #app:has(> #stage[data-mode=play]) header nav button{font-size:.68rem}
}
@media(max-height:700px) and (max-width:620px){
 #app:has(> #stage[data-mode=play])>#hand{padding:3px 7px}
 #app:has(> #stage[data-mode=play]) .hand-hint{margin-top:4px}
}
@media(max-height:500px) and (min-width:621px){
 #app:has(> #stage[data-mode=play]){grid-template-rows:auto auto minmax(190px,1fr)}
 #app:has(> #stage[data-mode=play])>header{padding:3px 10px;gap:6px}
 #app:has(> #stage[data-mode=play])>#stage{grid-column:1;grid-row:3;min-height:190px}
 #app:has(> #stage[data-mode=play])>#hand{grid-column:2;grid-row:3;align-self:start;padding:8px 10px 54px}
 #app:has(> #stage[data-mode=play]) .hand-top{display:grid;grid-template-columns:minmax(0,1fr) auto}
 #app:has(> #stage[data-mode=play]) .movement-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 #app:has(> #stage[data-mode=play]) .reveal-card{max-width:none;padding:3px}
 #app:has(> #stage[data-mode=play])>footer{grid-column:2;grid-row:3;align-self:end;flex-direction:column;padding:3px 10px;gap:0;text-align:center;font-size:.51rem}
 #app:has(> #stage[data-mode=play]) footer #credit{display:none}
 #app:has(> #stage[data-mode=play]) footer button{width:100%}
 #app:has(> #stage[data-mode=play]) .rider{padding:2px 5px}
}

.screen-reader{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#movie-ending[hidden]{display:none}
#movie-ending{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);width:min(640px,calc(100% - 32px));padding:13px 24px 15px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-bottom:4px solid #bc8d42;border-radius:5px;text-align:center;box-shadow:var(--shadow);pointer-events:none}
#movie-ending p{margin:0;line-height:1.35;overflow-wrap:anywhere}
#movie-caption{font:italic 1.05rem Georgia,serif}
#movie-ending #movie-winner{font:700 clamp(1.6rem,3.5vw,2.75rem)/1.1 Georgia,serif;margin:4px 0;overflow-wrap:anywhere}
#movie-horse{font-size:.82rem}
#movie-ending #movie-comment{font-size:.95rem;margin-top:7px}
.winner-joke{font:italic .9rem/1.4 Georgia,serif;overflow-wrap:anywhere}
#app.cinema:has(> #stage[data-mode=play]){display:block;position:relative;height:100dvh;min-height:320px;overflow:hidden}
#app.cinema:has(> #stage[data-mode=play])>#stage{height:100%;min-height:0}
#app.cinema:has(> #stage[data-mode=play])>header{position:absolute;z-index:4;top:8px;left:8px;padding:0;background:var(--paper);border-radius:6px}
#app.cinema:has(> #stage[data-mode=play])>header .brand,
#app.cinema:has(> #stage[data-mode=play]) #room-tools,
#app.cinema:has(> #stage[data-mode=play]) #help,
#app.cinema:has(> #stage[data-mode=play])>#players,
#app.cinema:has(> #stage[data-mode=play])>footer,
#app.cinema:has(> #stage[data-mode=play]) .status-strip,
#app.cinema:has(> #stage[data-mode=play]) #camera{display:none}
#app.cinema:has(> #stage[data-mode=play]) .finish-paper{position:absolute;top:8px;right:8px;width:auto;max-width:none;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
#app.cinema:has(> #stage[data-mode=play]) .finish-paper>h2,
#app.cinema:has(> #stage[data-mode=play]) .finish-paper>p{display:none}
#app.cinema:has(> #stage[data-mode=play])>#hand{position:absolute;bottom:10px;left:0;right:0;z-index:3;padding:0}
#app.cinema:has(> #stage[data-mode=play])>#hand .finish-paper{position:static;max-width:none;background:transparent;padding:0;border:0;margin:0}
#app.cinema:has(> #stage[data-mode=play])>#hand .row{display:flex;justify-content:center;margin:0}
@media(max-width:620px),(max-height:500px){
 #movie-ending{bottom:72px;width:calc(100% - 20px);padding:9px 12px 11px}
 #movie-caption{font-size:.86rem}
 #movie-ending #movie-winner{font-size:clamp(1.25rem,5vw,1.8rem)}
 #movie-horse{font-size:.74rem}
 #movie-ending #movie-comment{font-size:.8rem;margin-top:5px}
}
@media(max-height:500px) and (min-aspect-ratio:1/1){
 #movie-ending{left:auto;right:10px;transform:none;width:min(280px,32vw)}
}
@media(max-width:620px) and (max-height:500px) and (min-aspect-ratio:1/1){
 #movie-ending #movie-winner{font-size:1.25rem}
}