/* PONCI PRESS on screen: the print shop's counter. Cream paper, midnight ink, two spot inks. */
:root {
  --paper: #f2e8d0;
  --paper-2: #e9dcc0;
  --ink: #1b1f2a;
  --ink-soft: rgba(27, 31, 42, 0.62);
  --scarlet: #e24c3a;
  --teal: #188682;
  --federal: #2e589e;
  --mustard: #dea22c;
  --gold: #d0a042;
  --display: "Limelight", "Josefin Sans", serif;
  --caption: "Josefin Sans", "Space Grotesk", sans-serif;
  --mono: "Silkscreen", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--caption); }
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

/* paper grain over everything, multiplied like a real sheet */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.9  0 0 0 0 0.84  0 0 0 0.16 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

/* the stage holds the scene svg and scales it to the viewport */
.stage { position: relative; width: 100%; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; }
.stage svg { display: block; width: 100%; height: auto; max-height: 100vh; }
@media (min-aspect-ratio: 1/1) { .stage svg { height: 100vh; width: auto; max-width: 100%; } }

/* svg ink plates: opaque inks laid in order, spot inks a hair off register against the key drawing */
.plate-a { transform: translate(1.2px, -0.7px) rotate(0.06deg); }
.plate-b { transform: translate(-0.9px, 1.1px) rotate(-0.05deg); }
.plate-g { transform: translate(0.8px, 0.9px); }
.scene text { user-select: none; }
.hit { cursor: pointer; }
.hit:hover .lift { transform: translateY(-2px); }
.brick.next { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* the hands rotate around the clock centre: rotate(a 0 0) in the local user space, no css transform-origin */

/* tickets: the print shop hands you a card */
.veil { position: fixed; inset: 0; background: rgba(27, 31, 42, 0.42); display: none; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.veil.open { display: flex; }
.ticket {
  position: relative; width: min(560px, 100%); max-height: 92vh; overflow: auto; background: var(--paper); color: var(--ink);
  padding: 26px 28px 22px; clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  box-shadow: 0 0 0 3px var(--ink) inset, 0 0 0 5px var(--paper) inset, 0 0 0 6px var(--ink) inset;
}
.ticket h2 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: 0.04em; margin: 4px 0 6px; }
.ticket h3 { font-family: var(--caption); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; margin: 16px 0 6px; color: var(--ink-soft); }
.ticket p { margin: 6px 0; line-height: 1.45; font-size: 15px; }
.ticket .close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 22px; line-height: 1; padding: 6px; }
.ticket .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ticket .grow { flex: 1 1 auto; }
.ticket .num { font-family: var(--mono); font-size: 18px; }
.ticket .big { font-family: var(--display); font-size: 34px; }
.ticket .muted { color: var(--ink-soft); font-size: 13px; }
.ticket .card { width: 100%; max-width: 240px; aspect-ratio: 4 / 5; border: 2px solid var(--ink); background: var(--paper-2); display: block; object-fit: cover; }
.ticket .cardph { display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--caption); font-weight: 700; letter-spacing: 0.1em; font-size: 12px; padding: 12px; }
.ticket table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ticket td { padding: 5px 0; border-bottom: 1px solid rgba(27, 31, 42, 0.18); }
.ticket td:last-child { text-align: right; font-family: var(--mono); font-size: 13px; }
.ticket input { font: inherit; font-size: 15px; padding: 9px 10px; border: 2px solid var(--ink); background: #fbf6e9; color: var(--ink); width: 100%; }
.ticket input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.qty { display: inline-flex; border: 2px solid var(--ink); }
.qty button { width: 40px; height: 40px; border: 0; background: var(--paper); font-family: var(--mono); font-size: 16px; }
.qty button:hover { background: var(--paper-2); }
.qty span { width: 52px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 18px; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }

/* buttons as rubber stamps */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 3px solid var(--ink);
  background: var(--scarlet); color: var(--paper); font-family: var(--caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 14px;
  box-shadow: 3px 3px 0 var(--ink); transition: transform 0.08s ease, box-shadow 0.08s ease; text-decoration: none;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.teal { background: var(--teal); }
.btn.paper { background: var(--paper); color: var(--ink); }
.btn.sm { padding: 8px 12px; font-size: 12px; box-shadow: 2px 2px 0 var(--ink); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.status { font-family: var(--mono); font-size: 12px; min-height: 18px; margin-top: 10px; color: var(--ink-soft); word-break: break-all; }
.status.bad { color: var(--scarlet); }
.status.ok { color: var(--teal); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 12px 18px;
  font-family: var(--caption); font-weight: 700; letter-spacing: 0.06em; font-size: 13px; opacity: 0; transition: all 0.25s ease; z-index: 70; max-width: 92vw; text-align: center;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.tip { position: fixed; pointer-events: none; z-index: 65; background: var(--paper); border: 2px solid var(--ink); padding: 6px 9px; font-family: var(--mono); font-size: 11px; display: none; box-shadow: 2px 2px 0 var(--ink); }
.tip.show { display: block; }