/*  sk-arcade.css — the house furniture for the short pictures.
 *
 *  The six Round One stages each carried their own copy of this block
 *  inline, identical but for the odd pixel, which is how the pad ended up
 *  a different size on two of them. It now lives here once.
 *
 *  Loaded before sk-touch-44.css and sk-play-parity.css, which keep the
 *  last word on touch targets and safe areas the way they always have.
 */

:root {
  --sk-ink:    #14110F;
  --sk-pitch:  #0E0C0A;
  --sk-stock:  #EDE3D0;
  --sk-sepia:  #C9A876;
  --sk-fisik:  #7A8B54;
  --sk-claret: #A65D4A;
  --sk-dim:    #8A7F6D;
  --sk-rule:   #4A4136;
  --sk-lamp:   #F5E6A0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--sk-pitch);
  color: var(--sk-stock);
  font-family: Spectral, Georgia, serif;
  overflow: hidden;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
}

body.play-frame { display: flex; flex-direction: column; }

/* ---- the title bar ---------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .65rem;
  padding-top: max(.35rem, env(safe-area-inset-top));
  padding-left: max(.65rem, env(safe-area-inset-left));
  padding-right: max(.65rem, env(safe-area-inset-right));
  background: #16120F;
  border-bottom: 1px solid var(--sk-rule);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 5;
}
.top a {
  color: var(--sk-sepia);
  text-decoration: none;
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center;
  padding: 0 8px;
}
.top a:focus-visible { outline: 2px solid var(--sk-sepia); outline-offset: -2px; }
.top .t {
  flex: 1;
  color: var(--sk-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top .s {
  color: var(--sk-stock);
  font-variant-numeric: tabular-nums;
}

/* ---- the picture ------------------------------------------------------ */

#c {
  flex: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  background: #12100E;
}

/* The film gate parents its overlay to the canvas's own box, so the box
   has to be a positioning context or the gate lands in the wrong place. */
body.play-frame { position: relative; }

/* ---- the readout ------------------------------------------------------ */

.hud {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  top: calc(48px + env(safe-area-inset-top));
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--sk-sepia);
  pointer-events: none;
  text-shadow: 0 1px 3px #000;
  z-index: 4;
  line-height: 1.45;
  max-width: 60vw;
  font-variant-numeric: tabular-nums;
}
.hud b { color: var(--sk-lamp); font-weight: 400; }

/* ---- the pad ---------------------------------------------------------- */

.pad {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
  z-index: 6;
}
.pad.left {
  right: auto;
  left: max(12px, env(safe-area-inset-left));
}
.pad button {
  min-width: 58px; min-height: 58px;
  border-radius: 50%;
  border: 1px solid var(--sk-rule);
  background: rgba(22,18,15,.92);
  color: var(--sk-stock);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  transition: background .06s linear, transform .06s linear;
}
.pad button:active,
.pad button.active {
  background: var(--sk-sepia);
  color: var(--sk-pitch);
  transform: scale(.94);
}
.pad button:focus-visible { outline: 2px solid var(--sk-lamp); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pad button { transition: none; }
  .pad button:active, .pad button.active { transform: none; }
}

/* ---- the card --------------------------------------------------------- */

.msg {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,6,4,.90);
  z-index: 10;
  text-align: center;
  padding: 1.5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
.msg > div { max-width: 26rem; }
.msg h2 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 500;
  font-size: 1.75rem;
  margin-bottom: .5rem;
  letter-spacing: -.01em;
}
.msg p {
  color: var(--sk-dim);
  max-width: 22rem;
  margin: 0 auto 1rem;
  line-height: 1.5;
}
.msg button {
  margin: .2rem;
  min-height: 48px; min-width: 132px;
  padding: .7rem 1.3rem;
  border: 1px solid var(--sk-sepia);
  background: transparent;
  color: var(--sk-sepia);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.msg button.primary { background: var(--sk-sepia); color: var(--sk-pitch); }
.msg button:focus-visible { outline: 2px solid var(--sk-lamp); outline-offset: 2px; }

/* The best line the runtime writes. Quiet until it is a new one, then
   it is the only warm thing on the card. */
.best-line {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sk-dim);
  margin: 0 auto 1rem;
  min-height: 1em;
}
.best-line.is-new { color: var(--sk-lamp); }

/* The keys line under the card — desks only. A phone has no Space bar
   and telling it about one is how you lose the player on the first screen. */
.keys-line {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: #5F564A;
  margin-top: 1rem;
}
@media (hover: none), (pointer: coarse) { .keys-line { display: none; } }