:root {
  color-scheme: dark;
  --paper: #f5efe4;
  --muted: #aeb8b2;
  --panel: #22353a;
  --line: #3a5557;
  --mint: #a9e4c5;
  --coral: #f29a78;
  --glow: rgba(169, 228, 197, .22);
}

* {
  box-sizing: border-box;
}

body {
  display: grid;
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  place-items: center;
  color: var(--paper);
  background: radial-gradient(circle at 76% 10%, #315255 0, transparent 33%), #17252a;
  font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
  width: min(100%, 540px);
  text-align: center;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--mint);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.8rem, 14vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.09em;
}

.intro {
  max-width: 38ch;
  margin: 15px auto 27px;
  color: var(--muted);
}

.game {
  padding: 21px;
  border: 1px solid #314b4e;
  border-radius: 25px;
  background: rgba(34, 53, 58, .94);
  box-shadow: 0 26px 85px rgba(0, 0, 0, .3);
}

.scoreboard {
  display: flex;
  justify-content: space-between;
  margin: 0 2px 13px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.scoreboard span:last-child {
  text-align: right;
}

.scoreboard strong {
  display: block;
  color: var(--mint);
  font-size: 1.5rem;
  letter-spacing: 0;
  line-height: 1.1;
}

.status {
  min-height: 28px;
  margin-bottom: 16px;
  font-weight: 700;
}

.status span {
  color: var(--coral);
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  min-height: 300px;
  padding: 22px 10px 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #17272b;
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .1);
}

.peg {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
  padding: 13px 2px 0;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.peg::before {
  position: absolute;
  z-index: 0;
  top: 10px;
  bottom: 27px;
  width: 8px;
  border-radius: 8px;
  background: #536e6d;
  box-shadow: 0 0 12px rgba(169, 228, 197, .08);
  content: "";
}

.peg::after {
  position: absolute;
  z-index: 0;
  right: 4%;
  bottom: 17px;
  left: 4%;
  height: 11px;
  border-radius: 50%;
  background: #536e6d;
  content: "";
}

.peg:hover,
.peg:focus-visible,
.peg.selected {
  border-color: var(--mint);
  outline: none;
  background: rgba(169, 228, 197, .08);
  box-shadow: 0 0 0 4px var(--glow);
}

.peg.selected::before,
.peg.selected::after {
  background: var(--mint);
}

.plate {
  position: relative;
  z-index: 1;
  flex: 0 0 27px;
  height: 27px;
  border: 2px solid rgba(255, 255, 255, .36);
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18), inset 0 2px 5px rgba(255, 255, 255, .2);
  transition: transform .2s;
}

.peg.selected .plate.is-top {
  transform: translateY(-5px);
}

.plate[data-size="1"] {
  width: 44%;
  background: #ef765c;
}

.plate[data-size="2"] {
  width: 53%;
  background: #f1a15e;
}

.plate[data-size="3"] {
  width: 62%;
  background: #e8cf6a;
}

.plate[data-size="4"] {
  width: 71%;
  background: #86c996;
}

.plate[data-size="5"] {
  width: 80%;
  background: #75b9c2;
}

.peg-label {
  position: absolute;
  z-index: 2;
  bottom: -2px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rules {
  margin: 16px 2px 0;
  color: var(--muted);
  font-size: .86rem;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 17px;
  color: var(--muted);
  font-size: .84rem;
}

.reset {
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.reset:hover,
.reset:focus-visible {
  border-color: var(--coral);
  outline: none;
}

@media (max-width: 390px) {
  body {
    padding: 14px;
  }

  .game {
    padding: 14px;
  }

  .board {
    min-height: 270px;
    padding-inline: 3px;
  }

  .actions {
    align-items: flex-start;
    flex-direction: column-reverse;
  }
}