/* Alfa Slab One and Rubik (SIL OFL 1.1, see fonts/OFL-*.txt) are self-hosted so the game looks right offline. */
@font-face{font-family:"Alfa Slab One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/alfa-slab-one-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alfa Slab One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/alfa-slab-one-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rubik;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Rubik;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/rubik-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Retro butcher's shop: white tiles, butcher red, mint trim, cream paper. */
:root{
  --tile:#f2ede4; --grout:#d8cfc1; --red:#c8102e; --red-dark:#8e0b20; --mint:#7cc6b4; --mint-dark:#3f8f7d;
  --paper:#fff8ec; --ink:#2a1614; --muted:#7a625a;
  --slab:"Alfa Slab One",Rockwell,"Roboto Slab",Georgia,serif; --sans:Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--tile);overflow:hidden;overscroll-behavior:none;font-family:var(--sans);color:var(--ink)}
canvas{display:block;width:100vw;height:100vh;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* the knife is drawn on the canvas in place of the mouse cursor */
@media (pointer:fine){ canvas{cursor:none} }
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--mint-dark);outline-offset:3px}

#overlay{position:fixed;inset:0;z-index:2;display:flex;align-items:center;justify-content:safe center;flex-direction:column;overflow-y:auto;
  padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:rgba(242,237,228,.55);backdrop-filter:blur(3px) saturate(.8)}
#overlay[hidden]{display:none}
.card{position:relative;width:min(560px,100%);margin:auto 0;background:var(--paper);border-radius:6px 6px 14px 14px;
  padding:0 24px 22px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  box-shadow:0 2px 0 var(--grout),0 18px 40px rgba(60,30,20,.25);border:2px solid var(--ink)}
/* red and white awning with a scalloped edge */
.awning{align-self:stretch;margin:0 -24px;height:44px;border-radius:4px 4px 0 0;
  background:repeating-linear-gradient(90deg,var(--red) 0 28px,var(--paper) 28px 56px);border-bottom:2px solid var(--ink);position:relative}
.awning:after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;
  background:radial-gradient(circle at 14px 0,var(--red) 12px,transparent 13px) 0 0/56px 14px repeat-x,
             radial-gradient(circle at 14px 0,var(--paper) 12px,transparent 13px) 28px 0/56px 14px repeat-x}
.brand{margin-top:14px}
.kicker{margin:0;font-weight:700;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--mint-dark)}
.brand h1{margin:6px 0 0;font-family:var(--slab);font-weight:400;font-size:clamp(40px,9vw,68px);line-height:.95;color:var(--red);
  text-shadow:3px 3px 0 var(--ink)}
.brand h1 span{display:block;color:var(--ink);text-shadow:3px 3px 0 var(--mint);font-size:.62em;margin-top:4px}
.sub{margin:12px 0 0}
.sub span{display:inline-block;background:var(--ink);color:var(--paper);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 14px;transform:rotate(-1.5deg)}
#msg{margin:0;font-size:clamp(15px,2.2vw,17px);line-height:1.5;color:var(--ink);max-width:48ch}
#stats{font-family:var(--slab);font-size:clamp(20px,3.4vw,28px);line-height:1.35;color:var(--ink)}
#stats:empty{display:none}
#stats b{font-weight:400;color:var(--red)}
#stats small{display:block;font-family:var(--sans);font-weight:500;font-size:14px;color:var(--muted);margin-top:4px}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
#btn{font-family:var(--slab);font-size:clamp(20px,3vw,26px);color:var(--paper);background:var(--red);border:2px solid var(--ink);border-radius:999px;
  padding:12px 34px;box-shadow:0 5px 0 var(--ink);transition:transform .08s,box-shadow .08s}
