/* --- the chalk hand -------------------------------------------------
   "Chalk Board" by Stringlabs, self-hosted as woff2 (266KB, down from a
   749KB otf). LICENCE: personal use only — a commercial licence must be
   bought from Creative Fabrica BEFORE this site carries ads or revenue.
   Swap the family name below and the board falls back to Stalemate.   */
@font-face{
  font-family:'ChalkBoard';
  src:url('assets/fonts/chalkboard.woff2') format('woff2');
  font-weight:normal;font-style:normal;font-display:swap;
}

/* ---------------------------------------------------------
   Additive only. style.css (the CodePen's) is untouched, and
   nothing in here changes how a page draws or how it folds —
   turn.js keeps its own gradients, elevation and duration.
   --------------------------------------------------------- */

/* --- the classroom -------------------------------------------------
   A backdrop layer only. The book is NOT transformed, scaled or
   perspective-warped — it renders exactly as the CodePen does, just
   with a room behind it instead of the floral wallpaper.          */
body{
  margin:0; padding-bottom:40px;
  /* 40% black over the room so the book reads as the brightest thing in
     frame. Layered in the shorthand rather than as an overlay element, so
     nothing sits between the backdrop and the book's stacking context. */
  background:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    url('assets/room.jpg') center 26% / 132% auto no-repeat fixed !important;
  background-color:#a89e8c !important;
  min-height:100vh;
}

/* Sit the book over the desk. Two knobs only, and neither touches the
   book's own geometry: `top` slides the book down the screen, and the
   background's vertical position slides the room behind it. The book
   itself keeps the CodePen's exact 620x445 and its exact fold.       */
.container{ overflow:visible; }

.book-wrapper{
  margin:0 auto;
  position:relative;
  top:26vh;
  /* Contact shadow. Pure black — the warm brown it used to be (40,28,14)
     went muddy green against the darkened room. */
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.55));
}

/* --- clean paper ----------------------------------------------------
   style.css maps a photographed aged-paper bitmap onto every leaf, and
   that image has green-brown mould staining baked into its edges — the
   dirty band down the outer edge of the page. Overridden here with flat
   cream and a faint fibre, so it reads as a school textbook rather than
   a Victorian relic. style.css itself is still untouched; this just
   loads after it.                                                     */
.pages [class^="page-num-"]{
  background-image:
    repeating-linear-gradient(90deg,
      rgba(150,132,96,.030) 0 1px, rgba(150,132,96,0) 1px 3px),
    repeating-linear-gradient(0deg,
      rgba(150,132,96,.022) 0 1px, rgba(150,132,96,0) 1px 4px) !important;
  background-size:auto !important;
  background-color:#f5f0e3;
  box-shadow:inset 0 0 34px rgba(146,126,92,.13);
}

/* --- textbook pages ------------------------------------------------
   The CodePen centres page content vertically (display:table-cell +
   vertical-align:middle). A textbook page sets from the top, so these
   two rules re-anchor it. style.css itself is untouched.            */
.pages .pages-content{ padding:8% 8% 10%; }
.pages .content-inner{ vertical-align:top; text-align:left; }

