:root{
  /* Pastel rainbow base */
  --bg: #fff7fb;

  --card: rgba(255, 255, 255, .72);
  --card2: rgba(255, 255, 255, .86);

  --text: rgba(60, 50, 70, .95);
  --muted: rgba(60, 50, 70, .65);

  /* Accent palette (pastel) */
  --pink: #ff8fcb;
  --hotpink: #ff6fb5;

  --softpink: rgba(255, 143, 203, .20);
  --softpink2: rgba(255, 143, 203, .32);

  /* Rainbow helpers */
  --lav: #cdb8ff;
  --blue: #aeefff;
  --mint: #bff6d9;
  --butter: #fff2b8;

  --shadow: 0 24px 70px rgba(60, 40, 80, .16);
  --radius: 22px;

  --ring: 0 0 0 3px rgba(255, 143, 203, .28);
  --ring2: 0 0 0 4px rgba(205, 184, 255, .35);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);

  /* Pastel rainbow dreamy background (keeps your layered vibe) */
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(255,143,203,.35), transparent 60%),
    radial-gradient(900px 600px at 90% 25%, rgba(205,184,255,.35), transparent 55%),
    radial-gradient(950px 650px at 30% 95%, rgba(174,239,255,.35), transparent 60%),
    radial-gradient(900px 650px at 80% 90%, rgba(191,246,217,.35), transparent 60%),
    radial-gradient(700px 520px at 55% 55%, rgba(255,242,184,.28), transparent 60%),
    linear-gradient(135deg, rgba(255, 240, 248, 1), rgba(244, 245, 255, 1));

  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* keep your noise, but softer */
.bg-noise{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.wrap{
  width: min(980px, 92vw);
  margin: 22px auto 20px;
  display: grid;
  gap: 14px;
}

.top{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo{
  width: 54px; height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;

  /* Pastel rainbow badge */
  background: linear-gradient(135deg,
    rgba(255,143,203,.55),
    rgba(205,184,255,.55),
    rgba(174,239,255,.55),
    rgba(191,246,217,.55),
    rgba(255,242,184,.55)
  );
  border: 1px solid rgba(255,143,203,.40);
  box-shadow: var(--shadow);

  font-weight: 900;
  letter-spacing: .02em;
  transform: rotate(-6deg);
}

h1{
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.dot{ opacity: .75; }
.subtitle{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.hud{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pill{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(205,184,255,.45);
  border-radius: 999px;
  padding: 10px 12px;
  min-width: 110px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  backdrop-filter: blur(10px);
}
.pill span{ color: var(--muted); font-size: 12px; }
.pill strong{ font-size: 18px; letter-spacing: .01em; }

/* Card becomes glassy pastel */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  border: 1px solid rgba(255,143,203,.32);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  backdrop-filter: blur(12px);
}

.row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.instruction .label{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 6px;
}

.instructionText{
  font-size: 19px;
  letter-spacing: -0.01em;
  padding: 10px 12px;
  border-radius: 14px;

  /* pastel highlight */
  background: linear-gradient(135deg, rgba(255,143,203,.18), rgba(205,184,255,.18), rgba(174,239,255,.18));
  border: 1px dashed rgba(255,143,203,.45);
}

.controls{
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn{
  border: 1px solid rgba(255,143,203,.35);
  background: rgba(255,255,255,.68);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 750;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  user-select: none;
  touch-action: manipulation;
}

.btn:hover{ background: rgba(255,255,255,.82); }
.btn:active{ transform: translateY(1px) scale(.99); }
.btn:focus-visible{ outline: none; box-shadow: var(--ring); }

.btn.primary{
  background: linear-gradient(135deg,
    rgba(255,143,203,.40),
    rgba(205,184,255,.34),
    rgba(174,239,255,.34)
  );
  border-color: rgba(255,143,203,.55);
}
.btn.primary:hover{ background: rgba(255,143,203,.22); }
.btn.ghost{ opacity: .95; }

.btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.arena{
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;

  /* pastel arena glow */
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(255,143,203,.22), transparent 55%),
    radial-gradient(900px 520px at 20% 70%, rgba(205,184,255,.22), transparent 58%),
    radial-gradient(900px 520px at 80% 70%, rgba(174,239,255,.22), transparent 58%),
    rgba(255,255,255,.42);

  border: 1px solid rgba(205,184,255,.38);
  min-height: 360px;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
}

/* Your JS-created buttons keep class .gameBtn */
.gameBtn{
  position: absolute;
  border-radius: 18px;

  border: 1px solid rgba(255,143,203,.35);
  background: linear-gradient(135deg,
    rgba(255,255,255,.75),
    rgba(255,143,203,.18),
    rgba(205,184,255,.16),
    rgba(174,239,255,.16)
  );

  color: var(--text);
  font-weight: 850;
  letter-spacing: .01em;
  cursor: pointer;
  display: grid;
  place-items: center;

  box-shadow: 0 12px 28px rgba(60,40,80,.18);
  transition: transform .09s ease, filter .15s ease;
  user-select: none;
  touch-action: manipulation;
}

.gameBtn:hover{ filter: brightness(1.06) saturate(1.12); }
.gameBtn:active{ transform: scale(.98); }
.gameBtn:focus-visible{ outline: none; box-shadow: var(--ring2); }

.message{
  margin-top: 12px;
  min-height: 26px;
  color: var(--muted);
  font-size: 14px;
}

.footer{
  color: var(--muted);
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4px 0 0;
}

.credit{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,143,203,.65);
}
.credit:hover{ border-bottom-color: rgba(255,111,181,.95); }

.linklike{
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  border-bottom: 1px dotted rgba(205,184,255,.75);
}
.linklike:hover{ border-bottom-color: rgba(255,143,203,.95); }

@media (max-width: 640px){
  .wrap{ margin: 16px auto 18px; }
  h1{ font-size: 30px; }
  .pill{ min-width: 98px; padding: 9px 11px; }
  .instructionText{ font-size: 18px; }

  .controls{
    width: 100%;
    justify-content: stretch;
  }
  .controls .btn{
    flex: 1;
    padding: 14px 14px;
    border-radius: 16px;
  }

  .arena{
    min-height: 460px;
  }
}