/* Horizon, the game: the sheet is the whole screen. */
.play [hidden] { display: none !important; }
body.play { overflow: hidden; height: 100svh; touch-action: none; overscroll-behavior: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 0; touch-action: none; cursor: crosshair; }
.play .nav { z-index: 20; }

.hud {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: 18px; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px;
  font-size: 22px; color: var(--ink-2); pointer-events: none;
}
.hud b { font-weight: 400; color: var(--ink); margin-left: 4px; }
.hud .ink { display: inline-flex; align-items: center; gap: 10px; }
.hud .ink canvas { display: inline-block; width: 190px; height: 26px; vertical-align: middle; }
.hud-buttons { margin-left: auto; display: flex; gap: 22px; pointer-events: auto; }
.hud button {
  pointer-events: auto;
  background: none; border: 0; padding: 0; font-size: 22px; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.hud button:hover { color: var(--red); }

.sheet-card {
  position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  background: color-mix(in srgb, var(--white) 94%, transparent);
  padding: clamp(24px, 4vw, 40px);
  outline: 1px solid var(--line); outline-offset: -10px;
  animation: card-in .8s var(--ease) both;
}
.sheet-card[hidden] { display: none; }
@keyframes card-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 20px)); } }
.sheet-card h1, .sheet-card h2 { margin: 4px 0 14px; font: 340 clamp(52px, 7vw, 84px)/0.95 var(--display); letter-spacing: -0.035em; }
.sheet-card .lede { margin-bottom: 18px; }
.sheet-card .legend { font-size: 25px; line-height: 1.12; color: var(--ink); margin: 0 0 26px; gap: 10px; letter-spacing: 0.02em; }
.sheet-card .legend b { font-weight: 400; color: var(--red); margin-right: 4px; }
.go {
  font: 500 15px var(--sans); color: var(--white); background: var(--ink);
  border: 0; padding: 12px 20px; cursor: pointer; transition: background .2s;
}
.go:hover { background: var(--red); }
.best { font-size: 21px; color: var(--ink-2); margin: 14px 0 0; }
.actions { display: flex; align-items: center; gap: 22px; margin: 22px 0 0; }

@media (max-width: 760px) {
  .hud { font-size: 19px; gap: 2px 18px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .hud .ink canvas { width: 130px; height: 22px; }
  .sheet-card .legend { font-size: 22px; gap: 8px; }
}

/* escapes running out */
#hud-escaped-wrap.danger, #hud-escaped-wrap.danger b { color: var(--red); }
#hud-escaped-wrap.danger { animation: danger 0.9s ease-in-out infinite alternate; }
@keyframes danger { to { opacity: 0.45; } }

/* the board */
.board-wrap { margin-top: 22px; }
.board-title { font-size: 22px; color: var(--ink-2); margin: 0 0 6px; }
.board { list-style: none; margin: 0; padding: 0; counter-reset: rank; max-height: 34vh; overflow: auto; }
.board li {
  counter-increment: rank;
  display: grid; grid-template-columns: 2.2em 3.4em 1fr auto; align-items: baseline; gap: 12px;
  padding: 3px 0; border-bottom: 1px solid var(--rule);
  font: 15px var(--mono);
}
.board li::before { content: counter(rank); font: 20px var(--hand); color: var(--ink-3); }
.board .nm { font-weight: 500; letter-spacing: 0.18em; }
.board .sc { text-align: right; }
.board .wv { font: 18px var(--hand); color: var(--ink-3); min-width: 4.5em; text-align: right; }
.board li.you { color: var(--red); }
.board li.you .wv, .board li.you::before { color: var(--red); }
.board .empty { font: 19px var(--hand); color: var(--ink-3); border: 0; display: block; }

/* arcade initials */
.initials-form { margin: 20px 0 6px; }
.sign-title { font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.initials { display: flex; gap: 14px; outline: none; margin-bottom: 14px; }
.initials .slot { display: flex; flex-direction: column; align-items: center; }
.initials .ch {
  font: 500 46px/1 var(--mono); width: 1.15em; text-align: center; padding: 4px 0 6px;
  border-bottom: 2px solid var(--ink-3);
}
.initials .slot.cur .ch { border-bottom-color: var(--red); color: var(--red); }
.initials:focus-visible .slot.cur .ch { outline: 1.5px dashed var(--red); outline-offset: 4px; }
.initials button { background: none; border: 0; padding: 2px 10px; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.initials button:hover { color: var(--ink); }
.sheet-card { max-height: calc(100svh - 32px); overflow: auto; }
.close { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 2px; font: 500 14px var(--sans); color: var(--ink); cursor: pointer; }
.close:hover { opacity: .55; }

/* the title: drawn in pencil on the overlay canvas, into this space */
#attract { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 31; pointer-events: none; }
.sheet-card .title { margin: 4px 0 14px; line-height: 0; }
.title-art { display: block; width: min(100%, 420px); height: clamp(64px, 10vw, 96px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }