body {
  color: #fff7dc;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 221, 114, .36), transparent 34%),
    linear-gradient(180deg, #765bb8 0, #41265f 38%, #1c0d2c 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.28) 46.5% 47%, transparent 47.5%),
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(255,212,104,.08) 9.2% 9.4%);
}

header { background: #24102fe8; border-bottom: 2px solid #f4cf63; }
.logo { color: #fff6d3; text-shadow: 0 3px #6b3710; }
.logo b { color: #ffd65e; }
.card {
  background: linear-gradient(180deg, #fff4d9f2, #d8c4e8ed);
  border-color: #f7d873;
  box-shadow: 0 18px 60px #12071f99, inset 0 0 0 3px #8c5f21;
}
.card h1, .card h3, .copy { color: #462152; }
.bonus { color: #f7bd38; text-shadow: 0 2px #783b0d, 0 0 18px #ffe895; }
.preview {
  background: radial-gradient(circle at 50% 15%, #725280, #3f1d4b 58%, #1b0b28);
  border-color: #f4cf63;
  box-shadow: inset 0 0 36px #15051d;
}
.preview::after {
  height: 22%;
  opacity: .45;
  background: linear-gradient(180deg, transparent, #c28c31), repeating-linear-gradient(90deg,#8c6424 0 4%,#e3bd57 4% 4.5%);
}
.preview i, .tile {
  background-image: url('olympus-sprites.png');
  background-repeat: no-repeat;
  background-size: 800% auto;
  background-position: calc(var(--sprite) * 14.285714%) center;
}
.play, .primary { background: linear-gradient(#ffe17b, #d78924); color: #3b183d; box-shadow: 0 6px #805013; }
.hud .pill, .panel {
  color: #4c244f;
  background: linear-gradient(#fff8e1, #e5d3e7);
  border-color: #f7d66f;
  box-shadow: 0 5px #8d6128;
}
.pill strong, .panel h3 { color: #6b3168; }
.boardbox {
  padding: 11px;
  background: linear-gradient(145deg, #ffeb8a, #b87925 44%, #f7d368 70%, #714410);
  border-color: #fff0a8;
  box-shadow: 0 12px #3b1b28, 0 20px 55px #16071f99;
}
.board {
  gap: 5px;
  background: linear-gradient(#48204fdd, #26102fef);
  box-shadow: inset 0 0 42px #12051b;
}
.tile {
  background-color: #43204ccc;
  border: 1px solid #d6a64755;
  filter: drop-shadow(0 5px 3px #100417aa);
}
.tile:hover { background-color: #603165; }
.tile.sel { box-shadow: 0 0 0 5px #ffe56e, 0 0 22px #fff2a8; }
.progress i { background: linear-gradient(90deg, #8b3ec5, #ffcf50); }
.booster { background: #fff3d7; color: #4d2350; border-color: #e9c65f; }
.booster.on { background: linear-gradient(#fff18a, #d9a244); }
.content { color: #41294a; background: #f7f0e9; }
.content h2, .info h3, .legal h3 { color: #6e356c; }
.info, .legal, .feedback, details { border-color: #e2c66d; background: #fffaf0; }
.result { background: #1b0925e8; }
.result > div { color: #4d2350; background: #fff7df; border-color: #f4cf63; }
.result h2 { color: #7a3a77; }
footer { background: #21102c; border-top: 2px solid #d9b24f; }