:root {

  --bg-1: #fffafd;
  --bg-2: #fff1f7;
  --bg-3: #fbe7f0;

  --card:
    rgba(255, 255, 255, 0.88);

  --ink:
    #49333f;

  --muted:
    #9b7d8c;

  --rose:
    #d96f9b;

  --rose-dark:
    #b64d78;

  --rose-soft:
    #f9deea;

  --rose-pale:
    #fff1f7;

  --line:
    rgba(186, 83, 124, 0.15);

  --shadow:
    0 28px 85px
    rgba(171, 80, 117, 0.18);
}


/* =========================
   RESET
========================= */

* {
  box-sizing: border-box;
}


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


body {

  margin: 0;

  overflow-x: hidden;

  color:
    var(--ink);

  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:

    radial-gradient(
      circle at 18% 14%,
      rgba(255, 207, 226, 0.78),
      transparent 29%
    ),

    radial-gradient(
      circle at 82% 12%,
      rgba(255, 234, 242, 0.95),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      var(--bg-1),
      var(--bg-2) 55%,
      var(--bg-3)
    );
}


button {

  font: inherit;

  -webkit-tap-highlight-color:
    transparent;
}


/* =========================
   PAGE
========================= */

.page-shell {

  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;

  padding:
    22px;
}


/* =========================
   MAIN CARD
========================= */

.game-card {

  position:
    relative;

  isolation:
    isolate;

  width:
    min(94vw, 760px);

  /*
    Taller card gives
    roaming buttons more room.
  */
  min-height:
    680px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.82);

  border-radius:
    34px;

  padding:
    20px 22px;

  background:

    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.97),
      var(--card)
    );

  box-shadow:
    var(--shadow);

  backdrop-filter:
    blur(18px);
}


.game-card::before {

  content:
    "";

  position:
    absolute;

  inset:
    10px;

  pointer-events:
    none;

  border:

    1px solid
    var(--line);

  border-radius:
    26px;

  z-index:
    20;
}


/* =========================
   BACKGROUND GLOW
========================= */

.soft-glow {

  position:
    absolute;

  z-index:
    -1;

  border-radius:
    999px;

  filter:
    blur(10px);

  opacity:
    0.66;
}


.glow-a {

  width:
    190px;

  height:
    190px;

  right:
    -70px;

  top:
    70px;

  background:
    #ffd4e5;
}


.glow-b {

  width:
    170px;

  height:
    170px;

  left:
    -60px;

  bottom:
    55px;

  background:
    #f7dce7;
}


/* =========================
   TOP + BOTTOM
========================= */

.topbar,
.bottombar {

  position:
    relative;

  z-index:
    40;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--muted);

  font-size:
    0.73rem;

  font-weight:
    700;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.topbar {

  min-height:
    32px;
}


.bottombar {

  position:
    absolute;

  left:
    28px;

  right:
    28px;

  bottom:
    23px;

  justify-content:
    space-between;
}


.status-dot {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--rose);

  box-shadow:

    0 0 0 6px
    rgba(217, 111, 155, 0.09);
}


.mini-star {

  margin-left:
    auto;

  color:
    var(--rose);

  font-size:
    1rem;
}


.heart {

  color:
    var(--rose);

  font-size:
    1.08rem;
}


/* =========================
   CENTER STAGE
========================= */

.center-stage {

  position:
    absolute;

  inset:
    70px 28px 64px;

  z-index:
    15;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  /*
    Individual buttons enable
    pointer events themselves.
  */
  pointer-events:
    none;
}


/*
   PROTECTED QUESTION AREA

   Runaway buttons are checked
   against this rectangle in JS.
*/

.text-zone {

  position:
    relative;

  z-index:
    18;

  width:
    min(88%, 540px);

  min-height:
    170px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  padding:
    20px 24px;

  border-radius:
    28px;

  pointer-events:
    none;
}


/* =========================
   TEXT
========================= */

.eyebrow {

  margin:
    0 0 12px;

  color:
    var(--rose-dark);

  font-size:
    0.76rem;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


h1 {

  max-width:
    570px;

  margin:
    0;

  color:
    #513744;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      2.45rem,
      7.6vw,
      5rem
    );

  line-height:
    0.98;

  letter-spacing:
    -0.045em;

  text-wrap:
    balance;
}


.message {

  min-height:
    30px;

  max-width:
    500px;

  margin:
    16px 0 0;

  color:
    #765d69;

  font-size:
    clamp(
      0.95rem,
      2.6vw,
      1.08rem
    );

  line-height:
    1.58;

  text-wrap:
    balance;
}


.tiny {

  min-height:
    23px;

  max-width:
    520px;

  margin:
    10px 0 0;

  color:
    #ad8b99;

  font-size:
    0.76rem;

  line-height:
    1.45;

  text-wrap:
    balance;
}


