:root {
  color-scheme: light;
  --ink: #18221d;
  --muted: #70766f;
  --cream: #f4f0e8;
  --green: #1d4d3b;
  --gold: #d7a52d;
  --gold-light: #f6d66f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.92) 0 12%, transparent 42%),
    linear-gradient(145deg, #f8f5ef, var(--cream));
  font-family: "DM Sans", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
}

.app {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 32px clamp(20px, 5vw, 64px) 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 17px/1 "Manrope", sans-serif;
  letter-spacing: -.02em;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff9e8;
  background: var(--green);
  font-family: Georgia, serif;
}

.game {
  width: min(100%, 520px);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 0;
}

.coin-stage {
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  perspective: 900px;
  filter: drop-shadow(0 20px 16px rgba(45, 38, 18, .16));
}

.coin {
  width: 156px;
  height: 156px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .1s;
}

.coin-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 6px solid #c78e1d;
  border-radius: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  background: radial-gradient(circle at 34% 27%, #ffe89a 0 8%, var(--gold-light) 30%, var(--gold) 74%);
  box-shadow: inset 0 0 0 3px #f8dc7c, inset 0 0 18px rgba(120, 70, 4, .25);
}

.coin-back { transform: rotateY(180deg); }

.coin-ring {
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(116, 73, 10, .42);
  border-radius: 50%;
}

.coin-letter {
  font: 800 62px/1 "Manrope", sans-serif;
  color: #805b16;
  text-shadow: 0 1px 0 #fff0a6;
}

.coin-label {
  position: absolute;
  bottom: 23px;
  font-size: 9px;
  font-weight: 700;
  color: #876014;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.coin.flipping {
  animation: flip 1.15s cubic-bezier(.2,.68,.25,1) forwards;
}

.coin.show-tails { transform: rotateY(180deg); }
.coin.show-heads { transform: rotateY(0deg); }

@keyframes flip {
  0% { transform: translateY(0) rotateY(0) rotateZ(0); }
  42% { transform: translateY(-92px) rotateY(810deg) rotateZ(8deg) scale(1.06); }
  100% { transform: translateY(0) rotateY(var(--landing-rotation)) rotateZ(0); }
}

.result-wrap { margin-top: 22px; }

.eyebrow {
  margin: 0 0 9px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font: 800 clamp(38px, 8vw, 54px)/1.08 "Manrope", sans-serif;
  letter-spacing: -.055em;
}

.hint {
  min-height: 24px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.flip-button {
  margin-top: 34px;
  width: min(100%, 260px);
  min-height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--green);
  box-shadow: 0 10px 26px rgba(29, 77, 59, .22);
  font: 700 16px/1 "DM Sans", sans-serif;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s;
}

.flip-button svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flip-button:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(29, 77, 59, .28); }
.flip-button:active { transform: translateY(1px) scale(.99); }
.flip-button:focus-visible, .again-button:focus-visible { outline: 3px solid #e6b83e; outline-offset: 4px; }
.flip-button:disabled { cursor: wait; opacity: .82; }

.again-button {
  margin-top: 17px;
  padding: 6px 12px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: 600 14px/1 "DM Sans", sans-serif;
  text-decoration: underline;
  text-decoration-color: #b8b9b3;
  text-underline-offset: 4px;
  cursor: pointer;
}

footer {
  color: #92958f;
  text-align: center;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-height: 700px) {
  .app { padding-top: 22px; }
  .coin-stage { width: 150px; height: 150px; transform: scale(.83); }
  .game { padding: 12px 0 20px; }
  .result-wrap { margin-top: 8px; }
  .flip-button { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .coin.flipping { animation-duration: .01ms; }
  .flip-button { transition: none; }
}