/* Alley Cat identity
   Brief: a bright 1960s bowling alley on a Saturday afternoon. Maple lanes, chrome gutters, a turquoise masking
   unit with a hot-pink neon script sign, atomic starbursts and boomerangs on a cream carpet. Light and cheerful,
   never the dark "cosmic bowling" look. Type: Yellowtail (neon script) for the wordmark and big marks,
   Bowlby One (chunky sign lettering) for numbers and buttons, Bricolage Grotesque (kit) for UI text.
   Motion: springy, a little showy, like a jukebox. Sound: rumble, clonk, jukebox stings. */
@font-face{font-family:"Yellowtail";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/yellowtail-latin.woff2) format("woff2")}
@font-face{font-family:"Bowlby One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bowlby-one-latin.woff2) format("woff2")}
:root{
  --ac-teal:#2ec4b6;--ac-teal-deep:#14857b;--ac-pink:#ff4f9a;--ac-pink-soft:#ff9cc6;--ac-gold:#ffc93c;--ac-tomato:#ff6f59;
  --ac-cream:#fff7e6;--ac-maple:#f0d29b;--ac-ink:#23192b;--ac-plum:#4a2b5e;
  --ac-script:"Yellowtail","Brush Script MT",cursive;--ac-sign:"Bowlby One",Impact,"Arial Black",sans-serif;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  --carpet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M20 40q25-28 50 0' stroke='%232ec4b6' stroke-width='7' opacity='.35'/%3E%3Cpath d='M110 130q25-28 50 0' stroke='%23ff6f59' stroke-width='7' opacity='.3'/%3E%3C/g%3E%3Cg opacity='.5'%3E%3Cpath d='M135 35l3 9 9 3-9 3-3 9-3-9-9-3 9-3z' fill='%23ffc93c'/%3E%3Cpath d='M45 120l2.4 7 7 2.4-7 2.4-2.4 7-2.4-7-7-2.4 7-2.4z' fill='%23ff4f9a'/%3E%3C/g%3E%3Ccircle cx='90' cy='80' r='5' fill='%237b4bb3' opacity='.25'/%3E%3Ccircle cx='160' cy='165' r='3.5' fill='%232ec4b6' opacity='.4'/%3E%3Ccircle cx='15' cy='160' r='3' fill='%23ff6f59' opacity='.35'/%3E%3C/svg%3E");
}
html,body{background:var(--ac-cream);overscroll-behavior:none}
body{color:var(--ac-ink)}
body.game-mode{position:fixed;inset:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
[hidden]{display:none!important}

/* ---------------- menu ---------------- */
#menu{min-height:100vh;background:radial-gradient(900px 500px at 50% -160px,rgba(46,196,182,.28),rgba(46,196,182,0) 70%),var(--carpet),var(--ac-cream);background-size:auto,180px 180px,auto}
.menu-wrap{max-width:560px;margin:0 auto;padding:calc(14px + var(--safe-t)) 20px calc(40px + var(--safe-b))}
.top{display:flex;justify-content:space-between;align-items:center;min-height:36px}
.back{font:600 14px var(--display);color:var(--muted);text-decoration:none;padding:8px 0}
.me{font:600 14px var(--display);color:var(--muted)}
.brand{text-align:center;margin:4px 0 10px}
.mark{width:min(62vw,240px);height:auto;display:block;margin:0 auto -6px;overflow:visible}
.mark .spark{transform-box:fill-box;transform-origin:center;animation:spark 2.8s ease-in-out infinite}
@keyframes spark{0%,60%,100%{opacity:0;transform:translate(140px,104px) scale(.2)}70%{opacity:1;transform:translate(140px,104px) scale(1.2) rotate(25deg)}84%{opacity:0;transform:translate(140px,104px) scale(.5) rotate(45deg)}}
.wordmark{font:400 clamp(74px,22vw,118px)/.95 var(--ac-script);margin:0;color:var(--ac-pink);letter-spacing:.01em;
  text-shadow:0 0 1px #fff,0 0 10px rgba(255,79,154,.55),0 0 26px rgba(255,79,154,.35),0 3px 0 #b8226a;animation:neon 6s steps(1) infinite}
@keyframes neon{0%,93%,100%{opacity:1}94%{opacity:.55}95%{opacity:1}96.5%{opacity:.7}}
.tagline{font:400 15px/1.3 var(--ac-sign);color:var(--ac-teal-deep);margin:4px 0 0;letter-spacing:.04em;text-transform:uppercase}

.h2h{background:#fffdf8;border-radius:20px;box-shadow:var(--shadow);padding:14px 16px;margin:0 0 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.h2h .who{font:700 15px var(--display)}
.h2h .who.r{text-align:right}
.h2h .n{font:400 44px/.9 var(--ac-sign);font-variant-numeric:tabular-nums}
.h2h .n.sp{color:var(--you)}.h2h .n.sv{color:var(--them);text-align:right}
.h2h .mid{font:600 12px var(--display);color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.12em}
.h2h .streak,.h2h .bests{grid-column:1/-1;text-align:center;font:500 13px var(--display);color:var(--muted)}
.h2h .bests b{color:var(--ac-ink)}
.board{background:#fffdf8;border-radius:20px;box-shadow:var(--shadow);padding:12px 16px;margin:0 0 14px}
.board h4{margin:2px 0 6px;font:400 13px var(--ac-sign);letter-spacing:.08em;text-transform:uppercase;color:var(--ac-teal-deep)}
.board ol{margin:0;padding-left:24px;font:600 15px/1.65 var(--display)}
.board li span{float:right;font:400 15px var(--ac-sign);color:var(--ac-pink)}
.board .mine{font:500 13px var(--display);color:var(--muted);margin:6px 0 0}

.choices{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.big{appearance:none;border:0;text-align:left;border-radius:20px;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:3px;
  background:#fffdf8;color:var(--ac-ink);box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 rgba(0,0,0,.05);transition:transform .15s ease;touch-action:manipulation}
.big:active{transform:scale(.98)}
.big b{font:800 20px/1.1 var(--display);letter-spacing:-.01em}
.big small{font:500 14px/1.3 var(--display);color:var(--muted)}
.big.primary{background:linear-gradient(135deg,#ff6aa8,var(--ac-pink) 50%,#e2337f);color:#fff;box-shadow:0 12px 26px -12px rgba(226,51,127,.75),inset 0 1px 0 rgba(255,255,255,.35)}
.big.primary small{color:rgba(255,255,255,.88)}
.big.primary b{font:400 26px/1 var(--ac-sign);letter-spacing:.01em}
.big.join{background:var(--ac-teal);color:#fff;box-shadow:0 10px 26px -12px rgba(20,133,123,.7)}
.big.join small{color:rgba(255,255,255,.85)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;background:#fffdf8;border-radius:20px;box-shadow:inset 0 0 0 1.5px var(--line);padding:12px 14px}
.opt{min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.opt .lbl{font:400 12px var(--ac-sign);letter-spacing:.08em;text-transform:uppercase;color:var(--ac-teal-deep);min-width:58px}
.seg{display:flex;gap:4px;background:#f1eadc;border-radius:999px;padding:3px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
.seg::-webkit-scrollbar{display:none}
.seg button{appearance:none;border:0;background:transparent;border-radius:999px;padding:7px 11px;font:700 14px var(--display);color:var(--muted);cursor:pointer;white-space:nowrap;touch-action:manipulation}
.seg button.on{background:#fff;color:var(--ac-ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.seg.weights button{padding:7px 8px;font:400 13px var(--ac-sign);min-width:32px}
.seg.weights button.on{background:var(--ac-gold)}
.seg.big{background:#f1eadc;flex-wrap:wrap;justify-content:center;border-radius:18px}
.seg.big button{font-size:16px;padding:10px 12px}
.tog{cursor:pointer}
.tog input{position:absolute;opacity:0;pointer-events:none}
.tog .sw{width:42px;height:26px;border-radius:999px;background:#d9d0c0;position:relative;transition:background .2s;flex:none}
.tog .sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.tog input:checked + .sw{background:var(--ac-teal)}
.tog input:checked + .sw::after{transform:translateX(16px)}
.tog small{font:500 13px var(--display);color:var(--muted)}
.tog input:focus-visible + .sw{outline:3px solid var(--teal);outline-offset:2px}
.joinform,.guestname{display:flex;gap:8px;align-items:center;justify-content:center;font:600 14px var(--display);color:var(--muted)}
.joinform input,.guestname input{width:120px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:#fffdf8;font:700 16px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ac-ink)}
.guestname input{width:180px;letter-spacing:0;text-transform:none}
.howto{margin:22px 0 0;background:#fffdf8;border-radius:18px;box-shadow:inset 0 0 0 1.5px var(--line);padding:4px 16px}
.howto summary{font:700 16px var(--display);padding:12px 0;cursor:pointer}
.howto ol{margin:0 0 14px;padding-left:20px;font-size:15px;line-height:1.5}
.howto li{margin:6px 0}
.foot{margin-top:26px;text-align:center;color:var(--muted);font:400 22px var(--ac-script)}

/* ---------------- waiting ---------------- */
#wait{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(700px 400px at 50% 0,rgba(46,196,182,.25),rgba(46,196,182,0) 70%),var(--carpet),var(--ac-cream);background-size:auto,180px 180px,auto}
.wait-card{max-width:440px;width:100%;text-align:center;display:grid;gap:12px}
.kicker{font:400 12px/1 var(--ac-sign);letter-spacing:.16em;text-transform:uppercase;color:var(--ac-teal-deep);margin:0}
.wait-card h2{font:400 52px/1 var(--ac-script);margin:0;color:var(--ac-pink);text-shadow:0 0 14px rgba(255,79,154,.35)}
.wait-card p{margin:0;color:var(--muted);font:500 16px/1.4 var(--display)}
.dots{display:flex;gap:7px;justify-content:center}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--ac-teal);animation:bob 1.1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s;background:var(--ac-pink)}.dots i:nth-child(3){animation-delay:.3s;background:var(--ac-gold)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.invite{display:flex;gap:8px;margin-top:6px}
.invite input{flex:1;min-width:0;padding:12px;border-radius:14px;border:1.5px solid var(--line);background:#fffdf8;font:600 14px var(--sans);color:var(--ac-ink)}
.invite .g-btn{background:var(--ac-pink)}
#waitCancel{justify-self:center}

/* ---------------- game ---------------- */
#game{position:fixed;inset:0;background:#ffe2c2}
#cv{position:absolute;left:0;top:0;touch-action:none}
.sheet-top{position:absolute;left:0;right:0;top:0;padding:calc(6px + var(--safe-t)) calc(6px + var(--safe-r)) 6px calc(6px + var(--safe-l));pointer-events:auto;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,247,230,.97),rgba(255,247,230,.9));box-shadow:0 6px 18px -12px rgba(35,25,43,.5);border-bottom:2px solid var(--ac-teal)}
.sc{display:grid;grid-template-columns:18px repeat(9,minmax(0,1fr)) minmax(0,1.6fr) minmax(0,1.3fr);gap:0;font-variant-numeric:tabular-nums;max-width:640px;margin:0 auto}
.sc + .sc{margin-top:3px}
.sc .who{display:grid;place-items:center}
.sc .who i{width:12px;height:12px;border-radius:50%;background:var(--pc,#999);box-shadow:0 0 0 2px #fff}
.sc.turn .who i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pc,#999)}
.sc.off .who i{opacity:.4}
.fr{border:1px solid #d9c9ad;margin-left:-1px;background:#fffdf8;height:34px;display:grid;grid-template-rows:15px 1fr;min-width:0}
.fr .rl{display:flex;justify-content:flex-end}
.fr .rl b{width:14px;height:15px;border-left:1px solid #e3d5bc;border-bottom:1px solid #e3d5bc;font:800 10.5px/15px var(--display);text-align:center;color:var(--ac-ink)}
.fr .rl b.x{color:#fff;background:var(--ac-pink);font:400 10px/15px var(--ac-sign)}
.fr .rl b.sp{color:var(--ac-teal-deep);font:900 12px/15px var(--display)}
.fr .rl b.split{border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ac-tomato);color:#c53b26}
.fr .rl b.paw{position:relative}
.fr .rl b.paw::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-radius:50%;background:#8f8578;box-shadow:0 0 0 1px #fff}
.fr .tot{font:400 11.5px/17px var(--ac-sign);text-align:center;color:var(--ac-ink);overflow:hidden;white-space:nowrap}
.fr.now{background:#fff3bf;border-color:var(--ac-gold)}
.fr.tenth .rl b{width:13px}
.fr.total{background:var(--ac-teal);border-color:var(--ac-teal-deep);color:#fff;display:grid;place-items:center;grid-template-rows:1fr}
.fr.total .tot{font:400 15px/1 var(--ac-sign);color:#fff}
.fr.total small{display:block;font:600 8px/1 var(--display);opacity:.85;letter-spacing:.06em;text-transform:uppercase;text-align:center;margin-top:1px}
.sc .nm{display:none}
#bigScores .sc .who,#overScores .sc .who{display:grid;place-items:center}
#bigScores .fr,#overScores .fr{height:42px;grid-template-rows:19px 1fr}
#bigScores .fr .rl b,#overScores .fr .rl b{width:16px;height:19px;line-height:19px;font-size:12px}
#bigScores .fr.tenth .rl b,#overScores .fr.tenth .rl b{width:14px}
#bigScores .fr .tot,#overScores .fr .tot{font:800 13px/21px var(--display);letter-spacing:-.02em}
#bigScores .fr.total,#overScores .fr.total{grid-template-rows:1fr}
#bigScores .fr.total .tot,#overScores .fr.total .tot{font:400 16px/1.1 var(--ac-sign)}
#bigScores .frno,#overScores .frno{display:grid;grid-template-columns:18px repeat(9,minmax(0,1fr)) minmax(0,1.6fr) minmax(0,1.3fr);font:400 10px var(--ac-sign);color:var(--muted);text-align:center;margin-bottom:2px;max-width:640px;margin-left:auto;margin-right:auto}

.iconbtn{position:absolute;right:calc(8px + var(--safe-r));width:40px;height:40px;border-radius:14px;border:0;background:rgba(255,253,248,.94);
  box-shadow:0 6px 16px -10px rgba(40,20,10,.45);display:grid;place-items:center;color:var(--ac-ink);cursor:pointer;touch-action:manipulation;z-index:3}
.iconbtn svg{width:22px;height:22px}
.status{position:absolute;left:calc(8px + var(--safe-l));font:700 13px/1.25 var(--display);color:var(--ac-ink);background:rgba(255,253,248,.95);
  padding:7px 13px;border-radius:999px;box-shadow:0 6px 16px -10px rgba(40,20,10,.45);white-space:nowrap;max-width:calc(100vw - 72px);overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:opacity .2s ease}
.status:empty{opacity:0}
.bottom{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:8px;padding:0 calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l));pointer-events:none}
.bottom > *{pointer-events:auto}
.chip{appearance:none;border:0;display:inline-flex;align-items:center;gap:7px;padding:8px 12px 8px 8px;border-radius:999px;background:rgba(255,253,248,.95);box-shadow:0 6px 16px -10px rgba(40,20,10,.5);font:400 14px var(--ac-sign);color:var(--ac-ink);cursor:pointer;touch-action:manipulation}
.chip i{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 45%),var(--bc,#e4572e);box-shadow:inset -2px -3px 4px rgba(0,0,0,.3)}
.chip[disabled]{opacity:.5}
.hint{margin:0 0 6px;text-align:center;font:700 13px/1.3 var(--display);color:var(--ac-plum);text-shadow:0 1px 0 rgba(255,255,255,.8);pointer-events:none}
.pindiag{display:grid;grid-template-columns:repeat(7,8px);grid-template-rows:repeat(4,9px);gap:0;padding:8px 9px;border-radius:14px;background:rgba(255,253,248,.95);box-shadow:0 6px 16px -10px rgba(40,20,10,.5);pointer-events:none}
.pindiag i{width:8px;height:8px;border-radius:50%;background:#e3dccf;box-shadow:inset 0 0 0 1.5px #cfc5b3}
.pindiag i.up{background:#fff;box-shadow:inset 0 0 0 2px var(--ac-tomato)}
.readout{position:absolute;left:50%;transform:translateX(-50%);margin:0;font:400 12px var(--ac-sign);letter-spacing:.05em;color:var(--ac-teal-deep);background:rgba(255,253,248,.88);padding:5px 11px;border-radius:999px;pointer-events:none;white-space:nowrap;transition:opacity .3s}
.readout:empty{opacity:0}

.banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;text-align:center;transition:opacity .2s ease;z-index:4;white-space:nowrap}
.banner span{display:block;font:400 clamp(54px,17vw,104px)/1 var(--ac-script);color:#fff;
  text-shadow:0 0 2px #fff,0 0 12px var(--ac-pink),0 0 28px var(--ac-pink),0 0 48px rgba(255,79,154,.8),0 4px 0 #b8226a}
.banner small{display:block;margin-top:2px;font:400 15px var(--ac-sign);letter-spacing:.06em;text-transform:uppercase;color:var(--ac-plum);text-shadow:0 1px 0 #fff,0 0 8px #fff}
.banner.show{opacity:1;animation:pop .55s cubic-bezier(.2,1.6,.4,1) forwards}
.banner.soft span{font-size:clamp(40px,12vw,72px);text-shadow:0 0 2px #fff,0 0 10px var(--ac-teal),0 0 22px var(--ac-teal),0 3px 0 var(--ac-teal-deep)}
.banner.split span{text-shadow:0 0 2px #fff,0 0 10px var(--ac-tomato),0 0 22px var(--ac-tomato),0 3px 0 #a3301f}
.banner.turkey span::after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.12em;vertical-align:-.04em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg%3E%3Cpath d='M32 34 8 22a26 26 0 0 1 8-14z' fill='%23ff6f59'/%3E%3Cpath d='M32 34 16 8a26 26 0 0 1 16-6z' fill='%23ffc93c'/%3E%3Cpath d='M32 34V2a26 26 0 0 1 16 6z' fill='%232ec4b6'/%3E%3Cpath d='M32 34 48 8a26 26 0 0 1 8 14z' fill='%23ff4f9a'/%3E%3Cellipse cx='32' cy='42' rx='15' ry='14' fill='%238a5a3c'/%3E%3Ccircle cx='32' cy='25' r='8' fill='%23a87250'/%3E%3Ccircle cx='29.5' cy='23.5' r='1.6' fill='%23222'/%3E%3Cpath d='M34 26l6 2-6 2z' fill='%23ffc93c'/%3E%3Cpath d='M31 29q-2 6 1 8' stroke='%23e8323a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.4) rotate(-6deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(-3deg)}}

.sheet-bg{position:absolute;inset:0;background:rgba(35,25,43,.32);display:grid;place-items:end center;z-index:10;padding:0 0 calc(8px + var(--safe-b))}
.sheet{width:min(520px,calc(100vw - 16px));background:#fffdf8;border-radius:24px;padding:18px 18px 16px;box-shadow:0 20px 50px -18px rgba(35,25,43,.6);display:grid;gap:12px;max-height:88vh;overflow:auto}
.sheet.wide{width:min(720px,calc(100vw - 12px))}
.sheet h3{margin:0;font:400 34px/1 var(--ac-script);color:var(--ac-pink)}
.sheet .row{display:flex;gap:8px;flex-wrap:wrap}
.sheet .row .g-btn{flex:1}
.sheet .close{width:100%}
.sheet .note{margin:0;color:var(--muted);font:500 14px var(--display)}
.tog.line{display:flex;align-items:center;gap:10px;font:600 15px var(--display)}
.tog.line input{position:static;opacity:1;pointer-events:auto;width:20px;height:20px;accent-color:var(--ac-teal)}
.over{place-items:center}
.overcard{text-align:center;justify-items:center}
.overcard h3{font-size:58px;text-shadow:0 0 14px rgba(255,79,154,.3)}
.overcard #overWhy{margin:0;font:500 16px var(--display);color:var(--muted)}
.overcard #overScores{width:100%}
.badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.badges span{font:400 12px var(--ac-sign);letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--ac-gold);color:var(--ac-ink)}
.badges span.pb{background:var(--ac-pink);color:#fff}
.tally{font:600 14px var(--display);color:var(--muted)}
.tally b{color:var(--ac-ink);font:400 16px var(--ac-sign)}
.g-btn{font-family:var(--display)}
.overcard .g-btn:not(.ghost){background:var(--ac-pink)}

@media (min-width:700px){.fr{height:40px;grid-template-rows:18px 1fr}.fr .rl b{width:17px;height:18px;line-height:18px;font-size:12px}.fr .tot{font-size:14px;line-height:20px}}
@media (prefers-reduced-motion:reduce){.wordmark,.mark .spark,.dots i{animation:none}.banner.show{animation:none;transform:translate(-50%,-50%)}}

/* Game format selector */
#variant { max-width: 100%; padding: .55rem; border: 1px solid currentColor; border-radius: .5rem; background: #fffaf0; color: #302b27; font: inherit; }