@import url('./fonts/fonts.css?v=startup-local-1');
:root{--paper:#eeece5;--ink:#283c35;--muted:#7c8277;--orange:#c55331;--line:#d5d7cc}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--orange);outline-offset:5px}header{height:104px;margin:0 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{color:var(--ink);text-decoration:none;font-family:Manrope,sans-serif;font-weight:800;font-size:23px;letter-spacing:-1px;display:flex;gap:12px;align-items:center}.brand-icon{font-size:42px;transform:rotate(-35deg);color:var(--orange)}.edition{font-size:9px;letter-spacing:1px;margin-left:9px}nav{display:flex;gap:26px;align-items:center}nav button{border:0;background:none;color:var(--ink);font-size:12px;padding:10px 0}nav button span{margin-left:16px}.local-label{font-size:9px;letter-spacing:1.6px;color:var(--muted);margin-right:22px}main{max-width:1500px;margin:auto;padding:42px 5% 32px;display:grid;grid-template-columns:1fr minmax(310px,450px) .65fr;gap:5%}.intro{padding-top:12px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700;display:flex;align-items:center;gap:8px}.eyebrow>span,.board-heading i{display:inline-block;width:6px;height:6px;background:var(--orange);border-radius:50%}h1{font-family:Manrope,sans-serif;font-size:clamp(40px,4.35vw,68px);letter-spacing:-3.9px;line-height:1.075;font-weight:500;margin:26px 0 22px}h1 em{font-family:Georgia,serif;font-weight:normal;color:var(--orange)}.dek{font-size:15px;line-height:1.6;color:#737c70}.match-label{font-size:9px;letter-spacing:1px;margin-top:42px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:13px}.match-label span{color:var(--muted);font-size:8px}.score-card{display:flex;justify-content:space-between;padding:21px 0 17px;border-bottom:1px solid var(--line)}.caption{font-size:8px;letter-spacing:1.3px;display:block}.score-card strong{font-family:Manrope,sans-serif;font-size:70px;line-height:1.2;letter-spacing:-5px;font-weight:500}.best{padding:0 0 0 20px;display:flex;flex-direction:column;justify-content:center}.best b{font-size:28px;font-weight:500;margin:9px 0}.best>span:last-child{font-size:10px;color:var(--muted)}.set-box{margin-top:22px}.set-title{display:flex;justify-content:space-between;font-size:10px}.set-title b{color:var(--orange);font-size:9px}.gates{display:flex;gap:8px;margin-top:14px}.gate{border:1px solid #ced0c3;border-radius:6px;flex:1;text-align:center;padding:9px;font-size:17px}.gate small{display:block;font-size:8px;color:var(--muted);margin-top:3px}.gate.filled{background:#dce2d3;border-color:#99ae92}.set-box p{font-size:10px;color:var(--muted)}.desktop-note{display:flex;gap:14px;align-items:center;margin-top:25px}.desktop-note>span{font-size:34px;color:var(--orange)}.desktop-note p{font-size:11px;line-height:1.5}.board-heading,.board-bottom{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.3px}.board-heading{padding:0 5px 14px}.board-heading i{margin-right:5px;width:5px;height:5px;background:#778969}.canvas-wrap{position:relative;filter:drop-shadow(14px 25px 19px #5d452726)}canvas{display:block;width:100%;height:auto;touch-action:none;border-radius:16px}.board-bottom{padding:18px 4px;letter-spacing:1px;font-size:7px}.board-toast{position:absolute;top:36%;left:50%;transform:translate(-50%,-5px);padding:12px 20px;background:#283c35ef;color:#fff9e7;border:1px solid #ffffff40;border-radius:50px;opacity:0;transition:.25s;white-space:nowrap;pointer-events:none;font-size:14px}.board-toast.show{opacity:1;transform:translate(-50%,0)}.play-panel{display:flex;flex-direction:column;align-items:stretch;padding-top:25px}.club-mark{border:1px solid #adb5a8;border-radius:50%;width:85px;height:85px;align-self:flex-end;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:Georgia,serif;font-size:34px;transform:rotate(12deg)}.club-mark span{font-family:'DM Sans',sans-serif;font-size:6px;letter-spacing:1.5px;margin-top:2px}.instruction{margin-top:62px}.step{color:var(--orange);font-size:8px;letter-spacing:1.6px;font-weight:700}h2{font-family:Manrope,sans-serif;font-weight:500;font-size:29px;letter-spacing:-1px;line-height:1.2;margin:17px 0}.instruction p{font-size:12px;color:#737c70;line-height:1.8;max-width:185px}.gesture{margin:24px 0;font-size:25px;text-align:center;color:#83907e}.gesture span{font-size:40px;display:inline-block;color:var(--orange);margin:0 8px}.gesture small{display:block;font-size:7px;letter-spacing:1.5px;margin-top:12px}.power-control{border-top:1px solid var(--line);padding-top:20px;margin-top:5px}.power-control label{font-size:8px;letter-spacing:1px;display:flex;justify-content:space-between}.power-control input{width:100%;accent-color:var(--orange);margin:17px 0 7px}.power-control p{font-size:9px;color:var(--muted);line-height:1.7}.text-button{border:0;border-bottom:1px solid var(--line);background:none;padding:17px 0;display:flex;justify-content:space-between;color:var(--ink);font-size:11px}.primary{background:var(--orange);border:0;color:white;padding:17px 20px;border-radius:5px;font-size:12px;display:flex;justify-content:space-between;gap:20px;margin-top:18px;width:100%}.primary:hover{background:#af4123}.tiny-note{font-size:7px;line-height:1.9;letter-spacing:1.5px;color:#8c9185;margin-top:auto;padding-top:25px}footer{border-top:1px solid var(--line);margin:0 5%;padding:23px 0;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.4px;color:#818878}footer b{color:var(--orange);font-size:15px;margin-left:14px}dialog{border:1px solid #d6d2c6;border-radius:16px;padding:40px;background:var(--paper);color:var(--ink);max-width:460px;width:calc(100% - 32px);box-shadow:0 30px 100px #0003}dialog::backdrop{background:#1d2e29a8;backdrop-filter:blur(6px)}dialog h2{font-size:35px}dialog p,dialog li{font-size:13px;line-height:1.8;color:#687267}dialog ol{padding-left:20px}dialog li{padding:7px 0}.close{position:absolute;right:16px;top:12px;background:none;border:0;font-size:25px;color:var(--ink)}.result-score{font-size:100px;line-height:1.1;letter-spacing:-7px;color:var(--orange)}[hidden]{display:none!important}#share{width:100%}@media(min-width:1450px){main{gap:65px}}@media(max-width:1050px){main{gap:28px;grid-template-columns:1fr minmax(300px,390px)}.play-panel{grid-column:1/-1;flex-direction:row;align-items:center;gap:25px;padding:0}.club-mark,.gesture,.tiny-note{display:none}.instruction{margin:0;flex:1}.instruction h2{font-size:20px;margin:8px 0}.instruction h2 br{display:none}.instruction p{max-width:300px;margin:0}.power-control{width:180px;border:0}.play-panel>.primary,.play-panel>.text-button{width:140px}.local-label{display:none}}@media(max-width:640px){header{height:72px;margin:0 20px}.brand{font-size:18px;gap:7px}.brand-icon{font-size:31px}.edition{display:none}nav{gap:17px}nav button{font-size:10px}nav button span{display:none}main{display:flex;flex-direction:column;padding:22px 20px;gap:18px}.intro{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.intro>.eyebrow{grid-column:1/-1;font-size:7px}h1{font-size:31px;letter-spacing:-1.5px;line-height:1.05;margin:3px 0}h1 br:nth-child(2){display:none}.dek,.match-label,.desktop-note,.set-box{display:none}.score-card{padding:3px 0;border:0;gap:14px;align-items:center;justify-content:flex-end}.score-card strong{font-size:45px;letter-spacing:-3px}.caption{font-size:6px}.best{padding:0}.best b{font-size:23px}.best>span:last-child{display:none}.arena{width:100%;max-width:380px;align-self:center}.board-heading{font-size:7px;padding-bottom:10px}.board-bottom{font-size:6px;padding:12px 0}.play-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px}.instruction{grid-column:1/-1}.instruction h2{font-size:20px;display:inline;margin-left:10px}.instruction p{max-width:none;font-size:11px;margin-top:6px}.power-control{width:100%;padding:10px 0 0}.play-panel>.text-button{width:100%;align-self:center}.play-panel>.primary{width:100%}footer{margin:0 20px;font-size:6px;gap:25px;line-height:1.6}footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:640px){h1{font-size:24px;line-height:1.07;letter-spacing:-1.1px;margin:5px 0}h1 br{display:none}.arena{max-width:min(380px,calc((100svh - 260px)*.64));min-width:260px}.instruction h2{margin-left:0;display:block;margin-top:6px}.board-toast{font-size:11px;padding:10px 13px}}
/* Preserve the measured board's 410:2000 ratio at every viewport size. */
.arena{width:100%;max-width:none;display:flex;flex-direction:column;align-items:center}.canvas-wrap{width:clamp(150px,calc((100svh - 205px)*.205),245px);flex:none}canvas{aspect-ratio:410/2000;border-radius:3px}.board-heading,.board-bottom{width:100%;gap:16px}.board-heading{line-height:1.7}.board-bottom{line-height:1.7}.board-toast{font-size:11px;padding:10px 14px}.canvas-wrap::after{content:'2 METRES. EVERY MILLIMETRE COUNTS.';position:absolute;left:calc(100% + 16px);top:40%;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;color:#8c9185;white-space:nowrap}
@media(max-width:640px){.arena{max-width:none;min-width:0}.canvas-wrap{width:max(110px,calc((100svh - 320px)*.205))}.board-heading,.board-bottom{max-width:340px}.canvas-wrap::after{left:calc(100% + 18px)}.board-toast{font-size:10px}.intro h1{font-size:20px}.intro{gap:5px}.play-panel{padding-top:0}}
/* First-person table view. Geometry, rather than the canvas shape, sets board proportions. */
main{max-width:1800px;grid-template-columns:240px minmax(400px,1fr) 190px;gap:30px;padding-top:28px}.intro h1{font-size:43px;letter-spacing:-2px}.intro .dek{font-size:13px}.intro .match-label{margin-top:27px}.arena{min-width:0}.canvas-wrap{width:100%;height:clamp(500px,calc(100svh - 240px),900px);filter:drop-shadow(0 20px 25px #26332925);border-radius:12px;overflow:hidden}canvas{width:100%;height:100%;aspect-ratio:auto;border-radius:12px}.canvas-wrap::after{display:none}.board-heading,.board-bottom{max-width:none}.board-heading{font-size:8px}.board-toast{top:26%;max-width:95%;white-space:normal;text-align:center}.play-panel{padding-top:10px}.instruction{margin-top:35px}.club-mark{width:66px;height:66px;font-size:27px}.tiny-note{margin-top:30px}.gesture{margin:15px 0}.desktop-note{display:none}header{height:80px}.local-label{display:none}.score-card strong{font-size:60px}.best{padding-left:10px}.set-title{font-size:9px}
@media(max-width:1100px){main{grid-template-columns:200px minmax(350px,1fr);gap:22px}.intro h1{font-size:36px}.play-panel{grid-column:1/-1;display:flex;flex-direction:row;gap:24px}.instruction{margin:0}.instruction h2{font-size:20px}.club-mark,.gesture,.tiny-note{display:none}.power-control{width:180px}.play-panel>.primary{width:150px}.canvas-wrap{height:650px}}
@media(max-width:640px){header{height:62px}main{display:flex;padding:16px 16px;gap:14px}.intro{display:flex;align-items:center;justify-content:space-between;width:100%}.intro>.eyebrow{display:none}.intro h1{font-size:23px;letter-spacing:-1px;max-width:170px}.score-card strong{font-size:40px}.score-card{gap:12px}.arena{width:100%;min-width:0}.canvas-wrap{width:100%;height:clamp(380px,calc(100svh - 285px),660px)}.board-heading{font-size:7px}.play-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.instruction{grid-column:1/-1}.instruction h2{display:none}.instruction p{font-size:11px}.power-control{width:100%;margin:0}.power-control p{display:none}.play-panel>.primary{width:100%}.best b{font-size:20px}footer{display:none}}
#board{cursor:grab}#board.grabbing{cursor:grabbing}

/* Readable café slates stay with the play surface, including the gate close-up. */
.cafe-scoreboard{position:absolute;top:13px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;pointer-events:none;user-select:none;max-width:calc(100% - 20px);color:#ede9d8;font-family:'Chalkboard SE','Chalkboard','Comic Sans MS',cursive;text-shadow:.5px 0 #eee6d34d,-.4px .3px #eee6d355}
.chalk-tile{background:radial-gradient(ellipse at 23% 30%,#b6beaf12,transparent 65%),repeating-linear-gradient(173deg,#ffffff03 0 1px,transparent 1px 5px),#25312d;border:3px solid #745038;border-top-color:#947052;border-bottom-color:#493323;box-shadow:0 3px 6px #0007,inset 0 0 8px #050b0780;border-radius:3px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.chalk-total{width:82px;height:91px;transform:rotate(-1.5deg)}
.chalk-total output{font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums}
.chalk-caption{font-size:9px;letter-spacing:1.3px;line-height:1.6;color:#d5d8c7}
.chalk-note{font-size:8px;letter-spacing:.8px;line-height:1.6;color:#c0c8b9}
.chalk-gate-row{display:flex;gap:5px}
.chalk-gate{width:45px;height:65px;transform:rotate(.8deg)}
.chalk-gate:nth-child(even){transform:rotate(-1deg)}
.chalk-gate b{font-weight:400;font-size:23px;line-height:1.1;font-variant-numeric:tabular-nums}
@media(max-width:640px){.cafe-scoreboard{top:9px;gap:5px}.chalk-total{width:65px;height:76px}.chalk-total output{font-size:28px}.chalk-gate-row{gap:3px}.chalk-gate{width:39px;height:59px}.chalk-caption{font-size:8px}.chalk-note{font-size:7px}}

.cafe-scoreboard.is-docked{left:10px;transform:none;flex-direction:column;gap:5px}.cafe-scoreboard.is-docked .chalk-gate-row{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}

.cafe-scoreboard .chalk-total{width:80px;height:82px}.cafe-scoreboard .chalk-caption{font-size:15px;letter-spacing:.5px}

/* The normal live score is painted into the photographed wall slate. Keep a
   readable docked slate when the user scrolls that part of the room away. */
.canvas-wrap:has(canvas[data-photo-table="ready"]) .cafe-scoreboard:not(.is-docked){visibility:hidden}

@media(max-width:640px){.canvas-wrap{height:auto!important;aspect-ratio:4/5}#board{height:100%!important}}
