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

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

body {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  font-family: var(--ak-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ak-ink);
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art);
  background-size: var(--ak-bg-size);
}

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

img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

[hidden] {
  display: none !important;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.play {
  --pad-top: max(6px, env(safe-area-inset-top, 0px));
  --pad-bot: max(8px, env(safe-area-inset-bottom, 0px));
  --pad-x: max(10px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, 420px);
  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-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.bubbles,
.sleeve {
  position: absolute;
  pointer-events: none;
}

.bubbles {
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bubbles i {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ak-accent) 72%, var(--ak-surface));
  border: 2px solid var(--ak-ink);
}

.bubbles i:nth-child(1) { left: 6%; bottom: 8%; width: 20px; height: 20px; }
.bubbles i:nth-child(2) { left: 16%; bottom: 3%; width: 12px; height: 12px; }
.bubbles i:nth-child(3) { right: 7%; bottom: 14%; width: 24px; height: 24px; }
.bubbles i:nth-child(4) { right: 18%; top: 18%; width: 11px; height: 11px; }

.sleeve {
  top: 248px;
  right: 6px;
  z-index: 4;
  width: 36px;
  height: 64px;
}

.sleeve path:first-child {
  fill: var(--ak-surface);
  stroke: var(--ak-ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.sleeve path:last-child {
  fill: color-mix(in srgb, var(--ak-accent-2) 18%, var(--ak-surface));
  stroke: var(--ak-ink);
  stroke-width: 3;
}

.mute {
  position: absolute;
  top: var(--pad-top);
  right: max(4px, env(safe-area-inset-right, 0px));
  z-index: 9;
  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);
  cursor: pointer;
}

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

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

.mute.is-muted::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 3px;
  background: var(--ak-accent-2);
  transform: rotate(-35deg);
}

.top,
.voice,
.lab,
.end,
.btn-hint {
  position: relative;
  z-index: 2;
}

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

.play-logo {
  height: 42px;
  width: auto;
  max-width: 46%;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 var(--ak-outline));
}

.turn {
  min-width: 0;
}

.turn-who {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--ak-ink);
}

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

.voice {
  margin: 0;
  min-height: 44px;
  padding: 8px 10px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
  font-size: 15px;
  line-height: 1.35;
}

.voice.is-invite {
  font-family: var(--ak-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ak-accent);
}

.lab {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 6px 8px;
  background: color-mix(in srgb, var(--ak-surface) 48%, transparent);
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
}

.meters {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 56px;
  gap: 8px;
}

.meter {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 2px 8px 2px 2px;
  background: var(--ak-surface);
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
}

.meter-worth {
  padding: 2px 10px;
}

.meter-copy {
  margin: 0;
  min-width: 42px;
}

.kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.meter-copy strong {
  display: block;
  font-family: var(--ak-font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--ak-ink);
}

#count.is-hot {
  color: var(--ak-accent);
}

#count.is-low {
  color: var(--ak-accent-2);
}

.vial {
  position: relative;
  width: 42px;
  height: 52px;
  flex: 0 0 auto;
}

.vial-img,
.vial-pop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vial-pop {
  opacity: 0;
  transform: scale(0.7);
}

.dials {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: 6px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.dial {
  width: 30px;
  height: 30px;
  overflow: visible;
}

.dial circle {
  fill: var(--ak-accent-2);
  stroke: var(--ak-ink);
  stroke-width: 2;
}

.dial line {
  stroke: var(--ak-accent);
  stroke-width: 3;
  stroke-linecap: round;
}

.window {
  position: relative;
  width: min(72vw, 40dvh, 300px);
  height: min(72vw, 40dvh, 300px);
  flex: 0 1 auto;
}

.picture {
  position: absolute;
  left: 23%;
  top: 23%;
  width: 54%;
  height: 54%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, var(--ak-surface), color-mix(in srgb, var(--ak-accent-2) 28%, var(--ak-surface)) 72%);
  overflow: hidden;
}

.picture svg {
  width: 92%;
  height: 92%;
}

.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.shapes {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: min(22dvh, 132px);
  min-height: 80px;
  padding-top: 14px;
}

