[data-view='bonuses'] .card-panel {
  border-radius: 8px;
  border: 1px solid #8dadab38;
  background: linear-gradient(150deg, #d1fff70b, transparent 24%), linear-gradient(110deg, #0b211bfa, #040e0df5 52%, #0b372af0);
  box-shadow: inset 7px 0 16px -13px #26ffb188, inset -7px 0 16px -13px #26ffb155, inset 0 1px 0 #c9fff21a, 0 8px 20px #0005;
}
[data-view='bonuses'] .card-panel::before,
[data-view='bonuses'] .card-panel::after { display: none; }
[data-view='bonuses'] h3 { font-size: 19px; font-weight: 700; line-height: 1.25; }
[data-view='bonuses'] p { font-size: 12px; font-weight: 400; line-height: 1.5; color: #b1c3c7; }
.bonus-top { grid-template-columns: 52px minmax(0, 1fr); padding: 16px; gap: 12px; min-height: 105px; }
.daily-calendar { grid-row: 1 / 3; width: 52px; height: 58px; }
.bonus-top strong { grid-column: 2; font-size: 15px; color: #ffe384; display: flex; align-items: center; gap: 5px; }
.bonus-top strong::before { content: ''; width: 22px; height: 22px; background: url('./assets/vlt-coin-v1.webp') center / contain no-repeat; }
.wheel-card { margin-top: 16px; padding: 18px 16px 16px; }
.wheel-wrap { width: min(100%, 300px); height: auto; aspect-ratio: 1; margin: 20px auto 20px; border-radius: 50%; background: #09251b; box-shadow: 0 0 0 1px #7bad9670, 0 0 20px #09d67c20, 0 12px 24px #0009; }
.wheel-rotor { inset: 4px; border: 7px solid #adc3bb; background: conic-gradient(from -30deg, #115739 0deg 60deg, #132c31 60deg 120deg, #164d35 120deg 180deg, #122d32 180deg 240deg, #155638 240deg 300deg, #152c32 300deg 360deg); box-shadow: inset 0 0 0 2px #3d6857, inset 0 0 18px #0008, 0 0 0 2px #35483f, 0 0 0 3px #98bdaa55; }
.wheel-rotor { border: 0; inset: 0; background: none; box-shadow: none; }
.wheel-base { display: block; filter: drop-shadow(0 5px 9px #0008); }
.wheel-rotor::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -30deg, #bcdebb88 0deg .7deg, transparent .7deg 60deg); pointer-events: none; }
.wheel-rotor::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(145deg, #e1ffef1c, transparent 40%, #00000022); pointer-events: none; }
.wheel-rotor::before, .wheel-rotor::after { display: none; }
.wheel-hub { position: absolute; z-index: 3; width: 22%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 2px solid #bfd1ba; background: linear-gradient(145deg, #426f53, #102e20); box-shadow: 0 4px 9px #0008, inset 0 1px 0 #deffe66b; pointer-events: none; }
.wheel-hub img { width: 65%; height: 75%; object-fit: contain; }
.wheel-pointer { top: -5px; width: 19px; height: 27px; background: linear-gradient(90deg, #b6954d, #ffe5a0 45%, #b28b3b); }
.wheel-prize { width: 48px; font-size: 15px; font-weight: 700; line-height: 1.25; color: #eff7ed; transform: translate(-50%, -50%); text-shadow: 0 2px 3px #000a; }
.wheel-prize.p1 { left: 50%; top: 21%; right: auto; bottom: auto; }
.wheel-prize.p2 { left: 76%; top: 35%; right: auto; bottom: auto; }
.wheel-prize.p3 { left: 76%; top: 65%; right: auto; bottom: auto; }
.wheel-prize.p4 { left: 50%; top: 79%; right: auto; bottom: auto; }
.wheel-prize.p5 { left: 24%; top: 65%; right: auto; bottom: auto; color: #eff7ed; }
.wheel-prize.p6 { left: 24%; top: 35%; right: auto; bottom: auto; color: #eff7ed; }
.wheel-button, .streak-claim { position: relative; display: block; width: 100%; height: 50px; min-height: 50px; border-radius: 8px; border: 1px solid #65ffb0; background: linear-gradient(165deg, #03d879, #00b960 35%, #006d3b); box-shadow: inset 0 1px 0 #ccffe773, 0 0 10px #10ffa528; color: #f5fff9; font-size: 15px; font-weight: 600; text-transform: none; text-shadow: none; }
.wheel-button:disabled { opacity: .65; }
.streak-card { padding: 16px; margin-top: 16px; }
.streak-card .panel-head { flex-wrap: wrap; }
.streak-card .panel-head > span { font-size: 12px; color: #60edab; }
.streak-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.streak-day { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 46px; border-radius: 6px; border: 1px solid #60817844; background: linear-gradient(145deg, #182e27, #0b1815); }
.streak-day span, .streak-day.done span, .streak-day.today span { display: inline; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: #d8e3df; font-size: 14px; font-weight: 600; }
.streak-day img { width: 20px; height: 20px; object-fit: contain; }
.streak-day.done { background: #11452d; box-shadow: inset 0 0 14px #32f29216; }
.streak-day.today { border-color: #5ffbb46b; background: #1b4933; box-shadow: inset 0 0 16px #39ffa326, 0 0 8px #24ff9512; }
.streak-day.today span { color: #fff; }
.safe-mini { margin-top: 16px; padding: 16px; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.safe-mini img { width: 64px; height: 68px; object-fit: contain; }
.safe-mini button { grid-column: 1 / -1; width: 100%; min-height: 42px; border-radius: 6px; border: 1px solid #65ffb066; background: #113f2b; color: #a7ffce; font-size: 14px; font-weight: 600; }
@media (max-width: 360px) {
  [data-view='bonuses'] h3 { font-size: 17px; }
  .wheel-prize { font-size: 13px; }
  .wheel-card { padding: 16px 13px; }
  .streak-card { padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) { .wheel-rotor { transition-duration: .1s; } }