#btn:hover{background:#d8193a}
#btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
#install{font-weight:700;font-size:15px;color:var(--ink);background:var(--mint);border:2px solid var(--ink);border-radius:999px;padding:10px 20px;box-shadow:0 4px 0 var(--ink)}
#install[hidden]{display:none}
#nameform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;font-weight:700;font-size:15px}
#nameform[hidden],#scores[hidden]{display:none}
#name{font:inherit;font-weight:500;width:150px;padding:7px 10px;border-radius:8px;border:2px solid var(--ink);background:#fff;color:var(--ink)}
#savescore{font-weight:700;color:var(--paper);background:var(--ink);border:0;border-radius:8px;padding:9px 14px}
/* leaderboard as a till receipt with a torn edge */
#scores{--z:7px;width:min(300px,100%);border-collapse:collapse;background:#fff;color:var(--ink);font:500 14px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;padding-bottom:var(--z);box-shadow:0 1px 0 var(--grout);transform:rotate(.8deg);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%}
#scores caption{background:#fff;padding:10px 12px 6px;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px dashed var(--grout)}
#scores td{padding:1px 10px;text-align:left;white-space:nowrap}
#scores tr:last-child td{padding-bottom:calc(var(--z) + 8px)}
#scores tr:first-child td{padding-top:6px}
#scores td.num{text-align:right}
#scores td.aid{font-size:11px}
#scores tr.me td{color:var(--red);font-weight:800}
#volumes{font-weight:700;font-size:14px;color:var(--muted)}
#volumes label{display:flex;align-items:center;gap:10px}
#volumes input{width:150px;accent-color:var(--red)}
.hint{margin:0;font-size:13px;line-height:1.45;color:var(--muted);max-width:52ch}
.hint[hidden]{display:none}
#toast{position:fixed;left:50%;white-space:nowrap;max-width:calc(100vw - 24px);top:calc(60px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:4;display:flex;gap:12px;align-items:center;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:6px 6px 6px 16px;font-weight:600;font-size:14px;box-shadow:0 4px 0 var(--ink)}
#toast[hidden],#toast button[hidden]{display:none}
#toast button{font-weight:700;color:var(--paper);background:var(--red);border:0;border-radius:999px;padding:6px 14px}
#safe{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#controls{position:fixed;right:calc(12px + env(safe-area-inset-right,0px));top:calc(12px + env(safe-area-inset-top,0px));z-index:3;display:flex;gap:8px}
/* --ui follows the HUD scale so the buttons are not tiny on a big monitor */
.ctl{font-weight:700;font-size:calc(14px * var(--ui,1));background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;
  padding:6px 14px;box-shadow:0 3px 0 var(--ink)}
.ctl:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.ctl[hidden]{display:none}
.ctl[aria-pressed="true"]{background:var(--grout)}
@media (prefers-reduced-motion: reduce){ #btn,.ctl{transition:none} }
/* keyboard hints only where there is a keyboard, touch hints only where there is a touch screen */
@media (hover:none){ #hint{display:none} }
@media not (any-pointer:coarse){ #touchhint{display:none} }
/* pause and end screens: the result matters, the long intro does not */
#overlay:not([data-mode="start"]) .kicker,#overlay:not([data-mode="start"]) .sub,#overlay:not([data-mode="start"]) .hint{display:none}
#overlay:not([data-mode="start"]) .brand h1{font-size:clamp(32px,6vw,46px)}
/* phones in landscape: keep every screen within the short viewport */
@media (max-height:520px){
  #overlay{padding-top:8px;padding-bottom:8px}
  .card{gap:8px;padding:0 18px 12px;width:min(680px,100%)}
  .awning{height:22px;margin:0 -18px}
  .awning:after{height:10px}
  .brand{margin-top:8px}
  .kicker{display:none}
  .brand h1{font-size:34px} .brand h1 span{display:inline;font-size:.7em;margin-left:.2em}
  .sub{margin-top:6px} .sub span{font-size:11px;padding:4px 10px}
  #msg{font-size:13px;line-height:1.35;max-width:none}
  #overlay[data-mode="over"] #msg{display:none}
  #stats{font-size:18px}
  #btn{font-size:18px;padding:8px 26px}
  #scores{font-size:12px;line-height:1.4}
  .hint{font-size:11px}
}
@media (max-width:520px){ .ctl{font-size:12px;padding:5px 11px} .card{padding:0 16px 18px} .awning{margin:0 -16px} }