.tb{
  font-family:Georgia,'Times New Roman',serif;
  color:#4a4132; font-size:8.2px; line-height:1.72;
}
.tb-run{
  font-size:5.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8b7d64;border-bottom:.5px solid rgba(107,92,69,.35);
  padding-bottom:3px;margin-bottom:8px;
}
.tb-chno{font-size:6px;letter-spacing:.2em;text-transform:uppercase;color:#9a8b72}
.tb-h{
  font-size:11px;font-weight:700;line-height:1.2;
  margin:0 0 6px;color:#3d3527;
}
.tb-h-big{font-size:15px;margin-top:2px;margin-bottom:9px}
.tb p{margin:0 0 6px;text-align:justify;hyphens:auto}

.tb-fig{margin:7px 0;text-align:center}
.tb-fig svg{width:70%;height:auto;display:inline-block}
.tb-fig figcaption{
  font-size:5.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#8b7d64;margin-top:3px;
}

.tb-tbl{width:100%;border-collapse:collapse;margin:6px 0;font-size:6px}
.tb-tbl th,.tb-tbl td{
  border:.5px solid rgba(107,92,69,.4);padding:2px 3px;text-align:left;
}
.tb-tbl th{font-weight:700;background:rgba(107,92,69,.09)}

.tb-ex{
  margin-top:8px;border-top:.5px solid rgba(107,92,69,.35);padding-top:5px;
}
.tb-ex-h{
  font-size:6px;letter-spacing:.18em;text-transform:uppercase;
  color:#8b7d64;margin-bottom:3px;
}
.tb-ex ol{margin:0;padding-left:11px;font-size:6.5px;line-height:1.7}

/* --- the folio: the only thing that must stay legible, because it's
       the number that scores you --- */
.folio{
  position:absolute;bottom:3%;
  font-family:Georgia,'Times New Roman',serif;
  font-size:15px;
  color:#4a3f2e;
  opacity:.8;
  letter-spacing:.02em;
}
.folio.l{left:8%}
.folio.r{right:8%}

/* --- the blackboard scoreboard -------------------------------------
   Both sides, always on, in a real chalk hand. ChalkBoard has a rough,
   dusty edge of its own, so it needs far less glow than Stalemate did —
   too much and the texture turns to smear.                            */
#scorebar{
  position:fixed;top:3.5vh;left:50%;transform:translateX(-50%);
  width:min(38vw,470px);
  color:#f2efe4;z-index:5;
  font-family:'ChalkBoard','Stalemate',cursive;
  text-shadow:0 0 6px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.4);
  line-height:1.15;
}
.teamrow{
  display:flex;align-items:baseline;gap:10px;
  padding:2px 0;
  opacity:.5;                       /* the side not batting sits back */
  transition:opacity .3s;
}
.teamrow.batting{opacity:1}
.teamrow .tname{
  flex:1;font-size:29px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.teamrow .tscore{font-size:34px;letter-spacing:.01em}
.teamrow .tovers{font-size:19px;opacity:.7;min-width:56px;text-align:right}

/* a chalk tick against whoever is at the crease */
.teamrow.batting .tname:before{
  content:'\2022';margin-right:7px;opacity:.9;
}

#striker{
  font-size:22px;opacity:.9;margin-top:4px;
  min-height:24px;
}
#striker .sr-runs{font-size:26px}
#striker .sr-out{opacity:.55}

#chaseLine{
  font-size:20px;opacity:.85;margin-top:5px;
  border-top:1px solid rgba(242,239,228,.25);padding-top:5px;
  min-height:22px;
}
#chaseLine b{font-size:24px}

@media (max-width:900px){
  #scorebar{width:min(72vw,360px);top:2.5vh}
  .teamrow .tname{font-size:23px}
  .teamrow .tscore{font-size:27px}
  .teamrow .tovers{font-size:16px}
  #striker{
  font-size:22px;opacity:.9;margin-top:4px;
  min-height:24px;
}
#striker .sr-runs{font-size:26px}
#striker .sr-out{opacity:.55}

#chaseLine{font-size:17px}
}

/* --- the coin ------------------------------------------------------
   Flip mechanics are the CodePen's: two faces with backface-visibility
   hidden, spun to 1800deg for heads and 1620deg for tails over 3s. The
   faces themselves are drawn here — the original hotlinked coin photos
   from numista, and numista blocks hotlinking, so they never loaded. */
#coin{
  position:relative;width:132px;height:132px;margin:6px auto 14px;
  transform-style:preserve-3d;
}
#coin .face{
  position:absolute;width:100%;height:100%;
  border-radius:50%;
  backface-visibility:hidden;
  background-color:#eceae4;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.15);
}
/* the CodePen's own coin faces — numista blocks hotlinking, so these are
   fetched once and served locally rather than linked */
#coin .heads{ background-image:url('assets/coin-heads.jpg'); }
#coin .tails{ background-image:url('assets/coin-tails.jpg'); }

#coin .tails{ transform:rotateY(-180deg); }

.animate-heads{ animation:flipHeads 3s; animation-fill-mode:forwards; }
@keyframes flipHeads{ from{transform:rotateY(0deg)} to{transform:rotateY(1800deg)} }

.animate-tails{ animation:flipTails 3s; animation-fill-mode:forwards; }
@keyframes flipTails{ from{transform:rotateY(0deg)} to{transform:rotateY(1620deg)} }

#flipBtn[disabled]{opacity:.45;pointer-events:none}

/* --- sound toggle --------------------------------------------------
   A speaker, not a note, so the on/off state is unambiguous. Sits above
   the setup and result screens (z 50) so it is reachable at any time.  */
#sound{
  position:fixed;left:16px;bottom:16px;z-index:60;
  width:42px;height:42px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid rgba(242,239,228,.34);
  background:rgba(20,14,8,.5);
  color:#f2efe4;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s, opacity .18s, border-color .18s;
}
#sound:hover{background:rgba(20,14,8,.72);border-color:rgba(242,239,228,.6)}
#sound .slash{opacity:0;transition:opacity .18s}
#sound .waves{transition:opacity .18s}

/* off: waves drop away, slash appears, whole thing dims */
#sound[aria-pressed="false"]{opacity:.55}
#sound[aria-pressed="false"] .waves{opacity:0}
#sound[aria-pressed="false"] .slash{opacity:1}

/* --- corner hint --- */
#corner-hint{
  position:absolute;right:6px;bottom:-4px;
  font-family:Georgia,serif;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#8b7d64;opacity:.85;
  pointer-events:none;transition:opacity .4s;
}
#corner-hint.gone{opacity:0}

/* --- the call --- */
#callout{
  position:fixed;top:44%;left:50%;
  transform:translate(-50%,-50%) scale(.7);
  font-family:Georgia,serif;font-weight:700;font-size:64px;
  opacity:0;pointer-events:none;z-index:40;
  text-shadow:0 3px 14px rgba(255,255,255,.85), 0 1px 0 rgba(255,255,255,.9);
}
#callout.show{animation:bcpop 1s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes bcpop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-62%) scale(1)}
}

/* --- shared screens: setup, innings break, result --- */
.screen{
  position:fixed;inset:0;z-index:50;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(26,19,10,.62);
  backdrop-filter:blur(3px);
}
.screen.show{display:flex}
.screen .sheet{
  text-align:center;font-family:Georgia,serif;color:#4a3f2e;
  background:#f6f1e4;border-radius:12px;
  padding:24px 30px 28px;
  width:min(94vw,420px);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  max-height:88vh;overflow:auto;
}
.sheet-h{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  opacity:.5;margin-bottom:16px;
}
.q{font-size:19px;margin-bottom:14px;font-weight:700}

.opt{
  display:block;width:100%;cursor:pointer;font-family:Georgia,serif;
  background:#fff;border:1px solid #d6cbb4;border-radius:8px;
  padding:11px 12px;margin-bottom:8px;color:#4a3f2e;font-size:15px;
  transition:all .13s;text-align:center;
}
.opt:hover{background:#6b5c45;border-color:#6b5c45;color:#f6f1e4}
.opt span{display:block;font-size:11px;opacity:.6;margin-top:2px}
.opt:hover span{opacity:.85}
/* renamed from .big — it was colliding with .screen .big, the 60px
   score display, and blowing these buttons up to 60px type */
.opt-lg{padding:14px 12px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.grid .opt{margin:0;font-size:14px;padding:10px 6px}

.row{display:flex;gap:8px}
.row .opt{margin:0;padding:14px 4px}
.row .opt b{display:block;font-size:26px;line-height:1}
.row .opt span{margin-top:3px}

.rules{
  text-align:left;margin:0 0 4px;padding-left:18px;
  font-size:13.5px;line-height:1.55;color:#5b503f;
}
.rules li{margin-bottom:9px}
.rules b{color:#3d3527}
.rule-tbl{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;
}
.rule-tbl span{
  background:#fff;border:1px solid #ddd3bd;border-radius:5px;
  padding:4px 9px;font-size:12.5px;white-space:nowrap;
}
.rule-tbl b{font-size:15px;margin-right:3px}

.note{font-size:12px;opacity:.55;margin-top:10px;min-height:16px}
.back{
  margin-top:14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.45;cursor:pointer;
}
.back:hover{opacity:.8}

.screen .lbl{font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.screen .big{font-size:60px;font-weight:700;line-height:1.05}
.screen .sub{font-size:13px;opacity:.6}
.screen .sub2{font-size:14px;margin:12px 0 18px;line-height:1.5}
#again{
  font-family:Georgia,serif;cursor:pointer;
  background:#6b5c45;border:0;border-radius:8px;color:#f6f1e4;
  padding:12px 30px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
}
.share{margin-top:16px;border-top:1px solid #e0d8c4;padding-top:14px}
.share input{
  width:100%;font-family:ui-monospace,monospace;font-size:11px;
  padding:8px;border:1px solid #d6cbb4;border-radius:6px;
  background:#fff;color:#6b5c45;margin-bottom:7px;
}
#copyBtn{
  font-family:Georgia,serif;cursor:pointer;background:#fff;
  border:1px solid #d6cbb4;border-radius:6px;color:#6b5c45;
  padding:7px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}

/* the shot picker is locked while the bot bats */
#shots.locked{opacity:.35;pointer-events:none}

@media (max-width:700px){
  .book-wrapper{width:94vw !important}
  #scorebar .runs{font-size:32px}
  #callout{font-size:52px}
}