:root {
  color-scheme: dark;
  --bg: #05010f;
  --fg: #e8f9ff;
  --muted: #7b6f9c;
  --bar: #05010f;
  --bar-fg: #e8f9ff;
  --mag: #ff2bd6;
  --cy: #00f0ff;
  --yel: #f9f002;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

html {
  /* iOS tints the status bar area from the page background, not from the
     header, so the page behind everything is the bar colour and main paints
     the content colour over it. */
  background: var(--bar);
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bar);
  color: var(--fg);
  font: 14px/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Stop the page itself bouncing or zooming like a website. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* CRT scanlines over everything. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: repeating-linear-gradient(rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px);
  animation: flicker 4s steps(1) infinite;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Keep clear of the notch and status bar when installed. */
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--bar);
  color: var(--bar-fg);
  border-bottom: 1px solid var(--mag);
  box-shadow: 0 0 18px var(--mag);
  z-index: 2;
}

h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
  color: var(--yel);
  text-shadow: 0 0 12px var(--yel);
}

#status {
  font-size: 0.75rem;
  color: var(--mag);
}

main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #2a0845 0%, var(--bg) 65%);
  padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px);
}

/* A neon floor racing towards the viewer. */
main::before {
  content: '';
  position: absolute;
  inset: 45% -60% -30% -60%;
  background:
    repeating-linear-gradient(90deg, var(--mag) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(0deg, var(--mag) 0 2px, transparent 2px 48px);
  transform: perspective(260px) rotateX(62deg);
  transform-origin: 50% 0;
  opacity: 0.35;
  animation: floor 0.9s linear infinite;
  mask-image: linear-gradient(transparent, #000 45%);
  -webkit-mask-image: linear-gradient(transparent, #000 45%);
}

main.glitching {
  animation: tear 0.38s steps(2) 1;
}

.frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 540px, calc(100dvh - 250px));
  min-width: 250px;
}

/* ---- heads-up display ---- */

.hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: stretch;
}

.side {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  padding: 4px 8px;
  background: rgb(5 1 15 / 0.8);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.side.you {
  color: var(--mag);
  box-shadow: inset 0 0 0 1px var(--mag), inset 0 0 14px var(--mag);
}

.side.ai {
  color: var(--cy);
  box-shadow: inset 0 0 0 1px var(--cy), inset 0 0 14px var(--cy);
}

.side.active {
  animation: throb 0.7s ease-in-out infinite alternate;
}

.side b {
  font-size: 1.5rem;
  line-height: 1;
  text-shadow: 0 0 10px currentColor;
}

.side b.bump {
  animation: bump 0.5s cubic-bezier(0.2, 2.2, 0.4, 1);
}

.side small,
.tag {
  font-size: 0.625rem;
}

.mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
}

#turn {
  font-size: 1rem;
  font-weight: 800;
  color: var(--yel);
  text-shadow: 0 0 10px var(--yel);
  white-space: nowrap;
}

.bar {
  height: 6px;
  background: var(--mag);
  box-shadow: 0 0 8px var(--mag);
  display: flex;
  justify-content: flex-end;
}

/* The A.I.'s share of the bar is its estimated chance of winning. */
.bar i {
  width: 50%;
  background: var(--cy);
  box-shadow: 0 0 8px var(--cy);
  transition: width 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}

#sims {
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- board ---- */

.boardwrap {
  position: relative;
  aspect-ratio: 1;
  background: rgb(5 1 15 / 0.82);
  box-shadow: 0 0 0 1px var(--cy), 0 0 30px rgb(0 240 255 / 0.45), inset 0 0 40px rgb(255 43 214 / 0.2);
  animation: hum 3s ease-in-out infinite alternate;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

#banner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgb(5 1 15 / 0.55);
  animation: slam 0.5s cubic-bezier(0.2, 1.8, 0.4, 1);
}

#banner[hidden] {
  display: none;
}