.shape {
  position: relative;
  flex: 1 1 0;
  min-width: 48px;
  min-height: 48px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.shape:nth-child(2n) {
  transform: translateY(6px);
}

.shape-body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.tile {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mark {
  position: absolute;
  left: 12%;
  top: 18%;
  width: 76%;
  height: 56%;
  display: grid;
  place-items: center;
  background: var(--ak-surface);
  border: 2px solid var(--ak-ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ak-accent-2) 35%, var(--ak-surface));
}

.mark svg,
.chip svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.outline {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.outline.is-green {
  stroke: var(--ak-accent);
  stroke-width: 8;
}

.pop {
  position: absolute;
  left: 8%;
  top: 0;
  width: 84%;
  height: 84%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}

.shape.is-yes .pop {
  opacity: 1;
}

.shape.is-yes .mark {
  background: color-mix(in srgb, var(--ak-accent) 28%, var(--ak-surface));
  box-shadow: 0 0 0 3px var(--ak-accent);
}

.shape.is-no .shape-body {
  opacity: 0.55;
}

.shape.is-no .mark {
  background: color-mix(in srgb, var(--ak-ink) 12%, var(--ak-surface));
}

.shape.is-real .mark {
  background: color-mix(in srgb, var(--ak-accent) 34%, var(--ak-surface));
  box-shadow: 0 0 0 3px var(--ak-accent);
}

.shape.is-real .outline {
  stroke: var(--ak-accent);
}

.shape.is-coach .shape-body {
  outline: 3px solid var(--ak-accent);
  outline-offset: 1px;
  border-radius: 12px;
}

.shape.is-coach::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--ak-accent);
}

.shape:disabled {
  cursor: default;
}

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

