/* Daybatch styles — extracted byte-exact from v13 (reference/daybatch-v13.html). */
  :root {
    --paper:#EDF1F6; --card:#fff; --grid:#D8E1EB; --ink:#16324F; --faded:#7A8CA3;
    --marker:#FF5714; --markerSoft:#FFD9C4; --win:#0FB360; --winSoft:#D6F5E5; --blue:#2E86FF;
    --amber:#F5A800; --bad:#E5484D; --badSoft:#FDE0E1; --goal:#DBEAFE;
  }
  :root { color-scheme: light only; }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  body {
    margin:0; min-height:100vh; background:var(--paper);
    background-image:linear-gradient(#D8E1EB44 1px,transparent 1px),linear-gradient(90deg,#D8E1EB44 1px,transparent 1px);
    background-size:28px 28px;
    font-family:'Space Grotesk',system-ui,-apple-system,sans-serif; color:var(--ink);
    display:flex; justify-content:center; padding:10px 10px 24px;
  }
  .mono { font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; }
  #app { width:100%; max-width:420px; }
  .hdr { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; background:var(--card); border:1px solid var(--grid); border-radius:12px; padding:7px 12px; }
  .logo { font-weight:700; font-size:20px; letter-spacing:.06em; color:#0B1F33; }
  .logo b { color:var(--marker); }
  .ver { font-family:ui-monospace,monospace; font-size:11px; font-weight:600; color:#3E5470; letter-spacing:.1em; }
  .tabs { display:flex; gap:5px; margin-bottom:8px; }
  .tabs button {
    flex:1; padding:8px 2px; border-radius:12px; font-size:11px; font-weight:600;
    font-family:inherit; cursor:pointer; border:1px solid var(--grid); background:var(--card); color:var(--ink);
  }
  .tabs button.on { border:none; background:linear-gradient(135deg,var(--marker),#FF8A3D); color:#fff; }
  .rules {
    font-size:13px; color:var(--faded); margin-bottom:12px; line-height:1.5;
    background:var(--card); border:1px solid var(--grid); border-radius:13px; padding:10px 12px;
  }
  .rules b { color:var(--ink); }
  .stats { display:flex; gap:6px; margin-bottom:8px; align-items:stretch; }
  .stat { flex:1; background:var(--card); border-radius:12px; border:1px solid var(--grid); padding:5px 4px; text-align:center; }
  .stat.big { flex:2; }
  .stat .lb { font-size:9px; letter-spacing:.14em; color:var(--faded); font-weight:600; }
  .stat .vl { font-family:ui-monospace,monospace; font-weight:600; font-size:15px; line-height:1.25; }
  .stat.big .vl { font-size:20px; }
  .board {
    background:var(--card); border:1px solid var(--grid); border-radius:16px; padding:8px;
    box-shadow:0 4px 20px rgba(22,50,79,.08);
  }
  .btnrow { display:flex; gap:6px; margin-top:8px; }
  .btn {
    flex:1; padding:10px 6px; border-radius:12px; font-size:13px; font-weight:600;
    font-family:inherit; cursor:pointer; border:1px solid var(--grid); background:var(--card); color:var(--ink);
    touch-action:manipulation;
  }
  .btn.pri { border:none; background:var(--ink); color:#fff; }
  .btn:active { transform:scale(.97); }
  .btn:disabled { opacity:.4; }
  /* legend */
  .legend { display:flex; gap:10px; margin-top:8px; }
  .legend > div { flex:1; text-align:center; font-size:11px; }
  .legend .mini { display:grid; grid-template-columns:repeat(3,22px); gap:2px; justify-content:center; margin-bottom:4px; }
  .legend .mini span { width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:11px; }
  /* crossing */
  #cr-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; max-width:315px; margin:0 auto; }
  #cr-grid button {
    aspect-ratio:1; border-radius:11px; border:1px solid var(--grid); background:#F6F8FB;
    font-family:ui-monospace,monospace; font-weight:600; font-size:17px; color:var(--ink);
    display:flex; align-items:center; justify-content:center; position:relative; padding:0;
    transition:background .15s; cursor:default; touch-action:manipulation;
  }
  #cr-grid button.goal { background:var(--goal); }
  #cr-grid button.seen { background:#FDFEFE; }
  #cr-grid button.pos { background:var(--markerSoft); outline:3px solid var(--marker); outline-offset:-3px; }
  #cr-grid button.boom { background:var(--badSoft); }
  #cr-grid button.can { border:2px dashed #FF6B2C99; cursor:pointer; }
  #cr-grid .tag { position:absolute; font-size:8px; font-weight:700; letter-spacing:.12em; color:var(--marker); }
  #cr-grid .flag { position:absolute; font-size:11px; opacity:.55; }
  /* sonar */
  .sn-row { display:grid; grid-template-columns:22px repeat(7,1fr); gap:3px; margin-bottom:3px; }
  .sn-edge { display:flex; align-items:center; justify-content:center; font-family:ui-monospace,monospace; font-weight:700; font-size:16px; }
  .sn-edge.done { color:var(--win); opacity:.65; }
  .sn-row button {
    aspect-ratio:1; border-radius:10px; border:1px solid var(--grid); background:#F6F8FB;
    font-size:17px; padding:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; cursor:pointer; transition:background .18s; touch-action:manipulation;
  }
  .sn-row button.hit { background:linear-gradient(135deg,var(--marker),#FF8A3D); box-shadow:0 2px 8px #FF571455; }
  .sn-row button.miss { background:#E2ECF9; color:var(--blue); cursor:default; }
  .sn-row button.ship { background:var(--markerSoft); }
  /* codebreak */
  .cb-rows { min-height:60px; max-height:33vh; overflow-y:auto; }
  .cb-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .cb-num { font-family:ui-monospace,monospace; font-size:11px; color:var(--faded); width:14px; }
  .cb-tiles { display:flex; gap:6px; }
  .cb-tile { width:37px; height:37px; padding:1px; }
  .cb-slot {
    width:37px; height:37px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:18px; background:#fff; border:2px dashed #FF571455; color:var(--faded); cursor:pointer;
  }
  .cb-slot.filled { background:#F6F8FB; border-color:var(--grid); }
  .cb-keys { display:flex; gap:5px; margin-top:8px; justify-content:center; }
  .cb-keys button {
    flex:1; max-width:46px; border:none; background:transparent; cursor:pointer; padding:0; touch-action:manipulation;
  }
  .cb-keys button .shp { aspect-ratio:1; }
  .cb-keys button.used .shp { opacity:.3; }
  .cb-keys button.dead .shp { background:#DEE6F0!important; opacity:.45; }
  .cb-keys button.kgreen .kdot { background:var(--win); }
  .cb-keys button.kamber .kdot { background:var(--amber); }
  /* tally */
  #ty-board { position:relative; touch-action:none; user-select:none; -webkit-user-select:none; }
  #ty-grid { display:grid; grid-template-columns:repeat(5,1fr); }
  #ty-grid .tc {
    aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative;
    box-shadow:inset 0 0 0 .5px var(--grid); font-family:ui-monospace,monospace; font-weight:600;
    transition:background .12s;
  }
  #ty-grid .tc.num { font-size:26px; color:var(--ink); }
  #ty-grid .tc.op { font-size:22px; color:var(--faded); }
  #ty-grid .tc.on { background:var(--markerSoft); }
  #ty-grid .tc .tag { position:absolute; bottom:1px; font-size:7px; font-weight:700; letter-spacing:.12em; color:var(--marker); background:rgba(255,255,255,.85); border-radius:4px; padding:1px 3px; }
  #ty-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
  .shakeX { animation:shakeX .45s; }
  @keyframes shakeX { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
  /* help */
  .helpbtn {
    flex:none; width:38px; border-radius:12px; border:1px solid var(--grid); background:var(--card);
    font-weight:700; font-size:16px; color:var(--marker); cursor:pointer; font-family:inherit;
  }
  #helpov {
    position:fixed; inset:0; z-index:600; background:rgba(22,50,79,.5);
    display:none; align-items:center; justify-content:center; padding:20px;
  }
  #helpov.show { display:flex; animation:fadeIn .2s ease-out; }
  #helpbox {
    background:var(--card); border-radius:20px; width:100%; max-width:340px; padding:18px;
    box-shadow:0 16px 48px rgba(22,50,79,.35); animation:popIn .25s ease-out;
  }
  #h-title { font-weight:700; font-size:18px; margin-bottom:8px; }
  #h-body { font-size:13px; color:var(--faded); line-height:1.55; }
  #h-body b { color:var(--ink); }
  /* sonar fleet */
  .fleet { display:flex; gap:14px; align-items:center; justify-content:center; padding:2px 0 6px; }
  .fleet .fl { font-size:10px; letter-spacing:.12em; color:var(--faded); font-weight:600; }
  .fleet .ship { display:flex; gap:2px; }
  .fleet .ship i { width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,var(--blue),#7C5CFF); box-shadow:inset 0 -2px 0 rgba(0,0,0,.15); }
  /* codebreak shapes */
  .shp { width:100%; height:100%; display:block; }
  .shp.cir { border-radius:50%; }
  .shp.sq { border-radius:7px; }
  .shp.tri { clip-path:polygon(50% 4%, 97% 94%, 3% 94%); }
  .shp.dia { clip-path:polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }
  .shp.star { clip-path:polygon(50% 2%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
  .shp.pen { clip-path:polygon(50% 2%, 98% 38%, 79% 97%, 21% 97%, 2% 38%); }
  .shp.plus { clip-path:polygon(34% 2%, 66% 2%, 66% 34%, 98% 34%, 98% 66%, 66% 66%, 66% 98%, 34% 98%, 34% 66%, 2% 66%, 2% 34%, 34% 34%); }
  .kdot { width:16px; height:4px; border-radius:2px; background:transparent; display:block; margin:3px auto 0; }
  /* lexi */
  .lx-slots { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:2px 0 6px; }
  .lx-word { display:flex; gap:2px; }
  .lx-word b {
    width:19px; height:22px; border-radius:5px; background:#EDF3F9; border:1px solid var(--grid);
    display:flex; align-items:center; justify-content:center; font-family:ui-monospace,monospace;
    font-size:13px; font-weight:700; color:var(--ink); text-transform:uppercase;
  }
  .lx-word.found b { background:var(--winSoft); border-color:var(--win); color:var(--win); }
  .lx-word.hinted b { background:var(--amberSoft, #FBF0D4); border-color:var(--amber); color:var(--amber); }
  #lx-preview {
    text-align:center; min-height:34px; font-family:ui-monospace,monospace; font-weight:700;
    font-size:24px; letter-spacing:.2em; color:var(--marker); text-transform:uppercase;
  }
  #lx-wheelwrap { position:relative; width:230px; height:230px; margin:0 auto; touch-action:none; user-select:none; -webkit-user-select:none; }
  #lx-wheelwrap .lx-ring { position:absolute; inset:8px; border-radius:50%; background:#F2F6FB; border:1.5px solid var(--grid); }
  .lx-letter {
    position:absolute; width:52px; height:52px; border-radius:50%; background:var(--card);
    border:2px solid var(--grid); display:flex; align-items:center; justify-content:center;
    font-family:ui-monospace,monospace; font-weight:700; font-size:24px; color:var(--ink);
    text-transform:uppercase; transform:translate(-50%,-50%); transition:background .1s,border .1s;
  }
  .lx-letter.sel { background:var(--marker); border-color:var(--marker); color:#fff; }
  #lx-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .lx-tools { display:flex; gap:6px; justify-content:center; margin-top:6px; }
  .lx-tools button {
    padding:8px 14px; border-radius:11px; border:1px solid var(--grid); background:var(--card);
    font-family:inherit; font-weight:600; font-size:13px; cursor:pointer; color:var(--ink);
  }
  /* result modal */
  #overlay {
    position:fixed; inset:0; z-index:500; background:rgba(22,50,79,.5);
    display:none; align-items:center; justify-content:center; padding:20px;
  }
  #overlay.show { display:flex; animation:fadeIn .2s ease-out; }
  #modal {
    background:var(--card); border-radius:20px; width:100%; max-width:340px;
    padding:18px; text-align:center; box-shadow:0 16px 48px rgba(22,50,79,.35);
  }
  #modal.win { border:2px solid var(--win); animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1); }
  #modal.fail { border:2px solid var(--bad); animation:popIn .25s ease-out; }
  #m-title { font-weight:700; font-size:26px; }
  #modal.win #m-title { color:var(--win); animation:titlePulse 1.1s ease-in-out 2; }
  #modal.fail #m-title { color:var(--bad); font-size:20px; }
  #m-title .wig { display:inline-block; animation:wiggle .8s ease-in-out 3; }
  #m-line { font-family:ui-monospace,monospace; font-size:13px; margin:6px 0 10px; }
  #m-share {
    background:var(--paper); border-radius:10px; padding:10px; font-family:ui-monospace,monospace;
    font-size:12px; text-align:left; white-space:pre-wrap; margin:0;
  }
  #m-close { margin-top:8px; width:100%; padding:10px; border:none; background:transparent; color:var(--faded); font-weight:600; font-family:inherit; font-size:13px; cursor:pointer; }
  .slimbar {
    margin-top:14px; background:var(--card); border-radius:14px; padding:10px 14px;
    display:flex; align-items:center; gap:10px;
  }
  .slimbar.win { border:1.5px solid var(--win); } .slimbar.fail { border:1.5px solid var(--bad); }
  .slimbar span { font-weight:700; font-size:15px; flex:1; }
  .slimbar.win span { color:var(--win); } .slimbar.fail span { color:var(--bad); }
  .slimbar button { padding:8px 14px; border:none; border-radius:12px; background:var(--ink); color:#fff; font-weight:600; font-family:inherit; cursor:pointer; }
  .hide { display:none!important; }
  /* confetti */
  .cf { position:fixed; top:-4vh; z-index:999; pointer-events:none; animation:confettiFall var(--d) var(--dl) cubic-bezier(.2,.6,.4,1) forwards; }
  @keyframes confettiFall { 0%{transform:translate(0,0) rotate(0)} 85%{opacity:1} 100%{transform:translate(var(--x),112vh) rotate(var(--r)); opacity:0} }
  @keyframes popIn { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  @keyframes bounceIn { 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.06);opacity:1} 80%{transform:scale(.98)} 100%{transform:scale(1)} }
  @keyframes titlePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
  @keyframes wiggle { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(14deg)} }
  @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} }

/* B2: day-rollover banner */
#rollover {
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  background:var(--card); border:1.5px solid var(--amber); border-radius:12px;
  padding:8px 12px; font-weight:600; font-size:13px;
}
#rollover span { flex:1; }
#rollover button {
  padding:8px 12px; border:none; border-radius:10px; background:var(--ink);
  color:#fff; font-weight:600; font-family:inherit; font-size:13px; cursor:pointer;
}

/* B3: batch report card + header streak chip */
#report {
  margin-top:14px; background:var(--card); border:1px solid var(--grid);
  border-radius:16px; padding:12px 14px; box-shadow:0 4px 20px rgba(22,50,79,.08);
}
#report .rp-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
#report .rp-title { font-size:11px; letter-spacing:.14em; color:var(--faded); font-weight:600; }
#report .rp-score { font-family:ui-monospace,monospace; font-weight:700; font-size:18px; }
#report .rp-lines { font-family:ui-monospace,monospace; font-size:13px; line-height:1.7; margin-bottom:10px; }
#report .rp-perfect { font-size:12px; font-weight:600; color:var(--win); margin-bottom:8px; }
#report button { width:100%; }
#hdr-streak { font-weight:700; font-size:13px; }
#report .rp-note { font-size:11px; color:var(--faded); font-weight:600; margin-bottom:8px; }