:root {
  --bg: #4a4a4a;
  --card: #3b1465;
  --card-2: #2b0f4a;
  --text: #f7f7f7;
  --muted: #cfcfe6;
  --accent: #a86bff;
  --ring: rgba(0, 0, 0, .4);

  --red: #e74c3c;
  --green: #2ecc71;
  --blue: #3498db;
  --yellow: #f1c40f;
  --red-g: #ffb3aa;
  --green-g: #b8ffd4;
  --blue-g: #b8e0ff;
  --yellow-g: #fff1b3;
}

/* page */
html,
body {
  height: 100%;
  margin: 0
}

body {
  font-family: 'Kodchasan', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(255, 255, 255, .06), transparent 50%),
    linear-gradient(#0003, #0003), var(--bg);
}

.wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
}

/* card */
.panel {
  width: clamp(320px, 92vw, 620px);
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 2px solid #1c1c1c;
  border-radius: clamp(14px, 2.2vw, 20px);
  box-shadow: 0 30px 60px -20px #000, 0 0 0 1px #000 inset, 0 0 20px 0 var(--accent) inset;
  padding: clamp(18px, 3.2vw, 28px);
}

.hdr {
  text-align: center;
  margin-bottom: clamp(8px, 1.5vw, 12px);
}

.title {
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(22px, 3.4vw, 32px);
}

.pfp {
  width: clamp(46px, 7vw, 56px);
  height: clamp(46px, 7vw, 56px);
  border-radius: 50%;
  margin: 0 auto clamp(6px, 1.2vw, 10px);
  display: block;
  border: 2px solid #ffffffcc;
  background: #1d1d1d;
  box-shadow: 0 6px 18px -8px #000, 0 0 0 2px #00000055;
}

.meta {
  font-weight: 700;
  color: var(--muted);
  opacity: .95;
  margin: 2px 0 8px;
  font-size: clamp(12px, 1.6vw, 14px);
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 14px);
  margin: clamp(6px, 1.2vw, 14px) 0 clamp(10px, 2vw, 18px);
}

.chip {
  background: #ffffff11;
  border: 1px solid #00000066;
  padding: clamp(6px, 1.3vw, 8px) clamp(10px, 2vw, 12px);
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(12px, 1.6vw, 14px);
  box-shadow: inset 0 0 10px #00000055;
}

.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  background: #fff;
  color: #222;
  font-weight: 800;
  border-radius: 999px;
  padding: clamp(8px, 1.8vw, 10px) clamp(14px, 3.2vw, 16px);
  font-size: clamp(14px, 2vw, 16px);
  border: 2px solid #1c1c1c;
  box-shadow: 0 2px 0 #000, 0 10px 20px -10px #000;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}

.btn:active {
  transform: translateY(1px)
}

.btn[disabled] {
  opacity: .55;
  cursor: not-allowed
}

/* grid scales with card width and keeps square pads */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2.4vw, 18px);
  padding: clamp(6px, 1.2vw, 10px);
}

.pad {
  aspect-ratio: 1 / 1;
  border-radius: clamp(14px, 2.2vw, 18px);
  border: 3px solid #1c1c1c;
  box-shadow: 0 12px 24px -10px #0007, inset 0 0 12px #0009;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
  width: 100%;
  /* fill grid cell */
  touch-action: manipulation;
}

.pad:active {
  transform: translateY(2px)
}

.red {
  background: var(--red)
}

.green {
  background: var(--green)
}

.blue {
  background: var(--blue)
}

.yellow {
  background: var(--yellow)
}

.lit.red {
  filter: brightness(1.15);
  box-shadow: 0 0 0 3px var(--ring) inset, 0 0 22px 6px var(--red-g)
}

.lit.green {
  filter: brightness(1.15);
  box-shadow: 0 0 0 3px var(--ring) inset, 0 0 22px 6px var(--green-g)
}

.lit.blue {
  filter: brightness(1.15);
  box-shadow: 0 0 0 3px var(--ring) inset, 0 0 22px 6px var(--blue-g)
}

.lit.yellow {
  filter: brightness(1.15);
  box-shadow: 0 0 0 3px var(--ring) inset, 0 0 22px 6px var(--yellow-g)
}

.footer {
  margin-top: clamp(10px, 2vw, 14px);
  text-align: center;
  font-size: clamp(11px, 1.6vw, 12px);
  color: #e7dcffcc
}

/* Bigger pads on very tall phones */
@media (max-width: 420px) and (min-height: 700px) {
  .panel {
    width: 94vw
  }
}

/* Roomier desktop */
@media (min-width: 900px) {
  .panel {
    width: min(56vw, 680px)
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}