.hour-card.is-selected {
  background:
    radial-gradient(ellipse at 92% 7%, color-mix(in srgb, var(--hour-accent) 26%, transparent), transparent 48%),
    #132f3a;
}

.hour-card.is-selected .hour-selected-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 21px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--hour-accent) 45%, transparent);
  background: color-mix(in srgb, var(--hour-accent) 14%, #132f3a);
  color: #e5f4f4;
}

.hour-card.is-selected .hour-selected-label::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hour-accent);
  box-shadow: 0 0 9px var(--hour-accent);
  content: "";
  animation: hour-pulse 1.8s ease-in-out infinite;
}

.hour-card.is-selected .hour-head {
  background: color-mix(in srgb, var(--hour-accent) 28%, #102934);
}

@keyframes hour-pulse {
  50% { opacity: .45; transform: scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
  .hour-card.is-selected .hour-selected-label::before { animation: none; }
}

.hour-grid { gap: 18px; }
.hour-card {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--hour-accent) 35%, #d8e4e2);
  border-top: 5px solid var(--hour-accent);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 8px 25px #19323a0d;
}
.hour-card .hour-head {
  position: relative;
  padding: 22px 22px 14px;
  border: 0;
  background: transparent;
}
.hour-card .hour-head>div { display: grid; gap: 4px; }
.hour-card .hour-head strong { font-size: 27px; line-height: 1.15; color: #19343b; }
.hour-card .hour-head>div>span { font-size: 12px; font-weight: 700; color: #667a7e; }
.hour-card .hour-luck { min-width: 38px; min-height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; }
.hour-card .hour-range { position: relative; padding: 0 22px 17px; border: 0; font-size: 16px; font-weight: 800; color: var(--hour-accent); font-variant-numeric: tabular-nums; }
.hour-card .hour-facts { margin: 0 16px 17px; padding: 10px 14px; background: #f5f9f8; border-radius: 5px; }
.hour-card .hour-facts>div { grid-template-columns: 34px minmax(0,1fr); padding: 7px 0; }
.hour-card .hour-facts>div:nth-child(2) { color: #66777a; }
.hour-card .hour-facts .hour-yi, .hour-card .hour-facts .hour-ji { padding-block: 10px; }
.hour-card .hour-facts .hour-yi dd, .hour-card .hour-facts .hour-ji dd { font-weight: 650; }
.hour-card .hour-selected-label { display: none; }
.hour-card.is-selected .hour-selected-label { display: inline-flex; min-height: 23px; }
.hour-card.is-selected { background: #14333a; box-shadow: 0 0 0 2px var(--hour-accent), 0 15px 36px color-mix(in srgb, var(--hour-accent) 26%, transparent); }
.hour-card.is-selected .hour-head { background: transparent; }
.hour-card.is-selected .hour-head strong { color: #fff; }
.hour-card.is-selected .hour-range { color: color-mix(in srgb, var(--hour-accent) 72%, white); }
.hour-card.is-selected .hour-facts { background: #0d2930; }
.hour-card.is-selected .hour-facts>div { border-color: #ffffff20; }
@media (max-width: 680px) {
  .hour-grid { gap: 13px; }
  .hour-card .hour-head { padding: 18px 17px 10px; }
  .hour-card .hour-range { padding: 0 17px 14px; }
  .hour-card .hour-facts { margin: 0 10px 11px; padding: 7px 10px; }
}