:root {
  --page: #f7f6f2;
  --panel: #ffffff;
  --panelSubtle: #f0eee8;
  --ink: #161616;
  --mutedInk: #76736c;
  --divider: #dedbd3;
  --button: #161616;
  --buttonInk: #ffffff;
  --focus: #8f7c4f;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
  background: var(--page);
}

button {
  font: inherit;
}

.appHeader {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}

.appTitle {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.rouletteApp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100svh;
  background: var(--divider);
  gap: 1px;
}

.wordPanel {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: clamp(28px, 7vw, 96px);
  background: var(--panel);
}

.wordPanel_thing {
  background: var(--panelSubtle);
}

.panelLabel {
  margin: 0 0 18px;
  color: var(--mutedInk);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.wordDisplay {
  width: min(100%, 720px);
  min-height: 2.4em;
  overflow-wrap: anywhere;
  font-size: clamp(40px, 6.4vw, 96px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
  transform-origin: left center;
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.wordPanel_thing .wordDisplay {
  justify-self: end;
  text-align: right;
  transform-origin: right center;
}

.wordPanel.isSpinning .wordDisplay {
  animation: wordTick 100ms steps(2, end) infinite;
}

.wordPanel.isLocked .wordDisplay {
  animation: wordLock 360ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

.spinButton {
  position: fixed;
  left: 50%;
  bottom: clamp(22px, 5vw, 48px);
  display: inline-grid;
  place-items: center;
  min-width: 116px;
  height: 56px;
  padding: 0 28px;
  border: 1px solid var(--button);
  border-radius: 999px;
  color: var(--buttonInk);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  background: var(--button);
  cursor: pointer;
  transform: translateX(-50%);
  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.spinButton:hover:not(:disabled) {
  color: var(--button);
  background: var(--buttonInk);
  transform: translateX(-50%) translateY(-2px);
}

.spinButton:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.spinButton:disabled {
  cursor: wait;
}

.buttonBusy {
  display: none;
}

.spinButton.isRunning .buttonIdle {
  display: none;
}

.spinButton.isRunning .buttonBusy {
  display: inline;
}

@keyframes wordTick {
  0% {
    opacity: 0.72;
    transform: translateY(-1px);
  }

  100% {
    opacity: 1;
    transform: translateY(1px);
  }
}

@keyframes wordLock {
  0% {
    transform: scale(0.97);
  }

  70% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 720px) {
  body {
    overflow: auto;
  }

  .rouletteApp {
    grid-template-columns: 1fr;
  }

  .wordPanel {
    min-height: 50svh;
    padding: 32px 24px 92px;
  }

  .wordPanel_thing .wordDisplay {
    justify-self: start;
    text-align: left;
    transform-origin: left center;
  }

  .spinButton {
    bottom: 24px;
    min-width: 104px;
    height: 52px;
    padding: 0 24px;
  }

  .appHeader {
    top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}