:root{
  --paper:#f7efdf;
  --paper-2:#efe3cc;
  --ink:#201a17;
  --ink-soft:#5a4d44;
  --a:#e8412c;       /* red rubber */
  --a-light:#ffd3c9;
  --b:#2a5bd7;       /* blue rubber */
  --b-light:#cfdcff;
  --ball:#ff8f1f;
  --table:#1e7a57;
  --wood:#c98b4b;
  --butter:#ffd84d;
  --cheek:#ff9fb2;

  --display:"Bagel Fat One", "Arial Black", sans-serif;
  --hand:"Patrick Hand", "Comic Sans MS", cursive;

  --s-1:1rem; --s0:1.2rem; --s1:1.5rem; --s2:2rem; --s3:2.8rem; --s4:4rem;
  --line:3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--hand);
  font-size:var(--s0);
  line-height:1.35;
  overflow-x:hidden;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
h2{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--s2);
  line-height:1;
  margin:0 0 .7rem;
}

/* ---------- hero ---------- */
.hero{
  padding:22px 16px 8px;
  max-width:1100px;
  margin:0 auto;
  display:grid;
  gap:4px;
}
.shout{
  font-family:var(--display);
  font-weight:400;
  margin:0;
  line-height:.86;
  letter-spacing:.01em;
  font-size:clamp(3.6rem, 21vw, 9.5rem);
  color:var(--ink);
}
.shout .line{display:block}
.shout .l1{color:var(--a); transform:rotate(-3deg); transform-origin:left bottom}
.shout .l2{margin-left:.5em}
.shout{container-type:inline-size}
.shout .l3{font-size:16.5cqi; white-space:nowrap; color:var(--ink); margin-top:.08em}
.shout .ch{
  display:inline-block;
  text-shadow:.045em .045em 0 var(--butter), .07em .07em 0 var(--ink);
  animation:bob 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i) * -0.13s);
  transition:transform .2s;
}
.shout .l1 .ch{text-shadow:.045em .045em 0 var(--ink)}
.shout .ch.boing{animation:boing .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-.04em) rotate(calc((var(--i) - 4) * .6deg))}
}
@keyframes boing{
  0%{transform:scale(1,1)}
  30%{transform:scale(1.25,.7) translateY(.08em)}
  60%{transform:scale(.85,1.2) translateY(-.15em)}
  100%{transform:scale(1,1)}
}

.tally-wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:44px; margin-top:6px}
.tally{height:44px; width:auto; max-width:100%; overflow:visible}
.tally path{
  fill:none; stroke:var(--ink); stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:60; stroke-dashoffset:60;
  animation:draw .25s ease-out forwards;
}
.tally path.strike{stroke:var(--a)}
@keyframes draw{to{stroke-dashoffset:0}}
.tally-note{margin:0; font-size:var(--s-1); color:var(--ink-soft)}

.stage{margin:4px -6px 0}
#scene{width:100%; height:auto; display:block; overflow:visible}
.scribble{fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linecap:round; opacity:.5}
.table .top{fill:var(--table); stroke:var(--ink); stroke-width:3.5; stroke-linejoin:round}
.table .edge{fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round}
.table .leg{stroke:var(--ink); stroke-width:6; stroke-linecap:round}
.table .leg.back{stroke-width:4.5; opacity:.55}
.table .post{stroke:var(--ink); stroke-width:3; stroke-linecap:round}
.table .net{fill:#fff; stroke:var(--ink); stroke-width:2.5}
.table .mesh{stroke:var(--ink); stroke-width:1.2; opacity:.6}

.paddle .face{stroke:var(--ink); stroke-width:4}
.paddle.a .face{fill:var(--a)}
.paddle.b .face{fill:var(--b)}
.paddle .handle{fill:var(--wood); stroke:var(--ink); stroke-width:4}
.paddle .white{fill:#fff; stroke:var(--ink); stroke-width:2.5}
.paddle .pupil{fill:var(--ink); transition:transform .08s linear}
.paddle .cheek{fill:var(--cheek); opacity:.8}
.paddle .mouth{fill:none; stroke:var(--ink); stroke-width:3.5; stroke-linecap:round; transition:d .3s}
.paddle .sweat{fill:none; stroke:#7cc6ff; stroke-width:4; stroke-linecap:round; opacity:0}
.paddle .swing{transform-box:fill-box; transform-origin:50% 90%; transition:transform .12s ease-out}
.paddle.a .swing.hit{transform:rotate(22deg) scale(1.06)}
.paddle.b .swing.hit{transform:rotate(-22deg) scale(1.06)}
.paddle .swing.cheer{animation:cheer 1.1s cubic-bezier(.3,1.6,.5,1)}
@keyframes cheer{
  0%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-38px) rotate(-12deg) scale(1.1)}
  55%{transform:translateY(-30px) rotate(370deg) scale(1.12)}
  80%{transform:translateY(4px) rotate(360deg) scale(1.15,.88)}
  100%{transform:translateY(0) rotate(360deg)}
}
.paddle .swing.sulk{animation:sulk 1.4s ease-in-out}
.paddle .swing.sulk .sweat{animation:sweat 1.4s ease-out}
@keyframes sulk{0%,100%{transform:none}20%,80%{transform:translateY(8px) rotate(-8deg) scale(.95,.92)}}
@keyframes sweat{0%{opacity:0; transform:translateY(0)}20%{opacity:1}100%{opacity:0; transform:translateY(16px)}}

.ball{fill:var(--ball); stroke:var(--ink); stroke-width:2.6}
.ball-shadow{fill:var(--ink); opacity:.25}
.pok{
  font-family:var(--hand); font-size:15px; fill:var(--ink);
  opacity:0; pointer-events:none;
}
.pok.show{animation:pok .5s ease-out}
@keyframes pok{0%{opacity:0; transform:translateY(0)}20%{opacity:1}100%{opacity:0; transform:translateY(-14px)}}

.verdict{
  font-size:var(--s1);
  margin:2px 0 0;
  max-width:28ch;
  line-height:1.15;
}
.verdict b{font-weight:400; padding:0 .15em; border-radius:4px 8px 5px 9px}
.verdict .pa{background:var(--a-light)}
.verdict .pb{background:var(--b-light)}

/* ---------- main ---------- */
main{
  max-width:1100px;
  margin:0 auto;
  padding:8px 16px 24px;
  display:grid;
  gap:34px;
}

/* scoreboard face-off */
.board{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:end;
  gap:6px;
  position:relative;
}
.side{
  position:relative;
  text-align:center;
  padding:22px 8px 14px;
  border:var(--line) solid var(--ink);
  background:#fffaf0;
}
.side.a{border-radius:26px 14px 30px 12px / 18px 26px 14px 30px; transform:rotate(-1.6deg); box-shadow:5px 6px 0 var(--a)}
.side.b{border-radius:14px 28px 12px 30px / 26px 14px 28px 16px; transform:rotate(1.4deg); box-shadow:-5px 6px 0 var(--b)}
.side{min-width:0}
.side .name{
  position:relative; z-index:2;
  border:0; background:none; padding:6px 8px; min-height:40px;
  font-family:var(--display); font-size:var(--s1);
  line-height:1; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:underline wavy transparent;
  text-underline-offset:5px;
}
.side .name:hover,.side .name:focus-visible{text-decoration-color:currentColor; outline:none}
.side.a .name{color:var(--a)}
.side.b .name{color:var(--b)}
.side .big{
  position:relative; z-index:1; pointer-events:none;
  font-family:var(--display);
  font-size:clamp(4.2rem, 22vw, 7.5rem);
  line-height:.9;
  margin-top:4px;
}
.side .big.bump{animation:boing .6s cubic-bezier(.3,1.8,.5,1)}
.side .unit{font-size:var(--s-1); margin-top:-2px}
.side .games{font-size:var(--s-1); color:var(--ink-soft); margin-top:4px}
.side .games b{font-weight:400; color:var(--ink)}
.crown{
  position:absolute; top:-26px; left:50%; width:54px;
  transform:translateX(-50%) rotate(-8deg) scale(0);
  transition:transform .45s cubic-bezier(.3,1.8,.5,1);
}
.crown path{fill:var(--butter); stroke:var(--ink); stroke-width:3.5; stroke-linejoin:round}
.side.lead .crown{transform:translateX(-50%) rotate(-8deg) scale(1)}
.side.b.lead .crown{transform:translateX(-50%) rotate(8deg) scale(1)}
.vs{
  font-family:var(--display); font-size:var(--s1);
  align-self:center; transform:rotate(-10deg);
  background:var(--butter); border:var(--line) solid var(--ink);
  border-radius:50%; width:52px; height:52px; display:grid; place-items:center;
  z-index:1; margin:0 -14px; padding-bottom:4px;
}
.rename-hint{grid-column:1/-1; text-align:center; margin:4px 0 0; font-size:var(--s-1); color:var(--ink-soft)}

/* logger */
.logger{
  background:var(--table);
  color:#fff;
  border:var(--line) solid var(--ink);
  border-radius:20px 34px 18px 30px / 30px 18px 34px 20px;
  padding:20px 16px 18px;
  box-shadow:6px 7px 0 var(--ink);
  position:relative;
}
.scores::before{ /* centre line of the table */
  content:""; position:absolute; left:50%; top:-8px; bottom:-8px;
  border-left:2px dashed rgba(255,255,255,.35);
  pointer-events:none;
}
.logger h2{position:relative; color:#fff; text-shadow:3px 3px 0 var(--ink)}
.date-stub{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--butter); color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:10px 16px 10px 14px;
  padding:4px 10px 4px 14px;
  transform:rotate(-2deg);
  margin-bottom:16px;
}
.date-stub span{font-family:var(--display); font-size:var(--s0)}
.date-stub input{
  border:0; background:transparent; font-size:var(--s-1); padding:4px 0;
  min-width:0; color:var(--ink);
}
.scores{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:4px;
}
.col{display:grid; justify-items:center; gap:6px}
.who{
  font-family:var(--display); font-size:var(--s0); line-height:1;
  padding:3px 10px 5px; border-radius:999px 999px 999px 999px / 60% 70% 60% 70%;
  border:2px solid var(--ink); color:#fff;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.col.a .who{background:var(--a)}
.col.b .who{background:var(--b)}
.num-wrap{display:grid; grid-template-columns:auto auto; gap:8px 10px; justify-content:center}
.num-wrap input{grid-column:1 / -1; grid-row:1; justify-self:center}
.num-wrap .step[data-d="-1"]{grid-row:2; grid-column:1}
.num-wrap .step[data-d="1"]{grid-row:2; grid-column:2}
.num-wrap input{
  width:2.1em; text-align:center;
  font-family:var(--display); font-size:3.4rem; line-height:1;
  padding:6px 0 2px;
  background:#fff; color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:16px 12px 18px 10px;
}
.num-wrap input:focus{outline:4px solid var(--butter); outline-offset:1px}
.step{
  width:50px; height:44px; border-radius:46% 54% 50% 50% / 54% 48% 52% 46%;
  border:2px solid var(--ink); background:rgba(255,255,255,.92); color:var(--ink);
  font-size:1.6rem; line-height:1; padding:0 0 3px;
  touch-action:manipulation;
}
.step:active{transform:scale(.88)}
.won{
  border:0; background:none; color:#fff; padding:4px 8px;
  font-size:var(--s-1); text-decoration:underline; text-underline-offset:3px;
}
.dash{font-family:var(--display); font-size:var(--s2); color:#fff; margin-top:20px}
.form-note{position:relative; min-height:1.4em; margin:10px 0 8px; text-align:center; font-size:var(--s-1); color:var(--butter)}
.slam{
  position:relative;
  display:block; width:100%;
  font-family:var(--display); font-size:var(--s1);
  padding:12px 16px 14px;
  background:var(--ball); color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:16px 22px 14px 24px / 22px 14px 24px 16px;
  box-shadow:4px 5px 0 var(--ink);
  transition:transform .08s, box-shadow .08s;
  touch-action:manipulation;
}
.slam:active{transform:translate(3px,4px); box-shadow:1px 1px 0 var(--ink)}
.slam.small{width:auto; font-size:var(--s0); padding:8px 18px 10px}
.slam.warn{background:var(--butter)}

.today-strip{position:relative; margin-top:18px}
.today-title{margin:0 0 8px; font-size:var(--s0)}
.chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 4px 3px 12px; border-radius:999px;
  border:2px solid var(--ink); color:#fff;
  font-family:var(--display); font-size:var(--s0);
  animation:pop .45s cubic-bezier(.3,1.8,.5,1) both;
}
.chip.a{background:var(--a)}
.chip.b{background:var(--b)}
.chip .x{
  border:0; background:rgba(255,255,255,.9); color:var(--ink);
  width:28px; height:28px; border-radius:50%; font-family:var(--hand);
  font-size:1rem; line-height:1; padding:0;
}
.chip .x.sure{width:auto; padding:0 8px; background:var(--butter)}
@keyframes pop{from{transform:scale(0) rotate(-20deg)}to{transform:none}}

/* day totals */
.daytot{
  margin-top:14px; width:100%; max-width:340px;
  border-collapse:collapse; font-variant-numeric:tabular-nums;
}
.daytot caption{text-align:left; font-size:var(--s-1); padding-bottom:4px; opacity:.8}
.daytot th,.daytot td{padding:4px 8px; text-align:right; border-bottom:2px dashed currentColor}
.daytot thead th{font-weight:400; font-size:var(--s-1); opacity:.8; border-bottom-style:solid}
.daytot tbody th{text-align:left; font-family:var(--display); font-weight:400; max-width:9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.daytot td{font-family:var(--display); font-size:var(--s1); line-height:1}
.daytot tbody tr:last-child th,.daytot tbody tr:last-child td{border-bottom:0}
.daytot .ra th{color:var(--a)}
.daytot .rb th{color:var(--b)}
.daytot tr.top th::after{content:" ★"; color:var(--butter); -webkit-text-stroke:1px var(--ink)}
.logger .daytot{color:#fff; border-color:rgba(255,255,255,.5)}
.logger .daytot .ra th,.logger .daytot .rb th{color:#fff}
.logger .daytot th,.logger .daytot td{border-bottom-color:rgba(255,255,255,.45)}
.ticket .daytot th,.ticket .daytot td{border-bottom-color:rgba(32,26,23,.25)}

/* month */
.month-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.month-head h2{margin:0; text-align:center; flex:1}
.nudge{
  width:44px; height:44px; border-radius:50%;
  border:var(--line) solid var(--ink); background:#fffaf0;
  font-size:1.6rem; line-height:1; padding:0 0 4px;
  box-shadow:2px 3px 0 var(--ink);
}
.nudge:active{transform:translate(2px,2px); box-shadow:none}
.dow,.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.dow{margin:12px 0 4px; text-align:center; color:var(--ink-soft); font-size:var(--s-1)}
.day{
  position:relative; aspect-ratio:1;
  border:2px solid transparent; background:none;
  border-radius:40% 46% 42% 48% / 46% 40% 48% 42%;
  display:grid; place-items:center;
  font-size:var(--s-1); padding:0;
}
.day.pad{visibility:hidden}
.day.today{border-color:var(--ink); border-style:dashed}
.day.sel{background:var(--butter); border-color:var(--ink); border-style:solid}
.day .n{position:relative; z-index:1}
.day.played .n{color:#fff; font-family:var(--display); font-size:.95rem}
.day.played::before{
  content:""; position:absolute; inset:8%;
  border-radius:50%; border:2px solid var(--ink);
  background:var(--c);
  animation:pop .4s cubic-bezier(.3,1.8,.5,1) both;
  animation-delay:calc(var(--k) * 18ms);
}
.day.wa{--c:var(--a)}
.day.wb{--c:var(--b)}
.day.wt{--c:repeating-linear-gradient(45deg,var(--a) 0 5px,var(--b) 5px 10px)}
.day.future{opacity:.4}
.day:not(.future):active{transform:scale(.9)}
.legend{font-size:var(--s-1); color:var(--ink-soft); display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:12px 0 0}
.dot{display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid var(--ink)}
.dot.a{background:var(--a)} .dot.b{background:var(--b)}
.dot.t{background:repeating-linear-gradient(45deg,var(--a) 0 3px,var(--b) 3px 6px)}
.legend .dot:not(:first-child){margin-left:8px}

/* receipts */
.receipts ul{list-style:none; padding:0; margin:0}
.receipts li{
  font-size:var(--s1); line-height:1.2;
  padding:10px 0 12px 34px; position:relative;
  border-bottom:2px dashed rgba(32,26,23,.25);
}
.receipts li::before{
  content:""; position:absolute; left:2px; top:15px;
  width:18px; height:18px; border-radius:50%;
  background:var(--ball); border:2px solid var(--ink);
}
.receipts li:nth-child(odd)::before{transform:translateX(4px)}
.receipts b{font-weight:400; font-family:var(--display); font-size:.9em}
.receipts .pa{color:var(--a)} .receipts .pb{color:var(--b)}

/* history */
.history ol{list-style:none; padding:0; margin:0; display:grid; gap:16px}
.ticket{
  background:#fffaf0; border:var(--line) solid var(--ink);
  padding:12px 14px 14px;
  position:relative;
}
.ticket:nth-child(3n+1){border-radius:14px 22px 12px 20px; transform:rotate(-.6deg)}
.ticket:nth-child(3n+2){border-radius:22px 12px 20px 14px; transform:rotate(.5deg)}
.ticket:nth-child(3n){border-radius:12px 18px 24px 12px; transform:rotate(-.2deg)}
.ticket.wa{box-shadow:5px 5px 0 var(--a)}
.ticket.wb{box-shadow:5px 5px 0 var(--b)}
.ticket.wt{box-shadow:5px 5px 0 var(--butter)}
.ticket h3{margin:0; font-family:var(--display); font-weight:400; font-size:var(--s0)}
.ticket .says{margin:2px 0 10px}
.ticket .chips .chip{font-size:var(--s-1)}
.ticket .chip .x{width:24px; height:24px}
.empty{font-size:var(--s1); color:var(--ink-soft); margin:0}
.ghost{
  display:inline-block;
  background:none; border:2px solid var(--ink);
  border-radius:12px 18px 12px 16px;
  padding:8px 14px; font-size:var(--s0);
}
.ghost:active{transform:scale(.96)}
#moreDays{margin-top:16px}

/* footer */
.foot{
  max-width:1100px; margin:0 auto; padding:10px 16px 48px;
  border-top:3px solid var(--ink);
}
.sync{margin:12px 0; font-size:var(--s0)}
.sync .ok{color:var(--table)}
.sync .local{color:var(--a)}
.foot-btns{display:flex; flex-wrap:wrap; gap:10px}
.file{position:relative; overflow:hidden; cursor:pointer}
.file input{position:absolute; inset:0; opacity:0; cursor:pointer}

/* dialog */
dialog{
  border:var(--line) solid var(--ink); border-radius:18px 26px 16px 24px;
  background:var(--paper); color:var(--ink);
  padding:18px; width:min(92vw,360px);
  box-shadow:6px 7px 0 var(--ink);
}
dialog::backdrop{background:rgba(32,26,23,.45)}
dialog p{margin:0 0 10px; font-size:var(--s1); line-height:1.15}
dialog input{
  width:100%; font-size:var(--s1); padding:8px 10px;
  border:var(--line) solid var(--ink); border-radius:10px; background:#fff;
}
.dlg-btns{display:flex; flex-direction:row-reverse; justify-content:flex-start; gap:10px; margin-top:14px}

/* toast + rain */
.toast{
  position:fixed; left:50%; bottom:18px; z-index:20;
  transform:translate(-50%, 140%) rotate(-2deg);
  background:var(--ink); color:var(--paper);
  padding:10px 18px 12px; border-radius:14px 20px 12px 18px;
  font-size:var(--s0); max-width:calc(100vw - 32px);
  transition:transform .35s cubic-bezier(.3,1.6,.5,1), visibility 0s .35s;
  pointer-events:none; visibility:hidden;
}
.toast.show{transform:translate(-50%,0) rotate(-2deg); visibility:visible; transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.rain{position:fixed; inset:0; pointer-events:none; z-index:15; overflow:hidden}
.rain i{
  position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%;
  background:var(--ball); border:2.5px solid var(--ink);
  will-change:transform;
}
.rain i.w{background:#fff}

/* ---------- bigger screens ---------- */
@media (min-width:760px){
  .hero{
    grid-template-columns:1.05fr 1fr;
    grid-template-areas:"shout stage" "tally stage" "verdict stage";
    align-items:end; column-gap:28px; padding-top:40px;
  }
  .shout{grid-area:shout; font-size:clamp(5rem, 10.5vw, 9.5rem)}
  .tally-wrap{grid-area:tally}
  .stage{grid-area:stage; align-self:center; margin:0}
  .verdict{grid-area:verdict; font-size:var(--s2)}
  main{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"board logger" "month logger" "month receipts" "history history";
    gap:40px 44px; align-items:start; padding-top:30px;
  }
  .board{grid-area:board}
  .logger{grid-area:logger}
  .month{grid-area:month}
  .receipts{grid-area:receipts}
  .history{grid-area:history}
  .history ol{grid-template-columns:repeat(auto-fill, minmax(300px,1fr))}
  h2{font-size:var(--s3)}
  .num-wrap input{font-size:4rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition:none !important}
}