*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  min-height: 100dvh;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: 16px;
  line-height: 1.3;
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art);
  background-size: var(--ak-bg-size);
}

button {
  font-family: inherit;
  color: inherit;
  touch-action: manipulation;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.play {
  --pad-top: max(6px, env(safe-area-inset-top, 0px));
  --pad-bot: max(8px, env(safe-area-inset-bottom, 0px));
  --pad-x: max(8px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --cols: 6;
  --rows: 4;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, 430px);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  padding: var(--pad-top) var(--pad-x) var(--pad-bot);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer);
  background-size: auto, cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.mute {
  position: absolute;
  top: var(--pad-top);
  right: max(8px, env(safe-area-inset-right, 0px));
  z-index: 8;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  background: var(--ak-surface);
  color: var(--ak-ink);
  box-shadow: var(--ak-shadow);
}

.mute:active,
.btn-go:active,
.btn-alt:active {
  transform: translateY(2px);
  box-shadow: none;
}

.mute-icon {
  width: 22px;
  height: 22px;
}

.mute-icon .slash {
  display: none;
}

.mute.is-muted .wave {
  display: none;
}

.mute.is-muted .slash {
  display: block;
}

.top,
.voice,
.goal,
.why,
.meta {
  position: relative;
  z-index: 6;
}

.top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding-right: 52px;
}

.play-logo {
  display: block;
  width: auto;
  height: 36px;
  max-width: 46%;
  object-fit: contain;
}

.turn {
  min-width: 0;
}

.turn-who {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: clamp(20px, 5.4vw, 28px);
  font-weight: var(--ak-title-weight);
  line-height: 1;
  color: var(--ak-accent);
}

.turn-sub {
  margin: 2px 0 0;
  color: var(--ak-ink);
  font-size: 14px;
  font-weight: 800;
}

.voice,
.goal,
.why {
  margin: 0;
  padding: 6px 10px;
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  background: color-mix(in srgb, var(--ak-surface) 92%, transparent);
  box-shadow: var(--ak-shadow);
}

.voice {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ak-ink);
}

.voice.is-invite {
  border-color: var(--ak-accent);
}

.goal {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ak-ink);
}

.why {
  color: var(--ak-accent);
  font-family: var(--ak-font-display);
  font-size: 16px;
  font-weight: var(--ak-title-weight);
  line-height: 1.25;
}

.meta {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-height: 48px;
}

.stat {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 8px;
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  background: var(--ak-surface);
  box-shadow: var(--ak-shadow);
}

.stat-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
  line-height: 1;
}

.stat-value {
  font-family: var(--ak-font-display);
  font-size: clamp(18px, 5vw, 26px);
  font-weight: var(--ak-title-weight);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--ak-ink);
  transform-origin: left center;
}

.board-slot {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
  overflow: hidden;
}

.board {
  position: relative;
  width: 100%;
  width: min(100cqw, calc(100cqh * var(--cols) * 284 / (var(--rows) * 384)));
  max-width: 100%;
}

.towel {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: 118%;
  height: 168%;
  transform: translateX(-50%);
  object-fit: fill;
  object-position: center bottom;
  pointer-events: none;
  z-index: 0;
}

.grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: clamp(2px, 0.8cqmin, 6px);
  width: 94%;
  margin-inline: auto;
  aspect-ratio: calc(var(--cols) * 284 / (var(--rows) * 384));
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 700px;
  container-type: size;
}

.card:active:not(:disabled) {
  transform: translateY(2px) scale(0.94);
}

.card.is-gone {
  visibility: hidden;
  pointer-events: none;
}

.lift,
.flipper,
.side {
  position: absolute;
  inset: 0;
}

.flipper {
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}

.card.is-up .flipper {
  transform: rotateY(180deg);
}

.side {
  overflow: hidden;
  border-radius: 12%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--ak-outline) 30%, transparent));
}

.card.is-up .side {
  filter: drop-shadow(0 7px 0 color-mix(in srgb, var(--ak-outline) 28%, transparent));
}

.card:active .side {
  filter: none;
}