#verdict {
  font-size: clamp(2.2rem, 13vw, 4.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: var(--yel);
  text-shadow: 0 0 24px var(--yel);
}

#banner.lost #verdict {
  color: #ff2244;
  text-shadow: 0 0 24px #ff2244;
}

#tally {
  font-size: 0.875rem;
  text-shadow: 0 0 8px var(--cy);
}

/* ---- buttons ---- */

.controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

button {
  font: inherit;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cy);
  background: rgb(0 240 255 / 0.08);
  border: 0;
  padding: 12px 0;
  box-shadow: inset 0 0 0 1px var(--cy), inset 0 0 12px rgb(0 240 255 / 0.5);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  text-shadow: 0 0 8px var(--cy);
  transition: transform 0.08s;
}

button:active {
  transform: scale(0.92) skewX(-8deg);
  color: var(--bg);
  background: var(--cy);
}

button:disabled {
  opacity: 0.35;
}

button.off {
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--muted);
  text-shadow: none;
}

#again,
#pass {
  color: var(--yel);
  background: rgb(249 240 2 / 0.08);
  box-shadow: inset 0 0 0 1px var(--yel), inset 0 0 12px rgb(249 240 2 / 0.5);
  text-shadow: 0 0 8px var(--yel);
}

#again {
  padding: 14px 28px;
  font-size: 1rem;
  animation: throb 0.6s ease-in-out infinite alternate;
}

/* ---- glitch text: two offset, sliced copies of the same words ---- */

.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glitch::before {
  color: var(--cy);
  text-shadow: none;
  transform: translate(-2px, 0);
  animation: slice 2.3s steps(1) infinite;
}

.glitch::after {
  color: var(--mag);
  text-shadow: none;
  transform: translate(2px, 0);
  animation: slice 1.7s steps(1) infinite reverse;
}

@keyframes slice {
  0% { clip-path: inset(0 0 85% 0); }
  8% { clip-path: inset(60% 0 10% 0); transform: translate(4px, 0); }
  16% { clip-path: inset(30% 0 45% 0); }
  24% { clip-path: inset(80% 0 0 0); transform: translate(-5px, 0); }
  32% { clip-path: inset(100% 0 0 0); }
  70% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, 0); }
  78% { clip-path: inset(50% 0 25% 0); }
  86% { clip-path: inset(100% 0 0 0); }
}

@keyframes floor {
  to { background-position: 0 48px, 0 48px; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 0.75; }
  49% { opacity: 1; }
  83% { opacity: 0.6; }
  84% { opacity: 1; }
}

@keyframes tear {
  0% { transform: translate(-8px, 2px) skewX(6deg); filter: hue-rotate(90deg) saturate(3); }
  25% { transform: translate(9px, -3px) skewX(-9deg); filter: invert(1); }
  50% { transform: translate(-5px, 4px) skewX(4deg); filter: hue-rotate(-120deg) saturate(4); }
  75% { transform: translate(6px, -2px); filter: none; }
  100% { transform: none; filter: none; }
}

@keyframes throb {
  from { filter: brightness(0.9); }
  to { filter: brightness(1.7); }
}

@keyframes bump {
  0% { transform: scale(3.2) rotate(-12deg); }
  100% { transform: none; }
}

@keyframes hum {
  from { box-shadow: 0 0 0 1px var(--cy), 0 0 22px rgb(0 240 255 / 0.35), inset 0 0 40px rgb(255 43 214 / 0.15); }
  to { box-shadow: 0 0 0 1px var(--cy), 0 0 44px rgb(0 240 255 / 0.7), inset 0 0 60px rgb(255 43 214 / 0.35); }
}

@keyframes slam {
  0% { transform: scale(3.5); opacity: 0; filter: blur(12px); }
  100% { transform: none; opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  main::before,
  .glitch::before,
  .glitch::after,
  .boardwrap {
    animation: none;
  }
}