:root {
  --paper: #fbf6ea; --paper2: #f3ebd8; --ink: #231f2e; --red: #e4473c; --blue: #2b6bd9; --yellow: #f0b20c; --green: #2f9e6b;
  --muted: #6d6576; --spring: cubic-bezier(.34, 1.56, .64, 1);
  /* the window's height, still while a phone's bars come and go (the shop's /shop/screen.js); svh off the shop */
  --screen: var(--shop-screen, 100svh);
  --font: "DejaVu Sans", "Liberation Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--paper) radial-gradient(circle at 1px 1px, #231f2e14 1px, transparent 1.4px) 0 0 / 18px 18px;
  color: var(--ink); font: 15px/1.45 var(--font); min-height: var(--screen); display: flex; flex-direction: column; overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); }

.top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; max-width: 760px; width: 100%; margin: 0 auto; }
.logo { text-decoration: none; color: var(--ink); font-weight: 800; font-size: 21px; letter-spacing: -0.5px; display: inline-flex; }
.logo span { display: inline-block; transform: rotate(calc((var(--i, 0) - 6) * 1deg)); transition: transform .4s var(--spring); }
.logo span:nth-child(odd) { transform: translateY(1px) rotate(-4deg); } .logo span:nth-child(3n) { transform: translateY(-1px) rotate(5deg); }
.logo .m { color: var(--red); }
.logo:hover span { transform: translateY(-3px) rotate(-8deg); }
.mute { border: 2px solid var(--ink); background: var(--paper); border-radius: 50%; width: 38px; height: 38px; padding: 6px; cursor: pointer; color: var(--ink);
  box-shadow: 2px 3px 0 var(--ink); transition: transform .25s var(--spring); }
.mute:active { transform: translate(1px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.mute svg { display: block; width: 100%; height: 100%; }
.mute .off, .mute[aria-pressed="false"] .on { display: none; }
.mute[aria-pressed="false"] .off { display: inline; }
.mute[aria-pressed="false"] { background: var(--paper2); color: var(--muted); }

main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; }
.foot { max-width: 760px; margin: 0 auto; padding: 18px 16px 28px; color: var(--muted); font-size: 12px; border-top: 2px dashed #231f2e22; width: 100%; }
.foot p { margin: 4px 0; } .foot .fine { font-size: 11px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
.foot a { color: inherit; }
/* the language switch beside the sound button, and words only a screen reader reads */
.top-r { display: flex; align-items: center; gap: 8px; }
.lang select { height: 38px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; padding: 0 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the shop's spacing scale (theme/web/spacing.css) under the app's own compact screens */
main > section { padding-block: var(--space-xs) var(--space-l); }

h1 { font-size: 34px; line-height: 1.05; margin: 10px 0 8px; letter-spacing: -1px; }
h2 { font-size: 22px; line-height: 1.15; margin: 8px 0 6px; letter-spacing: -0.5px; }
.lead { font-size: 16px; color: #3b3446; margin: 0 0 14px; }
.squiggle { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 Q 12 1 24 6 T 48 6 T 72 6 T 99 5' fill='none' stroke='%23e4473c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% 9px no-repeat; padding-bottom: 4px; }

[hidden] { display: none !important; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2.5px solid var(--ink); background: var(--yellow);
  border-radius: 14px 16px 13px 15px; padding: 12px 18px; font-weight: 800; font-size: 16px; cursor: pointer; text-decoration: none; color: var(--ink);
  box-shadow: 3px 4px 0 var(--ink); transition: transform .25s var(--spring), box-shadow .25s var(--spring); transform: rotate(-0.6deg);
}
.btn:hover { transform: rotate(0.4deg) translateY(-1px); }
.btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.red { background: var(--red); color: #fff; } .btn.blue { background: var(--blue); color: #fff; } .btn.ghost { background: var(--paper); }
.btn.small { padding: 7px 12px; font-size: 14px; box-shadow: 2px 3px 0 var(--ink); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stack { display: grid; gap: 10px; }
.chip { border: 2px solid var(--ink); border-radius: 999px; padding: 5px 11px; background: var(--paper); font-weight: 700; font-size: 13px; cursor: pointer; transition: transform .2s var(--spring); }
.chip.on { background: var(--ink); color: var(--paper); transform: rotate(-2deg) scale(1.04); }
.ideas { display: grid; gap: 10px; padding: 12px; border: 2px dashed var(--ink); border-radius: 14px; background: #fff8; }
.chip.idea { font-weight: 600; }
.chip.idea.used { background: var(--ink); color: var(--paper); }
.chip.idea.used::before { content: '✓ '; }
#help { justify-self: start; }
.pricechip { display: inline-block; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 4px 10px; font-weight: 700; font-size: 13px; transform: rotate(1.2deg); }
.note { font-size: 13px; color: var(--muted); }
.soon { font-weight: 700; }
.warn { background: #fff4d6; border: 2px solid var(--yellow); border-radius: 12px; padding: 10px 12px; font-size: 13px; }

.field { display: grid; gap: 4px; font-weight: 700; font-size: 13px; }
.field input, .field select {
  border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; background: #fff; font-weight: 500; font-size: 15px; width: 100%;
}
.field input:focus { outline: 3px solid #2b6bd955; }
/* the new deck's prompts: fifteen small cards, the one being written lifted in red */
.deckhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-top: 6px; font-size: 15px; }
.minideck { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 540px; }
.mini { position: relative; aspect-ratio: 1; min-width: 0; border: 2px solid var(--ink); border-radius: 9px; background: #fff; padding: 14px 4px 4px; cursor: pointer;
  display: grid; place-items: center; text-align: center; font: 700 clamp(10px, 2.6vw, 13px)/1.15 var(--font); color: var(--ink); box-shadow: 2px 2px 0 #231f2e33;
  transition: transform .3s var(--spring), box-shadow .3s var(--spring); }
.mini span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.mini i { position: absolute; left: 5px; top: 3px; font: 800 10px/1 var(--font); color: var(--muted); font-style: normal; }
.mini.blank { border-style: dashed; background: #fff8; color: var(--muted); font-weight: 600; box-shadow: none; }
.mini.on { border: 3px solid var(--red); transform: rotate(-3deg) scale(1.06); box-shadow: 3px 4px 0 var(--ink); z-index: 1; }
.mini.pop { animation: pop .5s var(--spring); }
.writer { max-width: 540px; }
.writer .row { flex-wrap: nowrap; }
.writer input { flex: 1; min-width: 0; }

/* home */
.hero { display: grid; gap: 6px; }
/* 200 px and tighter on a screen 660 px high or less, 210 px on a taller one */
.hero-cards { position: relative; height: clamp(200px, calc(var(--screen) - 460px), 210px);
  margin: clamp(4px, calc(var(--screen) - 654px), 6px) 0 clamp(0px, calc(var(--screen) - 656px), 4px); }
.hero-cards canvas { position: absolute; width: 150px; height: 150px; border-radius: 12px; border: 2px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); background: var(--paper); }
.hero-cards canvas:nth-child(1) { left: calc(50% - 150px); top: 30px; transform: rotate(-9deg); animation: bob 3.2s ease-in-out infinite; }
.hero-cards canvas:nth-child(2) { left: calc(50% - 75px); top: 6px; transform: rotate(2deg); z-index: 2; animation: bob 3.2s ease-in-out -1s infinite; }
.hero-cards canvas:nth-child(3) { left: calc(50% + 0px); top: 34px; transform: rotate(10deg); animation: bob 3.2s ease-in-out -2s infinite; }
@keyframes bob { 50% { translate: 0 -6px; } }
.steps { display: grid; gap: 8px; margin: 18px 0 6px; padding: 0; list-style: none; }
.steps li { background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px 10px 44px; position: relative; }
.steps li b { display: block; }
.steps li::before { content: attr(data-n); position: absolute; left: 10px; top: 9px; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 13px; }

/* organiser */
.share select { margin-left: 6px; font: inherit; padding: 3px 6px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); }
.share { background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 12px; box-shadow: 3px 4px 0 var(--ink); display: grid; gap: 8px; }
.linkbox { font: 600 12px/1.3 ui-monospace, "DejaVu Sans Mono", monospace; background: var(--paper2); border-radius: 8px; padding: 8px; word-break: break-all; }
input.linkbox { display: block; box-sizing: border-box; width: 100%; border: 0; color: inherit; }
.progress { height: 14px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; }
.progress i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--red) 0 8px, #ee6a5f 8px 16px); transition: width .8s var(--spring); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(5, 1fr); } }
.tile { position: relative; aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--ink); background: var(--paper); overflow: hidden; cursor: pointer; padding: 0;
  transition: transform .3s var(--spring); animation: pop .5s var(--spring) backwards; animation-delay: calc(var(--i) * 30ms); }
.tile:hover { transform: rotate(-2deg) scale(1.03); }
.tile canvas { width: 100%; height: 100%; display: block; }
.tile.empty { border-style: dashed; background: #fff8; display: grid; place-items: center; padding: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.tile.empty em { display: block; font-style: normal; font-size: 22px; color: #231f2e55; }
@keyframes pop { from { transform: scale(.6) rotate(-8deg); opacity: 0; } }

/* sheets and overlays */
#layer:empty { display: none; }
.scrim { position: fixed; inset: 0; background: #231f2e88; z-index: 50; display: grid; align-items: end; justify-items: center; animation: fade .2s; }
.sheet { background: var(--paper); width: 100%; max-width: 560px; border-radius: 22px 22px 0 0; border: 2.5px solid var(--ink); border-bottom: 0; padding: 18px 16px 22px;
  max-height: 92dvh; overflow: auto; animation: up .45s var(--spring); }
@keyframes up { from { transform: translateY(100%); } } @keyframes fade { from { opacity: 0; } }
/* the game and the replay: on the shop's shelf its bar stays on top, over the view's own paper (also once the page has
   scrolled the bar away) */
.full { position: fixed; inset: 0; z-index: 60; background: var(--paper) radial-gradient(circle at 1px 1px, #231f2e14 1px, transparent 1.4px) 0 0 / 18px 18px;
  overflow: auto; padding: calc(12px + var(--shop-bar, 0px)) 12px 20px; animation: fade .25s; }
.full .bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.x { border: 2px solid var(--ink); background: #fff; border-radius: 50%; width: 34px; height: 34px; font-weight: 800; cursor: pointer; }

/* draw */
.deal { perspective: 900px; display: grid; place-items: center; margin: 12px 0; }
.dealcard { width: 220px; aspect-ratio: 1; position: relative; transform-style: preserve-3d; animation: deal .9s var(--spring) both; }
.dealcard.flip { transform: rotateY(180deg); transition: transform .7s var(--spring); }
.dealcard > div { position: absolute; inset: 0; border-radius: 16px; border: 2.5px solid var(--ink); backface-visibility: hidden; display: grid; place-items: center; box-shadow: 4px 5px 0 var(--ink); }
.dealcard .back { background: var(--red) repeating-linear-gradient(45deg, #0000 0 10px, #ffffff22 10px 20px); color: #fff; font-weight: 800; font-size: 40px; }
.dealcard .front { background: #fff; transform: rotateY(180deg); padding: 18px; text-align: center; font-weight: 800; font-size: 21px; line-height: 1.2; }
.dealcard .front small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
@keyframes deal { from { transform: translate(-60vw, 30px) rotate(-40deg); } }
.drawwrap { display: grid; gap: 10px; justify-items: center; }
.prompt-banner { font-weight: 800; font-size: 18px; text-align: center; line-height: 1.2; }
.pad { position: relative; width: min(100%, 420px); aspect-ratio: 1; }
.pad canvas { width: 100%; height: 100%; border: 2.5px solid var(--ink); border-radius: 18px; background: #fff; touch-action: none; display: block; box-shadow: 3px 4px 0 var(--ink); }
.timer { position: absolute; right: -6px; top: -10px; width: 58px; height: 58px; z-index: 2; }
.timer.hurry { animation: wobble .5s ease-in-out infinite; }
@keyframes wobble { 25% { transform: rotate(-8deg) scale(1.06); } 75% { transform: rotate(8deg) scale(1.06); } }
.nib { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ink); transform: translate(-50%, -50%); pointer-events: none; z-index: 3; }
.tools { display: grid; gap: 8px; justify-items: center; }
.ink { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--ink); cursor: pointer; transition: transform .2s var(--spring); }
.ink[aria-pressed="true"], .nibsize[aria-pressed="true"] { transform: scale(1.18) rotate(-10deg); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.inks { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.ink.eraser { background: linear-gradient(135deg, #fff 0 48%, #f4a7b9 48% 100%); }
.nibsize { width: 34px; height: 34px; border-radius: 10px; border: 2.5px solid var(--ink); background: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--spring); }
.nibsize i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--ink); }
.sent { text-align: center; display: grid; gap: 10px; justify-items: center; }
.sent canvas { width: 200px; height: 200px; border-radius: 14px; border: 2.5px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); animation: slidein .8s var(--spring) backwards; }
@keyframes slidein { from { transform: translateX(-70vw) rotate(-14deg); } }
.tile.arrived { animation: arrive .6s var(--spring) backwards; }
@keyframes arrive { from { transform: translate(-30vw, 60vh) rotate(-30deg); } }

/* reveal */
.revealwrap { position: relative; }
.revealgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; max-width: 520px; margin: 0 auto; }
@media (min-width: 620px) { .revealgrid { grid-template-columns: repeat(5, 1fr); max-width: 720px; } }
.revealgrid { perspective: 900px; }
.rc { aspect-ratio: 1; animation: fly .34s cubic-bezier(.2, .75, .35, 1) backwards; }
@keyframes fly { from { translate: var(--fx) var(--fy); rotate: var(--fr); } }
.rf { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .4s cubic-bezier(.3, 1.45, .5, 1); }
.turned .rf { transform: rotateY(180deg); }
.rf > * { position: absolute; inset: 0; border-radius: 9px; border: 2px solid var(--ink); backface-visibility: hidden; box-shadow: 2px 3px 0 #231f2e44; }
.rf .b { background: var(--red) repeating-linear-gradient(45deg, #0000 0 7px, #ffffff26 7px 14px); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px; }
.rf canvas { width: 100%; height: 100%; background: var(--paper); transform: rotateY(180deg); }
.revealgrid.settled { animation: latch .5s var(--spring); }
@keyframes latch { 30% { transform: scale(.975, 1.015); } }
.bigline { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 12px 0 8px; animation: pop .6s var(--spring) both; }
.bigline.stamped { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: 6px 16px; white-space: nowrap; color: var(--red); background: #fbf6eadd;
  border: 4px solid var(--red); border-radius: 10px; rotate: -6deg; text-transform: uppercase; font-size: clamp(16px, 5.2vw, 26px); letter-spacing: 1px; box-shadow: 0 0 0 3px #fbf6eadd;
  animation: stampin .5s ease-out both; }
@keyframes stampin { from { transform: scale(2.2); opacity: 0; } 24% { transform: scale(.94); opacity: 1; } 45% { transform: scale(1.02); } }

/* pairs */
.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 460px; margin: 0 auto; perspective: 800px; }
@media (min-width: 620px) { .board { grid-template-columns: repeat(6, 1fr); max-width: 620px; } }
.pc { aspect-ratio: 1; position: relative; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .45s var(--spring); }
.pc.up, .pc.done { transform: rotateY(180deg); }
.pc.done { animation: yay .5s var(--spring); }
.pc > * { position: absolute; inset: 0; border-radius: 8px; border: 2px solid var(--ink); backface-visibility: hidden; }
.pc .b { background: var(--red) repeating-linear-gradient(45deg, #0000 0 6px, #ffffff26 6px 12px); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; }
.pc canvas { transform: rotateY(180deg); width: 100%; height: 100%; background: var(--paper); }
.pc.done canvas { box-shadow: 0 0 0 3px var(--green); }
@keyframes yay { 50% { transform: rotateY(180deg) scale(1.15) rotate(6deg); } }
.score { display: flex; justify-content: center; gap: 14px; font-weight: 800; margin: 4px 0 10px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; }

/* order */
.pricebox { background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 12px; display: grid; gap: 4px; }
.pricebox .total { font-size: 24px; font-weight: 800; }
/* the remake promise right under the basket button, in the notes' quiet type: the whole line a link to the terms */
.remake { margin: 0; text-align: center; text-wrap: balance; }
.remake a { color: inherit; text-underline-offset: 2px; }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; font-size: 14px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 10px; }
.check input { width: 22px; height: 22px; accent-color: var(--red); }
.status { background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 14px; display: grid; gap: 6px; box-shadow: 3px 4px 0 var(--ink); }
.status code { font-size: 12px; background: var(--paper2); padding: 2px 6px; border-radius: 6px; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 12px; font-weight: 700; z-index: 99; animation: up .4s var(--spring); }
.btn.stamped { animation: pressed .35s var(--spring); }
@keyframes pressed { 25% { transform: scale(.95) translate(2px, 3px); box-shadow: 0 0 0 var(--ink); } }
.share.demo { background: var(--paper2); }
.kicker { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.tile.wild { border-color: var(--yellow); }