/* site/game/game.css — game screens. Tokens mirror site/css/styles.css. */
@font-face { font-family: 'Archivo Black'; src: url('../fonts/archivo-black-v23-latin-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/space-mono-v17-latin-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/space-mono-v17-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink: #0B0D11; --bone: #F2EFE6;
  --cobalt: #2B65F2; --violet: #7C4EEF; --lime: #9BFA04; --teal: #4FD6C5;
  --display: 'Archivo Black', Impact, 'Arial Black', sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--ink); color: var(--bone); }
body { font-family: var(--mono); }

#app { max-width: 430px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; gap: 18px; padding: 22px 18px 40px; }

.meta { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.title { font-family: var(--display); text-transform: uppercase; font-size: 40px; line-height: .98; letter-spacing: -.01em; }
.sub { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.6; opacity: .85; }

.btn { display: block; width: 100%; border: 0; cursor: pointer; font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 14px; background: var(--cobalt); color: var(--bone); }
.btn.lime { background: var(--lime); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--bone); outline: 2px solid var(--bone); outline-offset: -2px; }
.btn:disabled { opacity: .4; cursor: default; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.field input, .field textarea { background: transparent; border: 2px solid var(--bone); color: var(--bone); font-family: var(--mono); font-size: 16px; letter-spacing: .08em; padding: 10px; text-transform: uppercase; }
.field textarea { min-height: 120px; text-transform: none; letter-spacing: .02em; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--cobalt); outline-offset: 2px; }

.error { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); min-height: 16px; }

.ingredients { display: flex; flex-direction: column; gap: 10px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.4; }
.ingredients .num { color: var(--lime); margin-right: 10px; }

.reel { border: 2px solid var(--bone); height: 220px; overflow: hidden; position: relative; }
.reel .cell { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px dashed rgba(242, 239, 230, .3); }
.reel .cell.hit { background: var(--lime); color: var(--ink); font-weight: 700; }

.hintcard { border: 2px solid var(--lime); padding: 12px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.6; }
.hintcard .chip { display: inline-block; background: var(--bone); color: var(--ink); font-size: 9px; padding: 2px 6px; letter-spacing: .08em; margin-bottom: 6px; }

.renderbar { border: 2px solid var(--bone); height: 28px; position: relative; overflow: hidden; }
.renderbar .fill { position: absolute; inset: 0; width: 99%; background: repeating-linear-gradient(45deg, var(--teal) 0 6px, transparent 6px 12px); animation: crawl 1.1s linear infinite; }
.renderbar .pct { position: absolute; right: 6px; top: 4px; font-size: 12px; font-weight: 700; }
@keyframes crawl { from { background-position: 0 0; } to { background-position: 17px 0; } }

.take-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #15181f; }
.made-with { font-size: 10px; letter-spacing: .16em; color: rgb(242 239 230 / 60%); margin-top: -8px; }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }

.barcode { height: 26px; background: repeating-linear-gradient(90deg, var(--bone) 0 2px, transparent 2px 5px, var(--bone) 5px 6px, transparent 6px 10px); }

.walink { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* recipe reference in the studio (C8) — collapsed by default, one tap to open */
.recipe { border: 1px solid rgb(242 239 230 / 20%); padding: 10px 14px; margin: 0; }
.recipe summary { cursor: pointer; letter-spacing: .08em; font-size: 12px; list-style: none; }
.recipe summary::-webkit-details-marker { display: none; }
.recipe .ingredients { margin-top: 10px; }
.recipe .sub { margin-top: 10px; }