.promo-portal {
  --portal-red: #ff171d;
  --portal-red-dark: #8d1118;
  min-height: 100vh;
  padding: 28px 28px 80px;
  background:
    radial-gradient(circle at 22% 24%, rgba(207, 25, 25, .30), transparent 35%),
    radial-gradient(circle at 63% 75%, rgba(132, 13, 13, .20), transparent 38%),
    linear-gradient(135deg, #1b0506 0%, #050303 52%, #020202 100%) !important;
}

.promo-portal::before {
  background-image:
    linear-gradient(rgba(255, 35, 35, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 35, 35, .035) 1px, transparent 1px) !important;
}

.promo-portal-back { color: #c7bfc0; }
.promo-portal-shell { width: min(1720px, 100%); }
.promo-portal-logo { width: min(430px, 72vw); height: 122px; }
.promo-portal-kicker { color: #aaa2a4; }

.promo-portal-card,
.promo-code-card,
.promo-verified-account,
.promo-tabs,
.promo-tab-panel {
  border: 1px solid rgba(255, 31, 38, .30) !important;
  background: rgba(15, 2, 3, .86) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .42) !important;
}

.promo-portal-card input,
.promo-code-card input {
  border-color: rgba(255, 31, 38, .38) !important;
  background: rgba(4, 0, 0, .84) !important;
}

.promo-portal-card input:focus,
.promo-code-card input:focus {
  border-color: var(--portal-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 23, 29, .14) !important;
}

.promo-portal-card button,
.promo-code-card button {
  background: linear-gradient(90deg, var(--portal-red-dark), var(--portal-red)) !important;
}

.promo-verified-account small { color: var(--portal-red) !important; }

.promo-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 22px 0 26px;
  padding: 8px;
  border-radius: 999px;
}

.promo-tabs button {
  min-height: 62px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #aaa5ad;
  font: 700 18px/1 Poppins, sans-serif;
  cursor: pointer;
}

.promo-tabs button.active {
  background: linear-gradient(90deg, #a31119, var(--portal-red));
  box-shadow: 0 0 24px rgba(255, 23, 29, .28);
  color: #fff;
}

.promo-tab-panel { padding: 28px; }
.promo-tab-panel[hidden] { display: none !important; }
.promo-tab-panel .promo-code-card { border: 0 !important; box-shadow: none !important; }
.promo-code-panel .promo-code-card { padding: 0 !important; background: transparent !important; }
.promo-code-panel .promo-code-card > svg,
.promo-code-panel .promo-code-card > h1 { display: none !important; }
.promo-code-panel .promo-code-card form { margin: 0 !important; }

.promo-confirm-overlay { position: fixed; inset: 0; z-index: 100100; display: grid; place-items: center; padding: 24px; background: rgba(3, 0, 0, .78); backdrop-filter: blur(7px); }
.promo-confirm-modal { width: min(620px, 100%); padding: 38px 40px 34px; border: 1px solid rgba(255, 31, 38, .42); border-radius: 24px; background: rgba(17, 4, 5, .97); box-shadow: 0 30px 90px rgba(0, 0, 0, .65); }
.promo-confirm-modal h1 { margin: 0 0 28px; text-align: center; font-size: 28px; }
.promo-confirm-modal dl { margin: 0; }
.promo-confirm-modal dl div { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.09); }
.promo-confirm-modal dt { color: #aaa5ad; font-size: 19px; font-weight: 600; }
.promo-confirm-modal dd { margin: 0; color: #fff; font-size: 19px; font-weight: 700; }
.promo-confirm-modal p { margin: 34px 0 22px; color: #aaa5ad; text-align: center; font-size: 20px; }
.promo-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.promo-confirm-actions button { min-height: 64px; border: 1px solid rgba(255,31,38,.38); border-radius: 18px; background: #241b1c; color: #fff; font-size: 20px; font-weight: 800; cursor: pointer; }
.promo-confirm-actions button:last-child { border: 0; background: linear-gradient(90deg, #a71119, #ff171d); }

.promo-bonus-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
  padding: 7px;
  border: 1px solid rgba(255, 31, 38, .28);
  border-radius: 999px;
}

.promo-bonus-filters button {
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #aaa5ad;
  font-weight: 700;
  cursor: pointer;
}

.promo-bonus-filters button.active {
  background: linear-gradient(90deg, #9c1218, #d31c22);
  color: #fff;
}

.promo-claim-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.promo-claim-card {
  overflow: hidden;
  border: 1px solid rgba(255, 31, 38, .30);
  border-radius: 14px;
  background: #150405;
}

.promo-claim-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.promo-claim-card div { padding: 14px; }
.promo-claim-card h2 { min-height: 48px; margin: 0; font-size: 16px; line-height: 1.45; }
.promo-claim-card p { margin: 8px 0 12px; color: var(--portal-red); font-size: 12px; }
.promo-claim-card a {
  display: grid;
  min-height: 46px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(90deg, #a51118, var(--portal-red));
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.promo-wheel-panel { min-height: 580px; text-align: center; }
.promo-wheel-panel h1 { margin: 18px 0 4px; }
.promo-wheel-panel p { color: #c9c1c2; }
.promo-wheel {
  position: relative;
  width: min(410px, 78vw);
  aspect-ratio: 1;
  margin: 28px auto;
  border: 14px solid #153d21;
  border-radius: 50%;
  background: conic-gradient(#0f2d19 0 60deg, #081c10 60deg 120deg, #123820 120deg 180deg, #092313 180deg 240deg, #10311b 240deg 300deg, #07170d 300deg);
  box-shadow: inset 0 0 0 5px #a48637, 0 0 35px rgba(28, 124, 55, .24);
}
.promo-wheel::before {
  position: absolute;
  top: -33px;
  left: 50%;
  content: "";
  border: 24px solid transparent;
  border-top: 0;
  border-bottom-color: #23883b;
  transform: translateX(-50%) rotate(180deg);
}
.promo-wheel::after {
  position: absolute;
  inset: 42%;
  content: "✦";
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2f8e45;
  box-shadow: 0 0 0 5px #366e42;
  color: #020202;
  font-size: 28px;
}
.promo-wheel-labels { position: absolute; inset: 0; }
.promo-wheel-labels span { position: absolute; left: 50%; top: 50%; width: 110px; margin-left: -55px; color: #a9aca9; font-size: 13px; transform-origin: 55px 0; }
.promo-wheel-labels span:nth-child(1) { transform: rotate(30deg) translateY(-150px) rotate(-30deg); }
.promo-wheel-labels span:nth-child(2) { transform: rotate(90deg) translateY(-150px) rotate(-90deg); }
.promo-wheel-labels span:nth-child(3) { transform: rotate(150deg) translateY(-150px) rotate(-150deg); }
.promo-wheel-labels span:nth-child(4) { transform: rotate(210deg) translateY(-150px) rotate(-210deg); }
.promo-wheel-labels span:nth-child(5) { transform: rotate(270deg) translateY(-150px) rotate(-270deg); }
.promo-wheel-labels span:nth-child(6) { transform: rotate(330deg) translateY(-150px) rotate(-330deg); }
.promo-wheel-button { min-width: 130px; min-height: 52px; border: 0; border-radius: 14px; background: #7b171b; color: #a99899; font-weight: 800; cursor: not-allowed; }

@media (min-width: 901px) {
  .promo-portal {
    width: 80%;
    max-width: 1260px;
    margin-inline: auto;
    padding: 32px 28px 80px;
  }
  .promo-portal-back { display: none; }
  .promo-portal-shell { width: 100%; }
  .promo-portal-logo { width: 280px; height: 65px; margin-bottom: 28px; }
  .promo-portal-kicker { width: min(430px, 100%); margin-bottom: 16px; font-size: 15px; line-height: 1.45; }
  .promo-portal-card { min-height: 226px; padding: 28px; border-radius: 18px; }
  .promo-portal-card > svg { display: none; }
  .promo-portal-card h1 { margin-bottom: 14px; font-size: 16px; }
  .promo-portal-card form { gap: 0; }
  .promo-portal-card label { gap: 8px; font-size: 14px; }
  .promo-portal-card input { height: 51px; margin-bottom: 12px; padding-inline: 16px; font-size: 16px; }
  .promo-portal-card button { min-height: 50px; font-size: 16px; }
  .promo-verified-account { min-height: 96px; padding-block: 22px; border-radius: 18px; }
  .promo-verified-account small { font-size: 14px; }
  .promo-verified-account strong { font-size: 21px; }
  .promo-tabs button { min-height: 64px; font-size: 19px; }
  .promo-code-card h1 { font-size: 23px; }
  .promo-code-card label { font-size: 16px; }
  .promo-code-card input { height: 62px; font-size: 17px; }
  .promo-code-card button { min-height: 62px; font-size: 18px; }
  .promo-code-panel { padding: 24px; }
  .promo-code-panel .promo-code-card label { font-size: 13px; }
  .promo-code-panel .promo-code-card input { height: 52px; font-size: 15px; }
  .promo-code-panel .promo-code-card button { min-height: 52px; font-size: 15px; }
  .promo-bonus-filters button { min-height: 54px; font-size: 16px; }
  .promo-claim-card h2 { min-height: 54px; font-size: 18px; }
  .promo-claim-card p { font-size: 14px; }
  .promo-claim-card a { min-height: 52px; font-size: 16px; }
  .promo-wheel-panel h1 { font-size: 28px; }
  .promo-wheel-panel p { font-size: 17px; }
  .promo-site-rail {
    position: fixed;
    inset-block: 0;
    z-index: 4;
    display: flex;
    width: 10%;
    max-width: 160px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: radial-gradient(circle at center, rgba(141, 28, 28, .34), transparent 70%), linear-gradient(90deg, #110505, #4f1113 52%, #100404);
    color: #fff;
    text-decoration: none;
  }
  .promo-site-rail.left { left: 0; }
  .promo-site-rail.right { right: 0; }
  .promo-site-rail b { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #ffffff47; border-radius: 50%; font-size: 21px; }
  .promo-site-rail span { font-size: 13px; font-weight: 800; letter-spacing: 2px; writing-mode: vertical-rl; transform: rotate(180deg); }

  /* Desktop account/profile typography follows the larger original layout. */
  .account-shell { grid-template-columns: clamp(300px, 20vw, 400px) minmax(0, 1fr); gap: 14px; }
  .account-sidebar { padding-inline: 16px; }
  .account-sidebar summary { height: 54px; gap: 11px; font-size: 17px; }
  .account-sidebar summary > svg:first-child { width: 22px; height: 22px; }
  .account-sidebar details a { height: 44px; padding-left: 46px; font-size: 15px; }
  .account-sidebar details a::before { left: 25px; height: 20px; }
  .account-exit { margin-top: 18px; font-size: 15px; }
  .account-content > header { height: 54px; padding-inline: 22px; }
  .account-content > header h1 { font-size: 18px; }
  .profile-detail { padding: 36px 58px 78px; }
  .profile-action { height: 58px; }
  .profile-action a { height: 44px; padding-inline: 20px; gap: 8px; font-size: 14px; }
  .profile-action a svg { width: 18px; height: 18px; }
  .profile-columns { gap: 18px; margin-top: 20px; }
  .profile-row {
    min-height: 56px;
    margin-bottom: 18px;
    padding-inline: 20px;
    grid-template-columns: 160px 16px minmax(0, 1fr);
    font-size: 14px;
  }
  .profile-row b { font-size: 15px; }
  .money-row { grid-template-columns: 160px 16px minmax(0, 1fr) 20px; }
  .money-row svg { width: 16px; height: 16px; }
}

@media (max-width: 900px) {
  .promo-site-rail { display: none; }
  .promo-claim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .promo-tab-panel { padding: 16px; }
}

@media (max-width: 600px) {
  .promo-portal { padding: 14px 10px 60px; }
  .promo-tabs { border-radius: 16px; }
  .promo-tabs button { min-height: 48px; font-size: 12px; }
  .promo-bonus-filters button { min-height: 42px; font-size: 11px; }
  .promo-claim-card h2 { min-height: 40px; font-size: 12px; }
  .promo-claim-card div { padding: 10px; }
  .promo-wheel-panel { min-height: 460px; }
  .promo-confirm-overlay { padding: 14px; }
  .promo-confirm-modal { padding: 24px 20px; border-radius: 18px; }
  .promo-confirm-modal h1 { font-size: 22px; }
  .promo-confirm-modal dt,
  .promo-confirm-modal dd { font-size: 15px; }
  .promo-confirm-modal p { font-size: 16px; }
  .promo-confirm-actions button { min-height: 52px; font-size: 16px; }
}