@font-face { font-family: "Display"; src: url(fonts/display.woff2) format("woff2"); font-style: italic; font-display: block; }
@font-face { font-family: "Caslon"; src: url(fonts/caslon.woff2) format("woff2"); font-style: italic; font-display: block; }
@font-face { font-family: "Grotesk"; src: url(fonts/grotesk.woff2) format("woff2"); font-weight: 600; font-display: block; }

:root {
  --paper: #EFE6D4; --a: #1F5F73; --b: #E2553A; --plum: #5A3A3A;
  --slip: 3px; --cell: 90px; --gap: 10px; --slot: 60px;
  /* paper-coloured specks that bite into ink, so no fill reads as flat */
  --bite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.937 0 0 0 0 0.902 0 0 0 0 0.831 0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 -1.6 0.95'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper) url(assets/paper.webp) center / cover no-repeat fixed;
  color: var(--a); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  font-family: "Grotesk", "Arial Narrow", sans-serif;
}
body::after { /* faint even grain over the whole page */
  content: ""; position: fixed; inset: 0; pointer-events: none; background: var(--grain); opacity: .22; mix-blend-mode: multiply; z-index: 50;
}
#wash { position: fixed; inset: 0; background: var(--b); opacity: 0; pointer-events: none; mix-blend-mode: multiply; z-index: 1; transition: opacity 1.6s ease; }
#wash.on { opacity: .2; }

#app { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: var(--pad, 16px); max-width: var(--maxw, 1100px); margin: 0 auto; }
#head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 2.5px solid var(--a); padding-bottom: 6px; flex: none; position: relative; }
#head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2.5px; height: 2.5px; background: var(--bite); background-size: 140px; }
.title { margin: 0; font-family: "Display", Georgia, serif; font-style: italic; font-weight: 400; font-size: var(--titleSize, 44px); line-height: 1; letter-spacing: -.01em;
  text-shadow: calc(var(--slip) * -.5) calc(var(--slip) * .4) 0 rgba(226,85,58,.18); }
.tally { font-size: var(--tallySize, 17px); letter-spacing: .14em; white-space: nowrap; padding-bottom: .2em; }
.tally i { font-family: "Caslon", Georgia, serif; font-style: italic; letter-spacing: 0; font-size: 1.2em; padding: 0 .15em; }
.tally .g { letter-spacing: .14em; }

#stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-top: 6px; }
body.side #stage { flex-direction: row; align-items: center; justify-content: center; gap: 40px; }
#play { display: flex; flex-direction: column; align-items: center; }
#caption { height: var(--capH, 34px); display: flex; align-items: center; justify-content: center; font-family: "Caslon", Georgia, serif; font-style: italic; font-size: var(--capSize, 20px); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s cubic-bezier(.3,1.6,.5,1); white-space: nowrap; }
#caption.on { opacity: 1; transform: none; }
#caption .n { font-family: "Grotesk", sans-serif; font-style: normal; letter-spacing: .14em; font-size: .78em; margin-left: .6em; color: var(--b); }

#tray { display: grid; grid-template-columns: repeat(var(--cols, 5), var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); }
.cell { position: relative; border-radius: calc(var(--cell) * .13); border: 2px solid var(--a); background: rgba(31,95,115,.06); transition: border-width .12s, border-color .12s, transform .12s; }
.cell::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--bite); background-size: 140px; pointer-events: none; opacity: .75; z-index: 3; }
.cell.hot { border-width: 3.5px; border-color: var(--b); }
.cell.sel { border-color: var(--b); border-width: 3px; }
.cell.sel .item { transform: scale(1.08) translateY(-3%); filter: drop-shadow(var(--slip) var(--slip) 0 rgba(31,95,115,.55)); }
.item { position: absolute; inset: 0; transition: transform .16s cubic-bezier(.3,1.7,.5,1), filter .16s; }
.item img, #floater img, .slot img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.item .num { position: absolute; left: 7%; top: 5%; background: var(--paper); padding: 1px 3px 0; border-radius: 3px; font-size: calc(var(--cell) * .15); letter-spacing: .06em; line-height: 1; z-index: 4; }
.item.lifted { opacity: .18; }
.item.stamp img { animation: stamp .46s cubic-bezier(.25,1.4,.5,1) both; }
@keyframes stamp {
  0%   { transform: scale(1.22, .78); filter: drop-shadow(7px -5px 0 rgba(31,95,115,.75)) drop-shadow(-7px 5px 0 rgba(226,85,58,.75)); opacity: .6; }
  35%  { transform: scale(.9, 1.12); filter: drop-shadow(4px -3px 0 rgba(31,95,115,.55)) drop-shadow(-4px 3px 0 rgba(226,85,58,.55)); opacity: 1; }
  65%  { transform: scale(1.05, .96); filter: drop-shadow(0 0 0 rgba(31,95,115,0)) drop-shadow(0 0 0 rgba(226,85,58,0)); }
  100% { transform: none; filter: none; }
}
.item.drop img { animation: drop .32s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes drop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.item.nudge img { animation: nudge .26s cubic-bezier(.3,1.6,.5,1); }
@keyframes nudge { 0% { transform: scale(.92); } 100% { transform: none; } }
.speck { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--b); pointer-events: none; z-index: 5; animation: speck .55s ease-out forwards; }
@keyframes speck { to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }

#floater { position: fixed; left: 0; top: 0; width: var(--cell); height: var(--cell); pointer-events: none; z-index: 40; display: none; }
#floater.on { display: block; }
#floater img { transform: scale(1.16); filter: drop-shadow(var(--slip) var(--slip) 0 rgba(31,95,115,.6)) drop-shadow(calc(var(--slip) * -1) calc(var(--slip) * -.6) 0 rgba(226,85,58,.35)); }

#actions { display: flex; gap: 14px; margin-top: var(--btnGap, 18px); width: var(--btnW, 420px); max-width: 100%; justify-content: center; }
.btn { position: relative; flex: 1; height: var(--btnH, 58px); border: 0; padding: 0; background: none; cursor: pointer; font-family: "Grotesk", sans-serif; font-size: var(--btnSize, 26px); letter-spacing: .2em; color: var(--paper); }
.btn::before { content: ""; position: absolute; inset: 0; transform: translate(calc(var(--slip) + 2px), calc(var(--slip) + 2px)); background: var(--a); border-radius: 8px; }
.btn > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--b); border-radius: 8px; transition: transform .09s; padding-left: .2em; }
.btn > span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bite); background-size: 140px; opacity: .8; pointer-events: none; }
.btn:active > span, .btn.press > span { transform: translate(calc(var(--slip) * .8), calc(var(--slip) * .8)) scale(.99); }
.btn.full, .btn.outline { color: var(--a); cursor: default; }
.btn.full::before, .btn.outline::before { display: none; }
.btn.full > span, .btn.outline > span { background: transparent; border: 2.5px solid var(--a); }
.btn.outline { cursor: pointer; }
.btn.outline > span { border-color: var(--b); color: var(--b); }
.btn[hidden] { display: none; }
#fresh { font-size: calc(var(--btnSize) * .72); letter-spacing: .14em; white-space: nowrap; }
#fresh > span { padding: 0 .4em; }
#help { margin: var(--helpGap, 10px) 0 0; font-family: "Caslon", Georgia, serif; font-style: italic; font-size: var(--helpSize, 15px); text-align: center; opacity: .9; max-width: calc(var(--cell) * 5 + var(--gap) * 4); }

#ledgerWrap { width: 100%; flex: none; }
body.side #ledgerWrap { width: auto; }
.ledgerTitle { margin: 0 0 8px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: var(--ledSize, 16px); letter-spacing: .2em; }
.ledgerTitle::after { content: ""; flex: 1; height: 2px; background: var(--a); }
#ledger { display: grid; grid-template-columns: repeat(var(--lcols, 12), var(--slot)); gap: var(--lgap, 8px) var(--lgapx, 10px); justify-content: space-between; }
.slotBox { display: flex; flex-direction: column; align-items: center; }
.slot { position: relative; width: var(--slot); height: var(--slot); border-radius: 7px; border: 2px dashed var(--a); background: transparent; }
.slot.found { border-style: solid; background: rgba(31,95,115,.05); }
.slot.found::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--bite); background-size: 140px; opacity: .6; pointer-events: none; z-index: 2; }
.slot .n { position: absolute; left: 8%; top: 6%; font-size: calc(var(--slot) * .2); letter-spacing: .06em; line-height: 1; z-index: 3; }
.slot img { inset: 18% 10% 4%; width: 80%; height: 78%; }
.slot.stamping { animation: lstamp .5s cubic-bezier(.25,1.5,.5,1); }
@keyframes lstamp { 0% { transform: scale(1.35, .7); border-color: var(--b); } 45% { transform: scale(.92, 1.08); } 100% { transform: none; } }
.slotName { margin-top: 4px; height: 1.25em; font-family: "Caslon", Georgia, serif; font-style: italic; font-size: var(--nameSize, 13px); white-space: nowrap; letter-spacing: -.01em; }