/* =========================
   NORMAL BUTTON AREA
========================= */

.button-dock {

  position:
    relative;

  z-index:
    19;

  width:
    100%;

  min-height:
    120px;

  margin-top:
    16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;

  pointer-events:
    auto;
}


/* =========================
   RUNAWAY BUTTON LAYER
========================= */

.roaming-layer {

  position:
    absolute;

  /*
    Keeps roaming buttons away
    from top and bottom bars.
  */
  inset:
    56px 18px 58px;

  z-index:
    30;

  pointer-events:
    none;
}


/* =========================
   BUTTONS
========================= */

.choice-btn {

  position:
    relative;

  z-index:
    32;

  min-width:
    130px;

  min-height:
    50px;

  padding:
    13px 22px;

  border:

    1px solid
    rgba(190, 86, 128, 0.22);

  border-radius:
    999px;

  background:

    linear-gradient(
      180deg,
      #ffffff,
      #fff4f8
    );

  color:
    #6a4052;

  box-shadow:

    0 10px 24px
    rgba(184, 84, 124, 0.11),

    inset
    0 1px 0
    rgba(255, 255, 255, 0.9);

  font-size:
    0.80rem;

  font-weight:
    800;

  letter-spacing:
    0.055em;

  white-space:
    nowrap;

  cursor:
    pointer;

  pointer-events:
    auto;

  touch-action:
    manipulation;

  transition:

    transform
    220ms ease,

    opacity
    330ms ease,

    box-shadow
    220ms ease,

    background
    220ms ease,

    left
    360ms
    cubic-bezier(.2, .82, .28, 1),

    top
    360ms
    cubic-bezier(.2, .82, .28, 1),

    width
    320ms ease,

    font-size
    320ms ease;
}


.choice-btn:hover {

  transform:
    translateY(-2px);

  box-shadow:

    0 14px 30px
    rgba(184, 84, 124, 0.16);
}


/* Main pink button */

.choice-btn.primary {

  border-color:
    transparent;

  background:

    linear-gradient(
      135deg,
      #df7ca5,
      #c85d8a
    );

  color:
    #fff;

  box-shadow:

    0 13px 31px
    rgba(198, 85, 130, 0.26);
}


/* Pale pink button */

.choice-btn.soft {

  background:
    var(--rose-pale);
}


/* Button actively roaming */

.choice-btn.roamer {

  position:
    absolute;

  margin:
    0;
}


.choice-btn.disabled-looking {

  opacity:
    0.72;
}


/* =========================
   GIMMICK CLASSES
========================= */

.choice-btn.inflate {

  animation:
    inflateSlow
    1.1s
    ease
    forwards;
}


.choice-btn.grow-help {

  transform:
    scale(1.18);

  box-shadow:

    0 16px 34px
    rgba(184, 84, 124, 0.20);
}


.fade-in {

  animation:

    fadeIn
    520ms
    ease
    both;
}


.fade-out {

  animation:

    fadeOut
    650ms
    ease
    both;
}


.pop {

  animation:

    pop
    430ms
    ease
    both;
}


/* =========================
   ANIMATIONS
========================= */

@keyframes inflateSlow {

  0% {
    transform:
      scale(1);
  }

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


@keyframes fadeIn {

  from {

    opacity:
      0;

    transform:
      translateY(4px);
  }

  to {

    opacity:
      1;

    transform:
      translateY(0);
  }
}


@keyframes fadeOut {

  from {

    opacity:
      1;
  }

  to {

    opacity:
      0;

    transform:
      scale(0.88);
  }
}


@keyframes pop {

  0% {

    transform:
      scale(1);
  }

  55% {

    transform:
      scale(1.12);
  }

  100% {

    transform:
      scale(1);
  }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 640px) {

  .page-shell {

    padding:
      12px;
  }


  .game-card {

    width:
      min(96vw, 760px);

    /*
      Extra height is intentional.
      This prevents roaming buttons
      from covering the question.
    */

    min-height:
      735px;

    padding:
      18px;

    border-radius:
      28px;
  }


  .game-card::before {

    border-radius:
      22px;
  }


  .center-stage {

    inset:
      72px 12px 66px;
  }


  .text-zone {

    width:
      92%;

    min-height:
      190px;

    padding:
      18px 16px;
  }


  .button-dock {

    min-height:
      155px;

    gap:
      10px;

    padding:
      0 8px;
  }


  .roaming-layer {

    inset:
      56px 10px 58px;
  }


  .choice-btn {

    min-width:
      122px;

    min-height:
      48px;

    max-width:
      88vw;

    padding:
      12px 16px;

    font-size:
      0.73rem;
  }


  .bottombar {

    left:
      22px;

    right:
      22px;

    bottom:
      20px;
  }
}


/* Reduce movement if device requests it */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}