.rh-card {
  --rh-amber: #f0a020;
  --rh-ember: #c2410c;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  isolation: isolate;
  background: #120c08;
  border: 1px solid rgba(240, 160, 32, 0.22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  cursor: pointer;
}
.rh-card.is-s { height: 92px; }
.rh-card.is-m { height: 118px; }
.rh-card.is-l { height: 154px; }
.rh-card.is-rounded { border-radius: 16px; }
.rh-card.is-pill { border-radius: 22px; }
.rh-card.is-square { border-radius: 8px; }
.rh-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center;
}
.rh-card.is-cover .rh-card-photo { object-fit: cover; }
.rh-card.is-contain .rh-card-photo { object-fit: contain; background: #120c08; }
.rh-card.is-ken .rh-card-photo { animation: rh-ken 18s ease-in-out infinite alternate; }
.rh-card.is-pulse { animation: rh-pulse 2.8s ease-in-out infinite; }
.rh-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 8, 6, 0.08) 0%, rgba(12, 8, 6, 0.72) 72%, rgba(12, 8, 6, 0.88) 100%);
  pointer-events: none;
}
.rh-card-loader {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rh-amber), var(--rh-ember), transparent);
  background-size: 160% 100%;
  animation: rh-load 2.4s ease-in-out infinite;
  pointer-events: none;
}
.rh-card-ui {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.6rem;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.45rem;
  pointer-events: none;
}
.rh-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: inherit;
  text-decoration: none;
}
.rh-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.22rem;
  min-width: 0;
  color: #f8f4ee;
}
.rh-kicker {
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
}
.rh-kicker small {
  display: block;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.15;
  color: #e0b57a;
  transition: color .25s ease, text-shadow .25s ease;
}
.rh-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.rh-mark {
  display: block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.32);
  transition: box-shadow .25s ease, filter .25s ease;
}
.rh-wordmark {
  display: block;
  height: 16px;
  width: auto;
  user-select: none;
  pointer-events: none;
  transition: filter .25s ease;
}
.rh-speed {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  color: #f8f4ee;
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 160, 32, 0.35);
  background: rgba(12, 8, 6, 0.45);
  white-space: nowrap;
}
.rh-card-place {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.16rem 0.38rem 0.16rem 0.26rem;
  border-radius: 999px;
  background: rgba(12, 8, 6, 0.58);
  border: 1px solid rgba(240, 160, 32, 0.28);
  backdrop-filter: blur(8px);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.rh-flag {
  display: block;
  width: 16px;
  height: 11px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.rh-card-place em {
  font-style: normal;
  letter-spacing: 0.16em;
  font-size: 0.62rem;
  font-weight: 800;
  color: #f8f4ee;
}
.rh-card.is-quiet { box-shadow: none; }
.rh-card.is-strong { box-shadow: 0 0 0 1px rgba(240, 160, 32, 0.28), 0 12px 30px rgba(194, 65, 12, 0.22); }
.rh-card:hover,
.rh-card:focus-within {
  border-color: var(--rh-amber);
  box-shadow: 0 0 0 1px var(--rh-amber), 0 14px 36px rgba(240, 160, 32, 0.28);
  transform: translateY(-1px);
}
.rh-card:hover .rh-mark,
.rh-card:focus-within .rh-mark {
  filter: drop-shadow(0 0 10px rgba(240, 160, 32, 0.7));
  box-shadow: 0 0 0 1px var(--rh-amber), 0 6px 16px rgba(194, 65, 12, 0.45);
}
.rh-card:hover .rh-kicker small,
.rh-card:focus-within .rh-kicker small {
  color: #ffe7b0;
  text-shadow: 0 0 12px rgba(240, 160, 32, 0.55);
}
.rh-card:hover .rh-wordmark,
.rh-card:focus-within .rh-wordmark {
  filter: drop-shadow(0 0 10px rgba(240, 160, 32, 0.55));
}
.rh-card:hover .rh-card-place,
.rh-card:focus-within .rh-card-place,
.rh-card:hover .rh-speed,
.rh-card:focus-within .rh-speed {
  border-color: var(--rh-amber);
  box-shadow: 0 0 14px rgba(240, 160, 32, 0.28);
}
.rh-card:hover .rh-card-loader,
.rh-card:focus-within .rh-card-loader {
  box-shadow: 0 0 12px var(--rh-amber);
}
.app-footer .rh-card { margin: 0 auto 1rem; max-width: 18rem; }
@keyframes rh-ken {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.16) translate3d(-3%, -2%, 0); }
}
@keyframes rh-load {
  0% { background-position: 120% 0; opacity: 0.35; }
  50% { opacity: 1; }
  100% { background-position: -20% 0; opacity: 0.35; }
}
@keyframes rh-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240, 160, 32, 0.16); }
  50% { box-shadow: 0 0 0 1px var(--rh-amber), 0 0 22px rgba(240, 160, 32, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .rh-card-photo, .rh-card-loader, .rh-card.is-pulse { animation: none; }
  .rh-card:hover { transform: none; }
}
.site-gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #07090c;
  color: #f3f7fa;
}
.gate-card {
  width: min(26rem, calc(100% - 2rem));
  display: grid;
  gap: 0.8rem;
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: #10161d;
}
.gate-card h1 { margin: 0; }
.gate-card form { display: grid; gap: 0.7rem; }
.gate-card input {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0b1016;
  color: inherit;
  padding: 0.45rem 0.7rem;
}
.sponsor-row.is-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }