:root {
  --ink: #0b1030;
  --amber: #ffb24a;
  --bone: #eef0f7;
  --dim: rgba(238, 240, 247, 0.55);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--bone); font-family: var(--font); overflow: hidden; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; cursor: crosshair; }
body[data-state="playing"] canvas#game { cursor: none; }

#cards { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; }
.card { pointer-events: auto; text-align: center; max-width: min(92vw, 560px); padding: 32px 28px;
  background: rgba(6, 8, 22, 0.62); border: 1px solid rgba(255, 178, 74, 0.18); border-radius: 6px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: card-in .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes card-in { from { transform: translateY(14px); } to { transform: translateY(0); } }
.card[hidden] { display: none; }
h1 { font-size: clamp(64px, 14vw, 128px); letter-spacing: 0.12em; margin: 0 0 6px; font-weight: 800; line-height: 1;
  color: var(--amber); text-shadow: 0 0 28px rgba(255, 178, 74, 0.45), 0 0 90px rgba(255, 178, 74, 0.18); }
h2 { font-size: 26px; letter-spacing: 0.18em; text-transform: lowercase; margin: 0 0 18px; font-weight: 600; color: var(--amber); }
.line { font-size: 17px; color: var(--bone); margin: 0 0 28px; opacity: .92; }
.hint { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin: 18px 0 0; }
button { font: 600 13px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  background: var(--amber); border: 0; border-radius: 4px; padding: 14px 22px; cursor: pointer; margin: 4px;
  box-shadow: 0 0 24px rgba(255, 178, 74, 0.28); transition: transform .12s ease, box-shadow .12s ease; }
button:hover, button:focus-visible { transform: translateY(-1px); box-shadow: 0 0 34px rgba(255, 178, 74, 0.45); outline: 0; }
button.quiet { background: transparent; color: var(--dim); box-shadow: none; border: 1px solid rgba(238,240,247,.18); }
dl.controls { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; text-align: left; margin: 0 0 22px; font-size: 13.5px; }
dl.controls dt { color: var(--amber); font-weight: 600; white-space: nowrap; }
dl.controls dd { margin: 0; color: var(--bone); opacity: .88; }
dl.tally { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin: 0 0 22px; font-size: 15px; }
dl.tally dt { text-align: right; color: var(--dim); letter-spacing: .12em; text-transform: lowercase; }
dl.tally dd { text-align: left; margin: 0; font-variant-numeric: tabular-nums; color: var(--bone); font-size: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the fail dip and the ending are on the canvas; the only CSS effect is a soft page fade */
#cards::before { content: ''; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
body[data-fade="1"] #cards::before { opacity: 1; }

@media (max-width: 640px) {
  .card { padding: 22px 16px; }
  dl.controls { grid-template-columns: 1fr; gap: 2px 0; }
  dl.controls dd { margin-bottom: 8px; }
}