:root{--bg:#031b10;--header:#16743c;--card:#132f21;--card-2:#0a2417;--line:#2d6948;--line-soft:#204b35;--green:#1c914d;--yellow:#ffcc16;--red:#cf3b2f;--text:#f2f2eb;--muted:#82a48f;--shadow:0 18px 50px rgba(0,0,0,.32);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}.topbar{height:96px;padding:0 max(24px,calc((100% - 1100px)/2));display:flex;align-items:center;justify-content:space-between;background:var(--header);border-bottom:6px solid var(--yellow)}.brand{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none}.brand>span:last-child{display:block;line-height:1}.brand b,.footer-brand b{color:var(--yellow)}.brand b,.brand strong{font-size:25px;letter-spacing:-.04em}.brand strong{color:var(--text)}.brand small{display:block;margin-top:7px;color:#061a10;font-size:10px;font-weight:900;letter-spacing:.28em}.brand-mark{position:relative;width:49px;height:45px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#0d2518;border-radius:5px}.brand-mark::after{content:'';position:absolute;inset:5px;clip-path:inherit;background:var(--header)}.brand-mark i{position:absolute;z-index:1;width:11px;height:11px;border-radius:50%;background:var(--yellow)}.brand-mark i:first-child{left:19px;top:9px}.brand-mark i:nth-child(2){left:11px;top:25px;background:var(--red)}.brand-mark i:last-child{right:11px;top:25px;background:#111}.status-pill,.live-pill,.wip-pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.09em}.status-pill{padding:10px 13px;border:1px solid rgba(255,204,22,.35);color:var(--yellow);background:rgba(3,27,16,.22)}.status-pill i,.construction-line i{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px rgba(255,204,22,.8)}main{width:min(1100px,calc(100% - 34px));margin:0 auto}.hero{min-height:650px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);gap:55px;align-items:center;padding:70px 0 80px}.eyebrow{margin:0;color:var(--yellow);font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.hero h1{margin:14px 0 22px;font-size:clamp(52px,7vw,82px);line-height:.91;letter-spacing:-.065em}.hero h1 span,.promise-panel h2 span,.wip-card h1 span{color:var(--yellow)}.lede{max-width:650px;margin:0;color:var(--muted);font-size:18px;line-height:1.6}.feature-strip{display:flex;flex-wrap:wrap;gap:10px 18px;margin:28px 0;color:#c7d7cd;font-size:12px;font-weight:800}.feature-strip span{white-space:nowrap}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 18px;border:2px solid transparent;border-radius:12px;font-weight:900;text-decoration:none;transition:.18s}.button:hover{filter:brightness(1.08);transform:translateY(3px)}.button.primary{background:var(--yellow);color:#092216}.button.ghost{border-color:var(--line);color:var(--yellow);background:var(--card-2)}.button.wide{width:100%;margin-top:auto}.hero-board{position:relative;height:390px;border:2px solid var(--line);border-radius:30px;background:radial-gradient(circle at 50% 45%,#17482f 0,#0c2d1d 48%,#071d13 100%);box-shadow:var(--shadow);overflow:hidden}.hero-board::before{content:'';position:absolute;inset:18px;border:1px solid rgba(255,255,255,.08);border-radius:19px}.cue{position:absolute;width:430px;height:8px;border-radius:8px;background:linear-gradient(90deg,#26150d 0 16%,#e8cf9c 16% 90%,#f3f0df 90%);opacity:.5}.cue-one{right:-150px;top:90px;transform:rotate(48deg)}.cue-two{left:-170px;bottom:85px;transform:rotate(42deg)}.rack{position:absolute;left:50%;top:48%;display:grid;grid-template-columns:repeat(3,62px);grid-auto-rows:62px;transform:translate(-50%,-50%);filter:drop-shadow(0 10px 9px rgba(0,0,0,.34))}.ball{display:grid;place-items:center;width:59px;height:59px;border-radius:50%;border:1px solid rgba(0,0,0,.25);font-style:normal;font-size:16px;font-weight:900;color:#111;box-shadow:inset -7px -9px 15px rgba(0,0,0,.22),inset 6px 7px 9px rgba(255,255,255,.18)}.ball::after{content:'';position:absolute;width:23px;height:23px;border-radius:50%;background:#f5f4ed;z-index:-1}.rack .ball:nth-child(1){grid-column:2}.rack .ball:nth-child(2){grid-column:1;grid-row:2}.rack .ball:nth-child(3){grid-column:3;grid-row:2}.rack .ball:nth-child(4){grid-column:1;grid-row:3}.rack .ball:nth-child(5){grid-column:2;grid-row:3;color:#111}.rack .ball:nth-child(6){grid-column:3;grid-row:3}.yellow{background:#f2c316}.red{background:#d63232}.green{background:#168849}.purple{background:#55419b}.black{background:#111}.stripe{background:linear-gradient(#f5f4ed 0 27%,#1f54bd 27% 73%,#f5f4ed 73%)}.stat{position:absolute;display:grid;gap:4px;min-width:115px;padding:12px 15px;border:1px solid var(--line);border-radius:13px;background:rgba(5,26,17,.92);box-shadow:0 10px 25px rgba(0,0,0,.25)}.stat small{color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.12em}.stat b{color:var(--yellow);font-size:26px}.stat-one{top:28px;left:28px}.stat-two{right:28px;bottom:28px}.apps-section{padding:70px 0 95px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:28px}.section-heading h2,.promise-panel h2{margin:8px 0 0;color:var(--text);font-size:42px;letter-spacing:-.04em}.section-heading>p{max-width:430px;margin:0;color:var(--muted);line-height:1.55}.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.app-card{display:flex;flex-direction:column;min-height:510px;padding:25px;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 35px rgba(0,0,0,.2);transition:.18s}.app-card:hover{border-color:var(--yellow);transform:translateY(-3px)}.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:25px}.app-icon{display:grid;place-items:center;width:72px;height:72px}.eight-icon{border-radius:50%;background:#0c0d0c;border:7px solid #303633;color:#f5f4ed;font-size:28px;font-weight:900}.kelly-icon{grid-template-columns:repeat(3,29px);width:92px}.kelly-icon b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--yellow);color:#102116;font-size:12px}.kelly-icon b:nth-child(2){margin-left:-9px;background:var(--red);color:white}.kelly-icon b:nth-child(3){grid-column:2;margin:-13px 0 0 4px;background:#f5f4ed}.snooker-icon{position:relative;grid-template-columns:repeat(3,30px);width:90px}.snooker-icon b{width:34px;height:34px;border-radius:50%;background:#d63232;border:1px solid #7f1717}.snooker-icon b:nth-child(2){margin-left:-9px}.snooker-icon b:nth-child(3){grid-column:2;margin:-15px 0 0 -4px}.live-pill{padding:7px 9px;background:rgba(98,216,142,.1);border:1px solid rgba(98,216,142,.25);color:#62d88e}.wip-pill{padding:7px 9px;background:rgba(255,204,22,.08);border:1px solid rgba(255,204,22,.25);color:var(--yellow)}.app-card h3{margin:8px 0 12px;font-size:29px;letter-spacing:-.04em}.app-card h3 span{color:var(--yellow)}.app-card>p:not(.eyebrow){min-height:88px;margin:0;color:var(--muted);font-size:14px;line-height:1.55}.app-card ul{display:grid;gap:10px;margin:20px 0 28px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);list-style:none;color:#c7d7cd;font-size:13px}.app-card li::before{content:'✓';margin-right:9px;color:var(--yellow);font-weight:900}.coming-line{display:flex;align-items:center;gap:9px;margin:28px 0;color:var(--muted);font-size:12px}.coming-line span{width:30px;height:2px;background:var(--yellow)}.promise-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;margin-bottom:95px;padding:42px;background:linear-gradient(135deg,#123e2a,#0b2a1c);border:2px solid var(--line);border-radius:28px}.promise-grid{display:grid;gap:10px}.promise-grid span{display:flex;align-items:center;gap:15px;padding:14px;background:rgba(3,27,16,.45);border:1px solid rgba(255,255,255,.08);border-radius:12px;font-size:13px;font-weight:800}.promise-grid b{color:var(--yellow);font-size:11px}footer{min-height:110px;padding:30px max(24px,calc((100% - 1100px)/2));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;border-top:1px solid var(--line);background:#02150c;color:var(--muted);font-size:12px}footer p{text-align:center}.footer-brand{color:var(--text);text-decoration:none;font-size:20px;font-weight:900}.back-link{padding:10px 14px;border:1px solid rgba(255,204,22,.35);border-radius:999px;color:var(--yellow);font-size:12px;font-weight:900;text-decoration:none}.snooker-page main{width:100%}
.brand-mark-img{display:block;width:49px;height:45px;border-radius:8px;object-fit:cover}.wip-main{min-height:calc(100vh - 96px);display:grid;place-items:center;padding:40px 17px;background:radial-gradient(circle at center,#113b28 0,var(--bg) 63%)}.wip-card{width:min(620px,100%);padding:55px 35px;text-align:center;border:2px solid var(--line);border-radius:28px;background:rgba(10,36,23,.88);box-shadow:var(--shadow)}.wip-card h1{margin:16px 0;font-size:clamp(54px,10vw,86px);line-height:.86;letter-spacing:-.065em}.wip-card>p:not(.eyebrow){color:var(--muted);font-size:16px}.snooker-balls{display:flex;justify-content:center;margin-bottom:27px}.snooker-balls i{width:42px;height:42px;margin-left:-7px;border-radius:50%;background:var(--red);border:1px solid #701616;box-shadow:inset -6px -7px 10px rgba(0,0,0,.25)}.snooker-balls i:first-child{margin-left:0}.snooker-balls i:nth-child(4){background:#111}.snooker-balls i:nth-child(5){background:var(--yellow)}.construction-line{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:#c7d7cd;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.construction-line i{display:block}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:55px}.hero-copy{text-align:center}.lede{margin-inline:auto}.feature-strip{justify-content:center}.hero-board{width:min(510px,100%);margin:0 auto}.app-grid{grid-template-columns:1fr 1fr}.snooker-card{grid-column:1/-1;min-height:390px}.section-heading{align-items:start}.promise-panel{grid-template-columns:1fr}.app-card>p:not(.eyebrow){min-height:0}}
@media(max-width:620px){.topbar{height:78px;padding:0 13px;border-bottom-width:5px}.brand-mark{width:39px;height:37px}.brand-mark-img{width:39px;height:37px}.brand-mark i{width:9px;height:9px}.brand-mark i:first-child{left:15px;top:8px}.brand-mark i:nth-child(2){left:8px;top:22px}.brand-mark i:last-child{right:8px;top:22px}.brand b,.brand strong{font-size:20px}.brand small{font-size:8px}.status-pill{display:none}main{width:min(100% - 22px,540px)}.hero{min-height:auto;gap:35px;padding:48px 0 55px}.hero h1{font-size:52px}.lede{font-size:16px}.venue-note{font-size:16px}.venue-note-link{font-size:16px}.hero-board{height:290px}.rack{grid-template-columns:repeat(3,49px);grid-auto-rows:49px}.ball{width:47px;height:47px;font-size:13px}.stat{min-width:96px;padding:9px 11px}.stat b{font-size:20px}.cue{width:340px}.apps-section{padding:55px 0 70px}.section-heading{display:grid;gap:14px}.section-heading h2,.promise-panel h2{font-size:34px}.app-grid{grid-template-columns:1fr}.snooker-card{grid-column:auto}.app-card{min-height:0}.promise-panel{margin-bottom:60px;padding:28px 20px}footer{grid-template-columns:1fr;text-align:center}footer p{margin:0}.wip-main{min-height:calc(100vh - 78px)}.wip-card{padding:45px 20px}.wip-card h1{font-size:56px}.back-link{padding:8px 10px}}

/* CueTracker family artwork */
.hero-board{background:radial-gradient(circle at 50% 44%,#195038 0,#0c2d1d 52%,#071d13 100%)}
.hero-board::after{content:'';position:absolute;left:50%;bottom:34px;width:62%;height:22px;transform:translateX(-50%);border-radius:50%;background:rgba(0,0,0,.25);filter:blur(12px)}
.hero-ball-set{position:absolute;inset:0;z-index:1}
.hero-ball-set .ball{position:absolute;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;border:1px solid rgba(0,0,0,.36);font-style:normal;color:#111;box-shadow:inset -12px -14px 22px rgba(0,0,0,.25),inset 9px 10px 12px rgba(255,255,255,.22),0 12px 15px rgba(0,0,0,.26)}
.hero-ball-set .ball::after{content:none}
.hero-ball-set .ball::before{content:'';position:absolute;top:13px;left:17px;width:28px;height:14px;border-radius:50%;background:rgba(255,255,255,.25);transform:rotate(-28deg)}
.hero-ball-set .ball span{position:relative;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f5f4ed;font-size:14px;font-weight:900}
.hero-ball-set .cue-ball{left:21.6%;top:47.4%;background:#f5f4ed;transform:rotate(-10deg)}
.hero-ball-set .red-ball{left:35.5%;top:21%;background:#d63232;transform:rotate(9deg)}
.hero-ball-set .yellow-ball{right:22.9%;top:22.3%;background:#f2c316;transform:rotate(-16deg)}
.hero-ball-set .black-ball{left:44.7%;bottom:22.9%;background:#080908;transform:rotate(6deg)}
.hero-ball-set .nine-ball{right:32.8%;top:46%;background:linear-gradient(#f5f4ed 0 28%,#f2c316 28% 72%,#f5f4ed 72%);transform:rotate(-8deg)}
.hero-ball-set .six-ball{right:22.9%;bottom:32.8%;background:#168849;transform:rotate(15deg)}.hero-ball-set .four-ball{left:21%;top:22.3%;background:#7b3fb0;transform:rotate(13deg)}.hero-ball-set .fifteen-ball{left:54%;top:29.5%;background:linear-gradient(#f5f4ed 0 28%,#7a1f2b 28% 72%,#f5f4ed 72%);transform:rotate(-7deg)}.hero-ball-set .fifteen-ball span{font-size:13px}.hero-ball-set .snooker-blue-ball{left:42.7%;top:35.5%;background:#235fc4;transform:rotate(4deg)}.hero-ball-set .snooker-pink-ball{left:28.2%;bottom:27.6%;background:#ef77a4;transform:rotate(-3deg)}
.kelly-pea{position:absolute;z-index:3;display:grid;place-items:center;width:30px;height:30px;overflow:hidden;border:2px solid rgba(255,255,255,.3);border-radius:50%;background:linear-gradient(to bottom,#c0392b 0 50%,#f5f4ed 50% 100%);box-shadow:0 7px 10px rgba(0,0,0,.32);font-style:normal;transform:rotate(var(--pea-turn,0deg))}
.kelly-pea span{position:relative;z-index:1;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#f5f4ed;color:#c0392b;font-size:9px;font-weight:900;transform:rotate(calc(-1 * var(--pea-turn,0deg)))}
.pea-one{left:19.6%;top:60.6%;--pea-turn:-16deg}.pea-seven{right:20.3%;top:66.5%;--pea-turn:20deg}.pea-eleven{left:40.8%;bottom:19.6%;--pea-turn:10deg}.pea-three{right:28.2%;bottom:19.6%;--pea-turn:-22deg}.pea-twelve{left:50%;top:50%;--pea-turn:8deg}
.app-card .card-top{min-height:130px;align-items:center}
.official-logo{filter:drop-shadow(0 5px 7px rgba(0,0,0,.35))}
.official-logo img{display:block;width:100%;height:100%;object-fit:contain}
.kelly-card .card-top{min-height:170px}
.kelly-icon{width:200px;height:165px}
.eight-icon{width:125px;height:125px}
.eight-icon{border:0;border-radius:0;background:none;color:inherit;font-size:inherit}
.snooker-icon{display:block;width:118px;height:118px;border-radius:16px;overflow:hidden;filter:drop-shadow(0 5px 7px rgba(0,0,0,.28))}
.snooker-icon img{display:block;width:100%;height:100%;object-fit:cover}
.snooker-page-logo{display:block;width:160px;height:160px;margin:0 auto 28px;border-radius:20px;object-fit:cover;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
@media(max-width:620px){.hero-ball-set .ball{width:54px;height:54px}.hero-ball-set .ball span{width:22px;height:22px;font-size:12px}}
@media(max-width:620px){.kelly-pea{width:30px;height:30px}.kelly-pea span{width:16px;height:16px;font-size:9px}.app-card .card-top{min-height:112px}.kelly-card .card-top{min-height:150px}.kelly-icon{width:180px;height:148px}.eight-icon{width:110px;height:110px}.snooker-icon{width:104px;height:104px}.snooker-page-logo{width:138px;height:138px;margin-bottom:24px}}

/* Equal-size family marks and sub-app title colours */
.app-card{min-height:590px}
.app-card .card-top,.kelly-card .card-top{min-height:166px;align-items:center}
.kelly-icon{flex:0 0 154px;width:154px;height:128px}.eight-icon{flex:0 0 147px;width:147px;height:128px}.snooker-icon{flex:0 0 146px;width:146px;height:146px}
.kelly-icon,.eight-icon{display:block}
.app-card h3 .app-name{color:var(--yellow)}
.app-card h3 .tracker-name{color:var(--red)}
.official-logo img{display:block;width:100%;height:100%;object-fit:contain}
.eight-icon{border:0;border-radius:0;background:none;color:inherit;font-size:inherit}
.snooker-icon{--sn-ball:24px;position:relative;display:block;border-radius:0;overflow:visible;filter:drop-shadow(0 5px 7px rgba(0,0,0,.28))}
.snooker-icon .snooker-ball{display:grid;place-items:center;width:var(--sn-ball);height:var(--sn-ball);flex:0 0 var(--sn-ball);border:1px solid rgba(0,0,0,.4);border-radius:50%}
.snooker-icon .eight-ball{position:absolute;z-index:3;left:50%;top:-10px;transform:translateX(-50%);background:#080908;color:#111}

.snooker-rack{position:absolute;z-index:0;left:50%;top:14px;width:135px;height:117px;transform:translateX(-50%);overflow:visible}
.snooker-icon .snooker-ball.blue{background:#1f6fe4}.snooker-icon .snooker-ball.brown{background:#9a5a24}.snooker-icon .snooker-ball.yellow{background:#ffcc16}.snooker-icon .snooker-ball.pink{background:#ff5fa3}.snooker-icon .snooker-ball.green{background:#17a34a}
.snooker-colours{position:absolute;z-index:3;left:50%;bottom:-6px;display:flex;gap:6px;transform:translateX(-50%)}
.snooker-page-logo{display:block;width:146px;height:146px;margin:0 auto 28px;border-radius:0;object-fit:initial;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
@media(max-width:900px){.snooker-card{min-height:590px}}
@media(max-width:620px){.app-card{min-height:0}.app-card .card-top,.kelly-card .card-top{min-height:142px}.kelly-icon{flex-basis:132px;width:132px;height:110px}.eight-icon{flex-basis:127px;width:127px;height:110px}.snooker-page-logo{width:146px;height:146px;margin-bottom:24px}}

/* Venue display message and refined Snooker mark */
.venue-note{max-width:650px;margin:20px 0 0;color:var(--muted);font-size:18px;line-height:1.6}

.venue-note-link{display:inline;border:0;background:none;padding:0;margin-left:2px;color:var(--yellow);font-size:18px;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.snooker-card .snooker-icon{transform:scale(.7901);transform-origin:center}
.app-card .card-top+h3{margin-top:8px}
@media(max-width:900px){.venue-note{margin-inline:auto;text-align:left}}
@media(max-width:620px){.venue-note{margin-top:18px}.snooker-card .snooker-icon{transform:scale(.679)}}

.app-card li{position:relative;padding-left:20px}
.app-card li::before{position:absolute;left:0;margin-right:0}



/* About links and CueTracker-hosted live About pages */
.about-link{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-12px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(3,27,16,.28);color:var(--yellow);font-size:13px;font-weight:900;text-decoration:none;transition:.18s}
.about-link:hover{border-color:var(--yellow);transform:translateY(-1px)}
.about-shell{width:min(920px,calc(100% - 34px));margin:0 auto;padding:52px 0 85px}.about-shell-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:26px}.about-shell-head h1{margin:8px 0 0;font-size:clamp(42px,7vw,68px);letter-spacing:-.055em}.about-shell-head h1 span{color:var(--yellow)}.about-source-note{max-width:390px;margin:0;color:var(--muted);font-size:13px;line-height:1.55}.about-live-content{display:grid;gap:16px}.about-live-content>.card,.about-live-content>.panel,.about-live-content>.about-card{padding:25px;border:2px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 14px 35px rgba(0,0,0,.18)}.about-live-content h2{margin-top:0;color:var(--yellow)}.about-live-content p{color:#c7d7cd;line-height:1.65}.about-live-content ul{color:#c7d7cd;line-height:1.65}.about-live-content li+li{margin-top:5px}.about-play-strip{display:flex;flex-wrap:wrap;gap:10px;overflow-x:visible;padding:4px 2px 10px}.about-play-shot{flex:0 0 116px;width:116px;height:205px;border:1px solid var(--line);border-radius:10px;object-fit:cover}.about-live-content button{pointer-events:none}.about-live-content .about-support-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.about-live-content .about-support-card{display:grid;gap:7px;color:var(--text);text-decoration:none}.about-live-content .about-support-card b{color:var(--yellow)}.about-live-content .about-support-card span{color:var(--muted);line-height:1.5}.about-page-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media(max-width:700px){.about-shell{padding-top:35px}.about-shell-head{align-items:start;flex-direction:column}.about-live-content .about-support-grid{grid-template-columns:1fr}.about-play-shot{flex-basis:96px;width:96px;height:170px}}

.venue-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(4,15,9,.78);padding:20px}
.venue-modal.hidden{display:none}
.venue-modal-inner{position:relative;width:min(640px,100%);max-height:85vh;overflow:auto;background:var(--card);border:2px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.venue-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.venue-modal-tabs{display:flex;gap:8px;margin-bottom:18px}
.venue-tab{flex:1;padding:10px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);font-weight:800;font-size:13px;cursor:pointer}
.venue-tab.active{background:var(--yellow);color:#12261a;border-color:var(--yellow)}
.venue-panel.hidden{display:none}
.venue-panel img{width:100%;border-radius:14px;border:1px solid var(--line);display:block;margin-bottom:14px}
.venue-panel p{color:#c7d7cd;font-size:13px;line-height:1.55;margin:0}
.venue-placeholder{display:grid;place-items:center;gap:10px;padding:50px 20px;border:2px dashed var(--line);border-radius:14px;text-align:center}
.venue-placeholder span{font-size:40px}
.venue-placeholder p{color:var(--muted);font-size:13px;line-height:1.5;margin:0}
@media(max-width:620px){.venue-modal-inner{padding:20px 16px;border-radius:16px}}

/* Homepage copy and compact horizontal header mark */
.brand-mark-img{width:66px;height:40px;object-fit:contain}.hero{min-height:510px;grid-template-columns:minmax(0,1fr);gap:0}.lede,.venue-note{font-size:18px;line-height:1.6}.venue-feature-link{border:0;background:none;padding:0;color:var(--yellow);font:inherit;font-weight:900;cursor:pointer;text-decoration:underline;text-underline-offset:2px}@media(max-width:620px){.brand-mark-img{width:56px;height:34px}.lede,.venue-note{font-size:18px}}

/* Wider, layered header mark: keeps the balls and Kelly Pool pills legible. */
.brand-mark-img{width:100px;height:40px;object-fit:contain}@media(max-width:620px){.brand-mark-img{width:82px;height:34px}}

/* Full collage mark — deliberately wider and taller so the original ball and pea detail remains legible. */
.brand-mark-img{width:140px;height:60px;object-fit:contain}@media(max-width:620px){.brand-mark-img{width:100px;height:44px}}

/* Keep the full status label visible even on compact screens. */
@media(max-width:620px){.topbar{padding:0 10px}.brand{gap:7px}.brand-mark-img{width:75px;height:34px}.brand b,.brand strong{font-size:18px}.brand small{font-size:7px;letter-spacing:.18em}.status-pill{display:inline-flex;padding:7px 6px;gap:4px;font-size:7px;letter-spacing:0;white-space:nowrap}.status-pill i{width:6px;height:6px}}

/* Sticky compact header: preserve the status label at every viewport width. */
.topbar{position:sticky;top:0;z-index:100}@media(max-width:620px){.topbar{padding:0 8px}.brand{gap:5px}.brand-mark-img{width:75px;height:34px}.brand b,.brand strong{font-size:17px}.brand small{display:none}.status-pill{display:inline-flex!important;padding:6px 5px;gap:3px;font-size:6.5px;letter-spacing:0;white-space:nowrap;flex-shrink:0}.status-pill i{width:5px;height:5px}}@media(max-width:360px){.brand-mark-img{width:62px;height:30px}.brand b,.brand strong{font-size:15px}.status-pill{font-size:5.5px;padding:5px 4px}}

/* Retain the original mobile brand scale and wordmark; only the status label is compact. */
@media(max-width:620px){.brand{gap:14px}.brand-mark-img{width:100px;height:44px}.brand b,.brand strong{font-size:20px}.brand small{display:block;font-size:8px;letter-spacing:.28em}.status-pill{display:inline-flex!important;font-size:7px;padding:7px 6px}}@media(max-width:360px){.brand-mark-img{width:100px;height:44px}.brand b,.brand strong{font-size:20px}.brand small{display:block;font-size:8px}}


/* Final intrinsic header layout: brand and status use their natural widths. */
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap}
.brand{flex:0 0 auto;min-width:max-content;gap:14px}
.brand-mark-img{flex:0 0 auto;width:140px;height:60px;object-fit:contain}
.status-pill{display:inline-flex!important;flex:0 0 auto}
@media(max-width:620px){
  .topbar{height:96px;padding:0 13px;gap:8px}
  .brand{gap:14px}
  .brand-mark-img{width:140px;height:60px}
  .brand b,.brand strong{font-size:25px}
  .brand small{display:block;font-size:10px;letter-spacing:.28em}
  .status-pill{display:inline-flex!important;font-size:7px;padding:7px 6px;gap:4px;letter-spacing:0;white-space:nowrap}
  .status-pill i{width:6px;height:6px}
}



/* Tightened asset width keeps the full-size status message visible. */
.brand-mark-img{width:124px;height:60px}
@media(max-width:620px){
  .topbar{padding:0 13px;gap:8px}
  .brand-mark-img{width:124px;height:60px}
  .status-pill{font-size:10px;padding:5px 6px;gap:5px}
  .status-pill i{width:7px;height:7px}
}


/* 9 Ball Tracker emblem shared by its directory card and work-in-progress page. */.nineball-icon{display:block;flex:0 0 146px;width:146px;height:166px;filter:drop-shadow(0 5px 7px rgba(0,0,0,.28))}.nineball-icon img{display:block;width:100%;height:100%;object-fit:contain}.nineball-page-logo{width:166px;height:218px;margin:0 auto 22px}@media(max-width:620px){.nineball-icon{flex-basis:132px;width:132px;height:150px}.nineball-page-logo{width:150px;height:197px;margin-bottom:18px}}


/* Nine Ball rack matches the shared CueTracker app-icon height. */
.nineball-icon{flex-basis:146px;width:146px;height:146px}
.nineball-page-logo{width:146px;height:198px}
@media(max-width:620px){.nineball-icon{flex-basis:132px;width:132px;height:132px}.nineball-page-logo{width:132px;height:179px}}



/* Align the directory marks and compact the hub header without shrinking its mark. */
.nineball-icon{flex:0 0 136px;width:136px;height:136px}
.topbar{height:59px;min-height:59px;overflow:visible}
@media(max-width:620px){.topbar{height:59px;min-height:59px}}


/* Keep the full-size header mark visible inside Kelly Pool-height navigation. */
.topbar .brand-mark-img{transform:translateY(3.5px)}


/* Stable CueTracker directory layout and compact mobile status label. */
.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.app-grid{grid-template-columns:1fr}.status-pill{font-size:8px;padding:5px;gap:4px}.status-pill i{width:5px;height:5px}}


/* Mobile header: retain the full brand while compacting only the status label. */
@media(max-width:620px){.topbar{padding:0 8px;gap:0}.brand{gap:6px}.status-pill{font-size:6px;padding:3px 4px;gap:3px;letter-spacing:0}.status-pill i{width:4px;height:4px}}

@media(max-width:620px){.topbar{padding-inline:7px}}

/* Final header-mark clearance adjustment. */
.topbar .brand-mark-img{width:106px;height:51px;transform:translateY(0)}


/* ═══════════════════════════════════════════════════════════════════════════
   Feature screenshots, header parity and spacing (Ryan, 2026-08-20)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Screenshot popup ──────────────────────────────────────────────────────
   Every feature in the strip opens this, one tab per app. The body is a fixed
   height on purpose: if the frame resized to whatever image was showing, the
   tabs would move under the cursor every time you switched app, which defeats
   the point of being able to flick between them and compare. The caption box
   is fixed for the same reason -- a longer sentence must not grow the frame. */
.shot-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(4,15,9,.78);padding:20px}
.shot-modal.hidden{display:none}
.shot-modal-inner{position:relative;width:min(860px,100%);background:var(--card);border:2px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.shot-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.shot-modal-inner h2{margin:0 40px 4px 0;color:var(--text);font-size:24px;letter-spacing:-.03em}
.shot-modal-blurb{height:3.1em;margin:0 0 16px;overflow:hidden;color:var(--muted);font-size:13px;line-height:1.55}
.shot-modal-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:16px}
.shot-feature-tabs,.shot-match-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%}
.shot-feature-tabs{margin:0 0 16px}
.shot-match-tabs{min-height:21px;margin:-8px 0 16px}
.shot-match-tabs.is-empty{visibility:hidden}
.shot-feature-tab,.shot-match-tab{min-width:0;padding:5px 1px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font-weight:800;font-size:clamp(8px,2vw,11px);line-height:1.1;letter-spacing:-.04em;white-space:nowrap;cursor:pointer}
.shot-feature-tab.active,.shot-match-tab.active{border-color:var(--yellow);background:var(--yellow);color:#12261a}
.shot-tab{min-width:0;padding:13px 3px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);font-weight:800;font-size:clamp(10px,2.6vw,13px);line-height:1.1;white-space:nowrap;cursor:pointer}
.shot-tab.active{background:var(--yellow);color:#12261a;border-color:var(--yellow)}
.shot-modal-body{height:min(58vh,470px)}
.shot-panel{display:flex;flex-direction:column;gap:12px;height:100%;margin:0}
.shot-panel-context{flex:0 0 auto;margin:0;color:var(--yellow);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.shot-panel img{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;border-radius:14px;border:1px solid var(--line);background:#0a2417}
.shot-panel.is-placeholder img{border-style:dashed}
.shot-panel figcaption{flex:0 0 auto;height:3.4em;overflow:hidden;color:#c7d7cd;font-size:13px;line-height:1.7;margin:0}
.shot-feature-link{border:0;background:none;padding:0;color:var(--yellow);font:inherit;font-weight:900;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
@media(max-width:620px){
  .shot-modal-inner{padding:20px 16px;border-radius:16px}
  .shot-modal-tabs{flex-wrap:wrap}
  .shot-feature-tabs{margin-bottom:14px}
  .shot-match-tabs{margin:-8px 0 14px}
  .shot-tab{flex:1 1 calc(50% - 4px)}
  .shot-modal-body{height:min(52vh,380px)}
  .shot-panel figcaption{height:5.1em}
}

/* ── Header, matched to the Kelly Pool and 8 Ball app headers ──────────────
   This is deliberately a fixed-height component. Content must adapt inside
   the bar; it must never wrap and make the navigation taller. */
.topbar{box-sizing:border-box;height:59px;min-height:59px;max-height:59px;padding:0 16px;gap:8px;flex-wrap:nowrap;overflow:hidden;border-bottom-width:3px}
.brand>span:last-child{text-align:center}
.brand b,.brand strong{font-size:1.2rem;font-weight:900;letter-spacing:-.5px}
.brand small{display:block;margin-top:3px;font-size:.62rem;font-weight:900;letter-spacing:.28em}
.status-pill{display:inline-flex!important;flex:0 0 auto;padding:5px 7px;gap:5px;font-size:8px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.status-pill i{flex:0 0 auto;width:5px;height:5px}
@media(max-width:620px){
  .topbar{height:59px;min-height:59px;max-height:59px;padding:0 5px;gap:4px;justify-content:space-between;flex-wrap:nowrap}
  .brand{min-width:0;gap:4px}
  .topbar .brand-mark-img{width:40px;height:40px}
  .brand b,.brand strong{font-size:1rem}
  .brand small{display:none}
  .status-pill{padding:5px 7px;gap:5px;font-size:8px;letter-spacing:.04em}
  .status-pill i{width:5px;height:5px}
}

/* ── Vertical rhythm ───────────────────────────────────────────────────────
   Less air between the opening blurb and Choose your game, and less inside
   each app card above and below the icon. Icon sizes are untouched: the card
   tops come down only to the height of the tallest icon they hold. */
.hero{padding-bottom:34px}
.apps-section{padding-top:34px}
.app-card{padding-top:14px}
.app-card .card-top,.kelly-card .card-top{min-height:150px;margin-bottom:8px}
.app-card .card-top+h3{margin-top:0}
@media(max-width:900px){
  .hero{padding-bottom:30px}
}
@media(max-width:620px){
  .hero{padding:48px 0 24px}
  .apps-section{padding:24px 0 70px}
  .app-card{padding-top:14px}
  .app-card .card-top,.kelly-card .card-top{min-height:138px;margin-bottom:8px}
}

/* One header lockup at every resolution. The secondary caption was removed
   from the markup, so neither the mark nor the wordmark needs a mobile size. */
.topbar .brand-mark-img{width:76px;height:44px;object-fit:contain;transform:none}
.topbar .brand{gap:4px}
.topbar .brand b,.topbar .brand strong{font-size:1rem}
.topbar .brand small{display:none!important}
.topbar .status-pill{padding:4px 3px;gap:3px;font-size:7px;line-height:1;letter-spacing:.02em}
.topbar .status-pill i{width:5px;height:5px}
@media(max-width:620px){.app-grid{grid-template-columns:minmax(0,1fr)}.app-card{min-width:0}}

/* Preserve wheel, touch and keyboard scrolling without visible scrollbars. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

/* CueTracker family lockup: the header and hero use the same two-line
   Cue/Tracker treatment as the game apps. */
.topbar .brand>span:last-child{display:grid;text-align:left;line-height:.88}
.topbar .brand b{color:var(--yellow);font-size:1.05rem;letter-spacing:-.04em}
.topbar .brand strong{color:#061a10;font-size:1.05rem;letter-spacing:-.02em;text-transform:uppercase}
.topbar .status-pill{font-size:11px;letter-spacing:.1em;padding:9px 12px}
.hero-brand-lockup{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.hero-brand-lockup img{display:block;width:174px;height:75px;object-fit:contain}
.hero-brand-lockup span{display:grid;line-height:.88}
.hero-brand-lockup b,.hero-brand-lockup strong{font-size:clamp(32px,4vw,52px);letter-spacing:-.06em}
.hero-brand-lockup b{color:var(--yellow)}
.hero-brand-lockup strong{color:var(--text);text-transform:uppercase}
.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.app-card>p:not(.eyebrow){max-width:none}
@media(max-width:900px){.app-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.topbar .brand b,.topbar .brand strong{font-size:1rem}.topbar .status-pill{font-size:8px;padding:7px 8px}.hero-brand-lockup{gap:10px}.hero-brand-lockup img{width:142px;height:75px}.hero-brand-lockup b,.hero-brand-lockup strong{font-size:34px}.app-grid{grid-template-columns:1fr}}

/* Final family lockup: compact square mark and a two-line hero message that
   stays readable without changing the fixed-height navigation bar. */
.topbar .brand-mark-img{width:40px;height:40px;object-fit:contain;border-radius:8px}
.topbar .brand{gap:6px}
.topbar .brand b,.topbar .brand strong{font-size:1rem}
.hero-brand-lockup{display:grid;justify-items:center;gap:10px;margin:0 auto 16px}
.hero-brand-lockup img{display:block;width:116px;height:116px;object-fit:contain}
.hero-brand-lockup span{display:grid;text-align:center;line-height:.88}
.hero-brand-lockup b,.hero-brand-lockup strong{font-size:clamp(34px,4vw,50px);letter-spacing:-.06em}
.hero-brand-lockup b{color:var(--yellow)}
.hero-brand-lockup strong{color:var(--text);text-transform:uppercase}
.hero-tagline{max-width:560px;margin:0 auto 12px;font-size:clamp(26px,3.5vw,42px);line-height:1.05;letter-spacing:-.055em;text-align:center;text-wrap:balance}
.hero-tagline span{color:var(--yellow)}
.hero-copy>.eyebrow{text-align:center;margin:0 auto 20px}
@media(max-width:620px){
  .topbar .brand-mark-img{width:40px;height:40px}
  .hero-brand-lockup{gap:8px;margin-bottom:14px}
  .hero-brand-lockup img{width:100px;height:100px}
  .hero-brand-lockup b,.hero-brand-lockup strong{font-size:36px}
  .hero-tagline{max-width:340px;font-size:27px}
}

/* Restore the rectangular CueTracker family lockup used by the app headers. */
.topbar .brand-mark-img{width:76px;height:44px;object-fit:contain;border-radius:0;transform:none}
.topbar .brand{gap:4px}
.topbar .brand>span:last-child{display:grid;text-align:left;line-height:.88}
.topbar .brand b{color:var(--yellow);font-size:1.05rem;letter-spacing:-.04em}
.topbar .brand small{display:flex!important;width:100%;justify-content:space-between;margin-top:2px;color:#061a10;font-size:.62rem;font-weight:900;line-height:1.05;letter-spacing:0;text-transform:uppercase}
.topbar .brand small span{flex:1;text-align:center}
.hero-brand-lockup{display:grid;justify-items:center;gap:0;margin:0 auto}
.hero-brand-lockup img{display:block;width:174px;height:75px;object-fit:contain}
.hero h1.hero-title{margin:8px 0 4px;color:var(--yellow);font-size:clamp(32px,4vw,42px);font-weight:900;line-height:1;letter-spacing:-.04em;text-align:center}
.hero-title .home-logo-title{color:var(--yellow)}
.hero-title .home-logo-tracker{color:var(--red);font-size:.65em;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;vertical-align:middle;position:relative;top:-2px}
.hero p.hero-tagline{max-width:300px;margin:6px auto 18px;color:var(--muted);font-size:14px;line-height:1.5;letter-spacing:0;text-align:center;text-wrap:balance}
.hero-copy>.eyebrow{display:none}
@media(max-width:620px){
  .topbar .brand-mark-img{width:76px;height:44px}
  .topbar .brand small{font-size:.62rem}
  .hero-brand-lockup img{width:142px;height:75px}
  .hero h1.hero-title{font-size:34px}
  .hero-title .home-logo-tracker{font-size:.65em;letter-spacing:1.8px}
  .hero p.hero-tagline{max-width:280px;font-size:13px;margin-bottom:16px}
}

/* Keep the tagline below the logo at the intended two-line information size. */
.hero h1.hero-tagline{font-size:clamp(26px,3.5vw,42px)!important;line-height:1.05!important;margin:0 auto 12px!important}
.hero h1.hero-tagline span{display:block}
@media(max-width:620px){.hero h1.hero-tagline{font-size:27px!important}}

/* Directory layout: only a true 2x2 grid or a true 1x4 stack. */
.app-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row}
.hero-brand-lockup img{width:230px;height:100px}
@media(max-width:760px){
  .app-grid{grid-template-columns:1fr}
  .hero-brand-lockup img{width:190px;height:83px}
}
@media(max-width:420px){.hero-brand-lockup img{width:180px;height:78px}}

/* Match Kelly Pool's centered app name and exact TRACKER lettering. */
.topbar .brand b{font-size:1.2rem;font-weight:900;letter-spacing:-.5px;text-align:center}
.topbar .brand small{font-size:.62rem;line-height:1.3;font-weight:800;margin-top:1px}
/* Final cross-site parity: center the CueTracker hero and keep the directory
   at exactly two columns or one full-width column. */
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy .lede,.hero-copy .venue-note{margin-left:auto;margin-right:auto}
.hero-copy .feature-strip{justify-content:center}
.app-card h3{text-align:center}
.app-card h3 .tracker-name{display:inline-block;color:var(--red);font-size:.62em;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;vertical-align:middle;position:relative;top:-2px}
.snooker-card{grid-column:auto!important}
.topbar .brand>span:last-child{align-items:center;text-align:center}
.topbar .brand small{font-size:.62rem;line-height:1.3;font-weight:800;letter-spacing:0;margin-top:1px;color:#000}
@media(max-width:760px){.app-grid{grid-template-columns:1fr}}

/* Product status belongs to the card, rather than competing with its mark. */
.app-card{position:relative}
.app-card .card-top{justify-content:center}
.app-card .card-top>.live-pill,.app-card .card-top>.wip-pill{position:absolute;top:12px;right:12px;z-index:1}
.footer-contact{color:var(--yellow);font-weight:800;text-decoration:none}
.footer-contact:hover{text-decoration:underline;text-underline-offset:3px}
.about-venue-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:var(--yellow);font-weight:900;text-decoration:none}.about-venue-link:hover{text-decoration:underline;text-underline-offset:3px}.about-supplement h2{margin-top:0}.about-supplement p{color:var(--muted);line-height:1.6}
.about-header-actions{display:flex;align-items:center;gap:10px}.about-game-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.about-game-types h2{grid-column:1/-1}.about-game-types>div{padding:13px;border:1px solid var(--line);border-radius:12px;background:rgba(3,27,16,.3)}.about-game-types h3{margin:0 0 6px;color:var(--yellow);font-size:15px}.about-game-types p{margin:0;font-size:13px}@media(max-width:620px){.about-topbar .back-link{display:none}.about-header-actions{gap:0}.about-topbar .status-pill{display:inline-flex!important}.about-game-types{grid-template-columns:1fr}}

/* Shared CueTracker responsive foundation: phone, tablet, desktop. */
:root{--responsive-page-gutter:12px;--responsive-content-max:600px;--responsive-control-height:44px;--responsive-control-gap:8px;--responsive-panel-space:16px}
html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}.button:not(.small),.google-button,input:not([type="checkbox"]):not([type="radio"]),select,textarea{min-height:var(--responsive-control-height)}main,.about-shell{width:min(var(--responsive-content-max),calc(100% - (var(--responsive-page-gutter) * 2)))}
@media (min-width:600px) and (max-width:1199px){:root{--responsive-page-gutter:24px;--responsive-content-max:960px;--responsive-control-height:46px;--responsive-control-gap:12px;--responsive-panel-space:22px}.button:not(.small){padding-inline:20px}.about-live-content>.card,.about-live-content>.panel,.about-live-content>.about-card{padding:var(--responsive-panel-space)}}
@media (min-width:600px) and (max-width:1199px) and (orientation:portrait){.app-grid{grid-template-columns:1fr}.promise-panel{grid-template-columns:1fr}}
@media (min-width:600px) and (max-width:1199px) and (orientation:landscape){.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){:root{--responsive-page-gutter:32px;--responsive-content-max:1200px;--responsive-control-height:48px;--responsive-control-gap:14px;--responsive-panel-space:28px}.button:not(.small){padding-inline:22px}.about-live-content>.card,.about-live-content>.panel,.about-live-content>.about-card{padding:var(--responsive-panel-space)}}