.front {
  transform: rotateY(180deg);
}

.side img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.ink {
  position: absolute;
  inset: 6% 8% 7% 7%;
  border-radius: 12%;
  background: #f7eecd;
  color: var(--ak-ink);
}

.ink.is-red {
  color: #d0122c;
}

.corner,
.center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.corner {
  top: 2%;
  left: 5%;
  font-size: 22cqmin;
  line-height: 0.8;
}

.corner.is-flip {
  top: auto;
  left: auto;
  right: 5%;
  bottom: 2%;
  transform: rotate(180deg);
}

.center {
  inset: 8% 0 0;
}

.ink b {
  font-family: var(--ak-font-body);
  font-weight: 800;
  font-size: 1em;
  line-height: 0.85;
}

.center b {
  font-size: clamp(13px, 58cqmin, 72px);
}

.center b.is-ten {
  font-size: clamp(12px, 44cqmin, 56px);
}

.corner b.is-ten {
  font-size: 0.82em;
}

.pip-svg {
  display: block;
  width: 0.72em;
  height: 0.64em;
}

.center .pip-svg {
  width: 30cqmin;
  height: 26cqmin;
  margin-top: 1%;
}

@container (max-width: 48px) {
  .corner {
    display: none;
  }

  .center b {
    font-size: clamp(16px, 72cqmin, 80px);
  }

  .center b.is-ten {
    font-size: clamp(14px, 56cqmin, 64px);
  }

  .center .pip-svg {
    width: 34cqmin;
    height: 30cqmin;
  }
}

.card:focus-visible,
.mute:focus-visible,
.btn-go:focus-visible,
.btn-alt:focus-visible {
  outline: 3px solid var(--ak-focus);
  outline-offset: 3px;
}