.btn-hint,
.btn-go,
.btn-alt {
  min-height: 48px;
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
  font-family: var(--ak-font-display);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-hint {
  width: 100%;
  background: var(--ak-surface);
  color: var(--ak-accent-2);
}

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

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

.tone {
  stroke: var(--ak-ink);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.tone-surface { fill: var(--ak-surface); }
.tone-accent { fill: var(--ak-accent); }
.tone-accent2 { fill: var(--ak-accent-2); }
.tone-ink { fill: var(--ak-ink); }
.tone-soft { fill: color-mix(in srgb, var(--ak-accent) 42%, var(--ak-surface)); }
.tone-line { fill: none; }
.tone-accent-line { fill: none; stroke: var(--ak-accent); stroke-width: 4; }
.tone-accent2-line { fill: none; stroke: var(--ak-accent-2); stroke-width: 5; }

.end {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  z-index: 3;
}

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

.why {
  margin: 0;
  padding: 8px;
}

.why-line {
  margin: 0 0 6px;
  font-family: var(--ak-font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--ak-ink);
}

.recap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border-radius: var(--ak-radius);
  background: color-mix(in srgb, var(--ak-accent-2) 8%, var(--ak-surface));
}

.chip.is-miss {
  background: color-mix(in srgb, var(--ak-accent) 12%, var(--ak-surface));
}

.chip-pic {
  height: min(7dvh, 46px);
  border-radius: 8px;
  background: radial-gradient(circle at 40% 30%, var(--ak-surface), color-mix(in srgb, var(--ak-accent-2) 22%, var(--ak-surface)));
  overflow: hidden;
}

.chip-pic svg {
  width: 100%;
  height: 100%;
}

.chip-line {
  display: flex;
  gap: 2px;
  height: min(6dvh, 36px);
}

.chip-line span {
  flex: 1 1 0;
  min-width: 0;
}

.result-card {
  padding: 8px;
  border-color: var(--ak-accent);
}

.result-says {
  margin: 0 0 8px;
  font-family: var(--ak-font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ak-ink);
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-actions .btn-go,
.result-actions .btn-alt {
  width: 100%;
}

.play.is-ended .lab,
.play.is-ended .voice,
.play.is-ended .btn-hint {
  display: none;
}

.play.is-ended .end {
  flex: 1 1 auto;
}

.fx {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.fx i,
.fx-pop {
  position: absolute;
  opacity: 0;
}

.fx i {
  width: 10px;
  height: 14px;
  border: 2px solid var(--ak-outline);
}

.fx-pop {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

@media (max-height: 700px) {
  .play-logo {
    height: 34px;
  }

  .turn-who {
    font-size: 18px;
  }

  .voice {
    min-height: 0;
    padding: 6px 8px;
    font-size: 14px;
  }

  .meter-copy strong {
    font-size: 22px;
  }

  .window {
    width: min(58vw, 30dvh, 200px);
    height: min(58vw, 30dvh, 200px);
  }

  .shapes {
    height: min(18dvh, 100px);
    min-height: 72px;
  }

  .dials {
    display: none;
  }

  .chip-pic {
    height: 32px;
  }

  .chip-line {
    height: 28px;
  }

  .result-says {
    font-size: 16px;
  }
}

@media (hover: hover) {
  .shape:not(:disabled):hover .tile {
    filter: brightness(1.08);
  }

  .btn-go:hover {
    background: var(--ak-btn-hover);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bubbles i {
    animation: float 3.4s ease-in-out infinite;
  }

  .bubbles i:nth-child(2) { animation-delay: 0.4s; }
  .bubbles i:nth-child(3) { animation-delay: 0.8s; }
  .bubbles i:nth-child(4) { animation-duration: 4.2s; }

  .play-logo {
    animation: bob 3.2s ease-in-out infinite;
  }

  .window {
    animation: sway 3.8s ease-in-out infinite;
  }

  .tile {
    animation: jar 2.8s ease-in-out infinite;
  }

  .shape:nth-child(2) .tile { animation-delay: 0.15s; }
  .shape:nth-child(3) .tile { animation-delay: 0.3s; }
  .shape:nth-child(4) .tile { animation-delay: 0.45s; }
  .shape:nth-child(5) .tile { animation-delay: 0.1s; }

  .dial line {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: tick 2.4s steps(8, end) infinite;
  }

  .dial-b line {
    animation-duration: 1.5s;
    animation-direction: reverse;
  }

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

  .shape:active .shape-body {
    transform: scale(0.94);
  }

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

  .shape.is-coach::before {
    animation: point 0.7s ease-in-out infinite;
  }

  #count.is-low {
    animation: pulse 0.8s ease-in-out infinite;
  }

  .shapes.is-land .tile {
    animation: stripe 0.65s ease;
  }

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

  .vial.is-fizz .vial-img {
    animation: jump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .vial.is-fizz .vial-pop {
    animation: pop 0.6s ease-out;
  }

  .play.is-win .result-card {
    background-image: linear-gradient(
      90deg,
      var(--ak-surface),
      color-mix(in srgb, var(--ak-accent) 38%, var(--ak-surface)),
      var(--ak-surface)
    );
    background-size: 200% 100%;
    animation: chase 0.7s linear 3;
  }

  .fx i,
  .fx-pop {
    animation: burst 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

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

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

  @keyframes sway {
    0%, 100% { transform: rotate(-1.4deg); }
    50% { transform: rotate(1.4deg); }
  }

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

  @keyframes tick {
    to { transform: rotate(360deg); }
  }

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

  @keyframes point {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }

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

  @keyframes stripe {
    0% { filter: brightness(1); transform: translateY(0) scale(1); }
    40% { filter: brightness(1.28); transform: translateY(-4px) scale(1.05, 0.94); }
    100% { filter: brightness(1); transform: translateY(0) scale(1); }
  }

  @keyframes cue {
    0% { transform: scale(1); }
    45% { transform: scale(1.07); }
    100% { transform: scale(1); }
  }

  @keyframes jump {
    0% { transform: translateY(0) scale(1, 1); }
    40% { transform: translateY(-10px) scale(0.9, 1.16); }
    70% { transform: translateY(2px) scale(1.08, 0.9); }
    100% { transform: translateY(0) scale(1, 1); }
  }

  @keyframes pop {
    0% { opacity: 0; transform: scale(0.4); }
    35% { opacity: 1; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(1.2); }
  }

  @keyframes chase {
    0% { background-position: 0 0; }
    100% { background-position: 200% 0; }
  }

  @keyframes burst {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 20deg)) scale(0.6); }
  }
}