/* The event banner (web/js/banner.js). Dark glass pill, a turning conic border,
   flip-tile countdown. prefers-reduced-motion: nothing moves. */
@property --evb-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.evb { z-index: 12; display: flex; justify-content: center; pointer-events: none; }
.evb[hidden] { display: none; }
.evb-ring {
  position: relative; pointer-events: auto; padding: 3px; border-radius: 999px;
  border: 2px solid #0d0f1c; box-shadow: 0 5px 0 #0d0f1c;
  background: conic-gradient(from var(--evb-ang), #5cc8d8, #b06cff, #ff8fd1, #ffcc4d, #5cc8d8);
  animation: evbTurn 6s linear infinite;
}
@keyframes evbTurn { to { --evb-ang: 360deg; } }
.evb-pill {
  display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #1b1f36, #241c44); color: #f3efff; font-family: Fredoka, system-ui, sans-serif;
}
.evb-main { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; min-height: 44px; }
.evb-icon {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(180deg, #fffaf0, #e9e2ff); border: 2px solid #0d0f1c; box-shadow: 0 3px 0 #0d0f1c;
  animation: evbBob 2.6s ease-in-out infinite;
}
.evb-icon svg { width: 34px; height: 34px; }
@keyframes evbBob { 50% { transform: translateY(-3px) rotate(-3deg); } }
.evb-txt { display: flex; flex-direction: column; min-width: 0; }
.evb-kind { font-family: "Lilita One", Fredoka, sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase; color: #ff8fd1; line-height: 1.1; }
.evb-title { font-weight: 600; font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }

.evb-cd { display: flex; align-items: flex-start; gap: 4px; }
.evb-cd[hidden] { display: none; }
.evb-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.evb-unit small { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #a8a2cc; }
.evb-tiles { display: flex; gap: 2px; }
.evb-sep { font-family: "Lilita One", Fredoka, sans-serif; color: #ffcc4d; font-size: 20px; line-height: 34px; }
.evb-tile {
  position: relative; width: 22px; height: 34px; border-radius: 6px; overflow: hidden; perspective: 120px;
  background: linear-gradient(180deg, #2c2556 0 50%, #221b45 50% 100%); border: 1.5px solid #0d0f1c;
  font-family: "Lilita One", Fredoka, sans-serif; font-size: 22px; color: #ffcc4d; font-variant-numeric: tabular-nums;
}
.evb-tile::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(13, 15, 28, .9); }
.evb-d, .evb-flap { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; }
.evb-flap {
  background: linear-gradient(180deg, #2c2556 0 50%, transparent 50%); color: inherit; transform-origin: 50% 50%;
  clip-path: inset(0 0 50% 0); animation: evbFlip .32s ease-in forwards; backface-visibility: hidden;
}
@keyframes evbFlip { to { transform: rotateX(-90deg); } }

/* The last hour: coral digits, a pulsing glow. */
.evb.soon .evb-tile { color: #ff7a6b; }
.evb.soon .evb-sep { color: #ff7a6b; }
.evb.soon .evb-ring { animation: evbTurn 6s linear infinite, evbPulse 1.6s ease-in-out infinite; }
@keyframes evbPulse { 50% { box-shadow: 0 5px 0 #0d0f1c, 0 0 26px 6px rgba(255, 122, 107, .55); } }

/* Live: the pill turns gold. */
.evb.live .evb-pill { background: linear-gradient(135deg, #ffd766, #f5b72f); color: #3a2a05; }
.evb.live .evb-kind { color: #7a2a57; }
.evb-live { font-family: "Lilita One", Fredoka, sans-serif; font-size: 22px; letter-spacing: 3px; color: #3a2a05; padding: 0 6px; }
.evb-live[hidden] { display: none; }
.evb-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 15px;
  background: #2e2748; color: #fffaf0; text-decoration: none; border: 2px solid #0d0f1c; box-shadow: 0 3px 0 #0d0f1c; white-space: nowrap;
}
.evb-cta[hidden] { display: none; }
.evb-confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.evb-confetti i { position: absolute; width: 7px; height: 11px; border-radius: 2px; animation: evbConf 1.4s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes evbConf { to { transform: translate(var(--dx), calc(var(--dy) + 70px)) rotate(var(--r)); opacity: 0; } }

/* The slim version, under the header of the marketplace and the leaderboards. */
.evb.slim { margin: 0 0 18px; }
.evb.slim .evb-pill { gap: 10px; padding: 5px 8px 5px 5px; }
.evb.slim .evb-icon { width: 34px; height: 34px; border-radius: 10px; }
.evb.slim .evb-icon svg { width: 26px; height: 26px; }
.evb.slim .evb-tile { width: 18px; height: 28px; font-size: 18px; }
.evb.slim .evb-sep { font-size: 16px; line-height: 28px; }
.evb.slim .evb-kind { font-size: 13px; }
.evb.slim .evb-title { font-size: 15px; }

/* The detail sheet. */
.evsheet { border: 0; padding: 0; background: transparent; max-width: min(460px, calc(100vw - 24px)); }
.evsheet::backdrop { background: rgba(18, 16, 40, .55); }
.evs-card {
  position: relative; padding: 24px 24px 22px; border-radius: 22px; border: 2px solid #0d0f1c; box-shadow: 0 6px 0 #0d0f1c;
  background: linear-gradient(135deg, #1b1f36, #241c44); color: #f3efff; font-family: Fredoka, system-ui, sans-serif;
}
.evs-head { display: flex; align-items: center; gap: 10px; }
.evs-card h2 { margin: 12px 0 6px; font-family: "Lilita One", Fredoka, sans-serif; font-weight: 400; font-size: 28px; letter-spacing: .5px; }
.evs-sub { margin: 0 0 10px; color: #c9c3e6; font-size: 16px; line-height: 1.45; }
.evs-card dl { margin: 12px 0 0; display: grid; gap: 4px; }
.evs-card dt { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #a8a2cc; margin-top: 8px; }
.evs-card dd { margin: 0; font-size: 15px; line-height: 1.45; }
.evs-tz { color: #a8a2cc; font-size: 13px; }
.evs-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; border: 2px solid #3a4180; background: transparent; color: #f3efff; cursor: pointer; display: grid; place-items: center; }
.evs-x svg { width: 18px; height: 18px; }
.evs-cta { display: flex; align-items: center; justify-content: center; margin-top: 18px; min-height: 48px; border-radius: 14px; background: #f5b72f; color: #3a2a05; font-weight: 600; text-decoration: none; border: 2px solid #0d0f1c; box-shadow: 0 4px 0 #0d0f1c; }

@media (max-width: 720px) {
  .evb-title { display: none; }
  .evb-icon { width: 36px; height: 36px; border-radius: 11px; }
  .evb-icon svg { width: 26px; height: 26px; }
  .evb-tile { width: 16px; height: 26px; font-size: 17px; }
  .evb-sep { font-size: 15px; line-height: 26px; }
  .evb-unit small { font-size: 9px; }
  .evb-pill { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .evb-ring, .evb.soon .evb-ring, .evb-icon { animation: none; }
  .evb-flap, .evb-confetti { display: none; }
}

.evb { position: relative; }

/* The slim live rent ticker in every page's header (web/js/ticker.js). */
.rtick { display: inline-flex; align-items: center; gap: 8px; font-family: Fredoka, system-ui, sans-serif; font-size: 14px; font-weight: 500; white-space: nowrap;
  background: linear-gradient(135deg, #1b1f36, #241c44); color: #f3efff; border: 2px solid #0d0f1c; border-radius: 99px; padding: 3px 12px 3px 5px; align-self: flex-start; }
.rtick[hidden] { display: none; }
.rtick svg { width: 18px; height: 18px; flex: none; }
.rtick b { font-family: "Lilita One", Fredoka, sans-serif; font-weight: 400; font-size: 16px; letter-spacing: .3px; color: #ffcc4d; font-variant-numeric: tabular-nums; }
.rtick .sep { opacity: .5; }

/* Rolling digits (web/js/rentui.js odometer). */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo-d { display: inline-block; height: 1em; line-height: 1em; overflow: hidden; }
.odo-col { display: flex; flex-direction: column; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.odo-col span { display: block; height: 1em; line-height: 1em; text-align: center; }
@media (prefers-reduced-motion: reduce) { .odo-col { transition: none; } }