.sun,
.fx {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.sun {
  left: 50%;
  top: 42%;
  width: min(46%, 160px);
  height: min(46%, 160px);
  opacity: 0;
  background: repeating-conic-gradient(
    var(--ak-accent) 0deg 12deg,
    transparent 12deg 26deg
  );
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 32% 70%, transparent 74%);
  mask: radial-gradient(circle, transparent 28%, #000 32% 70%, transparent 74%);
}

.fx {
  inset: 0;
  overflow: hidden;
}

.spark {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 8px;
  height: 12px;
  border-radius: 3px;
  background: var(--ak-accent);
  box-shadow: 0 0 0 2px var(--ak-outline);
}

.spark.is-cool {
  background: var(--ak-accent-2);
}

.result {
  position: absolute;
  z-index: 5;
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

.result-card {
  padding: 12px;
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  background: var(--ak-surface);
  box-shadow: var(--ak-shadow);
}

.result-says {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: clamp(20px, 5vw, 28px);
  font-weight: var(--ak-title-weight);
  line-height: 1.15;
  color: var(--ak-ink);
}

.result-score {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ak-accent);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.btn-go,
.btn-alt {
  flex: 1 1 140px;
  min-height: 48px;
  padding: 0 12px;
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
  font-family: var(--ak-font-display);
  font-size: 18px;
  font-weight: var(--ak-title-weight);
}

.btn-go {
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}

.btn-alt {
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .play-logo {
    animation: bob 3.2s ease-in-out infinite;
  }

  .voice.is-invite {
    animation: invite 1.8s ease-in-out infinite;
  }

  .turn.is-cue .turn-who {
    animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .stat-value.is-bump {
    animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .card.is-deal {
    animation: deal-in 0.45s cubic-bezier(0.34, 1.45, 0.64, 1) both;
    animation-delay: calc(var(--i) * 16ms);
  }

  .card.is-down:not(.is-up):not(.is-leave):not(.is-gone) .lift {
    animation: bob 3.1s ease-in-out infinite;
    animation-delay: calc(var(--i) * 70ms);
  }

  .card.is-hop .flipper {
    animation: hop 0.42s cubic-bezier(0.34, 1.45, 0.64, 1);
  }

  .card.is-up.is-wobble .flipper {
    animation: wobble 0.46s ease-in-out;
  }

  .card.is-shake {
    animation: shake 0.36s ease-in-out;
  }

  .card.is-match .flipper {
    animation: nudge-right 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .card[data-nudge="left"].is-match .flipper {
    animation-name: nudge-left;
  }

  .card.is-last.is-match .flipper {
    animation-duration: 0.5s;
  }

  .card.is-leave .flipper {
    animation: slide-off 0.52s ease-in forwards;
  }

  .card[data-nudge="left"].is-leave .flipper {
    animation-name: slide-off-left;
  }

  .board.is-chase::after {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: 2;
    border-radius: 28px;
    pointer-events: none;
    animation: chase 1.05s linear 2;
  }

  .sun.is-on {
    animation: sunburst 0.95s ease-out forwards;
  }

  .spark {
    animation: spark 0.9s ease-out forwards;
  }

  .flipper {
    transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
  }
}

@keyframes bob {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes invite {
  0%,
  100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes deal-in {
  0% { opacity: 0; transform: translateY(14px) scale(0.82); }
  100% { opacity: 1; transform: none; }
}

@keyframes hop {
  0% { transform: rotateY(0deg) translateY(0) scale(1, 1); }
  40% { transform: rotateY(92deg) translateY(-12%) scale(1.08, 0.9); }
  100% { transform: rotateY(180deg) translateY(0) scale(1); }
}

@keyframes wobble {
  0% { transform: rotateY(180deg) rotate(0deg); }
  25% { transform: rotateY(180deg) rotate(-8deg) scale(1.05, 0.96); }
  50% { transform: rotateY(180deg) rotate(7deg) scale(0.98, 1.04); }
  75% { transform: rotateY(180deg) rotate(-4deg); }
  100% { transform: rotateY(180deg) rotate(0deg); }
}

@keyframes shake {
  0%,
  100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-2deg); }
  75% { transform: translateX(4px) rotate(2deg); }
}

@keyframes nudge-right {
  0% { transform: rotateY(180deg) translateX(0) scale(1); }
  45% { transform: rotateY(180deg) translateX(14%) scale(1.14, 0.9); }
  100% { transform: rotateY(180deg) translateX(6%) scale(1.04); }
}

@keyframes nudge-left {
  0% { transform: rotateY(180deg) translateX(0) scale(1); }
  45% { transform: rotateY(180deg) translateX(-14%) scale(1.14, 0.9); }
  100% { transform: rotateY(180deg) translateX(-6%) scale(1.04); }
}

@keyframes slide-off {
  0% { transform: rotateY(180deg) translate(8%, 0) scale(1.06); opacity: 1; }
  35% { transform: rotateY(180deg) translate(4%, -18%) scale(1.16); opacity: 1; }
  100% { transform: rotateY(180deg) translate(0, -150%) scale(0.72); opacity: 0; }
}

@keyframes slide-off-left {
  0% { transform: rotateY(180deg) translate(-8%, 0) scale(1.06); opacity: 1; }
  35% { transform: rotateY(180deg) translate(-4%, -18%) scale(1.16); opacity: 1; }
  100% { transform: rotateY(180deg) translate(0, -150%) scale(0.72); opacity: 0; }
}

@keyframes chase {
  0% { box-shadow: 6px 0 0 0 var(--ak-accent), 0 0 16px var(--ak-glow); }
  25% { box-shadow: 0 6px 0 0 var(--ak-accent-2), 0 0 16px var(--ak-glow); }
  50% { box-shadow: -6px 0 0 0 var(--ak-accent), 0 0 18px var(--ak-glow); }
  75% { box-shadow: 0 -6px 0 0 var(--ak-accent-2), 0 0 16px var(--ak-glow); }
  100% { box-shadow: 6px 0 0 0 var(--ak-accent), 0 0 16px var(--ak-glow); }
}

@keyframes sunburst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(0deg); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35) rotate(36deg); }
}

@keyframes spark {
  to {
    transform: translate(var(--dx), var(--dy)) rotate(200deg);
    opacity: 0;
  }
}