/* 15 Second Mysteries. the colours are sampled from the show art (img/logo.png) */
:root { --ink: #18070e; --violet: #7a68ff; --lilac: #a79bff; --paper: #f4f1ff; --dim: #a2979d; --food: #f4f1ff; }
/* win at snake and the black and the violet trade places (snake.js adds the class) */
html.flip { --ink: #7a68ff; --violet: #18070e; --lilac: #18070e; --paper: #000; --dim: #18070e; --food: #fff; }
/* snake.js animates the flip itself, so switch off the browser's default cross-fade */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; color: var(--paper); font: 17px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }
main { max-width: 380px; margin: 0 auto; padding: 48px 20px 64px; }

.art { display: block; width: 72px; height: 72px; margin-bottom: 20px; }
/* the cover art, marching ants and all (img/cover.png is used exactly as exported) */
.cover { display: block; width: 100%; height: auto; margin: 0 0 28px; }
h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.15; }
h2 { margin: 36px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lilac); }
p { margin: 0 0 12px; }
a { color: var(--lilac); }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.dim { color: var(--dim); }
.about { margin-top: 20px; font-size: 15px; }
.ks .btn { margin-top: 4px; }
.btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }

.btn, button { display: inline-block; border: 0; padding: 10px 18px; background: var(--violet); color: var(--ink); font: 700 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover, button:hover { background: var(--paper); }
button:disabled { opacity: .4; cursor: default; background: var(--violet); }

#snake { display: block; width: 300px; max-width: 100%; margin-top: 10px; border: 2px solid var(--violet); touch-action: none; }
.hud { display: flex; align-items: center; gap: 18px; margin-top: 12px; font-variant-numeric: tabular-nums; }

.count { font-size: 48px; font-weight: 700; line-height: 1; color: var(--violet); }