@font-face { font-family: "Promo"; src: url("/fonts/InterDisplay-Black.otf") format("opentype"); font-display: swap; }
:root { --ink: #2b2118; --paper: #efe2c4; --red: #e4572e; --gold: #ffc93c; --green: #2ec4b6; --blue: #3a86ff; --muted: #6b5a48; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); overflow: hidden; overscroll-behavior: none;
  font-family: "Promo", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#safe { position: fixed; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); visibility: hidden; pointer-events: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; touch-action: none; display: block; }
#pausebtn { display: none; position: fixed; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--ink); background: #fff; font: 16px "Promo", sans-serif; color: var(--ink); z-index: 5; opacity: .85; }
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10;
  background: rgba(239, 226, 196, .9); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
.screen.on { display: flex; }
#title.on, #over.on { background:
  repeating-conic-gradient(#f1e4c6 0 25%, #e2cfa5 0 50%) 0 0 / 96px 96px; }
.wrap { width: 100%; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: auto; }
.logo { background: var(--red); border: 4px solid var(--ink); border-radius: 22px; padding: 10px 22px 12px; transform: rotate(-3deg); box-shadow: 0 6px 0 var(--ink); }
.logo h1 { margin: 0; font-size: clamp(44px, 14vw, 64px); line-height: 1; color: #fff; letter-spacing: -1px;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.logo p { margin: 4px 0 0; color: #fff; font-size: 15px; }
.strip { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.strip img { width: 54px; height: 54px; animation: hop 1.6s ease-in-out infinite; }
.strip img:nth-of-type(2) { animation-delay: .1s } .strip img:nth-of-type(3) { animation-delay: .2s } .strip img:nth-of-type(4) { animation-delay: .3s }
.strip img:last-child { width: 72px; height: 72px; animation-delay: .4s; }
.strip i { font-style: normal; font-size: 20px; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0) } 30% { transform: translateY(-10px) } }
.pitch { margin: 0; font: 600 16px/1.4 system-ui, -apple-system, sans-serif; background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 12px 14px; }
.pitch b { color: var(--red); }
.challenge { margin: 0; font: 600 15px/1.4 system-ui, -apple-system, sans-serif; background: var(--gold); border: 3px solid var(--ink); border-radius: 16px; padding: 12px 14px; transform: rotate(1deg); }
.challenge b { display: block; font-family: "Promo", sans-serif; font-size: 18px; margin-bottom: 2px; }
.how { margin: 0; font: 600 14px system-ui, -apple-system, sans-serif; color: var(--muted); }
.best { margin: 0; font-size: 15px; min-height: 1em; }
.best.gold { color: var(--red); }
.btn { font: 20px "Promo", system-ui, sans-serif; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 18px;
  padding: 14px 20px; width: 100%; box-shadow: 0 5px 0 var(--ink); cursor: pointer; transition: transform .06s; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--green); color: #fff; font-size: 26px; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.row { display: flex; gap: 10px; width: 100%; justify-content: center; }
.row .btn { font-size: 17px; padding: 12px 8px; }
.row.small { gap: 18px; }
.link { background: none; border: 0; font: 600 14px system-ui, -apple-system, sans-serif; color: var(--ink); text-decoration: underline; cursor: pointer; padding: 6px; }
h2 { margin: 0; font-size: 30px; }
h2.big { font-size: 46px; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); transform: rotate(-3deg); }
#oversub { margin: 0; font: 700 16px/1.35 system-ui, -apple-system, sans-serif; }
.cardimg { width: auto; max-width: 46vw; max-height: 34vh; max-height: 34dvh; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink); }
#cards { background: rgba(43, 33, 24, .55); }
#cards h2 { color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
#cardlist { display: flex; flex-direction: column; gap: 12px; width: 100%; }
#cards.promo #cardlist { flex-direction: row; justify-content: center; }
.card { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 5px 0 var(--ink); font: inherit; color: var(--ink); cursor: pointer; animation: pop .28s cubic-bezier(.3, 1.6, .5, 1) both; }
.card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.card .ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; background: var(--gold); border: 3px solid var(--ink); border-radius: 14px; }
.card .ic img { width: 44px; height: 44px; }
.card .glyph { font-size: 26px; }
.card b { display: block; font-size: 18px; }
.card span { font: 600 14px system-ui, -apple-system, sans-serif; color: var(--muted); }
.card.big { flex-direction: column; text-align: center; flex: 1; padding: 14px 8px; gap: 8px; background: #fffaf0; }
.card.big .ic { width: 84px; height: 84px; background: var(--red); }
.card.big .ic img { width: 76px; height: 76px; }
.card.big b { font-size: 20px; }
.card.big span { font-size: 12px; }
@keyframes pop { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
#toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 14px; font: 600 15px system-ui, sans-serif; opacity: 0; transition: .25s; z-index: 30; pointer-events: none; }
#toast.on { opacity: 1; transform: translateX(-50%); }
@media (min-width: 700px) { .strip img { width: 64px; height: 64px } }
.hero { width: min(70vw, 260px); max-height: 30vh; max-height: 30dvh; object-fit: cover; object-position: top; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); background: #fff; }
#title.on .hero[src=""], .hero:not([src]) { display: none; }

/* personal high scores */
.hs { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 12px; margin: 4px auto 0; width: min(280px, 100%); text-align: left; font: 700 14px/1.3 system-ui, -apple-system, sans-serif; }
.hs b { display: block; font-family: "Promo", sans-serif; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 2px; }
.hs ol { margin: 0; padding-left: 22px; }
.hs li { padding: 2px 0; }
.hs li span { display: inline-block; min-width: 60%; }
.hs li em { font-style: normal; color: var(--muted); font-size: 12px; float: right; }
.hs li.me { color: var(--red); }
.hs li.me span::after { content: " ★"; }